feat: titles page

modules/frontend/src/components/ListView/ListView.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+interface ListViewProps<TItem> {
+  hook: ReturnType<typeof import("./useListView.tsx").useListView<TItem>>;
+  renderHorizontal: (item: TItem) => React.ReactNode;
+  renderSquare: (item: TItem) => React.ReactNode;
+}
+
+export function ListView<TItem>({
+  hook,
+  renderHorizontal,
+  renderSquare
+}: ListViewProps<TItem>) {
+  const { items, search, setSearch, viewMode, setViewMode, loadMore, hasMore } = hook;
+
+  return (
+    <div>
+      {/* Search + Layout Switcher */}
+      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
+        <input
+          placeholder="Search..."
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+        />
+
+        <button onClick={() => setViewMode("horizontal")}>Horizontal</button>
+        <button onClick={() => setViewMode("square")}>Square</button>
+      </div>
+
+      {/* Items */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: viewMode === "square" ? "repeat(auto-fill, 160px)" : "1fr",
+          gap: 12
+        }}
+      >
+        {items.map(item =>
+          viewMode === "horizontal"
+            ? renderHorizontal(item)
+            : renderSquare(item)
+        )}
+      </div>
+
+      {hasMore && (
+        <button onClick={loadMore} style={{ marginTop: 16 }}>
+          Load More
+        </button>
+      )}
+    </div>
+  );
+}

modules/frontend/src/components/ListView/useListView.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import type { FetchFunction } from "../../types/list";
+
+export function useListView<TItem>(fetchFn: FetchFunction<TItem>) {
+  const [items, setItems] = useState<TItem[]>([]);
+  const [cursor, setCursor] = useState<string | undefined>();
+  const [search, setSearch] = useState("");
+  const [viewMode, setViewMode] = useState<"horizontal" | "square">("horizontal");
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    loadItems(true);
+  }, [search]);
+
+  const loadItems = async (reset = false) => {
+    setIsLoading(true);
+    const result = await fetchFn({
+      search,
+      cursor: reset ? undefined : cursor,
+    });
+
+    setItems(prev => reset ? result.items : [...prev, ...result.items]);
+    setCursor(result.nextCursor);
+    setIsLoading(false);
+  };
+
+  return {
+    items,
+    search,
+    setSearch,
+    viewMode,
+    setViewMode,
+    loadMore: () => loadItems(),
+    hasMore: Boolean(cursor),
+    isLoading,
+  };
+}