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 { ArrowLeft, CheckCircle2, Download } from "lucide-react";
-import {
+import { useMemo } from "react";
-  ArrowRight,
+import { Link } from "react-router-dom";
-  ChevronDown,
-  ChevronRight,
-  Download,
-  FileImage,
-  PenTool,
-  Undo2,
-} from "lucide-react";
-import { useMemo, useState } from "react";
-import { Link, useNavigate } 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 sizeDelta = useMemo(() => {
-
+    if (!originalSize || originalSize === 0) return 0;
-  const suggestedTools = useMemo(
+    return Math.round((1 - fileSize / originalSize) * 100);
-    () =>
+  }, [originalSize, fileSize]);
-      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 handleDownload = () => {
     triggerDownload(downloadUrl, filename);
@@ -62,108 +40,80 @@ export function ReviewPanel({
     <div className="space-y-3">
       <div className="border-t border-border" />
 
-      {/* Review header */}
+      {/* Success indicator */}
-      <button
+      <div className="flex items-center gap-2">
-        type="button"
+        <CheckCircle2 className="h-4 w-4 text-emerald-600 shrink-0" />
-        onClick={() => setIsExpanded(!isExpanded)}
+        <span className="text-sm font-medium text-foreground">{t.toolPage.conversionComplete}</span>
-        className="flex items-center justify-between w-full text-sm font-medium text-muted-foreground hover:text-foreground"
+      </div>
-      >
-        <span>{t.reviewPanel.reviewHeading}</span>
-        {isExpanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
-      </button>
 
-      {isExpanded && (
+      {/* Size delta */}
-        <div className="space-y-3">
+      {originalSize > 0 && (
-          {/* Preview thumbnail */}
+        <div className="space-y-1 text-xs">
-          {previewUrl && (
+          <div className="flex justify-between">
-            <div className="rounded-lg border border-border overflow-hidden bg-muted/30">
+            <span className="text-muted-foreground">{t.toolPage.original}</span>
-              <img
+            <span className="tabular-nums text-foreground">{formatFileSize(originalSize)}</span>
-                src={previewUrl}
+          </div>
-                alt="Processed result"
+          <div className="flex justify-between">
-                className="w-full h-auto max-h-32 object-contain"
+            <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"
+              }`}
+            >
+              {sizeDelta === 0
+                ? t.toolPage.noChange
+                : sizeDelta > 0
+                  ? `-${sizeDelta}%`
+                  : `+${Math.abs(sizeDelta)}%`}
+            </span>
+          </div>
         </div>
       )}
 
-          {/* File metadata */}
+      {/* Download button with format + size */}
-          <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>
-          </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"
-            >
-              <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"
+        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-3.5 w-3.5" />
+        <Download className="h-4 w-4" />
-              {t.common.download}
+        {t.toolPage.download} {fileType} ({formatFileSize(fileSize)})
       </button>
-          </div>
 
-          {/* Open in Editor */}
+      {/* 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={`/editor?url=${encodeURIComponent(downloadUrl)}`}
+          to="/"
-            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"
+          className="text-muted-foreground hover:text-foreground flex items-center gap-1"
         >
-            <PenTool className="h-3.5 w-3.5" />
+          <ArrowLeft className="h-3 w-3" />
-            {t.reviewPanel.openInEditor}
+          {t.toolPage.backToTools}
         </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>
-      )}
     </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 && (
+          <div className="animate-fade-in">
             <ReviewPanel
               filename={processedFileName}
               fileSize={processedSize}
               fileType={processedFileType}
+              originalSize={originalSize ?? 0}
               downloadUrl={processedUrl}
-            previewUrl={
-              isProcessedPreviewable
-                ? processedUrl
-                : (processedPreviewUrl ?? originalBlobUrl ?? undefined)
-            }
               onUndo={handleUndo}
+              onStartOver={startOver}
               currentToolId={tool?.id ?? ""}
             />
+          </div>
         )}
       </>
     );
@@ -967,7 +970,8 @@ 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="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" />
@@ -979,6 +983,8 @@ export function ToolPage() {
 
             {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 */}
         <section
@@ -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;

packages/shared/src/i18n/ar.ts

@@ -2445,6 +2445,14 @@ export const ar: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "جاري إنشاء المعاينة...",

packages/shared/src/i18n/de.ts

@@ -2459,6 +2459,14 @@ export const de: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Vorschau wird generiert...",

packages/shared/src/i18n/en.ts

@@ -2409,6 +2409,14 @@ export const en = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Generating preview...",

packages/shared/src/i18n/es.ts

@@ -2441,6 +2441,14 @@ export const es: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Generando vista previa...",

packages/shared/src/i18n/fr.ts

@@ -2460,6 +2460,14 @@ export const fr: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Generation de l'apercu...",

packages/shared/src/i18n/hi.ts

@@ -2442,6 +2442,14 @@ export const hi: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "प्रीव्यू जनरेट हो रहा है...",

packages/shared/src/i18n/id.ts

@@ -2454,6 +2454,14 @@ export const id: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Membuat pratinjau...",

packages/shared/src/i18n/it.ts

@@ -2453,6 +2453,14 @@ export const it: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Generazione anteprima...",

packages/shared/src/i18n/ja.ts

@@ -2412,6 +2412,14 @@ export const ja: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "プレビューを生成中...",

packages/shared/src/i18n/ko.ts

@@ -2397,6 +2397,14 @@ export const ko: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "미리보기 생성 중...",

packages/shared/src/i18n/nl.ts

@@ -2456,6 +2456,14 @@ export const nl: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Preview genereren...",

packages/shared/src/i18n/pl.ts

@@ -2457,6 +2457,14 @@ export const pl: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Generowanie podglądu...",

packages/shared/src/i18n/pt-BR.ts

@@ -2453,6 +2453,14 @@ export const ptBR: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Gerando visualizacao...",

packages/shared/src/i18n/ru.ts

@@ -2455,6 +2455,14 @@ export const ru: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Генерация предпросмотра...",

packages/shared/src/i18n/sv.ts

@@ -2452,6 +2452,14 @@ export const sv: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Genererar forhandsvisning...",

packages/shared/src/i18n/th.ts

@@ -2434,6 +2434,14 @@ export const th: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "กำลังสร้างตัวอย่าง...",

packages/shared/src/i18n/tr.ts

@@ -2457,6 +2457,14 @@ export const tr: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Önizleme oluşturuluyor...",

packages/shared/src/i18n/uk.ts

@@ -2455,6 +2455,14 @@ export const uk: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Генерація попереднього перегляду...",

packages/shared/src/i18n/vi.ts

@@ -2454,6 +2454,14 @@ export const vi: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "Đang tạo bản xem trước...",

packages/shared/src/i18n/zh-CN.ts

@@ -2387,6 +2387,14 @@ export const zhCN: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "正在生成预览...",

packages/shared/src/i18n/zh-TW.ts

@@ -2385,6 +2385,14 @@ export const zhTW: TranslationKeys = {
     browseOtherTools: "Browse other tools",
     privacyNote: "Files are processed on your server and never leave your network",
     andMore: "and {count} more",
+    adjustSettings: "Adjust settings",
+    startOver: "Start over with a new file",
+    backToTools: "Back to Tools",
+    original: "Original",
+    processed: "Processed",
+    saved: "Saved",
+    noChange: "no change",
+    download: "Download",
   },
   homePage: {
     generatingPreview: "正在產生預覽...",