show 'Track' or 'Tracks' depending on track count on playlist card

+ handle clicks on context menu separator

src/components/Contextmenu/ContextItem.vue

@@ -9,7 +9,7 @@
         v-for="child in option.children"
         :key="child.label"
         :class="[{ critical: child.critical }, child.type]"
-        @click="child.action()"
+        @click="child.action && child.action()"
       >
         <div class="label ellip">
           {{ child.label }}

src/components/PlaylistView/Header.vue

@@ -4,7 +4,7 @@
     ref="playlistheader"
     :style="[
       {
-        backgroundImage: info.image ? `url(${imguri + info.image})` : '',
+        backgroundImage: info.image ? `url(${imguri + info.image})` : undefined,
       },
     ]"
     :class="{ border: !info.image }"
@@ -16,16 +16,15 @@
           <PlayBtnRect :source="playSources.playlist" :store="usePStore" />
         </div>
         <div class="duration">
-          <span v-if="info.count == 0">No Tracks</span>
+          {{ info.count + ` ${info.count == 1 ? "Track" : "Tracks"}` }}
-          <span v-else-if="info.count == 1">{{ info.count }} Track</span>
+          •
-          <span v-else>{{ info.count }} Tracks</span> •
           {{ formatSeconds(info.duration, true) }}
         </div>
         <div class="title ellip">{{ info.name }}</div>
         <div class="type">Playlist</div>
       </div>
     </div>
-    <div class="last-updated">
+    <div class="last-updated" :class="{ lightbg: !info.image }">
       <span class="status"
         >Last updated {{ info.lastUpdated }} &#160;|&#160;&#160;</span
       >
@@ -77,7 +76,7 @@ function showDropdown(e: any) {
   grid-template-columns: 1fr;
   height: 100%;
   position: relative;
-
+  background-color: $gray5;
 
   .gradient {
     position: absolute;
@@ -120,6 +119,10 @@ function showDropdown(e: any) {
     }
   }
 
+  .last-updated.lightbg {
+    background-color: $gray2;
+  }
+
   .carddd {
     width: 100%;
     padding: 1rem;

src/components/PlaylistsList/PlaylistCard.vue

@@ -6,19 +6,11 @@
   >
     <img :src="imguri + props.playlist.thumb" />
     <div class="overlay pad-lg">
-      <div class="p-name">{{ playlist.name }}</div>
+      <div class="p-name ellip">{{ playlist.name }}</div>
-      <div class="p-count">{{ playlist.count }} Tracks</div>
+      <div class="p-count">
-    </div>
+        {{ playlist.count + ` ${playlist.count == 1 ? "Track" : "Tracks"}` }}
-    <!-- <div class="bottom">
-      <div class="name ellip">{{ props.playlist.name }}</div>
-      <div class="count">
-        <span v-if="props.playlist.count == 0">No Tracks</span>
-        <span v-else-if="props.playlist.count == 1"
-          >{{ props.playlist.count }} Track</span
-        >
-        <span v-else>{{ props.playlist.count }} Tracks</span>
       </div>
-    </div> -->
+    </div>
   </router-link>
 </template>
 

src/components/contextMenu.vue

@@ -23,7 +23,7 @@
       :key="option.label"
       :class="[{ critical: option.critical }, option.type]"
       :option="option"
-      @click="option.action()"
+      @click="option.action && option.action()"
     />
   </div>
 </template>