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/components/FolderView/Header.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="folder-top flex">
     <div class="fname">
-      <button class="play image">
+      <button class="play image" @click="playThis(first_song)">
         <div class="icon"></div>
         Play
       </button>
@@ -10,25 +10,63 @@
         {{ path.split("/").splice(-1) + "" }}
       </div>
     </div>
+    <div class="search">
+      <input
+        type="text"
+        class="search-input"
+        placeholder="Ctrl + F"
+        v-model="search_query"
+        @keyup.enter="search()"
+      />
+      <div class="search-icon image"></div>
+    </div>
   </div>
 </template>
 
 <script>
+import perks from "@/composables/perks.js";
+
 export default {
-  props: ["path"],
+  props: ["path", "first_song"],
+  setup() {
+    return {
+      playThis: perks.updateQueue,
+    };
+  },
 };
 </script>
 
 <style lang="scss">
 .folder-top {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
   border-bottom: 1px solid $separator;
   width: calc(100% - 0.5rem);
   padding-bottom: $small;
   height: 3rem;
 }
 
+.folder-top .search {
+  width: 50%;
+  display: grid;
+  place-items: end;
+
+  .search-input {
+    max-width: 20rem;
+    width: 100%;
+    border: 1px solid $separator;
+    border-radius: .5rem;
+    padding-left: 1rem;
+    background-color: #46454500;
+    color: #fff;
+    font-size: 1rem;
+    line-height: 2.2rem;
+    outline: none;
+  }
+}
+
 .folder-top .fname {
-  // width: 50%;
+  width: 50%;
   display: flex;
   align-items: center;
 

src/components/FolderView/SongList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="folder">
-    <div class="table rounded" ref="songtitle" v-if="searchSongs.length">
+    <div class="table rounded" ref="songtitle" v-if="songs.length">
       <table>
         <thead>
           <tr>
@@ -12,20 +12,18 @@
         </thead>
         <tbody>
           <SongItem
-            :searchSongs="searchSongs"
             :songTitleWidth="songTitleWidth"
             :minWidth="minWidth"
-            v-for="song in searchSongs"
+            v-for="song in songs"
             :key="song"
             :song="song"
             :current="current"
-            :class="{ current: current._id == song._id }"
             @updateQueue="updateQueue"
           />
         </tbody>
       </table>
     </div>
-    <div ref="songtitle" v-else-if="searchSongs.length === 0 && search_query">
+    <div ref="songtitle" v-else-if="songs.length === 0 && search_query">
       <div class="no-results">
         <div class="icon"></div>
         <div class="text">❗ Track not found!</div>
@@ -36,7 +34,7 @@
 </template>
 
 <script>
-import { computed, ref, toRefs } from "@vue/reactivity";
+import { ref } from "@vue/reactivity";
 import { onMounted, onUnmounted } from "@vue/runtime-core";
 
 import SongItem from "../SongItem.vue";
@@ -48,8 +46,7 @@ export default {
   components: {
     SongItem,
   },
-  setup(props) {
-    const song_list = toRefs(props).songs;
+  setup() {
     const songtitle = ref(null);
     const songTitleWidth = ref(null);
 
@@ -86,32 +83,7 @@ export default {
       perks.updateQueue(song)
     }
 
-    const searchSongs = computed(() => {
-      const songs = [];
-
-      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.loading.value = false;
-
-        return songs;
-      } else {
-        return song_list.value;
-      }
-    });
-
     return {
-      searchSongs,
       updateQueue,
       songtitle,
       songTitleWidth,

src/components/Search.vue

@@ -176,7 +176,8 @@ export default {
     }
 
     watch(query, (new_query) => {
-      searchMusic(new_query);
+      // search music
+      // searchMusic(new_query);
 
       state.search_query.value = new_query;
       if (new_query !== "") {

src/components/SongItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr>
+  <tr :class="{ current: current._id == song._id }">
     <td
       :style="{ width: songTitleWidth + 'px' }"
       class="flex"
@@ -61,7 +61,7 @@ export default {
   props: ["song", "current", "songTitleWidth", "minWidth"],
   setup(props, { emit }) {
     function emitUpdate(song) {
-      emit('updateQueue', song);
+      emit("updateQueue", song);
     }
 
     return {