initial

apps/web/src/pages/Project.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+import { Plus, MessageSquare, Trash2 } from 'lucide-react';
+import { api } from '@/api/client';
+import type { Project as ProjectType } from '@/api/types';
+import { Button } from '@/components/ui/button';
+import { useSessions } from '@/hooks/useSessions';
+
+export function Project() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { sessions, create, remove } = useSessions(id);
+  const [project, setProject] = useState<ProjectType | null>(null);
+  const [creating, setCreating] = useState(false);
+
+  useEffect(() => {
+    if (!id) return;
+    api.projects
+      .list()
+      .then((list) => setProject(list.find((p) => p.id === id) ?? null))
+      .catch(() => {});
+  }, [id]);
+
+  async function handleNew() {
+    if (!id || creating) return;
+    setCreating(true);
+    try {
+      const s = await create({});
+      navigate(`/session/${s.id}`);
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  return (
+    <div className="flex-1 flex flex-col">
+      <header className="border-b px-6 py-3 flex items-center justify-between">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight">
+            {project?.name ?? '…'}
+          </h1>
+          <div className="text-xs text-muted-foreground font-mono">
+            {project?.path}
+          </div>
+        </div>
+        <Button onClick={handleNew} disabled={creating}>
+          <Plus />
+          New session
+        </Button>
+      </header>
+
+      <div className="flex-1 overflow-y-auto px-6 py-4">
+        {sessions === null && (
+          <div className="text-sm text-muted-foreground">Loading…</div>
+        )}
+        {sessions && sessions.length === 0 && (
+          <div className="text-sm text-muted-foreground">
+            No sessions yet. Click <span className="font-medium">New session</span> to start.
+          </div>
+        )}
+        {sessions && sessions.length > 0 && (
+          <ul className="divide-y rounded-md border">
+            {sessions.map((s) => (
+              <li key={s.id} className="flex items-center justify-between px-3 py-2 hover:bg-muted/50">
+                <Link to={`/session/${s.id}`} className="flex-1 flex items-center gap-2 min-w-0">
+                  <MessageSquare className="size-3.5 opacity-70 shrink-0" />
+                  <span className="truncate text-sm">{s.name}</span>
+                  <span className="text-xs text-muted-foreground font-mono ml-2 shrink-0">
+                    {s.model}
+                  </span>
+                </Link>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label="Delete session"
+                  onClick={() => void remove(s.id)}
+                >
+                  <Trash2 />
+                </Button>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}