some bug fixes

- watch route params instead of route object in folderview
- move to script setup on album view
- use album as a reactive object instead of refs
- use axios instead of fetch to get album data
- improve clickable areas on songItem
- move album requests to POST

src/components/AlbumView/Header.vue

@@ -1,18 +1,22 @@
 <template>
   <div class="album-h">
     <div class="a-header rounded">
+      <div
+        class="image art shadow-lg"
+        :style="{ backgroundImage: `url(&quot;${encodeURI(props.album_info.image)}&quot;)` }"
+      ></div>
       <div class="info">
         <div class="top">
           <div class="h">Album</div>
           <div class="separator no-border"></div>
-          <div class="title">{{ album_info.name }}</div>
-          <div class="artist">{{ album_info.artist }}</div>
+          <div class="title">{{ props.album_info.name }}</div>
+          <div class="artist">{{ props.album_info.artist }}</div>
         </div>
         <div class="separator no-border"></div>
         <div class="bottom">
           <div class="stats shadow-sm">
-            {{ album_info.count }} Tracks • {{ album_info.duration }} •
-            {{ album_info.date }}
+            {{ props.album_info.count }} Tracks • {{ props.album_info.duration }} •
+            {{ props.album_info.date }}
           </div>
           <div class="play rounded" @click="playAlbum">
             <div class="icon"></div>
@@ -24,22 +28,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import state from "@/composables/state.js";
 import perks from "@/composables/perks.js";
 
-export default {
-  props: ["album_info"],
-  setup() {
-    function playAlbum() {
-      perks.updateQueue(state.album_song_list.value[0], "album");
-    }
-
-    return {
-      playAlbum,
-    };
+const props = defineProps({
+  album_info: {
+    type: Object,
+    default: () => ({}),
   },
-};
+});
+
+function playAlbum() {
+  perks.updateQueue(state.album.tracklist[0], "album");
+}
 </script>
 
 <style lang="scss">
@@ -59,7 +61,7 @@ export default {
   overflow: hidden;
   display: flex;
   align-items: center;
-  padding: $small;
+  padding: 1rem;
   height: 100%;
   background-image: linear-gradient(
     56deg,
@@ -73,12 +75,20 @@ export default {
   background-repeat: no-repeat;
   background-size: cover;
 
+  .art {
+    position: absolute;
+    width: 12rem;
+    height: 12rem;
+    left: 1rem;
+  }
+
   .info {
     width: 100%;
     height: calc(100%);
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
+    margin-left: 13rem;
 
     .top {
       .h {
@@ -88,6 +98,7 @@ export default {
         font-size: 2rem;
         font-weight: 1000;
         color: white;
+        text-transform: capitalize;
       }
 
       .artist {

src/components/FolderView/Header.vue

@@ -13,6 +13,9 @@
       </div>
     </div>
     <div class="search">
+      <div class="loaderr">
+        <Loader />
+      </div>
       <input
         type="text"
         class="search-input border"
@@ -26,11 +29,13 @@
 
 <script>
 import perks from "@/composables/perks.js";
-import { watch } from '@vue/runtime-core';
-import useDebouncedRef from '@/composables/useDebouncedRef.js';
+import { watch } from "@vue/runtime-core";
+import useDebouncedRef from "@/composables/useDebouncedRef.js";
+import Loader from "../shared/Loader.vue";
 
 export default {
   props: ["path", "first_song"],
+  components: { Loader },
   setup(props, { emit }) {
     const query = useDebouncedRef("", 400);
 
@@ -63,8 +68,13 @@ export default {
 .folder-top .search {
   width: 50%;
   display: grid;
+  grid-template-columns: 1fr 1fr;
   place-items: end;
 
+  .loaderr {
+    width: 2rem;
+  }
+
   .search-input {
     max-width: 20rem;
     width: 100%;
@@ -123,4 +133,4 @@ export default {
     }
   }
 }
-</style>
+</style>

src/components/RightSideBar/Search.vue

@@ -69,7 +69,7 @@ import useDebouncedRef from "@/composables/useDebouncedRef";
 import AlbumGrid from "@/components/Search/AlbumGrid.vue";
 import ArtistGrid from "@/components/Search/ArtistGrid.vue";
 import TracksGrid from "@/components/Search/TracksGrid.vue";
-import Loader from "@/components/Search/Loader.vue";
+import Loader from "@/components/shared/Loader.vue";
 import Options from "@/components/Search/Options.vue";
 import Filters from "@/components/Search/Filters.vue";
 import "@/assets/css/Search/Search.scss";
@@ -138,7 +138,7 @@ export default {
     }
 
     function loadMoreTracks(start) {
-      // scrollSearchThing();
+      scrollSearchThing();
       loadMore.loadMoreTracks(start).then((response) => {
         tracks.tracks = [...tracks.tracks, ...response.tracks];
         tracks.more = response.more;

src/components/shared/Loader.vue

@@ -4,15 +4,10 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import state from "@/composables/state.js";
-export default {
-  setup() {
-    return {
-      loading: state.loading,
-    };
-  },
-};
+
+const loading = state.loading
 </script>
 
 <style lang="scss">

src/components/shared/SongItem.vue

@@ -1,10 +1,15 @@
 <template>
-  <tr class="songlist-item" :class="{ current: current.trackid === song.trackid }" @dblclick="emitUpdate(song)">
+  <tr
+    class="songlist-item"
+    :class="{ current: current.trackid === song.trackid }"
+    @dblclick="emitUpdate(song)"
+  >
     <td class="index">{{ index }}</td>
-    <td class="flex" @click="emitUpdate(song)">
+    <td class="flex">
       <div
         class="album-art image"
         :style="{ backgroundImage: `url(&quot;${song.image}&quot;` }"
+        @click="emitUpdate(song)"
       >
         <div
           class="now-playing-track image"
@@ -12,8 +17,8 @@
           :class="{ active: is_playing, not_active: !is_playing }"
         ></div>
       </div>
-      <div>
-        <span class="ellip">{{ song.title }}</span>
+      <div @click="emitUpdate(song)">
+        <span class="ellip title">{{ song.title }}</span>
         <div class="artist ellip">
           <span v-for="artist in putCommas(song.artists)" :key="artist">
             {{ artist }}
@@ -35,7 +40,10 @@
       </div>
     </td>
     <td class="song-album">
-      <div class="ellip" @click="emitLoadAlbum(song.album, song.albumartist)">
+      <div
+        class="album ellip"
+        @click="emitLoadAlbum(song.album, song.albumartist)"
+      >
         {{ song.album }}
       </div>
     </td>
@@ -94,12 +102,10 @@ export default {
   }
 
   .song-duration {
-    font-size: .8rem;
+    font-size: 0.8rem;
     width: 5rem !important;
   }
 
-  cursor: pointer;
-
   .flex {
     position: relative;
     padding-left: 4rem;
@@ -113,13 +119,19 @@ export default {
       margin-right: 1rem;
       display: grid;
       place-items: center;
-      border-radius: .5rem;
+      border-radius: 0.5rem;
+      cursor: pointer;
+    }
+
+    .title {
+      cursor: pointer;
     }
 
     .artist {
       display: none;
       font-size: 0.8rem;
       color: rgba(255, 255, 255, 0.719);
+      cursor: pointer;
 
       @include phone-only {
         display: unset;
@@ -136,7 +148,7 @@ export default {
     border-radius: $small 0 0 $small;
   }
 
-  td:nth-child(2){
+  td:nth-child(2) {
     border-radius: 0 $small $small 0;
 
     @include phone-only {
@@ -194,12 +206,21 @@ export default {
   }
 
   .song-album {
+    .album {
+      cursor: pointer;
+      width: max-content;
+    }
+
     @include tablet-portrait {
       display: none;
     }
   }
 
   .song-artists {
+    .artist {
+      cursor: pointer;
+    }
+
     @include phone-only {
       display: none;
     }