try an experimental search page redesign

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>