minor refactors

src/assets/css/Search/Search.scss

@@ -6,7 +6,7 @@
   overflow: hidden;
   width: auto;
   height: 100%;
-  padding: $small $small 0 $small;
+  padding: $small $small 0 0;
 
   .no-res {
     text-align: center;
@@ -32,20 +32,12 @@
     align-items: center;
     position: relative;
   }
-
-  .search-icon {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 2.5rem;
-    width: 2.5rem;
-    background-image: url(../../icons/search.svg);
-    background-size: 70%;
-  }
+  
 }
 
 .right-search .scrollable {
   overflow-y: auto;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;
@@ -57,6 +49,12 @@
     width: 100%;
     border-radius: 0.4rem;
     position: relative;
+    
+    ._loader {
+      position: absolute;
+      top: 0;
+      right: 2rem;
+    }
 
     input {
       width: calc(100% - 2.5rem);
@@ -67,7 +65,7 @@
       font-size: 1rem;
       outline: none;
       transition: all 0.5s ease;
-      padding-left: 0.4rem;
+      padding-left: .75rem;
 
       &:focus {
         transition: all 0.5s ease;

src/components/AlbumView/Header.vue

@@ -62,6 +62,8 @@ export default {
   height: 100%;
   background-image: url("../../assets/images/abg.webp");
   background-position: 0% 60%;
+  background-repeat: no-repeat;
+  background-size: cover;
 
   .info {
     width: 100%;
@@ -117,4 +119,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/FolderView/FolderItem.vue

@@ -2,7 +2,7 @@
   <router-link
     :to="{ name: 'FolderView', params: { path: props.folder.path } }"
   >
-    <div class="f-item border-sm rounded">
+    <div class="f-item">
       <div class="icon image"></div>
       <div class="info">
         <div class="f-item-text ellip">{{ props.folder.name }}</div>
@@ -30,6 +30,7 @@ const props = defineProps({
   position: relative;
   background-color: #ffffff09;
   transition: all 0.2s ease;
+  border-radius: .75rem;
 
   @include phone-only {
     height: 4rem;
@@ -63,7 +64,7 @@ const props = defineProps({
       #021b79,
       #0575e6
     ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-    background-size: 105% 105%;  
+    background-size: 105% 105%;
     background-position-x: -$small;
 
     .f-item-count {

src/components/FolderView/Header.vue

@@ -16,7 +16,7 @@
       <input
         type="text"
         class="search-input"
-        placeholder="/"
+        placeholder="Search this folder"
         v-model="query"
       />
       <div class="search-icon image"></div>

src/components/LeftSidebar/AlbumArt.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="l_" v-if="!props.collapsed">
     <div
-      class="l-image image border rounded"
+      class="l-image image rounded"
       :style="{
         backgroundImage: `url(&quot;${current.image}&quot;)`,
       }"
@@ -28,6 +28,7 @@ const props = defineProps({
   .l-image {
     height: 14rem;
     width: 14rem;
+    border-radius: .5rem;
   }
 }
 </style>

src/components/PlaylistView/FeaturedArtists.vue

@@ -111,6 +111,7 @@ export default {
   flex-wrap: nowrap;
   overflow-x: scroll;
   gap: $small;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;

src/components/PlaylistView/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="p-header rounded">
-    <div class="info rounded card-dark">
+    <div class="info card-dark">
       <div>
         <div class="name">Makaveli Radio</div>
         <div class="metrics rounded border">45 Tracks • 3 Hours 4 Minutes</div>
@@ -43,7 +43,6 @@
     box-shadow: 0 0 1rem rgba(0, 0, 0, 0.479);
 
     @include phone-only {
-      // border: solid;
       bottom: 1rem;
       right: 1rem;
       font-size: small;
@@ -67,8 +66,9 @@
     display: flex;
     flex-direction: row;
     align-items: flex-end;
-    padding: $small $small 3.5rem;
+    padding: 1rem 1rem 4rem 1rem;
     box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.658);
+    border-radius: .5rem;
 
     @include phone-only {
       width: calc(100% - 1rem);
@@ -89,13 +89,12 @@
       color: rgb(0, 60, 255);
       padding: $small;
       width: fit-content;
-      border-radius: $smaller;
     }
 
     .buttons {
       position: absolute;
-      bottom: $small;
-      left: $small;
+      bottom:1rem;
+      left:1rem;
       display: flex;
       gap: $small;
 

src/components/RightSideBar/Home/Main.vue

@@ -1,20 +1,17 @@
 <template>
   <div class="r-home">
-   <NowPlaying />
    <Recommendations />
   </div>
 </template>
 
 <style lang="scss">
 .r-home {
-  height: 100%;
-  width: 31rem;
+  height: calc(100% - 1rem);
   background-color: $card-dark;
-  padding: $smaller $small;
+  padding: 0 $small $small 0;
 }
 </style>
 
 <script setup>
-import NowPlaying from '../NowPlaying.vue';
 import Recommendations from '../Recommendation.vue';
 </script>

src/components/RightSideBar/Main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="r-sidebar">
     <div class="grid">
-      <div class="r-content border">
+      <div class="r-content">
         <div class="r-dash" v-show="current_tab === tabs.home">
           <DashBoard />
         </div>
@@ -57,7 +57,7 @@ function changeTab(tab) {
 
 <style lang="scss">
 .r-sidebar {
-  width: 34em;
+  width: 32em;
 
   @include phone-only {
     display: none;
@@ -74,7 +74,8 @@ function changeTab(tab) {
 
     .r-content {
       grid-area: content;
-      width: 31rem;
+      width: 29rem;
+
 
       @include tablet-landscape {
         display: none;

src/components/RightSideBar/Queue.vue

@@ -1,22 +1,24 @@
 <template>
   <div class="up-next">
-    <p class="heading">COMING UP NEXT</p>
     <div class="r-grid">
-      <div class="main-item h-1 border" @click="playNext">
-        <div
-          class="album-art image"
-          :style="{
-            backgroundImage: `url(&quot;${next.image}&quot;)`,
-          }"
-        ></div>
-        <div class="tags">
-          <p class="title ellip">{{ next.title }}</p>
-          <hr />
-          <p class="artist ellip">
-            <span v-for="artist in putCommas(next.artists)" :key="artist">{{
-              artist
-            }}</span>
-          </p>
+      <div class="main-item  border" >
+        <p class="heading">COMING UP NEXT</p>
+        <div class="itemx" @click="playNext">
+          <div
+            class="album-art image"
+            :style="{
+              backgroundImage: `url(&quot;${next.image}&quot;)`,
+            }"
+          ></div>
+          <div class="tags">
+            <p class="title ellip">{{ next.title }}</p>
+            <hr />
+            <p class="artist ellip">
+              <span v-for="artist in putCommas(next.artists)" :key="artist">{{
+                artist
+              }}</span>
+            </p>
+          </div>
         </div>
       </div>
       <div class="scrollable-r border rounded">
@@ -29,8 +31,7 @@
 <script>
 import perks from "@/composables/perks.js";
 import audio from "@/composables/playAudio.js";
-import { ref, toRefs } from "@vue/reactivity";
-import { watch } from "@vue/runtime-core";
+import { ref } from "@vue/reactivity";
 import TrackItem from "../shared/TrackItem.vue";
 
 export default {
@@ -41,6 +42,7 @@ export default {
     const { playNext } = audio;
 
     const putCommas = perks.putCommas;
+
     return {
       playNext,
       putCommas,
@@ -55,7 +57,7 @@ export default {
 <style lang="scss">
 .up-next {
   background-color: $card-dark;
-  padding: $small;
+  padding: $small $small $small 0;
   overflow: hidden;
   height: 100%;
 
@@ -65,13 +67,22 @@ export default {
   }
 
   .main-item {
-    display: flex;
-    align-items: center;
-    padding: 0.5rem;
     border-radius: 0.5rem;
-    cursor: pointer;
+    padding: 0.5rem;
     margin-bottom: 0.5rem;
 
+    .itemx {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem;
+      cursor: pointer;
+      border-radius: 0.5rem;
+
+      &:hover {
+        background-color: $blue;
+      }
+    }
+
     .album-art {
       width: 4.5rem;
       height: 4.5rem;
@@ -95,15 +106,11 @@ export default {
         font-size: small;
       }
     }
-
-    &:hover {
-      background-color: $blue;
-    }
   }
 
   .r-grid {
     position: relative;
-    height: calc(100% - 2rem);
+    height: calc(100% - 2.5rem);
     display: grid;
     grid-template-rows: min-content;
 

src/components/Search.vue

@@ -2,7 +2,6 @@
   <div class="right-search">
     <div>
       <div class="input">
-        <Loader/>
         <Filters :filters="filters" @removeFilter="removeFilter"/>
         <div class="input-loader border">
           <input
@@ -12,7 +11,9 @@
               type="text"
               @keyup.backspace="removeLastFilter"
           />
-          <div class="search-icon image"></div>
+          <div class="_loader">
+            <Loader/>
+          </div>
         </div>
       </div>
       <div class="separator no-border"></div>

src/components/Search/AlbumGrid.vue

@@ -40,7 +40,8 @@ export default {
   overflow-x: hidden;
 
   .grid {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
     flex-wrap: wrap;
     padding: $small $small 0 $small;
     gap: $small;

src/components/Search/Filters.vue

@@ -29,7 +29,6 @@ export default {
 <style lang="scss">
 .right-search .filter {
   display: flex;
-  margin-left: 2rem;
   height: 2rem;
 
   .item {

src/components/Search/TracksGrid.vue

@@ -41,6 +41,6 @@ function loadMore() {
 <style lang="scss">
 .right-search .tracks-results {
   border-radius: 0.5rem;
-  padding: $small;
+  padding: 1rem $small;
 }
 </style>

src/components/shared/AlbumCard.vue

@@ -4,7 +4,7 @@
       name: 'AlbumView',
       params: { album: album.name, artist: album.artist },
     }"
-    class="result-item border"
+    class="result-item"
   >
     <div
       class="album-art image"
@@ -29,29 +29,32 @@ export default {
   flex-direction: column;
   align-items: center;
   padding: $small;
-  border-radius: $small;
+  border-radius: .75rem;
   text-align: left !important;
-  width: 9rem;
+  background-color: #726c7227;
+
+  &:hover {
+    background-color: #1b3688cb;
+  }
 
   .album-art {
-    height: 7rem;
-    width: 7rem;
-    border-radius: 0.5rem;
+    height: 7.5rem;
+    width: 7.5rem;
+    border-radius: .5rem;
     margin-bottom: 0.5rem;
   }
 
   .title {
     width: 7rem;
-    margin-bottom: 0.5rem;
+    margin-bottom: 0.25rem;
     font-size: 0.9rem;
   }
 
   .artistsx {
     width: 7rem;
-    display: flex;
     font-size: 0.8rem;
     text-align: left;
-    color: rgba(40, 116, 216, 0.767);
+    color: #ffffffbd;
   }
 }
 </style>

src/components/shared/ArtistCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="xartist border" :style="{ backgroundColor: `#${color}` }">
+  <div class="xartist" :style="{ backgroundColor: `#${color}` }">
     <div
       class="artist-image image"
       :style="{ backgroundImage: `url('${artist.image}')` }"
@@ -24,7 +24,7 @@ export default {
 
   width: 9em;
   height: 11em;
-  border-radius: $small;
+  border-radius: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;

src/components/shared/SongItem.vue

@@ -3,7 +3,7 @@
     <td class="index">{{ index }}</td>
     <td class="flex" @click="emitUpdate(song)">
       <div
-        class="album-art rounded image"
+        class="album-art image"
         :style="{ backgroundImage: `url(&quot;${song.image}&quot;` }"
       >
         <div
@@ -113,6 +113,7 @@ export default {
       margin-right: 1rem;
       display: grid;
       place-items: center;
+      border-radius: .5rem;
     }
 
     .artist {

src/views/AlbumView.vue

@@ -9,9 +9,11 @@
     </div>
     <div class="separator" id="av-sep"></div>
     <FeaturedArtists :artists="artists" />
-    <div class="separator" id="av-sep"></div>
-    <AlbumBio :bio="bio" v-if="bio" />
-    <div class="separator" id="av-sep"></div>
+    <div v-if="bio">
+      <div class="separator" id="av-sep"></div>
+      <AlbumBio :bio="bio" v-if="bio" />
+    </div>
+    <!-- <div class="separator" id="av-sep"></div> -->
   </div>
 </template>
 
@@ -74,12 +76,13 @@ export default {
 .al-view {
   height: calc(100% - 1rem);
   overflow: auto;
-  margin: $smaller $small;
+  margin: $small $small;
   scrollbar-width: none;
 
   .songs {
     padding: $small;
     background-color: $card-dark;
+    min-height: calc(100% - 30rem);
   }
 
   &::-webkit-scrollbar {
@@ -90,4 +93,4 @@ export default {
     border: none;
   }
 }
-</style>
+</style>

src/views/FolderView.vue

@@ -1,26 +1,26 @@
 <template>
   <div id="f-view-parent" class="border rounded card-dark">
     <div class="fixed">
-      <Header :path="path" :first_song="songs[0]" @search="updateQueryString"/>
+      <Header :path="path" :first_song="songs[0]" @search="updateQueryString" />
     </div>
     <div id="scrollable" ref="scrollable">
-      <FolderList :folders="folders"/>
+      <FolderList :folders="folders" />
       <div class="separator" v-if="folders.length && songs.length"></div>
-      <SongList :songs="songs"/>
+      <SongList :songs="songs" />
     </div>
   </div>
 </template>
 
 <script>
-import {computed, ref} from "@vue/reactivity";
-import {useRoute} from "vue-router";
+import { computed, ref } from "@vue/reactivity";
+import { useRoute } from "vue-router";
 
 import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import Header from "@/components/FolderView/Header.vue";
 
 import getTracksAndDirs from "../composables/getFiles.js";
-import {onMounted, watch} from "@vue/runtime-core";
+import { onMounted, watch } from "@vue/runtime-core";
 import state from "@/composables/state.js";
 
 export default {
@@ -46,9 +46,9 @@ export default {
       if (query.value.length > 1) {
         for (let i = 0; i < song_list.value.length; i++) {
           if (
-              song_list.value[i].title
-                  .toLowerCase()
-                  .includes(query.value.toLowerCase())
+            song_list.value[i].title
+              .toLowerCase()
+              .includes(query.value.toLowerCase())
           ) {
             songs_.push(song_list.value[i]);
           }
@@ -66,9 +66,9 @@ export default {
       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_list.value[i].name
+              .toLowerCase()
+              .includes(query.value.toLowerCase())
           ) {
             folders_.push(folders_list.value[i]);
           }
@@ -84,19 +84,19 @@ export default {
       const getDirData = (path) => {
         state.loading.value = true;
         getTracksAndDirs(path)
-            .then((data) => {
-              scrollable.value.scrollTop = 0;
+          .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;
-            })
-            .then(() => {
-              setTimeout(() => {
-                query.value = "";
-              }, 100);
-            });
+            state.loading.value = false;
+          })
+          .then(() => {
+            setTimeout(() => {
+              query.value = "";
+            }, 100);
+          });
       };
 
       getDirData(path.value);
@@ -144,6 +144,7 @@ export default {
   overflow-y: auto;
   height: calc(100% - $small);
   padding-right: $small;
+  scrollbar-color: grey transparent;
 
   @include phone-only {
     padding-right: 0;

src/views/PlaylistView.vue

@@ -44,6 +44,7 @@ export default {
   margin: 0 $small;
   overflow: auto;
   padding-bottom: $small;
+  scrollbar-width: none;
 
   &::-webkit-scrollbar {
     display: none;