Sign in

pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

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

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