LyAhn
74a4134f2f
Replace native add-folder dialogs with an in-app folder picker that supports collecting folders from multiple locations before adding them together. Add backend directory listing and batch add commands with duplicate skipping, plus store actions and a themed picker UI with a dedicated folders-to-add panel.
62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
import { useGalleryStore } from "../../store";
|
|
import { FakeTile } from "./fakes";
|
|
|
|
export function StepAddLibrary() {
|
|
const folders = useGalleryStore((s) => s.folders);
|
|
const setFolderPickerOpen = useGalleryStore((s) => s.setFolderPickerOpen);
|
|
|
|
const handlePick = () => {
|
|
setFolderPickerOpen(true);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<p className="text-sm leading-relaxed text-gray-300">
|
|
A library is just a folder on disk — Phokus watches it and keeps itself in sync as files are
|
|
added, renamed, or removed. Nothing is moved or copied.
|
|
</p>
|
|
|
|
<div className="mt-5 flex items-center justify-between gap-6 border-y border-white/[0.05] py-4 light-theme:border-gray-300/70">
|
|
<div className="min-w-0">
|
|
{folders.length > 0 ? (
|
|
<>
|
|
<p className="text-sm text-white">
|
|
{folders.length === 1 ? `“${folders[0].name}” added` : `${folders.length} folders in your library`}
|
|
</p>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
Indexing runs in the background — you can add more folders from the sidebar any time.
|
|
</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="text-sm text-white">Add your first folder</p>
|
|
<p className="mt-1 text-xs text-gray-500">
|
|
Pick somewhere with photos or videos. You can add more later from the sidebar.
|
|
</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
<button
|
|
className="shrink-0 rounded-md border border-emerald-400/35 bg-emerald-500/15 px-3 py-1.5 text-xs text-emerald-200 transition-colors hover:bg-emerald-500/25 disabled:cursor-not-allowed disabled:opacity-45 light-theme:border-emerald-600/50 light-theme:bg-emerald-100 light-theme:text-emerald-700 light-theme:hover:bg-emerald-200"
|
|
onClick={handlePick}
|
|
>
|
|
{folders.length > 0 ? "Add another folder" : "Choose a folder"}
|
|
</button>
|
|
</div>
|
|
|
|
<p className="mt-5 text-xs leading-relaxed text-gray-500">
|
|
As indexing runs, the gallery fills in roughly like this — tiles appear immediately and sharpen
|
|
as thumbnails are generated:
|
|
</p>
|
|
<div className="media-dark-surface mt-3 grid grid-cols-6 gap-1.5">
|
|
<FakeTile index={0} />
|
|
<FakeTile index={1} favorite />
|
|
<FakeTile index={2} duration="0:42" />
|
|
<FakeTile index={3} rating={4} />
|
|
<FakeTile index={4} loaded={false} />
|
|
<FakeTile index={5} loaded={false} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|