feat(MediaManager): enhance path navigation with inline renaming functionality

This commit is contained in:
Jaime Idolpx 2026-06-08 12:31:31 -04:00
parent e902cc4d4a
commit 841cf2f73d

View File

@ -676,7 +676,8 @@ export default function MediaManager({ initialPath = '/', rootPath, title, confi
try { try {
await movePath(renameEntry.path, dest); await movePath(renameEntry.path, dest);
toast.success(`Renamed to "${newName}"`); toast.success(`Renamed to "${newName}"`);
void load(path); if (renameEntry.path === path) navigateTo(dest);
else void load(path);
} catch (e: any) { toast.error(`Rename failed: ${e?.message ?? e}`); } } catch (e: any) { toast.error(`Rename failed: ${e?.message ?? e}`); }
finally { setRenameEntry(null); } finally { setRenameEntry(null); }
}; };
@ -883,17 +884,37 @@ export default function MediaManager({ initialPath = '/', rootPath, title, confi
<button onClick={() => navigateTo(rootPath ?? '/')} className="p-1 rounded hover:bg-neutral-100 flex-shrink-0" title="Root"> <button onClick={() => navigateTo(rootPath ?? '/')} className="p-1 rounded hover:bg-neutral-100 flex-shrink-0" title="Root">
<Home className="w-4 h-4" /> <Home className="w-4 h-4" />
</button> </button>
{pathParts.map((part, i) => ( {pathParts.map((part, i) => {
const isLast = i === pathParts.length - 1;
const isEditing = isLast && renameEntry !== null && renameEntry.path === path;
return (
<div key={i} className="flex items-center gap-1 flex-shrink-0"> <div key={i} className="flex items-center gap-1 flex-shrink-0">
<ChevronRight className="w-3 h-3 text-neutral-400" /> <ChevronRight className="w-3 h-3 text-neutral-400" />
{isEditing ? (
<input
ref={renameInputRef}
value={renameName}
onChange={e => setRenameName(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter') void commitRename();
if (e.key === 'Escape') setRenameEntry(null);
}}
onBlur={() => void commitRename()}
onFocus={e => e.currentTarget.select()}
className="px-1 py-0 border border-blue-400 rounded text-sm max-w-[120px] min-w-[60px]"
autoFocus
/>
) : (
<button <button
onClick={() => navigateTo('/' + pathParts.slice(0, i + 1).join('/'))} onClick={() => navigateTo('/' + pathParts.slice(0, i + 1).join('/'))}
className="hover:text-blue-600 hover:underline max-w-[120px] truncate" className="hover:text-blue-600 hover:underline max-w-[120px] truncate"
> >
{part} {part}
</button> </button>
)}
</div> </div>
))} );
})}
</div> </div>
{deviceBaseUrl && ( {deviceBaseUrl && (
<div className="text-xs text-neutral-400 mt-0.5 truncate">Base: {deviceBaseUrl}</div> <div className="text-xs text-neutral-400 mt-0.5 truncate">Base: {deviceBaseUrl}</div>