Sign in

pulls/pr_01m47d24b0e6n91zwymwxg0vpx

public

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

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