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/new.tsx

206 lines8,402 bytesCodeBlame
1import { Box, Download, GitBranch, Globe, Lock, Sparkles } from "lucide-react";
2import { useState } from "react";
3import { Form, redirect, useNavigation } from "react-router";
4
5import type { Route } from "./+types/new";
6import { page } from "../lib/meta";
7import { Avatar, Button, ErrorText } from "../components/ui";
8import { Field, FieldDescription, FieldLabel, FieldLegend, FieldSet } from "../components/ui/field";
9import { Input, InputAddon, InputGroup } from "../components/ui/input";
10import { RadioCard, RadioGroup } from "../components/ui/radio-group";
11import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../components/ui/select";
12import { repos } from "../lib/services.server";
13import { assertSameOrigin, requireUser } from "../lib/session.server";
14
15export function meta(args: Route.MetaArgs) {
16 return page(args, { title: "New project · g1t" });
17}
18
19export function loader({ request, context }: Route.LoaderArgs) {
20 const user = requireUser(context, request);
21 const workspaces = (user.workspaces ?? []).map((membership) => ({
22 slug: membership.slug,
23 role: membership.role,
24 name: membership.name ?? membership.slug,
25 avatar: membership.avatar ?? null,
26 }));
27 // Projects live in a workspace, so there has to be one first.
28 if (workspaces.length === 0) throw redirect("/workspaces/new");
29 const asked = new URL(request.url).searchParams.get("workspace");
30 return {
31 workspaces,
32 selected: asked && workspaces.some((workspace) => workspace.slug === asked) ? asked : workspaces[0].slug,
33 };
34}
35
36export async function action({ request, context }: Route.ActionArgs) {
37 assertSameOrigin(request);
38 const user = requireUser(context, request);
39 const form = await request.formData();
40 // A project hosted on g1t: its repository is made with it, and the
41 // project takes the repository's name.
42 const result = await repos.create(user, {
43 namespace: String(form.get("workspace") ?? ""),
44 name: String(form.get("name") ?? ""),
45 description: String(form.get("description") ?? ""),
46 isPrivate: form.get("visibility") === "private",
47 importUrl: form.get("source") === "import" ? String(form.get("importUrl") ?? "").trim() || undefined : undefined,
48 });
49 if (!result.ok) return { error: result.error.message };
50 throw redirect(`/${result.value.namespace}/${result.value.name}`);
51}
52
53type Source = "empty" | "import";
54
55const SOURCES: { id: Source | "mirror"; title: string; text: string; icon: React.ReactNode; soon?: boolean }[] = [
56 {
57 id: "empty",
58 title: "Start empty",
59 text: "A new repository on g1t. Push to it, or hand an agent the first issue.",
60 icon: <Sparkles />,
61 },
62 {
63 id: "import",
64 title: "Import code",
65 text: "Copy a public repository from GitHub or any git host into a new one on g1t.",
66 icon: <Download />,
67 },
68 {
69 id: "mirror",
70 title: "Mirror GitHub, GitLab or Bitbucket",
71 text: "Keep the code where it is and get g1t's deployments and agents on it.",
72 icon: <GitBranch />,
73 soon: true,
74 },
75];
76
77const ROLE_LABELS: Record<string, string> = { owner: "Owner", admin: "Admin", member: "Member" };
78
79export default function NewProject({ loaderData, actionData }: Route.ComponentProps) {
80 const [source, setSource] = useState<Source>("empty");
81 const [workspace, setWorkspace] = useState(loaderData.selected);
82 const [name, setName] = useState("");
83 const busy = useNavigation().state === "submitting";
84 return (
85 <main className="mx-auto max-w-2xl px-4 py-12">
86 <span className="flex size-10 items-center justify-center rounded-xl bg-accent/10 text-accent ring-1 ring-accent/30">
87 <Box size={18} />
88 </span>
89 <h1 className="mt-4 text-2xl font-semibold tracking-tight">New project</h1>
90 <p className="mt-1.5 text-sm text-muted">
91 A project is what you build and run. Its code lives in its source; its deployments, environments, secrets and
92 variables belong to the project.
93 </p>
94
95 <Form method="post" className="mt-8 space-y-8">
96 <FieldSet>
97 <FieldLegend>Where its code comes from</FieldLegend>
98 <RadioGroup
99 name="source"
100 value={source}
101 onValueChange={(value) => setSource(value as Source)}
102 aria-label="Where its code comes from"
103 className="gap-3 sm:grid-cols-3"
104 >
105 {SOURCES.map((option) => (
106 <RadioCard
107 key={option.id}
108 value={option.id}
109 title={option.title}
110 description={option.text}
111 icon={option.icon}
112 disabled={option.soon}
113 badge={option.soon ? "Soon" : undefined}
114 />
115 ))}
116 </RadioGroup>
117 </FieldSet>
118
119 {source === "import" && (
120 <Field className="animate-fade-in">
121 <FieldLabel htmlFor="importUrl">Repository to import</FieldLabel>
122 <Input id="importUrl" name="importUrl" type="url" required placeholder="https://github.com/owner/repo" />
123 <FieldDescription>The address of a public repository. Its default branch is copied, up to 40 MB.</FieldDescription>
124 </Field>
125 )}
126
127 <Field>
128 <FieldLabel htmlFor="name">Name</FieldLabel>
129 <InputGroup className="h-10">
130 <Select name="workspace" value={workspace} onValueChange={setWorkspace}>
131 <SelectTrigger
132 aria-label="Workspace"
133 className="h-full w-auto max-w-[55%] shrink-0 rounded-none border-0 bg-surface px-2.5 font-medium hover:bg-raised focus-visible:ring-0 data-[state=open]:bg-raised data-[state=open]:ring-0 sm:max-w-[45%]"
134 >
135 <SelectValue />
136 </SelectTrigger>
137 <SelectContent align="start" className="min-w-64">
138 <SelectGroup>
139 <SelectLabel>Workspaces</SelectLabel>
140 {loaderData.workspaces.map((option) => (
141 <SelectItem
142 key={option.slug}
143 value={option.slug}
144 icon={<Avatar name={option.name} image={option.avatar} size={18} square />}
145 description={`g1t.sh/${option.slug} · ${ROLE_LABELS[option.role] ?? option.role}`}
146 >
147 {option.name}
148 </SelectItem>
149 ))}
150 </SelectGroup>
151 </SelectContent>
152 </Select>
153 <InputAddon className="border-l border-line px-2 font-mono text-base text-faint">/</InputAddon>
154 <Input
155 id="name"
156 name="name"
157 required
158 autoFocus
159 maxLength={100}
160 placeholder="my-app"
161 value={name}
162 onChange={(event) => setName(event.target.value)}
163 className="pl-1 font-mono"
164 />
165 </InputGroup>
166 <FieldDescription>
167 The project and its repository share it:{" "}
168 <span className="font-mono text-muted">
169 g1t.sh/{workspace}/<span className={name ? "text-fg" : undefined}>{name || "name"}</span>
170 </span>
171 </FieldDescription>
172 </Field>
173
174 <Field>
175 <FieldLabel htmlFor="description">
176 Description <span className="font-normal text-faint">(optional)</span>
177 </FieldLabel>
178 <Input id="description" name="description" maxLength={200} placeholder="What it is, in a line" />
179 </Field>
180
181 <FieldSet>
182 <FieldLegend>Who can see it</FieldLegend>
183 <RadioGroup name="visibility" defaultValue="public" aria-label="Who can see it" className="gap-3 sm:grid-cols-2">
184 <RadioCard
185 value="public"
186 icon={<Globe />}
187 title="Public"
188 description="Anyone can see its code and open issues."
189 />
190 <RadioCard
191 value="private"
192 icon={<Lock />}
193 title="Private"
194 description="Only members of the workspace."
195 />
196 </RadioGroup>
197 </FieldSet>
198
199 <ErrorText>{actionData?.error}</ErrorText>
200 <Button type="submit" variant="accent" disabled={busy}>
201 Create project
202 </Button>
203 </Form>
204 </main>
205 );
206}