remove div nesting on right sidebar

+ rewrite vTooltip to handle updates to tooltip text

src/views/FolderView.vue

@@ -12,8 +12,12 @@
           loading="lazy"
         />
       </div>
-      <FolderList :folders="FStore.dirs" v-if="FStore.dirs.length" />
-      <SongList :tracks="FStore.tracks" :path="FStore.path" />
+      <FolderList :folders="folder.dirs" v-if="folder.dirs.length" />
+      <SongList
+        :tracks="folder.tracks"
+        :path="folder.path"
+        @playFromPage="playFromPage"
+      />
     </div>
   </div>
 </template>
@@ -26,12 +30,14 @@ import SongList from "@/components/FolderView/SongList.vue";
 import FolderList from "@/components/FolderView/FolderList.vue";
 import FolderSvg from "@/assets/icons/folder.svg";
 
-import useFStore from "../stores/pages/folder";
-import useLoaderStore from "../stores/loader";
+import useFolderStore from "@/stores/pages/folder";
+import useQueueStore from "@/stores/queue";
+import useLoaderStore from "@/stores/loader";
 import { isSameRoute } from "@/composables/perks";
 
 const loader = useLoaderStore();
-const FStore = useFStore();
+const folder = useFolderStore();
+const queue = useQueueStore();
 
 const scrollable = ref<any>(null);
 
@@ -40,11 +46,17 @@ function getFolderName(route: RouteLocationNormalized) {
   return path.split("/").pop();
 }
 
+function playFromPage(index: number) {
+  queue.playFromFolder(folder.path, folder.tracks);
+  queue.play(index);
+}
+
 onBeforeRouteUpdate((to, from) => {
   if (isSameRoute(to, from)) return;
 
   loader.startLoading();
-  FStore.fetchAll(to.params.path as string)
+  folder
+    .fetchAll(to.params.path as string)
 
     .then(() => {
       scrollable.value.scrollTop = 0;
@@ -107,7 +119,7 @@ onBeforeRouteUpdate((to, from) => {
       width: 100%;
       object-fit: cover;
       object-position: bottom right;
-      transition: all .25s ease;
+      transition: all 0.25s ease;
     }
   }
 

src/views/album/Content.vue

@@ -6,7 +6,8 @@
         :tracks="disc"
         :on_album_page="true"
         :disc="key"
-        :copyright="isLastDisc(key) ? () => copyright : null"
+        :copyright="isLastDisc(key) ? copyright : null"
+        @playFromPage="playFromAlbumPage"
       />
     </div>
   </div>
@@ -15,6 +16,8 @@
 <script setup lang="ts">
 import { Track } from "@/interfaces";
 import SongList from "@/components/FolderView/SongList.vue";
+import useQueueStore from "@/stores/queue";
+import useAlbumStore from "@/stores/pages/album";
 
 const props = defineProps<{
   discs: {
@@ -23,11 +26,20 @@ const props = defineProps<{
   copyright?: string;
 }>();
 
+const queue = useQueueStore();
+const album = useAlbumStore();
+
 // check if the disc is the last disc
 const isLastDisc = (disc: string | number) => {
   const discs = Object.keys(props.discs);
   return discs[discs.length - 1] === disc;
 };
+
+function playFromAlbumPage(index: number) {
+  const { title, artist, hash } = album.info;
+  queue.playFromAlbum(title, artist, hash, album.tracks);
+  queue.play(index);
+}
 </script>
 
 <style lang="scss">

src/views/playlist/Content.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="songlist rounded">
     <div v-if="tracks.length">
-      <SongList :tracks="tracks" :pname="name" :playlistid="playlistid"/>
+      <SongList
+        :tracks="tracks"
+        :pname="name"
+        :playlistid="playlistid"
+        @playFromPage="playFromPlaylistPage"
+      />
     </div>
     <div v-else-if="tracks.length === 0 && count > 0">
       <div class="no-results">
@@ -17,6 +22,9 @@
 </template>
 
 <script setup lang="ts">
+import useQueueStore from "@/stores/queue";
+import usePlaylistStore from "@/stores/pages/playlist";
+
 import SongList from "@/components/FolderView/SongList.vue";
 import { Track } from "@/interfaces";
 
@@ -26,4 +34,13 @@ defineProps<{
   name: string;
   playlistid: string;
 }>();
+
+const queue = useQueueStore();
+const playlist = usePlaylistStore();
+
+function playFromPlaylistPage(index: number) {
+  const { name, playlistid } = playlist.info;
+  queue.playFromPlaylist(name, playlistid, playlist.tracks);
+  queue.play(index);
+}
 </script>