Playlist Art, Minor Fixes

src/components/Modal.vue

@@ -62,7 +62,7 @@ watch(show, n => {
 }
 .modal-content * {
   width: 100%;
-  padding: 1rem;
+  padding: .5rem 1rem;
 }
 .modal-close {
   color: var(--color-background);

src/components/NewPlaylist.vue

@@ -71,6 +71,7 @@ onMounted(() => {
       <template v-for="i in list">
         <AlbumItem
           :name="i.name"
+          :author="'Songs • ' + i.urls.length"
           :grad="useRand()"
           @open-album="Play(i.name)" />
       </template>

src/components/Playlists.vue

@@ -1,10 +1,13 @@
 <script setup>
+
 defineProps({
   url: String,
   urls: Array,
   show: Boolean,
 });
+
 defineEmits(['playthis']);
+
 </script>
 
 <template>
@@ -17,6 +20,9 @@ defineEmits(['playthis']);
             <div class="bars"></div>
             <div class="bars"></div>
           </span>
+          <div v-else-if="plurl.thumbnails" class="pl-img">
+            <img :src="plurl.thumbnails[0].url" :height=" plurl.thumbnails[0].height" :width="plurl.thumbnails[0].width">
+          </div>
           <span class="pl-main caps">{{ plurl.title }}</span>
         </div>
       </template>
@@ -57,6 +63,25 @@ defineEmits(['playthis']);
   background: var(--color-background-soft);
 }
 .pl-main {
-  padding-left: 3rem;
+  padding-left: 2.75rem;
+}
+.pl-img {
+  top: .45rem;
+  left: .45rem;
+  position: absolute;
+  background-image: var(--src);
+  height: 2.75rem;
+  width: 2.75rem;
+  border-radius: .125rem;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+.pl-img img {
+  height: 100%;
+  width: 100%;
+  border-radius: .125rem;
+}
+.pl-img[data-active=false] {
+  display: none;
 }
 </style>

src/components/StatusBar.vue

@@ -47,7 +47,7 @@ function Save() {
         ">
         <template #content>
           <template v-for="i in list">
-            <div class="flex item" @click="pl = i.name">
+            <div class="flex item" @click="pl = i.name" :data-active="pl == i.name">
               <span>{{ i.name }}</span
               ><span class="ml-auto">{{ i.urls.length || '' }}</span>
             </div>
@@ -177,10 +177,17 @@ function Save() {
   margin-left: auto;
 }
 .item {
-  border-radius: 50rem 0 0 50rem;
+  background: var(--color-background);
+  border-radius: .5rem;
+  margin: .5rem 0;
 }
 .item:hover {
-  background-color: var(--color-background-mute);
+  background: var(--color-background-mute);
+}
+
+.item[data-active=true] {
+  color: var(--color-background);
+  background: linear-gradient(135deg, cornflowerblue, #88c0d0);
 }
 #menu {
   bottom: 1.5rem;