56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "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 type { LibraryItemFull } from "@/lib/types";
|
|
|
|
const PAGE_SIZE = 50;
|
|
|
|
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 { 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;
|
|
});
|
|
}
|
|
|
|
const selectedItems = data?.items.filter(i => selected.has(i.id)) ?? [];
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col">
|
|
<SyncStatusBar />
|
|
<div className="flex flex-1">
|
|
<LibrarySidebar filter={filter} onFilterChange={handleFilterChange} />
|
|
<LibraryGrid
|
|
items={data?.items ?? []}
|
|
total={data?.total ?? 0}
|
|
page={page}
|
|
pageSize={PAGE_SIZE}
|
|
isLoading={isLoading}
|
|
selected={selected}
|
|
onToggleSelect={toggleSelect}
|
|
onPageChange={setPage}
|
|
selectedItems={selectedItems}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|