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

153 lines5,560 bytesCodeBlame
1import { Box, CircleDot, Code2, GitPullRequest, History, LayoutGrid, ListTree, Lock, Rocket, Settings } from "lucide-react";
2import { Link, Outlet, data, useRouteLoaderData } from "react-router";
3
4import type { Project } from "@g1t/contracts";
5
6import type { Route } from "./+types/layout";
7import { page } from "../../lib/meta";
8import { Pill, TabLink as Tab } from "../../components/ui";
9import { projects, repos, work } from "../../lib/services.server";
10import { getViewer, roleIn, unwrap } from "../../lib/session.server";
11
12export function meta({ loaderData: loaded, params, ...args }: Route.MetaArgs) {
13 return page(args, { title: `${loaded?.project?.name ?? params.repo} · ${params.owner} · g1t` });
14}
15
16export async function loader({ params, context }: Route.LoaderArgs) {
17 const viewer = getViewer(context);
18 const path = { namespace: params.owner, name: params.repo };
19 const [repo, counts, found] = await Promise.all([
20 repos.get(path, viewer),
21 work.counts(path, viewer),
22 projects.get(params.owner, params.repo, viewer),
23 ]);
24 if (!repo.ok && !found.ok) throw data(null, { status: 404 });
25 let project: Project | null = found.ok ? found.value : null;
26 // A repository made a moment ago, before its project: make it now.
27 if (!project && repo.ok && !repo.value.forkOf) {
28 const own = await projects.byRepo(repo.value.id);
29 project = own.find((p) => p.slug === params.repo.toLowerCase()) ?? own[0] ?? null;
30 }
31 return {
32 repo: unwrap(repo),
33 project,
34 open: counts.ok ? counts.value : { issues: 0, pulls: 0 },
35 member: roleIn(viewer, params.owner) != null,
36 };
37}
38
39/** The project the page is in, for the pages under it. */
40export function useProject() {
41 return useRouteLoaderData<typeof loader>("routes/repo/layout");
42}
43
44function Header({ project, isPrivate, namespace, name, description, large }: {
45 project: Project | null;
46 isPrivate: boolean;
47 namespace: string;
48 name: string;
49 description: string | null;
50 large?: boolean;
51}) {
52 const base = `/${namespace}/${name}`;
53 return (
54 <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
55 <span
56 className={`flex shrink-0 items-center justify-center rounded-md bg-raised text-muted ring-1 ring-line ${large ? "size-8" : "size-6"}`}
57 >
58 {isPrivate ? <Lock size={large ? 15 : 13} /> : <Box size={large ? 15 : 13} />}
59 </span>
60 <h1 className={large ? "text-lg" : "text-[0.9375rem]"}>
61 <Link to={`/${namespace}`} className="font-mono text-muted hover:text-fg">
62 {namespace}
63 </Link>
64 <span className="mx-1.5 text-faint">/</span>
65 <Link to={base} className="font-semibold hover:underline">
66 {project?.name ?? name}
67 </Link>
68 </h1>
69 <Pill>{isPrivate ? "private" : "public"}</Pill>
70 {description && <p className="min-w-0 truncate text-sm text-muted">{description}</p>}
71 </div>
72 );
73}
74
75export default function ProjectLayout({ loaderData }: Route.ComponentProps) {
76 const { repo, project, open, member } = loaderData;
77 const base = `/${repo.namespace}/${repo.name}`;
78 const signedIn = useRouteLoaderData("root")?.user != null;
79 const description = project?.description ?? repo.description;
80 if (signedIn) {
81 return (
82 <>
83 <div className="border-b border-line">
84 <div className="mx-auto max-w-6xl px-4 py-3 sm:px-6">
85 <Header
86 project={project}
87 isPrivate={repo.isPrivate}
88 namespace={repo.namespace}
89 name={repo.name}
90 description={description}
91 />
92 </div>
93 </div>
94 <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6">
95 <Outlet />
96 </div>
97 </>
98 );
99 }
100 return (
101 <>
102 {/* The project's own header band, under the site header. */}
103 <div className="border-b border-line bg-surface/60">
104 <div className="mx-auto max-w-6xl px-4 pt-6">
105 <Header
106 project={project}
107 isPrivate={repo.isPrivate}
108 namespace={repo.namespace}
109 name={repo.name}
110 description={null}
111 large
112 />
113 {description && <p className="mt-2 max-w-2xl text-sm text-muted">{description}</p>}
114 <nav className="mt-5 flex gap-6 overflow-x-auto">
115 <Tab to={base} end icon={<LayoutGrid size={15} />}>
116 Overview
117 </Tab>
118 <Tab to={`${base}/code`} also={`${base}/tree`} icon={<Code2 size={15} />}>
119 Code
120 </Tab>
121 <Tab to={`${base}/issues`} icon={<CircleDot size={15} />} count={open.issues}>
122 Issues
123 </Tab>
124 <Tab to={`${base}/pulls`} also={`${base}/pull`} icon={<GitPullRequest size={15} />} count={open.pulls}>
125 Pull requests
126 </Tab>
127 <Tab to={`${base}/commits`} icon={<History size={15} />}>
128 Commits
129 </Tab>
130 {member && (
131 <Tab to={`${base}/plans`} icon={<ListTree size={15} />}>
132 Plan
133 </Tab>
134 )}
135 {member && (
136 <Tab to={`${base}/deployments`} icon={<Rocket size={15} />}>
137 Deployments
138 </Tab>
139 )}
140 {member && (
141 <Tab to={`${base}/settings`} icon={<Settings size={15} />}>
142 Settings
143 </Tab>
144 )}
145 </nav>
146 </div>
147 </div>
148 <div className="mx-auto max-w-6xl px-4 py-6">
149 <Outlet />
150 </div>
151 </>
152 );
153}