client: collapse search on click outside

src/App.vue

@@ -65,7 +65,7 @@ export default {
     const isMagicFlag = computed(() => {
       return state.magic_flag.value;
     });
-
+    
     function toggleNav() {
       collapsed.value = !collapsed.value;
     }
@@ -89,13 +89,13 @@ export default {
 
     return {
       toggleNav,
-      collapsed,
-      up_next,
-      expandQueue,
       expandSearch,
       collapseSearch,
-      search,
       isMagicFlag,
+      expandQueue,
+      collapsed,
+      up_next,
+      search,
     };
   },
 };

src/components/Search.vue

@@ -86,7 +86,7 @@
 <script>
 import { ref, toRefs } from "@vue/reactivity";
 
-import { watch } from "@vue/runtime-core";
+import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 
 export default {
@@ -125,6 +125,10 @@ export default {
         title: "📁 Folder",
         icon: "📁",
       },
+      {
+        title: "🈁 Here",
+        icon: "🈁",
+      }
     ];
     const searchComponent = ref(null);
     const filters = ref(state.filters);
@@ -189,18 +193,24 @@ export default {
       }
     });
 
-    function hideScrollable() {
-      document.querySelector(".scrollable").classList.remove("v1");
-      document.querySelector(".scrollable").classList.add("v0");
-    }
+    onMounted(() => {
+      const dom = document.getElementsByClassName("right-search")[0]
 
+      document.addEventListener("click", (e) => {
+        var isClickedInside = dom.contains(e.target);
+
+        if (!isClickedInside) {
+          emit("collapseSearch");
+        }
+      });
+    });
+    
     return {
       addFilter,
       activateMagicFlag,
       removeMagicFlag,
       removeFilter,
       removeLastFilter,
-      hideScrollable,
       songs,
       albums,
       artists,

src/composables/perks.js

@@ -104,7 +104,6 @@ setTimeout(() => {
     });
 
     localStorage.setItem("current", JSON.stringify(new_current));
-    // localStorage.setItem("prev", JSON.stringify(old_current));
   });
 }, 1000);