Sign in

flagon-io/g1t

public

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

g1t/apps/web/app/routes/repo/layout.tsx

226 lines8,304 bytesCodeBlame
1import { Box, CircleDot, Code2, GitPullRequest, History, LayoutGrid, ListTree, Lock, Rocket, Settings } from "lucide-react";
2import { Link, NavLink, Outlet, data, useLocation, useRouteLoaderData } from "react-router";
3
4import type { Project } from "@g1t/contracts";
5
6import type { Route } from "./+types/layout";
7import { page } from "../../lib/meta";
8import { type Tab as PageTab, tabsFor } from "../../lib/project-nav";
9import { Pill, TabLink as Tab } from "../../components/ui";
10import { redirectIfRenamed } from "../../lib/renamed.server";
11import { projects, repos, work } from "../../lib/services.server";
12import { getViewer, roleIn, unwrap } from "../../lib/session.server";
13
14export function meta({ loaderData: loaded, params, ...args }: Route.MetaArgs) {
15 return page(args, { title: `${loaded?.project?.name ?? params.repo} · ${params.owner} · g1t` });
16}
17
18export async function loader({ params, context, request }: Route.LoaderArgs) {
19 const viewer = getViewer(context);
20 const path = { namespace: params.owner, name: params.repo };
21 const [repo, counts, found] = await Promise.all([
22 repos.get(path, viewer),
23 work.counts(path, viewer),
24 projects.get(params.owner, params.repo, viewer),
25 ]);
26 if (!repo.ok && !found.ok) {
27 // Under a workspace's old name, after a rename: the project is at the new one.
28 await redirectIfRenamed(request, params.owner);
29 throw data(null, { status: 404 });
30 }
31 let project: Project | null = found.ok ? found.value : null;
32 // A repository made a moment ago, before its project: make it now.
33 if (!project && repo.ok && !repo.value.forkOf) {
34 const own = await projects.byRepo(repo.value.id);
35 project = own.find((p) => p.slug === params.repo.toLowerCase()) ?? own[0] ?? null;
36 }
37 return {
38 repo: unwrap(repo),
39 project,
40 open: counts.ok ? counts.value : { issues: 0, pulls: 0 },
41 member: roleIn(viewer, params.owner) != null,
42 };
43}
44
45/** The project the page is in, for the pages under it. */
46export function useProject() {
47 return useRouteLoaderData<typeof loader>("routes/repo/layout");
48}
49
50/** A repository's topics, each a way into Explore. */
51function Topics({ topics }: { topics: string[] | undefined }) {
52 if (!topics?.length) return null;
53 return (
54 <div className="mt-2 flex flex-wrap gap-1.5">
55 {topics.map((topic) => (
56 <Link
57 key={topic}
58 to={`/explore?topic=${encodeURIComponent(topic)}`}
59 className="rounded-full bg-accent/10 px-2 py-px text-xs text-accent ring-1 ring-accent/30 transition-colors hover:bg-accent/20"
60 >
61 {topic}
62 </Link>
63 ))}
64 </div>
65 );
66}
67
68function Header({ project, isPrivate, namespace, name, description, large }: {
69 project: Project | null;
70 isPrivate: boolean;
71 namespace: string;
72 name: string;
73 description: string | null;
74 large?: boolean;
75}) {
76 const base = `/${namespace}/${name}`;
77 return (
78 <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
79 <span
80 className={`flex shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line ${large ? "size-8" : "size-6"}`}
81 >
82 {isPrivate ? <Lock size={large ? 15 : 13} /> : <Box size={large ? 15 : 13} />}
83 </span>
84 <h1 className={large ? "text-lg" : "text-[0.9375rem]"}>
85 <Link to={`/${namespace}`} className="font-mono text-muted hover:text-fg">
86 {namespace}
87 </Link>
88 <span className="mx-1.5 text-faint">/</span>
89 <Link to={base} className="font-semibold hover:underline">
90 {project?.name ?? name}
91 </Link>
92 </h1>
93 <Pill>{isPrivate ? "private" : "public"}</Pill>
94 {description && <p className="min-w-0 truncate text-sm text-muted">{description}</p>}
95 </div>
96 );
97}
98
99/**
100 * The views of the page the project is on, as tabs across its top: Files,
101 * Commits and what is coming under Code, and so on. Soon tabs open their
102 * roadmap page, under the same tabs.
103 */
104function PageTabs({ base, tabs }: { base: string; tabs: PageTab[] }) {
105 const { pathname } = useLocation();
106 const rest = pathname.slice(base.length + 1);
107 const current = (tab: PageTab) =>
108 [tab.path, ...(tab.also ?? [])].some((path) => rest === path || rest.startsWith(`${path}/`));
109 return (
110 <nav aria-label="Views" className="-mb-px flex gap-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
111 {tabs.map((tab) => (
112 <NavLink
113 key={tab.path}
114 to={`${base}/${tab.path}`}
115 title={tab.about}
116 prefetch="intent"
117 className={`flex shrink-0 items-center gap-1.5 border-b-2 px-3 pt-1 pb-2.5 text-sm transition-colors ${
118 current(tab)
119 ? "border-accent font-medium text-fg"
120 : tab.soon
121 ? "border-transparent text-faint hover:text-muted"
122 : "border-transparent text-muted hover:text-fg"
123 }`}
124 >
125 {tab.label}
126 {/* Soon, said quietly: a dot, with the word for screen readers. */}
127 {tab.soon && (
128 <>
129 <span aria-hidden="true" className="size-1.5 rounded-full bg-accent/70" />
130 <span className="sr-only">(soon)</span>
131 </>
132 )}
133 </NavLink>
134 ))}
135 </nav>
136 );
137}
138
139export default function ProjectLayout({ loaderData }: Route.ComponentProps) {
140 const { repo, project, open, member } = loaderData;
141 const base = `/${repo.namespace}/${repo.name}`;
142 const signedIn = useRouteLoaderData("root")?.user != null;
143 const description = project?.description ?? repo.description;
144 const { pathname } = useLocation();
145 const tabs = tabsFor(pathname.slice(base.length + 1), member);
146 if (signedIn) {
147 return (
148 <>
149 <div className="border-b border-line">
150 <div className={`mx-auto max-w-6xl px-4 sm:px-6 ${tabs ? "pt-3" : "py-3"}`}>
151 <Header
152 project={project}
153 isPrivate={repo.isPrivate}
154 namespace={repo.namespace}
155 name={repo.name}
156 description={description}
157 />
158 <Topics topics={repo.topics} />
159 {tabs && (
160 <div className="mt-3">
161 <PageTabs base={base} tabs={tabs} />
162 </div>
163 )}
164 </div>
165 </div>
166 <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
167 <Outlet />
168 </div>
169 </>
170 );
171 }
172 return (
173 <>
174 {/* The project's own header band, under the site header. */}
175 <div className="border-b border-line bg-surface/60">
176 <div className="mx-auto max-w-6xl px-4 pt-6">
177 <Header
178 project={project}
179 isPrivate={repo.isPrivate}
180 namespace={repo.namespace}
181 name={repo.name}
182 description={null}
183 large
184 />
185 {description && <p className="mt-2 max-w-2xl text-sm text-muted">{description}</p>}
186 <Topics topics={repo.topics} />
187 <nav className="mt-5 flex gap-6 overflow-x-auto">
188 <Tab to={base} end icon={<LayoutGrid size={15} />}>
189 Overview
190 </Tab>
191 <Tab to={`${base}/code`} also={`${base}/tree`} icon={<Code2 size={15} />}>
192 Code
193 </Tab>
194 <Tab to={`${base}/issues`} icon={<CircleDot size={15} />} count={open.issues}>
195 Issues
196 </Tab>
197 <Tab to={`${base}/pulls`} also={`${base}/pull`} icon={<GitPullRequest size={15} />} count={open.pulls}>
198 Pull requests
199 </Tab>
200 <Tab to={`${base}/commits`} icon={<History size={15} />}>
201 Commits
202 </Tab>
203 {member && (
204 <Tab to={`${base}/plans`} icon={<ListTree size={15} />}>
205 Plan
206 </Tab>
207 )}
208 {member && (
209 <Tab to={`${base}/deployments`} icon={<Rocket size={15} />}>
210 Deployments
211 </Tab>
212 )}
213 {member && (
214 <Tab to={`${base}/settings`} icon={<Settings size={15} />}>
215 Settings
216 </Tab>
217 )}
218 </nav>
219 </div>
220 </div>
221 <div className="mx-auto max-w-6xl px-4 py-6">
222 <Outlet />
223 </div>
224 </>
225 );
226}