add merge & replace support to presets

Author: CyberTimon

src/components/modals/AddPresetModal.tsx

@@ -6,13 +6,14 @@ import Switch from '../ui/Switch';
 interface PresetModalProps {
   isOpen: boolean;
   onClose(): void;
-  onSave(name: string, includeMasks: boolean, includeCropTransform: boolean): void;
+  onSave(name: string, includeMasks: boolean, includeCropTransform: boolean, isAdditive: boolean): void;
 }
 
 export default function AddPresetModal({ isOpen, onClose, onSave }: PresetModalProps) {
   const [name, setName] = useState('');
   const [includeMasks, setIncludeMasks] = useState(false);
   const [includeCropTransform, setIncludeCropTransform] = useState(false);
+  const [isAdditive, setIsAdditive] = useState(false);
   const [isMounted, setIsMounted] = useState(false);
   const [show, setShow] = useState(false);
 
@@ -28,17 +29,18 @@ export default function AddPresetModal({ isOpen, onClose, onSave }: PresetModalP
         setName('');
         setIncludeMasks(false);
         setIncludeCropTransform(false);
+        setIsAdditive(false);
       }, 300);
       return () => clearTimeout(timer);
     }
   }, [isOpen]);
 
   const handleSave = useCallback(() => {
     if (name.trim()) {
-      onSave(name.trim(), includeMasks, includeCropTransform);
+      onSave(name.trim(), includeMasks, includeCropTransform, isAdditive);
       onClose();
     }
-  }, [name, includeMasks, includeCropTransform, onSave, onClose]);
+  }, [name, includeMasks, includeCropTransform, isAdditive, onSave, onClose]);
 
   const handleKeyDown = useCallback(
     (e: any) => {
@@ -91,6 +93,12 @@ export default function AddPresetModal({ isOpen, onClose, onSave }: PresetModalP
         <div className="mt-5 space-y-4 p-1">
           <Switch label="Include Masks" checked={includeMasks} onChange={setIncludeMasks} />
           <Switch label="Include Crop & Transform" checked={includeCropTransform} onChange={setIncludeCropTransform} />
+          <Switch
+            label="Merge Changes"
+            data-tooltip="Only save changed adjustments"
+            checked={isAdditive}
+            onChange={setIsAdditive}
+          />
         </div>
 
         <div className="flex justify-end gap-3 mt-6">

src/components/panel/right/PresetsPanel.tsx

@@ -102,23 +102,40 @@ function PresetItemDisplay({ preset, previewUrl, isGeneratingPreviews }: PresetI
 
   const supportsMasks = preset.includeMasks ?? (preset.adjustments?.masks && preset.adjustments.masks.length > 0);
   const supportsGeometry =
-    preset.includeCropTransform ?? geometryKeys.some((key) => preset.adjustments?.[key] !== undefined);
+    preset.includeCropTransform ??
+    geometryKeys.some((key) => geometryKeys.some((key) => preset.adjustments?.[key] !== undefined));
+
+  const tooltipContent = useMemo(() => {
+    const features = [];
+    if (supportsMasks) features.push('Masks');
+    if (supportsGeometry) features.push('Crop & Transform');
+
+    if (features.length === 0) return undefined;
+    return `Supports ${features.join(' + ')}`;
+  }, [supportsMasks, supportsGeometry]);
 
   return (
     <div className="flex items-center gap-2 p-2 rounded-lg bg-surface cursor-grabbing">
-      <div className="w-20 h-14 bg-bg-tertiary rounded-md flex items-center justify-center shrink-0 relative overflow-hidden">
+      <div
+        className="w-20 h-14 bg-bg-tertiary rounded-md flex items-center justify-center shrink-0 relative overflow-hidden"
+        data-tooltip={tooltipContent}
+      >
         {isGeneratingPreviews && !previewUrl ? (
           <Loader2 size={20} className="animate-spin text-text-secondary" />
         ) : previewUrl ? (
-          <img src={previewUrl} alt={`${preset.name} preview`} className="w-full h-full object-cover rounded-md" />
+          <img
+            src={previewUrl}
+            alt={`${preset.name} preview`}
+            className="w-full h-full object-cover rounded-md pointer-events-none"
+          />
         ) : (
           <Loader2 size={20} className="animate-spin text-text-secondary" />
         )}
 
         {(supportsMasks || supportsGeometry) && (
-          <div className="absolute top-1 right-1 bg-primary rounded-full px-1.5 py-0.5 flex items-center gap-1.5 backdrop-blur-xs shadow-xs z-10">
-            {supportsMasks && <Layers size={11} className="text-white" data-tooltip="Supports Masks" />}
-            {supportsGeometry && <Scaling size={11} className="text-white" data-tooltip="Supports Crop & Transform" />}
+          <div className="absolute top-1 right-1 bg-primary rounded-full px-1.5 py-0.5 flex items-center gap-1.5 backdrop-blur-xs shadow-xs z-10 pointer-events-none">
+            {supportsMasks && <Layers size={11} className="text-white" />}
+            {supportsGeometry && <Scaling size={11} className="text-white" />}
           </div>
         )}
       </div>
@@ -572,8 +589,9 @@ export default function PresetsPanel({
     name: string,
     includeMasks: boolean,
     includeCropTransform: boolean,
+    isAdditive: boolean,
   ) => {
-    const newPreset = addPreset(name, null, includeMasks, includeCropTransform);
+    const newPreset = addPreset(name, null, includeMasks, includeCropTransform, isAdditive);
     setIsAddModalOpen(false);
     if (newPreset) {
       await generateSinglePreview(newPreset);
@@ -777,14 +795,27 @@ export default function PresetsPanel({
       options = [
         {
           icon: RefreshCw,
-          label: 'Overwrite Preset',
-
-          onClick: async () => {
-            const updated = updatePreset(data?.id ?? null);
-            if (updated) {
-              await generateSinglePreview(updated);
-            }
-          },
+          label: 'Update from Current',
+          submenu: [
+            {
+              label: 'Merge',
+              onClick: async () => {
+                const updated = updatePreset(data?.id ?? null, 'merge');
+                if (updated) {
+                  await generateSinglePreview(updated);
+                }
+              },
+            },
+            {
+              label: 'Replace',
+              onClick: async () => {
+                const updated = updatePreset(data?.id ?? null, 'replace');
+                if (updated) {
+                  await generateSinglePreview(updated);
+                }
+              },
+            },
+          ],
         },
         { type: OPTION_SEPARATOR },
         {

src/hooks/usePresets.ts

@@ -60,6 +60,7 @@ export function usePresets(currentAdjustments: Adjustments) {
     folderId: string | null = null,
     includeMasks: boolean = false,
     includeCropTransform: boolean = false,
+    isAdditive: boolean = false,
   ) => {
     const GEOMETRY_KEYS = ADJUSTMENT_GROUPS.geometry.flatMap((group) => group.keys);
     const MASK_KEYS = ADJUSTMENT_GROUPS.masks.flatMap((group) => group.keys);
@@ -74,7 +75,11 @@ export function usePresets(currentAdjustments: Adjustments) {
         const currentValue = currentAdjustments[key as keyof Adjustments];
         const defaultValue = INITIAL_ADJUSTMENTS[key as keyof Adjustments];
 
-        if (JSON.stringify(currentValue) !== JSON.stringify(defaultValue)) {
+        if (isAdditive) {
+          if (JSON.stringify(currentValue) !== JSON.stringify(defaultValue)) {
+            presetAdjustments[key] = currentValue;
+          }
+        } else {
           presetAdjustments[key] = currentValue;
         }
       }
@@ -174,7 +179,7 @@ export function usePresets(currentAdjustments: Adjustments) {
     savePresetsToBackend(updatedPresets);
   };
 
-  const updatePreset = (id: string | null) => {
+  const updatePreset = (id: string | null, updateMode: 'merge' | 'replace') => {
     let existingPreset: Preset | null = null;
 
     for (const item of presets) {
@@ -213,9 +218,13 @@ export function usePresets(currentAdjustments: Adjustments) {
 
       if (Object.prototype.hasOwnProperty.call(currentAdjustments, key)) {
         const currentValue = currentAdjustments[key as keyof Adjustments];
-        const defaultValue = INITIAL_ADJUSTMENTS[key as keyof Adjustments];
 
-        if (JSON.stringify(currentValue) !== JSON.stringify(defaultValue)) {
+        if (updateMode === 'merge') {
+          const defaultValue = INITIAL_ADJUSTMENTS[key as keyof Adjustments];
+          if (JSON.stringify(currentValue) !== JSON.stringify(defaultValue)) {
+            presetAdjustments[key] = currentValue;
+          }
+        } else {
           presetAdjustments[key] = currentValue;
         }
       }