apps/web/app/components/invites-section.tsx · flagon-io/g1t

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

1

import { Mail } from "lucide-react";

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

2

import { useState } from "react";

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

3

import { Form, Link } from "react-router";

4

5

import type { Invite, InvitesOverview } from "@g1t/contracts";

6

Merge branch 'worktree-agent-a985c01f43538af01'3d ago

7

import { CopyLine, ErrorText, Field, Input, SubmitButton, TimeAgo } from "./ui";

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

8

import { CheckboxOption } from "./ui/checkbox";

9

import { Hint } from "./ui/hint";

Chat controls, public profiles, shadcn selects, and no Docs tab in a project1d ago

10

import { SelectField } from "./ui/select";

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

11

import { G1T_INVITES, inviteFor, inviteKind, inviteLink, invitesPage, inviteState, moreInvitesMailto, remainingLine } from "../lib/invites";

12

import type { BringIntoChoices } from "../lib/invites.server";

Merge workspace invitations: nobody joins a workspace without saying yes, people are found by username, your own invites can bring someone in, and nobody is left without a workspace (identity 0040)1d ago

13

Chat controls, public profiles, shadcn selects, and no Docs tab in a project1d ago

14

const SELECT = "h-auto w-full py-2 sm:w-auto sm:min-w-40";

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

15

16

const TONE: Record<"pending" | "done" | "dead", string> = {

17

pending: "border-accent/40 text-accent",

18

done: "border-merged/40 text-merged",

19

dead: "border-line text-faint",

20

};

21

22

function InviteRow({ invite, origin }: { invite: Invite; origin: string }) {

23

const state = inviteState(invite);

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

24

const kind = inviteKind(invite);

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

25

return (

26

27

28

<span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs ${TONE[state.tone]}`}>{state.label}</span>

29

<span className="min-w-0 truncate text-sm">{inviteFor(invite)}</span>

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

30

<Hint

31

label={

32

kind.kind === "g1t"

33

? "Lets them make an account. It adds them to no workspace."

34

: "An invitation to join this workspace, which they accept or decline. Without an account, it lets them make one first."

35

}

36

>

37

<span className="rounded-full border border-line px-2 py-0.5 text-xs text-muted">{kind.label}</span>

38

</Hint>

Merge workspace invitations: nobody joins a workspace without saying yes, people are found by username, your own invites can bring someone in, and nobody is left without a workspace (identity 0040)1d ago

39

{(invite.status === "pending" || invite.status === "awaiting_confirmation" || invite.status === "awaiting_answer") && (

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

40

41

42

Merge branch 'worktree-agent-a985c01f43538af01'3d ago

43

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

44

Revoke

Merge branch 'worktree-agent-a985c01f43538af01'3d ago

45

</SubmitButton>

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

46

</Form>

47

)}

48

</div>

49

50

<span className="font-mono">{invite.hint}…</span> · made <TimeAgo at={invite.createdAt} />

51

{invite.status === "pending" && (

52

<>

53

{" "}· works until {new Date(invite.expiresAt).toISOString().slice(0, 10)}

54

</>

55

)}

56

{invite.chargedTo === "workspace" && invite.workspace == null && " · from a workspace's invites"}

57

</p>

58

{invite.status === "pending" && invite.code && <CopyLine text={inviteLink(invite.code, origin)} />}

59

</li>

60

);

61

}

62

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

63

/** "To bring someone into a workspace, invite them from that workspace's People page", with those pages. */

64

function Elsewhere({ people }: { people: BringIntoChoices["people"] }) {

65

return (

66

67

{G1T_INVITES.elsewhere}

68

{people.length > 0 ? ": " : "."}

69

{people.map((workspace, index) => (

70

71

{index > 0 && ", "}

72

73

{workspace.name}

74

</Link>

75

</span>

76

))}

77

{people.length > 0 && "."}

78

</p>

79

);

80

}

81

82

/**

83

* Making an invite to g1t: an address (or anyone with the link), whose

84

* invites it uses, and, only when its box is ticked, a workspace to invite

85

* them to as well. Unticked, nothing about a workspace is sent.

86

*/

87

function InviteForm({ overview, bringInto }: { overview: InvitesOverview; bringInto: BringIntoChoices }) {

88

const [alsoJoin, setAlsoJoin] = useState(false);

89

const { workspaces } = overview;

90

return (

91

92

93

94

95

96

97

</Field>

98

</div>

99

{workspaces.length > 0 && (

100

101

Chat controls, public profiles, shadcn selects, and no Docs tab in a project1d ago

102

<SelectField

103

name="charge"

104

defaultValue="mine"

105

className={SELECT}

106

options={[

107

{ value: "mine", label: "Your invites" },

108

...workspaces

109

.filter((workspace) => workspace.allowance.remaining !== 0)

110

.map((workspace) => ({ value: workspace.slug, label: `${workspace.slug}'s invites` })),

111

]}

112

/>

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

113

</label>

114

)}

115

116

Create invite

117

</SubmitButton>

118

</div>

119

<p className="text-xs text-faint">With an email, the invite is sent there and only that address can use it.</p>

120

121

{bringInto.options.length > 0 && (

122

123

<CheckboxOption

124

name="also_join"

125

checked={alsoJoin}

126

onCheckedChange={(checked) => setAlsoJoin(checked === true)}

127

label={G1T_INVITES.alsoJoin}

128

description={G1T_INVITES.alsoJoinHint}

129

/>

130

{alsoJoin && (

131

132

133

<span className="mb-1.5 block text-sm font-medium text-muted">Workspace</span>

Chat controls, public profiles, shadcn selects, and no Docs tab in a project1d ago

134

<SelectField

135

name="join"

136

required

137

placeholder="Choose a workspace"

138

className={SELECT}

139

options={bringInto.options.map((workspace) => ({

140

value: workspace.slug,

141

label: workspace.name === workspace.slug ? workspace.slug : `${workspace.name} (${workspace.slug})`,

142

}))}

143

/>

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

144

</label>

145

146

Chat controls, public profiles, shadcn selects, and no Docs tab in a project1d ago

147

<SelectField

148

name="join_role"

149

defaultValue="member"

150

className={SELECT}

151

options={[

152

{ value: "member", label: "Member" },

153

{ value: "owner", label: "Owner" },

154

]}

155

/>

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

156

</label>

157

</div>

158

)}

159

{alsoJoin && bringInto.note && <p className="pl-6 text-xs text-faint">{bringInto.note}</p>}

160

</div>

161

)}

162

</Form>

163

);

164

}

165

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

166

/**

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

167

* Settings → Invites (`/settings/invites`): invites to g1t. Each lets one

168

* person make an account and adds them to no workspace, unless "Also

169

* invite them to a workspace" is ticked. They exist only while sign-up

170

* takes an invite; once anyone can sign up, the page keeps only the list

171

* of invites already made. An invitation to a workspace is made on its

172

* People page, which this page points to.

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

173

*/

174

export function InvitesSection({

175

overview,

176

created,

177

error,

178

origin = "https://g1t.sh",

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

179

bringInto = { options: [], note: null, people: [] },

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

180

}: {

181

overview: InvitesOverview | null;

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

182

/** The workspaces an invite can also invite its person to, and the People pages (lib/invites.server.ts). */

183

bringInto?: BringIntoChoices;

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

184

created?: Invite;

185

error?: string;

186

origin?: string;

187

}) {

188

if (!overview) {

189

return (

190

status.g1t.sh with incident management, invites that land you in the workspace, settings as pages, usage without quotas4d ago

191

<p className="text-sm text-muted">Confirm your email address to invite people to g1t.</p>

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

192

</section>

193

);

194

}

195

const { allowance, workspaces, invites } = overview;

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

196

const shows = invitesPage(overview.mode, invites.length);

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

197

const out = allowance.remaining === 0 && workspaces.every((workspace) => workspace.allowance.remaining === 0);

198

return (

199

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

200

{shows.form ? (

201

<>

202

<p className="text-sm text-muted">A revoked or expired invite that was never used comes back to you.</p>

203

204

<span className="font-medium">{remainingLine(allowance)}</span>

205

{workspaces.map((workspace) => (

206

207

{" "}· {workspace.slug} has {workspace.allowance.remaining ?? "unlimited"} to share

208

</span>

209

))}

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

210

</p>

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

211

212

{created?.code && (

213

214

215

{created.email ? `Invite sent to ${created.email}. ` : ""}Share this link; it works once

216

{created.email ? ", for that address only" : ""}.

217

</p>

218

219

220

</div>

221

</div>

222

)}

223

224

{out ? (

225

226

227

<p>

228

Need more invites?{" "}

229

230

Contact us

231

</a>{" "}

232

and say who you would like to bring, or ask on the{" "}

233

234

support page

235

</Link>

236

.

237

</p>

238

</div>

239

) : (

240

// Empty again once the invite is made; kept as filled in when it failed.

241

242

)}

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

243

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

244

<ErrorText>{error}</ErrorText>

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

245

</div>

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

246

247

</>

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

248

) : (

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

249

<p className="text-sm text-muted">{G1T_INVITES.open}</p>

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

250

)}

251

252

{invites.length > 0 && (

Merge two kinds of invite, kept apart: an invite to g1t (Settings, invite-only only, no workspace unless asked) and an invitation to a workspace (its People page)1d ago

253

<>

254

{!shows.form && <h2 className="mt-6 text-sm font-medium">Invites you made</h2>}

255

256

{invites.map((invite) => (

257

258

))}

259

</ul>

260

</>

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

261

)}

262

</section>

263

);

264

}