nicer list

apps/web/src/entry-server.ts

@@ -0,0 +1,18 @@
+import {
+  createStartHandler,
+  defaultStreamHandler,
+} from "@tanstack/react-start/server";
+
+const handler = createStartHandler(defaultStreamHandler);
+
+export default {
+  async fetch(request: Request): Promise<Response> {
+    const response = await handler(request);
+    response.headers.set(
+      "Cross-Origin-Embedder-Policy",
+      "credentialless",
+    );
+    response.headers.set("Cross-Origin-Opener-Policy", "same-origin");
+    return response;
+  },
+};

apps/web/src/routes/_default.timelines.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, Link } from "@tanstack/react-router";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { timelinesQueryOptions } from "@/functions/get-timelines";
 
@@ -12,13 +12,27 @@ export const Route = createFileRoute("/_default/timelines")({
 function RouteComponent() {
   const timelinesQuery = useSuspenseQuery(timelinesQueryOptions());
   return (
-    <div>
-      <h1>List of timelines</h1>
-      <div>
-        {timelinesQuery.data.map((t) => (
-          <div key={t.id}>{t.title}</div>
-        ))}
-      </div>
-    </div>
+    <section className="container mx-auto max-w-3xl px-4 py-2">
+      <h1 className="text-4xl font-serif font-bold mb-6">Timelines</h1>
+      {timelinesQuery.data.length === 0 ? (
+        <p className="text-muted-foreground">No timelines yet.</p>
+      ) : (
+        <div className="space-y-3">
+          {timelinesQuery.data.map((t) => (
+            <Link
+              key={t.id}
+              to="/timeline/$timelineId"
+              params={{ timelineId: t.id }}
+              className="block border border-border rounded-lg p-4 hover:bg-accent transition-colors"
+            >
+              <h2 className="font-serif font-bold">{t.title}</h2>
+              <p className="text-sm text-muted-foreground">
+                {new Date(t.createdAt).toLocaleDateString()}
+              </p>
+            </Link>
+          ))}
+        </div>
+      )}
+    </section>
   );
 }