add timeline header

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

@@ -1,9 +1,12 @@
 import { useCallback, useMemo, useState } from "react";
-import { createFileRoute } from "@tanstack/react-router";
+import { Link, createFileRoute } from "@tanstack/react-router";
 import { useSuspenseQuery } from "@tanstack/react-query";
+import { ArrowLeft, Moon, Plus, Sun } from "lucide-react";
 import type { FlutterEvent, FlutterTimelineState } from "@/lib/flutter-bridge";
 import { timelineQueryOptions } from "@/functions/get-timeline";
 import { FlutterView } from "@/components/flutter-view";
+import { Button } from "@/components/ui/button";
+import UserMenu from "@/components/user-menu";
 import { useEntryMovedMutation } from "@/hooks/use-entry-moved-mutation";
 import { useEntryResizedMutation } from "@/hooks/use-entry-resized-mutation";
 import { useTheme } from "@/lib/theme";
@@ -24,7 +27,7 @@ function RouteComponent() {
   const [flutterHeight, setFlutterHeight] = useState<number | undefined>();
   const entryMoved = useEntryMovedMutation(timelineId);
   const entryResized = useEntryResizedMutation(timelineId);
-  const { theme } = useTheme();
+  const { theme, toggleTheme } = useTheme();
 
   const flutterState: FlutterTimelineState = useMemo(
     () => ({
@@ -76,9 +79,40 @@ function RouteComponent() {
 
   return (
     <div className="flex flex-col">
-      <h1 className="text-3xl font-serif font-bold mb-6 mx-4">
-        {timeline.title}
-      </h1>
+      <div className="flex flex-row items-center justify-between px-2 py-1">
+        <div className="flex items-center gap-2">
+          <Link
+            to="/timelines"
+            className="text-muted-foreground hover:text-foreground inline-flex size-8 items-center justify-center rounded-md transition-colors"
+            aria-label="Back to timelines"
+          >
+            <ArrowLeft className="size-4" />
+          </Link>
+          <h1 className="text-lg font-serif font-bold">{timeline.title}</h1>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="outline" size="sm">
+            <Plus className="size-4" />
+            Add Item
+          </Button>
+          <button
+            type="button"
+            onClick={toggleTheme}
+            className="text-muted-foreground hover:text-foreground inline-flex size-8 items-center justify-center rounded-md transition-colors"
+            aria-label={
+              theme === "dark" ? "Switch to light mode" : "Switch to dark mode"
+            }
+          >
+            {theme === "dark" ? (
+              <Sun className="size-4" />
+            ) : (
+              <Moon className="size-4" />
+            )}
+          </button>
+          <UserMenu />
+        </div>
+      </div>
+      <hr />
 
       <FlutterView
         state={flutterState}