feat(crop): wire CropCanvas and CropSettings into tool-page with bidirectional state

apps/web/src/pages/tool-page.tsx

@@ -1,9 +1,13 @@
 import { useParams } from "react-router-dom";
-import { useMemo, useCallback, useState } from "react";
+import { useMemo, useCallback, useState, useEffect } from "react";
+import type { Crop } from "react-image-crop";
 import { TOOLS } from "@stirling-image/shared";
 import { AppLayout } from "@/components/layout/app-layout";
 import { Dropzone } from "@/components/common/dropzone";
 import { MultiImageViewer } from "@/components/common/multi-image-viewer";
+import { ImageViewer } from "@/components/common/image-viewer";
+import { BeforeAfterSlider } from "@/components/common/before-after-slider";
+import { SideBySideComparison } from "@/components/common/side-by-side-comparison";
 import { ReviewPanel } from "@/components/common/review-panel";
 import type { PreviewTransform } from "@/components/tools/rotate-settings";
 import { useFileStore } from "@/stores/file-store";
@@ -11,6 +15,7 @@ import { useMobile } from "@/hooks/use-mobile";
 import { formatFileSize } from "@/lib/download";
 import { ResizeSettings } from "@/components/tools/resize-settings";
 import { CropSettings } from "@/components/tools/crop-settings";
+import { CropCanvas } from "@/components/tools/crop-canvas";
 import { RotateSettings } from "@/components/tools/rotate-settings";
 import { ConvertSettings } from "@/components/tools/convert-settings";
 import { CompressSettings } from "@/components/tools/compress-settings";
@@ -61,18 +66,32 @@ const COLOR_TOOL_IDS = new Set([
 
 // Tools that don't need a file dropzone (they generate content or have custom UI)
 const NO_DROPZONE_TOOLS = new Set(["qr-generate"]);
+const SIDE_BY_SIDE_TOOLS = new Set(["resize", "crop"]);
 const LIVE_PREVIEW_TOOLS = new Set(["rotate"]);
+const INTERACTIVE_CROP_TOOLS = new Set(["crop"]);
 
 function ToolSettingsPanel({
   toolId,
   onPreviewTransform,
+  cropProps,
 }: {
   toolId: string;
   onPreviewTransform?: (t: PreviewTransform) => void;
+  cropProps?: {
+    cropState: {
+      crop: Crop;
+      aspect: number | undefined;
+      showGrid: boolean;
+      imgDimensions: { width: number; height: number } | null;
+    };
+    onCropChange: (crop: Crop) => void;
+    onAspectChange: (aspect: number | undefined) => void;
+    onGridToggle: (show: boolean) => void;
+  };
 }) {
   // Phase 2: Core tools
   if (toolId === "resize") return <ResizeSettings />;
-  if (toolId === "crop") return <CropSettings />;
+  if (toolId === "crop" && cropProps) return <CropSettings {...cropProps} />;
   if (toolId === "rotate") return <RotateSettings onPreviewTransform={onPreviewTransform} />;
   if (toolId === "convert") return <ConvertSettings />;
   if (toolId === "compress") return <CompressSettings />;
@@ -180,6 +199,36 @@ export function ToolPage() {
   const [mobileSettingsOpen, setMobileSettingsOpen] = useState(true);
   const [previewTransform, setPreviewTransform] = useState<PreviewTransform | null>(null);
 
+  const [cropCrop, setCropCrop] = useState<Crop>({
+    unit: "%",
+    x: 0,
+    y: 0,
+    width: 100,
+    height: 100,
+  });
+  const [cropAspect, setCropAspect] = useState<number | undefined>(undefined);
+  const [cropShowGrid, setCropShowGrid] = useState(true);
+  const [cropImgDimensions, setCropImgDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const cropState = useMemo(
+    () => ({
+      crop: cropCrop,
+      aspect: cropAspect,
+      showGrid: cropShowGrid,
+      imgDimensions: cropImgDimensions,
+    }),
+    [cropCrop, cropAspect, cropShowGrid, cropImgDimensions],
+  );
+
+  // Reset crop state when the image changes
+  useEffect(() => {
+    setCropCrop({ unit: "%", x: 0, y: 0, width: 100, height: 100 });
+    setCropImgDimensions(null);
+  }, [originalBlobUrl]);
+
   const handleFiles = useCallback(
     (newFiles: File[]) => {
       reset();
@@ -293,6 +342,12 @@ export function ToolPage() {
                 <ToolSettingsPanel
                   toolId={tool.id}
                   onPreviewTransform={LIVE_PREVIEW_TOOLS.has(tool.id) ? setPreviewTransform : undefined}
+                  cropProps={INTERACTIVE_CROP_TOOLS.has(tool.id) ? {
+                    cropState,
+                    onCropChange: setCropCrop,
+                    onAspectChange: setCropAspect,
+                    onGridToggle: setCropShowGrid,
+                  } : undefined}
                 />
               </div>
 
@@ -311,14 +366,57 @@ export function ToolPage() {
             </div>
           )}
 
-          {/* Main area: Dropzone / MultiImageViewer */}
+          {/* Main area: Dropzone / Image Viewer / Before-After */}
           <div className="flex-1 flex items-center justify-center p-4">
             {isNoDropzone ? (
               <div className="text-center text-muted-foreground">
                 <p className="text-sm">Configure settings and generate.</p>
               </div>
-            ) : hasFile ? (
+            ) : files.length > 1 ? (
               <MultiImageViewer />
+            ) : INTERACTIVE_CROP_TOOLS.has(tool.id) && hasFile && !hasProcessed && originalBlobUrl ? (
+              <CropCanvas
+                imageSrc={originalBlobUrl}
+                crop={cropCrop}
+                aspect={cropAspect}
+                showGrid={cropShowGrid}
+                imgDimensions={cropImgDimensions}
+                onCropChange={setCropCrop}
+                onImageLoad={setCropImgDimensions}
+              />
+            ) : hasProcessed && originalBlobUrl && SIDE_BY_SIDE_TOOLS.has(tool.id) ? (
+              <SideBySideComparison
+                beforeSrc={originalBlobUrl}
+                afterSrc={processedUrl}
+                beforeSize={originalSize ?? undefined}
+                afterSize={processedSize ?? undefined}
+              />
+            ) : hasProcessed && originalBlobUrl && LIVE_PREVIEW_TOOLS.has(tool.id) ? (
+              <ImageViewer
+                src={processedUrl}
+                filename={processedFileName}
+                fileSize={processedSize ?? 0}
+              />
+            ) : hasProcessed && originalBlobUrl ? (
+              <BeforeAfterSlider
+                beforeSrc={originalBlobUrl}
+                afterSrc={processedUrl}
+                beforeSize={originalSize ?? undefined}
+                afterSize={processedSize ?? undefined}
+              />
+            ) : hasFile && originalBlobUrl ? (
+              <ImageViewer
+                src={originalBlobUrl}
+                filename={selectedFileName ?? files[0].name}
+                fileSize={selectedFileSize ?? files[0].size}
+                {...(LIVE_PREVIEW_TOOLS.has(tool.id) && previewTransform
+                  ? {
+                      cssRotate: previewTransform.rotate,
+                      cssFlipH: previewTransform.flipH,
+                      cssFlipV: previewTransform.flipV,
+                    }
+                  : {})}
+              />
             ) : (
               <Dropzone
                 onFiles={handleFiles}
@@ -374,6 +472,12 @@ export function ToolPage() {
             <ToolSettingsPanel
               toolId={tool.id}
               onPreviewTransform={LIVE_PREVIEW_TOOLS.has(tool.id) ? setPreviewTransform : undefined}
+              cropProps={INTERACTIVE_CROP_TOOLS.has(tool.id) ? {
+                cropState,
+                onCropChange: setCropCrop,
+                onAspectChange: setCropAspect,
+                onGridToggle: setCropShowGrid,
+              } : undefined}
             />
           </div>
 
@@ -405,14 +509,57 @@ export function ToolPage() {
           )}
         </div>
 
-        {/* Main area: Dropzone / MultiImageViewer */}
+        {/* Main area: Dropzone / Image Viewer / Before-After */}
         <div className="flex-1 flex items-center justify-center p-6">
           {isNoDropzone ? (
             <div className="text-center text-muted-foreground">
               <p className="text-sm">Configure settings and generate.</p>
             </div>
-          ) : hasFile ? (
+          ) : files.length > 1 ? (
             <MultiImageViewer />
+          ) : INTERACTIVE_CROP_TOOLS.has(tool.id) && hasFile && !hasProcessed && originalBlobUrl ? (
+            <CropCanvas
+              imageSrc={originalBlobUrl}
+              crop={cropCrop}
+              aspect={cropAspect}
+              showGrid={cropShowGrid}
+              imgDimensions={cropImgDimensions}
+              onCropChange={setCropCrop}
+              onImageLoad={setCropImgDimensions}
+            />
+          ) : hasProcessed && originalBlobUrl && SIDE_BY_SIDE_TOOLS.has(tool.id) ? (
+            <SideBySideComparison
+              beforeSrc={originalBlobUrl}
+              afterSrc={processedUrl}
+              beforeSize={originalSize ?? undefined}
+              afterSize={processedSize ?? undefined}
+            />
+          ) : hasProcessed && originalBlobUrl && LIVE_PREVIEW_TOOLS.has(tool.id) ? (
+            <ImageViewer
+              src={processedUrl}
+              filename={processedFileName}
+              fileSize={processedSize ?? 0}
+            />
+          ) : hasProcessed && originalBlobUrl ? (
+            <BeforeAfterSlider
+              beforeSrc={originalBlobUrl}
+              afterSrc={processedUrl}
+              beforeSize={originalSize ?? undefined}
+              afterSize={processedSize ?? undefined}
+            />
+          ) : hasFile && originalBlobUrl ? (
+            <ImageViewer
+              src={originalBlobUrl}
+              filename={selectedFileName ?? files[0].name}
+              fileSize={selectedFileSize ?? files[0].size}
+              {...(LIVE_PREVIEW_TOOLS.has(tool.id) && previewTransform
+                ? {
+                    cssRotate: previewTransform.rotate,
+                    cssFlipH: previewTransform.flipH,
+                    cssFlipV: previewTransform.flipV,
+                  }
+                : {})}
+            />
           ) : (
             <Dropzone
               onFiles={handleFiles}