feat(frontend): library page, components, and schedule/add-to-block dialogs (tasks 11-14)

k-tv-frontend/app/(main)/library/page.tsx

@@ -0,0 +1,55 @@
+"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>
+  );
+}