Replace emojis with SVG icons in Plex library section and add clickable links

Modernize the Plex library UI by replacing emoji icons with proper SVG
icons and making library items clickable to open in Plex.

New icons:
- Created IconMusic.vue for music/album libraries
- Created IconClock.vue for watch time display

PlexLibraryStats updates:
- Replace emoji icons (🎬, 📺, 🎵, ⏱️) with IconMovie, IconShow, IconMusic, IconClock
- Icons use highlight color with hover effects
- Proper sizing: 2.5rem desktop, 2rem mobile

PlexLibraryModal updates:
- Replace emoji in header with dynamic icon component
- Icon sized at 48px with highlight color
- Better visual consistency

PlexLibraryItem updates:
- Add support for clickable links to Plex web interface
- Items render as <a> tags when plexUrl is available
- Fallback icons now use SVG components instead of emojis
- Non-linkable items have disabled hover state

plexHelpers updates:
- processLibraryItem now includes ratingKey and plexUrl
- plexUrl format: {serverUrl}/web/index.html#!/server/library/metadata/{ratingKey}
- Added getLibraryIconComponent helper function

Benefits:
- Professional SVG icons instead of emojis (consistent cross-platform)
- Clickable library items open directly in Plex
- Better accessibility with proper link semantics
- Scalable icons that look sharp at any size
- Consistent color theming with site palette

src/utils/plexHelpers.ts

@@ -7,6 +7,15 @@ export function getLibraryIcon(type: string): string {
   return icons[type] || "📁";
 }
 
+export function getLibraryIconComponent(type: string): string {
+  const components: Record<string, string> = {
+    movies: "IconMovie",
+    shows: "IconShow",
+    music: "IconMusic"
+  };
+  return components[type] || "IconMovie";
+}
+
 export function getLibraryTitle(type: string): string {
   const titles: Record<string, string> = {
     movies: "Movies",
@@ -57,12 +66,24 @@ export function processLibraryItem(
     posterUrl = `${serverUrl}${item.grandparentThumb}?X-Plex-Token=${authToken}`;
   }
 
+  // Build Plex Web App URL
+  // Format: https://app.plex.tv/desktop/#!/server/{machineId}/details?key=/library/metadata/{ratingKey}
+  const ratingKey = item.ratingKey || item.key;
+  let plexUrl = null;
+  if (ratingKey) {
+    // Extract machine ID from serverUrl or use a placeholder
+    // For now, we'll create a direct link to the library metadata
+    plexUrl = `${serverUrl}/web/index.html#!/server/library/metadata/${ratingKey}`;
+  }
+
   const baseItem = {
     title: item.title,
     year: item.year || item.parentYear || new Date().getFullYear(),
     poster: posterUrl,
     fallbackIcon: getLibraryIcon(libraryType),
-    rating: item.rating ? Math.round(item.rating * 10) / 10 : null
+    rating: item.rating ? Math.round(item.rating * 10) / 10 : null,
+    ratingKey,
+    plexUrl
   };
 
   if (libraryType === "shows") {