add more bugs

src/components/FolderView/SearchBox.vue

@@ -28,7 +28,7 @@ export default {
 }
 
 .folder-top .fname {
-  width: 50%;
+  // width: 50%;
   display: flex;
   align-items: center;
 

src/components/FolderView/SongList.vue

@@ -137,6 +137,12 @@ export default {
     const current = ref(perks.current);
     const search_query = ref(state.search_query);
 
+    function doNothing(e) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      console.log('mwathani')
+    }
+
     const searchSongs = computed(() => {
       const songs = [];
 
@@ -162,6 +168,7 @@ export default {
 
     return {
       searchSongs,
+      doNothing,
       songtitle,
       songTitleWidth,
       minWidth,

src/components/RightSideBar/NowPlaying.vue

@@ -97,14 +97,7 @@ export default {
   height: 14rem;
   margin-top: .5rem;
   padding: 0.5rem;
-  background: rgb(14, 14, 14);
-  background: linear-gradient(
-    326deg,
-    rgb(0, 0, 0) 0%,
-    rgb(10, 10, 10) 13%,
-    rgba(0, 0, 0, 1) 43%,
-    rgba(0, 0, 0, 1) 100%
-  );
+  background: $card-dark;
   display: grid;
   grid-template-rows: 3fr 1fr;
 
@@ -137,17 +130,12 @@ export default {
       width: 100%;
       height: 0.25rem;
       cursor: pointer;
-      background: #1488cc; /* fallback for old browsers */
-      background: -webkit-linear-gradient(
-        to right,
-        #1488cc,
-        #2b32b2
-      ); /* Chrome 10-25, Safari 5.1-6 */
+      background: #1488cc;
       background: linear-gradient(
         to right,
         #1488cc,
         #2b32b2
-      ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+      );
     }
 
     input::-webkit-slider-thumb {

src/components/Search.vue

@@ -88,21 +88,13 @@ import { ref, toRefs } from "@vue/reactivity";
 
 import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
+import searchMusic from "../composables/searchMusic.js";
+// import useDebounce from "../composed/useDebounce.js";
 
 export default {
   emits: ["expandSearch", "collapseSearch"],
   props: ["search"],
   setup(props, { emit }) {
-    const songs = [
-      {
-        title: "Thriller",
-        artist: "Michael jackson",
-      },
-      {
-        title: "We are the world",
-        artist: "Michael jackson",
-      },
-    ];
     const options = [
       {
         title: "🎵 Track",
@@ -129,6 +121,7 @@ export default {
         icon: "🈁",
       },
     ];
+    
     const loading = ref(state.loading);
     const searchComponent = ref(null);
     const filters = ref(state.filters);
@@ -183,6 +176,8 @@ export default {
     }
 
     watch(query, (new_query) => {
+      searchMusic(new_query);
+
       state.search_query.value = new_query;
       if (new_query !== "") {
         counter = 0;
@@ -206,13 +201,14 @@ export default {
       });
     });
 
+
     return {
       addFilter,
       activateMagicFlag,
       removeMagicFlag,
       removeFilter,
       removeLastFilter,
-      songs,
+      songs: state.search_tracks,
       albums,
       artists,
       query,
@@ -222,6 +218,7 @@ export default {
       filters,
       searchComponent,
       loading,
+      searchMusic,
     };
   },
 };
@@ -363,7 +360,7 @@ export default {
 .right-search .heading {
   font-size: small;
   position: relative;
-  padding:  $small;
+  padding: $small;
   display: flex;
   align-items: center;