From 077939bbdc5e18ccbb28a1ddc70b2b7de8d1dbf3 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Tue, 24 May 2022 13:29:08 +0300
Subject: [PATCH] support using / to focus search input

- add an icon
---
 src/components/RightSideBar/Search.vue      |  6 +--
 src/components/RightSideBar/SearchInput.vue | 42 ++++++++++++++-------
 src/composables/keyboard.ts                 |  6 ++-
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/components/RightSideBar/Search.vue b/src/components/RightSideBar/Search.vue
index b0e21249..66dc7961 100644
--- a/src/components/RightSideBar/Search.vue
+++ b/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>
diff --git a/src/components/RightSideBar/SearchInput.vue b/src/components/RightSideBar/SearchInput.vue
index 5681a864..0a5ccf29 100644
--- a/src/components/RightSideBar/SearchInput.vue
+++ b/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>
diff --git a/src/composables/keyboard.ts b/src/composables/keyboard.ts
index a9f7de70..f2774b98 100644
--- a/src/composables/keyboard.ts
+++ b/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();
+      }}
     }
   });
 }