gitfor/platform

import { createFileRoute } from "@tanstack/react-router";
import { getCategoryPrefs, getNotificationSettings, updateNotificationSettings } from "~/fns/notification-settings";
import { NotificationCategoriesPanel } from "~/components/settings/NotificationCategoriesPanel";
import { getSecuritySettings } from "~/fns/account-security";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { CheckboxField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Panel } from "~/ui/Panel";

export const Route = createFileRoute("/settings/notifications")({
  loader: async () => {
    const [settings, security, categories] = await Promise.all([
      getNotificationSettings(),
      getSecuritySettings(),
      getCategoryPrefs(),
    ]);
    const primary = security.emails.find((entry) => entry.primary);
    if (!primary) throw new Error("Account has no primary email");
    return { settings, categories, emailVerified: primary.verified, email: primary.email };
  },
  head: () => ({ meta: [{ title: "Notification settings · gitfor" }] }),
  component: NotificationSettingsPage,
});

function NotificationSettingsPage() {
  const { settings, categories, emailVerified, email } = Route.useLoaderData();
  const save = useAction(updateNotificationSettings);

  return (
    <div className="space-y-8">
      <form
        className="space-y-6"
        onSubmit={(event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          save.run({
            data: {
              emailParticipating: form.has("emailParticipating"),
              emailWatching: form.has("emailWatching"),