Add a manual sync button to the UI, along with a sync status indicator bar.

Merge commit '74b37a062cb63d578c1584f2ac1df067dc8b5ed3'

sample-front-end/services/api.ts

@@ -1,5 +1,5 @@
 
-import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary } from '../types';
+import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, SyncStrategy, RegexReplacement } from '../types';
 import { MOCK_LOCAL_PLAYLISTS, MOCK_CLOUD_PLAYLISTS } from './mockData';
 
 const SIMULATE_DELAY_MS = 800;
@@ -126,6 +126,15 @@ const authenticatePlex = async (settings: PlexConnectionSettings, signal?: Abort
   });
 }
 
+const triggerSync = async (strategy: SyncStrategy, regexRules: RegexReplacement[]): Promise<void> => {
+  return new Promise((resolve) => {
+    // Simulate a sync process taking 3 seconds
+    setTimeout(() => {
+      resolve();
+    }, 3000);
+  });
+};
+
 export const apiService = {
   getPlaylists: async (serverType: ServerType, signal?: AbortSignal): Promise<ApiResponse<Playlist[]>> => {
     try {
@@ -173,5 +182,14 @@ export const apiService = {
         message: error.message || 'Connection failed' 
       };
     }
+  },
+
+  syncPlaylists: async (strategy: SyncStrategy, regexRules: RegexReplacement[]): Promise<ApiResponse<null>> => {
+    try {
+      await triggerSync(strategy, regexRules);
+      return { data: null, status: 'success', message: 'Sync complete' };
+    } catch (error) {
+      return { data: null, status: 'error', message: 'Sync failed' };
+    }
   }
-};
+};