use third-party module to auto-persist queue store

+ more redesign
+ convert js files to ts

src/components/BottomBar/BottomBar.vue

@@ -4,11 +4,15 @@
       <img
         :src="paths.images.thumb + queue.currenttrack?.image"
         alt=""
-        class="rounded"
+        class="rounded shadow-lg"
       />
       <div class="tags">
         <div class="np-artist ellip">
-          <span v-for="artist in putCommas(queue.currenttrack?.artists || ['Artist'])">
+          <span
+            v-for="artist in putCommas(
+              queue.currenttrack?.artists || ['Artist']
+            )"
+          >
             {{ artist }}
           </span>
         </div>
@@ -18,16 +22,27 @@
       </div>
     </div>
     <Progress />
+    <!-- <div class="ex-hotkeys">
+      <HotKeys />
+    </div> -->
+    <div class="time">
+      <span class="current">{{ formatSeconds(queue.currentTime) }}</span>
+      <HotKeys />
+      <span class="full">{{
+        formatSeconds(queue.fullTime || queue.currenttrack.length)
+      }}</span>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import "@/assets/scss/BottomBar/BottomBar.scss";
 import { formatSeconds, putCommas } from "@/utils";
+import HotKeys from "../LeftSidebar/NP/HotKeys.vue";
 import Progress from "../LeftSidebar/NP/Progress.vue";
 
-import useQStore from "@/stores/queue";
 import { paths } from "@/config";
+import useQStore from "@/stores/queue";
 
 const queue = useQStore();
 </script>
@@ -36,10 +51,28 @@ const queue = useQStore();
 .b-bar {
   display: grid;
   grid-template-rows: 1fr max-content;
-  border-radius: 1rem;
   gap: 1rem;
   padding: 1rem;
-  padding-bottom: 2rem;
+  padding-bottom: 1rem;
+  position: relative;
+
+  .time {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    align-items: center;
+
+    .full {
+      text-align: end;
+    }
+  }
+
+  .ex-hotkeys {
+    position: absolute;
+    width: 10rem;
+    right: 1rem;
+    top: 1rem;
+    border-radius: $small;
+  }
 
   .info {
     display: grid;
@@ -55,11 +88,11 @@ const queue = useQStore();
       display: flex;
       flex-direction: column;
       justify-content: flex-end;
+      gap: $smaller;
 
       .np-title {
         font-size: 1.15rem;
         font-weight: bold;
-        margin-bottom: $small;
       }
 
       .np-artist {

src/components/LeftSidebar/NP/HotKeys.vue

@@ -1,6 +1,6 @@
 <template>
   
-  <div class="hotkeys">
+  <div class="hotkeys rounded noscroll">
     <div class="image ctrl-btn" id="previous" @click="q.playPrev"></div>
     <div
       class="image ctrl-btn play-pause"
@@ -28,13 +28,13 @@ const q = useQStore();
   justify-content: center;
   place-content: flex-end;
   width: 100%;
+  background-color: $gray2;
 
   .ctrl-btn {
     height: 2.5rem;
     width: 100%;
     background-size: 1.5rem !important;
     cursor: pointer;
-    border-radius: 0.5rem;
 
     &:hover {
       background-color: $accent;

src/components/LeftSidebar/NP/SongCard.vue

@@ -1,47 +1,44 @@
 <template>
-  <div class="info">
-    <div class="desc">
-      <div>
-        <router-link
-          :to="{
-            name: 'AlbumView',
-            params: {
-              hash: track?.albumhash ? track.albumhash : ' ',
-            },
-          }"
-        >
-          <div class="art">
-            <img
-              :src="imguri + track?.image"
-              alt=""
-              class="l-image rounded force-lm"
-              loading="lazy"
-            />
-          </div>
-        </router-link>
-
+  <div class="sidebar-songcard">
+    <router-link
+      :to="{
+        name: 'AlbumView',
+        params: {
+          hash: track?.albumhash ? track.albumhash : ' ',
+        },
+      }"
+    >
+      <div class="art">
+        <img
+          :src="imguri + track?.image"
+          alt=""
+          class="l-image rounded force-lm"
+          loading="lazy"
+        />
         <div id="bitrate" v-if="track?.bitrate">
           <span v-if="track.bitrate > 1500">MASTER</span>
           <span v-else-if="track.bitrate > 330">FLAC</span>
           <span v-else>MP3</span>
           • {{ track.bitrate }}
         </div>
-        <div class="title ellip">{{ props.track?.title }}</div>
-        <div class="separator no-border"></div>
-        <div
-          class="artists ellip"
-          v-if="track?.artists && track?.artists[0] !== ''"
-        >
-          <span v-for="artist in putCommas(track.artists)" :key="artist">{{
-            artist
-          }}</span>
-        </div>
-        <div class="artists" v-else-if="track?.artists">
-          <span>{{ track.albumartist }}</span>
-        </div>
-        <div class="artists" v-else>
-          <span>Meh</span>
-        </div>
+      </div>
+    </router-link>
+
+    <div class="bottom">
+      <div class="title ellip">{{ props.track?.title }}</div>
+      <div
+        class="artists ellip"
+        v-if="track?.artists && track?.artists[0] !== ''"
+      >
+        <span v-for="artist in putCommas(track.artists)" :key="artist">{{
+          artist
+        }}</span>
+      </div>
+      <div class="artists" v-else-if="track?.artists">
+        <span>{{ track.albumartist }}</span>
+      </div>
+      <div class="artists" v-else>
+        <span>Meh</span>
       </div>
     </div>
   </div>
@@ -57,3 +54,53 @@ const props = defineProps<{
   track: Track | null;
 }>();
 </script>
+
+<style lang="scss">
+.sidebar-songcard {
+  .art {
+    width: 100%;
+    aspect-ratio: 1;
+    place-items: center;
+    margin-bottom: $small;
+    position: relative;
+
+    img {
+      width: 100%;
+      height: auto;
+      aspect-ratio: 1;
+      object-fit: cover;
+    }
+
+    #bitrate {
+      position: absolute;
+      font-size: 0.75rem;
+      width: max-content;
+      padding: 0.2rem 0.35rem;
+      bottom: 1rem;
+      left: 1rem;
+      background-color: $black;
+      border-radius: $smaller;
+      box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
+    }
+  }
+
+  .bottom {
+    display: grid;
+    gap: $smaller;
+  }
+
+  .title {
+    font-weight: 900;
+    word-break: break-all;
+  }
+
+  .artists {
+    font-size: 0.85rem;
+    opacity: 0.75;
+    
+    &:hover {
+      text-decoration: underline 1px !important;
+    }
+  }
+}
+</style>

src/components/LeftSidebar/Playlists.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="sidebar-playlists">
+    <div class="header">your playlists</div>
+    <div class="list rounded">
+      <div v-for="p in pStore.playlists" class="ellip">
+        <router-link
+          :to="{
+            name: 'PlaylistView',
+            params: {
+              pid: p.playlistid,
+            },
+          }"
+        >
+          {{ p.name }}
+        </router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import usePStore from "@/stores/pages/playlists";
+import { onMounted } from "vue";
+const pStore = usePStore();
+
+onMounted(() => {
+  if (pStore.playlists.length == 0) {
+    pStore.fetchAll();
+  }
+});
+</script>
+
+<style lang="scss">
+.sidebar-playlists {
+  //   outline: solid 1px;
+  display: grid;
+  grid-template-rows: max-content 1fr;
+
+  .header {
+    opacity: 0.5;
+    margin-bottom: $small;
+    margin-left: 1rem;
+    font-size: small;
+  }
+
+  .list {
+    padding: $small;
+
+    & > * {
+      padding: $small;
+    }
+  }
+}
+</style>

src/components/LeftSidebar/nowPlaying.vue

@@ -1,14 +1,5 @@
 <template>
   <div class="now-playing-card t-center rounded">
-    <div class="headin">Now playing</div>
-    <div
-      class="button menu rounded"
-      @click="showContextMenu"
-      :class="{ context_on: context_on }"
-    >
-      <MenuSvg />
-    </div>
-    <div class="separator no-border"></div>
     <div>
       <SongCard :track="queue.currenttrack" />
       <div class="l-track-time">
@@ -16,8 +7,8 @@
         ><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
       </div>
       <Progress />
-      <HotKeys />
     </div>
+    <HotKeys />
   </div>
 </template>
 
@@ -65,10 +56,11 @@ const showContextMenu = (e: Event) => {
 <style lang="scss">
 .now-playing-card {
   padding: 1rem;
-  background-color: $primary;
   width: 100%;
   display: grid;
+  grid-template-rows: 1fr max-content;
   position: relative;
+  gap: 1rem;
 
   .l-track-time {
     display: flex;
@@ -96,24 +88,6 @@ const showContextMenu = (e: Event) => {
     }
   }
 
-  .headin {
-    font-weight: bold;
-    font-size: 0.9rem;
-  }
-
-  .button {
-    position: absolute;
-    top: $small;
-    cursor: pointer;
-    transition: all 200ms;
-    display: flex;
-    align-items: center;
-    padding: $smaller;
-
-    &:hover {
-      background-color: $accent;
-    }
-  }
 
   .context_on {
     background-color: $accent;
@@ -123,43 +97,5 @@ const showContextMenu = (e: Event) => {
     right: $small;
     transform: rotate(90deg);
   }
-
-  .art {
-    width: 100%;
-    aspect-ratio: 1;
-    place-items: center;
-    margin-bottom: $small;
-
-    .l-image {
-      height: 100%;
-      width: 100%;
-    }
-  }
-
-  #bitrate {
-    position: absolute;
-    font-size: 0.75rem;
-    width: max-content;
-    padding: 0.2rem 0.35rem;
-    top: 14rem;
-    left: 2rem;
-    background-color: $black;
-    border-radius: $smaller;
-    box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
-  }
-
-  .title {
-    font-weight: 900;
-    word-break: break-all;
-  }
-
-  .artists {
-    font-size: 0.85rem;
-    color: rgba(255, 255, 255, 0.808);
-
-    &:hover {
-      text-decoration: underline 1px !important;
-    }
-  }
 }
 </style>

src/components/Logo.vue

@@ -16,7 +16,6 @@
 
 #logo {
   height: 4.5rem !important;
-  width: 15rem;
   background-image: url(./../assets/images/logo.webp);
   background-size: contain;
   @include ximage;

src/components/RightSideBar/Queue.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="up-next">
     <div class="r-grid">
-      <UpNext :track="queue.tracklist[queue.next]" :playNext="queue.playNext" />
       <div class="scrollable-r bg-black rounded">
         <QueueActions />
         <div
@@ -23,7 +22,6 @@
           </TransitionGroup>
         </div>
       </div>
-      <!-- <PlayingFrom :from="queue.from" /> -->
     </div>
   </div>
 </template>
@@ -35,9 +33,7 @@ import useQStore from "@/stores/queue";
 import { focusElem } from "@/utils";
 
 import TrackItem from "../shared/TrackItem.vue";
-import PlayingFrom from "./Queue/playingFrom.vue";
 import QueueActions from "./Queue/QueueActions.vue";
-import UpNext from "./Queue/upNext.vue";
 
 const queue = useQStore();
 const mouseover = ref(false);
@@ -66,8 +62,6 @@ onUpdated(() => {
   opacity: 0;
 }
 
-/* ensure leaving items are taken out of layout flow so that moving
-   animations can be calculated correctly. */
 .queuelist-leave-active {
   transition: none;
   position: absolute;
@@ -85,10 +79,9 @@ onUpdated(() => {
   .r-grid {
     position: relative;
     height: 100%;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: max-content 1fr;
-    gap: 1rem;
+    // display: grid;
+
+    // gap: 1rem;
 
     .scrollable-r {
       height: 100%;