Add Path Mapping UI with Simple Mapping and Regex Rules modes

- Updated frontend/types.ts with new types: ReplacementRule, PathMappingRules, PathMappingMode, PathMappingConfig
- Replaced StrategySelector.tsx with new UI featuring:
  - Simple Mapping tab for local/cloud path pairs
  - Regex Rules tab with 4 rule groups (localPre, localPost, remotePre, remotePost)
  - MappingGroupEditor sub-component for editing rule lists
- Updated App.tsx to use PathMappingConfig state instead of RegexReplacement[]
- Updated api.ts to handle new PathMappingConfig structure
- Updated backend config.py with path_mapping field support
- Added /api/settings/path-mapping endpoint in main.py

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

frontend/App.tsx

@@ -1,8 +1,7 @@
-
 import React, { useEffect, useState, useCallback, useRef } from 'react';
-import { Playlist, ServerType, SyncStrategy, PlexServerConnection, RegexReplacement, PlexConnectionSettings, SyncState, ScheduleSettings, ScheduleMode } from './types';
+import { Playlist, ServerType, SyncStrategy, PlexServerConnection, PathMappingConfig, PathMappingMode, PlexConnectionSettings, SyncState, ScheduleSettings, ScheduleMode } from './types';
 import { apiService } from './services/api';
-import {
+import { 
   STRIPE_BASE_SPEED,
   STRIPE_DECEL_DURATION_MS,
   STRIPE_TILE_SIZE,
@@ -10,15 +9,13 @@ import {
   SYNC_SUCCESS_TOTAL_MS,
   SYNC_ERROR_RESET_MS,
   TOAST_AUTO_DISMISS_MS,
-  TOAST_EXIT_DURATION_MS,
-  SYNC_BANNER_PADDING_X,
-  SYNC_BANNER_PADDING_Y,
-  SYNC_BANNER_MIN_WIDTH,
+  TOAST_EXIT_DURATION_MS
 } from './Config';
+import { SYNC_BANNER_PADDING_X, SYNC_BANNER_PADDING_Y, SYNC_BANNER_MIN_WIDTH } from './Config';
 import ServerPanel from './components/ServerPanel';
 import StrategySelector from './components/StrategySelector';
 import ConnectionModal from './components/ConnectionModal';
-import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff } from 'lucide-react';
+import { ArrowLeftRight, ShieldCheck, X, Server, ServerOff, Clock, Eye, EyeOff, Type, Code2 } from 'lucide-react';
 
 interface Toast {
   id: number;
@@ -141,8 +138,17 @@ const App: React.FC = () => {
   // Strategy State
   const [currentStrategy, setCurrentStrategy] = useState<SyncStrategy>(SyncStrategy.LOCAL_OVERWRITE);
   
-  // Regex State
-  const [regexReplacements, setRegexReplacements] = useState<RegexReplacement[]>([]);
+  // Path Mapping State (Includes Simple and Regex Rules)
+  const [pathMappingConfig, setPathMappingConfig] = useState<PathMappingConfig>({
+    mode: PathMappingMode.SIMPLE,
+    simple: [],
+    regex: {
+      localPre: [],
+      localPost: [],
+      remotePre: [],
+      remotePost: []
+    }
+  });
 
   // Schedule State
   const [scheduleSettings, setScheduleSettings] = useState<ScheduleSettings>({
@@ -226,7 +232,7 @@ const App: React.FC = () => {
     const result = await apiService.getSettings();
     if (result.status === 'success') {
       setCurrentStrategy(result.data.strategy);
-      setRegexReplacements(result.data.regex);
+      setPathMappingConfig(result.data.pathMapping);
       setLocalPath(result.data.localPath || 'playlist');
       setConnectionSettings(result.data.connection);
     }
@@ -347,14 +353,14 @@ const App: React.FC = () => {
     }
   };
 
-  // Handle Regex Save
-  const handleSaveRegex = async (replacements: RegexReplacement[]) => {
-    setRegexReplacements(replacements);
-    const result = await apiService.saveRegexRules(replacements);
+  // Handle Path Mapping Save
+  const handleSavePathMapping = async (config: PathMappingConfig) => {
+    setPathMappingConfig(config);
+    const result = await apiService.savePathMapping(config);
     if (result.status === 'success') {
-      addToast('Regex preprocessing rules have been saved.');
+      addToast('Path mapping rules have been saved.');
     } else {
-      addToast(result.message || 'Failed to save regex rules.');
+      addToast(result.message || 'Failed to save path mapping rules.');
     }
   };
 
@@ -365,7 +371,7 @@ const App: React.FC = () => {
     setSyncState(SyncState.SYNCING);
     manualSyncInProgress.current = true;
 
-    const result = await apiService.syncPlaylists(currentStrategy, regexReplacements, localPath || undefined);
+    const result = await apiService.syncPlaylists(currentStrategy, pathMappingConfig, localPath || undefined);
 
     manualSyncInProgress.current = false;
 
@@ -513,6 +519,44 @@ const App: React.FC = () => {
 
   const scheduleInfo = getScheduleDisplayInfo();
 
+  // Helper: Calculate Path Mapping Info
+  const getPathMappingDisplayInfo = (config: PathMappingConfig) => {
+    let count = 0;
+    let modeLabel = '';
+    let Icon = Type;
+
+    if (config.mode === PathMappingMode.SIMPLE) {
+        modeLabel = 'Simple';
+        count = config.simple.length;
+        Icon = Type;
+    } else {
+        modeLabel = 'Regex';
+        count = config.regex.localPre.length +
+                config.regex.localPost.length + 
+                config.regex.remotePre.length + 
+                config.regex.remotePost.length;
+        Icon = Code2;
+    }
+
+    if (count === 0) {
+        return {
+            label: 'Path Mapping',
+            value: 'Not Set',
+            active: false,
+            Icon: Icon
+        };
+    }
+
+    return {
+        label: 'Path Mapping',
+        value: `${modeLabel} (${count})`,
+        active: true,
+        Icon: Icon
+    };
+  };
+
+  const pathMappingInfo = getPathMappingDisplayInfo(pathMappingConfig);
+
   return (
     <div className="min-h-screen flex flex-col bg-gray-900 text-gray-100 font-sans overflow-hidden bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-gray-800 via-gray-900 to-black">
       
@@ -574,7 +618,7 @@ const App: React.FC = () => {
 
           {syncState === SyncState.IDLE ? (
             <>
-              {/* Normal Toolbar */}
+              {/* Normal Toolbar Left */}
               <div className="flex items-center space-x-3">
                 <div className="p-1.5 rounded-lg shadow-lg bg-gradient-to-br from-plex-orange to-yellow-600 text-gray-900 shadow-plex-orange/20">
                    <ArrowLeftRight size={24} strokeWidth={2.5} />
@@ -583,9 +627,20 @@ const App: React.FC = () => {
                   Plex<span className="text-plex-orange">Sync</span>
                 </h1>
               </div>
-
+              
               {/* Normal Toolbar Right */}
               <div className="flex items-center gap-4">
+                  {/* Path Mapping Info */}
+                  <div className="flex flex-col items-end hidden md:flex border-r border-gray-700/50 pr-4 mr-1">
+                     <span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
+                       {pathMappingInfo.label}
+                     </span>
+                     <div className={`text-xs font-mono flex items-center gap-1.5 ${pathMappingInfo.active ? 'text-plex-orange' : 'text-gray-600'}`}>
+                        {pathMappingInfo.active && <pathMappingInfo.Icon size={12} />}
+                        <span>{pathMappingInfo.value}</span>
+                     </div>
+                  </div>
+
                   {/* Schedule Info */}
                   <div className="flex flex-col items-end mr-2 md:mr-0 hidden md:flex">
                      <span className="text-[10px] uppercase font-bold text-gray-500 tracking-wider">
@@ -625,6 +680,7 @@ const App: React.FC = () => {
               </div>
             </>
           ) : (
+            /* Syncing / Success Text Banner */
             <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
                <div
                  className="bg-black shadow-none rounded-none border-none"
@@ -691,8 +747,8 @@ const App: React.FC = () => {
               <StrategySelector 
                 currentStrategy={currentStrategy}
                 onSelect={handleStrategyChange}
-                savedRegexReplacements={regexReplacements}
-                onSaveRegex={handleSaveRegex}
+                savedPathMapping={pathMappingConfig}
+                onSavePathMapping={handleSavePathMapping}
                 savedSchedule={scheduleSettings}
                 onSaveSchedule={handleSaveSchedule}
                 syncState={syncState}

frontend/components/StrategySelector.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { SyncStrategy, RegexReplacement, SyncState, ScheduleSettings, ScheduleMode } from '../types';
+import { SyncStrategy, ReplacementRule, PathMappingConfig, PathMappingRules, PathMappingMode, SyncState, ScheduleSettings, ScheduleMode } from '../types';
 import { 
   ArrowRightCircle, 
   ArrowLeftCircle, 
@@ -17,7 +17,9 @@ import {
   Clock,
   Repeat,
   CheckSquare,
-  Square
+  Square,
+  Type,
+  Code2
 } from 'lucide-react';
 
 interface StrategyOption {
@@ -61,6 +63,29 @@ const STRATEGIES: StrategyOption[] = [
 
 const WEEK_DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
 
+// Color Theme Variables for Mapping Editors
+const MAPPING_THEME = {
+  // Container Themes
+  local: {
+    borderColor: "border-blue-500/20",
+    bgColor: "bg-blue-900/10"
+  },
+  remote: {
+    borderColor: "border-green-500/20",
+    bgColor: "bg-green-900/10"
+  },
+  simple: {
+    borderColor: "border-gray-700/50",
+    bgColor: "bg-gray-900/40"
+  },
+  // Input Field Themes
+  inputs: {
+    default: "bg-gray-800 border-gray-700 text-gray-200 focus:border-plex-orange placeholder-gray-600",
+    local: "bg-blue-500/10 border-blue-500/30 text-blue-100 focus:border-blue-400 placeholder-blue-300/30",
+    cloud: "bg-green-500/10 border-green-500/30 text-green-100 focus:border-green-400 placeholder-green-300/30"
+  }
+};
+
 // Helper to determine the actual mode and settings that would be saved based on the current UI state
 const deriveEffectiveSchedule = (schedule: ScheduleSettings, tab: ScheduleMode): ScheduleSettings => {
   const derived = { ...schedule };
@@ -80,11 +105,114 @@ const deriveEffectiveSchedule = (schedule: ScheduleSettings, tab: ScheduleMode):
   return derived;
 };
 
+// Sub-component for a single Mapping Group Editor
+interface MappingGroupEditorProps {
+  title: string;
+  subtitle?: string;
+  rules: ReplacementRule[];
+  onChange: (newRules: ReplacementRule[]) => void;
+  isLocked: boolean;
+  borderColor?: string;
+  bgColor?: string;
+  // Input specific props
+  leftPlaceholder?: string;
+  rightPlaceholder?: string;
+  leftInputClass?: string;
+  rightInputClass?: string;
+}
+
+const MappingGroupEditor: React.FC<MappingGroupEditorProps> = ({ 
+  title, 
+  subtitle, 
+  rules, 
+  onChange, 
+  isLocked,
+  borderColor = "border-gray-700",
+  bgColor = "bg-gray-900/50",
+  leftPlaceholder = "Pattern",
+  rightPlaceholder = "Replace",
+  leftInputClass,
+  rightInputClass
+}) => {
+  
+  const handleAdd = () => {
+    if (isLocked) return;
+    const newId = Date.now().toString() + Math.random().toString();
+    onChange([...rules, { id: newId, search: '', replace: '' }]);
+  };
+
+  const handleUpdate = (id: string, field: 'search' | 'replace', value: string) => {
+    if (isLocked) return;
+    onChange(rules.map(r => r.id === id ? { ...r, [field]: value } : r));
+  };
+
+  const handleDelete = (id: string) => {
+    if (isLocked) return;
+    onChange(rules.filter(r => r.id !== id));
+  };
+
+  // Default input style if not provided
+  const defaultInputStyle = MAPPING_THEME.inputs.default;
+
+  return (
+    <div className={`p-3 rounded-lg border ${borderColor} ${bgColor} flex flex-col h-full transition-colors`}>
+       <div className="flex items-center justify-between mb-2">
+         <div>
+            <h4 className="text-[10px] font-bold uppercase tracking-wider text-gray-400">{title}</h4>
+            {subtitle && <p className="text-[9px] text-gray-500">{subtitle}</p>}
+         </div>
+         <button 
+           onClick={handleAdd}
+           disabled={isLocked}
+           className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
+           title="Add Rule"
+         >
+           <Plus size={12} />
+         </button>
+       </div>
+
+       <div className="flex-1 space-y-2 overflow-y-auto max-h-32 custom-scrollbar pr-1">
+         {rules.length === 0 ? (
+           <div className="text-xs text-gray-600 italic text-center py-2 border border-dashed border-gray-700/50 rounded-lg">
+             No rules defined.
+           </div>
+         ) : (
+           rules.map((rule) => (
+             <div key={rule.id} className="flex items-center space-x-1 animate-in slide-in-from-left-1 duration-200">
+                <input 
+                  type="text" 
+                  placeholder={leftPlaceholder}
+                  value={rule.search}
+                  onChange={(e) => handleUpdate(rule.id, 'search', e.target.value)}
+                  className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${leftInputClass || defaultInputStyle}`}
+                />
+                <ArrowRightCircle size={10} className="text-gray-600 flex-none opacity-50" />
+                <input 
+                  type="text" 
+                  placeholder={rightPlaceholder}
+                  value={rule.replace}
+                  onChange={(e) => handleUpdate(rule.id, 'replace', e.target.value)}
+                  className={`flex-1 min-w-0 border rounded px-1.5 py-1 text-xs focus:outline-none transition-colors ${rightInputClass || defaultInputStyle}`}
+                />
+                <button 
+                  onClick={() => handleDelete(rule.id)}
+                  className="text-gray-600 hover:text-red-400 p-1 rounded hover:bg-red-500/10 transition-colors flex-none"
+                >
+                  <Trash2 size={12} />
+                </button>
+             </div>
+           ))
+         )}
+       </div>
+    </div>
+  );
+};
+
 interface StrategySelectorProps {
   currentStrategy: SyncStrategy;
   onSelect: (strategy: SyncStrategy, label: string) => void;
-  savedRegexReplacements: RegexReplacement[];
-  onSaveRegex: (replacements: RegexReplacement[]) => void;
+  savedPathMapping: PathMappingConfig;
+  onSavePathMapping: (config: PathMappingConfig) => void;
   savedSchedule: ScheduleSettings;
   onSaveSchedule: (settings: ScheduleSettings) => Promise<boolean>;
   syncState: SyncState;
@@ -94,8 +222,8 @@ interface StrategySelectorProps {
 const StrategySelector: React.FC<StrategySelectorProps> = ({ 
   currentStrategy, 
   onSelect, 
-  savedRegexReplacements, 
-  onSaveRegex,
+  savedPathMapping, 
+  onSavePathMapping,
   savedSchedule,
   onSaveSchedule,
   syncState,
@@ -104,17 +232,16 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  // Local state for regex editing
-  const [localReplacements, setLocalReplacements] = useState<RegexReplacement[]>([]);
-  const [isRegexDirty, setIsRegexDirty] = useState(false);
+  // Local state for path mapping editing (stores all lists for both modes)
+  const [localPathMapping, setLocalPathMapping] = useState<PathMappingConfig>(savedPathMapping);
+  const [isMappingDirty, setIsMappingDirty] = useState(false);
 
   // Local state for Schedule editing
   const [localSchedule, setLocalSchedule] = useState<ScheduleSettings>(savedSchedule);
   const [isScheduleDirty, setIsScheduleDirty] = useState(false);
   
   // UI State for Schedule Tabs
-  // We initialize active tab based on the saved mode. If DISABLED, default to CRON.
-  const [activeTab, setActiveTab] = useState<ScheduleMode>(
+  const [activeScheduleTab, setActiveScheduleTab] = useState<ScheduleMode>(
     savedSchedule.mode === ScheduleMode.DISABLED ? ScheduleMode.CRON : savedSchedule.mode
   );
 
@@ -123,32 +250,30 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
 
   // Initialize local state when prop updates
   useEffect(() => {
-    setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
-    setIsRegexDirty(false);
-  }, [savedRegexReplacements]);
+    setLocalPathMapping(JSON.parse(JSON.stringify(savedPathMapping)));
+    setIsMappingDirty(false);
+  }, [savedPathMapping]);
 
   useEffect(() => {
     setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
-    // If the saved mode is not disabled, ensure we show that tab.
     if (savedSchedule.mode !== ScheduleMode.DISABLED) {
-      setActiveTab(savedSchedule.mode);
+      setActiveScheduleTab(savedSchedule.mode);
     }
     setIsScheduleDirty(false);
   }, [savedSchedule]);
 
-  // Check dirty state whenever local changes
+  // Check dirty state whenever local mapping changes
   useEffect(() => {
-    const isDifferent = JSON.stringify(localReplacements) !== JSON.stringify(savedRegexReplacements);
-    setIsRegexDirty(isDifferent);
-  }, [localReplacements, savedRegexReplacements]);
+    const isDifferent = JSON.stringify(localPathMapping) !== JSON.stringify(savedPathMapping);
+    setIsMappingDirty(isDifferent);
+  }, [localPathMapping, savedPathMapping]);
 
   // Check dirty state for Schedule (including Active Tab changes)
   useEffect(() => {
-    // We calculate what the "effective" schedule would be if we saved right now.
-    const effectiveLocal = deriveEffectiveSchedule(localSchedule, activeTab);
+    const effectiveLocal = deriveEffectiveSchedule(localSchedule, activeScheduleTab);
     const isDifferent = JSON.stringify(effectiveLocal) !== JSON.stringify(savedSchedule);
     setIsScheduleDirty(isDifferent);
-  }, [localSchedule, savedSchedule, activeTab]);
+  }, [localSchedule, savedSchedule, activeScheduleTab]);
 
   const selectedOption = STRATEGIES.find(s => s.value === currentStrategy) || STRATEGIES[0];
 
@@ -162,47 +287,70 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  // Determine if tabs have changed from the saved state
-  const initialTab = savedSchedule.mode === ScheduleMode.DISABLED ? ScheduleMode.CRON : savedSchedule.mode;
-  const hasTabChanged = activeTab !== initialTab;
-  const isScheduleActionable = isScheduleDirty || hasTabChanged;
+  const isScheduleActionable = isScheduleDirty || (activeScheduleTab !== (savedSchedule.mode === ScheduleMode.DISABLED ? ScheduleMode.CRON : savedSchedule.mode));
 
   const handleSelect = (strategy: StrategyOption) => {
     if (isLocked) return;
     onSelect(strategy.value, strategy.label);
   };
 
-  // --- Regex Handlers ---
-  const handleAddRegex = () => {
+  // --- Path Mapping Handlers ---
+  const currentMappingMode = localPathMapping.mode;
+  
+  const updateRegexGroup = (section: keyof PathMappingRules, newRules: ReplacementRule[]) => {
     if (isLocked) return;
-    const newId = Date.now().toString();
-    setLocalReplacements(prev => [...prev, { id: newId, pattern: '', replacement: '' }]);
+    setLocalPathMapping(prev => ({
+      ...prev,
+      regex: {
+        ...prev.regex,
+        [section]: newRules
+      }
+    }));
   };
 
-  const handleDeleteRegex = (id: string) => {
+  const updateSimpleGroup = (newRules: ReplacementRule[]) => {
     if (isLocked) return;
-    setLocalReplacements(prev => prev.filter(r => r.id !== id));
+    setLocalPathMapping(prev => ({
+      ...prev,
+      simple: newRules
+    }));
   };
 
-  const handleUpdateRegex = (id: string, field: 'pattern' | 'replacement', value: string) => {
+  const setMappingMode = (mode: PathMappingMode) => {
     if (isLocked) return;
-    setLocalReplacements(prev => prev.map(r => 
-      r.id === id ? { ...r, [field]: value } : r
-    ));
+    setLocalPathMapping(prev => ({ ...prev, mode }));
   };
 
-  const handleResetRegex = () => {
+  const handleResetMapping = () => {
     if (isLocked) return;
-    setLocalReplacements(JSON.parse(JSON.stringify(savedRegexReplacements)));
+    setLocalPathMapping(JSON.parse(JSON.stringify(savedPathMapping)));
   };
 
-  const handleSaveRegex = () => {
+  const handleSaveMappingClick = () => {
     if (isLocked) return;
-    const validReplacements = localReplacements.filter(r => r.pattern.trim() !== '');
-    setLocalReplacements(validReplacements);
-    onSaveRegex(validReplacements);
+    const clean = (rules: ReplacementRule[]) => rules.filter(r => r.search.trim() !== '');
+    
+    // Clean regex rules
+    const cleanRegex = (rules: PathMappingRules): PathMappingRules => ({
+      localPre: clean(rules.localPre),
+      localPost: clean(rules.localPost),
+      remotePre: clean(rules.remotePre),
+      remotePost: clean(rules.remotePost),
+    });
+
+    const cleanedConfig: PathMappingConfig = {
+      mode: localPathMapping.mode,
+      simple: clean(localPathMapping.simple),
+      regex: cleanRegex(localPathMapping.regex),
+    };
+
+    setLocalPathMapping(cleanedConfig);
+    onSavePathMapping(cleanedConfig);
   };
 
+  const regexRules = localPathMapping.regex;
+  const simpleRules = localPathMapping.simple;
+
   // --- Schedule Handlers ---
   const handleUpdateSchedule = (field: keyof ScheduleSettings, value: any) => {
     if (isLocked) return;
@@ -222,24 +370,18 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
     if (isLocked) return;
     setLocalSchedule(JSON.parse(JSON.stringify(savedSchedule)));
     if (savedSchedule.mode !== ScheduleMode.DISABLED) {
-      setActiveTab(savedSchedule.mode);
+      setActiveScheduleTab(savedSchedule.mode);
     } else {
-      setActiveTab(ScheduleMode.CRON);
+      setActiveScheduleTab(ScheduleMode.CRON);
     }
   };
 
   const handleSaveScheduleClick = async () => {
     if (isLocked) return;
-    
-    // Determine the effective settings based on the current view (tab) and inputs
-    const settingsToSave = deriveEffectiveSchedule(localSchedule, activeTab);
-    
-    // Call API
+    const settingsToSave = deriveEffectiveSchedule(localSchedule, activeScheduleTab);
     const success = await onSaveSchedule(settingsToSave);
     if (success) {
       setLocalSchedule(settingsToSave);
-      // Dirty state is cleared by the useEffect prop update, or we can clear it optimistically here if needed,
-      // but useEffect [savedSchedule] handles it correctly.
     }
   };
 
@@ -248,7 +390,6 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
     onSync();
   };
 
-  // Helper to toggle enable/disable for current active tab (Daily/Weekly)
   const toggleScheduleEnable = (targetMode: ScheduleMode) => {
       if (isLocked) return;
       if (localSchedule.mode === targetMode) {
@@ -258,7 +399,6 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
       }
   };
 
-  // If syncing or locked, apply grayscale filter to content sections
   const contentClass = isLocked ? "opacity-50 pointer-events-none grayscale transition-all" : "transition-all";
 
   return (
@@ -279,12 +419,13 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
       <div 
         className={`absolute 
           top-14 
-          /* Mobile: Open to left */
-          right-0 origin-top-right
-          /* Desktop: Center alignment */
-          md:left-1/2 md:right-auto md:origin-top md:-translate-x-1/2 
+          /* Mobile: Open to left (max width of screen) */
+          right-0 w-[90vw] max-w-[90vw] origin-top-right
           
-          w-80 md:w-[32rem] bg-gray-800/95 border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-xl
+          /* Desktop: Center alignment, wider */
+          md:left-1/2 md:right-auto md:origin-top md:-translate-x-1/2 md:w-[60rem] md:max-w-[60rem]
+          
+          bg-gray-800/95 border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-xl
           transition-all duration-200 ease-out
           ${isOpen ? 'opacity-100 scale-100 visible translate-y-0' : 'opacity-0 scale-95 invisible pointer-events-none -translate-y-2'}`}
       >
@@ -328,96 +469,123 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
             </div>
             </div>
 
-            {/* Section 2: Regex Preprocessing */}
+            {/* 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">
-                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Regex Rules</h3>
-                    {localReplacements.length === 0 && (
-                        <button 
-                        onClick={handleAddRegex}
-                        className="p-1 rounded bg-gray-700/50 hover:bg-gray-600 text-gray-400 hover:text-white transition-colors"
-                        title="Add Rule"
-                        >
-                        <Plus size={14} />
-                        </button>
+                    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">Path Mapping</h3>
+                </div>
+
+                {/* Tabs for Path Mapping Mode */}
+                <div className="flex space-x-1 bg-black/30 p-1 rounded-lg mb-4">
+                  {[
+                    { id: PathMappingMode.SIMPLE, label: 'Simple Mapping', icon: Type },
+                    { id: PathMappingMode.REGEX, label: 'Regex Rules', icon: Code2 },
+                  ].map((tab) => (
+                    <button
+                      key={tab.id}
+                      onClick={() => setMappingMode(tab.id)}
+                      className={`flex-1 flex items-center justify-center space-x-2 py-1.5 rounded-md text-xs font-medium transition-all
+                        ${currentMappingMode === tab.id 
+                          ? 'bg-gray-700 text-plex-orange shadow-sm' 
+                          : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
+                        }`}
+                    >
+                        <tab.icon size={12} />
+                        <span>{tab.label}</span>
+                    </button>
+                  ))}
+                </div>
+
+                {/* Content Area */}
+                <div className="mb-4">
+                    {currentMappingMode === PathMappingMode.SIMPLE ? (
+                       // Simple Mode: Single Editor
+                       <div className="animate-in fade-in duration-200">
+                          <MappingGroupEditor 
+                             title="Path Mapping"
+                             subtitle="Map Local paths to Cloud paths using simple string matching"
+                             rules={simpleRules}
+                             onChange={updateSimpleGroup}
+                             isLocked={isLocked}
+                             borderColor={MAPPING_THEME.simple.borderColor}
+                             bgColor={MAPPING_THEME.simple.bgColor}
+                             leftPlaceholder="Local Path"
+                             rightPlaceholder="Cloud Path"
+                             leftInputClass={MAPPING_THEME.inputs.local}
+                             rightInputClass={MAPPING_THEME.inputs.cloud}
+                          />
+                       </div>
+                    ) : (
+                       // Regex Mode: 2x2 Grid
+                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 animate-in fade-in duration-200">
+                          {/* Row 1: Pre-Processing */}
+                          <MappingGroupEditor 
+                             title="Local Playlist"
+                             subtitle="Pre-Processing (Before Sync)"
+                             rules={regexRules.localPre}
+                             onChange={(rules) => updateRegexGroup('localPre', rules)}
+                             isLocked={isLocked}
+                             borderColor={MAPPING_THEME.local.borderColor}
+                             bgColor={MAPPING_THEME.local.bgColor}
+                          />
+
+                          <MappingGroupEditor 
+                             title="Remote Playlist"
+                             subtitle="Pre-Processing (Before Sync)"
+                             rules={regexRules.remotePre}
+                             onChange={(rules) => updateRegexGroup('remotePre', rules)}
+                             isLocked={isLocked}
+                             borderColor={MAPPING_THEME.remote.borderColor}
+                             bgColor={MAPPING_THEME.remote.bgColor}
+                          />
+
+                          {/* Row 2: Post-Processing */}
+                          <MappingGroupEditor 
+                             title="Local Playlist"
+                             subtitle="Post-Processing (After Sync / Result)"
+                             rules={regexRules.localPost}
+                             onChange={(rules) => updateRegexGroup('localPost', rules)}
+                             isLocked={isLocked}
+                             borderColor={MAPPING_THEME.local.borderColor}
+                             bgColor={MAPPING_THEME.local.bgColor}
+                          />
+
+                          <MappingGroupEditor 
+                             title="Remote Playlist"
+                             subtitle="Post-Processing (After Sync / Result)"
+                             rules={regexRules.remotePost}
+                             onChange={(rules) => updateRegexGroup('remotePost', rules)}
+                             isLocked={isLocked}
+                             borderColor={MAPPING_THEME.remote.borderColor}
+                             bgColor={MAPPING_THEME.remote.bgColor}
+                          />
+                       </div>
                     )}
                 </div>
 
-                <div className="space-y-2 mb-4 max-h-40 overflow-y-auto pr-1 custom-scrollbar">
-                {localReplacements.length === 0 ? (
-                    <div className="text-xs text-gray-600 italic text-center py-2 border border-dashed border-gray-700/50 rounded-lg">
-                        No regex replacements configured.
-                    </div>
-                ) : (
-                    localReplacements.map((regex) => (
-                    <div key={regex.id} className="flex items-center space-x-2 animate-in slide-in-from-left-2 duration-200">
-                        <div className="flex-1 min-w-0">
-                            <input 
-                                type="text" 
-                                placeholder="Pattern" 
-                                value={regex.pattern}
-                                onChange={(e) => handleUpdateRegex(regex.id, 'pattern', e.target.value)}
-                                className={`w-full bg-gray-900/80 border rounded-md px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:ring-1 transition-all placeholder-gray-600
-                                ${!regex.pattern && isRegexDirty ? 'border-red-500/30 focus:border-red-500' : 'border-gray-700 focus:border-plex-orange'}`}
-                            />
-                        </div>
-                        <div className="flex-none text-gray-600">
-                            <ArrowRightCircle size={12} />
-                        </div>
-                        <div className="flex-1 min-w-0">
-                            <input 
-                                type="text" 
-                                placeholder="Replacement" 
-                                value={regex.replacement}
-                                onChange={(e) => handleUpdateRegex(regex.id, 'replacement', e.target.value)}
-                                className="w-full bg-gray-900/80 border border-gray-700 rounded-md px-2 py-1.5 text-xs text-gray-200 focus:outline-none focus:border-plex-orange focus:ring-1 focus:ring-plex-orange transition-all placeholder-gray-600"
-                            />
-                        </div>
-                        <button 
-                            onClick={() => handleDeleteRegex(regex.id)}
-                            className="text-gray-600 hover:text-red-400 p-1.5 hover:bg-red-500/10 rounded transition-colors"
-                            title="Delete Rule"
-                        >
-                            <Trash2 size={14} />
-                        </button>
-                    </div>
-                    ))
-                )}
-                </div>
-
-                <div className="flex justify-between items-center gap-2">
-                     <button 
-                            onClick={handleAddRegex}
-                            className={`flex items-center space-x-1 px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wide transition-colors ${localReplacements.length > 0 ? 'text-plex-orange hover:bg-plex-orange/10' : 'hidden'}`}
-                        >
-                            <Plus size={10} />
-                            <span>Add</span>
+                <div className="flex justify-end items-center gap-2">
+                    <button
+                        onClick={handleResetMapping}
+                        disabled={!isMappingDirty}
+                        className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
+                        ${isMappingDirty 
+                            ? '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={handleSaveMappingClick}
+                        disabled={!isMappingDirty}
+                        className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
+                        ${isMappingDirty 
+                            ? '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 Rules</span>
                     </button>
-
-                    <div className="flex items-center gap-2 ml-auto">
-                        <button
-                            onClick={handleResetRegex}
-                            disabled={!isRegexDirty}
-                            className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-medium border transition-all
-                            ${isRegexDirty 
-                                ? '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={handleSaveRegex}
-                            disabled={!isRegexDirty}
-                            className={`flex items-center justify-center space-x-1.5 px-3 py-1.5 rounded-md text-xs font-bold border transition-all
-                            ${isRegexDirty 
-                                ? '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>
 
@@ -436,9 +604,9 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     ].map((tab) => (
                       <button
                         key={tab.id}
-                        onClick={() => setActiveTab(tab.id)}
+                        onClick={() => setActiveScheduleTab(tab.id)}
                         className={`flex-1 flex items-center justify-center space-x-2 py-1.5 rounded-md text-xs font-medium transition-all
-                          ${activeTab === tab.id 
+                          ${activeScheduleTab === tab.id 
                             ? 'bg-gray-700 text-plex-orange shadow-sm' 
                             : 'text-gray-400 hover:text-gray-200 hover:bg-white/5'
                           }`}
@@ -451,7 +619,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
 
                  {/* Tab Content */}
                  <div className="mb-4 min-h-[50px]">
-                    {activeTab === ScheduleMode.CRON && (
+                    {activeScheduleTab === ScheduleMode.CRON && (
                       <div className="space-y-2 animate-in fade-in duration-200">
                          <div className="flex items-center space-x-2">
                            <span className="text-gray-500 font-mono text-xs">Cron:</span>
@@ -469,7 +637,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                       </div>
                     )}
 
-                    {activeTab === ScheduleMode.DAILY && (
+                    {activeScheduleTab === ScheduleMode.DAILY && (
                        <div className="flex flex-col animate-in fade-in duration-200">
                           {/* Top Row: Checkbox + Label */}
                           <div className="flex items-center justify-start space-x-2 mb-2">
@@ -496,7 +664,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                        </div>
                     )}
 
-                    {activeTab === ScheduleMode.WEEKLY && (
+                    {activeScheduleTab === ScheduleMode.WEEKLY && (
                        <div className="flex flex-col animate-in fade-in duration-200">
                           {/* Top Row: Checkbox + Label */}
                           <div className="flex items-center justify-start space-x-2 mb-2">
@@ -563,7 +731,7 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     </button>
                  </div>
 
-                 {/* Action Buttons (Mirrored from Regex) */}
+                 {/* Action Buttons */}
                  <div className="flex items-center gap-2 justify-end pt-3 border-t border-white/5">
                         <button
                             onClick={handleResetSchedule}
@@ -599,7 +767,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' 
-                    : isRegexDirty
+                    : isMappingDirty
                         ? '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]'
                 }`}
@@ -616,9 +784,9 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
                     </>
                 )}
             </button>
-            {(isRegexDirty) && (
+            {(isMappingDirty) && (
                 <p className="text-[10px] text-plex-orange text-center mt-2">
-                    Please save regex changes before syncing.
+                    Please save path mapping changes before syncing.
                 </p>
             )}
         </div>

frontend/services/api.ts

@@ -1,4 +1,4 @@
-import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, RegexReplacement, SyncStrategy, ScheduleSettings } from '../types';
+import { Playlist, ServerType, ApiResponse, PlexServerConnection, PlexConnectionSettings, PlexLibrary, ReplacementRule, PathMappingConfig, PathMappingMode, PathMappingRules, SyncStrategy, ScheduleSettings } from '../types';
 
 const API_BASE = import.meta.env.VITE_API_BASE_URL || '';
 
@@ -41,21 +41,69 @@ const mapLibrary = (item: any): PlexLibrary => ({
   type: item.type ?? 'artist',
 });
 
-const mapRegexRules = (rules: any[]): RegexReplacement[] =>
+// Helper function to map raw rules array to ReplacementRule[]
+const mapReplacementRules = (rules: any[]): ReplacementRule[] =>
   (rules || []).map((rule, index) => ({
-    id: rule.id || `${rule.pattern || 'rule'}-${index}`,
-    pattern: rule.pattern || '',
-    replacement: rule.replacement || '',
+    id: rule.id || `${rule.search || 'rule'}-${index}-${Date.now()}`,
+    search: rule.search || rule.pattern || '',
+    replace: rule.replace || rule.replacement || '',
   }));
 
+// Helper function to map API path_mapping response to PathMappingConfig
+const mapPathMappingConfig = (data: any): PathMappingConfig => {
+  const defaultConfig: PathMappingConfig = {
+    mode: PathMappingMode.SIMPLE,
+    simple: [],
+    regex: {
+      localPre: [],
+      localPost: [],
+      remotePre: [],
+      remotePost: []
+    }
+  };
+
+  if (!data || !data.path_mapping) {
+    return defaultConfig;
+  }
+
+  const pm = data.path_mapping;
+  return {
+    mode: pm.mode === 'REGEX' ? PathMappingMode.REGEX : PathMappingMode.SIMPLE,
+    simple: mapReplacementRules(pm.simple || []),
+    regex: {
+      localPre: mapReplacementRules(pm.regex?.localPre || pm.regex?.local_pre || []),
+      localPost: mapReplacementRules(pm.regex?.localPost || pm.regex?.local_post || []),
+      remotePre: mapReplacementRules(pm.regex?.remotePre || pm.regex?.remote_pre || []),
+      remotePost: mapReplacementRules(pm.regex?.remotePost || pm.regex?.remote_post || [])
+    }
+  };
+};
+
+// Helper function to convert PathMappingConfig to API format
+const pathMappingToApi = (config: PathMappingConfig) => {
+  const rulesToApi = (rules: ReplacementRule[]) =>
+    rules.map(({ search, replace }) => ({ search, replace }));
+
+  return {
+    mode: config.mode,
+    simple: rulesToApi(config.simple),
+    regex: {
+      local_pre: rulesToApi(config.regex.localPre),
+      local_post: rulesToApi(config.regex.localPost),
+      remote_pre: rulesToApi(config.regex.remotePre),
+      remote_post: rulesToApi(config.regex.remotePost)
+    }
+  };
+};
+
 export const apiService = {
-  async getSettings(): Promise<ApiResponse<{ strategy: SyncStrategy; regex: RegexReplacement[]; connection: PlexConnectionSettings; localPath: string }>> {
+  async getSettings(): Promise<ApiResponse<{ strategy: SyncStrategy; pathMapping: PathMappingConfig; connection: PlexConnectionSettings; localPath: string }>> {
     const response = await fetch(`${API_BASE}/api/settings`);
     const result = await handleResponse<any>(response);
     if (result.status === 'success') {
       const mode = result.data.sync_mode as string;
       const strategy = MODE_TO_STRATEGY[mode] || SyncStrategy.LOCAL_OVERWRITE;
-      const regex = mapRegexRules(result.data.path_rules || []);
+      const pathMapping = mapPathMappingConfig(result.data);
       const connection: PlexConnectionSettings = {
         protocol: (result.data.scheme as 'http' | 'https') || 'https',
         address: result.data.server_url || '',
@@ -63,9 +111,9 @@ export const apiService = {
         token: result.data.token || '',
         libraryName: result.data.library_name || '',
       };
-      return { status: 'success', data: { strategy, regex, connection, localPath: result.data.local_path || '' } };
+      return { status: 'success', data: { strategy, pathMapping, connection, localPath: result.data.local_path || '' } };
     }
-    return result as ApiResponse<any> as ApiResponse<{ strategy: SyncStrategy; regex: RegexReplacement[]; connection: PlexConnectionSettings; localPath: string }>;
+    return result as ApiResponse<any> as ApiResponse<{ strategy: SyncStrategy; pathMapping: PathMappingConfig; connection: PlexConnectionSettings; localPath: string }>;
   },
 
   async updateSyncStrategy(strategy: SyncStrategy): Promise<ApiResponse<{ sync_mode: string }>> {
@@ -78,9 +126,9 @@ export const apiService = {
     return handleResponse(response);
   },
 
-  async saveRegexRules(replacements: RegexReplacement[]): Promise<ApiResponse<{ rules: RegexReplacement[] }>> {
-    const payload = { rules: replacements.map(({ pattern, replacement }) => ({ pattern, replacement })) };
-    const response = await fetch(`${API_BASE}/api/settings/regex-rules`, {
+  async savePathMapping(config: PathMappingConfig): Promise<ApiResponse<null>> {
+    const payload = pathMappingToApi(config);
+    const response = await fetch(`${API_BASE}/api/settings/path-mapping`, {
       method: 'PUT',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(payload),
@@ -170,7 +218,7 @@ export const apiService = {
     return result as ApiResponse<{ token: string; serverInfo: PlexServerConnection }>;
   },
 
-  async syncPlaylists(strategy: SyncStrategy, _regexRules: RegexReplacement[], localPath?: string): Promise<ApiResponse<null>> {
+  async syncPlaylists(strategy: SyncStrategy, _pathMapping: PathMappingConfig, localPath?: string): Promise<ApiResponse<null>> {
     const response = await fetch(`${API_BASE}/api/sync`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },

frontend/types.ts

@@ -34,6 +34,30 @@ export enum SyncState {
   ERROR = 'ERROR'
 }
 
+export interface ReplacementRule {
+  id: string;
+  search: string;
+  replace: string;
+}
+
+export interface PathMappingRules {
+  localPre: ReplacementRule[];
+  localPost: ReplacementRule[];
+  remotePre: ReplacementRule[];
+  remotePost: ReplacementRule[];
+}
+
+export enum PathMappingMode {
+  SIMPLE = 'SIMPLE',
+  REGEX = 'REGEX'
+}
+
+export interface PathMappingConfig {
+  mode: PathMappingMode;
+  simple: ReplacementRule[];
+  regex: PathMappingRules;
+}
+
 export interface RegexReplacement {
   id: string;
   pattern: string;