fix watchdog

- remove creating album feature from watchdog (rely on the periodic function)

src/components/AlbumView/Header.vue

@@ -9,13 +9,12 @@
       }"
     >
       <div class="art">
-        <div
-          class="image shadow-lg rounded"
-          :style="{
-            backgroundImage: `url(&quot;${imguri + album.image}&quot;)`,
-          }"
+        <img
+          :src="imguri + album.image"
+          alt=""
           v-motion-slide-from-left
-        ></div>
+          class="rounded shadow-lg"
+        />
       </div>
       <div class="info" :class="{ nocontrast: isLight() }">
         <div class="top" v-motion-slide-from-top>
@@ -50,7 +49,7 @@
 import useVisibility from "@/composables/useVisibility";
 import useNavStore from "@/stores/nav";
 import useAlbumStore from "@/stores/pages/album";
-import { reactive, ref } from "vue";
+import { ref } from "vue";
 import { playSources } from "../../composables/enums";
 import { formatSeconds } from "../../composables/perks";
 import { paths } from "../../config";
@@ -177,10 +176,6 @@ function theyContrast(color1: string, color2: string) {
 </script>
 
 <style lang="scss">
-.album-h {
-  height: auto;
-}
-
 .a-header {
   display: grid;
   grid-template-columns: max-content 1fr;
@@ -197,9 +192,10 @@ function theyContrast(color1: string, color2: string) {
     display: flex;
     align-items: flex-end;
 
-    .image {
+    img {
       width: 15rem;
       height: 15rem;
+      transition: all 0.2s ease-in-out;
     }
   }
 

src/components/LeftSidebar/SongCard.vue

@@ -11,12 +11,7 @@
           }"
         >
           <div class="art">
-            <div
-              class="l-image image rounded"
-              :style="{
-                backgroundImage: `url(&quot;${imguri + track.image}&quot;)`,
-              }"
-            ></div>
+            <img :src="imguri + track.image" alt="" class="l-image rounded" />
           </div>
         </router-link>
 

src/components/RightSideBar/Main.vue

@@ -8,9 +8,8 @@
         <div class="r-search" v-show="tabs.current === tabs.tabs.search">
           <Search />
         </div>
-
         <div class="r-queue" v-show="tabs.current === tabs.tabs.queue">
-          <UpNext />
+          <Queue />
         </div>
       </div>
     </div>
@@ -19,7 +18,7 @@
 
 <script setup lang="ts">
 import Search from "./Search/Main.vue";
-import UpNext from "./Queue.vue";
+import Queue from "./Queue.vue";
 import DashBoard from "./Home/Main.vue";
 import useTabStore from "../../stores/tabs";
 

src/components/shared/ArtistCard.vue

@@ -38,11 +38,11 @@ defineProps<{
   cursor: pointer;
 
   .artist-image {
-    width: 7em;
-    height: 7em;
+    width: 8em;
+    height: 8em;
     border-radius: 60%;
     margin-bottom: $small;
-    background-size: 7rem 7rem;
+    background-size: 8rem 8rem;
     background-position: center;
     background-repeat: no-repeat;
     transition: all 0.5s ease-in-out;

src/components/shared/SongItem.vue

@@ -7,13 +7,12 @@
   >
     <div class="index">{{ props.index }}</div>
     <div class="flex">
-      <div
-        class="album-art image rounded"
-        :style="{
-          backgroundImage: `url(&quot;${imguri + props.song.image}&quot;`,
-        }"
-        @click="emitUpdate(props.song)"
-      >
+      <div @click="emitUpdate(props.song)" class="thumbnail">
+        <img
+          :src="imguri + props.song.image"
+          alt=""
+          class="album-art image rounded"
+        />
         <div
           class="now-playing-track image"
           v-if="props.isPlaying && props.isCurrent"
@@ -226,20 +225,25 @@ function emitUpdate(track: Track) {
 
   .flex {
     position: relative;
-    padding-left: 4rem;
     align-items: center;
 
+    .thumbnail {
+      margin-right: $small;
+      display: flex;
+    }
+
     .album-art {
-      position: absolute;
-      left: $small;
       width: 3rem;
       height: 3rem;
-      margin-right: 1rem;
-      display: grid;
-      place-items: center;
       cursor: pointer;
     }
 
+    .now-playing-track {
+      position: absolute;
+      left: $small;
+      top: $small;
+    }
+
     .title {
       cursor: pointer;
       word-break: break-all;

src/stores/tabs.ts

@@ -3,8 +3,8 @@ import { focusElem } from "../composables/perks";
 
 const tablist = {
   home: "home",
-  search: "search",
   queue: "queue",
+  search: "search",
 };
 
 export default defineStore("tabs", {