apps/web/app/routes/new.tsx · flagon-io/g1t

Workspace names and icons, and a component kit for every control2d ago

1

import { Box, Download, GitBranch, Globe, Lock, Sparkles } from "lucide-react";

Projects: what a workspace builds and runs, first on every page2d ago

2

import { useState } from "react";

Merge branch 'worktree-agent-a985c01f43538af01'12h ago

3

import { Form, redirect, useNavigate } from "react-router";

Initial g1t: services, event bus, intents and attempts5d ago

4

5

import type { Route } from "./+types/new";

Social cards for every page: og.g1t.sh2d ago

6

import { page } from "../lib/meta";

Merge branch 'worktree-agent-a985c01f43538af01'12h ago

7

import { Avatar, ErrorText, SubmitButton } from "../components/ui";

Workspace names and icons, and a component kit for every control2d ago

8

import { Field, FieldDescription, FieldLabel, FieldLegend, FieldSet } from "../components/ui/field";

9

import { Input, InputAddon, InputGroup } from "../components/ui/input";

10

import { RadioCard, RadioGroup } from "../components/ui/radio-group";

11

import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "../components/ui/select";

Rust repos service with shipping; pull requests kept in the model5d ago

12

import { repos } from "../lib/services.server";

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1d ago

13

import { GithubMark } from "../components/github";

14

import { githubApp } from "../lib/github.server";

Initial g1t: services, event bus, intents and attempts5d ago

15

import { assertSameOrigin, requireUser } from "../lib/session.server";

16

Social cards for every page: og.g1t.sh2d ago

17

export function meta(args: Route.MetaArgs) {

18

return page(args, { title: "New project · g1t" });

Initial g1t: services, event bus, intents and attempts5d ago

19

}

20

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1d ago

21

export async function loader({ request, context }: Route.LoaderArgs) {

Workspaces own repositories5d ago

22

const user = requireUser(context, request);

Workspace names and icons, and a component kit for every control2d ago

23

const workspaces = (user.workspaces ?? []).map((membership) => ({

24

slug: membership.slug,

25

role: membership.role,

26

name: membership.name ?? membership.slug,

27

avatar: membership.avatar ?? null,

28

}));

Projects: what a workspace builds and runs, first on every page2d ago

29

// Projects live in a workspace, so there has to be one first.

Workspaces own repositories5d ago

30

if (workspaces.length === 0) throw redirect("/workspaces/new");

31

const asked = new URL(request.url).searchParams.get("workspace");

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1d ago

32

const selected = asked && workspaces.some((workspace) => workspace.slug === asked) ? asked : workspaces[0].slug;

33

// With g1t's GitHub App configured, repositories can come from GitHub.

34

const github = await githubApp.status(user, selected).catch(() => null);

35

return { workspaces, selected, github: Boolean(github?.ok && github.value.configured) };

Initial g1t: services, event bus, intents and attempts5d ago

36

}

37

38

export async function action({ request, context }: Route.ActionArgs) {

39

assertSameOrigin(request);

40

const user = requireUser(context, request);

41

const form = await request.formData();

Projects: what a workspace builds and runs, first on every page2d ago

42

// A project hosted on g1t: its repository is made with it, and the

43

// project takes the repository's name.

Rust repos service with shipping; pull requests kept in the model5d ago

44

const result = await repos.create(user, {

Workspaces own repositories5d ago

45

namespace: String(form.get("workspace") ?? ""),

Initial g1t: services, event bus, intents and attempts5d ago

46

name: String(form.get("name") ?? ""),

47

description: String(form.get("description") ?? ""),

48

isPrivate: form.get("visibility") === "private",

Projects: what a workspace builds and runs, first on every page2d ago

49

importUrl: form.get("source") === "import" ? String(form.get("importUrl") ?? "").trim() || undefined : undefined,

Initial g1t: services, event bus, intents and attempts5d ago

50

});

51

if (!result.ok) return { error: result.error.message };

52

throw redirect(`/${result.value.namespace}/${result.value.name}`);

53

}

54

Projects: what a workspace builds and runs, first on every page2d ago

55

type Source = "empty" | "import";

56

57

const SOURCES: { id: Source | "mirror"; title: string; text: string; icon: React.ReactNode; soon?: boolean }[] = [

58

{

59

id: "empty",

60

title: "Start empty",

61

text: "A new repository on g1t. Push to it, or hand an agent the first issue.",

Workspace names and icons, and a component kit for every control2d ago

62

icon: <Sparkles />,

Projects: what a workspace builds and runs, first on every page2d ago

63

},

64

{

65

id: "import",

66

title: "Import code",

67

text: "Copy a public repository from GitHub or any git host into a new one on g1t.",

Workspace names and icons, and a component kit for every control2d ago

68

icon: <Download />,

Projects: what a workspace builds and runs, first on every page2d ago

69

},

70

{

71

id: "mirror",

72

title: "Mirror GitHub, GitLab or Bitbucket",

g1t is one name: its agent's work, commits and comments show as @g1t, and nobody can claim g1t or g1t-agent1d ago

73

text: "Keep the code where it is and work on it with g1t. Deployments are yours to turn on.",

Workspace names and icons, and a component kit for every control2d ago

74

icon: <GitBranch />,

Projects: what a workspace builds and runs, first on every page2d ago

75

soon: true,

76

},

77

];

78

Workspace names and icons, and a component kit for every control2d ago

79

const ROLE_LABELS: Record<string, string> = { owner: "Owner", admin: "Admin", member: "Member" };

80

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1d ago

81

/** Replaces the mirror card when g1t's GitHub App is configured. */

82

const GITHUB_SOURCE = {

83

id: "github" as const,

84

title: "Import from GitHub",

85

text: "Import, mirror or move repositories you can reach on GitHub, private ones too.",

86

icon: <GithubMark />,

87

soon: false,

88

};

89

Projects: what a workspace builds and runs, first on every page2d ago

90

export default function NewProject({ loaderData, actionData }: Route.ComponentProps) {

91

const [source, setSource] = useState<Source>("empty");

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1d ago

92

const navigate = useNavigate();

93

const sources = loaderData.github ? SOURCES.map((option) => (option.id === "mirror" ? GITHUB_SOURCE : option)) : SOURCES;

Workspace names and icons, and a component kit for every control2d ago

94

const [workspace, setWorkspace] = useState(loaderData.selected);

95

const [name, setName] = useState("");

Initial g1t: services, event bus, intents and attempts5d ago

96

return (

Projects: what a workspace builds and runs, first on every page2d ago

97

98

99

100

</span>

101

<h1 className="mt-4 text-2xl font-semibold tracking-tight">New project</h1>

102

103

A project is what you build and run. Its code lives in its source; its deployments, environments, secrets and

104

variables belong to the project.

105

</p>

106

107

Workspace names and icons, and a component kit for every control2d ago

108

109

<FieldLegend>Where its code comes from</FieldLegend>

110

<RadioGroup

111

name="source"

112

value={source}

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1d ago

113

onValueChange={(value) =>

114

value === "github" ? navigate(`/new/github?workspace=${workspace}`) : setSource(value as Source)

115

}

Workspace names and icons, and a component kit for every control2d ago

116

aria-label="Where its code comes from"

117

className="gap-3 sm:grid-cols-3"

118

>

Invite-only launch: sign in with GitHub, repository access and lifecycle, many emails, a new look1d ago

119

{sources.map((option) => (

Workspace names and icons, and a component kit for every control2d ago

120

<RadioCard

121

key={option.id}

122

value={option.id}

123

title={option.title}

124

description={option.text}

125

icon={option.icon}

126

disabled={option.soon}

127

badge={option.soon ? "Soon" : undefined}

128

/>

129

))}

130

</RadioGroup>

131

</FieldSet>

Projects: what a workspace builds and runs, first on every page2d ago

132

133

{source === "import" && (

Workspace names and icons, and a component kit for every control2d ago

134

135

<FieldLabel htmlFor="importUrl">Repository to import</FieldLabel>

136

137

<FieldDescription>The address of a public repository. Its default branch is copied, up to 40 MB.</FieldDescription>

Projects: what a workspace builds and runs, first on every page2d ago

138

</Field>

139

)}

140

Workspace names and icons, and a component kit for every control2d ago

141

<Field>

142

143

144

145

<SelectTrigger

146

aria-label="Workspace"

147

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%]"

148

>

149

150

</SelectTrigger>

151

152

153

<SelectLabel>Workspaces</SelectLabel>

154

{loaderData.workspaces.map((option) => (

155

<SelectItem

156

key={option.slug}

157

value={option.slug}

158

icon={<Avatar name={option.name} image={option.avatar} size={18} square />}

159

description={`g1t.sh/${option.slug} · ${ROLE_LABELS[option.role] ?? option.role}`}

160

>

161

{option.name}

162

</SelectItem>

163

))}

164

</SelectGroup>

165

</SelectContent>

166

</Select>

167

168

<Input

169

id="name"

170

name="name"

171

required

172

autoFocus

173

maxLength={100}

174

placeholder="my-app"

175

value={name}

176

onChange={(event) => setName(event.target.value)}

177

className="pl-1 font-mono"

178

/>

179

</InputGroup>

180

181

The project and its repository share it:{" "}

182

183

g1t.sh/{workspace}/<span className={name ? "text-fg" : undefined}>{name || "name"}</span>

184

</span>

185

</FieldDescription>

Initial g1t: services, event bus, intents and attempts5d ago

186

</Field>

Workspace names and icons, and a component kit for every control2d ago

187

188

<Field>

189

190

Description <span className="font-normal text-faint">(optional)</span>

191

</FieldLabel>

192

Agents as a team: lifecycle, merge queue, billing and a new shell4d ago

193

</Field>

Workspace names and icons, and a component kit for every control2d ago

194

195

196

197

198

<RadioCard

199

value="public"

200

icon={<Globe />}

201

title="Public"

202

description="Anyone can see its code and open issues."

203

/>

204

<RadioCard

205

value="private"

206

icon={<Lock />}

207

title="Private"

208

description="Only members of the workspace."

209

/>

210

</RadioGroup>

211

</FieldSet>

212

Initial g1t: services, event bus, intents and attempts5d ago

213

<ErrorText>{actionData?.error}</ErrorText>

Merge branch 'worktree-agent-a985c01f43538af01'12h ago

214

Projects: what a workspace builds and runs, first on every page2d ago

215

Create project

Merge branch 'worktree-agent-a985c01f43538af01'12h ago

216

</SubmitButton>

Initial g1t: services, event bus, intents and attempts5d ago

217

</Form>

218

</main>

219

);

220

}