try an experimental search page redesign

src/assets/scss/Global/app-grid.scss

@@ -15,7 +15,7 @@
   grid-area: content;
   margin-right: calc(0rem - ($medium + 2px));
   padding-right: calc($medium);
-
+  
   overflow: hidden;
 }
 
@@ -67,7 +67,7 @@
   }
 
   // show scrollbars on search page
-  .search-view {
-    margin-right: -1rem;
-  }
+  // .search-view {
+  //   margin-right: -1rem;
+  // }
 }

src/assets/scss/Global/basic.scss

@@ -138,4 +138,4 @@ button {
 #tooltip[data-popper-reference-hidden] {
   visibility: hidden !important;
   pointer-events: none;
-}
+}

src/components/LeftSidebar/Navigation.vue

@@ -57,6 +57,7 @@ const menus = [
   {
     name: "search",
     route_name: Routes.search,
+    params: { page: "top" },
     icon: SearchSvg,
   },
   {

src/components/RightSideBar/SearchInput.vue

@@ -3,47 +3,28 @@
     <div id="ginner" tabindex="0" class="bg-primary">
       <button
         :title="
-          tabs.current === tabs.tabs.search
-            ? 'back to queue'
-            : 'go to search'
+          tabs.current === tabs.tabs.search ? 'back to queue' : 'go to search'
         "
       >
         <SearchSvg
-          v-if="tabs.current === tabs.tabs.queue"
-          @click.prevent="tabs.switchToSearch"
+          v-if="on_nav || tabs.current === tabs.tabs.queue"
+          @click.prevent="!on_nav && tabs.switchToSearch()"
         />
         <BackSvg
-          v-if="tabs.current === tabs.tabs.search"
+          v-else-if="tabs.current === tabs.tabs.search"
           @click.prevent="tabs.switchToQueue"
         />
       </button>
       <input
         id="globalsearch"
         v-model.trim="search.query"
-        placeholder="Type to search"
-        type="search"
+        placeholder="Search your library"
+        type="text"
+        autocomplete="off"
         @blur.prevent="removeFocusedClass"
         @focus.prevent="addFocusedClass"
       />
     </div>
-    <!-- <div class="buttons rounded-sm bg-primary">
-      <button
-        @click="tabs.switchToQueue"
-        v-if="tabs.current !== tabs.tabs.queue"
-        name="switch to queue tab"
-      >
-        <QueueSvg />
-      </button>
-      <button
-        @click="tabs.switchToSearch"
-        v-if="tabs.current !== tabs.tabs.search"
-        name="switch to search tab"
-
-      >
-        <SearchSvg />
-      </button>
-    </div> -->
-    <!-- <button>Global Search this that</button> -->
   </div>
 </template>
 
@@ -54,6 +35,10 @@ import SearchSvg from "@/assets/icons/search.svg";
 import useSearchStore from "@/stores/search";
 import useTabStore from "@/stores/tabs";
 
+defineProps<{
+  on_nav?: boolean;
+}>();
+
 const search = useSearchStore();
 const tabs = useTabStore();
 let classList: DOMTokenList | undefined;
@@ -82,7 +67,6 @@ function removeFocusedClass() {
     display: flex;
     align-items: center;
     gap: $small;
-    padding: 0 $small;
     border-radius: 3rem;
 
     button {
@@ -91,7 +75,6 @@ function removeFocusedClass() {
       padding: 0;
       border-radius: 3rem;
       cursor: pointer;
-      margin-left: -$smaller;
 
       &:hover {
         transition: all 0.2s ease;

src/components/nav/Titles/SearchTitle.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="nav-search-input">
-    <SearchInput />
-    <div id="nav-tab-headers"></div>
+    <SearchInput :on_nav="true" />
   </div>
 </template>
 
@@ -11,28 +10,12 @@ import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 
 <style lang="scss">
 .nav-search-input {
-  display: flex;
-  grid-template-columns: repeat(3, 1fr);
   align-items: center;
-  justify-content: space-between;
-  height: 2rem;
+  justify-content: space-evenly;
 
-  #gsearch-input {
-    display: unset;
-
-    #ginner {
-      max-width: 30rem;
-      margin: 0 auto;
-      border-radius: $small;
-    }
-
-    .buttons {
-      display: none;
-    }
-  }
-
-  .tabheaders {
-    margin: 0;
+  & > div {
+    width: 70%;
+    margin: 0 auto;
   }
 }
 </style>

src/router/routes.ts

@@ -81,9 +81,9 @@ const routes = [
     component: () => import("@/views/SettingsView.vue"),
   },
   {
-    path: "/search",
+    path: "/search/:page",
     name: "SearchView",
-    component: () => import("@/views/Search.vue"),
+    component: () => import("@/views/search/main.vue"),
   },
   {
     path: "/queue",

src/views/search/albums.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="search-albums-view"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+.search-albums-view {
+  height: 100%;
+}
+</style>

src/views/search/artists.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="search-artists-view"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+.search-artists-view {
+  height: 100%;
+}
+</style>

src/views/search/folders.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="search-folders-view"></div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss">
+.search-folders-view {
+  height: 100%;
+}
+</style>

src/views/search/main.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="search-view">
+    <div class="tabs">
+      <button v-for="page in pages">{{ page }}</button>
+    </div>
+    <div class="noscroll">
+      <component :is="getComponent()" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+
+import TracksPage from "./tracks.vue";
+import AlbumPage from "./albums.vue";
+import ArtistPage from "./artists.vue";
+
+enum pages {
+  tracks = "tracks",
+  albums = "albums",
+  artists = "artists",
+}
+
+const route = useRoute();
+const page = route.params.page as string;
+
+function getComponent() {
+  switch (page) {
+    case pages.tracks:
+      return TracksPage;
+    case pages.albums:
+      return AlbumPage;
+
+    case pages.artists:
+      return ArtistPage;
+
+    default:
+      return TracksPage;
+  }
+}
+</script>
+
+<style lang="scss">
+.search-view {
+  height: calc(100% - 1rem);
+  width: calc(100% - $small);
+  display: grid;
+  grid-template-rows: max-content 1fr;
+
+  .tabs {
+    width: fit-content;
+    display: flex;
+    gap: 1rem;
+    // margin: 0 auto;
+    margin-bottom: 1rem;
+
+    & > * {
+      background-color: $gray4;
+      padding: $small 1rem;
+      border-radius: $small;
+      text-transform: capitalize;
+    }
+  }
+}
+</style>

src/views/search/tracks.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="search-tracks-view">
+    <div class="noscroll">
+      <Layout :no_header="true" :tracks="search.tracks.value" />
+    </div>
+    <button @click.prevent="search.loadTracks">Load More</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Layout from "@/layouts/HeaderAndVList.vue";
+import useSearchStore from "@/stores/search";
+
+const search = useSearchStore();
+</script>
+
+<style lang="scss">
+.search-tracks-view {
+  height: 100%;
+
+  display: grid;
+  grid-template-rows: 1fr max-content;
+  gap: 1rem;
+
+  button {
+    width: fit-content;
+    margin: 0 auto;
+  }
+}
+</style>