From 73dec9189e370812c928c557b911c96b55b6aaa2 Mon Sep 17 00:00:00 2001
From: geoffrey45 <geoffreymungai45@gmail.com>
Date: Wed, 2 Feb 2022 21:45:23 +0300
Subject: [PATCH] fix albumView using watch function

- other minor changes to almost all files
---
 server/app/api.py                             | 10 ++-
 server/app/functions.py                       |  2 +-
 server/app/helpers.py                         |  6 +-
 src/App.vue                                   |  1 -
 src/assets/css/ProgressBar.scss               | 10 ++-
 src/assets/css/Search/Search.scss             | 27 +-----
 src/components/BottomBar/BottomBar.vue        | 17 +---
 src/components/BottomBar/SongCard.vue         |  3 +-
 src/components/FolderView/SongList.vue        | 21 +++--
 .../PlaylistView/FeaturedArtists.vue          |  1 +
 src/components/RightSideBar/Main.vue          | 63 ++++++-------
 src/components/RightSideBar/Queue.vue         | 18 ++--
 src/components/Search.vue                     | 88 +++++--------------
 src/components/Search/AlbumGrid.vue           | 10 +--
 src/components/Search/ArtistGrid.vue          |  3 +-
 src/components/Search/Filters.vue             |  4 +-
 src/components/Search/Options.vue             | 51 +++++++++--
 src/components/Search/TracksGrid.vue          |  2 +-
 src/components/shared/AlbumCard.vue           |  1 +
 src/components/shared/ArtistCard.vue          |  1 -
 src/components/shared/SongItem.vue            |  1 -
 src/components/shared/TrackItem.vue           |  6 +-
 src/composables/getFiles.js                   |  4 +-
 src/composables/perks.js                      | 20 ++---
 src/composables/routeLoader.js                |  8 +-
 src/views/AlbumView.vue                       | 23 ++---
 src/views/FolderView.vue                      | 61 +++++++++----
 27 files changed, 231 insertions(+), 231 deletions(-)

diff --git a/server/app/api.py b/server/app/api.py
index 8186120c..4a1b9398 100644
--- a/server/app/api.py
+++ b/server/app/api.py
@@ -28,6 +28,8 @@ def adutsfsd():
 
 @bp.route('/search')
 def search_by_title():
+    query:str = ""
+
     if not request.args.get('q'):
         query = "mexican girl"
     else:
@@ -83,20 +85,20 @@ def search_by_title():
     else:
         more_tracks = False
 
-    if len(artists_dicts) > 8:
+    if len(artists_dicts) > 6:
         more_artists = True
     else:
         more_artists = False
 
-    if len(albums_dicts) > 8:
+    if len(albums_dicts) > 6:
         more_albums = True
     else:
         more_albums = False
 
     return {'data': [
         {'tracks': tracks[:5], 'more': more_tracks},
-        {'albums': albums_dicts[:8], 'more': more_albums},
-        {'artists': artists_dicts[:8], 'more': more_artists}
+        {'albums': albums_dicts[:6], 'more': more_albums},
+        {'artists': artists_dicts[:6], 'more': more_artists}
     ]}
 
 
diff --git a/server/app/functions.py b/server/app/functions.py
index ffcc2ec7..3f582738 100644
--- a/server/app/functions.py
+++ b/server/app/functions.py
@@ -83,7 +83,7 @@ def populate_images():
     bar.finish()
 
 
-def extract_thumb(audio_file_path: str = None) -> str:
+def extract_thumb(audio_file_path: str) -> str:
     """
     Extracts the thumbnail from an audio file. Returns the path to the thumbnail.
     """
diff --git a/server/app/helpers.py b/server/app/helpers.py
index f75017c4..a7531062 100644
--- a/server/app/helpers.py
+++ b/server/app/helpers.py
@@ -5,6 +5,7 @@ This module contains mimi functions for the server.
 import os
 import threading
 import time
+from typing import List
 import requests
 
 from io import BytesIO
@@ -37,10 +38,11 @@ def check_for_new_songs():
 
     while flag is False:
         functions.populate()
+        functions.populate_images()
         time.sleep(300)
 
 
-def run_fast_scandir(dir: str, ext: str) -> list:
+def run_fast_scandir(dir: str, ext: str):
     """
     Scans a directory for files with a specific extension. Returns a list of files and folders in the directory.
     """
@@ -125,7 +127,7 @@ def create_config_dir() -> None:
 
         os.chmod(path, 0o755)
 
-def getAllSongs() -> None:
+def getAllSongs() -> List:
     """
     Gets all songs under the ~/ directory.
     """
diff --git a/src/App.vue b/src/App.vue
index 46e4f7e3..da994c72 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -67,7 +67,6 @@ export default {
 
   #toggle {
     position: absolute;
-    left: 0.2rem;
     width: 3rem;
     height: 100%;
     background: url(./assets/icons/menu.svg);
diff --git a/src/assets/css/ProgressBar.scss b/src/assets/css/ProgressBar.scss
index 14efdb2b..6576688f 100644
--- a/src/assets/css/ProgressBar.scss
+++ b/src/assets/css/ProgressBar.scss
@@ -21,18 +21,20 @@ input[type="range"]::-webkit-slider-thumb {
 
 input[type="range"]::-moz-range-thumb {
   -webkit-appearance: none;
-  height: 1rem;
-  width: 1rem;
+  height: 0.8rem;
+  width: 0.8rem;
   border-radius: 50%;
   background: $blue;
+  border: none;
 }
 
 input[type="range"]::-ms-thumb {
   -webkit-appearance: none;
-  height: 1rem;
-  width: 1rem;
+  height: 0.8rem;
+  width: 0.8rem;
   border-radius: 50%;
   background: $blue;
+  border: none;
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
diff --git a/src/assets/css/Search/Search.scss b/src/assets/css/Search/Search.scss
index 797ec0a5..c12ab114 100644
--- a/src/assets/css/Search/Search.scss
+++ b/src/assets/css/Search/Search.scss
@@ -8,11 +8,10 @@
   width: auto;
   height: 100%;
   padding: $small $small 0 $small;
-  // margin: $small 0 $small 0;
 
   .no-res {
     text-align: center;
-    height: calc(100% - 1rem);
+    // height: calc(100% - 1rem);
     display: grid;
 
     .highlight {
@@ -45,30 +44,6 @@
     background-image: url(../../icons/search.svg);
     background-size: 70%;
   }
-
-  .v11 {
-    opacity: 0;
-    transform: translateY(-4rem);
-    transition: all 0.2s ease-in;
-  }
-
-  .v00 {
-    opacity: 1;
-    transition: all 0.2s ease-in;
-  }
-
-  .suggestions {
-    display: flex;
-    gap: 0.5rem;
-    margin-left: 1rem;
-    position: absolute;
-    right: 2.5rem;
-
-    .item::before {
-      content: "#";
-      color: grey;
-    }
-  }
 }
 
 .right-search .scrollable {
diff --git a/src/components/BottomBar/BottomBar.vue b/src/components/BottomBar/BottomBar.vue
index 978a6363..bf760b16 100644
--- a/src/components/BottomBar/BottomBar.vue
+++ b/src/components/BottomBar/BottomBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="b-bar border card-dark">
     <div class="grid">
-      <SongCard />
+      <SongCard/>
       <div class="controlsx border rounded">
         <div class="controls controls-bottom">
           <HotKeys />
@@ -9,7 +9,7 @@
         <div class="progress progress-bottom">
           <span class="durationx">0:45</span>
           <Progress />
-          <span class="durationx">3:55</span>
+          <span class="durationx">{{ state.current.value.length }}</span>
         </div>
         <div class="r-group">
           <div class="heart image"></div>
@@ -18,24 +18,15 @@
         </div>
         <div class="controls controls-bottom"></div>
       </div>
-      <div class="volume-group">
-
-      </div>
+      <div class="volume-group"></div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
 import "../../assets/css/BottomBar/BottomBar.scss";
-import playAudio from "../../composables/playAudio";
 import SongCard from "./SongCard.vue";
 import Progress from "../shared/Progress.vue";
 import HotKeys from "../shared/HotKeys.vue";
-
-const isPlaying = ref(playAudio.playing);
-
-const { playNext } = playAudio;
-const { playPrev } = playAudio;
-const { playPause } = playAudio;
+import state from "../../composables/state";
 </script>
diff --git a/src/components/BottomBar/SongCard.vue b/src/components/BottomBar/SongCard.vue
index f6db3923..9c867b50 100644
--- a/src/components/BottomBar/SongCard.vue
+++ b/src/components/BottomBar/SongCard.vue
@@ -26,8 +26,9 @@
 <script setup>
 import { ref } from "vue";
 import perks from "../../composables/perks";
+import state from "../../composables/state";
 
-const track = ref(perks.current);
+const track = ref(state.current);
 
 const putCommas = perks.putCommas;
 </script>
diff --git a/src/components/FolderView/SongList.vue b/src/components/FolderView/SongList.vue
index 9c6e47ae..ef4b16e8 100644
--- a/src/components/FolderView/SongList.vue
+++ b/src/components/FolderView/SongList.vue
@@ -14,7 +14,7 @@
         <tbody>
           <SongItem
             v-for="(song, index) in props.songs"
-            :key="song"
+            :key="song.id"
             :song="song"
             :index="index + 1"
             @updateQueue="updateQueue"
@@ -25,8 +25,7 @@
     </div>
     <div v-else-if="props.songs.length === 0 && search_query">
       <div class="no-results">
-        <div class="icon"></div>
-        <div class="text">No tracks 🎸</div>
+        <div class="text">Nothing down here 😑</div>
       </div>
     </div>
     <div v-else ref="songtitle"></div>
@@ -47,8 +46,8 @@ import state from "@/composables/state.js";
 const props = defineProps({
   songs: {
     type: Array,
-    required: true
-  }
+    required: true,
+  },
 });
 
 let route;
@@ -85,7 +84,15 @@ function loadAlbum(title, album_artist) {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   padding: 1rem;
+
+  // .icon {
+  //   height: 10rem;
+  //   width: 15rem;
+  //   border: solid;
+  //   background-image: url("../../assets/images/sokka.webp");
+  // }
 }
 
 .table {
@@ -138,7 +145,7 @@ table {
         display: none;
       }
 
-      width: 5rem;
+      width: 6rem;
     }
 
     th.album-header {
@@ -152,4 +159,4 @@ table {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/PlaylistView/FeaturedArtists.vue b/src/components/PlaylistView/FeaturedArtists.vue
index bbf1fb51..715f0728 100644
--- a/src/components/PlaylistView/FeaturedArtists.vue
+++ b/src/components/PlaylistView/FeaturedArtists.vue
@@ -110,6 +110,7 @@ export default {
   align-items: flex-end;
   flex-wrap: nowrap;
   overflow-x: scroll;
+  gap: $small;
 
   &::-webkit-scrollbar {
     display: none;
diff --git a/src/components/RightSideBar/Main.vue b/src/components/RightSideBar/Main.vue
index 0a35b6b2..4a25ba26 100644
--- a/src/components/RightSideBar/Main.vue
+++ b/src/components/RightSideBar/Main.vue
@@ -1,20 +1,16 @@
 <template>
   <div class="r-sidebar">
     <div class="grid">
-      <div class="r-content border rounded">
-        <div class="r-dash" v-if="current_tab == tabs.home">
-          <DashBoard/>
+      <div class="r-content rounded">
+        <div class="r-dash" v-show="current_tab == tabs.home">
+          <DashBoard />
         </div>
-        <div class="r-search" v-if="current_tab == tabs.search">
-          <Search
-            v-model:search="search"
-            @expandSearch="expandSearch"
-            @collapseSearch="collapseSearch"
-          />
+        <div class="r-search" v-show="current_tab == tabs.search">
+          <Search />
         </div>
 
-        <div class="r-queue" v-if="current_tab == tabs.queue">
-          <UpNext v-model:up_next="up_next" @expandQueue="expandQueue" />
+        <div class="r-queue" v-show="current_tab == tabs.queue">
+          <UpNext />
         </div>
       </div>
       <div class="tab-keys card-dark border">
@@ -33,28 +29,13 @@ import Main from "./Home/Main.vue";
 
 const DashBoard = Main;
 
-let up_next = ref(true);
-let search = ref(false);
-
-const expandQueue = () => {
-  up_next.value = !up_next.value;
-};
-
-const expandSearch = () => {
-  search.value = true;
-};
-
-const collapseSearch = () => {
-  search.value = false;
-};
-
 const tabs = {
   home: "home",
   search: "search",
   queue: "queue",
 };
 
-const current_tab = ref(tabs.search);
+const current_tab = ref(tabs.queue);
 
 function changeTab(tab) {
   current_tab.value = tab;
@@ -63,18 +44,30 @@ function changeTab(tab) {
 
 <style lang="scss">
 .r-sidebar {
-  width: 34em;
+  width: 34.5em;
+  margin: $small 0 $small 0;
+  
+  @include phone-only {
+    display: none;
+  }
+
+  // @include tablet-landscape {
+  //   width: 3rem;
+  // }
 
   .grid {
     height: 100%;
-    display: grid;
-    grid-template-areas: "content tabs";
+    display: flex;
+    position: relative;
 
     .r-content {
       grid-area: content;
-      width: 100%;
+      width: 31rem;
       overflow: hidden;
-      margin: $small $small $small 0;
+
+      // @include tablet-landscape {
+      //   display: none;
+      // }
 
       .r-search {
         height: 100%;
@@ -90,10 +83,12 @@ function changeTab(tab) {
     }
 
     .tab-keys {
+      right: 0;
+      height: 100%;
+      position: absolute;
       grid-area: tabs;
-      width: 3rem;
       padding: $small;
-      margin-left: $small;
+      border-radius: $small 0 0 $small;
     }
   }
 }
diff --git a/src/components/RightSideBar/Queue.vue b/src/components/RightSideBar/Queue.vue
index 255cb0d6..9e773a9a 100644
--- a/src/components/RightSideBar/Queue.vue
+++ b/src/components/RightSideBar/Queue.vue
@@ -19,8 +19,10 @@
           </p>
         </div>
       </div>
-      <div class="scrollable-r border">
-        <TrackItem v-for="song in queue" :key="song" :track="song" />
+      <div class="scrl border rounded">
+        <div class="scrollable-r">
+          <TrackItem v-for="song in queue" :key="song.id" :track="song" />
+        </div>
       </div>
     </div>
   </div>
@@ -76,8 +78,6 @@ export default {
   overflow: hidden;
   height: 100%;
 
-  
-
   .heading {
     position: relative;
     margin: 0.5rem 0 1rem 0;
@@ -127,13 +127,19 @@ export default {
     width: 100%;
     display: grid;
     grid-template-rows: min-content 1fr;
+    padding-bottom: $small;
+
+    .scrl {
+      overflow: hidden;
+      height: 100%;
+    }
 
     .scrollable-r {
-      margin-bottom: $small;
+      height: 100%;
       padding: $small;
       overflow: auto;
       background-color: $card-dark;
-      border-radius: 0.5rem;
+      scrollbar-color: grey transparent;
 
       &::-webkit-scrollbar-track {
         background-color: transparent;
diff --git a/src/components/Search.vue b/src/components/Search.vue
index b8e4f8ba..6fae2058 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="right-search" ref="searchComponent">
+  <div class="right-search border">
     <div>
       <div class="input">
         <Loader />
@@ -8,29 +8,17 @@
           <input
             type="text"
             id="search"
-            @focus="activateMagicFlag"
-            @blur="removeMagicFlag"
             @keyup.backspace="removeLastFilter"
             placeholder="find your music"
             v-model="query"
           />
           <div class="search-icon image"></div>
-          <!--  -->
-        </div>
-        <div
-          class="suggestions v00"
-          :class="{
-            v00: !filters.length && !query,
-            v11: filters.length || query,
-          }"
-        >
-          <div class="item">Kenny Rogers</div>
         </div>
       </div>
       <div class="separator no-border"></div>
-      <Options :magic_flag="magic_flag" @addFilter="addFilter" />
+      <Options @addFilter="addFilter" />
     </div>
-    <div class="scrollable" :class="{ v0: !is_hidden, v1: is_hidden }">
+    <div class="scrollable">
       <TracksGrid
         :tracks="tracks.tracks"
         :more="tracks.more"
@@ -52,22 +40,24 @@
         v-if="
           !artists.artists.length &&
           !tracks.tracks.length &&
-          !albums.albums.length
+          !albums.albums.length && query.length != 0
         "
       >
-        <div class="no-res-icon image"></div>
         <div class="no-res-text">
           No results for <span class="highlight rounded">{{ query }}</span>
         </div>
       </div>
+      <div v-else-if="query.length == 0" class="no-res">
+        <div class="no-res-text">Find your music 🔍😀</div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import { reactive, ref, toRefs } from "@vue/reactivity";
+import { reactive, ref } from "@vue/reactivity";
 
-import { onMounted, watch } from "@vue/runtime-core";
+import { watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 import searchMusic from "@/composables/searchMusic.js";
 import useDebouncedRef from "@/composables/useDebouncedRef";
@@ -80,8 +70,6 @@ import Filters from "@/components/Search/Filters.vue";
 import "@/assets/css/Search/Search.scss";
 
 export default {
-  emits: ["expandSearch", "collapseSearch"],
-  props: ["search"],
   components: {
     AlbumGrid,
     ArtistGrid,
@@ -91,9 +79,8 @@ export default {
     Filters,
   },
 
-  setup(props, { emit }) {
+  setup() {
     const loading = ref(state.loading);
-    const searchComponent = ref(null);
     const filters = ref([]);
 
     const tracks = reactive({
@@ -111,9 +98,7 @@ export default {
       more: false,
     });
 
-    const query = useDebouncedRef("", 400);
-    const magic_flag = ref(state.magic_flag);
-    const is_hidden = toRefs(props).search;
+    const query = useDebouncedRef("", 600);
 
     function addFilter(filter) {
       if (!filters.value.includes(filter)) {
@@ -137,24 +122,15 @@ export default {
       }
     }
 
-    function activateMagicFlag() {
-      setTimeout(() => {
-        state.magic_flag.value = true;
-      }, 300);
-    }
-
-    function removeMagicFlag() {
-      setTimeout(() => {
-        if (
-          (!filters.value.length && query.value == null) ||
-          query.value == ""
-        ) {
-          state.magic_flag.value = false;
-        }
-      }, 3000);
-    }
-
     watch(query, (new_query) => {
+      if (query.value == "" || query.value == "  " || query.value.length < 2) {
+        albums.albums = [];
+        artists.artists = [];
+        tracks.tracks = [];
+        
+        return;
+      };
+
       searchMusic(new_query).then((res) => {
         albums.albums = res.albums.albums;
         albums.more = res.albums.more;
@@ -165,43 +141,19 @@ export default {
         tracks.tracks = res.tracks.tracks;
         tracks.more = res.tracks.more;
       });
-
-      state.search_query.value = new_query;
-      if (new_query !== "" && new_query.length > 2) {
-        counter = 0;
-        emit("expandSearch");
-      } else {
-        emit("collapseSearch");
-      }
-    });
-
-    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,
       tracks,
       albums,
       artists,
       query,
-      is_hidden,
-      magic_flag,
       filters,
-      searchComponent,
       loading,
-      searchMusic,
+      
     };
   },
 };
diff --git a/src/components/Search/AlbumGrid.vue b/src/components/Search/AlbumGrid.vue
index 7eecd0cd..4df450c7 100644
--- a/src/components/Search/AlbumGrid.vue
+++ b/src/components/Search/AlbumGrid.vue
@@ -34,17 +34,15 @@ export default {
 .right-search .albums-results {
   border-radius: 0.5rem;
   background: #0f131b44;
-
   margin-top: $small;
-  padding: $small 0;
+  padding-bottom: $small;
+  padding-top: $small;
   overflow-x: hidden;
 
   .grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
-
+    display: flex;
     flex-wrap: wrap;
-    padding: 0 0 0 $small;
+    padding: $small $small 0 $small;
     gap: $small;
   }
 }
diff --git a/src/components/Search/ArtistGrid.vue b/src/components/Search/ArtistGrid.vue
index 20952667..980851ec 100644
--- a/src/components/Search/ArtistGrid.vue
+++ b/src/components/Search/ArtistGrid.vue
@@ -42,9 +42,10 @@ export default {
   margin-bottom: $small;
 
   .grid {
-    padding: 0 0 0 $small;
+    padding: $small $small 0 $small;
     display: flex;
     flex-wrap: wrap;
+    gap: $small;
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Search/Filters.vue b/src/components/Search/Filters.vue
index dceafdc9..7ebb320c 100644
--- a/src/components/Search/Filters.vue
+++ b/src/components/Search/Filters.vue
@@ -32,8 +32,8 @@ export default {
   margin-left: 2rem;
   height: 2rem;
 
-
   .item {
+    transition: all 0.2s ease-in-out;
     &:hover {
       width: 4rem;
 
@@ -48,4 +48,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Search/Options.vue b/src/components/Search/Options.vue
index 3de91319..0d5fd8b7 100644
--- a/src/components/Search/Options.vue
+++ b/src/components/Search/Options.vue
@@ -1,13 +1,16 @@
 <template>
   <div class="options border rounded">
-    <div class="item info">Filter by:</div>
+    <div class="item info header">Filter by:</div>
     <div
       class="item"
       v-for="option in options"
       :key="option"
       @click="addFilter(option.icon)"
     >
-      {{ option.title }}
+      <div>
+        <span class="icon">{{ option.icon }}</span>
+        <span class="title">&nbsp;&nbsp;{{ option.title }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -18,23 +21,23 @@ export default {
   setup(props, { emit }) {
     const options = [
       {
-        title: "🎵 Track",
+        title: "Track",
         icon: "🎵",
       },
       {
-        title: "💿 Album",
+        title: "Album",
         icon: "💿",
       },
       {
-        title: "🙄 Artist",
+        title: "Artist",
         icon: "🙄",
       },
       {
-        title: "😍 Playlist",
+        title: "Playlist",
         icon: "😍",
       },
       {
-        title: "📁 Folder",
+        title: "Folder",
         icon: "📁",
       },
     ];
@@ -58,6 +61,38 @@ export default {
 
   .item {
     margin: $small;
+    width: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    transition: all 0.2s ease-in-out;
+    position: relative;
+
+    .title {
+      position: absolute;
+      left: 1.5rem;
+      top: 0.5rem;
+      visibility: hidden;
+    }
+
+    .icon {
+      position: absolute;
+      top: 0.5rem;
+      left: .75rem;
+    }
+
+    &:hover {
+      width: 5.5rem;
+
+      .title {
+        visibility: visible;
+      }
+    }
+  }
+
+  .header {
+    width: 5.5rem;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Search/TracksGrid.vue b/src/components/Search/TracksGrid.vue
index 8b074438..1c5dc791 100644
--- a/src/components/Search/TracksGrid.vue
+++ b/src/components/Search/TracksGrid.vue
@@ -6,7 +6,7 @@
         <tbody>
           <TrackItem
             v-for="track in props.tracks"
-            :key="track"
+            :key="track.id"
             :track="track"
           />
         </tbody>
diff --git a/src/components/shared/AlbumCard.vue b/src/components/shared/AlbumCard.vue
index 48c6982e..8a3593f3 100644
--- a/src/components/shared/AlbumCard.vue
+++ b/src/components/shared/AlbumCard.vue
@@ -32,6 +32,7 @@ export default {
   border-radius: $small;
   text-align: left !important;
   width: 9rem;
+  // border: solid 1px red !important;
 
   .album-art {
     height: 7rem;
diff --git a/src/components/shared/ArtistCard.vue b/src/components/shared/ArtistCard.vue
index b9871b01..91908595 100644
--- a/src/components/shared/ArtistCard.vue
+++ b/src/components/shared/ArtistCard.vue
@@ -21,7 +21,6 @@ export default {
   flex: 0 0 auto;
   overflow: hidden;
   position: relative;
-  margin: 0 $small 0 0;
 
   width: 9em;
   height: 11em;
diff --git a/src/components/shared/SongItem.vue b/src/components/shared/SongItem.vue
index 61474ee6..bd387aff 100644
--- a/src/components/shared/SongItem.vue
+++ b/src/components/shared/SongItem.vue
@@ -14,7 +14,6 @@
       </div>
       <div>
         <span class="ellip">{{ song.title }}</span>
-        <div class="separator no-border"></div>
         <div class="artist ellip">
           <span v-for="artist in putCommas(song.artists)" :key="artist">
             {{ artist }}
diff --git a/src/components/shared/TrackItem.vue b/src/components/shared/TrackItem.vue
index f4c91e1a..b14a355b 100644
--- a/src/components/shared/TrackItem.vue
+++ b/src/components/shared/TrackItem.vue
@@ -60,6 +60,9 @@ const playThis = (song) => {
   align-items: center;
   padding: 0.5rem;
   border-radius: 0.5rem;
+  position: relative;
+  height: 4rem;
+  padding-left: 4rem;
 
   &:hover {
     cursor: pointer;
@@ -72,6 +75,8 @@ const playThis = (song) => {
   }
 
   .album-art {
+    position: absolute;
+    left: $small;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -83,7 +88,6 @@ const playThis = (song) => {
     background-image: url(../../assets/images/null.webp);
   }
   .artist {
-    width: 20rem;
     font-size: small;
     color: rgba(255, 255, 255, 0.637);
   }
diff --git a/src/composables/getFiles.js b/src/composables/getFiles.js
index fb63570f..0acc92eb 100644
--- a/src/composables/getFiles.js
+++ b/src/composables/getFiles.js
@@ -1,6 +1,6 @@
 let base_uri = "http://0.0.0.0:9876";
 
-const getData = async (path) => {
+const getTracksAndDirs = async (path) => {
   let url;
 
   const encoded_path = encodeURIComponent(path.replaceAll("/", "|"));
@@ -21,4 +21,4 @@ const getData = async (path) => {
   return { songs, folders };
 };
 
-export default getData;
+export default getTracksAndDirs;
diff --git a/src/composables/perks.js b/src/composables/perks.js
index ff6369f6..42b3d566 100644
--- a/src/composables/perks.js
+++ b/src/composables/perks.js
@@ -37,9 +37,7 @@ const putCommas = (artists) => {
 };
 
 function updateNext(song_) {
-  const index = state.queue.value.findIndex(
-    (item) => item.id === song_.id
-  );
+  const index = state.queue.value.findIndex((item) => item.id === song_.id);
 
   if (index == queue.value.length - 1) {
     next.value = queue.value[0];
@@ -52,9 +50,7 @@ function updateNext(song_) {
 }
 
 function updatePrev(song) {
-  const index = state.queue.value.findIndex(
-    (item) => item.id === song.id
-  );
+  const index = state.queue.value.findIndex((item) => item.id === song.id);
 
   if (index == 0) {
     prev.value = queue.value[queue.value.length - 1];
@@ -82,7 +78,7 @@ const readQueue = () => {
 };
 
 const updateQueue = async (song, type) => {
-  playAudio.playAudio(song.filepath)
+  playAudio.playAudio(song.filepath);
   let list;
 
   switch (type) {
@@ -93,9 +89,9 @@ const updateQueue = async (song, type) => {
       list = state.album_song_list.value;
       break;
   }
-  
-  if (state.queue.value[0].id !==list[0].id) {
-    const new_queue =list;
+
+  if (state.queue.value[0].id !== list[0].id) {
+    const new_queue = list;
     localStorage.setItem("queue", JSON.stringify(new_queue));
     state.queue.value = new_queue;
   }
@@ -152,6 +148,8 @@ window.addEventListener("keydown", (e) => {
 
   switch (e.key) {
     case "ArrowRight":
+      if (target.tagName == "INPUT") return;
+
       {
         if (!key_down_fired) {
           key_down_fired = true;
@@ -168,6 +166,8 @@ window.addEventListener("keydown", (e) => {
     case "ArrowLeft":
       {
         if (!key_down_fired) {
+          if (target.tagName == "INPUT") return;
+
           key_down_fired = true;
 
           playAudio.playPrev();
diff --git a/src/composables/routeLoader.js b/src/composables/routeLoader.js
index 69826397..8792e4af 100644
--- a/src/composables/routeLoader.js
+++ b/src/composables/routeLoader.js
@@ -4,6 +4,7 @@ import album from "./album.js";
 import state from "./state.js";
 
 function toAlbum(title, artist) {
+  state.loading.value = true;
   album
     .getAlbumTracks(title, artist)
     .then((data) => {
@@ -24,15 +25,16 @@ function toAlbum(title, artist) {
         }
       })
     )
-    .then(
+    .then(() => {
       Router.push({
         name: "AlbumView",
         params: {
           album: title,
           artist: artist,
         },
-      })
-    )
+      });
+      state.loading.value = false;
+    })
     .catch((error) => {
       console.log(error);
     });
diff --git a/src/views/AlbumView.vue b/src/views/AlbumView.vue
index 79fe9f7c..ddc955ad 100644
--- a/src/views/AlbumView.vue
+++ b/src/views/AlbumView.vue
@@ -10,7 +10,7 @@
     <div class="separator" id="av-sep"></div>
     <FeaturedArtists :artists="artists" />
     <div class="separator" id="av-sep"></div>
-    <AlbumBio :bio="bio" v-if="bio"/>
+    <AlbumBio :bio="bio" v-if="bio" />
     <div class="separator" id="av-sep"></div>
   </div>
 </template>
@@ -19,7 +19,7 @@
 import { useRoute } from "vue-router";
 import { onMounted } from "@vue/runtime-core";
 import { onUnmounted } from "@vue/runtime-core";
-
+import { watch, ref } from "vue";
 import Header from "../components/AlbumView/Header.vue";
 import AlbumBio from "../components/AlbumView/AlbumBio.vue";
 
@@ -27,7 +27,7 @@ import SongList from "../components/FolderView/SongList.vue";
 import FeaturedArtists from "../components/PlaylistView/FeaturedArtists.vue";
 
 import state from "@/composables/state.js";
-import routeLoader from "@/composables/routeLoader.js"
+import routeLoader from "@/composables/routeLoader.js";
 
 export default {
   components: {
@@ -38,13 +38,16 @@ export default {
   },
   setup() {
     const route = useRoute();
-    const title = route.params.album;
-    const album_artists = route.params.artist;
+
+    watch(
+      () => route.params,
+      () => {
+        routeLoader.toAlbum(route.params.album, route.params.artist);
+      }
+    );
 
     onMounted(() => {
-      if (!state.album_song_list.value.length) {
-        routeLoader.toAlbum(title, album_artists);
-      }
+        routeLoader.toAlbum(route.params.album, route.params.artist);
     });
 
     onUnmounted(() => {
@@ -69,7 +72,7 @@ export default {
   height: calc(100% - 1rem);
   overflow: auto;
   margin-top: $small;
-
+  scrollbar-width: none;
   .songs {
     padding: $small;
     background-color: $card-dark;
@@ -83,4 +86,4 @@ export default {
     border: none;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/FolderView.vue b/src/views/FolderView.vue
index 66de4b1d..edee3aab 100644
--- a/src/views/FolderView.vue
+++ b/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]" @search="filterSongs" />
+      <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
     </div>
     <div id="scrollable" ref="scrollable">
       <FolderList :folders="folders" />
@@ -19,7 +19,7 @@ import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import Header from "@/components/FolderView/Header.vue";
 
-import getData from "../composables/getFiles.js";
+import getTracksAndDirs from "../composables/getFiles.js";
 import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 
@@ -34,16 +34,16 @@ export default {
     const path = ref(route.params.path);
 
     const song_list = ref(state.folder_song_list);
-    const folders = ref(state.folder_list);
+    const folders_list = ref(state.folder_list);
 
     const scrollable = ref(null);
 
-    const query = ref('');
+    const query = ref("");
 
     const songs = computed(() => {
       const songs_ = [];
 
-      if (query.value.length > 2) {
+      if (query.value.length > 1) {
         for (let i = 0; i < song_list.value.length; i++) {
           if (
             song_list.value[i].title
@@ -60,37 +60,62 @@ export default {
       }
     });
 
+    const folders = computed(() => {
+      const folders_ = [];
+
+      if (query.value.length > 1) {
+        for (let i = 0; i < folders_list.value.length; i++) {
+          if (
+            folders_list.value[i].name
+              .toLowerCase()
+              .includes(query.value.toLowerCase())
+          ) {
+            folders_.push(folders_list.value[i]);
+          }
+        }
+
+        return folders_;
+      } else {
+        return folders_list.value;
+      }
+    });
+
     onMounted(() => {
-      const getPathFolders = (path, last_id) => {
+      const getDirData = (path) => {
         state.loading.value = true;
-        getData(path, last_id).then((data) => {
-          scrollable.value.scrollTop = 0;
+        getTracksAndDirs(path)
+          .then((data) => {
+            scrollable.value.scrollTop = 0;
 
-          state.folder_song_list.value = data.songs;
-          state.folder_list.value = data.folders;
+            state.folder_song_list.value = data.songs;
+            state.folder_list.value = data.folders;
 
-          state.loading.value = false;
-        });
+            state.loading.value = false;
+          })
+          .then(() => {
+            setTimeout(() => {
+              query.value = "";
+            }, 100);
+          });
       };
 
-      getPathFolders(path.value);
+      getDirData(path.value);
 
       watch(route, (new_route) => {
-        state.search_query.value = "";
         path.value = new_route.params.path;
 
         if (!path.value) return;
 
-        getPathFolders(path.value);
+        getDirData(path.value);
       });
     });
 
-    function filterSongs(value) {
+    function updateQueryString(value) {
       query.value = value;
     }
 
     return {
-      filterSongs,
+      updateQueryString,
       songs,
       folders,
       path,
@@ -129,4 +154,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>