Sign in

flagon-io/g1t

public

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

992 lines38,371 bytesCodeBlame
1import {
2 ArrowLeft,
3 BarChart3,
4 BookMarked,
5 BookOpen,
6 Check,
7 ChevronsUpDown,
8 Ellipsis,
9 CircleDot,
10 Code2,
11 Compass,
12 CornerDownLeft,
13 CreditCard,
14 GitPullRequest,
15 History,
16 KeyRound,
17 Layers,
18 LayoutDashboard,
19 ListTree,
20 Lock,
21 LogOut,
22 Menu,
23 Plus,
24 Search,
25 Plug,
26 Settings,
27 Users,
28 Webhook,
29 PlayCircle,
30 Zap,
31 X,
32} from "lucide-react";
33import { type ReactNode, useEffect, useMemo, useRef, useState } from "react";
34import { Form, Link, NavLink, useLocation, useNavigate, useNavigation, useSubmit } from "react-router";
35
36import type { User } from "@g1t/contracts";
37import { MICROS_PER_DOLLAR } from "@g1t/contracts";
38
39import { Mark } from "./logo";
40import { Avatar } from "./ui";
41import {
42 DropdownMenu,
43 DropdownMenuContent,
44 DropdownMenuItem,
45 DropdownMenuLabel,
46 DropdownMenuSeparator,
47 DropdownMenuTrigger,
48} from "./ui/dropdown-menu";
49
50/** What the sidebar needs, worked out by the root loader for a signed-in person. */
51export type ShellData = {
52 /** The workspace the sidebar is about: the one being looked at, or their first. */
53 workspace: { slug: string; role: "owner" | "member" } | null;
54 /** Its repositories, newest first. */
55 repos: { namespace: string; name: string; isPrivate: boolean }[];
56 /** The repository being looked at, if any, whoever owns it. */
57 repo: {
58 namespace: string;
59 name: string;
60 member: boolean;
61 issues: number;
62 pulls: number;
63 } | null;
64 /** The workspace's agent credit, if billing is on and they may see it. */
65 creditMicros: number | null;
66 /** Whether g1t charges nothing for now, while it is being built out. */
67 free?: boolean;
68 /** What its agents have cost since the start of the month. */
69 monthSpentMicros: number | null;
70};
71
72function SidebarLink({
73 to,
74 icon,
75 end,
76 count,
77 also,
78 children,
79}: {
80 to: string;
81 icon: ReactNode;
82 end?: boolean;
83 count?: number;
84 /** Another path prefix under which this link is the current one. */
85 also?: string;
86 children: ReactNode;
87}) {
88 const { pathname } = useLocation();
89 return (
90 <NavLink
91 to={to}
92 end={end}
93 prefetch="intent"
94 className={({ isActive, isPending }) => {
95 const current = isActive || (also != null && pathname.startsWith(also + "/"));
96 return `group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
97 current
98 ? "bg-raised font-medium text-fg"
99 : isPending
100 ? "bg-raised/60 text-fg"
101 : "text-muted hover:bg-raised/60 hover:text-fg"
102 }`;
103 }}
104 >
105 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
106 <span className="min-w-0 grow truncate">{children}</span>
107 {count != null && count > 0 && (
108 <span className="rounded bg-line px-1.5 text-[0.6875rem] tabular-nums text-muted">
109 {count}
110 </span>
111 )}
112 </NavLink>
113 );
114}
115
116function SidebarGroup({ title, action, children }: { title: string; action?: ReactNode; children: ReactNode }) {
117 return (
118 <section className="mt-6">
119 <div className="mb-1 flex h-6 items-center justify-between px-2">
120 <h2 className="text-xs font-medium text-faint">{title}</h2>
121 {action}
122 </div>
123 <div className="space-y-px">{children}</div>
124 </section>
125 );
126}
127
128function WorkspaceSwitcher({ user, shell }: { user: User; shell: ShellData }) {
129 const current = shell.workspace?.slug;
130 return (
131 <DropdownMenu>
132 {/* The name goes to the workspace; only the arrows switch it. */}
133 <Link
134 to={current ? `/${current}` : "/workspaces/new"}
135 className="flex h-8 min-w-0 items-center gap-2 rounded-md px-1.5 transition-colors hover:bg-raised"
136 >
137 {current ? (
138 <Avatar name={current} size={20} square />
139 ) : (
140 <span className="size-5 rounded-md border border-dashed border-line-strong" />
141 )}
142 <span className="min-w-0 truncate text-sm font-medium">{current ?? "Choose a workspace"}</span>
143 {shell.workspace && (
144 <span className="shrink-0 rounded-full bg-raised px-1.5 py-px text-[0.625rem] font-medium text-muted ring-1 ring-line capitalize">
145 {shell.workspace.role}
146 </span>
147 )}
148 </Link>
149 <DropdownMenuTrigger
150 aria-label="Switch workspace"
151 className="ml-auto flex h-8 w-6 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"
152 >
153 <ChevronsUpDown size={14} />
154 </DropdownMenuTrigger>
155 <DropdownMenuContent align="start" className="w-60">
156 <DropdownMenuLabel>Workspaces</DropdownMenuLabel>
157 {(user.workspaces ?? []).map((membership) => (
158 <DropdownMenuItem asChild key={membership.slug}>
159 <Link to={`/${membership.slug}`}>
160 <Avatar name={membership.slug} size={16} square />
161 <span className="grow">{membership.slug}</span>
162 {membership.slug === current && <Check className="text-accent" />}
163 </Link>
164 </DropdownMenuItem>
165 ))}
166 <DropdownMenuSeparator />
167 <DropdownMenuItem asChild>
168 <Link to="/workspaces/new">
169 <Plus />
170 New workspace
171 </Link>
172 </DropdownMenuItem>
173 </DropdownMenuContent>
174 </DropdownMenu>
175 );
176}
177
178/** This month's spend against what is left, as Vercel shows a plan's usage. */
179function UsageCard({ slug, shell }: { slug: string; shell: ShellData }) {
180 if (shell.monthSpentMicros == null) return null;
181 const spent = shell.monthSpentMicros;
182 const left = shell.creditMicros;
183 const share = left != null && spent + left > 0 ? Math.min(1, spent / (spent + Math.max(left, 0))) : 0;
184 return (
185 <Link
186 to={`/${slug}/-/usage`}
187 className="block rounded-lg bg-surface p-3 ring-1 ring-line transition-colors hover:ring-line-strong"
188 >
189 <span className="flex items-baseline justify-between text-xs">
190 <span className="font-medium text-fg">Usage</span>
191 <span className="text-faint">this month</span>
192 </span>
193 <span className="mt-2 flex items-baseline justify-between">
194 <span className="font-mono text-sm tabular-nums">${(spent / MICROS_PER_DOLLAR).toFixed(2)}</span>
195 {shell.free ? (
196 <span className="text-xs text-accent">Free for now</span>
197 ) : (
198 left != null && (
199 <span className={`text-xs ${left <= 0 ? "text-warn" : "text-faint"}`}>
200 ${(left / MICROS_PER_DOLLAR).toFixed(2)} left
201 </span>
202 )
203 )}
204 </span>
205 <span className="mt-2 block h-1 overflow-hidden rounded-full bg-raised">
206 <span
207 className={`block h-full rounded-full ${left != null && left <= 0 ? "bg-warn" : "bg-accent"}`}
208 style={{ width: `${Math.max(share * 100, spent > 0 ? 3 : 0)}%` }}
209 />
210 </span>
211 </Link>
212 );
213}
214
215function AccountMenu({ user }: { user: User }) {
216 const submit = useSubmit();
217 return (
218 <DropdownMenu>
219 <DropdownMenuTrigger className="flex h-10 w-full items-center gap-2.5 rounded-md px-2 text-left outline-none transition-colors hover:bg-raised data-[state=open]:bg-raised">
220 <Avatar name={user.username} size={22} />
221 <span className="min-w-0 grow truncate text-[0.8125rem] font-medium">{user.username}</span>
222 <Ellipsis size={15} className="shrink-0 text-faint" />
223 </DropdownMenuTrigger>
224 <DropdownMenuContent align="start" side="top" className="w-56">
225 <DropdownMenuLabel>
226 Signed in as <span className="font-mono font-medium text-fg">{user.username}</span>
227 </DropdownMenuLabel>
228 <DropdownMenuSeparator />
229 <DropdownMenuItem asChild>
230 <Link to="/settings">
231 <Settings />
232 Your settings
233 </Link>
234 </DropdownMenuItem>
235 <DropdownMenuItem asChild>
236 <a href="https://docs.g1t.sh/">
237 <BookOpen />
238 Documentation
239 </a>
240 </DropdownMenuItem>
241 <DropdownMenuSeparator />
242 {/* Submitted from here: the menu closes on select, and a button
243 that has left the page cannot submit a form. */}
244 <DropdownMenuItem onSelect={() => submit(null, { method: "post", action: "/logout" })}>
245 <LogOut />
246 Sign out
247 </DropdownMenuItem>
248 </DropdownMenuContent>
249 </DropdownMenu>
250 );
251}
252
253/** A workspace's settings pages, which the sidebar slides over to. */
254const SETTINGS_PAGE = /^\/([^/]+)\/-\/(settings|people|tokens|billing|integrations|webhooks|secrets)(\/|$)/;
255
256/**
257 * The sidebar's menus are two layers, the way a phone pushes a screen: the
258 * one arriving slides in from the right over the full width, while the one
259 * leaving drifts a quarter of the way left and fades, both on one long
260 * ease-out, the fade quicker than the move so the two never blur together.
261 * Going back reverses it.
262 */
263const LAYER =
264 "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";
265/** One menu, filling its layer. */
266const PANEL = "h-full overflow-y-auto px-2 pb-4";
267
268/** A workspace's settings, as the sidebar shows them in place of everything else. */
269function SettingsMenu({ slug, owner, open }: { slug: string; owner: boolean; open: boolean }) {
270 return (
271 <nav
272 aria-label="Workspace settings"
273 inert={!open}
274 className={PANEL}
275 >
276 <Link
277 to={`/${slug}`}
278 className="group mt-3 flex h-8 items-center gap-2 rounded-md px-2 text-[0.8125rem] text-muted transition-colors hover:bg-raised/60 hover:text-fg"
279 >
280 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
281 <span className="truncate">{slug}</span>
282 </Link>
283 <SidebarGroup title="Settings">
284 {owner && (
285 <SidebarLink to={`/${slug}/-/settings`} icon={<Settings size={15} />}>
286 General
287 </SidebarLink>
288 )}
289 <SidebarLink to={`/${slug}/-/people`} icon={<Users size={15} />}>
290 Members
291 </SidebarLink>
292 <SidebarLink to={`/${slug}/-/billing`} icon={<CreditCard size={15} />}>
293 Billing
294 </SidebarLink>
295 <SidebarLink to={`/${slug}/-/integrations`} icon={<Plug size={15} />}>
296 Integrations
297 </SidebarLink>
298 <SidebarLink to={`/${slug}/-/webhooks`} icon={<Webhook size={15} />}>
299 Webhooks
300 </SidebarLink>
301 <SidebarLink to={`/${slug}/-/secrets`} icon={<Lock size={15} />}>
302 Secrets and variables
303 </SidebarLink>
304 <SidebarLink to={`/${slug}/-/tokens`} icon={<KeyRound size={15} />}>
305 Access tokens
306 </SidebarLink>
307 </SidebarGroup>
308 </nav>
309 );
310}
311
312/**
313 * What the repository menu needs. Known from the address before the page's
314 * data arrives, so the menu is right from the first frame; the counts fill
315 * in once it does.
316 */
317type MenuRepo = {
318 namespace: string;
319 name: string;
320 member: boolean;
321 issues?: number;
322 pulls?: number;
323};
324
325function sameRepo(a: { namespace: string; name: string } | null, b: { namespace: string; name: string } | null) {
326 return (
327 a != null &&
328 b != null &&
329 a.namespace.toLowerCase() === b.namespace.toLowerCase() &&
330 a.name.toLowerCase() === b.name.toLowerCase()
331 );
332}
333
334/**
335 * A repository's own menu, which the sidebar slides to while you are in
336 * it, as it does for settings: everything about the repository and nothing
337 * else, with the way back to everything.
338 */
339function RepoMenu({ repo, isPrivate, open }: { repo: MenuRepo; isPrivate: boolean; open: boolean }) {
340 const base = `/${repo.namespace}/${repo.name}`;
341 return (
342 <nav aria-label={`${repo.namespace}/${repo.name}`} inert={!open} className={PANEL}>
343 <Link
344 to="/"
345 className="group mt-3 flex h-8 items-center gap-2 rounded-md px-2 text-[0.8125rem] text-muted transition-colors hover:bg-raised/60 hover:text-fg"
346 >
347 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
348 Mission control
349 </Link>
350 <Link
351 to={base}
352 className="mt-3 flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-raised/60"
353 >
354 <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line">
355 {isPrivate ? <Lock size={13} /> : <BookMarked size={13} />}
356 </span>
357 <span className="min-w-0 truncate font-mono text-[0.8125rem]">
358 <span className="text-faint">{repo.namespace}/</span>
359 <span className="font-semibold text-fg">{repo.name}</span>
360 </span>
361 </Link>
362 <SidebarGroup title="Code">
363 <SidebarLink to={base} end icon={<Code2 size={15} />} also={`${base}/tree`}>
364 Code
365 </SidebarLink>
366 <SidebarLink to={`${base}/commits`} also={`${base}/commit`} icon={<History size={15} />}>
367 Commits
368 </SidebarLink>
369 </SidebarGroup>
370 <SidebarGroup title="Work">
371 <SidebarLink to={`${base}/issues`} icon={<CircleDot size={15} />} count={repo.issues}>
372 Issues
373 </SidebarLink>
374 <SidebarLink to={`${base}/pulls`} also={`${base}/pull`} icon={<GitPullRequest size={15} />} count={repo.pulls}>
375 Pull requests
376 </SidebarLink>
377 {repo.member && (
378 <SidebarLink to={`${base}/plans`} icon={<ListTree size={15} />}>
379 Plan
380 </SidebarLink>
381 )}
382 <SidebarLink to={`${base}/queue`} icon={<Layers size={15} />}>
383 Merge queue
384 </SidebarLink>
385 </SidebarGroup>
386 <SidebarGroup title="Automate">
387 <SidebarLink to={`${base}/actions`} icon={<PlayCircle size={15} />}>
388 Actions
389 </SidebarLink>
390 <SidebarLink to={`${base}/automations`} icon={<Zap size={15} />}>
391 Automations
392 </SidebarLink>
393 </SidebarGroup>
394 {repo.member && (
395 <SidebarGroup title="Repository">
396 <SidebarLink to={`${base}/settings`} icon={<Settings size={15} />}>
397 Settings
398 </SidebarLink>
399 </SidebarGroup>
400 )}
401 </nav>
402 );
403}
404
405/** Your own settings, as the sidebar shows them on the settings page. */
406function AccountSettingsMenu({ open }: { open: boolean }) {
407 const { hash } = useLocation();
408 const item = (id: string, icon: ReactNode, label: string) => (
409 <Link
410 to={`/settings#${id}`}
411 className={`group flex h-8 items-center gap-2.5 rounded-md px-2 text-[0.8125rem] transition-colors ${
412 hash === `#${id}` ? "bg-raised font-medium text-fg" : "text-muted hover:bg-raised/60 hover:text-fg"
413 }`}
414 >
415 <span className="shrink-0 text-faint group-hover:text-muted">{icon}</span>
416 {label}
417 </Link>
418 );
419 return (
420 <nav
421 aria-label="Your settings"
422 inert={!open}
423 className={PANEL}
424 >
425 <Link
426 to="/"
427 className="group mt-3 flex h-8 items-center gap-2 rounded-md px-2 text-[0.8125rem] text-muted transition-colors hover:bg-raised/60 hover:text-fg"
428 >
429 <ArrowLeft size={15} className="text-faint transition-transform group-hover:-translate-x-0.5 group-hover:text-muted" />
430 Mission control
431 </Link>
432 <SidebarGroup title="Account">
433 {item("ssh-keys", <KeyRound size={15} />, "SSH keys")}
434 {item("tokens", <Lock size={15} />, "Access tokens")}
435 {item("applications", <Plug size={15} />, "Connected applications")}
436 </SidebarGroup>
437 </nav>
438 );
439}
440
441function Sidebar({ user, shell, onFind }: { user: User; shell: ShellData; onFind: () => void }) {
442 const ws = shell.workspace;
443 const { pathname } = useLocation();
444 const going = useNavigation().location?.pathname;
445 // On a workspace's settings page, or on the way to one, its settings take
446 // the sidebar over.
447 const inSettings = ws != null && SETTINGS_PAGE.exec(going ?? pathname)?.[1]?.toLowerCase() === ws.slug;
448 const inAccount = (going ?? pathname) === "/settings";
449 const active = shell.repo;
450 // In a repository, or on the way into one, its own menu takes the sidebar.
451 const target = going ?? pathname;
452 const repoPath = /^\/([^/]+)\/([^/-][^/]*)(\/|$)/.exec(target);
453 const reserved = new Set(["settings", "explore", "search", "new", "workspaces", "login", "logout", "register", "verify", "forgot", "reset", "device", "oauth"]);
454 const inRepo = repoPath != null && !reserved.has(repoPath[1]) && repoPath[2] !== "-";
455 const away = inSettings || inAccount || inRepo;
456 // The repository the menu is for: the one loaded if it is the one being
457 // gone to, else what the address says, at once.
458 const targetRepo = inRepo && repoPath ? { namespace: repoPath[1], name: repoPath[2] } : null;
459 const menuRepo: MenuRepo | null = targetRepo
460 ? sameRepo(active, targetRepo)
461 ? active
462 : {
463 ...targetRepo,
464 member: (user.workspaces ?? []).some((m) => m.slug === targetRepo.namespace.toLowerCase()),
465 }
466 : null;
467 // What sits on the far side of the track. Kept while sliding back, so it
468 // does not vanish on the way out.
469 const side = useRef<"workspace" | "account" | "repo">("workspace");
470 if (inAccount) side.current = "account";
471 else if (inSettings) side.current = "workspace";
472 else if (inRepo) side.current = "repo";
473 // The repository last shown, kept for the slide back.
474 const shown = useRef<MenuRepo | null>(menuRepo);
475 if (menuRepo) shown.current = menuRepo;
476 // Moving between two of the far-side menus (settings to a repository,
477 // one repository to another) crossfades in place instead of sliding.
478 const detailKey = side.current === "repo" ? `repo:${shown.current?.namespace}/${shown.current?.name}` : side.current;
479 const lastAway = useRef(away);
480 const lastKey = useRef(detailKey);
481 const swapped = lastAway.current && away && lastKey.current !== detailKey;
482 useEffect(() => {
483 lastAway.current = away;
484 lastKey.current = detailKey;
485 });
486 // The repository being looked at is listed even when it is someone else's.
487 const listed =
488 active && !shell.repos.some((repo) => repo.namespace === active.namespace && repo.name === active.name)
489 ? [{ namespace: active.namespace, name: active.name, isPrivate: false }, ...shell.repos]
490 : shell.repos;
491 return (
492 <div className="flex h-full flex-col">
493 {/* The same height and rule as the top bar, so the two read as one line. */}
494 <div className="flex h-12 shrink-0 items-center gap-1 border-b border-line px-2">
495 <Link to="/" aria-label="g1t home" className="shrink-0 rounded-md p-1.5 hover:bg-raised">
496 <Mark className="size-5" />
497 </Link>
498 <span className="shrink-0 text-line-strong" aria-hidden="true">
499 /
500 </span>
501 <WorkspaceSwitcher user={user} shell={shell} />
502 </div>
503 <div className="px-2 pt-3">
504 <button
505 type="button"
506 onClick={onFind}
507 className="flex h-8 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"
508 >
509 <Search size={14} />
510 <span className="grow text-left">Find…</span>
511 <kbd className="rounded bg-raised px-1.5 font-mono text-[0.625rem] text-muted ring-1 ring-line">⌘K</kbd>
512 </button>
513 </div>
514 <div className="relative min-h-0 grow overflow-hidden">
515 <div className={`${LAYER} ${away ? "pointer-events-none -translate-x-1/4 opacity-0" : "translate-x-0 opacity-100"}`}>
516 <nav aria-label="g1t" inert={away} className={PANEL}>
517 <div className="mt-3 space-y-px">
518 <SidebarLink to="/" end icon={<LayoutDashboard size={15} />}>
519 Mission control
520 </SidebarLink>
521 <SidebarLink to="/explore" icon={<Compass size={15} />}>
522 Explore
523 </SidebarLink>
524 </div>
525
526 <SidebarGroup
527 title="Repositories"
528 action={
529 ws && (
530 <Link
531 to={`/new?workspace=${ws.slug}`}
532 aria-label="New repository"
533 className="rounded p-0.5 text-faint hover:bg-raised hover:text-fg"
534 >
535 <Plus size={13} />
536 </Link>
537 )
538 }
539 >
540 {listed.length === 0 && (
541 <p className="px-2 py-1 text-xs text-faint">None yet.</p>
542 )}
543 {listed.map((repo) => {
544 const base = `/${repo.namespace}/${repo.name}`;
545 return (
546 <div key={base}>
547 <SidebarLink
548 to={base}
549 icon={repo.isPrivate ? <Lock size={15} /> : <BookMarked size={15} />}
550 >
551 <span className="font-mono text-[0.8125rem]">
552 {repo.namespace !== ws?.slug && (
553 <span className="text-faint">{repo.namespace}/</span>
554 )}
555 {repo.name}
556 </span>
557 </SidebarLink>
558 </div>
559 );
560 })}
561 </SidebarGroup>
562 </nav>
563 </div>
564 <div className={`${LAYER} ${away ? "translate-x-0 opacity-100" : "pointer-events-none translate-x-full opacity-0"}`}>
565 <div key={detailKey} className={`h-full ${swapped ? "animate-[g1t-swap_220ms_ease-out]" : ""}`}>
566 {side.current === "repo" && shown.current ? (
567 <RepoMenu
568 repo={shown.current}
569 isPrivate={shell.repos.some((repo) => sameRepo(repo, shown.current) && repo.isPrivate)}
570 open={inRepo}
571 />
572 ) : side.current === "account" || !ws ? (
573 <AccountSettingsMenu open={inAccount} />
574 ) : (
575 <SettingsMenu slug={ws.slug} owner={ws.role === "owner"} open={inSettings} />
576 )}
577 </div>
578 </div>
579 </div>
580
581 {/* The workspace's own things sit at the bottom, by its usage and the account. */}
582 <div className="space-y-2 p-2">
583 {ws && (
584 <div className="space-y-px">
585 <p className="px-2 pb-1 text-[0.6875rem] font-medium uppercase tracking-wider text-faint">{ws.slug}</p>
586 <SidebarLink to={`/${ws.slug}/-/usage`} icon={<BarChart3 size={15} />}>
587 Usage
588 </SidebarLink>
589 {/* Everything else about the workspace lives in its settings, and only there. */}
590 <SidebarLink
591 to={ws.role === "owner" ? `/${ws.slug}/-/settings` : `/${ws.slug}/-/people`}
592 icon={<Settings size={15} />}
593 >
594 Settings
595 </SidebarLink>
596 </div>
597 )}
598 {ws && <UsageCard slug={ws.slug} shell={shell} />}
599 <AccountMenu user={user} />
600 </div>
601 </div>
602 );
603}
604
605/** Words for the sections a path can end in. */
606const SECTIONS: Record<string, string> = {
607 issues: "Issues",
608 pulls: "Pull requests",
609 queue: "Merge queue",
610 commits: "Commits",
611 plans: "Plan",
612 automations: "Automations",
613 actions: "Actions",
614 secrets: "Secrets and variables",
615 settings: "Settings",
616 people: "Members",
617 tokens: "Access tokens",
618 usage: "Usage",
619 billing: "Billing",
620 integrations: "Integrations",
621 webhooks: "Webhooks",
622 tree: "Code",
623 blob: "Code",
624};
625
626/** Where the page is, as a trail of links: workspace / repository / section. */
627function Breadcrumbs({ pathname }: { pathname: string }) {
628 const parts = pathname.split("/").filter(Boolean);
629 const reserved = ["settings", "explore", "new", "search", "workspaces"];
630 if (parts.length === 0) return <span className="text-sm font-medium">Mission control</span>;
631 if (reserved.includes(parts[0]!)) {
632 const words: Record<string, string> = {
633 settings: "Account",
634 explore: "Explore",
635 new: "New repository",
636 search: "Search",
637 workspaces: "New workspace",
638 };
639 return <span className="text-sm font-medium">{words[parts[0]!]}</span>;
640 }
641 const [owner, second, third, fourth] = parts;
642 const trail: { label: string; to: string; mono?: boolean }[] = [{ label: owner!, to: `/${owner}`, mono: true }];
643 if (second === "-") {
644 const page = `/${owner}/-/${third}`;
645 if (third && SETTINGS_PAGE.test(page)) {
646 trail.push({ label: "Settings", to: `/${owner}/-/settings` });
647 trail.push({ label: third === "settings" ? "General" : (SECTIONS[third] ?? third), to: page });
648 } else if (third) trail.push({ label: SECTIONS[third] ?? third, to: page });
649 } else if (second) {
650 const repo = `/${owner}/${second}`;
651 trail.push({ label: second, to: repo, mono: true });
652 if (third === "pull" && fourth) trail.push({ label: `Pull request #${fourth}`, to: `${repo}/pull/${fourth}` });
653 else if (third === "issues" && fourth && fourth !== "new") trail.push({ label: `Issue #${fourth}`, to: `${repo}/issues/${fourth}` });
654 else if (third === "commit" && fourth) trail.push({ label: fourth.slice(0, 7), to: `${repo}/commit/${fourth}`, mono: true });
655 else if (third && SECTIONS[third]) trail.push({ label: SECTIONS[third]!, to: `${repo}/${third}` });
656 }
657 return (
658 <nav aria-label="Where you are" className="flex min-w-0 items-center gap-1.5 text-sm">
659 {trail.map((crumb, index) => (
660 <span key={crumb.to} className="flex min-w-0 items-center gap-1.5">
661 {index > 0 && <span className="text-line-strong">/</span>}
662 <Link
663 to={crumb.to}
664 className={`truncate rounded px-1 py-0.5 transition-colors hover:bg-raised ${
665 index === trail.length - 1 ? "font-medium text-fg" : "text-muted hover:text-fg"
666 } ${crumb.mono ? "font-mono text-[0.8125rem]" : ""}`}
667 >
668 {crumb.label}
669 </Link>
670 </span>
671 ))}
672 </nav>
673 );
674}
675
676type Command = { label: string; hint?: string; to: string; icon: ReactNode };
677
678/** Everything the palette can jump to, from what the sidebar already knows. */
679function commandsFor(user: User, shell: ShellData): Command[] {
680 const commands: Command[] = [
681 { label: "Mission control", to: "/", icon: <LayoutDashboard size={15} /> },
682 { label: "Explore repositories", to: "/explore", icon: <Compass size={15} /> },
683 { label: "New repository", to: "/new", icon: <Plus size={15} /> },
684 { label: "New workspace", to: "/workspaces/new", icon: <Plus size={15} /> },
685 { label: "Your settings", to: "/settings", icon: <Settings size={15} /> },
686 ];
687 const repo = shell.repo;
688 if (repo) {
689 const base = `/${repo.namespace}/${repo.name}`;
690 const name = `${repo.namespace}/${repo.name}`;
691 commands.unshift(
692 { label: "Issues", hint: name, to: `${base}/issues`, icon: <CircleDot size={15} /> },
693 { label: "New issue", hint: name, to: `${base}/issues/new`, icon: <Plus size={15} /> },
694 { label: "Pull requests", hint: name, to: `${base}/pulls`, icon: <GitPullRequest size={15} /> },
695 { label: "Commits", hint: name, to: `${base}/commits`, icon: <History size={15} /> },
696 ...(repo.member
697 ? [
698 { label: "Plan work", hint: name, to: `${base}/plans`, icon: <ListTree size={15} /> },
699 { label: "Repository settings", hint: name, to: `${base}/settings`, icon: <Settings size={15} /> },
700 ]
701 : []),
702 );
703 }
704 for (const membership of user.workspaces ?? []) {
705 commands.push(
706 { label: membership.slug, hint: "Workspace", to: `/${membership.slug}`, icon: <Avatar name={membership.slug} size={15} square /> },
707 { label: "Usage", hint: membership.slug, to: `/${membership.slug}/-/usage`, icon: <BarChart3 size={15} /> },
708 { label: "Billing", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/billing`, icon: <CreditCard size={15} /> },
709 { label: "Access tokens", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/tokens`, icon: <KeyRound size={15} /> },
710 { label: "Integrations", hint: `${membership.slug} · Settings`, to: `/${membership.slug}/-/integrations`, icon: <Plug size={15} /> },
711 );
712 }
713 for (const listed of shell.repos) {
714 commands.push({
715 label: `${listed.namespace}/${listed.name}`,
716 hint: "Repository",
717 to: `/${listed.namespace}/${listed.name}`,
718 icon: <BookMarked size={15} />,
719 });
720 }
721 return commands;
722}
723
724function CommandPalette({
725 open,
726 onClose,
727 commands,
728}: {
729 open: boolean;
730 onClose: () => void;
731 commands: Command[];
732}) {
733 const navigate = useNavigate();
734 const [query, setQuery] = useState("");
735 const [selected, setSelected] = useState(0);
736 const input = useRef<HTMLInputElement>(null);
737 const matches = useMemo(() => {
738 const words = query.toLowerCase().split(/\s+/).filter(Boolean);
739 return commands
740 .filter((command) => {
741 const text = `${command.label} ${command.hint ?? ""}`.toLowerCase();
742 return words.every((word) => text.includes(word));
743 })
744 .slice(0, 12);
745 }, [commands, query]);
746
747 useEffect(() => {
748 if (!open) return;
749 setQuery("");
750 setSelected(0);
751 input.current?.focus();
752 }, [open]);
753 useEffect(() => setSelected(0), [query]);
754
755 if (!open) return null;
756 const go = (command: Command | undefined) => {
757 if (!command) return;
758 onClose();
759 navigate(command.to);
760 };
761 return (
762 <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 px-4 pt-[12vh] backdrop-blur-sm" onClick={onClose}>
763 <div
764 role="dialog"
765 aria-label="Go to"
766 className="w-full max-w-xl overflow-hidden rounded-xl border border-line-strong bg-raised shadow-2xl shadow-black/60"
767 onClick={(event) => event.stopPropagation()}
768 >
769 <div className="flex items-center gap-3 border-b border-line px-4">
770 <Search size={16} className="text-faint" />
771 <input
772 ref={input}
773 value={query}
774 onChange={(event) => setQuery(event.target.value)}
775 onKeyDown={(event) => {
776 if (event.key === "ArrowDown") {
777 event.preventDefault();
778 setSelected((index) => Math.min(index + 1, matches.length - 1));
779 } else if (event.key === "ArrowUp") {
780 event.preventDefault();
781 setSelected((index) => Math.max(index - 1, 0));
782 } else if (event.key === "Enter") {
783 event.preventDefault();
784 go(matches[selected]);
785 } else if (event.key === "Escape") {
786 onClose();
787 }
788 }}
789 placeholder="Go to a repository, a page, or an action…"
790 autoComplete="off"
791 data-1p-ignore
792 className="h-12 grow border-0 bg-transparent text-sm shadow-none outline-none ring-0 placeholder:text-faint focus:outline-none focus-visible:outline-none"
793 />
794 <kbd className="rounded border border-line px-1.5 font-mono text-[0.6875rem] text-faint">esc</kbd>
795 </div>
796 <ul className="max-h-[50vh] overflow-y-auto p-1.5">
797 {matches.length === 0 && (
798 <li className="px-3 py-6 text-center text-sm text-faint">Nothing matches.</li>
799 )}
800 {matches.map((command, index) => (
801 <li key={`${command.to}-${command.label}`}>
802 <button
803 type="button"
804 onMouseEnter={() => setSelected(index)}
805 onClick={() => go(command)}
806 className={`flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm ${
807 index === selected ? "bg-line text-fg" : "text-muted"
808 }`}
809 >
810 <span className="shrink-0 text-faint">{command.icon}</span>
811 <span className="min-w-0 grow truncate">{command.label}</span>
812 {command.hint && <span className="shrink-0 truncate text-xs text-faint">{command.hint}</span>}
813 {index === selected && <CornerDownLeft size={13} className="shrink-0 text-faint" />}
814 </button>
815 </li>
816 ))}
817 </ul>
818 </div>
819 </div>
820 );
821}
822
823/**
824 * A bar across the top of the page while the next one loads, as GitHub
825 * has: it appears at once, creeps towards the end while waiting, then fills
826 * and fades when the page arrives.
827 */
828export function Progress() {
829 const navigation = useNavigation();
830 const busy = navigation.state !== "idle";
831 const [width, setWidth] = useState(0);
832 const [visible, setVisible] = useState(false);
833 useEffect(() => {
834 if (busy) {
835 setVisible(true);
836 setWidth(12);
837 // Slows as it goes, never quite arriving until the page does.
838 const timer = setInterval(() => setWidth((now) => now + (90 - now) * 0.12), 200);
839 return () => clearInterval(timer);
840 }
841 setWidth((now) => (now > 0 ? 100 : 0));
842 const fade = setTimeout(() => setVisible(false), 250);
843 const reset = setTimeout(() => setWidth(0), 550);
844 return () => {
845 clearTimeout(fade);
846 clearTimeout(reset);
847 };
848 }, [busy]);
849 return (
850 <div
851 aria-hidden="true"
852 className={`pointer-events-none fixed inset-x-0 top-0 z-[60] h-[3px] transition-opacity duration-300 ${
853 visible ? "opacity-100" : "opacity-0"
854 }`}
855 >
856 <div
857 className="h-full bg-accent shadow-[0_0_10px_var(--color-accent)] transition-[width] duration-200 ease-out"
858 style={{ width: `${width}%` }}
859 />
860 </div>
861 );
862}
863
864/**
865 * The signed-in app: a sidebar with the workspace, its repositories and the
866 * sections of the one being looked at; a slim bar with search and the
867 * account; and the page.
868 */
869export function AppShell({
870 user,
871 shell,
872 banner,
873 children,
874}: {
875 user: User;
876 shell: ShellData;
877 banner?: ReactNode;
878 children: ReactNode;
879}) {
880 const submit = useSubmit();
881 const { pathname } = useLocation();
882 const [drawer, setDrawer] = useState(false);
883 const [palette, setPalette] = useState(false);
884 const commands = useMemo(() => commandsFor(user, shell), [user, shell]);
885
886 // A new page closes the drawer on small screens.
887 useEffect(() => setDrawer(false), [pathname]);
888 useEffect(() => {
889 const onKey = (event: KeyboardEvent) => {
890 if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
891 event.preventDefault();
892 setPalette((open) => !open);
893 }
894 };
895 window.addEventListener("keydown", onKey);
896 return () => window.removeEventListener("keydown", onKey);
897 }, []);
898
899 return (
900 <div className="min-h-screen">
901 <Progress />
902 <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">
903 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
904 </aside>
905 {drawer && (
906 <div className="fixed inset-0 z-50 lg:hidden">
907 <button
908 type="button"
909 aria-label="Close menu"
910 className="absolute inset-0 bg-black/60"
911 onClick={() => setDrawer(false)}
912 />
913 <aside className="absolute inset-y-0 left-0 w-72 border-r border-line bg-surface">
914 <button
915 type="button"
916 aria-label="Close menu"
917 onClick={() => setDrawer(false)}
918 className="absolute top-3 right-3 rounded-md p-1 text-faint hover:bg-raised hover:text-fg"
919 >
920 <X size={16} />
921 </button>
922 <Sidebar user={user} shell={shell} onFind={() => setPalette(true)} />
923 </aside>
924 </div>
925 )}
926
927 <div className="flex min-h-screen min-w-0 flex-col lg:pl-64">
928 <header className="sticky top-0 z-30 flex h-12 items-center gap-2 border-b border-line bg-bg/85 px-3 backdrop-blur sm:px-4">
929 <button
930 type="button"
931 aria-label="Open menu"
932 onClick={() => setDrawer(true)}
933 className="rounded-md p-1.5 text-muted hover:bg-raised hover:text-fg lg:hidden"
934 >
935 <Menu size={18} />
936 </button>
937 <Breadcrumbs pathname={pathname} />
938 <div className="ml-auto flex items-center gap-1.5">
939 <a
940 href="https://docs.g1t.sh/"
941 className="hidden rounded-md px-2 py-1 text-[0.8125rem] text-muted transition-colors hover:bg-raised hover:text-fg sm:block"
942 >
943 Docs
944 </a>
945 <DropdownMenu>
946 <DropdownMenuTrigger
947 aria-label="Create"
948 className="flex h-8 items-center gap-1.5 rounded-md bg-fg px-2.5 text-[0.8125rem] font-medium text-bg outline-none transition-colors hover:bg-white"
949 >
950 <Plus size={14} />
951 New
952 </DropdownMenuTrigger>
953 <DropdownMenuContent align="end">
954 {shell.repo && (
955 <DropdownMenuItem asChild>
956 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/issues/new`}>
957 <CircleDot />
958 New issue
959 </Link>
960 </DropdownMenuItem>
961 )}
962 {shell.repo?.member && (
963 <DropdownMenuItem asChild>
964 <Link to={`/${shell.repo.namespace}/${shell.repo.name}/plans`}>
965 <ListTree />
966 Plan work
967 </Link>
968 </DropdownMenuItem>
969 )}
970 <DropdownMenuItem asChild>
971 <Link to="/new">
972 <BookMarked />
973 New repository
974 </Link>
975 </DropdownMenuItem>
976 <DropdownMenuItem asChild>
977 <Link to="/workspaces/new">
978 <Users />
979 New workspace
980 </Link>
981 </DropdownMenuItem>
982 </DropdownMenuContent>
983 </DropdownMenu>
984 </div>
985 </header>
986 {banner}
987 <main className="min-w-0 grow">{children}</main>
988 </div>
989 <CommandPalette open={palette} onClose={() => setPalette(false)} commands={commands} />
990 </div>
991 );
992}