Implement backup functionality with UI and backend support

Co-authored-by: Koha9 <36852125+Koha9@users.noreply.github.com>

app/main.py

@@ -144,6 +144,30 @@ class ScheduleSettings(BaseModel):
     autoWatch: bool
 
 
+class BackupSettingsPayload(BaseModel):
+    enabled: bool
+    retention_count: int
+
+
+@app.get("/api/backup/settings")
+async def get_backup_settings():
+    server_config.load()
+    return {
+        "enabled": server_config.backup_enabled,
+        "retention_count": server_config.backup_retention_count
+    }
+
+
+@app.put("/api/backup/settings")
+async def save_backup_settings(settings: BackupSettingsPayload):
+    server_config.set_backup(
+        enabled=settings.enabled,
+        retention_count=settings.retention_count
+    )
+    logger.info(f"Backup settings updated. Enabled: {settings.enabled}, Retention: {settings.retention_count}")
+    return {"status": "success", "message": "Backup settings saved"}
+
+
 @app.get("/api/schedule")
 async def get_schedule():
     next_run = get_next_run_time()

app/utils/backup.py

@@ -0,0 +1,270 @@
+import os
+import zipfile
+from datetime import datetime
+from typing import List
+from app.utils.logger import logger
+from app.utils.config import server_config
+from app.utils.local_playlist import load_local_playlist
+from app.utils.plex_client import plex_client
+
+# Default backup directory
+BACKUP_DIR = os.path.abspath(
+    os.path.join(os.path.dirname(__file__), "..", "..", "backups")
+)
+
+
+def ensure_backup_dir():
+    """Ensure the backup directory exists."""
+    if not os.path.exists(BACKUP_DIR):
+        os.makedirs(BACKUP_DIR, exist_ok=True)
+        logger.info(f"Created backup directory: {BACKUP_DIR}")
+
+
+def get_timestamp() -> str:
+    """Generate a timestamp string for backup filenames."""
+    return datetime.now().strftime("%Y%m%d_%H%M%S")
+
+
+def get_sorted_backup_files(prefix: str) -> List[str]:
+    """Get backup files sorted by modification time (oldest first).
+    
+    Args:
+        prefix: The prefix to filter backup files (e.g., 'local_backup_' or 'cloud_backup_')
+    
+    Returns:
+        List of backup file paths sorted by modification time (oldest first)
+    """
+    ensure_backup_dir()
+    backup_files = []
+    for filename in os.listdir(BACKUP_DIR):
+        if filename.startswith(prefix) and filename.endswith('.zip'):
+            filepath = os.path.join(BACKUP_DIR, filename)
+            backup_files.append(filepath)
+    
+    # Sort by modification time (oldest first)
+    backup_files.sort(key=lambda x: os.path.getmtime(x))
+    return backup_files
+
+
+def cleanup_old_backups(prefix: str, retention_count: int):
+    """Delete old backup files exceeding the retention count.
+    
+    Args:
+        prefix: The prefix to filter backup files (e.g., 'local_backup_' or 'cloud_backup_')
+        retention_count: Maximum number of backups to keep (0 means no auto-delete)
+    """
+    if retention_count <= 0:
+        logger.debug(f"Backup retention count is {retention_count}, skipping cleanup for {prefix}")
+        return
+    
+    backup_files = get_sorted_backup_files(prefix)
+    
+    # Delete oldest files if we exceed retention count
+    files_to_delete = len(backup_files) - retention_count
+    if files_to_delete > 0:
+        for filepath in backup_files[:files_to_delete]:
+            try:
+                os.remove(filepath)
+                logger.info(f"Deleted old backup: {filepath}")
+            except Exception as e:
+                logger.warning(f"Failed to delete backup {filepath}: {e}")
+
+
+def backup_local_playlists(local_path: str) -> str | None:
+    """Create a backup of local playlists.
+    
+    Reads all playlist files from the local path and writes them to a zip file
+    without any modifications.
+    
+    Args:
+        local_path: Path to the local playlist directory
+    
+    Returns:
+        Path to the created backup file, or None if backup failed
+    """
+    ensure_backup_dir()
+    
+    if not local_path or not os.path.isdir(local_path):
+        logger.warning(f"Local path does not exist or is not a directory: {local_path}")
+        return None
+    
+    timestamp = get_timestamp()
+    backup_filename = f"local_backup_{timestamp}.zip"
+    backup_path = os.path.join(BACKUP_DIR, backup_filename)
+    
+    try:
+        playlist_count = 0
+        with zipfile.ZipFile(backup_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
+            for entry in os.scandir(local_path):
+                if not entry.is_file():
+                    continue
+                if not entry.name.lower().endswith((".m3u", ".m3u8")):
+                    continue
+                
+                # Read the original file content
+                try:
+                    with open(entry.path, 'r', encoding='utf-8') as f:
+                        content = f.read()
+                except UnicodeDecodeError:
+                    # Try with different encoding
+                    with open(entry.path, 'r', encoding='latin-1') as f:
+                        content = f.read()
+                
+                # Get the playlist name without extension and add .m3u8 extension
+                playlist_name = os.path.splitext(entry.name)[0]
+                archive_name = f"{playlist_name}.m3u8"
+                
+                # Write to zip
+                zipf.writestr(archive_name, content)
+                playlist_count += 1
+        
+        if playlist_count == 0:
+            # Remove empty zip file
+            os.remove(backup_path)
+            logger.info("No playlists found for local backup")
+            return None
+        
+        logger.info(f"Created local backup with {playlist_count} playlists: {backup_path}")
+        return backup_path
+    
+    except Exception as e:
+        logger.error(f"Failed to create local backup: {e}")
+        # Clean up partial backup file if it exists
+        if os.path.exists(backup_path):
+            try:
+                os.remove(backup_path)
+            except OSError:
+                pass
+        return None
+
+
+def backup_cloud_playlists(library_name: str) -> str | None:
+    """Create a backup of cloud playlists.
+    
+    Fetches all playlists from the Plex server and writes them to a zip file
+    without any modifications.
+    
+    Args:
+        library_name: Name of the Plex library to backup playlists from
+    
+    Returns:
+        Path to the created backup file, or None if backup failed
+    """
+    ensure_backup_dir()
+    
+    if not plex_client.connected:
+        logger.warning("Plex client not connected, cannot backup cloud playlists")
+        return None
+    
+    if not library_name:
+        logger.warning("No library name specified for cloud backup")
+        return None
+    
+    timestamp = get_timestamp()
+    backup_filename = f"cloud_backup_{timestamp}.zip"
+    backup_path = os.path.join(BACKUP_DIR, backup_filename)
+    
+    try:
+        playlists = plex_client.get_lib_playlists(library_name)
+        if not playlists:
+            logger.info("No playlists found for cloud backup")
+            return None
+        
+        playlist_count = 0
+        with zipfile.ZipFile(backup_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
+            for playlist in playlists:
+                try:
+                    # Get playlist items
+                    items = playlist.items()
+                    
+                    # Build m3u8 content
+                    lines = ["#EXTM3U"]
+                    for item in items:
+                        # Try to get file path from the track
+                        try:
+                            if hasattr(item, 'media') and item.media:
+                                for media in item.media:
+                                    if hasattr(media, 'parts') and media.parts:
+                                        for part in media.parts:
+                                            if hasattr(part, 'file') and part.file:
+                                                # Add extended info if available
+                                                duration = getattr(item, 'duration', 0) or 0
+                                                duration_seconds = duration // 1000 if duration else -1
+                                                title = getattr(item, 'title', 'Unknown')
+                                                artist = ''
+                                                if hasattr(item, 'grandparentTitle'):
+                                                    artist = item.grandparentTitle
+                                                elif hasattr(item, 'artist'):
+                                                    artist_attr = getattr(item, 'artist')
+                                                    if callable(artist_attr):
+                                                        artist = str(artist_attr())
+                                                    else:
+                                                        artist = str(artist_attr)
+                                                
+                                                extinf = f"#EXTINF:{duration_seconds},{artist} - {title}"
+                                                lines.append(extinf)
+                                                lines.append(part.file)
+                                                break
+                        except Exception as e:
+                            logger.debug(f"Could not get file path for track: {e}")
+                            continue
+                    
+                    if len(lines) > 1:  # More than just #EXTM3U
+                        content = "\n".join(lines)
+                        archive_name = f"{playlist.title}.m3u8"
+                        zipf.writestr(archive_name, content)
+                        playlist_count += 1
+                        
+                except Exception as e:
+                    logger.warning(f"Failed to backup playlist '{playlist.title}': {e}")
+                    continue
+        
+        if playlist_count == 0:
+            # Remove empty zip file
+            os.remove(backup_path)
+            logger.info("No playlists with valid tracks found for cloud backup")
+            return None
+        
+        logger.info(f"Created cloud backup with {playlist_count} playlists: {backup_path}")
+        return backup_path
+    
+    except Exception as e:
+        logger.error(f"Failed to create cloud backup: {e}")
+        # Clean up partial backup file if it exists
+        if os.path.exists(backup_path):
+            try:
+                os.remove(backup_path)
+            except OSError:
+                pass
+        return None
+
+
+def perform_backup_before_sync(local_path: str, library_name: str):
+    """Perform backup of both local and cloud playlists before sync.
+    
+    This function should be called before sync if backup is enabled.
+    It also handles cleanup of old backups based on retention settings.
+    
+    Args:
+        local_path: Path to the local playlist directory
+        library_name: Name of the Plex library
+    """
+    server_config.load()
+    
+    if not server_config.backup_enabled:
+        logger.debug("Backup is disabled, skipping pre-sync backup")
+        return
+    
+    logger.info("Starting pre-sync backup...")
+    
+    # Backup local playlists
+    local_backup = backup_local_playlists(local_path)
+    if local_backup:
+        cleanup_old_backups("local_backup_", server_config.backup_retention_count)
+    
+    # Backup cloud playlists
+    cloud_backup = backup_cloud_playlists(library_name)
+    if cloud_backup:
+        cleanup_old_backups("cloud_backup_", server_config.backup_retention_count)
+    
+    logger.info("Pre-sync backup completed")

app/utils/config.py

@@ -39,6 +39,8 @@ class ServerConfig:
         self.schedule_weekly_days = [0]
         self.schedule_weekly_time = "03:00"
         self.schedule_auto_watch = False
+        self.backup_enabled = False
+        self.backup_retention_count = 5
         self.load()
 
     def load(self) -> None:
@@ -89,6 +91,8 @@ class ServerConfig:
         self.schedule_weekly_days = config.get("schedule_weekly_days", [0])
         self.schedule_weekly_time = config.get("schedule_weekly_time", "03:00")
         self.schedule_auto_watch = config.get("schedule_auto_watch", False)
+        self.backup_enabled = config.get("backup_enabled", False)
+        self.backup_retention_count = config.get("backup_retention_count", 5)
         logger.info(f"Server config loaded.")
         logger.debug(f"Current server config: {self.__dict__}")
 
@@ -111,6 +115,8 @@ class ServerConfig:
             "schedule_weekly_days": self.schedule_weekly_days,
             "schedule_weekly_time": self.schedule_weekly_time,
             "schedule_auto_watch": self.schedule_auto_watch,
+            "backup_enabled": self.backup_enabled,
+            "backup_retention_count": self.backup_retention_count,
         }
         with open(CONFIG_PATH, "w", encoding="utf-8") as f:
             json.dump(config, f, indent=4, ensure_ascii=False)
@@ -182,6 +188,15 @@ class ServerConfig:
         self.schedule_auto_watch = auto_watch
         self.save()
 
+    def set_backup(
+        self,
+        enabled: bool,
+        retention_count: int,
+    ) -> None:
+        self.backup_enabled = enabled
+        self.backup_retention_count = retention_count
+        self.save()
+
     def set_and_save_config(
         self,
         theme: str = None,

app/utils/sync_manager.py

@@ -5,6 +5,7 @@ from datetime import datetime
 from app.utils.logger import logger
 from app.utils.playlist_merge import sync_all_playlists, SyncMode
 from app.utils.config import server_config
+from app.utils.backup import perform_backup_before_sync
 
 class SyncManager:
     def __init__(self):
@@ -110,6 +111,10 @@ class SyncManager:
         if sync_kwargs:
             kwargs.update(sync_kwargs)
 
+        # Perform backup before sync if enabled
+        local_dir = kwargs.get("local_dir", server_config.local_path)
+        perform_backup_before_sync(local_dir, server_config.library_name)
+
         # Execute sync
         return sync_all_playlists(**kwargs)
 

frontend/App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { Playlist, ServerType, SyncStrategy, PlexServerConnection, PathMappingConfig, PathMappingMode, PlexConnectionSettings, SyncState, ScheduleSettings, ScheduleMode } from './types';
+import { Playlist, ServerType, SyncStrategy, PlexServerConnection, PathMappingConfig, PathMappingMode, PlexConnectionSettings, SyncState, ScheduleSettings, ScheduleMode, BackupSettings } from './types';
 import { apiService } from './services/api';
 import { 
   STRIPE_BASE_SPEED,
@@ -161,6 +161,12 @@ const App: React.FC = () => {
   });
   const [nextRunTime, setNextRunTime] = useState<string | undefined>(undefined);
 
+  // Backup State
+  const [backupSettings, setBackupSettings] = useState<BackupSettings>({
+    enabled: false,
+    retentionCount: 5
+  });
+
   // Toast Notification System
   const [toasts, setToasts] = useState<Toast[]>([]);
   const timeoutsRef = useRef<{[key: number]: ReturnType<typeof setTimeout>}>({});
@@ -246,6 +252,13 @@ const App: React.FC = () => {
     }
   }, []);
 
+  const loadBackupSettings = useCallback(async () => {
+    const result = await apiService.getBackupSettings();
+    if (result.status === 'success') {
+      setBackupSettings(result.data);
+    }
+  }, []);
+
   // Handle Schedule Save
   const handleSaveSchedule = async (settings: ScheduleSettings): Promise<boolean> => {
     const result = await apiService.saveScheduleSettings(settings);
@@ -267,6 +280,17 @@ const App: React.FC = () => {
     }
   };
 
+  // Handle Backup Settings Save
+  const handleSaveBackupSettings = async (settings: BackupSettings) => {
+    const result = await apiService.saveBackupSettings(settings);
+    if (result.status === 'success') {
+      setBackupSettings(settings);
+      addToast('Backup settings have been saved.');
+    } else {
+      addToast(result.message || 'Failed to save backup settings.');
+    }
+  };
+
   // Fetch Local Playlists
   const refreshLocal = useCallback(async () => {
     if (localAbortRef.current) localAbortRef.current.abort();
@@ -329,7 +353,8 @@ const App: React.FC = () => {
   useEffect(() => {
     loadSettings();
     loadSchedule();
-  }, [loadSettings, loadSchedule]);
+    loadBackupSettings();
+  }, [loadSettings, loadSchedule, loadBackupSettings]);
 
   // Initial Load
   useEffect(() => {
@@ -749,6 +774,8 @@ const App: React.FC = () => {
                 onSelect={handleStrategyChange}
                 savedPathMapping={pathMappingConfig}
                 onSavePathMapping={handleSavePathMapping}
+                savedBackup={backupSettings}
+                onSaveBackup={handleSaveBackupSettings}
                 savedSchedule={scheduleSettings}
                 onSaveSchedule={handleSaveSchedule}
                 syncState={syncState}

frontend/components/StrategySelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { SyncStrategy, ReplacementRule, PathMappingConfig, PathMappingRules, PathMappingMode, SyncState, ScheduleSettings, ScheduleMode } from '../types';
+import { SyncStrategy, ReplacementRule, PathMappingConfig, PathMappingRules, PathMappingMode, SyncState, ScheduleSettings, ScheduleMode, BackupSettings } from '../types';
 import { 
   ArrowRightCircle, 
   ArrowLeftCircle, 
@@ -19,6 +19,8 @@ import {
   Type,
   Code2,
   Link,
+  Archive,
+  History,
   Eye
 } from 'lucide-react';
 
@@ -222,6 +224,8 @@ interface StrategySelectorProps {
   onSelect: (strategy: SyncStrategy, label: string) => void;
   savedPathMapping: PathMappingConfig;
   onSavePathMapping: (config: PathMappingConfig) => void;
+  savedBackup: BackupSettings;
+  onSaveBackup: (settings: BackupSettings) => void;
   savedSchedule: ScheduleSettings;
   onSaveSchedule: (settings: ScheduleSettings) => Promise<boolean>;
   syncState: SyncState;
@@ -233,6 +237,8 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
   onSelect, 
   savedPathMapping, 
   onSavePathMapping,
+  savedBackup,
+  onSaveBackup,
   savedSchedule,
   onSaveSchedule,
   syncState,
@@ -245,6 +251,10 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
   const [localPathMapping, setLocalPathMapping] = useState<PathMappingConfig>(savedPathMapping);
   const [isMappingDirty, setIsMappingDirty] = useState(false);
 
+  // Local state for Backup Settings
+  const [localBackup, setLocalBackup] = useState<BackupSettings>(savedBackup);
+  const [isBackupDirty, setIsBackupDirty] = useState(false);
+
   // Local state for Schedule editing
   const [localSchedule, setLocalSchedule] = useState<ScheduleSettings>(savedSchedule);
   const [isScheduleDirty, setIsScheduleDirty] = useState(false);
@@ -263,6 +273,11 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
     setIsMappingDirty(false);
   }, [savedPathMapping]);
 
+  useEffect(() => {
+    setLocalBackup(JSON.parse(JSON.stringify(savedBackup)));
+    setIsBackupDirty(false);
+  }, [savedBackup]);
+
   useEffect(() => {
     setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
     if (savedSchedule.mode !== ScheduleMode.DISABLED) {
@@ -277,6 +292,12 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
     setIsMappingDirty(isDifferent);
   }, [localPathMapping, savedPathMapping]);
 
+  // Check dirty state for backup
+  useEffect(() => {
+    const isDifferent = JSON.stringify(localBackup) !== JSON.stringify(savedBackup);
+    setIsBackupDirty(isDifferent);
+  }, [localBackup, savedBackup]);
+
   // Check dirty state for Schedule (including Active Tab changes)
   useEffect(() => {
     const effectiveLocal = deriveEffectiveSchedule(localSchedule, activeScheduleTab);
@@ -360,6 +381,22 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
   const regexRules = localPathMapping.regex;
   const simpleRules = localPathMapping.simple;
 
+  // --- Backup Handlers ---
+  const handleUpdateBackup = (field: keyof BackupSettings, value: any) => {
+    if (isLocked) return;
+    setLocalBackup(prev => ({ ...prev, [field]: value }));
+  };
+
+  const handleResetBackup = () => {
+    if (isLocked) return;
+    setLocalBackup(JSON.parse(JSON.stringify(savedBackup)));
+  };
+
+  const handleSaveBackupClick = () => {
+    if (isLocked) return;
+    onSaveBackup(localBackup);
+  };
+
   // --- Schedule Handlers ---
   const handleUpdateSchedule = (field: keyof ScheduleSettings, value: any) => {
     if (isLocked) return;
@@ -478,6 +515,83 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             </div>
             </div>
 
+            {/* Section 1.5: Backup Retention */}
+            <div className="px-4 py-3 bg-gray-900/40 border-b border-white/5 flex-none">
+              <div className="flex items-center justify-between mb-3">
+                 <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Backup Retention</h3>
+              </div>
+              
+              <div className="flex flex-col space-y-3">
+                 <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                       <div className="p-1.5 rounded-lg bg-indigo-500/10 border border-indigo-500/20 text-indigo-400">
+                          <Archive size={16} />
+                       </div>
+                       <div className="flex flex-col">
+                          <span className="text-sm font-medium text-gray-200">Enable Backups</span>
+                          <span className="text-[10px] text-gray-500">Create a copy before changes</span>
+                       </div>
+                    </div>
+
+                    <button 
+                      onClick={() => handleUpdateBackup('enabled', !localBackup.enabled)}
+                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-plex-orange focus:ring-offset-2 focus:ring-offset-gray-900 ${localBackup.enabled ? 'bg-plex-orange' : 'bg-gray-700'}`}
+                    >
+                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${localBackup.enabled ? 'translate-x-6' : 'translate-x-1'}`} />
+                    </button>
+                 </div>
+                 
+                 {/* Expanded Config */}
+                 <div className={`overflow-hidden transition-all duration-300 ${localBackup.enabled ? 'max-h-20 opacity-100' : 'max-h-0 opacity-50'}`}>
+                    <div className="flex items-center justify-between p-2.5 rounded-lg bg-black/20 border border-white/5">
+                        <div className="flex items-center space-x-2">
+                           <History size={14} className="text-gray-500" />
+                           <span className="text-xs text-gray-400">Max versions to keep:</span>
+                        </div>
+                        <div className="flex items-center space-x-2">
+                            <input 
+                               type="number" 
+                               min="0" 
+                               max="100" 
+                               value={localBackup.retentionCount}
+                               onChange={(e) => {
+                                 const value = parseInt(e.target.value, 10);
+                                 handleUpdateBackup('retentionCount', isNaN(value) ? 0 : Math.max(0, value));
+                               }}
+                               className="w-16 bg-gray-800 border border-gray-700 text-center text-sm rounded py-1 text-white focus:border-plex-orange focus:outline-none"
+                            />
+                            <span className="text-[10px] text-gray-600 italic">{localBackup.retentionCount === 0 ? 'No auto-delete' : 'Oldest deleted automatically'}</span>
+                        </div>
+                    </div>
+                 </div>
+
+                 <div className="flex justify-end items-center gap-2 pt-1">
+                    <button
+                        onClick={handleResetBackup}
+                        disabled={!isBackupDirty}
+                        className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
+                        ${isBackupDirty 
+                            ? 'bg-gray-800 border-gray-600 text-gray-300 hover:bg-gray-700 hover:text-white' 
+                            : 'bg-transparent border-transparent text-gray-700 cursor-not-allowed'}`}
+                    >
+                        <RotateCcw size={12} />
+                        <span>Revert</span>
+                    </button>
+                    <button
+                        onClick={handleSaveBackupClick}
+                        disabled={!isBackupDirty}
+                        className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
+                        ${isBackupDirty 
+                            ? 'bg-plex-orange border-plex-orange text-gray-900 hover:bg-yellow-500 shadow-lg shadow-plex-orange/10' 
+                            : 'bg-gray-800/30 border-gray-800/50 text-gray-600 cursor-not-allowed'}`}
+                    >
+                        <Save size={12} />
+                        <span>Save</span>
+                    </button>
+                 </div>
+              </div>
+            </div>
+
             {/* Section 2: Path Mapping (Tabs + Grid) */}
             <div className="p-4 bg-gray-900/40 border-b border-white/5 flex-none">
                 <div className="flex items-center justify-between mb-3">
@@ -791,7 +905,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                 className={`w-full py-3 rounded-lg text-sm font-bold flex items-center justify-center gap-2 transition-all shadow-lg
                 ${isLocked 
                     ? 'bg-gray-700/30 text-gray-500 cursor-not-allowed border border-gray-700/50' 
-                    : isMappingDirty
+                    : isMappingDirty || isBackupDirty
                         ? 'bg-gray-800 text-gray-500 cursor-not-allowed border border-gray-700'
                         : 'bg-green-600 hover:bg-green-500 text-white border border-green-500 shadow-green-900/20 active:scale-[0.98]'
                 }`}
@@ -808,9 +922,9 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     </>
                 )}
             </button>
-            {(isMappingDirty) && (
+            {(isMappingDirty || isBackupDirty) && (
                 <p className="text-[10px] text-plex-orange text-center mt-2">
-                    Please save path mapping changes before syncing.
+                    Please save pending changes (Backups/Path Mapping) before syncing.
                 </p>
             )}
         </div>

frontend/services/api.ts

@@ -1,4 +1,4 @@
-import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, ReplacementRule, PathMappingConfig, PathMappingMode, PathMappingRules, SyncStrategy, ScheduleSettings } from '../types';
+import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, ReplacementRule, PathMappingConfig, PathMappingMode, PathMappingRules, SyncStrategy, ScheduleSettings, BackupSettings } from '../types';
 
 const API_BASE = import.meta.env.VITE_API_BASE_URL || '';
 
@@ -234,4 +234,31 @@ export const apiService = {
     const response = await fetch(`${API_BASE}/api/sync/status`);
     return handleResponse(response);
   },
+
+  async getBackupSettings(): Promise<ApiResponse<BackupSettings>> {
+    const response = await fetch(`${API_BASE}/api/backup/settings`);
+    const result = await handleResponse<any>(response);
+    if (result.status === 'success') {
+      return {
+        status: 'success',
+        data: {
+          enabled: result.data.enabled ?? false,
+          retentionCount: result.data.retention_count ?? 5,
+        },
+      };
+    }
+    return result as ApiResponse<BackupSettings>;
+  },
+
+  async saveBackupSettings(settings: BackupSettings): Promise<ApiResponse<null>> {
+    const response = await fetch(`${API_BASE}/api/backup/settings`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        enabled: settings.enabled,
+        retention_count: settings.retentionCount,
+      }),
+    });
+    return handleResponse(response);
+  },
 };