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 class="input-loader">
+  <div id="gsearch-input">
+    <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 {
-      position: absolute;
-      top: -0.15rem;
-      right: 2rem;
+    .icon {
+      width: 2rem;
+      background-image: url("../../assets/icons/search.svg");
+      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 {
-        outline: solid $accent;
-      }
     }
   }
+
+  .focused {
+    outline: solid $accent;
+  }
 }
 </style>