major refactoring

- move instances to new file
- import functions as modules
- add docstrings to helper functions
- add threaded populate() function
- remove unused functions and files
- add typing info to helper functions
- other unremembered changes to the client

src/views/FolderView.vue

@@ -1,18 +1,18 @@
 <template>
   <div id="f-view-parent" class="rounded">
     <div class="fixed">
-      <Header :path="path" />
+      <Header :path="path" :first_song="songs[0]" />
     </div>
     <div id="scrollable" ref="scrollable">
-      <FolderList :folders="folders" />
-      <div class="separator" v-if="folders.length && songs.length"></div>
       <SongList :songs="songs" />
+      <div class="separator" v-if="folders.length && songs.length"></div>
+      <FolderList :folders="folders" />
     </div>
   </div>
 </template>
 
 <script>
-import { ref } from "@vue/reactivity";
+import { computed, ref } from "@vue/reactivity";
 import { useRoute } from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
@@ -33,7 +33,7 @@ export default {
     const route = useRoute();
     const path = ref(route.params.path);
 
-    const songs = ref(state.song_list);
+    const song_list = ref(state.song_list);
     const folders = ref(state.folder_list);
 
     const scrollable = ref(null);
@@ -42,6 +42,38 @@ export default {
       console.log("focusSearch");
     }
 
+    const search_query = ref(state.search_query);
+    const filters = ref(state.filters);
+
+    const songs = computed(() => {
+      const songs = [];
+
+      if (!filters.value.includes("🈁")) {
+        return song_list.value;
+      }
+
+      if (search_query.value.length > 2) {
+        state.loading.value = true;
+
+        for (let i = 0; i < song_list.value.length; i++) {
+          if (
+            song_list.value[i].title
+              .toLowerCase()
+              .includes(search_query.value.toLowerCase())
+          ) {
+            songs.push(song_list.value[i]);
+          }
+        }
+
+        state.song_list.value = songs;
+        state.loading.value = false;
+
+        return songs;
+      } else {
+        return song_list.value;
+      }
+    });
+
     onMounted(() => {
       const getPathFolders = (path, last_id) => {
         state.loading.value = true;
@@ -89,7 +121,6 @@ export default {
   height: min-content;
   width: calc(100% - 1rem);
   top: 0.5rem;
-
 }
 
 #scrollable {