refactor(sidebar): extract InlineRename, InlineConfirm, and NavItem

FolderItem and AlbumItem each carried their own copy of the in-place
rename input (state, select-on-open effect, commit/cancel handling) and
the Confirm/Cancel pair for destructive actions. Both are now shared
components: InlineRename mounts fresh per rename (an external name
change mid-rename no longer clobbers typing), InlineConfirm is the
compact red/gray pair. The four copy-pasted nav rows collapse into a
local NavItem component.
This commit is contained in:
2026-07-04 12:11:26 +01:00
parent 6806703363
commit ee2a1b204e
3 changed files with 142 additions and 149 deletions
+28
View File
@@ -0,0 +1,28 @@
/**
* Compact Confirm/Cancel pair for destructive row actions (remove folder,
* delete album). Swap it in where the hover actions normally sit.
*/
export function InlineConfirm({
onConfirm,
onCancel,
}: {
onConfirm: () => void;
onCancel: () => void;
}) {
return (
<div className="flex items-center gap-1 shrink-0" onClick={(event) => event.stopPropagation()}>
<button
className="px-1.5 py-0.5 text-[10px] rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 hover:text-red-300 transition-colors"
onClick={onConfirm}
>
Confirm
</button>
<button
className="px-1.5 py-0.5 text-[10px] rounded bg-white/5 text-gray-500 hover:bg-white/10 hover:text-gray-300 transition-colors"
onClick={onCancel}
>
Cancel
</button>
</div>
);
}