LyAhn
3684b98d55
- Fix chevron tooltip: was "Open folder" in both branches; now shows "No subfolders" when the entry has no children (consistent with the existing opacity-45 visual cue on the same chevron icon) - Fix Unix breadcrumb root label: was always "Home" even for non-home paths like /mnt/data — now labelled "/" which is always accurate - Fix partial-failure staging: on a mixed add result, successfully-added entries are now removed from the staging panel so only genuinely failed folders remain for the user to retry (index-pairing is safe because the backend returns results in input order via a preserved .map())
450 lines
19 KiB
TypeScript
450 lines
19 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
import { DirEntry, DirListing, FolderAddResult, useGalleryStore } from "../store";
|
|
|
|
function normalizePath(path: string): string {
|
|
return path.replace(/\\/g, "/").replace(/\/+$/, "").toLowerCase();
|
|
}
|
|
|
|
function folderName(path: string): string {
|
|
const trimmed = path.replace(/[\\/]+$/, "");
|
|
const parts = trimmed.split(/[\\/]+/).filter(Boolean);
|
|
return parts.length > 0 ? parts[parts.length - 1] : path;
|
|
}
|
|
|
|
function buildBreadcrumbs(path: string | null): { label: string; path: string | null }[] {
|
|
if (!path) return [{ label: "This PC / Home", path: null }];
|
|
|
|
const separator = path.includes("\\") ? "\\" : "/";
|
|
const normalized = path.replace(/[\\/]+$/, "");
|
|
const windowsDrive = normalized.match(/^[A-Za-z]:/);
|
|
|
|
if (windowsDrive) {
|
|
const drive = windowsDrive[0] + "\\";
|
|
const rest = normalized.slice(2).split(/[\\/]+/).filter(Boolean);
|
|
let current = drive;
|
|
return [
|
|
{ label: "This PC", path: null },
|
|
{ label: drive, path: drive },
|
|
...rest.map((part) => {
|
|
current = current.endsWith("\\") ? `${current}${part}` : `${current}\\${part}`;
|
|
return { label: part, path: current };
|
|
}),
|
|
];
|
|
}
|
|
|
|
const parts = normalized.split(/[\\/]+/).filter(Boolean);
|
|
let current = separator === "/" ? "" : "";
|
|
return [
|
|
{ label: "/", path: null },
|
|
...parts.map((part) => {
|
|
current = `${current}/${part}`;
|
|
return { label: part, path: current };
|
|
}),
|
|
];
|
|
}
|
|
|
|
function StatusLine({ results }: { results: FolderAddResult[] | null }) {
|
|
if (!results) return null;
|
|
const added = results.filter((result) => result.status === "added").length;
|
|
const skipped = results.filter((result) => result.status === "skipped").length;
|
|
const failed = results.filter((result) => result.status === "error").length;
|
|
return (
|
|
<p className="text-xs text-gray-500 light-theme:text-gray-600">
|
|
Added {added}, skipped {skipped}, failed {failed}.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
function FolderRow({
|
|
entry,
|
|
selected,
|
|
alreadyAdded,
|
|
onToggle,
|
|
onNavigate,
|
|
}: {
|
|
entry: DirEntry;
|
|
selected: boolean;
|
|
alreadyAdded: boolean;
|
|
onToggle: () => void;
|
|
onNavigate: () => void;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`group flex h-11 items-center gap-3 rounded-md border px-3 transition-colors ${
|
|
alreadyAdded
|
|
? "border-transparent bg-white/[0.025] text-gray-600 light-theme:bg-gray-900 light-theme:text-gray-500"
|
|
: selected
|
|
? "border-white/15 bg-white/[0.085] text-white shadow-[inset_0_0_0_1px_rgb(255_255_255_/_0.035)] light-theme:border-gray-700/45 light-theme:bg-gray-800/55 light-theme:text-white"
|
|
: "border-transparent text-gray-300 hover:bg-white/[0.055] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-900 light-theme:hover:text-white"
|
|
}`}
|
|
>
|
|
<button
|
|
type="button"
|
|
className={`grid h-5 w-5 shrink-0 place-items-center rounded border transition-colors ${
|
|
selected
|
|
? "border-white/30 bg-gray-200 text-gray-950 light-theme:border-gray-700/55 light-theme:bg-gray-700 light-theme:text-white"
|
|
: "border-white/15 bg-white/[0.035] text-transparent hover:border-white/30 light-theme:border-gray-700/50 light-theme:bg-gray-950"
|
|
} ${alreadyAdded ? "cursor-not-allowed opacity-40" : ""}`}
|
|
onClick={onToggle}
|
|
disabled={alreadyAdded}
|
|
aria-label={selected ? `Remove ${entry.name} from folders to add` : `Choose ${entry.name}`}
|
|
>
|
|
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
type="button"
|
|
className="flex min-w-0 flex-1 items-center gap-2 text-left"
|
|
onClick={onNavigate}
|
|
title={entry.path}
|
|
>
|
|
<svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
|
|
</svg>
|
|
<span className="truncate text-sm">{entry.name}</span>
|
|
</button>
|
|
|
|
{alreadyAdded ? (
|
|
<span className="rounded-md border border-white/10 bg-white/[0.04] px-2 py-0.5 text-[11px] text-gray-500 light-theme:border-gray-700/40 light-theme:bg-gray-950">
|
|
Added
|
|
</span>
|
|
) : null}
|
|
|
|
<button
|
|
type="button"
|
|
className="rounded-md p-1 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
|
|
onClick={onNavigate}
|
|
title={entry.has_children ? "Open folder" : "No subfolders"}
|
|
>
|
|
<svg className={`h-4 w-4 ${entry.has_children ? "" : "opacity-45"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StagedFoldersPanel({
|
|
stagedPaths,
|
|
onRemove,
|
|
onClear,
|
|
}: {
|
|
stagedPaths: string[];
|
|
onRemove: (path: string) => void;
|
|
onClear: () => void;
|
|
}) {
|
|
return (
|
|
<aside className="flex min-h-0 w-full flex-col border-t border-white/[0.07] bg-white/[0.018] light-theme:border-gray-300/70 light-theme:bg-gray-900/35 lg:w-80 lg:border-l lg:border-t-0">
|
|
<div className="flex items-center justify-between gap-3 border-b border-white/[0.07] px-5 py-4 light-theme:border-gray-300/70">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-gray-500">
|
|
Folders to add ({stagedPaths.length})
|
|
</p>
|
|
{stagedPaths.length > 0 ? (
|
|
<button
|
|
type="button"
|
|
className="rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white"
|
|
onClick={onClear}
|
|
>
|
|
Clear all
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="min-h-0 flex-1 overflow-y-auto p-3">
|
|
{stagedPaths.length === 0 ? (
|
|
<div className="flex h-full min-h-40 flex-col items-center justify-center rounded-md border border-dashed border-white/[0.08] px-5 text-center light-theme:border-gray-700/35">
|
|
<p className="text-sm text-gray-500">No folders selected.</p>
|
|
<p className="mt-1 max-w-52 text-xs leading-relaxed text-gray-600 light-theme:text-gray-500">
|
|
Choose folders on the left and they will collect here.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{stagedPaths.map((path) => (
|
|
<div
|
|
key={path}
|
|
className="group flex min-h-12 items-center gap-2 rounded-md border border-white/[0.07] bg-white/[0.045] px-3 py-2 text-gray-200 transition-colors hover:border-white/15 hover:bg-white/[0.07] light-theme:border-gray-700/40 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
|
|
title={path}
|
|
>
|
|
<svg className="h-4 w-4 shrink-0 text-amber-300/90" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3 6.5A2.5 2.5 0 015.5 4h4.1l2 2H18.5A2.5 2.5 0 0121 8.5v9A2.5 2.5 0 0118.5 20h-13A2.5 2.5 0 013 17.5v-11z" />
|
|
</svg>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{folderName(path)}</p>
|
|
<p className="mt-0.5 truncate text-[11px] text-gray-600 light-theme:text-gray-500">{path}</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="rounded-md p-1 text-gray-500 opacity-80 transition-colors hover:bg-white/[0.08] hover:text-white group-hover:opacity-100 light-theme:hover:bg-gray-700"
|
|
onClick={() => onRemove(path)}
|
|
aria-label={`Remove ${path} from folders to add`}
|
|
title="Remove from folders to add"
|
|
>
|
|
<svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
export function FolderPickerModal() {
|
|
const folderPickerOpen = useGalleryStore((state) => state.folderPickerOpen);
|
|
const setFolderPickerOpen = useGalleryStore((state) => state.setFolderPickerOpen);
|
|
const folders = useGalleryStore((state) => state.folders);
|
|
const listDirectories = useGalleryStore((state) => state.listDirectories);
|
|
const addFolders = useGalleryStore((state) => state.addFolders);
|
|
|
|
const [listing, setListing] = useState<DirListing | null>(null);
|
|
const [currentPath, setCurrentPath] = useState<string | null>(null);
|
|
const [stagedPaths, setStagedPaths] = useState<string[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [adding, setAdding] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [results, setResults] = useState<FolderAddResult[] | null>(null);
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
const libraryPaths = useMemo(() => new Set(folders.map((folder) => normalizePath(folder.path))), [folders]);
|
|
const stagedSet = useMemo(() => new Set(stagedPaths.map(normalizePath)), [stagedPaths]);
|
|
const breadcrumbs = useMemo(() => buildBreadcrumbs(listing?.current ?? null), [listing?.current]);
|
|
|
|
const virtualizer = useVirtualizer({
|
|
count: listing?.entries.length ?? 0,
|
|
getScrollElement: () => scrollRef.current,
|
|
estimateSize: () => 48,
|
|
overscan: 8,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (!folderPickerOpen) return;
|
|
let cancelled = false;
|
|
setLoading(true);
|
|
setError(null);
|
|
void listDirectories(currentPath)
|
|
.then((nextListing) => {
|
|
if (cancelled) return;
|
|
setListing(nextListing);
|
|
scrollRef.current?.scrollTo({ top: 0, left: 0 });
|
|
})
|
|
.catch((loadError) => {
|
|
if (cancelled) return;
|
|
setListing({ current: currentPath, parent: null, entries: [] });
|
|
setError(loadError instanceof Error ? loadError.message : String(loadError));
|
|
})
|
|
.finally(() => {
|
|
if (!cancelled) setLoading(false);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [currentPath, folderPickerOpen, listDirectories]);
|
|
|
|
useEffect(() => {
|
|
if (!folderPickerOpen) return;
|
|
const handleKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === "Escape") setFolderPickerOpen(false);
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [folderPickerOpen, setFolderPickerOpen]);
|
|
|
|
useEffect(() => {
|
|
if (folderPickerOpen) return;
|
|
setCurrentPath(null);
|
|
setListing(null);
|
|
setStagedPaths([]);
|
|
setError(null);
|
|
setResults(null);
|
|
setAdding(false);
|
|
}, [folderPickerOpen]);
|
|
|
|
if (!folderPickerOpen) return null;
|
|
|
|
const entries = listing?.entries ?? [];
|
|
|
|
const togglePath = (path: string) => {
|
|
const normalized = normalizePath(path);
|
|
if (libraryPaths.has(normalized)) return;
|
|
setResults(null);
|
|
setStagedPaths((current) => {
|
|
const exists = current.some((staged) => normalizePath(staged) === normalized);
|
|
return exists ? current.filter((staged) => normalizePath(staged) !== normalized) : [...current, path];
|
|
});
|
|
};
|
|
|
|
const removeStagedPath = (path: string) => {
|
|
const normalized = normalizePath(path);
|
|
setResults(null);
|
|
setStagedPaths((current) => current.filter((staged) => normalizePath(staged) !== normalized));
|
|
};
|
|
|
|
const clearStagedPaths = () => {
|
|
setResults(null);
|
|
setStagedPaths([]);
|
|
};
|
|
|
|
const confirmAdd = async () => {
|
|
if (stagedPaths.length === 0 || adding) return;
|
|
setAdding(true);
|
|
setError(null);
|
|
try {
|
|
const addResults = await addFolders(stagedPaths);
|
|
const failed = addResults.filter((result) => result.status === "error");
|
|
setResults(addResults);
|
|
if (failed.length > 0) {
|
|
setStagedPaths(stagedPaths.filter((_, i) => addResults[i]?.status === "error"));
|
|
setError(failed.map((failure) => failure.data).join("; "));
|
|
return;
|
|
}
|
|
setFolderPickerOpen(false);
|
|
} catch (addError) {
|
|
setError(addError instanceof Error ? addError.message : String(addError));
|
|
} finally {
|
|
setAdding(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-[80] flex items-center justify-center bg-black/65 px-6 backdrop-blur-sm"
|
|
onClick={() => setFolderPickerOpen(false)}
|
|
>
|
|
<div
|
|
className="relative flex h-[min(82vh,760px)] w-[min(90vw,1180px)] flex-col overflow-hidden rounded-lg border border-white/10 bg-gray-950 shadow-2xl shadow-black/60 light-theme:border-gray-300/70"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<header className="border-b border-white/[0.07] px-5 py-4 light-theme:border-gray-200">
|
|
<div className="flex items-start justify-between gap-6">
|
|
<div className="min-w-0">
|
|
<p className="text-base font-semibold text-white">Add media folders</p>
|
|
<p className="mt-1 text-xs text-gray-500 light-theme:text-gray-600">Choose folders from any location, then add them together.</p>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:hover:bg-gray-900 light-theme:hover:text-white"
|
|
onClick={() => setFolderPickerOpen(false)}
|
|
title="Close folder picker"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex min-h-0 flex-1 flex-col lg:flex-row">
|
|
<main className="flex min-h-0 flex-1 flex-col px-5 py-4">
|
|
<div className="mb-4 flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
className="rounded-md border border-white/10 bg-white/[0.035] px-2.5 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white disabled:cursor-not-allowed disabled:opacity-40 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
|
|
onClick={() => setCurrentPath(listing?.parent ?? null)}
|
|
disabled={!listing?.current}
|
|
>
|
|
Up
|
|
</button>
|
|
<nav className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden rounded-md border border-white/10 bg-white/[0.025] px-2 py-1.5 light-theme:border-gray-300/70 light-theme:bg-gray-900">
|
|
{breadcrumbs.map((crumb, index) => (
|
|
<span key={`${crumb.path ?? "root"}-${index}`} className="flex min-w-0 items-center gap-1">
|
|
{index > 0 ? <span className="text-gray-700 light-theme:text-gray-400">/</span> : null}
|
|
<button
|
|
type="button"
|
|
className="max-w-40 truncate rounded px-1.5 py-0.5 text-xs text-gray-400 transition-colors hover:bg-white/[0.06] hover:text-white light-theme:text-gray-500 light-theme:hover:bg-gray-800 light-theme:hover:text-white"
|
|
onClick={() => setCurrentPath(crumb.path)}
|
|
title={crumb.path ?? "Roots"}
|
|
>
|
|
{crumb.label}
|
|
</button>
|
|
</span>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{error ? (
|
|
<div className="mb-3 rounded-md border border-amber-400/25 bg-amber-500/10 px-3 py-2 text-xs text-amber-200 light-theme:border-amber-600/40 light-theme:bg-amber-100 light-theme:text-amber-800">
|
|
{error}
|
|
</div>
|
|
) : null}
|
|
|
|
<div ref={scrollRef} className="min-h-0 flex-1 overflow-auto rounded-md border border-white/[0.07] bg-white/[0.018] p-2 light-theme:border-gray-300/70 light-theme:bg-gray-900/50">
|
|
{loading ? (
|
|
<div className="flex h-full items-center justify-center text-sm text-gray-500">Loading folders...</div>
|
|
) : entries.length === 0 ? (
|
|
<div className="flex h-full items-center justify-center text-sm text-gray-500">No folders found here.</div>
|
|
) : (
|
|
<div
|
|
className="relative w-full"
|
|
style={{ height: `${virtualizer.getTotalSize()}px` }}
|
|
>
|
|
{virtualizer.getVirtualItems().map((virtualItem) => {
|
|
const entry = entries[virtualItem.index];
|
|
const normalized = normalizePath(entry.path);
|
|
return (
|
|
<div
|
|
key={virtualItem.key}
|
|
className="absolute left-0 top-0 w-full px-0.5"
|
|
style={{
|
|
height: `${virtualItem.size}px`,
|
|
transform: `translateY(${virtualItem.start}px)`,
|
|
}}
|
|
>
|
|
<FolderRow
|
|
entry={entry}
|
|
selected={stagedSet.has(normalized)}
|
|
alreadyAdded={libraryPaths.has(normalized)}
|
|
onToggle={() => togglePath(entry.path)}
|
|
onNavigate={() => setCurrentPath(entry.path)}
|
|
/>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
|
|
<StagedFoldersPanel
|
|
stagedPaths={stagedPaths}
|
|
onRemove={removeStagedPath}
|
|
onClear={clearStagedPaths}
|
|
/>
|
|
</div>
|
|
|
|
<footer className="border-t border-white/[0.07] px-5 py-4 light-theme:border-gray-200">
|
|
<div className="flex items-end justify-between gap-4">
|
|
<div className="min-w-0 flex-1">
|
|
<StatusLine results={results} />
|
|
</div>
|
|
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
className="rounded-md border border-white/10 bg-white/[0.035] px-3 py-1.5 text-xs text-gray-300 transition-colors hover:bg-white/[0.07] hover:text-white light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
|
|
onClick={() => setFolderPickerOpen(false)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="rounded-md border border-white/15 bg-white/[0.08] px-3 py-1.5 text-xs text-white transition-colors hover:bg-white/[0.12] disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-gray-700/50 light-theme:bg-gray-900 light-theme:text-white light-theme:hover:bg-gray-800"
|
|
onClick={() => void confirmAdd()}
|
|
disabled={stagedPaths.length === 0 || adding}
|
|
>
|
|
{adding ? "Adding..." : `Add ${stagedPaths.length}`}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|