feat(quick-17): create playlist-details subpage component

- New playlist-details component with header (back button, playlist icon, title, track count)
- Full track list with all interactions: select, play, context menu, drag, phantom handling
- Drop target support for adding tracks from other views
- Search filtering for tracks within the detail view
- Navigation routing in index.ts for playlist-details view
- Added playlist-details to SEARCHABLE_VIEWS in search-store

frontend/index.ts

@@ -11,6 +11,7 @@ import '@components/artists-view/artists-view.ts';
 import '@components/artist-details/artist-details.ts';
 import '@components/genres-view/genres-view.ts';
 import '@components/genre-details/genre-details.ts';
+import '@components/playlist-details/playlist-details.ts';
 import '@components/search-bar/search-bar.ts';
 import '@components/track-details/track-details.ts';
 import '@awesome.me/webawesome/dist/styles/themes/default.css';
@@ -67,6 +68,17 @@ document.addEventListener('navigate', (e: Event) => {
             mainContent.appendChild(el);
             break;
         }
+        case 'playlist-details': {
+            const { playlistId, playlistName } =
+                (e as CustomEvent).detail;
+            const plEl = document.createElement('playlist-details');
+
+            plEl.setAttribute('playlist-id', String(playlistId));
+            plEl.setAttribute('playlist-name', playlistName);
+            mainContent.innerHTML = '';
+            mainContent.appendChild(plEl);
+            break;
+        }
         case 'genres':
             mainContent.innerHTML = '<genres-view></genres-view>';
             break;

frontend/src/store/search-store.ts

@@ -1,5 +1,5 @@
 /** Searchable views that respond to the global search term. */
-const SEARCHABLE_VIEWS = new Set(['tracks', 'albums', 'playlists', 'artists', 'genres']);
+const SEARCHABLE_VIEWS = new Set(['tracks', 'albums', 'playlists', 'playlist-details', 'artists', 'genres']);
 
 type Subscriber = () => void;