Ekklesia/surfaces/shell/src/browser/AccountPages.tsx

import { designToken } from "@ekklesia/design-tokens";
import { Button, ErrorState, InlineNotice, PageHeader, Panel } from "@ekklesia/ui";
import {
  type ReactElement,
  useCallback,
  useEffect,
  useId,
  useRef,
  useState,
  useSyncExternalStore,
} from "react";
import type { DashboardDestination } from "../dashboard-routes.js";
import {
  type EkklesiaHostConfig,
  type HostAccount,
  type HostAccountPreferences,
  HostProtocolError,
  saveHostAccountPreferences,
} from "../host-protocol.js";
import { AccountAvatar, accountDisplayName } from "./AccountAvatar.js";
import type { AppearancePreference } from "./appearance-preference.js";
import { dashboardBack } from "./dashboard-back.js";
import { DashboardLink } from "./DashboardLink.js";
import type { HostHistory } from "./host-history.js";
import { ShellIcon } from "./shell-icons.js";

/**
 * The account area (DESIGN.md §9.2, ADR 0062): who you are signed in as, and your own settings.
 *
 * Personal, never church administration — that is Settings (ADR 0061). Nothing here needs a
 * management permission, and nothing here can affect anyone else.
 */

const ACCOUNT: DashboardDestination = { kind: "account" };
const APPEARANCE: DashboardDestination = { kind: "account-section", section: "appearance" };

/**
 * `/account`: the person's own account. Their name and email as they signed up with them, and the
 * personal settings they can change. There is no profile editing yet, so nothing here pretends to
 * be editable.
 */
export function AccountHomePage(props: {
  readonly account: HostAccount;
  readonly history: HostHistory;
  readonly onSignOut: () => void;
}): ReactElement {
  const { account } = props;
  const hasName = account.name.trim().length > 0;
  return (
    <div data-testid="account-home" style={{ display: "grid", gap: designToken("spacing.xl") }}>
      <PageHeader description="Who you're signed in as, and your own settings." title="Account" />
      <Panel title="Signed in as">
        <div
          data-testid="account-identity"
          style={{
            alignItems: "center",
            display: "flex",
            flexWrap: "wrap",
            gap: designToken("spacing.md"),
            minWidth: 0,
          }}
        >
          <AccountAvatar account={account} size="lg" />
          <dl
            style={{
              display: "grid",
              gap: designToken("spacing.2xs"),
              margin: 0,
              minWidth: 0,
            }}
          >
            {hasName ? (
              <div>
                <dt className="ek-shell-visually-hidden">Name</dt>
                <dd
                  data-testid="account-name"
                  style={{
                    fontWeight: designToken("typography.weight-medium"),
                    margin: 0,
                    overflowWrap: "anywhere",
                  }}
                >
                  {accountDisplayName(account)}
                </dd>
              </div>
            ) : undefined}
            <div>
              <dt className="ek-shell-visually-hidden">Email</dt>
              <dd
                data-testid="account-email"
                style={{
                  color: hasName ? designToken("text.secondary") : undefined,
                  margin: 0,
                  overflowWrap: "anywhere",
                }}
              >
                {account.email}
              </dd>
            </div>
          </dl>
        </div>
      </Panel>
      <Panel title="Your settings">
        <ul style={{ listStyle: "none", margin: 0, padding: 0 }}>
          <li>
            <DashboardLink
              className="ek-shell-settings-link"
              data-testid="account-home-appearance"
              history={props.history}
              style={{ minHeight: designToken("control.height-lg") }}
              to={APPEARANCE}
            >
              <ShellIcon name="appearance" />
              <span className="ek-shell-settings-link__copy">
                <span className="ek-shell-settings-link__label">Appearance</span>
                <span className="ek-shell-settings-link__description">
                  Light, dark, or matching your device, and how much the Dashboard moves.
                </span>
              </span>
            </DashboardLink>
          </li>
        </ul>
      </Panel>
      <div>
        <Button data-testid="account-sign-out" onClick={props.onSignOut} variant="secondary">
          <ShellIcon name="signOut" />
          Sign out
        </Button>
      </div>
    </div>
  );
}

interface ChoiceOption<Value extends string> {
  readonly value: Value;
  readonly label: string;
  readonly description: string;
}

const APPEARANCE_OPTIONS: readonly ChoiceOption<HostAccountPreferences["appearance"]>[] = [
  { description: "Match your device's light or dark setting.", label: "System", value: "system" },
  { description: "Always use the light appearance.", label: "Light", value: "light" },
  { description: "Always use the dark appearance.", label: "Dark", value: "dark" },
];

const MOTION_OPTIONS: readonly ChoiceOption<HostAccountPreferences["motion"]>[] = [
  {
    description: "Reduce motion when your device asks for less.",
    label: "System",
    value: "system",
  },
  { description: "Always keep animation to a minimum.", label: "Reduce", value: "reduce" },
  {
    description: "Keep the Dashboard's subtle animation, even if your device asks for less.",
    label: "Allow",
    value: "allow",
  },
];

/**
 * One preference as a native radio group: a `<fieldset>` named by its `<legend>`, each option a real
 * `<input type="radio">` with its label and description. Arrow keys move between options, as the
 * browser already does for a radio group, and the chosen option is marked by the radio itself and by
 * weight, never by colour alone. Each row is a full-width touch target.
 */
function ChoiceGroup<Value extends string>(props: {
  readonly name: string;
  readonly legend: string;
  readonly description: string;
  readonly options: readonly ChoiceOption<Value>[];
  readonly value: Value;
  readonly onChange: (value: Value) => void;
}): ReactElement {
  const descriptionId = useId();
  return (
    <fieldset
      aria-describedby={descriptionId}
      className="ek-shell-choice-group"
      data-testid={`appearance-${props.name}`}
    >
      <legend className="ek-shell-choice-group__legend">{props.legend}</legend>
      <p className="ek-shell-choice-group__description" id={descriptionId}>
        {props.description}
      </p>
      <div className="ek-shell-choice-group__options">
        {props.options.map((option) => {
          const checked = option.value === props.value;
          return (
            <label
              className="ek-shell-choice"
              data-checked={checked ? "true" : undefined}
              data-testid={`appearance-${props.name}-${option.value}`}
              key={option.value}
              style={{ minHeight: designToken("control.height-lg") }}
            >
              <input
                checked={checked}
                className="ek-shell-choice__input ek-focusable"
                name={props.name}
                onChange={() => props.onChange(option.value)}
                type="radio"
                value={option.value}
              />
              <span className="ek-shell-choice__copy">
                <span className="ek-shell-choice__label">{option.label}</span>
                <span className="ek-shell-choice__description">{option.description}</span>
              </span>
            </label>
          );
        })}
      </div>
    </fieldset>
  );
}

type SaveStatus =
  | { readonly kind: "idle" }
  | { readonly kind: "saving" }
  | { readonly kind: "saved" }
  | { readonly kind: "failed" };

/**
 * `/account/appearance`: Appearance (System, Light, Dark) and Motion (System, Reduce, Allow).
 *
 * A choice takes effect **at once**, with no reload and no Save button, and is saved to the account
 * so it follows the person to every device they sign in on. The account is the source of truth:
 * what the server answers is what the shell applies, and if saving fails, the choice is put back to
 * what the account still holds, with a message saying so. Other open tabs of this Dashboard follow
 * along through this browser's cache.
 */
export function AppearancePage(props: {
  readonly account: HostAccount;
  readonly appearance: AppearancePreference;
  readonly config: EkklesiaHostConfig;
  readonly history: HostHistory;
  readonly onSaved: (preferences: HostAccountPreferences) => void;
  readonly onSessionCheck: () => void;
  readonly returnTarget?: unknown;
}): ReactElement {
  const { appearance, config, onSaved, onSessionCheck } = props;
  const subscribe = useCallback(
    (listener: () => void) => appearance.subscribe(listener),
    [appearance],
  );
  const read = useCallback(() => appearance.current(), [appearance]);
  const current = useSyncExternalStore(subscribe, read, read);
  const [status, setStatus] = useState<SaveStatus>({ kind: "idle" });
  // What the account last confirmed: the value a failed save is put back to.
  const confirmed = useRef<HostAccountPreferences>(props.account.preferences);
  const sequence = useRef(0);
  const inFlight = useRef(new Set<AbortController>());

  useEffect(() => {
    confirmed.current = props.account.preferences;
  }, [props.account.preferences]);

  useEffect(() => {
    const controllers = inFlight.current;
    return () => {
      for (const controller of controllers) {
        controller.abort();
      }
    };
  }, []);

  const choose = (update: Partial<HostAccountPreferences>): void => {
    appearance.apply({ ...appearance.current(), ...update });
    sequence.current += 1;
    const mine = sequence.current;
    const controller = new AbortController();
    inFlight.current.add(controller);
    setStatus({ kind: "saving" });
    void saveHostAccountPreferences(config, update, controller.signal)
      .then((saved) => {
        confirmed.current = saved;
        onSaved(saved);
        if (mine === sequence.current) {
          appearance.apply(saved);
          setStatus({ kind: "saved" });
        }
      })
      .catch((error: unknown) => {
        if (controller.signal.aborted) {
          return;
        }
        if (mine === sequence.current) {
          appearance.apply(confirmed.current);
          setStatus({ kind: "failed" });
        }
        if (error instanceof HostProtocolError && error.code === "HOST_UNAUTHENTICATED") {
          // The session may have ended: the shell checks once, and signs the page out if so.
          onSessionCheck();
        }
      })
      .finally(() => {
        inFlight.current.delete(controller);
      });
  };

  return (
    <div
      data-testid="account-appearance"
      style={{ display: "grid", gap: designToken("spacing.xl") }}
    >
      <PageHeader
        back={dashboardBack(props.history, {
          fallback: ACCOUNT,
          label: (destination) => (destination.kind === "account" ? "Back to Account" : "Back"),
          returnTarget: props.returnTarget,
        })}
        description="How the Dashboard looks for you, on every device you sign in on."
        title="Appearance"
      />
      <Panel>
        <div style={{ display: "grid", gap: designToken("spacing.xl") }}>
          <ChoiceGroup
            description="Light or dark, or the same as your device."
            legend="Appearance"
            name="appearance"
            onChange={(value) => choose({ appearance: value })}
            options={APPEARANCE_OPTIONS}
            value={current.appearance}
          />
          <ChoiceGroup
            description="Animation and transitions in the Dashboard."
            legend="Reduced motion"
            name="motion"
            onChange={(value) => choose({ motion: value })}
            options={MOTION_OPTIONS}
            value={current.motion}
          />
        </div>
      </Panel>
      <div aria-live="polite" data-testid="appearance-status">
        {status.kind === "saved" ? (
          <span className="ek-shell-visually-hidden">Saved to your account.</span>
        ) : undefined}
        {status.kind === "failed" ? (
          <InlineNotice title="Your choice wasn't saved" tone="danger">
            It's back to what your account had. Check your connection and try again.
          </InlineNotice>
        ) : undefined}
      </div>
    </div>
  );
}

/** The account could not be loaded: the rest of the Dashboard still works, and Retry asks again. */
export function AccountLoadFailedPage(props: { readonly onRetry: () => void }): ReactElement {
  return (
    <div data-testid="account-load-failed">
      <ErrorState
        actions={<Button onClick={props.onRetry}>Retry</Button>}
        description="The rest of the Dashboard still works. Try again in a moment."
        title="Your account could not be loaded"
      />
    </div>
  );
}