PlexPlaylist_UI subtree merge

feat: Introduce path mapping for sync Merge commit 'f791798206d87c694c14d7bffb52645706af4964'
2025-11-30 02:58:04 +09:00
parent 3719cda819 f791798206
commit 15e7636a92
4 changed files with 418 additions and 174 deletions
@@ -1,6 +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, 
@@ -18,7 +17,9 @@ import {
  Clock,
  Repeat,
  CheckSquare,
-  Square
+  Square,
+  Type,
+  Code2
 } from 'lucide-react';

 interface StrategyOption {
@@ -62,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 };
@@ -81,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;
@@ -95,8 +222,8 @@ interface StrategySelectorProps {
 const StrategySelector: React.FC<StrategySelectorProps> = ({ 
  currentStrategy, 
  onSelect, 
-  savedRegexReplacements, 
-  onSaveRegex,
+  savedPathMapping, 
+  onSavePathMapping,
  savedSchedule,
  onSaveSchedule,
  syncState,
@@ -105,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
  );

@@ -124,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];

@@ -163,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;
@@ -223,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.
    }
  };

@@ -249,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) {
@@ -259,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 (
@@ -280,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'}`}
      >
@@ -329,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>

@@ -437,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'
                          }`}
@@ -452,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>
@@ -470,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">
@@ -497,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">
@@ -564,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}
@@ -600,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]'
                }`}
@@ -617,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>
@@ -628,4 +795,4 @@ const StrategySelector: React.FC<StrategySelectorProps> = ({
  );
 };

-export default StrategySelector;
+export default StrategySelector;