remove div nesting on right sidebar

+ rewrite vTooltip to handle updates to tooltip text

src/components/FolderView/SongList.vue

@@ -16,17 +16,17 @@
     </div>
     <div class="songlist">
       <SongItem
-        v-for="track in getTrackList()"
+        v-for="(track, index) in getTrackList()"
         :key="track.trackid"
         :track="track"
         :index="track.index"
-        @updateQueue="updateQueue"
+        @updateQueue="updateQueue(index)"
         :isPlaying="queue.playing"
         :isCurrent="queue.currentid == track.trackid"
       />
     </div>
-    <div class="copyright" v-if="copyright && copyright()">
-      {{ copyright() }}
+    <div class="copyright" v-if="copyright && copyright">
+      {{ copyright }}
     </div>
   </div>
   <div v-else-if="tracks.length === 0">
@@ -38,19 +38,16 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { useRoute } from "vue-router";
 import { useElementSize } from "@vueuse/core";
 
 import SongItem from "../shared/SongItem.vue";
 
 import { Routes } from "@/composables/enums";
 import { Track } from "@/interfaces";
-import useAlbumStore from "@/stores/pages/album";
 import useQStore from "@/stores/queue";
 import { computed } from "@vue/reactivity";
 
 const queue = useQStore();
-const album = useAlbumStore();
 
 const props = defineProps<{
   tracks: Track[];
@@ -59,14 +56,15 @@ const props = defineProps<{
   playlistid?: string;
   on_album_page?: boolean;
   disc?: string | number;
-  copyright?: (() => string) | null;
+  copyright?: string | null;
 }>();
 
-const route = useRoute();
-const routename = route.name as string;
+const emit = defineEmits<{
+  (e: "playFromPage", index: number): void;
+}>();
 
 const tracklistElem = ref<HTMLElement | null>(null);
-const { width, height } = useElementSize(tracklistElem);
+const { width } = useElementSize(tracklistElem);
 
 const brk = {
   sm: 500,
@@ -76,41 +74,8 @@ const brk = {
 const isSmall = computed(() => width.value < brk.sm);
 const isMedium = computed(() => width.value > brk.sm && width.value < brk.md);
 
-/**
- * Plays a clicked track and updates the queue
- *
- * @param track Track object
- */
-function updateQueue(track: Track) {
-  const index = props.tracks.findIndex(
-    (t: Track) => t.trackid === track.trackid
-  );
-
-  switch (routename) {
-    case Routes.folder:
-      queue.playFromFolder(props.path || "", props.tracks);
-      queue.play(index);
-      break;
-    case Routes.album:
-      const tindex = album.tracks.findIndex((t) => t.trackid === track.trackid);
-
-      queue.playFromAlbum(
-        track.album || "",
-        track.albumartist || "",
-        track.albumhash || "",
-        album.tracks
-      );
-      queue.play(tindex);
-      break;
-    case Routes.playlist:
-      queue.playFromPlaylist(
-        props.pname || "",
-        props.playlistid || "",
-        props.tracks
-      );
-      queue.play(index);
-      break;
-  }
+function updateQueue(index: number) {
+  emit("playFromPage", index);
 }
 
 /**

src/components/RightSideBar/Main.vue

@@ -2,20 +2,18 @@
   <div
     class="r-sidebar rounded border"
     :style="{
-      marginBottom: !settings.use_alt_np ? '-1rem' : '',
+      marginBottom: !settings.show_alt_np ? '-1rem' : '',
     }"
   >
-    <div class="grid">
-      <div class="r-content">
-        <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
-          <DashBoard />
-        </div>
-        <div class="r-search" v-if="tabs.current === tabs.tabs.search">
-          <Search />
-        </div>
-        <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
-          <Queue />
-        </div>
+    <div class="r-content">
+      <div class="r-dash" v-if="tabs.current === tabs.tabs.home">
+        <DashBoard />
+      </div>
+      <div class="r-search" v-if="tabs.current === tabs.tabs.search">
+        <Search />
+      </div>
+      <div class="r-queue" v-if="tabs.current === tabs.tabs.queue">
+        <Queue />
       </div>
     </div>
   </div>
@@ -35,28 +33,25 @@ const settings = useSettingsStore();
 <style lang="scss">
 .r-sidebar {
   width: 100%;
+  overflow: hidden;
 
-  .grid {
-    display: flex;
-    position: relative;
+  .r-content {
+    width: 100%;
     height: 100%;
 
-    .r-content {
-      grid-area: content;
+    .r-search {
+      height: 100%;
+    }
+
+    .r-dash {
+      height: 100%;
+    }
+
+    .r-queue {
+      height: 100%;
       overflow: hidden;
-      width: 100%;
-
-      .r-search {
-        height: 100%;
-      }
-
-      .r-dash {
-        height: 100%;
-      }
-
-      .r-queue {
-        height: 100%;
-      }
+      display: grid;
+      grid-template-rows: max-content 1fr;
     }
   }
 }

src/components/RightSideBar/Queue.vue

@@ -1,20 +1,16 @@
 <template>
-  <div class="up-next">
-    <div class="r-grid">
-      <div class="scrollable-r rounded">
-        <QueueActions />
-        <div class="inner">
-          <TrackComponent
-            v-for="(t, index) in queue.tracklist"
-            :key="index"
-            :track="t"
-            :index="index + 1"
-            :isPlaying="queue.playing"
-            :isHighlighted="false"
-            :isCurrent="index === queue.currentindex"
-          />
-        </div>
-      </div>
+    <QueueActions />
+    <div class="scrollable-r">
+      <div class="inner">
+        <TrackComponent
+          v-for="(t, index) in queue.tracklist"
+          :key="index"
+          :track="t"
+          :index="index + 1"
+          :isPlaying="queue.playing"
+          :isHighlighted="false"
+          :isCurrent="index === queue.currentindex"
+        />
     </div>
   </div>
 </template>
@@ -58,32 +54,13 @@ onUpdated(() => {
 </script>
 
 <style lang="scss">
-.up-next {
-  overflow: hidden;
+.scrollable-r {
   height: 100%;
+  overflow: auto;
 
-  .heading {
-    position: relative;
-    margin: 0.5rem 0 1rem 0;
-  }
-
-  .r-grid {
-    position: relative;
-    height: 100%;
-
-    .scrollable-r {
-      height: 100%;
-      overflow: hidden;
-      display: grid;
-      grid-template-rows: max-content 1fr;
-
-      .inner {
-        overflow: scroll;
-        overflow-x: hidden;
-        scrollbar-color: grey transparent;
-        margin: 1rem 0;
-      }
-    }
+  .inner {
+    scrollbar-color: grey transparent;
+    margin: 1rem 0;
   }
 }
 </style>

src/components/shared/SongItem.vue

@@ -86,11 +86,11 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: "updateQueue", song: Track): void;
+  (e: "updateQueue"): void;
 }>();
 
 function emitUpdate(track: Track) {
-  emit("updateQueue", track);
+  emit("updateQueue");
 }
 
 function showMenu(e: Event) {