add basic timeline view

apps/web/src/routes/timeline.$timelineId.tsx

@@ -1,9 +1,64 @@
 import { createFileRoute } from "@tanstack/react-router";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { timelineQueryOptions } from "@/functions/get-timeline";
+import GroupFormDrawer from "@/components/group-form-drawer";
+import ItemFormDrawer from "@/components/item-form-drawer";
 
 export const Route = createFileRoute("/timeline/$timelineId")({
+  loader: async ({ context, params }) => {
+    await context.queryClient.ensureQueryData(
+      timelineQueryOptions(params.timelineId)
+    );
+  },
   component: RouteComponent,
 });
 
 function RouteComponent() {
-  return <div>Timeline detail</div>;
+  const { timelineId } = Route.useParams();
+  const timelineQuery = useSuspenseQuery(timelineQueryOptions(timelineId));
+  const timeline = timelineQuery.data;
+
+  return (
+    <div className="container mx-auto max-w-3xl px-4 py-6 space-y-6">
+      <h1 className="text-3xl font-serif font-bold">{timeline.title}</h1>
+
+      {timeline.groups.length === 0 && (
+        <p className="text-muted-foreground">
+          No groups yet. Add a group to start building your timeline.
+        </p>
+      )}
+
+      <div className="space-y-6">
+        {timeline.groups.map((group) => (
+          <div key={group.id} className="border border-border rounded-lg p-4 space-y-3">
+            <div className="flex items-center justify-between">
+              <h2 className="text-xl font-semibold">{group.title}</h2>
+              <ItemFormDrawer timelineGroupId={group.id} timelineId={timelineId} />
+            </div>
+
+            {group.items.length === 0 && (
+              <p className="text-sm text-muted-foreground">No items in this group yet.</p>
+            )}
+
+            <ul className="space-y-2">
+              {group.items.map((item) => (
+                <li key={item.id} className="border border-border rounded p-3">
+                  <div className="font-medium">{item.title}</div>
+                  {item.description && (
+                    <p className="text-sm text-muted-foreground">{item.description}</p>
+                  )}
+                  <p className="text-xs text-muted-foreground mt-1">
+                    {new Date(item.start).toLocaleDateString()}
+                    {item.end && ` — ${new Date(item.end).toLocaleDateString()}`}
+                  </p>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+
+      <GroupFormDrawer timelineId={timelineId} />
+    </div>
+  );
 }