Update Plex library item URLs to use app.plex.tv format

Change library item links to use the official Plex Web App URL format
instead of direct server URLs. This ensures items open correctly in
the Plex web interface.

Changes:
- usePlexApi.fetchPlexServers() now returns machineIdentifier (clientIdentifier)
- PlexSettings stores and passes machineId through the library loading flow
- usePlexLibraries.loadLibraries() accepts machineIdentifier parameter
- processLibrarySection() passes machineIdentifier to processLibraryItem()
- plexHelpers.processLibraryItem() updated signature and URL generation

New URL format:
https://app.plex.tv/desktop/#!/server/{machineId}/details?key=%2Flibrary%2Fmetadata%2F{ratingKey}

Example:
fe85f47ef9/details

Benefits:
- Links work universally (not dependent on local server URL)
- Opens in official Plex Web App with full functionality
- Consistent with Plex's own linking conventions
- Works from any network location

src/components/settings/PlexSettings.vue

@@ -86,6 +86,7 @@
 
   const plexServer = ref("");
   const plexServerUrl = ref("");
+  const plexMachineId = ref("");
   const lastSync = ref("");
   const libraryStats = ref({
     movies: 0,
@@ -153,6 +154,7 @@
 
       plexServer.value = server.name;
       plexServerUrl.value = server.url;
+      plexMachineId.value = server.machineIdentifier;
       lastSync.value = new Date().toLocaleString();
 
       const sections = await fetchLibrarySections(authToken, server.url);
@@ -165,6 +167,7 @@
         sections,
         authToken,
         server.url,
+        server.machineIdentifier,
         plexUsername.value,
         fetchLibraryDetails
       );

src/composables/usePlexApi.ts

@@ -100,7 +100,11 @@ export function usePlexApi() {
         if (connection) {
           plexServerUrl.value = connection.uri;
         }
-        return { name: ownedServer.name, url: plexServerUrl.value };
+        return {
+          name: ownedServer.name,
+          url: plexServerUrl.value,
+          machineIdentifier: ownedServer.clientIdentifier
+        };
       }
 
       return null;

src/composables/usePlexLibraries.ts

@@ -9,6 +9,7 @@ export function usePlexLibraries() {
     sections: any[],
     authToken: string,
     serverUrl: string,
+    machineIdentifier: string,
     username: string,
     fetchLibraryDetailsFn: any
   ) {
@@ -40,6 +41,7 @@ export function usePlexLibraries() {
           await processLibrarySection(
             authToken,
             serverUrl,
+            machineIdentifier,
             key,
             "movies",
             stats,
@@ -50,6 +52,7 @@ export function usePlexLibraries() {
           await processLibrarySection(
             authToken,
             serverUrl,
+            machineIdentifier,
             key,
             "shows",
             stats,
@@ -60,6 +63,7 @@ export function usePlexLibraries() {
           await processLibrarySection(
             authToken,
             serverUrl,
+            machineIdentifier,
             key,
             "music",
             stats,
@@ -102,6 +106,7 @@ export function usePlexLibraries() {
   async function processLibrarySection(
     authToken: string,
     serverUrl: string,
+    machineIdentifier: string,
     sectionKey: string,
     libraryType: string,
     stats: any,
@@ -129,7 +134,13 @@ export function usePlexLibraries() {
 
       // Process recently added items
       const recentItems = data.recentMetadata.map((item: any) =>
-        processLibraryItem(item, libraryType, authToken, serverUrl)
+        processLibraryItem(
+          item,
+          libraryType,
+          authToken,
+          serverUrl,
+          machineIdentifier
+        )
       );
 
       // Calculate stats

src/utils/plexHelpers.ts

@@ -56,7 +56,8 @@ export function processLibraryItem(
   item: any,
   libraryType: string,
   authToken: string,
-  serverUrl: string
+  serverUrl: string,
+  machineIdentifier: string
 ) {
   // Get poster/thumbnail URL
   let posterUrl = null;
@@ -67,13 +68,12 @@ export function processLibraryItem(
   }
 
   // Build Plex Web App URL
-  // Format: https://app.plex.tv/desktop/#!/server/{machineId}/details?key=/library/metadata/{ratingKey}
+  // Format: https://app.plex.tv/desktop/#!/server/{machineId}/details?key=%2Flibrary%2Fmetadata%2F{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}`;
+  if (ratingKey && machineIdentifier) {
+    const encodedKey = encodeURIComponent(`/library/metadata/${ratingKey}`);
+    plexUrl = `https://app.plex.tv/desktop/#!/server/${machineIdentifier}/details?key=${encodedKey}`;
   }
 
   const baseItem = {