refactor(dashboard): rethink settings, split out subreddits and accounts

The settings page had accumulated five tabs whose names no longer matched
their contents, three different save models, and the whole subreddit
configuration buried under a tab named after a checkbox.

Structure:
- Subreddits becomes its own page: a list showing each community's mode,
  tone, computed share of polling, and live sent/reply stats, with one
  subreddit edited at a time in a drawer.
- Accounts becomes its own page. It is session lifecycle, not config.
- Settings collapses to one scrolling page: Safety, Pacing (Monitoring and
  Rate limits merged), Targeting, Notifications, Advanced.
- The sidebar is grouped, having gone from 9 to 11 destinations.

Saving:
- Every section owns its own draft, validation, risk gate and save via
  useConfigCard, submitting only the keys it owns. A syntax error in the
  advanced JSON can no longer block a rate-limit change, and enabling an
  autonomous policy is its own deliberate commit.
- UnsavedChangesProvider restores the leave-page guard across cards that no
  longer share a draft.

Subreddit editing:
- Errors are keyed by field name instead of array index, removing the
  defensive invalidation that existed because row indices shifted on add
  and remove. Confirming an autonomous mode can no longer be attributed to
  the wrong row.
- Weight is shown as the share it actually produces, live while editing.
- Bulk actions cover start/pause polling, tone, policy and removal, because
  production runs 30-40 subreddits and per-row editing does not scale.
  Bulk policy changes name every subreddit turning autonomous, and
  normalise the hybrid mode's turn budget, which has no form to catch it.

Physique targeting moves into its own Targeting card. It sends only
reddit.physiqueTargeting, which the config route applies independently, so
it cannot clobber the pacing card's fields. Turning screening on now warns
that it will reduce how many posts qualify.

Also surfaces the effective sending rate, since the hourly limit and the
minimum delay both throttle and only the binding one matters.

Legacy ?section= links redirect or resolve to anchors.

Fixes found while verifying in a browser: a radio-card rule was shrinking
nested number inputs; .share-preview had no styles; the throughput readout
reported a rate from a blank field; and the reconcile logic warned about a
server change whenever a sibling card saved.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

apps/dashboard/src/features/settings/use-config-card.ts

@@ -0,0 +1,155 @@
+import { useEffect, useRef, useState } from 'react';
+import type { ConfigResponse, ConfigUpdateRequest } from '../../../../../packages/api-contracts/src/index.js';
+import { useUnsavedChangesFlag } from '../../components/unsaved-changes.js';
+import { useSaveSettingsMutation } from './settings-queries.js';
+
+export interface ConfigCardValidation {
+  /** Absent when the draft is invalid; `errors` explains why. */
+  payload?: ConfigUpdateRequest;
+  errors: Record<string, string>;
+}
+
+export interface ConfigCardSpec<Draft> {
+  /** Stable id used for the page-level unsaved-changes guard. */
+  id: string;
+  toDraft(config: ConfigResponse): Draft;
+  validate(draft: Draft): ConfigCardValidation;
+  /**
+   * Consequences the operator must confirm before this save is applied.
+   * Compared against the last persisted draft so re-saving an already-live
+   * risky value does not prompt again.
+   */
+  risks?(draft: Draft, persisted: Draft): string[];
+}
+
+export interface ConfigCard<Draft> {
+  draft: Draft;
+  persisted: Draft;
+  errors: Record<string, string>;
+  errorCount: number;
+  isDirty: boolean;
+  /** The server changed this card's values while the operator had edits open. */
+  hasServerChanged: boolean;
+  isSaving: boolean;
+  isSaved: boolean;
+  saveError: Error | null;
+  /** Non-null while a risky save waits on confirmation. */
+  pendingRisks: string[] | null;
+  update(next: Draft): void;
+  reset(): void;
+  save(): void;
+  confirmRisks(): void;
+  cancelRisks(): void;
+}
+
+function isSame(left: unknown, right: unknown): boolean {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+interface CardState<Draft> {
+  persisted: Draft;
+  draft: Draft;
+  hasServerChanged: boolean;
+}
+
+/**
+ * Owns one card's draft lifecycle: seed from the server config, track dirty
+ * state, validate, confirm risk, and save a *partial* config update.
+ *
+ * Cards save independently, so a card only ever submits the keys it owns. An
+ * invalid value in one card can never block another card's save.
+ */
+export function useConfigCard<Draft>(config: ConfigResponse, spec: ConfigCardSpec<Draft>): ConfigCard<Draft> {
+  const specRef = useRef(spec);
+  specRef.current = spec;
+
+  const [state, setState] = useState<CardState<Draft>>(() => {
+    const draft = spec.toDraft(config);
+    return { persisted: draft, draft, hasServerChanged: false };
+  });
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const [pendingRisks, setPendingRisks] = useState<{ payload: ConfigUpdateRequest; reasons: string[] } | null>(null);
+  const saveMutation = useSaveSettingsMutation();
+  const seededConfig = useRef(config);
+
+  const isDirty = !isSame(state.draft, state.persisted);
+  useUnsavedChangesFlag(spec.id, isDirty);
+
+  // Reconcile server refetches. A sibling card's save also produces a new
+  // config object, so adopt silently whenever the server's values for *this*
+  // card match what is on screen; only warn when they genuinely diverge.
+  useEffect(() => {
+    if (seededConfig.current === config) return;
+    seededConfig.current = config;
+    const serverDraft = specRef.current.toDraft(config);
+    setState((current) => {
+      // Nothing this card owns moved — a sibling card saved, or an unrelated
+      // refetch landed. Leave the operator's edits completely alone.
+      if (isSame(serverDraft, current.persisted)) return current;
+      // The server now agrees with what is on screen, so there is no conflict.
+      if (isSame(serverDraft, current.draft)) {
+        return { persisted: serverDraft, draft: current.draft, hasServerChanged: false };
+      }
+      // No local edits to protect: adopt the server's values silently.
+      if (isSame(current.draft, current.persisted)) {
+        return { persisted: serverDraft, draft: serverDraft, hasServerChanged: false };
+      }
+      return { ...current, persisted: serverDraft, hasServerChanged: true };
+    });
+  }, [config]);
+
+  function submit(payload: ConfigUpdateRequest) {
+    saveMutation.mutate(payload, {
+      onSuccess() {
+        setPendingRisks(null);
+        setState((current) => ({ persisted: current.draft, draft: current.draft, hasServerChanged: false }));
+      },
+    });
+  }
+
+  return {
+    draft: state.draft,
+    persisted: state.persisted,
+    errors,
+    errorCount: Object.keys(errors).length,
+    isDirty,
+    hasServerChanged: state.hasServerChanged,
+    isSaving: saveMutation.isPending,
+    isSaved: saveMutation.isSuccess && !isDirty,
+    saveError: saveMutation.isError ? saveMutation.error : null,
+    pendingRisks: pendingRisks?.reasons ?? null,
+
+    update(next: Draft) {
+      saveMutation.reset();
+      setErrors({});
+      setState((current) => ({ ...current, draft: next }));
+    },
+
+    reset() {
+      saveMutation.reset();
+      setErrors({});
+      setState((current) => ({ ...current, draft: current.persisted, hasServerChanged: false }));
+    },
+
+    save() {
+      saveMutation.reset();
+      const validation = specRef.current.validate(state.draft);
+      setErrors(validation.errors);
+      if (!validation.payload) return;
+      const reasons = specRef.current.risks?.(state.draft, state.persisted) ?? [];
+      if (reasons.length > 0) {
+        setPendingRisks({ payload: validation.payload, reasons });
+        return;
+      }
+      submit(validation.payload);
+    },
+
+    confirmRisks() {
+      if (pendingRisks) submit(pendingRisks.payload);
+    },
+
+    cancelRisks() {
+      setPendingRisks(null);
+    },
+  };
+}