Squashed 'sample-front-end/' changes from 601ffe4..552f9c4

552f9c4 feat: Centralize animation and timing constants
cc962c2 feat: Adjust sync animation gradient
e623426 feat: Add playlist sync functionality and animations

git-subtree-dir: sample-front-end
git-subtree-split: 552f9c471324793b85af14534e81d45d319036a2

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' };
+    }
   }
-};
+};