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>
+    <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) => (
-          <div key={t.id}>{t.title}</div>
+            <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>
-    </div>
+      )}
+    </section>
   );
 }

apps/web/vite.config.ts

@@ -5,8 +5,19 @@ import { defineConfig } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
-  plugins: [tsconfigPaths(), tailwindcss(), tanstackStart(), viteReact()],
+  plugins: [
+    tsconfigPaths(),
+    tailwindcss(),
+    tanstackStart({
+      server: { entry: "./entry-server.ts" },
+    }),
+    viteReact(),
+  ],
   server: {
     port: 3001,
+    headers: {
+      "Cross-Origin-Embedder-Policy": "credentialless",
+      "Cross-Origin-Opener-Policy": "same-origin",
+    },
   },
 });