restyle global search input

~ remove switch button, add click listeners to svg

src/assets/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.69434 13.6455C5.69434 13.9092 5.80859 14.1641 6.01074 14.3574L11.8027 20.1494C12.0137 20.3516 12.251 20.4482 12.4883 20.4482C13.042 20.4482 13.4375 20.0527 13.4375 19.5254C13.4375 19.2529 13.332 19.0156 13.1562 18.8486L11.1875 16.8535L8.58594 14.4805L10.6426 14.6035H21.3301C21.9014 14.6035 22.3057 14.208 22.3057 13.6455C22.3057 13.0742 21.9014 12.6875 21.3301 12.6875H10.6426L8.59473 12.8105L11.1875 10.4375L13.1562 8.44238C13.332 8.2666 13.4375 8.0293 13.4375 7.75684C13.4375 7.22949 13.042 6.84277 12.4883 6.84277C12.251 6.84277 12.0137 6.93066 11.7852 7.15039L6.01074 12.9336C5.80859 13.1182 5.69434 13.3818 5.69434 13.6455Z" fill="#F2F2F2"/>
+</svg>

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

@@ -1,12 +1,12 @@
 #app-grid {
   display: grid;
   grid-template-columns: min-content 1fr 29rem;
-  grid-template-rows: max-content 1fr max-content;
+  grid-template-rows: 42px 1fr max-content;
   grid-template-areas:
     "l-sidebar nav search-input"
     "l-sidebar content r-sidebar"
     "l-sidebar content r-sidebar"
-    "l-sidebar content bottombar";
+    "bottombar bottombar bottombar";
   height: calc(100vh);
   gap: 1rem;
   padding: $small 0;
@@ -112,4 +112,7 @@
 
 .b-bar {
   grid-area: bottombar;
+  width: calc(100% + 1.25rem);
+  margin-left: -$small;
+  margin-bottom: -$small;
 }

src/components/RightSideBar/NowPlayingRight.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="b-bar bg-primary pad-medium rounded" v-if="settings.show_alt_np">
+  <div class="b-bar bg-primary pad-medium noscroll" v-if="settings.show_alt_np">
     <div class="info">
       <img
         :src="paths.images.thumb.large + queue.currenttrack?.image"
@@ -51,9 +51,11 @@ const settings = useSettingsStore();
   display: grid;
   grid-template-rows: 1fr max-content;
   gap: 1rem;
-  padding: 1rem;
+  // padding: 1rem;
   padding-bottom: 1rem;
   position: relative;
+  height: 55px;
+  // width: 100%;
 
   .time {
     display: grid;

src/components/RightSideBar/SearchInput.vue

@@ -1,6 +1,22 @@
 <template>
   <div id="gsearch-input">
-    <div id="ginner" tabindex="0" class="bg-primary rounded-sm">
+    <div id="ginner" tabindex="0" class="bg-primary">
+      <button
+        :title="
+          tabs.current === tabs.tabs.search
+            ? 'back to queue'
+            : 'go to search'
+        "
+      >
+        <SearchSvg
+          v-if="tabs.current === tabs.tabs.queue"
+          @click.prevent="tabs.switchToSearch"
+        />
+        <BackSvg
+          v-if="tabs.current === tabs.tabs.search"
+          @click.prevent="tabs.switchToQueue"
+        />
+      </button>
       <input
         id="globalsearch"
         v-model.trim="search.query"
@@ -9,9 +25,8 @@
         @blur.prevent="removeFocusedClass"
         @focus.prevent="addFocusedClass"
       />
-      <SearchSvg />
     </div>
-    <div class="buttons rounded-sm bg-primary">
+    <!-- <div class="buttons rounded-sm bg-primary">
       <button
         @click="tabs.switchToQueue"
         v-if="tabs.current !== tabs.tabs.queue"
@@ -27,13 +42,14 @@
       >
         <SearchSvg />
       </button>
-    </div>
+    </div> -->
+    <!-- <button>Global Search this that</button> -->
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import QueueSvg from "@/assets/icons/queue.svg";
+import BackSvg from "@/assets/icons/arrow.svg";
 import SearchSvg from "@/assets/icons/search.svg";
 import useSearchStore from "@/stores/search";
 import useTabStore from "@/stores/tabs";
@@ -59,26 +75,29 @@ function removeFocusedClass() {
 #gsearch-input {
   display: grid;
   grid-template-columns: 1fr max-content;
-  gap: 1rem;
-
-  .buttons {
-    display: grid;
-    grid-auto-flow: column;
-    overflow: hidden;
-
-    button {
-      padding: 0 $small;
-      height: 100%;
-      border-radius: 0;
-    }
-  }
+  border-radius: 3rem;
 
   #ginner {
     width: 100%;
     display: flex;
     align-items: center;
-    gap: $smaller;
+    gap: $small;
     padding: 0 $small;
+    border-radius: 3rem;
+
+    button {
+      background: transparent;
+      width: 3rem;
+      padding: 0;
+      border-radius: 3rem;
+      cursor: pointer;
+      margin-left: -$smaller;
+
+      &:hover {
+        transition: all 0.2s ease;
+        background-color: $gray2;
+      }
+    }
 
     input {
       width: 100%;