135 lines
4.1 KiB
TypeScript
135 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { LayoutGrid, FolderOpen } from "lucide-react";
|
|
import { useLibrarySearch, type LibrarySearchParams } from "@/hooks/use-library-search";
|
|
import { LibrarySidebar } from "./components/library-sidebar";
|
|
import { LibraryGrid } from "./components/library-grid";
|
|
import { SyncStatusBar } from "./components/sync-status-bar";
|
|
import { Button } from "@/components/ui/button";
|
|
import type { LibraryItemFull, ShowSummary } from "@/lib/types";
|
|
|
|
const PAGE_SIZE = 50;
|
|
|
|
type Drilldown = null | { series: string } | { series: string; season: number };
|
|
|
|
export default function LibraryPage() {
|
|
const [filter, setFilter] = useState<LibrarySearchParams>({ limit: PAGE_SIZE, offset: 0 });
|
|
const [selected, setSelected] = useState<Set<string>>(new Set());
|
|
const [page, setPage] = useState(0);
|
|
const [viewMode, setViewMode] = useState<"grouped" | "flat">("grouped");
|
|
const [drilldown, setDrilldown] = useState<Drilldown>(null);
|
|
const [selectedShowMap, setSelectedShowMap] = useState<Map<string, ShowSummary>>(new Map());
|
|
|
|
const { data, isLoading } = useLibrarySearch({ ...filter, offset: page * PAGE_SIZE });
|
|
|
|
function handleFilterChange(next: Partial<LibrarySearchParams>) {
|
|
setFilter(f => ({ ...f, ...next, offset: 0 }));
|
|
setPage(0);
|
|
setSelected(new Set());
|
|
}
|
|
|
|
function toggleSelect(id: string) {
|
|
setSelected(prev => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) next.delete(id);
|
|
else next.add(id);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function toggleSelectShow(show: ShowSummary) {
|
|
setSelectedShowMap(prev => {
|
|
const next = new Map(prev);
|
|
if (next.has(show.series_name)) next.delete(show.series_name);
|
|
else next.set(show.series_name, show);
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function handleDrilldown(next: Drilldown) {
|
|
setDrilldown(next);
|
|
setSelected(new Set());
|
|
setSelectedShowMap(new Map());
|
|
setPage(0);
|
|
}
|
|
|
|
function handleBack() {
|
|
if (!drilldown) return;
|
|
if ("season" in drilldown) {
|
|
// From episode level → go back to season level
|
|
setDrilldown({ series: drilldown.series });
|
|
} else {
|
|
// From season level → go back to root
|
|
setDrilldown(null);
|
|
}
|
|
setSelected(new Set());
|
|
setPage(0);
|
|
}
|
|
|
|
function handleViewModeToggle() {
|
|
const next = viewMode === "grouped" ? "flat" : "grouped";
|
|
setViewMode(next);
|
|
if (next === "flat") setDrilldown(null);
|
|
setSelected(new Set());
|
|
setSelectedShowMap(new Map());
|
|
}
|
|
|
|
const selectedItems = data?.items.filter(i => selected.has(i.id)) ?? [];
|
|
const selectedShows = Array.from(selectedShowMap.values());
|
|
const selectedShowNames = new Set(selectedShowMap.keys());
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col">
|
|
<SyncStatusBar />
|
|
<div className="flex items-center justify-end gap-2 border-b border-zinc-800 bg-zinc-950 px-4 py-2">
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="gap-1.5 text-xs"
|
|
onClick={handleViewModeToggle}
|
|
>
|
|
{viewMode === "grouped" ? (
|
|
<>
|
|
<LayoutGrid className="h-3.5 w-3.5" />
|
|
Flat view
|
|
</>
|
|
) : (
|
|
<>
|
|
<FolderOpen className="h-3.5 w-3.5" />
|
|
Grouped view
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
<div className="flex flex-1">
|
|
<LibrarySidebar
|
|
filter={filter}
|
|
onFilterChange={handleFilterChange}
|
|
viewMode={viewMode}
|
|
drilldown={drilldown}
|
|
onBack={handleBack}
|
|
/>
|
|
<LibraryGrid
|
|
items={data?.items ?? []}
|
|
total={data?.total ?? 0}
|
|
page={page}
|
|
pageSize={PAGE_SIZE}
|
|
isLoading={isLoading}
|
|
selected={selected}
|
|
onToggleSelect={toggleSelect}
|
|
onPageChange={setPage}
|
|
selectedItems={selectedItems}
|
|
viewMode={viewMode}
|
|
drilldown={drilldown}
|
|
onDrilldown={handleDrilldown}
|
|
filter={filter}
|
|
selectedShows={selectedShows}
|
|
selectedShowNames={selectedShowNames}
|
|
onToggleSelectShow={toggleSelectShow}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|