fix: move import button below renames panel

Move the "Import n files" button from the sticky header bar to below
the renames confirmation panel, so the user reviews renames first
before importing.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta 2026-03-16 09:47:29 -05:00
parent 86bb3d25cc
commit 0b829ea20b

View file

@ -902,35 +902,23 @@ export function CompanyImport() {
<> <>
{/* Sticky import action bar */} {/* Sticky import action bar */}
<div className="sticky top-0 z-10 border-b border-border bg-background px-5 py-3"> <div className="sticky top-0 z-10 border-b border-border bg-background px-5 py-3">
<div className="flex flex-wrap items-center justify-between gap-3"> <div className="flex flex-wrap items-center gap-4 text-sm">
<div className="flex items-center gap-4 text-sm"> <span className="font-medium">
<span className="font-medium"> Import preview
Import preview </span>
<span className="text-muted-foreground">
{selectedCount} / {totalFiles} file{totalFiles === 1 ? "" : "s"} selected
</span>
{conflicts.length > 0 && (
<span className="text-amber-500">
{conflicts.length} rename{conflicts.length === 1 ? "" : "s"}
</span> </span>
<span className="text-muted-foreground"> )}
{selectedCount} / {totalFiles} file{totalFiles === 1 ? "" : "s"} selected {importPreview.errors.length > 0 && (
<span className="text-destructive">
{importPreview.errors.length} error{importPreview.errors.length === 1 ? "" : "s"}
</span> </span>
{conflicts.length > 0 && ( )}
<span className="text-amber-500">
{conflicts.length} rename{conflicts.length === 1 ? "" : "s"}
</span>
)}
{importPreview.errors.length > 0 && (
<span className="text-destructive">
{importPreview.errors.length} error{importPreview.errors.length === 1 ? "" : "s"}
</span>
)}
</div>
<Button
size="sm"
onClick={() => importMutation.mutate()}
disabled={importMutation.isPending || hasErrors || selectedCount === 0}
>
<Download className="mr-1.5 h-3.5 w-3.5" />
{importMutation.isPending
? "Importing..."
: `Import ${selectedCount} file${selectedCount === 1 ? "" : "s"}`}
</Button>
</div> </div>
</div> </div>
@ -945,6 +933,20 @@ export function CompanyImport() {
onToggleConfirm={handleConflictToggleConfirm} onToggleConfirm={handleConflictToggleConfirm}
/> />
{/* Import button — below renames */}
<div className="mx-5 mt-3">
<Button
size="sm"
onClick={() => importMutation.mutate()}
disabled={importMutation.isPending || hasErrors || selectedCount === 0}
>
<Download className="mr-1.5 h-3.5 w-3.5" />
{importMutation.isPending
? "Importing..."
: `Import ${selectedCount} file${selectedCount === 1 ? "" : "s"}`}
</Button>
</div>
{/* Warnings */} {/* Warnings */}
{importPreview.warnings.length > 0 && ( {importPreview.warnings.length > 0 && (
<div className="mx-5 mt-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3"> <div className="mx-5 mt-3 rounded-md border border-amber-500/30 bg-amber-500/5 px-4 py-3">