From d74aee0c46838e8391961d6472c7ad6cf7228eef Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Fri, 31 Dec 2021 12:53:10 +0300
Subject: [PATCH] client: collapse search on click outside

---
 src/App.vue               | 10 +++++-----
 src/components/Search.vue | 22 ++++++++++++++++------
 src/composables/perks.js  |  1 -
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 798d949..92618e3 100644
--- a/src/App.vue
+++ b/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,
     };
   },
 };
diff --git a/src/components/Search.vue b/src/components/Search.vue
index ea983f6..0891744 100644
--- a/src/components/Search.vue
+++ b/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,
diff --git a/src/composables/perks.js b/src/composables/perks.js
index b83e0f8..b530fea 100644
--- a/src/composables/perks.js
+++ b/src/composables/perks.js
@@ -104,7 +104,6 @@ setTimeout(() => {
     });
 
     localStorage.setItem("current", JSON.stringify(new_current));
-    // localStorage.setItem("prev", JSON.stringify(old_current));
   });
 }, 1000);