feat: add content-aware resize toggle to resize settings UI

apps/web/src/components/tools/resize-settings.tsx

@@ -1,6 +1,6 @@
 import { SOCIAL_MEDIA_PRESETS } from "@stirling-image/shared";
 import { Download, Link, Unlink } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { ProgressCard } from "@/components/common/progress-card";
 import { useToolProcessor } from "@/hooks/use-tool-processor";
 import { useFileStore } from "@/stores/file-store";
@@ -30,6 +30,8 @@ export function ResizeControls({ onChange }: ResizeControlsProps) {
   const [fit, setFit] = useState<FitMode>("cover");
   const [lockAspect, setLockAspect] = useState(true);
   const [withoutEnlargement, setWithoutEnlargement] = useState(false);
+  const [contentAware, setContentAware] = useState(false);
+  const [protectFaces, setProtectFaces] = useState(true);
 
   const onChangeRef = useRef(onChange);
   useEffect(() => {
@@ -38,7 +40,12 @@ export function ResizeControls({ onChange }: ResizeControlsProps) {
 
   useEffect(() => {
     const settings: Record<string, unknown> = {};
-    if (tab === "scale") {
+    if (contentAware) {
+      settings.contentAware = true;
+      if (width) settings.width = Number(width);
+      if (height) settings.height = Number(height);
+      settings.protectFaces = protectFaces;
+    } else if (tab === "scale") {
       settings.percentage = Number(percentage);
     } else {
       if (width) settings.width = Number(width);
@@ -47,7 +54,7 @@ export function ResizeControls({ onChange }: ResizeControlsProps) {
       settings.withoutEnlargement = withoutEnlargement;
     }
     onChangeRef.current?.(settings);
-  }, [tab, width, height, percentage, fit, withoutEnlargement]);
+  }, [tab, width, height, percentage, fit, withoutEnlargement, contentAware, protectFaces]);
 
   const handlePreset = (preset: (typeof SOCIAL_MEDIA_PRESETS)[number]) => {
     const key = `${preset.platform}-${preset.name}`;
@@ -65,8 +72,88 @@ export function ResizeControls({ onChange }: ResizeControlsProps) {
   const tabClass = (t: ResizeTab) =>
     `flex-1 text-xs py-1.5 rounded ${tab === t ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`;
 
+  const dimensionInputs = (
+    <div className="flex items-end gap-2">
+      <div className="flex-1">
+        <label htmlFor="resize-width" className="text-xs text-muted-foreground">
+          Width (px)
+        </label>
+        <input
+          id="resize-width"
+          type="number"
+          value={width}
+          onChange={(e) => setWidth(e.target.value)}
+          placeholder="Auto"
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+      <button
+        type="button"
+        onClick={() => setLockAspect(!lockAspect)}
+        className="p-1.5 rounded border border-border text-muted-foreground hover:text-foreground"
+        title={lockAspect ? "Unlock aspect ratio" : "Lock aspect ratio"}
+      >
+        {lockAspect ? <Link className="h-4 w-4" /> : <Unlink className="h-4 w-4" />}
+      </button>
+      <div className="flex-1">
+        <label htmlFor="resize-height" className="text-xs text-muted-foreground">
+          Height (px)
+        </label>
+        <input
+          id="resize-height"
+          type="number"
+          value={height}
+          onChange={(e) => setHeight(e.target.value)}
+          placeholder="Auto"
+          className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+        />
+      </div>
+    </div>
+  );
+
   return (
     <div className="space-y-4">
+      {/* Content-aware toggle */}
+      <div className="flex items-center justify-between">
+        <span className="text-sm font-medium text-foreground">Content-aware</span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={contentAware}
+          onClick={() => setContentAware(!contentAware)}
+          className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+            contentAware ? "bg-primary" : "bg-muted"
+          }`}
+        >
+          <span
+            className={`inline-block h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform ${
+              contentAware ? "translate-x-4" : "translate-x-0.5"
+            }`}
+          />
+        </button>
+      </div>
+
+      {/* Content-aware inputs */}
+      {contentAware && (
+        <div className="space-y-3">
+          {dimensionInputs}
+
+          {/* Protect faces */}
+          <label className="flex items-center gap-2 text-sm text-foreground">
+            <input
+              type="checkbox"
+              checked={protectFaces}
+              onChange={(e) => setProtectFaces(e.target.checked)}
+              className="rounded"
+            />
+            Protect faces
+          </label>
+        </div>
+      )}
+
+      {/* Standard resize tabs */}
+      {!contentAware && (
+        <>
           {/* Tab selector */}
           <div>
             <div className="flex gap-1">
@@ -76,7 +163,11 @@ export function ResizeControls({ onChange }: ResizeControlsProps) {
               <button type="button" onClick={() => setTab("scale")} className={tabClass("scale")}>
                 Scale
               </button>
-          <button type="button" onClick={() => setTab("presets")} className={tabClass("presets")}>
+              <button
+                type="button"
+                onClick={() => setTab("presets")}
+                className={tabClass("presets")}
+              >
                 Presets
               </button>
             </div>
@@ -130,42 +221,7 @@ export function ResizeControls({ onChange }: ResizeControlsProps) {
           {/* Custom Size tab */}
           {tab === "custom" && (
             <div className="space-y-3">
-          <div className="flex items-end gap-2">
+              {dimensionInputs}
-            <div className="flex-1">
-              <label htmlFor="resize-width" className="text-xs text-muted-foreground">
-                Width (px)
-              </label>
-              <input
-                id="resize-width"
-                type="number"
-                value={width}
-                onChange={(e) => setWidth(e.target.value)}
-                placeholder="Auto"
-                className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-              />
-            </div>
-            <button
-              type="button"
-              onClick={() => setLockAspect(!lockAspect)}
-              className="p-1.5 rounded border border-border text-muted-foreground hover:text-foreground"
-              title={lockAspect ? "Unlock aspect ratio" : "Lock aspect ratio"}
-            >
-              {lockAspect ? <Link className="h-4 w-4" /> : <Unlink className="h-4 w-4" />}
-            </button>
-            <div className="flex-1">
-              <label htmlFor="resize-height" className="text-xs text-muted-foreground">
-                Height (px)
-              </label>
-              <input
-                id="resize-height"
-                type="number"
-                value={height}
-                onChange={(e) => setHeight(e.target.value)}
-                placeholder="Auto"
-                className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-              />
-            </div>
-          </div>
 
               {/* Fit mode */}
               <div>
@@ -231,16 +287,27 @@ export function ResizeControls({ onChange }: ResizeControlsProps) {
               </div>
             </div>
           )}
+        </>
+      )}
     </div>
   );
 }
 
 export function ResizeSettings() {
   const { files } = useFileStore();
-  const { processFiles, processAllFiles, processing, error, downloadUrl, progress } =
+  const standardResize = useToolProcessor("resize");
-    useToolProcessor("resize");
+  const contentAwareResize = useToolProcessor("content-aware-resize");
 
   const [settings, setSettings] = useState<Record<string, unknown>>({});
+  const [isContentAware, setIsContentAware] = useState(false);
+
+  const handleSettingsChange = useCallback((newSettings: Record<string, unknown>) => {
+    setSettings(newSettings);
+    setIsContentAware(!!newSettings.contentAware);
+  }, []);
+
+  const active = isContentAware ? contentAwareResize : standardResize;
+  const { processFiles, processAllFiles, processing, error, downloadUrl, progress } = active;
 
   const handleProcess = () => {
     if (files.length > 1) {
@@ -255,7 +322,9 @@ export function ResizeSettings() {
   const canProcess =
     hasFile &&
     !processing &&
-    (tab === "scale"
+    (isContentAware
+      ? Boolean(settings.width) || Boolean(settings.height)
+      : tab === "scale"
         ? Number(settings.percentage) > 0
         : Boolean(settings.width) || Boolean(settings.height));
 
@@ -266,7 +335,7 @@ export function ResizeSettings() {
 
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
-      <ResizeControls onChange={setSettings} />
+      <ResizeControls onChange={handleSettingsChange} />
 
       {/* Error */}
       {error && <p className="text-xs text-red-500">{error}</p>}