Sign in

flagon-io/g1t

public

g1t/apps/web/app/components/shell.tsx

1,615 lines65,675 bytesCodeBlame
1import { Activity, BarChart3, BookMarked, BookOpen, Bot, Box, Brain, Check, ChevronLeft, ChevronRight, ChevronsUpDown, CircleDot, CircleUserRound, Code2, Compass, CreditCard, Fingerprint, GanttChart, Gauge, GitBranch, GitPullRequest, Globe, History, House, KanbanSquare, KeyRound, LayoutGrid, LifeBuoy, ListTree, Lock, LogIn, LogOut, Mail, Menu, Network, Package, PlayCircle, Plug, Plus, Rocket, Search, ServerCog, Settings, ShieldCheck, Sparkles, Ticket, Users, UsersRound, Webhook, X } from "lucide-react";
2import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
3import { Form, Link, NavLink, useFetcher, useLocation, useNavigation, useRouteLoaderData, useSubmit } from "react-router";
4
5import type { Abilities, Membership, Spike, User } from "@g1t/contracts";
6
7import { CommandPalette, type PaletteCommand, usePaletteShortcut } from "./command-palette";
8import { StatusDot, useSiteStatus } from "./footer";
9import { Logo, Mark } from "./logo";
10import { Avatar, notACredential } from "./ui";
11import { Skeleton } from "./ui/skeleton";
12import {
13 DropdownMenu,
14 DropdownMenuContent,
15 DropdownMenuGroup,
16 DropdownMenuItem,
17 DropdownMenuLabel,
18 DropdownMenuSeparator,
19 DropdownMenuTrigger,
20} from "./ui/dropdown-menu";
21import { type RoadmapItem, roadmapIn } from "../lib/roadmap";
22import { SETTINGS_CAPABILITY, type ViewerAccess, seesSettings } from "../lib/access";
23import { VISITOR_LINKS, projectPages } from "../lib/chrome";
24import { ACCOUNT_SETTINGS, type AccountSettingsPage, FIRST_SETTINGS_PAGE, accountSettingsPage } from "../lib/account-settings";
25import { GithubMark } from "./github";
26import { withNext } from "../lib/next";
27import { useSignUpCopy } from "../lib/registration";
28import { STATUS_URL, statusTitle } from "../lib/status";
29import type { AccountMenuData } from "../routes/settings-menu-json";
30
31/**
32 * What the sidebar needs, worked out by the root loader. For a visitor who
33 * is not signed in there is no workspace, no projects and no usage: only
34 * the project being looked at, if they can see it.
35 */
36export type ShellData = {
37 /** The workspace the sidebar is about: the one being looked at, or their first. */
38 workspace: Membership | null;
39 /** Its projects, by name: `name` is the slug in their address. */
40 repos: { namespace: string; name: string; title?: string; isPrivate: boolean }[];
41 /** Repositories shared with them in workspaces they do not belong to. */
42 shared?: { namespace: string; name: string; isPrivate: boolean }[];
43 /** The project being looked at, if any, whoever owns it. */
44 repo: {
45 namespace: string;
46 name: string;
47 member: boolean;
48 issues: number;
49 pulls: number;
50 } | null;
51 /** Where the workspace stands against its usage limit, if billing is on. */
52 limit: {
53 exposureMicros: number;
54 ceilingMicros: number | null;
55 state: "ok" | "warning" | "stopped";
56 comped: boolean;
57 } | null;
58 /** Whether g1t charges nothing for now, while it is being built out. */
59 free?: boolean;
60 /** What its agents have cost since the start of the month. */
61 /** This month's usage: charged, or at cost while g1t is free. */
62 monthUsageMicros: number | null;
63 /** Whether new compute is paused (a spend spike or a hold), and whether the viewer can answer it. */
64 compute?: { paused: string | null; spike: Spike | null; owner: boolean } | null;
65};
66
67function SidebarLink({
68 to,
69 icon,
70 end,
71 count,
72 also,
73 drill,
74 children,
75}: {
76 to: string;
77 icon: ReactNode;
78 end?: boolean;
79 count?: number;
80 /** Other path prefixes under which this link is the current one. */
81 also?: string | string[];
82 /** It opens a list of its own: a chevron says so, always or on hover. */
83 drill?: boolean | "hover";
84 children: ReactNode;
85}) {
86 const { pathname } = useLocation();
87 return (
88 <NavLink
89 to={to}
90 end={end}
91 prefetch="intent"
92 className={({ isActive, isPending }) => {
93 const current =
94 isActive || [also ?? []].flat().some((prefix) => pathname === prefix || pathname.startsWith(prefix + "/"));
95 return `group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
96 current
97 ? "bg-raised font-medium text-fg"
98 : isPending
99 ? "bg-raised/60 text-fg"
100 : "text-muted hover:bg-raised/60 hover:text-fg"
101 }`;
102 }}
103 >
104 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
105 <span className="min-w-0 grow truncate">{children}</span>
106 {count != null && count > 0 && (
107 <span className="rounded bg-line px-1.5 text-[0.6875rem] tabular-nums text-muted">
108 {count}
109 </span>
110 )}
111 {drill && (
112 <ChevronRight
113 size={14}
114 aria-hidden="true"
115 className={`-mr-0.5 shrink-0 text-faint transition-opacity ${drill === "hover" ? "opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100" : ""}`}
116 />
117 )}
118 </NavLink>
119 );
120}
121
122/**
123 * Something a project will have, shown where it will live so people can
124 * see where g1t is going. Not a link: nothing is behind it yet.
125 */
126function SidebarSoon({ icon, children, about }: { icon: ReactNode; children: ReactNode; about: string }) {
127 return (
128 <div
129 title={about}
130 aria-disabled="true"
131 className="flex h-8 cursor-default items-center gap-2.5 rounded-md px-2 text-[0.8125rem] text-faint"
132 >
133 <span className="shrink-0 opacity-70">{icon}</span>
134 <span className="grow truncate">{children}</span>
135 <span className="rounded-full px-1.5 py-px text-[0.625rem] font-medium tracking-wide text-muted uppercase ring-1 ring-line">
136 Soon
137 </span>
138 </div>
139 );
140}
141
142/**
143 * A page that is coming, as a link to its roadmap page: faint, with Soon,
144 * and marked current on any of its section's Soon pages.
145 */
146function SidebarSoonLink({
147 to,
148 also,
149 icon,
150 about,
151 children,
152}: {
153 to: string;
154 also?: string[];
155 icon: ReactNode;
156 about: string;
157 children: ReactNode;
158}) {
159 const { pathname } = useLocation();
160 return (
161 <NavLink
162 to={to}
163 title={about}
164 prefetch="intent"
165 className={({ isActive }) => {
166 const current = isActive || (also ?? []).some((prefix) => pathname === prefix || pathname.startsWith(prefix + "/"));
167 return `group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
168 current ? "bg-raised font-medium text-fg" : "text-faint hover:bg-raised/60 hover:text-muted"
169 }`;
170 }}
171 >
172 <span className="shrink-0 opacity-80">{icon}</span>
173 <span className="min-w-0 grow truncate">{children}</span>
174 <span className="rounded-full px-1.5 py-px text-[0.625rem] font-medium tracking-wide text-muted uppercase ring-1 ring-line">
175 Soon
176 </span>
177 </NavLink>
178 );
179}
180
181/** Icons for what spans projects. */
182const WORKSPACE_ICONS: Record<string, ReactNode> = {
183 board: <KanbanSquare size={15} />,
184 roadmap: <GanttChart size={15} />,
185 teams: <UsersRound size={15} />,
186 packages: <Package size={15} />,
187 fleet: <Bot size={15} />,
188};
189
190/** The Soon pages of a section, as paths, so its link is current on them. */
191function soonPaths(base: string, section: RoadmapItem["section"]): string[] {
192 return roadmapIn(section).map((item) => `${base}/soon/${item.key}`);
193}
194
195function SidebarGroup({
196 title,
197 action,
198 className = "",
199 children,
200}: {
201 title: string;
202 action?: ReactNode;
203 className?: string;
204 children: ReactNode;
205}) {
206 return (
207 <section className={className}>
208 <div className="mb-1 flex h-6 items-center justify-between px-2">
209 <h2 className="text-xs font-medium text-faint">{title}</h2>
210 {action}
211 </div>
212 <div className="space-y-px">{children}</div>
213 </section>
214 );
215}
216
217/** What a workspace is called where people read it: its display name, else its slug. */
218function displayName(membership: Membership): string {
219 return membership.name?.trim() || membership.slug;
220}
221
222function WorkspaceSwitcher({ user, shell }: { user: User; shell: ShellData }) {
223 const workspace = shell.workspace;
224 const current = workspace?.slug;
225 const label = workspace ? displayName(workspace) : "Choose a workspace";
226 return (
227 <DropdownMenu>
228 {/* The name goes to the workspace; only the arrows switch it. The
229 name gets all the room there is, and the whole of it on hover. */}
230 <Link
231 to={current ? `/${current}` : "/workspaces/new"}
232 prefetch="intent"
233 title={workspace ? `${label} · g1t.sh/${workspace.slug}` : undefined}
234 className="flex h-9 min-w-0 grow items-center gap-2 rounded-md px-2 transition-colors hover:bg-raised"
235 >
236 {workspace ? (
237 <Avatar name={workspace.slug} image={workspace.avatar} size={20} square />
238 ) : (
239 <span className="size-5 shrink-0 rounded-md border border-dashed border-line-strong" />
240 )}
241 <span className="min-w-0 truncate text-[0.8125rem] font-medium">{label}</span>
242 </Link>
243 <DropdownMenuTrigger
244 aria-label="Switch workspace"
245 className="flex h-9 w-7 shrink-0 items-center justify-center rounded-md text-faint outline-none transition-colors hover:bg-raised hover:text-fg data-[state=open]:bg-raised data-[state=open]:text-fg"
246 >
247 <ChevronsUpDown size={14} />
248 </DropdownMenuTrigger>
249 <DropdownMenuContent align="start" className="w-64">
250 <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
251 {(user.workspaces ?? []).map((membership) => (
252 <DropdownMenuItem asChild key={membership.slug}>
253 <Link to={`/${membership.slug}`} title={displayName(membership)}>
254 <Avatar name={membership.slug} image={membership.avatar} size={24} square />
255 <span className="flex min-w-0 grow flex-col leading-tight">
256 <span className="truncate">{displayName(membership)}</span>
257 <span className="truncate font-mono text-[0.6875rem] text-faint">{membership.slug}</span>
258 </span>
259 <span className="shrink-0 text-[0.6875rem] text-faint capitalize">{membership.role}</span>
260 {membership.slug === current ? (
261 <Check className="shrink-0 text-accent" />
262 ) : (
263 <span className="size-4 shrink-0" aria-hidden="true" />
264 )}
265 </Link>
266 </DropdownMenuItem>
267 ))}
268 <DropdownMenuSeparator />
269 <DropdownMenuItem asChild>
270 <Link to="/workspaces/new">
271 <Plus />
272 New workspace
273 </Link>
274 </DropdownMenuItem>
275 </DropdownMenuContent>
276 </DropdownMenu>
277 );
278}
279
280/**
281 * The fine print, as one quiet row at the foot of the account menu and the
282 * visitor's panel: each link a full-height target, left-aligned. In the
283 * menu each is a menu item, so the arrow keys reach it.
284 */
285const LEGAL_LINKS: [string, string][] = [
286 ["Policies", "/policies"],
287 ["Privacy", "/policies/privacy"],
288 ["Security", "/security"],
289];
290const LEGAL_LINK = "flex h-7 items-center rounded px-1.5 text-xs text-faint outline-none transition-colors";
291
292function MenuLegalRow() {
293 return (
294 <div role="group" aria-label="Legal" className="flex items-center gap-0.5 px-0.5 pt-0.5">
295 {LEGAL_LINKS.map(([label, to], index) => (
296 <span key={to} className="flex items-center gap-0.5">
297 {index > 0 && (
298 <span aria-hidden="true" className="text-[0.625rem] text-line-strong">
299 ·
300 </span>
301 )}
302 <DropdownMenuItem asChild className={`${LEGAL_LINK} py-0 data-highlighted:bg-line data-highlighted:text-fg`}>
303 <Link to={to}>{label}</Link>
304 </DropdownMenuItem>
305 </span>
306 ))}
307 </div>
308 );
309}
310
311/** Status's row: the live dot and two or three words, fetched when the menu opens. */
312function StatusSummary({ open }: { open: boolean }) {
313 const status = useSiteStatus(open);
314 const words = statusTitle(status);
315 return (
316 <span className="ml-auto flex min-w-0 items-center gap-1.5 pl-2 text-xs text-faint">
317 {/* The words say it; the dot's own words for screen readers would repeat them. */}
318 <span aria-hidden="true" className="flex">
319 <StatusDot state={status?.overall.state ?? null} />
320 </span>
321 {words ? <span className="truncate">{words}</span> : <Skeleton className="h-3 w-20" />}
322 </span>
323 );
324}
325
326/** A menu row: an icon, words, and whatever sits at its end. */
327const MENU_ROW = "h-9 gap-2.5 px-2.5 text-[0.8125rem]";
328
329function AccountMenu({ user }: { user: User }) {
330 const submit = useSubmit();
331 const [open, setOpen] = useState(false);
332 // Name, primary address and invites left: asked for once, as soon as the
333 // pointer or focus reaches the button, so they are there when it opens.
334 const details = useFetcher<AccountMenuData | null>({ key: "account-menu" });
335 const prefetch = () => {
336 if (details.state === "idle" && details.data === undefined) details.load("/settings/menu.json");
337 };
338 useEffect(() => {
339 if (open) prefetch();
340 // eslint-disable-next-line react-hooks/exhaustive-deps
341 }, [open]);
342 const me = details.data ?? null;
343 // Still on its way: shapes where the words will be, the same size.
344 const loading = details.data === undefined && details.state !== "idle";
345 const profile = `/u/${user.username}`;
346 return (
347 <DropdownMenu open={open} onOpenChange={setOpen}>
348 <DropdownMenuTrigger
349 aria-label={`Account menu for ${user.username}`}
350 onPointerEnter={prefetch}
351 onFocus={prefetch}
352 className="flex h-10 w-full items-center gap-2.5 rounded-md px-2 text-left outline-none transition-colors hover:bg-raised focus-visible:ring-2 focus-visible:ring-merged/60 data-[state=open]:bg-raised"
353 >
354 <Avatar name={user.username} image={user.avatar} size={22} />
355 <span className="min-w-0 grow truncate text-[0.8125rem] font-medium">{user.username}</span>
356 <ChevronsUpDown size={14} className="shrink-0 text-faint" />
357 </DropdownMenuTrigger>
358 <DropdownMenuContent align="start" side="top" collisionPadding={8} className="w-[17.5rem] p-1.5">
359 {/* Who is signed in, and a way to their profile. */}
360 <DropdownMenuItem asChild className="gap-3 px-2 py-2">
361 <Link to={profile} aria-label={`${me?.name ?? user.username} (@${user.username}), your profile`}>
362 <Avatar name={user.username} image={user.avatar} size={36} />
363 <span className="flex min-w-0 grow flex-col leading-tight" aria-busy={loading}>
364 {loading ? (
365 <Skeleton className="my-[0.1875rem] h-3.5 w-28" />
366 ) : (
367 <span className="truncate text-sm font-medium text-fg">{me?.name ?? user.username}</span>
368 )}
369 <span className="truncate font-mono text-xs text-muted">@{user.username}</span>
370 {loading ? (
371 <Skeleton className="mt-1 h-3 w-40" />
372 ) : (
373 me?.email && <span className="mt-0.5 truncate text-xs text-faint">{me.email}</span>
374 )}
375 </span>
376 </Link>
377 </DropdownMenuItem>
378 <DropdownMenuSeparator className="my-1.5" />
379 <DropdownMenuGroup>
380 <DropdownMenuItem asChild className={MENU_ROW}>
381 <Link to={profile}>
382 <CircleUserRound />
383 Your profile
384 </Link>
385 </DropdownMenuItem>
386 <DropdownMenuItem asChild className={MENU_ROW}>
387 <Link to={FIRST_SETTINGS_PAGE}>
388 <Settings />
389 Your settings
390 </Link>
391 </DropdownMenuItem>
392 <DropdownMenuItem asChild className={MENU_ROW}>
393 <Link to="/settings/invites">
394 <Ticket />
395 Invites
396 {loading && <Skeleton className="ml-auto h-4 w-12 rounded-full" />}
397 {me?.invites_left != null && (
398 <span className="ml-auto rounded-full bg-line px-1.5 text-[0.6875rem] tabular-nums text-muted">
399 {me.invites_left} left
400 </span>
401 )}
402 </Link>
403 </DropdownMenuItem>
404 </DropdownMenuGroup>
405 <DropdownMenuSeparator className="my-1.5" />
406 <DropdownMenuGroup>
407 <DropdownMenuItem asChild className={MENU_ROW}>
408 <a href="https://docs.g1t.sh/">
409 <BookOpen />
410 Documentation
411 </a>
412 </DropdownMenuItem>
413 <DropdownMenuItem asChild className={MENU_ROW}>
414 <Link to="/support">
415 <LifeBuoy />
416 Support
417 </Link>
418 </DropdownMenuItem>
419 <DropdownMenuItem asChild className={MENU_ROW}>
420 <a href={STATUS_URL}>
421 <Activity />
422 Status
423 <StatusSummary open={open} />
424 </a>
425 </DropdownMenuItem>
426 </DropdownMenuGroup>
427 <DropdownMenuSeparator className="my-1.5" />
428 {/* Submitted from here: the menu closes on select, and a button
429 that has left the page cannot submit a form. */}
430 <DropdownMenuItem className={MENU_ROW} onSelect={() => submit(null, { method: "post", action: "/logout" })}>
431 <LogOut />
432 Sign out
433 </DropdownMenuItem>
434 <DropdownMenuSeparator className="my-1.5" />
435 <MenuLegalRow />
436 </DropdownMenuContent>
437 </DropdownMenu>
438 );
439}
440
441/**
442 * A workspace's settings pages, which the sidebar drills into: what it
443 * pays, its repositories, tokens and record. Who belongs (Members, Teams)
444 * and what it builds and runs with (secrets, integrations, webhooks,
445 * guardrails) sit in the main list, for every member to see.
446 */
447const SETTINGS_PAGE = /^\/([^/]+)\/-\/(settings|repositories|tokens|billing|audit)(\/|$)/;
448/** A project's settings pages, which the project's menu drills into. */
449const REPO_SETTINGS_PAGE = /^\/([^/]+)\/([^/-][^/]*)\/settings(\/|$)/;
450
451/**
452 * The sidebar's lists are a stack, the way a phone pushes a screen: one
453 * drilled into slides in from the right over the full width, while the one
454 * it covers drifts a quarter of the way left and fades, both on one long
455 * ease-out, the fade quicker than the move so the two never blur together.
456 * Going back reverses it.
457 */
458const LAYER =
459 "absolute inset-0 [transition:translate_380ms_cubic-bezier(0.32,0.72,0,1),opacity_220ms_ease-out] will-change-[translate,opacity] motion-reduce:transition-none";
460/** One list, filling its layer. */
461const PANEL = "h-full overflow-y-auto px-2 pb-4";
462
463/** One list in the stack: what it is, and its rows. */
464type Level = { key: string; node: ReactNode };
465
466/** True once the page has hydrated, so what the server drew never animates in. */
467function useHydrated(): boolean {
468 const [hydrated, setHydrated] = useState(false);
469 useEffect(() => setHydrated(true), []);
470 return hydrated;
471}
472
473/**
474 * Drilling in and out of the sidebar's lists. `trail` is the way from the
475 * main list to the one shown, worked out from the address, so a link
476 * straight to a settings page opens the sidebar already drilled in, and
477 * leaving it comes back out. Lists deeper than the one shown stay in
478 * place, off to the right, so going back slides them away rather than
479 * dropping them. Moving to a list at the same depth (a workspace's settings
480 * to a project) fades the new one in where it is.
481 */
482function Drill({ trail }: { trail: Level[] }) {
483 const depth = trail.length - 1;
484 const hydrated = useHydrated();
485 const stack = useRef<Level[]>(trail);
486 const before = stack.current;
487 const within = trail.every((level, index) => before[index]?.key === level.key);
488 stack.current = within ? [...trail, ...before.slice(trail.length)] : trail;
489 const levels = stack.current;
490 // What was showing last time, to tell drilling in from moving across.
491 const shown = useRef({ depth, keys: levels.map((level) => level.key) });
492 useEffect(() => {
493 shown.current = { depth, keys: levels.map((level) => level.key) };
494 });
495 return (
496 <div className="relative min-h-0 grow overflow-hidden">
497 {levels.map((level, index) => {
498 const current = index === depth;
499 const place =
500 index < depth
501 ? "pointer-events-none -translate-x-1/4 opacity-0"
502 : current
503 ? "translate-x-0 opacity-100"
504 : "pointer-events-none translate-x-full opacity-0";
505 // A list that was not there before arrives: from the right when
506 // drilling in, in place when moving across.
507 const arriving = hydrated && current && !shown.current.keys.includes(level.key);
508 const enter = arriving
509 ? depth > shown.current.depth
510 ? "starting:translate-x-full starting:opacity-0"
511 : "starting:opacity-0"
512 : "";
513 return (
514 <div key={level.key} className={`${LAYER} ${place} ${enter}`} inert={!current} aria-hidden={!current || undefined}>
515 {level.node}
516 </div>
517 );
518 })}
519 </div>
520 );
521}
522
523/**
524 * The row at the top of a list drilled into: the list's name, which goes
525 * back out, and what it belongs to, faint at the end.
526 */
527function BackRow({ to, label, context }: { to: string; label: ReactNode; context?: ReactNode }) {
528 return (
529 <Link
530 to={to}
531 prefetch="intent"
532 className="group mt-3 flex h-8 items-center gap-1.5 rounded-md pr-2 pl-1 text-[0.8125rem] font-medium text-fg transition-colors hover:bg-raised/60"
533 >
534 <ChevronLeft size={16} className="shrink-0 text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
535 <span className="min-w-0 shrink-0 truncate">{label}</span>
536 {context && (
537 <span className="ml-auto min-w-0 truncate pl-2 font-mono text-[0.6875rem] font-normal text-faint">{context}</span>
538 )}
539 </Link>
540 );
541}
542
543/** A thin rule between groups of a list. */
544function Rule() {
545 return <div role="separator" className="mx-2 my-2.5 h-px bg-line" />;
546}
547
548/**
549 * The main list: where you go, the projects, what the workspace builds and
550 * runs with across them, then its usage, support and settings.
551 */
552function MainMenu({ user, shell }: { user: User | null; shell: ShellData }) {
553 const ws = shell.workspace;
554 const active = shell.repo;
555 // The repository being looked at is listed even when it is someone else's.
556 const listed =
557 active && !shell.repos.some((repo) => repo.namespace === active.namespace && repo.name === active.name)
558 ? [{ namespace: active.namespace, name: active.name, isPrivate: false }, ...shell.repos]
559 : shell.repos;
560 // A visitor browses: no workspace, no projects of their own.
561 if (!user) {
562 return (
563 <nav aria-label="g1t" className={PANEL}>
564 <div className="mt-3 space-y-px">
565 {VISITOR_LINKS.map((link) => (
566 <SidebarLink key={link.to} to={link.to} icon={link.to === "/search" ? <Search size={15} /> : <Compass size={15} />}>
567 {link.label}
568 </SidebarLink>
569 ))}
570 </div>
571 </nav>
572 );
573 }
574 return (
575 <nav aria-label="g1t" className={PANEL}>
576 <div className="mt-3 space-y-px">
577 <SidebarLink to="/" end icon={<House size={15} />}>
578 Mission control
579 </SidebarLink>
580 {ws && (
581 <SidebarLink to={`/${ws.slug}`} end icon={<LayoutGrid size={15} />}>
582 Overview
583 </SidebarLink>
584 )}
585 <SidebarLink to="/explore" icon={<Compass size={15} />}>
586 Explore
587 </SidebarLink>
588 </div>
589
590 <Rule />
591 <SidebarGroup
592 title="Projects"
593 action={
594 ws && (
595 <Link
596 to={`/new?workspace=${ws.slug}`}
597 aria-label="New project"
598 className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"
599 >
600 <Plus size={13} />
601 </Link>
602 )
603 }
604 >
605 {listed.length === 0 && <p className="px-2 py-1 text-xs text-faint">None yet.</p>}
606 {listed.map((repo) => (
607 <SidebarLink
608 key={`${repo.namespace}/${repo.name}`}
609 to={`/${repo.namespace}/${repo.name}`}
610 icon={repo.isPrivate ? <Lock size={15} /> : <Box size={15} />}
611 drill="hover"
612 >
613 {repo.namespace !== ws?.slug && <span className="font-mono text-faint">{repo.namespace}/</span>}
614 {"title" in repo && repo.title ? repo.title : repo.name}
615 </SidebarLink>
616 ))}
617 </SidebarGroup>
618 {(shell.shared ?? []).length > 0 && (
619 <SidebarGroup title="Shared with you" className="mt-3">
620 {(shell.shared ?? []).map((repo) => (
621 <SidebarLink
622 key={`${repo.namespace}/${repo.name}`}
623 to={`/${repo.namespace}/${repo.name}`}
624 icon={repo.isPrivate ? <Lock size={15} /> : <Box size={15} />}
625 drill="hover"
626 >
627 <span className="font-mono text-faint">{repo.namespace}/</span>
628 {repo.name}
629 </SidebarLink>
630 ))}
631 </SidebarGroup>
632 )}
633
634 {ws && (
635 <>
636 <Rule />
637 <div className="space-y-px">
638 {/* Who belongs, for every member to see; owners invite and manage there. */}
639 <SidebarLink to={`/${ws.slug}/-/people`} icon={<Users size={15} />}>
640 Members
641 </SidebarLink>
642 {roadmapIn("Workspace")
643 .filter((item) => item.key === "teams")
644 .map((item) => (
645 <SidebarSoonLink key={item.key} to={`/${ws.slug}/-/soon/${item.key}`} icon={WORKSPACE_ICONS[item.key]} about={item.summary}>
646 {item.title}
647 </SidebarSoonLink>
648 ))}
649 </div>
650 <Rule />
651 <div className="space-y-px">
652 <SidebarLink to={`/${ws.slug}/-/agents`} icon={<Bot size={15} />}>
653 Agent fleet
654 </SidebarLink>
655 <SidebarLink to={`/${ws.slug}/-/context`} icon={<Network size={15} />}>
656 Context
657 </SidebarLink>
658 <SidebarLink to={`/${ws.slug}/-/memory`} icon={<Brain size={15} />}>
659 Memory
660 </SidebarLink>
661 <SidebarLink to={`/${ws.slug}/-/security`} icon={<ShieldCheck size={15} />}>
662 Security
663 </SidebarLink>
664 <SidebarLink to={`/${ws.slug}/-/guardrails`} icon={<Gauge size={15} />}>
665 Guardrails
666 </SidebarLink>
667 <SidebarLink to={`/${ws.slug}/-/secrets`} icon={<Lock size={15} />}>
668 Secrets and variables
669 </SidebarLink>
670 <SidebarLink to={`/${ws.slug}/-/runners`} icon={<ServerCog size={15} />}>
671 Runners
672 </SidebarLink>
673 <SidebarLink to={`/${ws.slug}/-/packages`} icon={<Package size={15} />}>
674 Packages
675 </SidebarLink>
676 <SidebarLink to={`/${ws.slug}/-/integrations`} icon={<Plug size={15} />}>
677 Integrations
678 </SidebarLink>
679 <SidebarLink to={`/${ws.slug}/-/webhooks`} icon={<Webhook size={15} />}>
680 Webhooks
681 </SidebarLink>
682 {roadmapIn("Workspace").filter((item) => item.key !== "teams").map((item) => (
683 <SidebarSoonLink
684 key={item.key}
685 to={`/${ws.slug}/-/soon/${item.key}`}
686 icon={WORKSPACE_ICONS[item.key] ?? <Sparkles size={15} />}
687 about={item.summary}
688 >
689 {item.title === "Board" ? "Boards" : item.title}
690 </SidebarSoonLink>
691 ))}
692 </div>
693
694 <Rule />
695 <div className="space-y-px">
696 <SidebarLink to={`/${ws.slug}/-/usage`} icon={<BarChart3 size={15} />}>
697 Usage
698 </SidebarLink>
699 <SidebarLink to="/support" icon={<LifeBuoy size={15} />}>
700 Support
701 </SidebarLink>
702 {/* Who belongs, what it pays and its record: a list of their own. */}
703 <SidebarLink
704 to={ws.role === "owner" ? `/${ws.slug}/-/settings` : `/${ws.slug}/-/repositories`}
705 icon={<Settings size={15} />}
706 drill
707 >
708 Settings
709 </SidebarLink>
710 </div>
711 </>
712 )}
713 </nav>
714 );
715}
716
717/** A workspace's settings, drilled into from Settings in the main list. */
718function SettingsMenu({ slug, owner }: { slug: string; owner: boolean }) {
719 return (
720 <nav aria-label="Workspace settings" className={PANEL}>
721 <BackRow to={`/${slug}`} label="Settings" context={slug} />
722 <div className="mt-2 space-y-px">
723 {owner && (
724 <SidebarLink to={`/${slug}/-/settings`} icon={<Settings size={15} />}>
725 General
726 </SidebarLink>
727 )}
728 <SidebarLink to={`/${slug}/-/repositories`} icon={<BookMarked size={15} />}>
729 Repositories
730 </SidebarLink>
731 <SidebarLink to={`/${slug}/-/tokens`} icon={<KeyRound size={15} />}>
732 Access tokens
733 </SidebarLink>
734 </div>
735 <Rule />
736 <div className="space-y-px">
737 <SidebarLink to={`/${slug}/-/billing`} icon={<CreditCard size={15} />}>
738 Billing and plans
739 </SidebarLink>
740 <SidebarLink to={`/${slug}/-/audit`} icon={<History size={15} />}>
741 Audit log
742 </SidebarLink>
743 </div>
744 </nav>
745 );
746}
747
748/**
749 * What the repository menu needs. Known from the address before the page's
750 * data arrives, so the menu is right from the first frame; the counts fill
751 * in once it does.
752 */
753type MenuRepo = {
754 namespace: string;
755 name: string;
756 member: boolean;
757 /** Whether they see its settings; from the repository's page once it loads. */
758 settings?: boolean;
759 /** What they may do there, once the repository's page loads. */
760 can?: Abilities;
761 issues?: number;
762 pulls?: number;
763};
764
765function sameRepo(a: { namespace: string; name: string } | null, b: { namespace: string; name: string } | null) {
766 return (
767 a != null &&
768 b != null &&
769 a.namespace.toLowerCase() === b.namespace.toLowerCase() &&
770 a.name.toLowerCase() === b.name.toLowerCase()
771 );
772}
773
774/**
775 * A project's own list, drilled into while you are in it: everything about
776 * the project, running and its code, and nothing else, with the way back
777 * out to all of them.
778 */
779function RepoMenu({
780 repo,
781 isPrivate,
782 back,
783}: {
784 repo: MenuRepo;
785 isPrivate: boolean;
786 /** Where the way back leads: the workspace's projects, mission control, or Explore. */
787 back: { to: string; label: string };
788}) {
789 const base = `/${repo.namespace}/${repo.name}`;
790 // What a member sees, and what everyone who can see the project does.
791 const shows = new Set(projectPages(repo.member, repo.can));
792 return (
793 <nav aria-label={`${repo.namespace}/${repo.name}`} className={PANEL}>
794 <BackRow to={back.to} label={back.label} />
795 <NavLink
796 to={base}
797 end
798 prefetch="intent"
799 title="Overview"
800 className={({ isActive }) =>
801 `mt-2 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors ${isActive ? "bg-raised" : "hover:bg-raised/60"}`
802 }
803 >
804 <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line">
805 {isPrivate ? <Lock size={13} /> : <Box size={13} />}
806 </span>
807 <span className="min-w-0 truncate font-mono text-[0.8125rem]">
808 <span className="text-faint">{repo.namespace}/</span>
809 <span className="font-semibold text-fg">{repo.name}</span>
810 </span>
811 </NavLink>
812 {/* A project's pages, in the order people use them. A page with more
813 than one view shows them as tabs across its top. */}
814 <Rule />
815 <div className="space-y-px">
816 <SidebarLink to={`${base}/code`} also={[`${base}/tree`, `${base}/blob`, `${base}/commits`, `${base}/commit`, ...soonPaths(base, "Code")]} icon={<Code2 size={15} />}>
817 Code
818 </SidebarLink>
819 <SidebarLink to={`${base}/issues`} also={[`${base}/plans`, ...soonPaths(base, "Issues")]} icon={<CircleDot size={15} />} count={repo.issues}>
820 Issues
821 </SidebarLink>
822 <SidebarLink to={`${base}/pulls`} also={[`${base}/pull`, `${base}/queue`]} icon={<GitPullRequest size={15} />} count={repo.pulls}>
823 Pull requests
824 </SidebarLink>
825 <SidebarLink to={`${base}/agents`} also={[`${base}/sessions`, `${base}/memory`, ...soonPaths(base, "Agents")]} icon={<Bot size={15} />}>
826 Agents
827 </SidebarLink>
828 <SidebarLink to={`${base}/actions`} icon={<PlayCircle size={15} />}>
829 Workflows
830 </SidebarLink>
831 </div>
832 <Rule />
833 <div className="space-y-px">
834 {shows.has("deployments") ? (
835 <SidebarLink to={`${base}/deployments`} also={soonPaths(base, "Deployments")} icon={<Rocket size={15} />}>
836 Deployments
837 </SidebarLink>
838 ) : null}
839 <SidebarSoonLink to={`${base}/soon/logs`} also={soonPaths(base, "Observability")} icon={<Activity size={15} />} about="Logs, errors, uptime and analytics of the project's deployed apps.">
840 Observability
841 </SidebarSoonLink>
842 {shows.has("security") ? (
843 <SidebarLink to={`${base}/security`} also={soonPaths(base, "Security")} icon={<ShieldCheck size={15} />}>
844 Security
845 </SidebarLink>
846 ) : null}
847 <SidebarSoonLink to={`${base}/soon/delivery`} also={soonPaths(base, "Insights")} icon={<BarChart3 size={15} />} about="Delivery metrics, costs and the work agents do.">
848 Insights
849 </SidebarSoonLink>
850 </div>
851 {(repo.settings ?? shows.has("settings")) && (
852 <>
853 <Rule />
854 <SidebarLink to={`${base}/settings`} icon={<Settings size={15} />} drill>
855 Settings
856 </SidebarLink>
857 </>
858 )}
859 </nav>
860 );
861}
862
863/**
864 * A project's settings, drilled into from its list: what is about running
865 * it, then its agents, then its code and who can reach it. The way back
866 * leads to the project.
867 */
868function RepoSettingsMenu({ repo }: { repo: MenuRepo }) {
869 const base = `/${repo.namespace}/${repo.name}`;
870 // Each page shows to the roles that can use it, once the role is known.
871 const shows = (page: string) => !repo.can || repo.can[SETTINGS_CAPABILITY[page] ?? "administer"];
872 const running = shows("deployments");
873 const agents = shows("agents") || shows("guardrails");
874 return (
875 <nav aria-label={`${repo.namespace}/${repo.name} settings`} className={PANEL}>
876 <BackRow to={base} label="Settings" context={`${repo.namespace}/${repo.name}`} />
877 {shows("") && (
878 <div className="mt-2 space-y-px">
879 <SidebarLink to={`${base}/settings`} end icon={<Settings size={15} />}>
880 General
881 </SidebarLink>
882 </div>
883 )}
884 {running && (
885 <>
886 {shows("") && <Rule />}
887 <div className={shows("") ? "space-y-px" : "mt-2 space-y-px"}>
888 <SidebarLink to={`${base}/settings/deployments`} icon={<Rocket size={15} />}>
889 Deployments
890 </SidebarLink>
891 <SidebarLink to={`${base}/settings/domains`} icon={<Globe size={15} />}>
892 Domains
893 </SidebarLink>
894 <SidebarLink to={`${base}/settings/dependencies`} icon={<Network size={15} />}>
895 Dependencies
896 </SidebarLink>
897 </div>
898 </>
899 )}
900 {agents && (
901 <>
902 <Rule />
903 <div className="space-y-px">
904 {shows("agents") && (
905 <SidebarLink to={`${base}/settings/agents`} icon={<Bot size={15} />}>
906 Agents
907 </SidebarLink>
908 )}
909 {shows("guardrails") && (
910 <SidebarLink to={`${base}/settings/guardrails`} icon={<ShieldCheck size={15} />}>
911 Guardrails
912 </SidebarLink>
913 )}
914 </div>
915 </>
916 )}
917 <Rule />
918 <div className="space-y-px">
919 {shows("repository") && (
920 <SidebarLink to={`${base}/settings/repository`} icon={<BookMarked size={15} />}>
921 Repository
922 </SidebarLink>
923 )}
924 {shows("access") && (
925 <SidebarLink to={`${base}/settings/access`} icon={<Users size={15} />}>
926 Access
927 </SidebarLink>
928 )}
929 {shows("branches") && (
930 <SidebarLink to={`${base}/settings/branches`} icon={<GitBranch size={15} />}>
931 Branches and merging
932 </SidebarLink>
933 )}
934 {shows("secrets") && (
935 <SidebarLink to={`${base}/settings/secrets`} icon={<Lock size={15} />}>
936 Secrets and variables
937 </SidebarLink>
938 )}
939 {shows("runners") && (
940 <SidebarLink to={`${base}/settings/runners`} icon={<ServerCog size={15} />}>
941 Runners
942 </SidebarLink>
943 )}
944 {shows("webhooks") && (
945 <SidebarLink to={`${base}/settings/webhooks`} icon={<Webhook size={15} />}>
946 Webhooks
947 </SidebarLink>
948 )}
949 </div>
950 </nav>
951 );
952}
953
954/** Your own settings, drilled into from Your settings: one page each. */
955function AccountSettingsMenu({ username }: { username: string }) {
956 const link = (page: AccountSettingsPage, icon: ReactNode) => (
957 <SidebarLink to={`/settings/${page}`} icon={icon}>
958 {ACCOUNT_SETTINGS[page].title}
959 </SidebarLink>
960 );
961 return (
962 <nav aria-label="Your settings" className={PANEL}>
963 <BackRow to="/" label="Your settings" context={username} />
964 <div className="mt-2 space-y-px">
965 {link("profile", <CircleUserRound size={15} />)}
966 {link("emails", <Mail size={15} />)}
967 {link("invites", <Ticket size={15} />)}
968 </div>
969 <Rule />
970 <div className="space-y-px">
971 {link("keys", <Fingerprint size={15} />)}
972 {link("tokens", <KeyRound size={15} />)}
973 </div>
974 <Rule />
975 <div className="space-y-px">
976 {link("github", <GithubMark className="size-[15px]" />)}
977 {link("applications", <Plug size={15} />)}
978 </div>
979 <Rule />
980 <div className="space-y-px">
981 {link("security-log", <History size={15} />)}
982 </div>
983 </nav>
984 );
985}
986
987/**
988 * Signing in and signing up, in place of the account for a visitor. Signing
989 * in brings them back to the page they are on.
990 */
991/** Help, status and the fine print under a visitor's sign-in buttons. */
992function VisitorLinks() {
993 const status = useSiteStatus();
994 const quiet = `${LEGAL_LINK} hover:bg-raised hover:text-fg focus-visible:ring-2 focus-visible:ring-merged/60`;
995 const dot = (
996 <span aria-hidden="true" className="text-[0.625rem] text-line-strong">
997 ·
998 </span>
999 );
1000 return (
1001 // Two short rows, so a narrow sidebar never starts a line with a dot.
1002 <nav aria-label="About g1t" className="pt-0.5">
1003 <div className="flex items-center gap-0.5">
1004 <a href={STATUS_URL} className={`${quiet} gap-1.5`}>
1005 <StatusDot state={status?.overall.state ?? null} />
1006 Status
1007 </a>
1008 {dot}
1009 <Link to="/support" className={quiet}>
1010 Support
1011 </Link>
1012 </div>
1013 <div className="flex items-center gap-0.5">
1014 {LEGAL_LINKS.map(([label, to], index) => (
1015 <span key={to} className="flex items-center gap-0.5">
1016 {index > 0 && dot}
1017 <Link to={to} className={quiet}>
1018 {label}
1019 </Link>
1020 </span>
1021 ))}
1022 </div>
1023 </nav>
1024 );
1025}
1026
1027function VisitorPanel() {
1028 const { pathname, search } = useLocation();
1029 const signUp = useSignUpCopy();
1030 return (
1031 <div className="space-y-2">
1032 <p className="px-1 text-xs text-muted">Sign in to open issues, review pull requests and run agents.</p>
1033 <div className="grid grid-cols-2 gap-2">
1034 <Link
1035 to={withNext("/login", pathname + search)}
1036 className="flex h-9 items-center justify-center gap-1.5 rounded-md border border-line text-[0.8125rem] font-medium text-fg/90 transition-colors hover:border-line-strong hover:bg-raised hover:text-fg"
1037 >
1038 <LogIn size={14} />
1039 Sign in
1040 </Link>
1041 <Link
1042 to={withNext("/register", pathname + search)}
1043 className="flex h-9 items-center justify-center rounded-md bg-fg text-[0.8125rem] font-medium text-bg transition-colors hover:bg-white"
1044 >
1045 {signUp.primary}
1046 </Link>
1047 </div>
1048 <VisitorLinks />
1049 </div>
1050 );
1051}
1052
1053function Sidebar({
1054 user,
1055 shell,
1056 missing = false,
1057 onFind,
1058 onClose,
1059}: {
1060 user: User | null;
1061 shell: ShellData;
1062 /** The page is a 404: the address names nothing the viewer can see. */
1063 missing?: boolean;
1064 onFind: () => void;
1065 /** In the sheet on a small screen: closing it, at the end of the top row. */
1066 onClose?: () => void;
1067}) {
1068 const ws = shell.workspace;
1069 const { pathname } = useLocation();
1070 const going = useNavigation().location?.pathname;
1071 // Where the sidebar is drilled to follows the page being gone to, so it
1072 // moves as the link is followed, not once the page arrives.
1073 const target = going ?? pathname;
1074 // On a 404, the address is not a place: no list is drilled into from it,
1075 // except the project's own when the project is real and visible and only
1076 // something inside it is missing (a file, a commit, an issue).
1077 const lost = missing && going == null;
1078 const inSettings = !lost && ws != null && SETTINGS_PAGE.exec(target)?.[1]?.toLowerCase() === ws.slug;
1079 const inAccount = !lost && target === "/settings" || target.startsWith("/settings/");
1080 const active = shell.repo;
1081 // In a repository, or on the way into one, its own list.
1082 const repoPath = /^\/([^/]+)\/([^/-][^/]*)(\/|$)/.exec(target);
1083 const reserved = new Set(["settings", "explore", "search", "new", "u", "pricing", "avatars", "workspaces", "login", "logout", "register", "verify", "forgot", "reset", "device", "oauth", "policies", "security", "support", "status", "invite", ".well-known"]);
1084 // An invitation to a repository is answered before its menu means anything.
1085 const inRepo =
1086 repoPath != null &&
1087 !reserved.has(repoPath[1]) &&
1088 repoPath[2] !== "-" &&
1089 !/^\/[^/]+\/[^/]+\/invitations\/?$/.test(target) &&
1090 (!lost || sameRepo(active, { namespace: repoPath[1]!, name: repoPath[2]! }));
1091 // A project's settings, one level further in.
1092 const inRepoSettings = inRepo && REPO_SETTINGS_PAGE.test(target);
1093 // The repository the menu is for: the one loaded if it is the one being
1094 // gone to, else what the address says, at once.
1095 const targetRepo = inRepo && repoPath ? { namespace: repoPath[1], name: repoPath[2] } : null;
1096 const guessed: MenuRepo | null = targetRepo
1097 ? sameRepo(active, targetRepo)
1098 ? active
1099 : {
1100 ...targetRepo,
1101 member: (user?.workspaces ?? []).some((m) => m.slug === targetRepo.namespace.toLowerCase()),
1102 }
1103 : null;
1104 // The viewer's role there, from the repository's page once it has loaded.
1105 const page = useRouteLoaderData("routes/repo/layout") as
1106 | { repo?: { namespace: string; name: string }; access?: ViewerAccess }
1107 | undefined;
1108 const menuRepo: MenuRepo | null =
1109 guessed && page?.access && page.repo && sameRepo(page.repo, guessed)
1110 ? { ...guessed, member: page.access.insider, settings: seesSettings(page.access), can: page.access.can }
1111 : guessed;
1112
1113 // The way from the main list to the one shown.
1114 const trail: Level[] = [{ key: "main", node: <MainMenu user={user} shell={shell} /> }];
1115 if (user && inAccount) {
1116 trail.push({ key: "account", node: <AccountSettingsMenu username={user.username} /> });
1117 } else if (ws && inSettings) {
1118 trail.push({ key: `settings:${ws.slug}`, node: <SettingsMenu slug={ws.slug} owner={ws.role === "owner"} /> });
1119 } else if (menuRepo) {
1120 const key = `repo:${menuRepo.namespace}/${menuRepo.name}`.toLowerCase();
1121 // Out of a project: to its workspace's projects when they are yours.
1122 const home = (user?.workspaces ?? []).find((m) => m.slug === menuRepo.namespace.toLowerCase());
1123 const back = !user
1124 ? { to: "/explore", label: "Explore" }
1125 : home
1126 ? { to: `/${home.slug}`, label: "All projects" }
1127 : { to: "/", label: "Mission control" };
1128 trail.push({
1129 key,
1130 node: (
1131 <RepoMenu
1132 repo={menuRepo}
1133 isPrivate={[...shell.repos, ...(shell.shared ?? [])].some((repo) => sameRepo(repo, menuRepo) && repo.isPrivate)}
1134 back={back}
1135 />
1136 ),
1137 });
1138 if (inRepoSettings) trail.push({ key: `${key}:settings`, node: <RepoSettingsMenu repo={menuRepo} /> });
1139 }
1140
1141 return (
1142 <div className="flex h-full flex-col">
1143 {/* The same height and rule as the top bar, so the two read as one line. */}
1144 <div className="flex h-16 shrink-0 items-center gap-1 border-b border-line pr-2 pl-2.5">
1145 {user ? (
1146 <>
1147 {/* The 1 alone beside the workspace: a square hover the height of the
1148 switcher, the mark as tall as the workspace avatar. */}
1149 <Link to="/" aria-label="g1t home" className="flex size-9 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-raised">
1150 <Mark tight className="h-5 w-auto" />
1151 </Link>
1152 <span className="shrink-0 text-line-strong" aria-hidden="true">
1153 /
1154 </span>
1155 <WorkspaceSwitcher user={user} shell={shell} />
1156 </>
1157 ) : (
1158 <Link to="/" aria-label="g1t home" className="mr-auto flex h-9 items-center rounded-md px-2 transition-colors hover:bg-raised">
1159 <Logo className="text-[1.25rem]" />
1160 </Link>
1161 )}
1162 {onClose && (
1163 <button
1164 type="button"
1165 aria-label="Close menu"
1166 onClick={onClose}
1167 className="flex size-9 shrink-0 items-center justify-center rounded-md text-faint hover:bg-raised hover:text-fg"
1168 >
1169 <X size={16} />
1170 </button>
1171 )}
1172 </div>
1173 <div className="px-2 pt-3">
1174 <button
1175 type="button"
1176 onClick={onFind}
1177 className="flex h-9 w-full items-center gap-2 rounded-md bg-surface px-2.5 text-[0.8125rem] text-faint ring-1 ring-line transition-colors hover:text-muted hover:ring-line-strong"
1178 >
1179 <Search size={14} />
1180 <span className="grow text-left">Find…</span>
1181 <kbd className="rounded bg-raised px-1.5 font-mono text-[0.625rem] text-muted ring-1 ring-line">⌘K</kbd>
1182 </button>
1183 </div>
1184 <Drill trail={trail} />
1185 {/* The account, or signing in, as one row at the very bottom. */}
1186 <div className="shrink-0 border-t border-line p-2">
1187 {user ? <AccountMenu user={user} /> : <VisitorPanel />}
1188 </div>
1189 </div>
1190 );
1191}
1192
1193/** Words for the sections a path can end in. */
1194const SECTIONS: Record<string, string> = {
1195 issues: "Issues",
1196 pulls: "Pull requests",
1197 queue: "Merge queue",
1198 commits: "Commits",
1199 plans: "Outcomes",
1200 actions: "Workflows",
1201 soon: "Soon",
1202 deployments: "Deployments",
1203 repository: "Repository",
1204 access: "Access",
1205 invitations: "Invitation",
1206 repositories: "Repositories",
1207 branches: "Branches and merging",
1208 dependencies: "Dependencies",
1209 code: "Files",
1210 secrets: "Secrets and variables",
1211 settings: "Settings",
1212 people: "Members",
1213 tokens: "Access tokens",
1214 usage: "Usage",
1215 billing: "Billing and plans",
1216 integrations: "Integrations",
1217 webhooks: "Webhooks",
1218 domains: "Domains",
1219 guardrails: "Guardrails",
1220 audit: "Audit log",
1221 tree: "Code",
1222 blob: "Code",
1223};
1224
1225/** Where the page is, as a trail of links: workspace / repository / section. */
1226function Breadcrumbs({ pathname, missing, repo }: { pathname: string; missing?: boolean; repo?: ShellData["repo"] }) {
1227 // A 404 names nothing from the address, unless the project is real and
1228 // visible and only something inside it is missing.
1229 const visibleRepo = /^\/([^/]+)\/([^/-][^/]*)(\/|$)/.exec(pathname);
1230 if (missing && !(visibleRepo && sameRepo(repo ?? null, { namespace: visibleRepo[1]!, name: visibleRepo[2]! }))) {
1231 return <span className="text-sm font-medium">Not found</span>;
1232 }
1233 const parts = pathname.split("/").filter(Boolean);
1234 const reserved = ["settings", "explore", "new", "search", "workspaces", "policies", "security", "support", "status", "invite"];
1235 if (parts.length === 0) return <span className="text-sm font-medium">Mission control</span>;
1236 // Your settings: Settings / Emails.
1237 if (parts[0] === "settings") {
1238 const page = accountSettingsPage(pathname);
1239 const trail = [{ label: "Settings", to: FIRST_SETTINGS_PAGE }, ...(page ? [{ label: ACCOUNT_SETTINGS[page].title, to: `/settings/${page}` }] : [])];
1240 return (
1241 <nav aria-label="Where you are" className="flex min-w-0 items-center gap-1.5 text-sm">
1242 {trail.map((crumb, index) => (
1243 <span key={crumb.to + index} className="flex min-w-0 items-center gap-1.5">
1244 {index > 0 && <span className="text-line-strong">/</span>}
1245 <Link
1246 to={crumb.to}
1247 prefetch="intent"
1248 className={`truncate rounded px-1 py-0.5 transition-colors hover:bg-raised ${
1249 index === trail.length - 1 ? "font-medium text-fg" : "text-muted hover:text-fg"
1250 }`}
1251 >
1252 {crumb.label}
1253 </Link>
1254 </span>
1255 ))}
1256 </nav>
1257 );
1258 }
1259 if (reserved.includes(parts[0]!)) {
1260 const words: Record<string, string> = {
1261 settings: "Account",
1262 explore: "Explore",
1263 new: "New project",
1264 search: "Search",
1265 workspaces: "New workspace",
1266 policies: "Policies",
1267 security: "Security",
1268 support: "Support",
1269 status: "Status",
1270 invite: "Invite",
1271 };
1272 return <span className="text-sm font-medium">{words[parts[0]!]}</span>;
1273 }
1274 // A person's profile, by their handle.
1275 if (parts[0] === "u" && parts[1]) {
1276 return <span className="truncate font-mono text-[0.8125rem] font-medium">@{parts[1]}</span>;
1277 }
1278 const [owner, second, third, fourth] = parts;
1279 const trail: { label: string; to: string; mono?: boolean }[] = [{ label: owner!, to: `/${owner}`, mono: true }];
1280 if (second === "-") {
1281 const page = `/${owner}/-/${third}`;
1282 if (third && SETTINGS_PAGE.test(page)) {
1283 trail.push({ label: "Settings", to: `/${owner}/-/settings` });
1284 trail.push({ label: third === "settings" ? "General" : (SECTIONS[third] ?? third), to: page });
1285 } else if (third) trail.push({ label: SECTIONS[third] ?? third, to: page });
1286 } else if (second) {
1287 const repo = `/${owner}/${second}`;
1288 trail.push({ label: second, to: repo, mono: true });
1289 if (third === "pull" && fourth) trail.push({ label: `Pull request #${fourth}`, to: `${repo}/pull/${fourth}` });
1290 else if (third === "issues" && fourth && fourth !== "new") trail.push({ label: `Issue #${fourth}`, to: `${repo}/issues/${fourth}` });
1291 else if (third === "commit" && fourth) trail.push({ label: fourth.slice(0, 7), to: `${repo}/commit/${fourth}`, mono: true });
1292 else if (third && SECTIONS[third]) {
1293 trail.push({ label: SECTIONS[third]!, to: `${repo}/${third}` });
1294 // A settings page names which one: Settings / Secrets and variables.
1295 if (third === "settings" && fourth && SECTIONS[fourth]) {
1296 trail.push({ label: SECTIONS[fourth]!, to: `${repo}/settings/${fourth}` });
1297 }
1298 }
1299 }
1300 return (
1301 <nav aria-label="Where you are" className="flex min-w-0 items-center gap-1.5 text-sm">
1302 {trail.map((crumb, index) => (
1303 <span key={index} className="flex min-w-0 items-center gap-1.5">
1304 {index > 0 && <span className="text-line-strong">/</span>}
1305 <Link
1306 to={crumb.to}
1307 prefetch="intent"
1308 className={`truncate rounded px-1 py-0.5 transition-colors hover:bg-raised ${
1309 index === trail.length - 1 ? "font-medium text-fg" : "text-muted hover:text-fg"
1310 } ${crumb.mono ? "font-mono text-[0.8125rem]" : ""}`}
1311 >
1312 {crumb.label}
1313 </Link>
1314 </span>
1315 ))}
1316 </nav>
1317 );
1318}
1319
1320type Command = PaletteCommand;
1321
1322/** Everything the palette can jump to, from what the sidebar already knows. */
1323function commandsFor(user: User | null, shell: ShellData, here: string, signUpLabel = "Sign up"): Command[] {
1324 if (!user) return visitorCommands(shell, here, signUpLabel);
1325 const commands: Command[] = [
1326 { label: "Mission control", to: "/", icon: <House size={15} /> },
1327 ...(shell.repos.length > 0
1328 ? [{ label: "Put an agent on it", hint: "Open an issue and assign g1t", to: "/?agent=new", icon: <Sparkles size={15} /> }]
1329 : []),
1330 { label: "Explore repositories", to: "/explore", icon: <Compass size={15} /> },
1331 { label: "Search g1t", hint: "Repositories, code, issues, people", to: "/search", icon: <Search size={15} /> },
1332 { label: "New project", to: "/new", icon: <Plus size={15} /> },
1333 { label: "New workspace", to: "/workspaces/new", icon: <Plus size={15} /> },
1334 { label: "Your settings", to: FIRST_SETTINGS_PAGE, icon: <Settings size={15} /> },
1335 ...(Object.keys(ACCOUNT_SETTINGS) as AccountSettingsPage[])
1336 .filter((page) => page !== "profile")
1337 .map((page) => ({ label: ACCOUNT_SETTINGS[page].title, hint: "Your settings", to: `/settings/${page}`, icon: <Settings size={15} /> })),
1338 ];
1339 const repo = shell.repo;
1340 if (repo) {
1341 const base = `/${repo.namespace}/${repo.name}`;
1342 const name = `${repo.namespace}/${repo.name}`;
1343 commands.unshift(
1344 { label: "Overview", hint: name, to: base, icon: <LayoutGrid size={15} /> },
1345 { label: "Code", hint: name, to: `${base}/code`, icon: <Code2 size={15} /> },
1346 { label: "Issues", hint: name, to: `${base}/issues`, icon: <CircleDot size={15} /> },
1347 { label: "New issue", hint: name, to: `${base}/issues/new`, icon: <Plus size={15} /> },
1348 ...(repo.member
1349 ? [{ label: `Put an agent on ${repo.name}`, hint: name, to: `${base}/issues/new?agent=1`, icon: <Sparkles size={15} /> }]
1350 : []),
1351 { label: "Pull requests", hint: name, to: `${base}/pulls`, icon: <GitPullRequest size={15} /> },
1352 { label: "Commits", hint: name, to: `${base}/commits`, icon: <History size={15} /> },
1353 ...(repo.member
1354 ? [
1355 { label: "Plan work", hint: name, to: `${base}/plans`, icon: <ListTree size={15} /> },
1356 { label: "Deployments", hint: name, to: `${base}/deployments`, icon: <Rocket size={15} /> },
1357 { label: "Secrets and variables", hint: name, to: `${base}/settings/secrets`, icon: <Lock size={15} /> },
1358 { label: "Project settings", hint: name, to: `${base}/settings`, icon: <Settings size={15} /> },
1359 { label: "Repository settings", hint: name, to: `${base}/settings/repository`, icon: <Settings size={15} /> },
1360 ]
1361 : []),
1362 );
1363 }
1364 for (const membership of user.workspaces ?? []) {
1365 commands.push(
1366 { label: displayName(membership), hint: `Workspace · ${membership.slug}`, to: `/${membership.slug}`, icon: <Avatar name={membership.slug} image={membership.avatar} size={15} square /> },
1367 { label: "Usage", hint: membership.slug, to: `/${membership.slug}/-/usage`, icon: <BarChart3 size={15} /> },
1368 { label: "Billing and plans", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/billing`, icon: <CreditCard size={15} /> },
1369 { label: "Access tokens", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/tokens`, icon: <KeyRound size={15} /> },
1370 { label: "Integrations", hint: membership.slug, to: `/${membership.slug}/-/integrations`, icon: <Plug size={15} /> },
1371 );
1372 }
1373 for (const listed of shell.repos) {
1374 commands.push({
1375 label: listed.title ?? listed.name,
1376 hint: `${listed.namespace} · Project`,
1377 to: `/${listed.namespace}/${listed.name}`,
1378 icon: <Box size={15} />,
1379 });
1380 }
1381 // "Put an agent on …": one per project, after the projects themselves.
1382 for (const listed of shell.repos) {
1383 if (repo && listed.namespace === repo.namespace && listed.name === repo.name) continue;
1384 commands.push({
1385 label: `Put an agent on ${listed.title ?? listed.name}`,
1386 hint: `${listed.namespace}/${listed.name}`,
1387 to: `/${listed.namespace}/${listed.name}/issues/new?agent=1`,
1388 icon: <Sparkles size={15} />,
1389 });
1390 }
1391 return commands;
1392}
1393
1394/** What the palette offers a visitor: browsing, the project they are in, and signing in. */
1395function visitorCommands(shell: ShellData, here: string, signUpLabel: string): Command[] {
1396 const commands: Command[] = [];
1397 const repo = shell.repo;
1398 if (repo) {
1399 const base = `/${repo.namespace}/${repo.name}`;
1400 const name = `${repo.namespace}/${repo.name}`;
1401 commands.push(
1402 { label: "Overview", hint: name, to: base, icon: <LayoutGrid size={15} /> },
1403 { label: "Code", hint: name, to: `${base}/code`, icon: <Code2 size={15} /> },
1404 { label: "Issues", hint: name, to: `${base}/issues`, icon: <CircleDot size={15} /> },
1405 { label: "Pull requests", hint: name, to: `${base}/pulls`, icon: <GitPullRequest size={15} /> },
1406 { label: "Commits", hint: name, to: `${base}/commits`, icon: <History size={15} /> },
1407 );
1408 }
1409 commands.push(
1410 { label: "Explore", hint: "Public projects", to: "/explore", icon: <Compass size={15} /> },
1411 { label: "Search g1t", hint: "Repositories, code, issues, people", to: "/search", icon: <Search size={15} /> },
1412 { label: "Pricing", to: "/pricing", icon: <CreditCard size={15} /> },
1413 { label: "Documentation", to: "https://docs.g1t.sh/", icon: <BookOpen size={15} /> },
1414 { label: "Sign in", to: withNext("/login", here), icon: <LogIn size={15} /> },
1415 { label: signUpLabel, to: withNext("/register", here), icon: <Plus size={15} /> },
1416 );
1417 return commands;
1418}
1419
1420/**
1421 * A bar across the top of the page while the next one loads, as GitHub
1422 * has: it appears at once, creeps towards the end while waiting, then fills
1423 * and fades when the page arrives.
1424 */
1425export function Progress() {
1426 const navigation = useNavigation();
1427 const busy = navigation.state !== "idle";
1428 const [width, setWidth] = useState(0);
1429 const [visible, setVisible] = useState(false);
1430 useEffect(() => {
1431 if (busy) {
1432 setVisible(true);
1433 setWidth(12);
1434 // Slows as it goes, never quite arriving until the page does.
1435 const timer = setInterval(() => setWidth((now) => now + (90 - now) * 0.12), 200);
1436 return () => clearInterval(timer);
1437 }
1438 setWidth((now) => (now > 0 ? 100 : 0));
1439 const fade = setTimeout(() => setVisible(false), 250);
1440 const reset = setTimeout(() => setWidth(0), 550);
1441 return () => {
1442 clearTimeout(fade);
1443 clearTimeout(reset);
1444 };
1445 }, [busy]);
1446 return (
1447 <div
1448 aria-hidden="true"
1449 className={`pointer-events-none fixed inset-x-0 top-0 z-[60] h-[3px] transition-opacity duration-300 ${
1450 visible ? "opacity-100" : "opacity-0"
1451 }`}
1452 >
1453 <div
1454 className="h-full bg-accent shadow-[0_0_10px_var(--color-accent)] transition-[width] duration-200 ease-out"
1455 style={{ width: `${width}%` }}
1456 />
1457 </div>
1458 );
1459}
1460
1461/**
1462 * The app: a sidebar with the workspace, its repositories and the sections
1463 * of the one being looked at; a slim bar with search and the account; and
1464 * the page. A visitor who is not signed in gets the same frame, with
1465 * Explore and Search in place of the workspace, and signing in in place of
1466 * the account.
1467 */
1468export function AppShell({
1469 user,
1470 shell,
1471 missing = false,
1472 banner,
1473 children,
1474}: {
1475 user: User | null;
1476 shell: ShellData;
1477 /** The page is a 404 (see Sidebar). */
1478 missing?: boolean;
1479 banner?: ReactNode;
1480 children: ReactNode;
1481}) {
1482 const { pathname, search } = useLocation();
1483 const [drawer, setDrawer] = useState(false);
1484 const [palette, setPalette] = useState(false);
1485 const here = pathname + search;
1486 const signUpLabel = useSignUpCopy().primary;
1487 const commands = useMemo(() => commandsFor(user, shell, here, signUpLabel), [user, shell, here, signUpLabel]);
1488
1489 // A new page closes the drawer on small screens.
1490 useEffect(() => setDrawer(false), [pathname]);
1491 // Mission control's code, fetched while the browser is idle, so going
1492 // home never waits on it (routes/home.tsx).
1493 useEffect(() => {
1494 if (!user) return;
1495 const load = () => void import("./mission-control").catch(() => undefined);
1496 const idle = (window as { requestIdleCallback?: (callback: () => void) => number }).requestIdleCallback;
1497 if (idle) idle(load);
1498 else setTimeout(load, 1500);
1499 }, [user]);
1500 usePaletteShortcut(() => setPalette((open) => !open));
1501
1502 return (
1503 <div className="min-h-screen">
1504 <Progress />
1505 <aside className="fixed inset-y-0 left-0 z-40 hidden w-64 border-r border-line bg-[color-mix(in_srgb,var(--color-surface)_70%,var(--color-bg))] lg:block">
1506 <Sidebar user={user} shell={shell} missing={missing} onFind={() => setPalette(true)} />
1507 </aside>
1508 {drawer && (
1509 <div className="fixed inset-0 z-50 lg:hidden">
1510 <button
1511 type="button"
1512 aria-label="Close menu"
1513 className="absolute inset-0 bg-black/60"
1514 onClick={() => setDrawer(false)}
1515 />
1516 <aside className="absolute inset-y-0 left-0 w-72 border-r border-line bg-surface">
1517 <Sidebar user={user} shell={shell} missing={missing} onFind={() => setPalette(true)} onClose={() => setDrawer(false)} />
1518 </aside>
1519 </div>
1520 )}
1521
1522 <div className="flex min-h-screen min-w-0 flex-col lg:pl-64">
1523 <header className="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-line bg-bg/85 px-4 backdrop-blur sm:px-6">
1524 <button
1525 type="button"
1526 aria-label="Open menu"
1527 onClick={() => setDrawer(true)}
1528 className="rounded-md p-1.5 text-muted hover:bg-raised hover:text-fg lg:hidden"
1529 >
1530 <Menu size={18} />
1531 </button>
1532 <Breadcrumbs pathname={pathname} missing={missing} repo={shell.repo} />
1533 <Form action="/search" role="search" className="relative ml-auto hidden w-full max-w-64 md:block">
1534 <Search size={14} className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-faint" />
1535 <input
1536 name="q"
1537 {...notACredential()}
1538 placeholder="Search g1t"
1539 aria-label="Search g1t"
1540 className="h-9 w-full rounded-md border border-line bg-surface pr-12 pl-8 text-sm outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-accent-dim"
1541 />
1542 <kbd className="pointer-events-none absolute top-1/2 right-2 -translate-y-1/2 rounded bg-raised px-1.5 font-mono text-[0.625rem] text-muted ring-1 ring-line">
1543 ⌘K
1544 </kbd>
1545 </Form>
1546 <div className="ml-auto flex items-center gap-1.5 md:ml-0">
1547 <a
1548 href="https://docs.g1t.sh/"
1549 className="hidden rounded-md px-2.5 py-1.5 text-sm text-muted transition-colors hover:bg-raised hover:text-fg sm:block"
1550 >
1551 Docs
1552 </a>
1553 {!user ? (
1554 // The sidebar has these too, but on a phone it is folded away.
1555 <Link
1556 to={withNext("/login", here)}
1557 className="flex h-9 items-center rounded-md bg-fg px-3 text-sm font-medium text-bg transition-colors hover:bg-white lg:hidden"
1558 >
1559 Sign in
1560 </Link>
1561 ) : (
1562 <DropdownMenu>
1563 <DropdownMenuTrigger
1564 aria-label="Create"
1565 className="flex h-9 items-center gap-1.5 rounded-md bg-fg px-3 text-sm font-medium text-bg outline-none transition-colors hover:bg-white"
1566 >
1567 <Plus size={14} />
1568 New
1569 </DropdownMenuTrigger>
1570 <DropdownMenuContent align="end">
1571 {shell.repo && (
1572 <DropdownMenuItem asChild>
1573 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/issues/new`}>
1574 <CircleDot />
1575 New issue
1576 </Link>
1577 </DropdownMenuItem>
1578 )}
1579 {shell.repo?.member && (
1580 <DropdownMenuItem asChild>
1581 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/plans`}>
1582 <ListTree />
1583 Plan work
1584 </Link>
1585 </DropdownMenuItem>
1586 )}
1587 <DropdownMenuItem asChild>
1588 <Link to="/new">
1589 <Box />
1590 New project
1591 </Link>
1592 </DropdownMenuItem>
1593 <DropdownMenuItem asChild>
1594 <Link to="/workspaces/new">
1595 <Users />
1596 New workspace
1597 </Link>
1598 </DropdownMenuItem>
1599 </DropdownMenuContent>
1600 </DropdownMenu>
1601 )}
1602 </div>
1603 </header>
1604 {banner}
1605 <main className="min-w-0 grow">{children}</main>
1606 </div>
1607 <CommandPalette
1608 open={palette}
1609 onOpenChange={setPalette}
1610 commands={commands}
1611 repo={shell.repo ? `${shell.repo.namespace}/${shell.repo.name}` : null}
1612 />
1613 </div>
1614 );
1615}