Skip to content
Sign up

flagon-io/g1t

public
00

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
261 linesCodeBlameRaw
1/**
2 * Settings → Notifications: what you hear when chat moves and Do not
3 * disturb (identity keeps the sounds, notify your presence), what pops up
4 * and is pushed (notify), what you are also emailed for, how you watch
5 * repositories you create, and the repositories you watch other than the
6 * default way. The events service keeps those three (`inbox_settings`,
7 * `inbox_watched`); the notifications themselves are at /notifications.
8 */
9import { Eye, EyeOff } from "lucide-react";
10import { Form, Link, data, useNavigation } from "react-router";
11
12import type { DigestCadence, WatchLevel } from "@g1t/contracts";
13
14import type { Route } from "./+types/notifications";
15import { ErrorText, SubmitButton } from "../../components/ui";
16import { Card } from "../../components/ui/card";
17import { CheckboxOption } from "../../components/ui/checkbox";
18import { SwitchCard } from "../../components/ui/switch";
19import { RadioGroup, RadioOption } from "../../components/ui/radio-group";
20import { EMAIL_REASONS, SECURITY_DIGEST_CHOICES, WATCH_CHOICES, WATCH_EVENT_LABEL, emailReasonsFromForm, securityDigestFromForm } from "../../lib/inbox";
21import { page } from "../../lib/meta";
22import { identity, inbox } from "../../lib/services.server";
23import { assertSameOrigin, requireUser } from "../../lib/session.server";
24import { Unavailable } from "../../components/boundary";
25import { isFailed, part } from "../../lib/partial";
26// Live notifications: pop-ups and browser notifications (services/notify).
27import { LiveNotificationSettings } from "../../components/notifications/settings";
28// Sounds, Do not disturb and desktop notifications (identity, notify).
29import { SoundSettingsSection } from "../../components/notifications/sounds";
30
31export function meta(args: Route.MetaArgs) {
32 return page(args, { title: "Notifications · Settings · g1t" });
33}
34
35export 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
49export 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 });
56 try {
57 switch (intent) {
58 case "email":
59 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);
77 return answer(null);
78 }
79 default:
80 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 });
84 }
85}
86
87const LEVEL_LABEL: Record<WatchLevel, string> = Object.fromEntries(WATCH_CHOICES.map((choice) => [choice.level, choice.label])) as Record<
88 WatchLevel,
89 string
90>;
91
92export default function NotificationSettings({ loaderData, actionData }: Route.ComponentProps) {
93 const { watched, sounds, workspaces } = loaderData;
94 const settings = isFailed(loaderData.settings) ? null : loaderData.settings;
95 const navigation = useNavigation();
96 const said = (intent: string) => (actionData?.intent === intent && navigation.state === "idle" ? actionData : null);
97 return (
98 <div className="space-y-10">
99 <SoundSettingsSection initial={sounds} />
100 <LiveNotificationSettings workspaces={workspaces} />
101 <section aria-labelledby="email-heading">
102 <h2 id="email-heading" className="text-sm font-semibold">
103 Email
104 </h2>
105 <p className="mt-1 text-sm text-muted">
106 Besides your <Link to="/notifications" className="text-fg underline underline-offset-4">notifications</Link>, email me at my primary address when:
107 </p>
108 {settings ? (
109 <Form method="post" className="mt-4 space-y-3">
110 <input type="hidden" name="intent" value="email" />
111 {EMAIL_REASONS.map((entry) => (
112 <CheckboxOption
113 key={entry.reason}
114 name="email"
115 value={entry.reason}
116 defaultChecked={settings.email.includes(entry.reason)}
117 label={entry.label}
118 description={entry.detail}
119 />
120 ))}
121 <div className="flex items-center gap-3 pt-2">
122 <SubmitButton variant="outline" match={{ intent: "email" }} pending="Saving…">
123 Save email settings
124 </SubmitButton>
125 {said("email")?.saved && <p className="text-xs text-success">{said("email")?.saved}</p>}
126 </div>
127 <ErrorText>{said("email")?.error}</ErrorText>
128 </Form>
129 ) : (
130 <div className="mt-4">
131 <Unavailable what="Your email settings" />
132 </div>
133 )}
134 <p className="mt-3 text-xs text-faint">Email goes only to a confirmed address, and only about repositories you can still read.</p>
135 </section>
136
137 <section aria-labelledby="security-heading">
138 <h2 id="security-heading" className="text-sm font-semibold">
139 Security
140 </h2>
141 <p className="mt-1 text-sm text-muted">
142 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
143 and 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
144 urgent alerts whatever you choose.
145 </p>
146 {settings ? (
147 <Form method="post" className="mt-4 space-y-4">
148 <input type="hidden" name="intent" value="security" />
149 <SwitchCard name="security_alerts" title="Critical and high alerts at once" defaultChecked={settings.securityAlerts}>
150 On repositories you watch for security alerts. Off, you hear of them only in the repositories you own or manage security for.
151 </SwitchCard>
152 <div>
153 <p className="mb-2 text-sm font-medium">Medium and low alerts</p>
154 <RadioGroup name="security_digest" defaultValue={settings.securityDigest}>
155 {SECURITY_DIGEST_CHOICES.map((choice) => (
156 <RadioOption key={choice.cadence} value={choice.cadence} label={choice.label} description={choice.detail} />
157 ))}
158 </RadioGroup>
159 </div>
160 <div className="flex items-center gap-3">
161 <SubmitButton variant="outline" match={{ intent: "security" }} pending="Saving…">
162 Save security settings
163 </SubmitButton>
164 {said("security")?.saved && <p className="text-xs text-success">{said("security")?.saved}</p>}
165 </div>
166 <ErrorText>{said("security")?.error}</ErrorText>
167 </Form>
168 ) : (
169 <div className="mt-4">
170 <Unavailable what="Your security notification settings" />
171 </div>
172 )}
173 <p className="mt-3 text-xs text-faint">Email for security alerts follows the Email section above: on by default.</p>
174 </section>
175
176 <section aria-labelledby="watching-heading">
177 <h2 id="watching-heading" className="text-sm font-semibold">
178 Repositories you create
179 </h2>
180 <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>
181 {settings ? (
182 <Form method="post" className="mt-4">
183 <input type="hidden" name="intent" value="default_watch" />
184 <RadioGroup name="default_watch" defaultValue={settings.defaultWatch === "participating" ? "participating" : "all"}>
185 {WATCH_CHOICES.filter((choice) => choice.level === "all" || choice.level === "participating").map((choice) => (
186 <RadioOption key={choice.level} value={choice.level} label={choice.label} description={choice.detail} />
187 ))}
188 </RadioGroup>
189 <div className="mt-4 flex items-center gap-3">
190 <SubmitButton variant="outline" match={{ intent: "default_watch" }} pending="Saving…">
191 Save
192 </SubmitButton>
193 {said("default_watch")?.saved && <p className="text-xs text-success">{said("default_watch")?.saved}</p>}
194 </div>
195 <ErrorText>{said("default_watch")?.error}</ErrorText>
196 </Form>
197 ) : (
198 <div className="mt-4">
199 <Unavailable what="How you watch what you create" />
200 </div>
201 )}
202 </section>
203
204 <section aria-labelledby="watched-heading">
205 <h2 id="watched-heading" className="text-sm font-semibold">
206 Repositories you watch
207 </h2>
208 <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>
209 {isFailed(watched) ? (
210 <div className="mt-4">
211 <Unavailable what="Repositories you watch" />
212 </div>
213 ) : watched.length === 0 ? (
214 <Card asChild tone="plain" radius="lg" className="mt-4 border-dashed px-4 py-6 text-center text-sm text-muted">
215 <p>
216 You watch every repository the default way.
217 </p>
218 </Card>
219 ) : (
220 <ul className="mt-4 divide-y divide-line rounded-md border border-line">
221 {watched.map((watching) => (
222 <li key={watching.repoId} className="flex items-center gap-3 px-4 py-3">
223 {watching.level === "ignore" ? (
224 <EyeOff size={15} className="shrink-0 text-faint" aria-hidden="true" />
225 ) : (
226 <Eye size={15} className="shrink-0 text-faint" aria-hidden="true" />
227 )}
228 <div className="min-w-0 grow">
229 {watching.repo ? (
230 <Link to={`/${watching.repo}`} className="block truncate font-mono text-sm hover:underline">
231 {watching.repo}
232 </Link>
233 ) : (
234 <span className="block truncate font-mono text-sm text-muted">{watching.repoId}</span>
235 )}
236 <p className="truncate text-xs text-muted">
237 {LEVEL_LABEL[watching.level]}
238 {watching.level === "custom" && watching.events.length > 0 && `: ${watching.events.map((kind) => WATCH_EVENT_LABEL[kind]).join(", ")}`}
239 </p>
240 </div>
241 <Form method="post" className="shrink-0">
242 <input type="hidden" name="intent" value="unwatch" />
243 <input type="hidden" name="repo_id" value={watching.repoId} />
244 <input type="hidden" name="repo" value={watching.repo ?? ""} />
245 <SubmitButton
246 variant="outline"
247 match={{ intent: "unwatch", repo_id: watching.repoId }}
248 pending="…"
249 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"
250 >
251 {watching.level === "ignore" ? "Stop ignoring" : "Stop watching"}
252 </SubmitButton>
253 </Form>
254 </li>
255 ))}
256 </ul>
257 )}
258 </section>
259 </div>
260 );
261}