add debounced ref module

src/components/FolderView/Header.vue

@@ -17,7 +17,7 @@
         type="text"
         class="search-input"
         placeholder="Ctrl + F"
-        v-model="search_query"
+        v-model="query"
         @keyup.enter="search()"
       />
       <div class="search-icon image"></div>
@@ -27,17 +27,25 @@
 
 <script>
 import perks from "@/composables/perks.js";
-import state from "@/composables/state.js";
+import { watch } from '@vue/runtime-core';
+import useDebouncedRef from '@/composables/useDebouncedRef.js';
 
 export default {
   props: ["path", "first_song"],
-  setup() {
+  setup(props, { emit }) {
+    const query = useDebouncedRef("", 400);
+
     function playFolder(song) {
       perks.updateQueue(song, "folder");
     }
+
+    watch(query, () => {
+      emit("search", query.value);
+    });
+
     return {
       playFolder,
-      search_query: state.search_query,
+      query,
     };
   },
 };
@@ -112,7 +120,7 @@ export default {
       background-image: url(../../assets/icons/folder.svg);
       margin-right: $small;
     }
-    
+
     @include phone-only {
       display: none;
     }

src/composables/useDebouncedRef.js

@@ -0,0 +1,34 @@
+import { ref, customRef } from 'vue'
+
+const debounce = (fn, delay = 0, immediate = false) => {
+  let timeout
+  return (...args) => {
+    if (immediate && !timeout) fn(...args)
+    clearTimeout(timeout)
+
+    timeout = setTimeout(() => {
+      fn(...args)
+    }, delay)
+  }
+}
+
+const useDebouncedRef = (initialValue, delay, immediate) => {
+  const state = ref(initialValue)
+  const debouncedRef = customRef((track, trigger) => ({
+    get() {
+      track()
+      return state.value
+    },
+    set: debounce(
+      value => {
+        state.value = value
+        trigger()
+      },
+      delay,
+      immediate
+    ),
+  }))
+  return debouncedRef
+}
+
+export default useDebouncedRef

src/views/FolderView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <Header :path="path" :first_song="songs[0]" />
+      <Header :path="path" :first_song="songs[0]" @search="filterSongs" />
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
@@ -38,37 +38,23 @@ export default {
 
     const scrollable = ref(null);
 
-    function focusSearch() {
-      console.log("focusSearch");
-    }
-
-    const search_query = ref(state.search_query);
-    const filters = ref(state.filters);
+    const query = ref('');
 
     const songs = computed(() => {
-      const songs = [];
-
-      if (!filters.value.includes("🈁")) {
-        return song_list.value;
-      }
-
-      if (search_query.value.length > 2) {
-        state.loading.value = true;
+      const songs_ = [];
 
+      if (query.value.length > 2) {
         for (let i = 0; i < song_list.value.length; i++) {
           if (
             song_list.value[i].title
               .toLowerCase()
-              .includes(search_query.value.toLowerCase())
+              .includes(query.value.toLowerCase())
           ) {
-            songs.push(song_list.value[i]);
+            songs_.push(song_list.value[i]);
           }
         }
 
-        state.song_list.value = songs;
-        state.loading.value = false;
-
-        return songs;
+        return songs_;
       } else {
         return song_list.value;
       }
@@ -99,8 +85,12 @@ export default {
       });
     });
 
+    function filterSongs(value) {
+      query.value = value;
+    }
+
     return {
-      focusSearch,
+      filterSongs,
       songs,
       folders,
       path,