feat(stitch): redesign settings UI with grid, alignment, border, radius, quality

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

@@ -1,21 +1,27 @@
-import { ChevronDown, ChevronUp, Download, Loader2 } from "lucide-react";
+import { Download, Loader2 } from "lucide-react";
 import { useState } from "react";
 import { formatHeaders } from "@/lib/api";
 import { useFileStore } from "@/stores/file-store";
 
-type Direction = "horizontal" | "vertical";
+type Direction = "horizontal" | "vertical" | "grid";
-type ResizeMode = "fit" | "original";
+type ResizeMode = "fit" | "original" | "stretch" | "crop";
+type Alignment = "start" | "center" | "end";
 type OutputFormat = "png" | "jpeg" | "webp";
 
 export function StitchSettings() {
   const { files, processing, error, setProcessing, setError, setProcessedUrl, setSizes, setJobId } =
     useFileStore();
+
   const [direction, setDirection] = useState<Direction>("horizontal");
-  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [gridColumns, setGridColumns] = useState(3);
   const [resizeMode, setResizeMode] = useState<ResizeMode>("fit");
+  const [alignment, setAlignment] = useState<Alignment>("center");
   const [gap, setGap] = useState(0);
+  const [border, setBorder] = useState(0);
+  const [cornerRadius, setCornerRadius] = useState(0);
   const [backgroundColor, setBackgroundColor] = useState("#FFFFFF");
   const [format, setFormat] = useState<OutputFormat>("png");
+  const [quality, setQuality] = useState(90);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
 
   const handleProcess = async () => {
@@ -32,7 +38,18 @@ export function StitchSettings() {
       }
       formData.append(
         "settings",
-        JSON.stringify({ direction, resizeMode, gap, backgroundColor, format }),
+        JSON.stringify({
+          direction,
+          gridColumns,
+          resizeMode,
+          alignment,
+          gap,
+          border,
+          cornerRadius,
+          backgroundColor,
+          format,
+          quality,
+        }),
       );
 
       const res = await fetch("/api/v1/tools/stitch", {
@@ -62,10 +79,11 @@ export function StitchSettings() {
 
   return (
     <div className="space-y-4">
+      {/* Layout */}
       <div>
         <p className="text-xs text-muted-foreground">Direction</p>
-        <div className="grid grid-cols-2 gap-1 mt-1">
+        <div className="grid grid-cols-3 gap-1 mt-1">
-          {(["horizontal", "vertical"] as const).map((d) => (
+          {(["horizontal", "vertical", "grid"] as const).map((d) => (
             <button
               type="button"
               key={d}
@@ -78,79 +96,167 @@ export function StitchSettings() {
         </div>
       </div>
 
-      <button
+      {direction === "grid" && (
-        type="button"
+        <div>
-        onClick={() => setShowAdvanced(!showAdvanced)}
+          <div className="flex justify-between items-center">
-        className="flex items-center gap-1 text-xs text-muted-foreground"
+            <label htmlFor="stitch-grid-columns" className="text-xs text-muted-foreground">
-      >
+              Grid Columns
-        Advanced
-        {showAdvanced ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
-      </button>
-
-      {showAdvanced && (
-        <div className="space-y-4 border border-border rounded-lg p-3">
-          <div>
-            <p className="text-xs text-muted-foreground">Resize Mode</p>
-            <div className="grid grid-cols-2 gap-1 mt-1">
-              {(["fit", "original"] as const).map((m) => (
-                <button
-                  type="button"
-                  key={m}
-                  onClick={() => setResizeMode(m)}
-                  className={`capitalize text-xs py-1.5 rounded ${resizeMode === m ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
-                >
-                  {m}
-                </button>
-              ))}
-            </div>
-          </div>
-
-          <div>
-            <div className="flex justify-between items-center">
-              <label htmlFor="stitch-gap" className="text-xs text-muted-foreground">
-                Gap
-              </label>
-              <span className="text-xs font-mono text-foreground">{gap}px</span>
-            </div>
-            <input
-              id="stitch-gap"
-              type="range"
-              min={0}
-              max={100}
-              value={gap}
-              onChange={(e) => setGap(Number(e.target.value))}
-              className="w-full mt-1"
-            />
-          </div>
-
-          <div>
-            <label htmlFor="stitch-background-color" className="text-xs text-muted-foreground">
-              Background Color
             </label>
-            <input
+            <span className="text-xs font-mono text-foreground">{gridColumns}</span>
-              id="stitch-background-color"
-              type="color"
-              value={backgroundColor}
-              onChange={(e) => setBackgroundColor(e.target.value)}
-              className="w-full mt-0.5 h-8 rounded border border-border"
-            />
           </div>
+          <input
+            id="stitch-grid-columns"
+            type="range"
+            min={2}
+            max={10}
+            value={gridColumns}
+            onChange={(e) => setGridColumns(Number(e.target.value))}
+            className="w-full mt-1"
+          />
+        </div>
+      )}
 
-          <div>
+      <div className="border-t border-border" />
-            <p className="text-xs text-muted-foreground">Output Format</p>
+
-            <div className="grid grid-cols-3 gap-1 mt-1">
+      {/* Size Handling */}
-              {(["png", "jpeg", "webp"] as const).map((f) => (
+      <div>
-                <button
+        <p className="text-xs text-muted-foreground">Resize Mode</p>
-                  type="button"
+        <div className="grid grid-cols-4 gap-1 mt-1">
-                  key={f}
+          {(["fit", "original", "stretch", "crop"] as const).map((m) => (
-                  onClick={() => setFormat(f)}
+            <button
-                  className={`uppercase text-xs py-1.5 rounded ${format === f ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
+              type="button"
-                >
+              key={m}
-                  {f}
+              onClick={() => setResizeMode(m)}
-                </button>
+              className={`capitalize text-xs py-1.5 rounded ${resizeMode === m ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
-              ))}
+            >
-            </div>
+              {m}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <p className="text-xs text-muted-foreground">Alignment</p>
+        <div className="grid grid-cols-3 gap-1 mt-1">
+          {(["start", "center", "end"] as const).map((a) => (
+            <button
+              type="button"
+              key={a}
+              onClick={() => setAlignment(a)}
+              className={`capitalize text-xs py-1.5 rounded ${alignment === a ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
+            >
+              {a}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="border-t border-border" />
+
+      {/* Spacing & Border */}
+      <div>
+        <div className="flex justify-between items-center">
+          <label htmlFor="stitch-gap" className="text-xs text-muted-foreground">
+            Gap
+          </label>
+          <span className="text-xs font-mono text-foreground">{gap}px</span>
+        </div>
+        <input
+          id="stitch-gap"
+          type="range"
+          min={0}
+          max={200}
+          value={gap}
+          onChange={(e) => setGap(Number(e.target.value))}
+          className="w-full mt-1"
+        />
+      </div>
+
+      <div>
+        <div className="flex justify-between items-center">
+          <label htmlFor="stitch-border" className="text-xs text-muted-foreground">
+            Border
+          </label>
+          <span className="text-xs font-mono text-foreground">{border}px</span>
+        </div>
+        <input
+          id="stitch-border"
+          type="range"
+          min={0}
+          max={50}
+          value={border}
+          onChange={(e) => setBorder(Number(e.target.value))}
+          className="w-full mt-1"
+        />
+      </div>
+
+      <div>
+        <div className="flex justify-between items-center">
+          <label htmlFor="stitch-corner-radius" className="text-xs text-muted-foreground">
+            Corner Radius
+          </label>
+          <span className="text-xs font-mono text-foreground">{cornerRadius}px</span>
+        </div>
+        <input
+          id="stitch-corner-radius"
+          type="range"
+          min={0}
+          max={50}
+          value={cornerRadius}
+          onChange={(e) => setCornerRadius(Number(e.target.value))}
+          className="w-full mt-1"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="stitch-background-color" className="text-xs text-muted-foreground">
+          Background Color
+        </label>
+        <input
+          id="stitch-background-color"
+          type="color"
+          value={backgroundColor}
+          onChange={(e) => setBackgroundColor(e.target.value)}
+          className="w-full mt-0.5 h-8 rounded border border-border"
+        />
+      </div>
+
+      <div className="border-t border-border" />
+
+      {/* Output */}
+      <div>
+        <p className="text-xs text-muted-foreground">Format</p>
+        <div className="grid grid-cols-3 gap-1 mt-1">
+          {(["png", "jpeg", "webp"] as const).map((f) => (
+            <button
+              type="button"
+              key={f}
+              onClick={() => setFormat(f)}
+              className={`uppercase text-xs py-1.5 rounded ${format === f ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
+            >
+              {f}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {(format === "jpeg" || format === "webp") && (
+        <div>
+          <div className="flex justify-between items-center">
+            <label htmlFor="stitch-quality" className="text-xs text-muted-foreground">
+              Quality
+            </label>
+            <span className="text-xs font-mono text-foreground">{quality}%</span>
           </div>
+          <input
+            id="stitch-quality"
+            type="range"
+            min={1}
+            max={100}
+            value={quality}
+            onChange={(e) => setQuality(Number(e.target.value))}
+            className="w-full mt-1"
+          />
         </div>
       )}