mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
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:
@@ -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}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user