configure watchdog to accept a list of dirs to watch

- fix PlayingFrom component not working with album
- fix types issues on PlayingFrom component

src/components/FolderView/SongList.vue

@@ -86,7 +86,12 @@ function updateQueue(track: Track) {
       queue.play(index);
       break;
     case "AlbumView":
-      queue.playFromAlbum(track.album, track.albumartist, props.tracks);
+      queue.playFromAlbum(
+        track.album,
+        track.albumartist,
+        track.albumhash,
+        props.tracks
+      );
       queue.play(index);
       break;
     case "PlaylistView":
@@ -148,7 +153,7 @@ function getTracks() {
       display: none;
     }
 
-    .context-on {
+    .contexton {
       background-color: $gray4;
       color: $white !important;
     }

src/components/RightSideBar/queue/playingFrom.vue

@@ -2,7 +2,7 @@
   <div id="playing-from" class="rounded" @click="goTo">
     <div class="h">
       <div class="icon image" :class="from.icon"></div>
-     Playing from
+      Playing from
     </div>
     <div class="name">
       <div id="to">
@@ -13,7 +13,12 @@
 </template>
 
 <script setup lang="ts">
-import { fromFolder, fromAlbum, fromPlaylist, fromSearch } from "../../../interfaces";
+import {
+  fromFolder,
+  fromAlbum,
+  fromPlaylist,
+  fromSearch,
+} from "../../../interfaces";
 import { FromOptions } from "../../../composables/enums";
 import { useRouter } from "vue-router";
 import { computed } from "@vue/reactivity";
@@ -42,7 +47,7 @@ const from = computed((): from => {
     case FromOptions.album:
       return {
         icon: "album",
-        text: props.from.name,
+        text: `${props.from.name} - ${props.from.albumartist}`,
       };
     case FromOptions.playlist:
       return {
@@ -52,37 +57,36 @@ const from = computed((): from => {
     case FromOptions.search:
       return {
         icon: "search",
-        text: `Search results for: "${props.from.query}"`
-      }
+        text: `Search results for: "${props.from.query}"`,
+      };
   }
 });
 
 const router = useRouter();
 
-function goToAlbum() {
+function goToAlbum(from: fromAlbum) {
   router.push({
     name: "AlbumView",
     params: {
-      album: props.from.name,
-      artist: props.from.albumartist,
+      hash: from.hash,
     },
   });
 }
 
-function goToFolder() {
+function goToFolder(from: fromFolder) {
   router.push({
     name: "FolderView",
     params: {
-      path: props.from.path,
+      path: from.path,
     },
   });
 }
 
-function goToPlaylist() {
+function goToPlaylist(from: fromPlaylist) {
   router.push({
     name: "PlaylistView",
     params: {
-      pid: props.from.playlistid,
+      pid: from.playlistid,
     },
   });
 }
@@ -90,13 +94,13 @@ function goToPlaylist() {
 function goTo() {
   switch (props.from.type) {
     case FromOptions.folder:
-      goToFolder();
+      goToFolder(props.from);
       break;
     case FromOptions.album:
-      goToAlbum();
+      goToAlbum(props.from);
       break;
     case FromOptions.playlist:
-      goToPlaylist();
+      goToPlaylist(props.from);
       break;
   }
 }
@@ -108,7 +112,7 @@ function goTo() {
   padding: 0.75rem;
   cursor: pointer;
   position: relative;
-  transition: all .2s ease;
+  transition: all 0.2s ease;
   background-color: $black;
 
   &:hover {
@@ -121,7 +125,7 @@ function goTo() {
   }
 
   .h {
-    font-size: .9rem;
+    font-size: 0.9rem;
     margin-bottom: $small;
     display: flex;
     align-items: center;

src/components/shared/SongItem.vue

@@ -3,7 +3,7 @@
     class="songlist-item rounded"
     :class="[
       { current: isCurrent },
-      { 'context-on': context_on },
+      { contexton: context_on },
       {
         highlighted: isHighlighted,
       },
@@ -134,7 +134,6 @@ function emitUpdate(track: Track) {
   text-align: left;
   gap: $small;
   user-select: none;
-  text-transform: capitalize;
 
   @include tablet-landscape {
     grid-template-columns: 1.5rem 1.5fr 1fr 1fr 2.5rem;

src/components/shared/TrackItem.vue

@@ -6,7 +6,7 @@
       {
         currentInQueue: props.isCurrent,
       },
-      { 'context-on': context_on },
+      { contexton: context_on },
     ]"
     @contextmenu="showContextMenu"
   >
@@ -87,7 +87,7 @@ const playThis = (track: Track) => {
   background-color: $gray3;
 }
 
-.context-on {
+.contexton {
   background-color: $gray4;
   color: $white !important;
 }