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/components/plex/PlexLibraryModal.vue

@@ -3,9 +3,9 @@
     <div class="library-modal-content" @click.stop>
       <div class="library-modal-header">
         <div class="library-header-title">
-          <span class="library-icon-large">
-            {{ getLibraryIcon(libraryType) }}
-          </span>
+          <div class="library-icon-large">
+            <component :is="libraryIconComponent" />
+          </div>
           <div>
             <h3>{{ getLibraryTitle(libraryType) }}</h3>
             <p class="library-subtitle">{{ details.total }} items</p>
@@ -78,9 +78,13 @@
 </template>
 
 <script setup lang="ts">
+  import { computed } from "vue";
   import IconClose from "@/icons/IconClose.vue";
+  import IconMovie from "@/icons/IconMovie.vue";
+  import IconShow from "@/icons/IconShow.vue";
+  import IconMusic from "@/icons/IconMusic.vue";
   import PlexLibraryItem from "@/components/plex/PlexLibraryItem.vue";
-  import { getLibraryIcon, getLibraryTitle } from "@/utils/plexHelpers";
+  import { getLibraryTitle } from "@/utils/plexHelpers";
 
   interface LibraryDetails {
     total: number;
@@ -96,11 +100,18 @@
     details: LibraryDetails;
   }
 
-  defineProps<Props>();
+  const props = defineProps<Props>();
 
   const emit = defineEmits<{
     (e: "close"): void;
   }>();
+
+  const libraryIconComponent = computed(() => {
+    if (props.libraryType === "movies") return IconMovie;
+    if (props.libraryType === "shows") return IconShow;
+    if (props.libraryType === "music") return IconMusic;
+    return IconMovie;
+  });
 </script>
 
 <style scoped>
@@ -146,8 +157,17 @@
   }
 
   .library-icon-large {
-    font-size: 48px;
-    line-height: 1;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: 100%;
+      fill: var(--highlight-color);
+    }
   }
 
   .library-modal-header h3 {