diff --git a/apps/web/src/components/common/review-panel.tsx b/apps/web/src/components/common/review-panel.tsx index d8238b28..18988acd 100644 --- a/apps/web/src/components/common/review-panel.tsx +++ b/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({
- {/* Review header */} - + {/* Success indicator */} +
+ + {t.toolPage.conversionComplete} +
- {isExpanded && ( -
- {/* Preview thumbnail */} - {previewUrl && ( -
- Processed result -
- )} - - {/* File metadata */} -
-

{filename}

-

Size: {formatFileSize(fileSize)}

-

Type: {fileType}

-

Processed: {timestamp}

+ {/* Size delta */} + {originalSize > 0 && ( +
+
+ {t.toolPage.original} + {formatFileSize(originalSize)}
- - {/* Action buttons */} -
-
+
+ {t.toolPage.saved} + 0 + ? "text-emerald-600" + : sizeDelta === 0 + ? "text-muted-foreground" + : "text-foreground" + }`} > - - {t.reviewPanel.undoButton} - - + {sizeDelta === 0 + ? t.toolPage.noChange + : sizeDelta > 0 + ? `-${sizeDelta}%` + : `+${Math.abs(sizeDelta)}%`} +
- - {/* Open in Editor */} - - - {t.reviewPanel.openInEditor} - - - {/* Suggested tools */} - {suggestedTools.length > 0 && ( -
-
- - - {isSuggestionsExpanded && ( -
- {suggestedTools.map((tool) => { - const ToolIcon = - (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ?? - FileImage; - return ( - - ); - })} -
- )} -
- )}
)} + + {/* Download button with format + size */} + + + {/* Adjust settings */} + + + {/* Text links */} +
+ + + + {t.toolPage.backToTools} + +
); } diff --git a/apps/web/src/pages/tool-page.tsx b/apps/web/src/pages/tool-page.tsx index 598962a0..e39a7e5c 100644 --- a/apps/web/src/pages/tool-page.tsx +++ b/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 && ( - +
+ +
)} ); @@ -967,17 +970,20 @@ export function ToolPage() {
{/* Tool Settings Panel */} -
-
-
- +
+
+
+
+ +
+

+ {getToolName(t, tool.id, tool.name)} +

-

- {getToolName(t, tool.id, tool.name)} -

-
- {renderSettingsContent()} + {renderSettingsContent()} +
+
{/* Main area: image viewer */} @@ -990,7 +996,10 @@ export function ToolPage() {
{liveMessage}
-
+
{renderNavArrows()} {renderImageArea()}
diff --git a/apps/web/src/styles/globals.css b/apps/web/src/styles/globals.css index 165d0e5e..4f61a388 100644 --- a/apps/web/src/styles/globals.css +++ b/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; diff --git a/packages/shared/src/i18n/ar.ts b/packages/shared/src/i18n/ar.ts index 2d637f04..615dbe07 100644 --- a/packages/shared/src/i18n/ar.ts +++ b/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: "جاري إنشاء المعاينة...", diff --git a/packages/shared/src/i18n/de.ts b/packages/shared/src/i18n/de.ts index 73452c5e..52da48fc 100644 --- a/packages/shared/src/i18n/de.ts +++ b/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...", diff --git a/packages/shared/src/i18n/en.ts b/packages/shared/src/i18n/en.ts index a617893e..275d1662 100644 --- a/packages/shared/src/i18n/en.ts +++ b/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...", diff --git a/packages/shared/src/i18n/es.ts b/packages/shared/src/i18n/es.ts index 5cd2159e..81086920 100644 --- a/packages/shared/src/i18n/es.ts +++ b/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...", diff --git a/packages/shared/src/i18n/fr.ts b/packages/shared/src/i18n/fr.ts index 671a5714..dc747b2d 100644 --- a/packages/shared/src/i18n/fr.ts +++ b/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...", diff --git a/packages/shared/src/i18n/hi.ts b/packages/shared/src/i18n/hi.ts index 73620e38..c0219f56 100644 --- a/packages/shared/src/i18n/hi.ts +++ b/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: "प्रीव्यू जनरेट हो रहा है...", diff --git a/packages/shared/src/i18n/id.ts b/packages/shared/src/i18n/id.ts index a3374ab2..294cee96 100644 --- a/packages/shared/src/i18n/id.ts +++ b/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...", diff --git a/packages/shared/src/i18n/it.ts b/packages/shared/src/i18n/it.ts index 5cb2adb0..887c809a 100644 --- a/packages/shared/src/i18n/it.ts +++ b/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...", diff --git a/packages/shared/src/i18n/ja.ts b/packages/shared/src/i18n/ja.ts index 6f351c6a..9324752c 100644 --- a/packages/shared/src/i18n/ja.ts +++ b/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: "プレビューを生成中...", diff --git a/packages/shared/src/i18n/ko.ts b/packages/shared/src/i18n/ko.ts index 9e2464b4..331a9888 100644 --- a/packages/shared/src/i18n/ko.ts +++ b/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: "미리보기 생성 중...", diff --git a/packages/shared/src/i18n/nl.ts b/packages/shared/src/i18n/nl.ts index eed6b0db..a3f85df7 100644 --- a/packages/shared/src/i18n/nl.ts +++ b/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...", diff --git a/packages/shared/src/i18n/pl.ts b/packages/shared/src/i18n/pl.ts index 328a1f3b..b123dd3e 100644 --- a/packages/shared/src/i18n/pl.ts +++ b/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...", diff --git a/packages/shared/src/i18n/pt-BR.ts b/packages/shared/src/i18n/pt-BR.ts index 63b2d623..856dd572 100644 --- a/packages/shared/src/i18n/pt-BR.ts +++ b/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...", diff --git a/packages/shared/src/i18n/ru.ts b/packages/shared/src/i18n/ru.ts index 72473270..fcc7c0bb 100644 --- a/packages/shared/src/i18n/ru.ts +++ b/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: "Генерация предпросмотра...", diff --git a/packages/shared/src/i18n/sv.ts b/packages/shared/src/i18n/sv.ts index d67df602..c41881de 100644 --- a/packages/shared/src/i18n/sv.ts +++ b/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...", diff --git a/packages/shared/src/i18n/th.ts b/packages/shared/src/i18n/th.ts index 7b291059..73bd2c9e 100644 --- a/packages/shared/src/i18n/th.ts +++ b/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: "กำลังสร้างตัวอย่าง...", diff --git a/packages/shared/src/i18n/tr.ts b/packages/shared/src/i18n/tr.ts index cdbfb1c8..7875eca0 100644 --- a/packages/shared/src/i18n/tr.ts +++ b/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...", diff --git a/packages/shared/src/i18n/uk.ts b/packages/shared/src/i18n/uk.ts index f9082dbb..5791433c 100644 --- a/packages/shared/src/i18n/uk.ts +++ b/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: "Генерація попереднього перегляду...", diff --git a/packages/shared/src/i18n/vi.ts b/packages/shared/src/i18n/vi.ts index 21009796..c67cd4b9 100644 --- a/packages/shared/src/i18n/vi.ts +++ b/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...", diff --git a/packages/shared/src/i18n/zh-CN.ts b/packages/shared/src/i18n/zh-CN.ts index b3249134..b2f17f2c 100644 --- a/packages/shared/src/i18n/zh-CN.ts +++ b/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: "正在生成预览...", diff --git a/packages/shared/src/i18n/zh-TW.ts b/packages/shared/src/i18n/zh-TW.ts index 67705e4f..c3c68fd3 100644 --- a/packages/shared/src/i18n/zh-TW.ts +++ b/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: "正在產生預覽...",