feat: add settings slide-in, review panel with size delta, start-over preserving settings

apps/web/src/components/common/review-panel.tsx

@@ -1,27 +1,17 @@
-import { TOOLS } from "@snapotter/shared";
-import {
-  ArrowRight,
-  ChevronDown,
-  ChevronRight,
-  Download,
-  FileImage,
-  PenTool,
-  Undo2,
-} from "lucide-react";
-import { useMemo, useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { ArrowLeft, CheckCircle2, Download } from "lucide-react";
+import { useMemo } from "react";
+import { Link } from "react-router-dom";
 import { useTranslation } from "@/contexts/i18n-context";
 import { formatFileSize, triggerDownload } from "@/lib/download";
-import { ICON_MAP } from "@/lib/icon-map";
-import { getSuggestedTools } from "@/lib/suggested-tools";
 
 interface ReviewPanelProps {
   filename: string;
   fileSize: number;
   fileType: string;
+  originalSize: number;
   downloadUrl: string;
-  previewUrl?: string;
   onUndo: () => void;
+  onStartOver: () => void;
   currentToolId: string;
 }
 
@@ -29,30 +19,18 @@ export function ReviewPanel({
   filename,
   fileSize,
   fileType,
+  originalSize,
   downloadUrl,
-  previewUrl,
   onUndo,
-  currentToolId,
+  onStartOver,
+  currentToolId: _currentToolId,
 }: ReviewPanelProps) {
   const { t } = useTranslation();
-  const [isExpanded, setIsExpanded] = useState(true);
-  const [isSuggestionsExpanded, setIsSuggestionsExpanded] = useState(true);
-  const navigate = useNavigate();
 
-  const suggestedToolIds = useMemo(() => getSuggestedTools(currentToolId), [currentToolId]);
-
-  const suggestedTools = useMemo(
-    () =>
-      suggestedToolIds
-        .map((id) => TOOLS.find((t) => t.id === id))
-        .filter((t): t is (typeof TOOLS)[number] => t !== undefined),
-    [suggestedToolIds],
-  );
-
-  const timestamp = useMemo(() => {
-    const now = new Date();
-    return now.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
-  }, []);
+  const sizeDelta = useMemo(() => {
+    if (!originalSize || originalSize === 0) return 0;
+    return Math.round((1 - fileSize / originalSize) * 100);
+  }, [originalSize, fileSize]);
 
   const handleDownload = () => {
     triggerDownload(downloadUrl, filename);
@@ -62,108 +40,80 @@ export function ReviewPanel({
     <div className="space-y-3">
       <div className="border-t border-border" />
 
-      {/* Review header */}
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex items-center justify-between w-full text-sm font-medium text-muted-foreground hover:text-foreground"
-      >
-        <span>{t.reviewPanel.reviewHeading}</span>
-        {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-      </button>
+      {/* Success indicator */}
+      <div className="flex items-center gap-2">
+        <CheckCircle2 className="h-4 w-4 text-emerald-600 shrink-0" />
+        <span className="text-sm font-medium text-foreground">{t.toolPage.conversionComplete}</span>
+      </div>
 
-      {isExpanded && (
-        <div className="space-y-3">
-          {/* Preview thumbnail */}
-          {previewUrl && (
-            <div className="rounded-lg border border-border overflow-hidden bg-muted/30">
-              <img
-                src={previewUrl}
-                alt="Processed result"
-                className="w-full h-auto max-h-32 object-contain"
-              />
-            </div>
-          )}
-
-          {/* File metadata */}
-          <div className="space-y-1 text-xs text-muted-foreground">
-            <p className="truncate text-foreground font-medium">{filename}</p>
-            <p>Size: {formatFileSize(fileSize)}</p>
-            <p>Type: {fileType}</p>
-            <p>Processed: {timestamp}</p>
+      {/* Size delta */}
+      {originalSize > 0 && (
+        <div className="space-y-1 text-xs">
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t.toolPage.original}</span>
+            <span className="tabular-nums text-foreground">{formatFileSize(originalSize)}</span>
           </div>
-
-          {/* Action buttons */}
-          <div className="flex gap-2">
-            <button
-              type="button"
-              onClick={onUndo}
-              className="flex-1 py-2 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted flex items-center justify-center gap-1.5 text-xs font-medium"
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t.toolPage.processed}</span>
+            <span className="tabular-nums text-foreground">{formatFileSize(fileSize)}</span>
+          </div>
+          <div className="flex justify-between">
+            <span className="text-muted-foreground">{t.toolPage.saved}</span>
+            <span
+              className={`tabular-nums font-medium ${
+                sizeDelta > 0
+                  ? "text-emerald-600"
+                  : sizeDelta === 0
+                    ? "text-muted-foreground"
+                    : "text-foreground"
+              }`}
             >
-              <Undo2 className="h-3.5 w-3.5" />
-              {t.reviewPanel.undoButton}
-            </button>
-            <button
-              type="button"
-              onClick={handleDownload}
-              className="flex-1 py-2 rounded-lg bg-primary text-primary-foreground flex items-center justify-center gap-1.5 text-xs font-medium hover:bg-primary/90"
-            >
-              <Download className="h-3.5 w-3.5" />
-              {t.common.download}
-            </button>
+              {sizeDelta === 0
+                ? t.toolPage.noChange
+                : sizeDelta > 0
+                  ? `-${sizeDelta}%`
+                  : `+${Math.abs(sizeDelta)}%`}
+            </span>
           </div>
-
-          {/* Open in Editor */}
-          <Link
-            to={`/editor?url=${encodeURIComponent(downloadUrl)}`}
-            className="flex items-center justify-center gap-1.5 w-full py-2 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted text-xs font-medium"
-          >
-            <PenTool className="h-3.5 w-3.5" />
-            {t.reviewPanel.openInEditor}
-          </Link>
-
-          {/* Suggested tools */}
-          {suggestedTools.length > 0 && (
-            <div className="space-y-2">
-              <div className="border-t border-border pt-2" />
-              <button
-                type="button"
-                onClick={() => setIsSuggestionsExpanded(!isSuggestionsExpanded)}
-                className="flex items-center justify-between w-full text-xs font-medium text-muted-foreground hover:text-foreground"
-              >
-                <span>{t.reviewPanel.continueEditing}</span>
-                {isSuggestionsExpanded ? (
-                  <ChevronDown className="h-3.5 w-3.5" />
-                ) : (
-                  <ChevronRight className="h-3.5 w-3.5" />
-                )}
-              </button>
-
-              {isSuggestionsExpanded && (
-                <div className="space-y-1">
-                  {suggestedTools.map((tool) => {
-                    const ToolIcon =
-                      (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
-                      FileImage;
-                    return (
-                      <button
-                        key={tool.id}
-                        type="button"
-                        onClick={() => navigate(tool.route)}
-                        className="flex items-center gap-2 w-full px-2 py-1.5 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-muted group"
-                      >
-                        <ToolIcon className="h-3.5 w-3.5 shrink-0" />
-                        <span className="flex-1 text-start">{tool.name}</span>
-                        <ArrowRight className="h-3 w-3 opacity-0 group-hover:opacity-100 shrink-0" />
-                      </button>
-                    );
-                  })}
-                </div>
-              )}
-            </div>
-          )}
         </div>
       )}
+
+      {/* Download button with format + size */}
+      <button
+        type="button"
+        onClick={handleDownload}
+        className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium text-sm flex items-center justify-center gap-2 hover:bg-primary/90"
+      >
+        <Download className="h-4 w-4" />
+        {t.toolPage.download} {fileType} ({formatFileSize(fileSize)})
+      </button>
+
+      {/* Adjust settings */}
+      <button
+        type="button"
+        onClick={onUndo}
+        className="w-full py-2 rounded-lg border border-border text-foreground hover:bg-muted text-sm font-medium"
+      >
+        {t.toolPage.adjustSettings}
+      </button>
+
+      {/* Text links */}
+      <div className="flex flex-col items-center gap-1.5 text-xs">
+        <button
+          type="button"
+          onClick={onStartOver}
+          className="text-muted-foreground hover:text-foreground"
+        >
+          {t.toolPage.startOver}
+        </button>
+        <Link
+          to="/"
+          className="text-muted-foreground hover:text-foreground flex items-center gap-1"
+        >
+          <ArrowLeft className="h-3 w-3" />
+          {t.toolPage.backToTools}
+        </Link>
+      </div>
     </div>
   );
 }

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

@@ -360,6 +360,10 @@ export function ToolPage() {
     setEraserSliderInitPos(null);
   }, [undoProcessing]);
 
+  const startOver = useCallback(() => {
+    reset();
+  }, [reset]);
+
   const handleAddMore = useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
@@ -850,19 +854,18 @@ export function ToolPage() {
         )}
 
         {hasProcessed && processedSize != null && (
-          <ReviewPanel
-            filename={processedFileName}
-            fileSize={processedSize}
-            fileType={processedFileType}
-            downloadUrl={processedUrl}
-            previewUrl={
-              isProcessedPreviewable
-                ? processedUrl
-                : (processedPreviewUrl ?? originalBlobUrl ?? undefined)
-            }
-            onUndo={handleUndo}
-            currentToolId={tool?.id ?? ""}
-          />
+          <div className="animate-fade-in">
+            <ReviewPanel
+              filename={processedFileName}
+              fileSize={processedSize}
+              fileType={processedFileType}
+              originalSize={originalSize ?? 0}
+              downloadUrl={processedUrl}
+              onUndo={handleUndo}
+              onStartOver={startOver}
+              currentToolId={tool?.id ?? ""}
+            />
+          </div>
         )}
       </>
     );
@@ -967,17 +970,20 @@ export function ToolPage() {
     <AppLayout breadcrumb={breadcrumb}>
       <div className="flex h-full w-full">
         {/* Tool Settings Panel */}
-        <div className="settings-container w-72 border-r border-border p-4 space-y-4 overflow-y-auto shrink-0">
-          <div className="flex items-center gap-3">
-            <div className="p-2 rounded-lg bg-primary text-primary-foreground">
-              <IconComponent className="h-5 w-5" />
+        <div className="settings-container settings-slide-in w-72 border-e border-border shrink-0 flex flex-col">
+          <div className="flex-1 overflow-y-auto p-4 space-y-4">
+            <div className="flex items-center gap-3">
+              <div className="p-2 rounded-lg bg-primary text-primary-foreground">
+                <IconComponent className="h-5 w-5" />
+              </div>
+              <h1 className="font-semibold text-lg text-foreground">
+                {getToolName(t, tool.id, tool.name)}
+              </h1>
             </div>
-            <h1 className="font-semibold text-lg text-foreground">
-              {getToolName(t, tool.id, tool.name)}
-            </h1>
-          </div>
 
-          {renderSettingsContent()}
+            {renderSettingsContent()}
+          </div>
+          <div className="pointer-events-none sticky bottom-0 h-6 bg-gradient-to-t from-background to-transparent" />
         </div>
 
         {/* Main area: image viewer */}
@@ -990,7 +996,10 @@ export function ToolPage() {
           <div aria-live="polite" aria-atomic="true" className="sr-only">
             {liveMessage}
           </div>
-          <div className="flex-1 relative flex items-center justify-center p-6 min-h-0 min-w-0">
+          <div
+            key={hasProcessed ? `processed-${selectedIndex}` : `pending-${selectedIndex}`}
+            className={`flex-1 relative flex items-center justify-center p-6 min-h-0 min-w-0 ${hasProcessed ? "animate-fade-in" : ""}`}
+          >
             {renderNavArrows()}
             {renderImageArea()}
           </div>

apps/web/src/styles/globals.css

@@ -110,6 +110,47 @@ input[type="range"]::-moz-range-track {
   text-align: left;
 }
 
+/* Slide-in animation for settings panel */
+@keyframes settings-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes settings-slide-in-rtl {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.settings-slide-in {
+  animation: settings-slide-in 200ms ease-out;
+}
+
+[dir="rtl"] .settings-slide-in {
+  animation-name: settings-slide-in-rtl;
+}
+
+/* Fade-in animation for processed results and review panel */
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fade-in {
+  animation: fade-in 200ms ease-out;
+}
+
 /* Container queries for responsive settings panels */
 .settings-container {
   container-type: inline-size;