feat: redesign review panel action hierarchy

- Download stays primary (full-width button)
- Save to Files demoted to subtle text link below download
- "Adjust settings" and "New file" are side-by-side compact buttons
- "Back to Tools" faded to very subtle (breadcrumb handles this)
- Clearer visual hierarchy: primary -> secondary -> tertiary actions
This commit is contained in:
SnapOtter
2026-06-15 11:52:22 +08:00
parent e7126f9293
commit ed458d4bbd
22 changed files with 65 additions and 38 deletions
+44 -38
View File
@@ -5,6 +5,7 @@ import { useTranslation } from "@/contexts/i18n-context";
import { formatHeaders } from "@/lib/api";
import { formatFileSize, triggerDownload } from "@/lib/download";
import { format } from "@/lib/format";
import { cn } from "@/lib/utils";
/** Tools whose primary output is text/data, not a downloadable file. */
const DATA_OUTPUT_TOOLS = new Set([
@@ -188,54 +189,59 @@ export function ReviewPanel({
</button>
)}
{/* Save to Files */}
{/* Save to Files -- subtle text link */}
{!isDataOutput && (
<button
type="button"
onClick={handleSaveToFiles}
disabled={saveStatus === "saving" || saveStatus === "saved"}
className={`w-full py-2 rounded-lg border text-sm flex items-center justify-center gap-2 transition-all ${
saveStatus === "saved"
? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-400"
: "border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-50"
}`}
>
{saveStatus === "saved" ? (
<CheckCircle2 className="h-4 w-4" />
) : saveStatus === "saving" ? (
<div className="h-4 w-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
) : (
<FolderPlus className="h-4 w-4" />
)}
{saveStatus === "saving"
? t.common.saving
: saveStatus === "saved"
? t.toolPage.savedToFiles
: t.toolPage.saveToFiles}
</button>
<div className="flex justify-center">
<button
type="button"
onClick={handleSaveToFiles}
disabled={saveStatus === "saving" || saveStatus === "saved"}
className={cn(
"text-xs flex items-center gap-1.5 transition-colors",
saveStatus === "saved"
? "text-emerald-600 dark:text-emerald-400"
: "text-muted-foreground hover:text-foreground disabled:opacity-50",
)}
>
{saveStatus === "saved" ? (
<CheckCircle2 className="h-3 w-3" />
) : saveStatus === "saving" ? (
<div className="h-3 w-3 border-1.5 border-current border-t-transparent rounded-full animate-spin" />
) : (
<FolderPlus className="h-3 w-3" />
)}
{saveStatus === "saving"
? t.common.saving
: saveStatus === "saved"
? t.toolPage.savedToFiles
: t.toolPage.saveToFiles}
</button>
</div>
)}
{/* 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">
{/* Edit settings / New file -- side by side */}
<div className="grid grid-cols-2 gap-2">
<button
type="button"
onClick={onUndo}
className="py-2 rounded-lg border border-border text-foreground hover:bg-muted text-xs font-medium"
>
{t.toolPage.adjustSettings}
</button>
<button
type="button"
onClick={onStartOver}
className="text-muted-foreground hover:text-foreground"
className="py-2 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted text-xs font-medium"
>
{t.toolPage.startOver}
{t.toolPage.newFile}
</button>
</div>
{/* Back to Tools -- subtle link, hidden since breadcrumb handles this */}
<div className="flex justify-center">
<Link
to="/"
className="text-muted-foreground hover:text-foreground flex items-center gap-1"
className="text-xs text-muted-foreground/60 hover:text-muted-foreground flex items-center gap-1"
>
<ArrowLeft className="h-3 w-3" />
{t.toolPage.backToTools}
+1
View File
@@ -2452,6 +2452,7 @@ export const ar: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2466,6 +2466,7 @@ export const de: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2416,6 +2416,7 @@ export const en = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2448,6 +2448,7 @@ export const es: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2467,6 +2467,7 @@ export const fr: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2449,6 +2449,7 @@ export const hi: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2461,6 +2461,7 @@ export const id: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2460,6 +2460,7 @@ export const it: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2419,6 +2419,7 @@ export const ja: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2404,6 +2404,7 @@ export const ko: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2463,6 +2463,7 @@ export const nl: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2464,6 +2464,7 @@ export const pl: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2460,6 +2460,7 @@ export const ptBR: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2462,6 +2462,7 @@ export const ru: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2459,6 +2459,7 @@ export const sv: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2441,6 +2441,7 @@ export const th: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2464,6 +2464,7 @@ export const tr: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2462,6 +2462,7 @@ export const uk: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2461,6 +2461,7 @@ export const vi: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2394,6 +2394,7 @@ export const zhCN: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",
+1
View File
@@ -2392,6 +2392,7 @@ export const zhTW: TranslationKeys = {
savedToFiles: "Saved to Files",
adjustSettings: "Adjust settings",
startOver: "Start over with a new file",
newFile: "New file",
backToTools: "Back to Tools",
original: "Original",
processed: "Processed",