idolpx/meatloaf-config
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jaime Idolpx 2026-06-08 12:31:31 -04:00
parent e902cc4d4a
commit 841cf2f73d
1 changed files with 33 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/components/MediaManager.tsx
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) => {
<div key={i} className="flex items-center gap-1 flex-shrink-0"> const isLast = i === pathParts.length - 1;
<ChevronRight className="w-3 h-3 text-neutral-400" /> const isEditing = isLast && renameEntry !== null && renameEntry.path === path;
<button return (
onClick={() => navigateTo('/' + pathParts.slice(0, i + 1).join('/'))} <div key={i} className="flex items-center gap-1 flex-shrink-0">
className="hover:text-blue-600 hover:underline max-w-[120px] truncate" <ChevronRight className="w-3 h-3 text-neutral-400" />
> {isEditing ? (
{part} <input
</button> ref={renameInputRef}
</div> 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
onClick={() => navigateTo('/' + pathParts.slice(0, i + 1).join('/'))}
className="hover:text-blue-600 hover:underline max-w-[120px] truncate"
>
{part}
</button>
)}
</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>