Redesign page search input area

+ redefine global search input colors
+ redesign settings page
+ move settings text to a strings module
+ add title and description to now playing settings

src/components/LeftSidebar/index.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="l-sidebar noscroll border">
+  <div class="l-sidebar noscroll">
     <div class="withlogo">
       <Logo />
       <Navigation />
     </div>
 
-    <nowPlaying v-if="settings.show_default_np" />
+    <NPImg v-if="settings.use_np_img" />
   </div>
 </template>
 
 <script setup lang="ts">
 import Navigation from "@/components/LeftSidebar/Navigation.vue";
-import nowPlaying from "@/components/LeftSidebar/nowPlaying.vue";
+import NPImg from "@/components/LeftSidebar/nowPlayingImg.vue";
 import Logo from "@/components/Logo.vue";
 
 import useSettingsStore from "@/stores/settings";

src/components/RightSideBar/Main.vue

@@ -1,11 +1,6 @@
 <template>
-  <div
-    class="r-sidebar border"
-    :style="{
-      marginBottom: !settings.show_alt_np ? '-1rem' : '',
-    }"
-  >
-  <SearchInput />
+  <div class="r-sidebar">
+    <SearchInput />
     <div class="r-content noscroll">
       <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
         <DashBoard />
@@ -25,11 +20,9 @@ import Search from "./Search/Main.vue";
 import Queue from "./Queue.vue";
 import DashBoard from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";
-import useSettingsStore from "@/stores/settings";
 import SearchInput from "./SearchInput.vue";
 
 const tabs = useTabStore();
-const settings = useSettingsStore();
 </script>
 
 <style lang="scss">
@@ -41,6 +34,7 @@ const settings = useSettingsStore();
   padding-bottom: 1rem;
   border-top: none;
   border-bottom: none;
+  margin-bottom: -1rem;
 
   .gsearch-input {
     height: 2.5rem;

src/components/RightSideBar/SearchInput.vue

@@ -1,24 +1,20 @@
 <template>
   <div class="gsearch-input">
-    <div id="ginner" tabindex="0" class="bg-primary">
+    <div id="ginner" tabindex="0" ref="inputRef">
       <button
         :title="
           tabs.current === tabs.tabs.search ? 'back to queue' : 'go to search'
         "
+        @click.prevent="handleButton"
+        :class="{ no_bg: on_nav }"
       >
-        <SearchSvg
-          v-if="on_nav || tabs.current === tabs.tabs.queue"
-          @click.prevent="!on_nav && tabs.switchToSearch()"
-        />
-        <BackSvg
-          v-else-if="tabs.current === tabs.tabs.search"
-          @click.prevent="tabs.switchToQueue"
-        />
+        <SearchSvg v-if="on_nav || tabs.current === tabs.tabs.queue" />
+        <BackSvg v-else-if="tabs.current === tabs.tabs.search" />
       </button>
       <input
         id="globalsearch"
         v-model.trim="search.query"
-        placeholder="Search your library"
+        placeholder="Start typing to search"
         type="text"
         autocomplete="off"
         @blur.prevent="removeFocusedClass"
@@ -29,30 +25,39 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import BackSvg from "@/assets/icons/arrow.svg";
 import SearchSvg from "@/assets/icons/search.svg";
 import useSearchStore from "@/stores/search";
 import useTabStore from "@/stores/tabs";
 
-defineProps<{
+const props = defineProps<{
   on_nav?: boolean;
 }>();
 
-const search = useSearchStore();
 const tabs = useTabStore();
-let classList: DOMTokenList | undefined;
-
-onMounted(() => {
-  classList = document.getElementById("ginner")?.classList;
-});
+const search = useSearchStore();
 
+// HANDLE FOCUS
+const inputRef = ref<HTMLElement>();
 function addFocusedClass() {
-  classList?.add("search-focused");
+  inputRef.value?.classList.add("search-focused");
 }
 
 function removeFocusedClass() {
-  classList?.remove("search-focused");
+  inputRef.value?.classList.remove("search-focused");
+}
+
+// @end
+
+function handleButton() {
+  if (props.on_nav) return;
+
+  if (tabs.current === tabs.tabs.search) {
+    tabs.switchToQueue();
+  } else {
+    tabs.switchToSearch();
+  }
 }
 </script>
 
@@ -68,12 +73,14 @@ function removeFocusedClass() {
     align-items: center;
     gap: $small;
     border-radius: 3rem;
+    outline: solid 1px $gray3;
 
     button {
       background: transparent;
       width: 3rem;
       padding: 0;
       border-radius: 3rem;
+      height: 100%;
       cursor: pointer;
 
       &:hover {
@@ -82,6 +89,10 @@ function removeFocusedClass() {
       }
     }
 
+    button.no_bg {
+      pointer-events: none;
+    }
+
     input {
       width: 100%;
       border: none;
@@ -94,6 +105,6 @@ function removeFocusedClass() {
   }
 }
 .search-focused {
-  outline: solid $accent;
+  outline: solid $darkblue !important;
 }
 </style>

src/components/SettingsView/Components/Switch.vue

@@ -13,7 +13,7 @@ defineProps<{
 <style lang="scss">
 .switch {
   height: 1.5rem;
-  background-color: $gray;
+  background-color: $gray3;
   width: 2.5rem;
   padding: $smaller;
   position: relative;

src/components/SettingsView/Group.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="settingsgroup">
-    <div v-if="group.name || group.desc">
-      <h4 v-if="group.name">{{ group.name }}</h4>
+    <div v-if="group.title || group.desc" class="info">
+      <h4 v-if="group.title">{{ group.title }}</h4>
       <div class="desc" v-if="group.desc">{{ group.desc }}</div>
     </div>
-    <div class="setting rounded border pad-lg">
+    <div class="setting rounded pad-lg">
       <div
         v-for="(setting, index) in group.settings"
         :key="index"
@@ -39,21 +39,26 @@ defineProps<{
   display: grid;
   gap: $small;
   margin-top: 2rem;
-
+  
   &:first-child {
     margin-top: 0;
   }
 
+  .info {
+    margin-left: $smaller;
+  }
+
   h4 {
     margin: $small auto;
   }
-
+  
   .desc {
     opacity: 0.5;
-    font-size: 0.9rem;
+    font-size: 0.8rem;
   }
 
   .setting {
+    background-color: $gray;
     display: grid;
     gap: 1rem;
 

src/components/nav/Titles/Folder.vue

@@ -25,15 +25,15 @@
           </div>
         </div>
       </div>
-      <div>
-        <Input :page="Routes.folder" />
-      </div>
+      <SearchInput :page="Routes.folder" />
+      <!-- <div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Input from "@/components/shared/Input.vue";
+import SearchInput from "@/components/shared/Input.vue";
 import { Routes } from "@/composables/enums";
 import { subPath } from "@/interfaces";
 import { focusElem } from "@/utils";
@@ -55,7 +55,6 @@ onUpdated(() => {
   .folder {
     display: grid;
     grid-template-columns: 1fr max-content;
-    gap: $small;
 
     .fname-wrapper {
       width: 100%;
@@ -122,13 +121,13 @@ onUpdated(() => {
           }
         }
 
-        .inthisfolder > .text {
-          color: #fff;
-          font-weight: bold;
-          background-color: $gray;
+        // .inthisfolder > .text {
+        //   color: #fff;
+        //   font-weight: bold;
+        //   background-color: $gray;
 
-          transition: all 0.5s;
-        }
+        //   transition: all 0.5s;
+        // }
       }
     }
   }

src/components/shared/Input.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="header-input-wrapper rounded-sm" :class="{ showInput: clicked }">
-    <div class="search-svg" @click="handleFocus">
-      <SearchSvg />
-    </div>
+    <button
+      class="search-btn circular"
+      :class="{ 'btn-active': clicked }"
+      @click="handleFocus"
+    >
+      <SearchSvg /> Search
+    </button>
     <input
-      type="search"
-      class="header-input rounded-sm pad-sm"
+      class="header-input pad-sm"
       :class="{ showInput: clicked }"
-      placeholder="Search here"
+      placeholder="Type to search"
       v-model.trim="query"
       id="page-search"
       ref="inputRef"
@@ -26,7 +29,7 @@ import useFolderStore from "@/stores/pages/folder";
 import { Routes } from "@/composables/enums";
 import SearchSvg from "@/assets/icons/search.svg";
 
-const clicked = ref(true);
+const clicked = ref(false);
 const [playlist, album, folder] = [
   usePStore(),
   useAlbumStore(),
@@ -82,18 +85,19 @@ if (source) {
 
 <style lang="scss">
 .header-input-wrapper {
+  &.showInput {
+    width: 21.5rem;
+  }
+
   display: flex;
   flex-direction: row-reverse;
-  width: 1.5rem;
+  width: 7rem;
+  gap: $small;
   transition: all 0.25s;
-
-  &.showInput {
-    width: 15rem;
-  }
 }
 
 .header-input {
-  background-color: $gray3;
+  background-color: transparent;
   outline: none;
   border: none;
   color: inherit;
@@ -102,9 +106,12 @@ if (source) {
   transition: all 0.25s $overshoot;
   opacity: 0;
   transform: translateY(-1rem);
-
+  border-radius: 3rem;
+  padding-left: 1rem;
+  outline: solid 1px $gray1;
+  
   &:focus {
-    outline: solid;
+    outline: solid $darkblue;
   }
 
   &.showInput {
@@ -114,16 +121,9 @@ if (source) {
   }
 }
 
-.search-svg {
-  margin-top: $smaller;
+.search-btn {
   cursor: pointer;
-  width: 2.25rem;
-  height: 2rem;
-  z-index: 100;
-
-  svg {
-    display: block;
-    margin: 0 auto;
-  }
+  padding: 0 $small;
+  padding-right: 1rem;
 }
 </style>