P0: Next.js shell — tokens, motion, SlidePanel, LeftRail, auth plumbing

- Tailwind v4 @theme block encoding all spec §2 tokens; full §3 keyframe
  inventory with prefers-reduced-motion handling; Geist vendored (air-gap)
- SlidePanel width-animation primitive (component-tested: exit-transition
  unmount, fixed-width inner content, a11y region semantics)
- session-key.ts mirroring the Rust codec + URL-param encoding; nuqs
  panel-params with spec ?sessions=1 flag shape and routines->scheduled alias
- Zod-typed API client; httpOnly cookie session bridge (/auth/session);
  login page; (workspace) layout with LeftRail roster/nav/user; Team and
  Credits pages on real endpoints (+ GET /api/team/members in tc-api)
- Vitest + Testing Library harness (26 tests); ESLint max-lines 1250 +
  no-warning-comments mirroring the CI gates

Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-09 22:43:50 -05:00
co-authored by Claude Fable 5
parent c4349bf292
commit 172a3c8fed
50 changed files with 9415 additions and 1 deletions
@@ -0,0 +1,44 @@
import { fetchMembers } from "@/lib/api/team";
// Team page (§8.3): members table.
export default async function TeamPage() {
const members = await fetchMembers();
return (
<section className="mx-auto max-w-3xl px-8 py-12">
<h1 className="text-2xl font-semibold tracking-tight">Team</h1>
<p className="pt-1 text-sm text-muted-foreground">
{members.length} {members.length === 1 ? "member" : "members"} in your
workspace
</p>
<table className="mt-8 w-full text-left text-sm">
<thead>
<tr className="border-b border-border text-xs text-muted-foreground">
<th className="py-2 font-medium">Name</th>
<th className="py-2 font-medium">Email</th>
<th className="py-2 font-medium">Joined</th>
</tr>
</thead>
<tbody>
{members.map((member) => (
<tr key={member.id} className="border-b border-border/50">
<td className="py-3">
{member.display_name}
{member.role === "owner" && (
<span className="ml-2 rounded-(--radius-button) bg-surface-warm-muted px-2 py-0.5 text-xxs text-muted-foreground">
Owner
</span>
)}
</td>
<td className="py-3 text-muted-foreground">{member.email}</td>
<td className="py-3 text-muted-foreground">
{new Date(member.created_at).toLocaleDateString("en-US", {
dateStyle: "medium",
})}
</td>
</tr>
))}
</tbody>
</table>
</section>
);
}