From 009e1ad795f3295ecfd66f87691e43516460714b Mon Sep 17 00:00:00 2001
From: Collin Barrett <6483057+collinbarrett@users.noreply.github.com>
Date: Tue, 17 Jun 2025 17:47:46 -0500
Subject: [PATCH] feat(ui): stub WIP list table

---
 web/src/app/page.tsx                    |  17 +++-
 web/src/components/filterlist-table.tsx | 105 ++++++++++++++++++++++++
 2 files changed, 120 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/filterlist-table.tsx

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index c632b7816..ce15517c9 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -1,3 +1,16 @@
-export default function Home() {
-  return <main className="p-8 gap-16 sm:p-20"></main>;
+import { FilterlistTable, Filterlist } from "@/components/filterlist-table";
+
+const getFilterlists = async (): Promise<Filterlist[]> => {
+  const res = await fetch("https://api.filterlists.com/lists");
+  if (!res.ok) throw new Error("Failed to fetch lists");
+  return res.json();
+};
+
+export default async function Home() {
+  const filterlists = await getFilterlists();
+  return (
+    <main className="pt-4 p-8 gap-16 sm:p-20 sm:pt-8">
+      <FilterlistTable filterlists={filterlists} />
+    </main>
+  );
 }
diff --git a/web/src/components/filterlist-table.tsx b/web/src/components/filterlist-table.tsx
new file mode 100644
index 000000000..0e002ac69
--- /dev/null
+++ b/web/src/components/filterlist-table.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+import {
+  ColumnDef,
+  useReactTable,
+  getCoreRowModel,
+  flexRender,
+} from "@tanstack/react-table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+
+export type Filterlist = {
+  id: number;
+  name: string;
+};
+
+interface FilterlistTableProps {
+  filterlists: Filterlist[];
+}
+
+const columns: ColumnDef<Filterlist>[] = [
+  {
+    accessorKey: "name",
+    header: "Name",
+    cell: (info) => info.getValue(),
+  },
+];
+
+export function FilterlistTable({ filterlists }: FilterlistTableProps) {
+  const [page, setPage] = React.useState(0);
+  const pageSize = 10;
+  const pageCount = Math.ceil(filterlists.length / pageSize);
+
+  const pagedData = React.useMemo(
+    () => filterlists.slice(page * pageSize, (page + 1) * pageSize),
+    [filterlists, page, pageSize],
+  );
+
+  const table = useReactTable({
+    data: pagedData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <div className="space-y-2">
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id}>
+                  {flexRender(
+                    header.column.columnDef.header,
+                    header.getContext(),
+                  )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <div className="flex items-center justify-between gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setPage((p) => Math.max(0, p - 1))}
+          disabled={page === 0}
+        >
+          Previous
+        </Button>
+        <span className="text-sm">
+          Page {page + 1} of {pageCount}
+        </span>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}
+          disabled={page >= pageCount - 1}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}