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

import { EMAIL_REASONS, SECURITY_DIGEST_CHOICES, WATCH_CHOICES, WATCH_EVENT_LABEL, emailReasonsFromForm, securityDigestFromForm } from "../../lib/inbox";

21

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

22

import { identity, inbox } from "../../lib/services.server";

23

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

24

import { Unavailable } from "../../components/boundary";

25

import { isFailed, part } from "../../lib/partial";

26

// Live notifications: pop-ups and browser notifications (services/notify).

27

import { LiveNotificationSettings } from "../../components/notifications/settings";

28

// Sounds, Do not disturb and desktop notifications (identity, notify).

29

import { SoundSettingsSection } from "../../components/notifications/sounds";

30

31

export function meta(args: Route.MetaArgs) {

32

return page(args, { title: "Notifications · Settings · g1t" });

33

}

34

35

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

36

const user = requireUser(context, request);

37

// Each section stands on its own read: one that could not be read says so

38

// in its place, and its form is not offered over values not known. The

39

// sounds save one change at a time, so without them the section starts

40

// from what the page already has (the root's read) and loses nothing.

41

const [settings, watched, sounds] = await Promise.all([

42

part(inbox.settings(user.username), "Notification settings"),

43

part(inbox.watched(user.username), "Repositories you watch"),

44

identity.soundSettings(user).catch(() => null),

45

]);

46

return { settings, watched, sounds, workspaces: user.workspaces ?? [] };

47

}

48

49

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

50

assertSameOrigin(request);

51

const user = requireUser(context, request);

52

const form = await request.formData();

53

const intent = String(form.get("intent") ?? "");

54

// One shape for every answer: what was said, beside the form that asked.

55

const answer = (saved: string | null, error: string | null = null) => ({ intent, saved, error });

try {

switch (intent) {

case "email":

await inbox.updateSettings(user.username, { email: emailReasonsFromForm(form) });

60

return answer("Saved. You'll be emailed for what is checked.");

61

case "security": {

62

const cadence: DigestCadence | null = securityDigestFromForm(form);

63

if (!cadence) return data(answer(null, "Choose when the rest of the security alerts reach you."), { status: 400 });

64

await inbox.updateSettings(user.username, { securityAlerts: form.get("security_alerts") === "on", securityDigest: cadence });

65

return answer("Saved. Critical and high alerts on repositories you look after still reach you at once.");

66

}

67

case "default_watch": {

68

const level = String(form.get("default_watch") ?? "");

69

if (level !== "participating" && level !== "all") return data(answer(null, "Choose one."), { status: 400 });

70

await inbox.updateSettings(user.username, { defaultWatch: level });

71

return answer("Saved. It applies to repositories you create from now on.");

72

}

73

case "unwatch": {

74

const repoId = String(form.get("repo_id") ?? "");

75

if (!repoId) return data(answer(null, "Nothing to do."), { status: 400 });

76

await inbox.watch(user.username, repoId, String(form.get("repo") ?? ""), null);

return answer(null);

}

default:

return data(answer(null, "Nothing to do."), { status: 400 });

81

}

82

} catch {

83

return data(answer(null, "That did not save. Try again in a moment."), { status: 503 });

}

}

const LEVEL_LABEL: Record<WatchLevel, string> = Object.fromEntries(WATCH_CHOICES.map((choice) => [choice.level, choice.label])) as Record<WatchLevel, string>;

88

89

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

90

const { watched, sounds, workspaces } = loaderData;

91

const settings = isFailed(loaderData.settings) ? null : loaderData.settings;

92

const navigation = useNavigation();

93

const said = (intent: string) => (actionData?.intent === intent && navigation.state === "idle" ? actionData : null);

return (

Email

</h2>

Besides your{" "}

notifications

</Link>

, email me at my primary address when:

</p>

{settings ? (

{EMAIL_REASONS.map((entry) => (

<CheckboxOption

key={entry.reason}

name="email"

value={entry.reason}

defaultChecked={settings.email.includes(entry.reason)}

118

label={entry.label}

119

description={entry.detail}

/>

))}

Save email settings

</SubmitButton>

{said("email")?.saved && <p className="text-xs text-success">{said("email")?.saved}</p>}

127

</div>

128

<ErrorText>{said("email")?.error}</ErrorText>

</Form>

) : (

</div>

)}

<p className="mt-3 text-xs text-faint">Email goes only to a confirmed address, and only about repositories you can still read.</p>

</section>

Security

</h2>

Each scan of a repository is one item, brought up to date by the next scan. Critical and high alerts, a push of yours that push protection refused and

144

a vulnerability report reach you at once; the rest, as you choose here. The workspaces you own, or manage security for, tell you of their urgent

145

alerts whatever you choose.

</p>

{settings ? (

On repositories you watch for security alerts. Off, you hear of them only in the repositories you own or manage security for.

152

</SwitchCard>

153

<div>

154

<p className="mb-2 text-sm font-medium">Medium and low alerts</p>

155

156

{SECURITY_DIGEST_CHOICES.map((choice) => (

))}

</RadioGroup>

</div>

Save security settings

164

</SubmitButton>

165

{said("security")?.saved && <p className="text-xs text-success">{said("security")?.saved}</p>}

166

</div>

167

<ErrorText>{said("security")?.error}</ErrorText>

</Form>

) : (

</div>

)}

<p className="mt-3 text-xs text-faint">Email for security alerts follows the Email section above: on by default.</p>

</section>

Repositories you create

180

</h2>

181

<p className="mt-1 text-sm text-muted">How you watch a repository when you make it. Change any one from its Watch menu.</p>

{settings ? (

{WATCH_CHOICES.filter((choice) => choice.level === "all" || choice.level === "participating").map((choice) => (

))}

</RadioGroup>

Save

</SubmitButton>

{said("default_watch")?.saved && <p className="text-xs text-success">{said("default_watch")?.saved}</p>}

195

</div>

196

<ErrorText>{said("default_watch")?.error}</ErrorText>

</Form>

) : (

</div>

)}

</section>

Repositories you watch

208

</h2>

209

<p className="mt-1 text-sm text-muted">Those you watch other than the default way, which is only what you take part in.</p>

210

{isFailed(watched) ? (

</div>

) : watched.length === 0 ? (

215

216

<p>You watch every repository the default way.</p>

</Card>

) : (

{watched.map((watching) => (

221

222

{watching.level === "ignore" ? (

) : (

)}

{watching.repo ? (

{watching.repo}

</Link>

) : (

<span className="block truncate font-mono text-sm text-muted">{watching.repoId}</span>

234

)}

235

236

{LEVEL_LABEL[watching.level]}

237

{watching.level === "custom" && watching.events.length > 0 && `: ${watching.events.map((kind) => WATCH_EVENT_LABEL[kind]).join(", ")}`}

</p>

</div>

<SubmitButton

variant="outline"

match={{ intent: "unwatch", repo_id: watching.repoId }}

247

pending="…"

248

className="rounded-md border border-line px-2.5 py-1 text-xs text-muted transition-colors hover:border-line-strong hover:text-fg disabled:opacity-60"

249

>

250

{watching.level === "ignore" ? "Stop ignoring" : "Stop watching"}

</SubmitButton>

</Form>

</li>

))}

</ul>

)}

</section>

</div>

);

}