feat: rewrite resize settings with tab-based UI (presets, custom, scale)

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

@@ -5,187 +5,236 @@ import { useToolProcessor } from "@/hooks/use-tool-processor";
 import { Download, Link, Unlink } from "lucide-react";
 import { ProgressCard } from "@/components/common/progress-card";
 
-type FitMode = "contain" | "cover" | "fill" | "inside" | "outside";
+type ResizeTab = "presets" | "custom" | "scale";
+type FitMode = "cover" | "contain" | "fill";
+
+const FIT_LABELS: Record<FitMode, string> = {
+  cover: "Crop to fit",
+  contain: "Fit inside",
+  fill: "Stretch",
+};
+
+// Group presets by platform
+const platforms = [...new Set(SOCIAL_MEDIA_PRESETS.map((p) => p.platform))];
 
 export function ResizeSettings() {
   const { files } = useFileStore();
-  const { processFiles, processing, error, downloadUrl, originalSize, processedSize, progress } =
+  const { processFiles, processing, error, downloadUrl, progress } =
     useToolProcessor("resize");
 
-  const [mode, setMode] = useState<"pixels" | "percentage">("pixels");
+  const [tab, setTab] = useState<ResizeTab>("presets");
+  const [selectedPreset, setSelectedPreset] = useState<string | null>(null);
   const [width, setWidth] = useState<string>("");
   const [height, setHeight] = useState<string>("");
-  const [percentage, setPercentage] = useState<string>("100");
+  const [percentage, setPercentage] = useState<string>("50");
-  const [fit, setFit] = useState<FitMode>("contain");
+  const [fit, setFit] = useState<FitMode>("cover");
   const [lockAspect, setLockAspect] = useState(true);
   const [withoutEnlargement, setWithoutEnlargement] = useState(false);
 
-  const handlePreset = (w: number, h: number) => {
+  const handlePreset = (preset: (typeof SOCIAL_MEDIA_PRESETS)[number]) => {
-    setMode("pixels");
+    const key = `${preset.platform}-${preset.name}`;
-    setWidth(String(w));
+    if (selectedPreset === key) {
-    setHeight(String(h));
+      setSelectedPreset(null);
+      setWidth("");
+      setHeight("");
+    } else {
+      setSelectedPreset(key);
+      setWidth(String(preset.width));
+      setHeight(String(preset.height));
+    }
   };
 
   const handleProcess = () => {
-    const settings: Record<string, unknown> = { fit, withoutEnlargement };
+    const settings: Record<string, unknown> = {};
-    if (mode === "percentage") {
+
+    if (tab === "scale") {
       settings.percentage = Number(percentage);
     } else {
       if (width) settings.width = Number(width);
       if (height) settings.height = Number(height);
+      settings.fit = tab === "presets" ? "cover" : fit;
+      settings.withoutEnlargement = withoutEnlargement;
     }
+
     processFiles(files, settings);
   };
 
   const hasFile = files.length > 0;
-
+  const canProcess =
-  // Group presets by platform
+    hasFile &&
-  const platforms = [...new Set(SOCIAL_MEDIA_PRESETS.map((p) => p.platform))];
+    !processing &&
+    (tab === "scale"
+      ? Number(percentage) > 0
+      : Boolean(width) || Boolean(height));
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (hasFile && !processing) handleProcess();
+    if (canProcess) handleProcess();
   };
 
+  const tabClass = (t: ResizeTab) =>
+    `flex-1 text-xs py-1.5 rounded ${tab === t ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`;
+
   return (
     <form onSubmit={handleSubmit} className="space-y-4">
-      {/* Mode toggle */}
+      {/* Tab selector */}
       <div>
-        <label className="text-sm font-medium text-muted-foreground">Resize Mode</label>
+        <div className="flex gap-1">
-        <div className="flex gap-1 mt-1">
+          <button type="button" onClick={() => setTab("presets")} className={tabClass("presets")}>
-          <button
+            Presets
-            type="button"
-            onClick={() => setMode("pixels")}
-            className={`flex-1 text-xs py-1.5 rounded ${mode === "pixels" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
-          >
-            Pixels
           </button>
-          <button
+          <button type="button" onClick={() => setTab("custom")} className={tabClass("custom")}>
-            type="button"
+            Custom Size
-            onClick={() => setMode("percentage")}
+          </button>
-            className={`flex-1 text-xs py-1.5 rounded ${mode === "percentage" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
+          <button type="button" onClick={() => setTab("scale")} className={tabClass("scale")}>
-          >
+            Scale
-            Percentage
           </button>
         </div>
       </div>
 
-      {mode === "pixels" ? (
+      {/* Presets tab */}
-        <>
+      {tab === "presets" && (
-          {/* Width / Height */}
+        <div className="space-y-3 max-h-[50vh] overflow-y-auto pr-1">
-          <div className="space-y-2">
+          {platforms.map((platform) => (
-            <div className="flex items-end gap-2">
+            <div key={platform}>
-              <div className="flex-1">
+              <p className="text-xs font-medium text-muted-foreground mb-1.5">{platform}</p>
-                <label className="text-xs text-muted-foreground">Width (px)</label>
+              <div className="space-y-1">
-                <input
+                {SOCIAL_MEDIA_PRESETS.filter((p) => p.platform === platform).map((preset) => {
-                  type="number"
+                  const key = `${preset.platform}-${preset.name}`;
-                  value={width}
+                  const isSelected = selectedPreset === key;
-                  onChange={(e) => setWidth(e.target.value)}
+                  return (
-                  placeholder="Auto"
+                    <button
-                  className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+                      key={key}
-                />
+                      type="button"
-              </div>
+                      onClick={() => handlePreset(preset)}
-              <button
+                      className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded border text-sm transition-colors ${
-                type="button"
+                        isSelected
-                onClick={() => setLockAspect(!lockAspect)}
+                          ? "border-primary bg-primary/10 text-foreground"
-                className="p-1.5 rounded border border-border text-muted-foreground hover:text-foreground"
+                          : "border-border text-muted-foreground hover:border-primary/50 hover:text-foreground"
-                title={lockAspect ? "Unlock aspect ratio" : "Lock aspect ratio"}
+                      }`}
-              >
+                    >
-                {lockAspect ? <Link className="h-4 w-4" /> : <Unlink className="h-4 w-4" />}
+                      <span>{preset.name}</span>
-              </button>
+                      <span className="text-xs tabular-nums">
-              <div className="flex-1">
+                        {preset.width} × {preset.height}
-                <label className="text-xs text-muted-foreground">Height (px)</label>
+                      </span>
-                <input
+                    </button>
-                  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>
+          ))}
+
+          {/* Don't enlarge */}
+          <label className="flex items-center gap-2 text-sm text-foreground">
+            <input
+              type="checkbox"
+              checked={withoutEnlargement}
+              onChange={(e) => setWithoutEnlargement(e.target.checked)}
+              className="rounded"
+            />
+            Don&apos;t enlarge
+          </label>
+        </div>
+      )}
+
+      {/* Custom Size tab */}
+      {tab === "custom" && (
+        <div className="space-y-3">
+          <div className="flex items-end gap-2">
+            <div className="flex-1">
+              <label className="text-xs text-muted-foreground">Width (px)</label>
+              <input
+                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 className="text-xs text-muted-foreground">Height (px)</label>
+              <input
+                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>
             <label className="text-xs text-muted-foreground">Fit Mode</label>
-            <select
+            <div className="flex gap-1 mt-1">
-              value={fit}
+              {(Object.keys(FIT_LABELS) as FitMode[]).map((f) => (
-              onChange={(e) => setFit(e.target.value as FitMode)}
+                <button
-              className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+                  key={f}
-            >
+                  type="button"
-              <option value="contain">Contain</option>
+                  onClick={() => setFit(f)}
-              <option value="cover">Cover</option>
+                  className={`flex-1 text-xs py-1.5 rounded ${fit === f ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
-              <option value="fill">Fill (stretch)</option>
+                >
-              <option value="inside">Inside</option>
+                  {FIT_LABELS[f]}
-              <option value="outside">Outside</option>
+                </button>
-            </select>
+              ))}
+            </div>
           </div>
 
-          {/* Social media presets */}
+          {/* Don't enlarge */}
-          <div>
+          <label className="flex items-center gap-2 text-sm text-foreground">
-            <label className="text-xs text-muted-foreground">Social Media Presets</label>
+            <input
-            <select
+              type="checkbox"
-              onChange={(e) => {
+              checked={withoutEnlargement}
-                const preset = SOCIAL_MEDIA_PRESETS.find(
+              onChange={(e) => setWithoutEnlargement(e.target.checked)}
-                  (p) => `${p.platform} - ${p.name}` === e.target.value,
+              className="rounded"
-                );
+            />
-                if (preset) handlePreset(preset.width, preset.height);
+            Don&apos;t enlarge
-              }}
+          </label>
-              className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-              defaultValue=""
-            >
-              <option value="" disabled>
-                Choose a preset...
-              </option>
-              {platforms.map((platform) => (
-                <optgroup key={platform} label={platform}>
-                  {SOCIAL_MEDIA_PRESETS.filter((p) => p.platform === platform).map((p) => (
-                    <option key={`${p.platform}-${p.name}`} value={`${p.platform} - ${p.name}`}>
-                      {p.name} ({p.width}x{p.height})
-                    </option>
-                  ))}
-                </optgroup>
-              ))}
-            </select>
-          </div>
-        </>
-      ) : (
-        <div>
-          <label className="text-xs text-muted-foreground">Scale (%)</label>
-          <input
-            type="number"
-            value={percentage}
-            onChange={(e) => setPercentage(e.target.value)}
-            min={1}
-            className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
-          />
         </div>
       )}
 
-      {/* Don't enlarge */}
+      {/* Scale tab */}
-      <label className="flex items-center gap-2 text-sm text-foreground">
+      {tab === "scale" && (
-        <input
+        <div className="space-y-3">
-          type="checkbox"
+          <div>
-          checked={withoutEnlargement}
+            <label className="text-xs text-muted-foreground">Scale (%)</label>
-          onChange={(e) => setWithoutEnlargement(e.target.checked)}
+            <input
-          className="rounded"
+              type="number"
-        />
+              value={percentage}
-        Don&apos;t enlarge
+              onChange={(e) => setPercentage(e.target.value)}
-      </label>
+              min={1}
+              className="w-full mt-0.5 px-2 py-1.5 rounded border border-border bg-background text-sm text-foreground"
+            />
+          </div>
+          <div className="flex gap-1">
+            {[25, 50, 75].map((pct) => (
+              <button
+                key={pct}
+                type="button"
+                onClick={() => setPercentage(String(pct))}
+                className={`flex-1 text-xs py-1.5 rounded ${
+                  percentage === String(pct)
+                    ? "bg-primary text-primary-foreground"
+                    : "bg-muted text-muted-foreground"
+                }`}
+              >
+                {pct}%
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
 
       {/* Error */}
-      {error && (
+      {error && <p className="text-xs text-red-500">{error}</p>}
-        <p className="text-xs text-red-500">{error}</p>
-      )}
-
-      {/* Size info */}
-      {originalSize != null && processedSize != null && (
-        <div className="text-xs text-muted-foreground space-y-0.5">
-          <p>Original: {(originalSize / 1024).toFixed(1)} KB</p>
-          <p>Processed: {(processedSize / 1024).toFixed(1)} KB</p>
-        </div>
-      )}
 
       {/* Process button */}
       {processing ? (
@@ -200,7 +249,7 @@ export function ResizeSettings() {
       ) : (
         <button
           type="submit"
-          disabled={!hasFile || processing}
+          disabled={!canProcess}
           className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
         >
           Resize