WIP: storage-fix-local-nas work before playlist controls feature

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>

resources/views/components/playlist-card.blade.php

@@ -1,7 +1,24 @@
-@props(['playlist', 'showTypeBadge' => false])
+@props(['playlist'])
 
 @once
 <style>
+.pl-count-badge {
+    position: absolute;
+    inset: 0 0 0 auto;
+    width: 72px;
+    background: rgba(0,0,0,.78);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #fff;
+    pointer-events: none;
+    z-index: 3;
+}
+.pl-count-badge i { font-size: 20px; }
 .pl-visibility-badge {
     position: absolute;
     bottom: 8px;
@@ -18,6 +35,26 @@
     text-transform: uppercase;
     letter-spacing: .4px;
     pointer-events: none;
+    z-index: 3;
+}
+.pl-type-badge {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    background: rgba(0,0,0,.82);
+    color: #a78bfa;
+    font-size: 11px;
+    font-weight: 700;
+    padding: 3px 7px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    text-transform: uppercase;
+    letter-spacing: .4px;
+    pointer-events: none;
+    white-space: nowrap;
+    z-index: 3;
 }
 </style>
 @endonce
@@ -27,16 +64,14 @@
 <div class="yt-video-card">
     <a href="{{ route('playlists.show', $pl->id) }}">
         <div class="yt-video-thumb">
-            <img src="{{ $pl->thumbnail_url }}" alt="{{ $pl->name }}" loading="lazy">
+            <img src="{{ $pl->thumbnail_url }}" alt="{{ $pl->name }}" loading="lazy" decoding="async" onload="this.classList.add('loaded');this.closest('.yt-video-thumb').classList.add('loaded')">
             <div class="pl-count-badge">
                 <i class="bi bi-collection-play-fill"></i>
                 {{ $pl->videos_count }}
             </div>
-            @if($showTypeBadge)
-                <span class="feed-pl-type-badge">
-                    <i class="bi bi-collection-play-fill"></i> PLAYLIST
-                </span>
-            @endif
+            <span class="pl-type-badge">
+                <i class="bi bi-collection-play-fill"></i> Playlist
+            </span>
             @if($pl->visibility === 'private')
                 <span class="pl-visibility-badge"><i class="bi bi-lock-fill"></i> Private</span>
             @elseif($pl->visibility === 'unlisted')