support using / to focus search input

- add an icon

src/components/RightSideBar/Search.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="right-search">
     <TabsWrapper>
-      <Tab name="Tracks" v-motion-slide-visible-left>
+      <Tab name="tracks" v-motion-slide-visible-left>
         <TracksGrid />
       </Tab>
-      <Tab name="Albums">
+      <Tab name="albums">
         <AlbumGrid />
       </Tab>
-      <Tab name="Artists">
+      <Tab name="artists">
         <ArtistGrid />
       </Tab>
     </TabsWrapper>

src/components/RightSideBar/SearchInput.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="gsearch-input">
+  <div id="gsearch-input">
-    <div class="input-loader">
+    <div id="ginner" tabindex="0">
+      <div class="icon image"></div>
       <input
         id="search"
         class="rounded"
         v-model="search.query"
         placeholder="Search your library"
         type="text"
+        @focus="focusThis()"
+        @blur="unfocusThis()"
       />
     </div>
   </div>
@@ -17,10 +20,17 @@ import useSearchStore from "../../stores/search";
 
 const search = useSearchStore();
 
+function focusThis() {
+  document.getElementById("ginner").classList.add("focused");
+}
+
+function unfocusThis() {
+  document.getElementById("ginner").classList.remove("focused");
+}
 </script>
 
 <style lang="scss">
-.gsearch-input {
+#gsearch-input {
   padding: $small;
   display: flex;
 
@@ -28,15 +38,20 @@ const search = useSearchStore();
     display: none;
   }
 
-  .input-loader {
+  #ginner {
     width: 100%;
     border-radius: 0.4rem;
     position: relative;
+    display: flex;
+    gap: $small;
+    background-color: $gray4;
+    height: 2.25rem;
 
-    ._loader {
+    .icon {
-      position: absolute;
+      width: 2rem;
-      top: -0.15rem;
+      background-image: url("../../assets/icons/search.svg");
-      right: 2rem;
+      background-size: 1.5rem;
+      margin-left: $smaller;
     }
 
     input {
@@ -45,16 +60,15 @@ const search = useSearchStore();
       width: 100%;
       border: none;
       line-height: 2.25rem;
-      background-color: $black;
       color: inherit;
       font-size: 1rem;
-      padding-left: 0.75rem;
+      background-color: transparent;
       outline: 2px solid transparent;
+    }
+  }
 
-      &:focus {
+  .focused {
     outline: solid $accent;
   }
 }
-  }
-}
 </style>

src/composables/keyboard.ts

@@ -64,11 +64,15 @@ export default function (queue: any) {
         if (!key_down_fired) {
           if (!ctrlKey) return;
           e.preventDefault();
-          focusSearchBox();
+          
 
           key_down_fired = true;
         }
       }
+      case "/": {{
+        e.preventDefault();
+        focusSearchBox();
+      }}
     }
   });
 }