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:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user