Sign in

pulls/pr_01m47d24b0e6n91zwymwxg0vpx

public

pr_01m47d24b0e6n91zwymwxg0vpx/apps/web/app/routes/workspace/layout.tsx

123 lines4,997 bytesCodeBlame
1import { CreditCard, KeyRound, LayoutGrid, Plug, Plus, Settings, Users } from "lucide-react";
2import { Outlet, data, useLocation, useRouteLoaderData } from "react-router";
3
4import type { Route } from "./+types/layout";
5import { Avatar, ButtonLink, Pill, TabLink } from "../../components/ui";
6import { identity } from "../../lib/services.server";
7import { getViewer, roleIn } from "../../lib/session.server";
8
9export function meta({ loaderData, params }: Route.MetaArgs) {
10 return [{ title: `${loaderData?.workspace.name ?? params.owner} · g1t` }];
11}
12
13export async function loader({ params, context }: Route.LoaderArgs) {
14 const workspace = await identity.getWorkspace(params.owner);
15 if (!workspace) throw data(null, { status: 404 });
16 return { workspace, role: roleIn(getViewer(context), workspace.slug) };
17}
18
19/** A workspace's own pages, each with its title and what it is for. */
20const PAGES: Record<string, { title: string; about: string }> = {
21 settings: { title: "General", about: "The workspace's name, address and description." },
22 people: {
23 title: "Members",
24 about: "Members create repositories, push, manage issues and merge pull requests. Owners also manage members, tokens, billing and integrations.",
25 },
26 tokens: {
27 title: "Access tokens",
28 about: "Tokens that belong to the workspace, not a person: for CI, integrations and agents that work for the whole team.",
29 },
30 usage: { title: "Usage", about: "What the workspace's agents cost, run by run, by repository, pull request and model." },
31 billing: { title: "Billing", about: "Agent credit, and every charge against it." },
32 integrations: {
33 title: "Integrations",
34 about: "Model providers, alerts and trackers. Secrets are sealed when saved, and agents never see them.",
35 },
36};
37
38export default function WorkspaceLayout({ loaderData }: Route.ComponentProps) {
39 const { workspace, role } = loaderData;
40 const base = `/${workspace.slug}`;
41 const signedIn = useRouteLoaderData("root")?.user != null;
42 // The sidebar finds the workspace's pages for someone signed in, so its
43 // pages need a title, not the workspace's whole header again.
44 const page = PAGES[useLocation().pathname.split("/-/")[1]?.split("/")[0] ?? ""];
45 if (signedIn && page) {
46 return (
47 <div className="mx-auto max-w-5xl px-4 py-10 sm:px-8">
48 <header className="mb-8 border-b border-line pb-6">
49 <h1 className="text-2xl font-semibold tracking-tight">{page.title}</h1>
50 <p className="mt-1.5 text-sm text-muted">{page.about}</p>
51 </header>
52 <Outlet />
53 </div>
54 );
55 }
56 return (
57 <>
58 {/* The workspace's own header band, under the site header. */}
59 <div className="border-b border-line bg-surface/60">
60 <div className="mx-auto max-w-6xl px-4 pt-8">
61 <div className="flex flex-wrap items-center gap-4">
62 <Avatar name={workspace.slug} size={52} square />
63 <div className="min-w-0 grow">
64 <div className="flex flex-wrap items-center gap-2.5">
65 <h1 className="truncate text-2xl font-semibold tracking-tight">
66 {workspace.name}
67 </h1>
68 {role && <Pill>{role}</Pill>}
69 </div>
70 <p className="font-mono text-sm text-muted">g1t.sh/{workspace.slug}</p>
71 </div>
72 {role && (
73 <ButtonLink to={`/new?workspace=${workspace.slug}`}>
74 <Plus size={15} />
75 New repository
76 </ButtonLink>
77 )}
78 </div>
79 {workspace.description && (
80 <p className="mt-4 max-w-2xl text-sm text-muted">{workspace.description}</p>
81 )}
82 {signedIn ? (
83 <div className="pb-8" />
84 ) : (
85 <nav className="mt-6 flex flex-wrap gap-x-6">
86 <TabLink to={base} end icon={<LayoutGrid size={15} />}>
87 Overview
88 </TabLink>
89 {role && (
90 <>
91 <TabLink
92 to={`${base}/-/people`}
93 icon={<Users size={15} />}
94 count={workspace.memberCount}
95 >
96 People
97 </TabLink>
98 <TabLink to={`${base}/-/tokens`} icon={<KeyRound size={15} />}>
99 Access tokens
100 </TabLink>
101 <TabLink to={`${base}/-/billing`} icon={<CreditCard size={15} />}>
102 Billing
103 </TabLink>
104 <TabLink to={`${base}/-/integrations`} icon={<Plug size={15} />}>
105 Integrations
106 </TabLink>
107 </>
108 )}
109 {role === "owner" && (
110 <TabLink to={`${base}/-/settings`} icon={<Settings size={15} />}>
111 Settings
112 </TabLink>
113 )}
114 </nav>
115 )}
116 </div>
117 </div>
118 <div className="mx-auto max-w-6xl px-4 py-8">
119 <Outlet />
120 </div>
121 </>
122 );
123}