refactor: modernize React component types

src/App.tsx

@@ -254,7 +254,7 @@ interface BoardAppProps {
   onSignOut: () => void;
 }
 
-function BoardApp({ identity, onIdentity, onSignOut }: BoardAppProps) {
+function BoardApp({ identity, onIdentity, onSignOut }: Readonly<BoardAppProps>) {
   const ns = identityNamespace(identity);
   const store = useMemo(() => new LocalStore(ns), [ns]);
   const remote = useMemo(() => new RemoteStore(), []);

src/components/AdrModal.tsx

@@ -105,7 +105,12 @@ export interface AdrModalProps {
  * Nothing reaches the board until "Add selected" — the review step is the
  * whole point of the feature.
  */
-export function AdrModal({ sources, onSplit, onAdd, onClose }: AdrModalProps) {
+export function AdrModal({
+  sources,
+  onSplit,
+  onAdd,
+  onClose,
+}: Readonly<AdrModalProps>) {
   const [adr, setAdr] = useState('');
   const [url, setURL] = useState('');
   const [source, setSource] = useState(sources[0]?.name ?? '');

src/components/AuthReturn.tsx

@@ -28,7 +28,7 @@ export interface AuthReturnProps {
 export function AuthReturn({
   search = typeof location === 'undefined' ? '' : location.search,
   hash = typeof location === 'undefined' ? '' : location.hash,
-}: AuthReturnProps) {
+}: Readonly<AuthReturnProps>) {
   const [stalled, setStalled] = useState(false);
   const [failed, setFailed] = useState<string | null>(null);
 

src/components/Board.tsx

@@ -313,7 +313,7 @@ interface LiftState extends LiftPos {
 /** Id of the description that teaches the keyboard move model. */
 const KEYS_HINT_ID = 'kb-card-keys';
 
-export function BoardView(props: BoardProps) {
+export function BoardView(props: Readonly<BoardProps>) {
   const { board, onTick, onEdit, onAdd, showCancelled, onRestore, onPurge } = props;
   const rootRef = useRef<HTMLElement>(null);
   const cloneRef = useRef<HTMLDivElement>(null);
@@ -736,7 +736,7 @@ function Column({
   onCardKey,
   onRestore,
   onPurge,
-}: ColumnProps) {
+}: Readonly<ColumnProps>) {
   const slot =
     placeholder === null ? null : (
       <li className="slot" aria-hidden="true" style={{ height: placeholderHeight }} />

src/components/Card.tsx

@@ -7,7 +7,7 @@ import { tagColor } from '../lib/labels';
 import type { InlineTok } from '../lib/inlineMd';
 import { parseDesc, tokenizeInline } from '../lib/inlineMd';
 
-function InlineText({ toks }: { toks: InlineTok[] }) {
+function InlineText({ toks }: Readonly<{ toks: InlineTok[] }>) {
   return (
     <>
       {toks.map((t, i) => {
@@ -38,7 +38,7 @@ function InlineText({ toks }: { toks: InlineTok[] }) {
   );
 }
 
-function Desc({ text }: { text: string }) {
+function Desc({ text }: Readonly<{ text: string }>) {
   return (
     <div className="desc">
       {parseDesc(text).map((l, i) => (

src/components/CardAIDraft.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import type { AIStoryRequest, StoryDraft } from '../lib/api';
 import { isAbortError } from '../lib/api';
 import type { Check, Effort, Prio } from '../lib/model';
@@ -17,7 +17,7 @@ export interface CardAIDraftProps {
   checks: Check[];
   onApply: (draft: StoryDraft) => void;
   onBusyChange: (busy: boolean) => void;
-  cancelRef: MutableRefObject<(() => void) | null>;
+  cancelRef: RefObject<(() => void) | null>;
 }
 
 export function CardAIDraft({
@@ -33,7 +33,7 @@ export function CardAIDraft({
   onApply,
   onBusyChange,
   cancelRef,
-}: CardAIDraftProps) {
+}: Readonly<CardAIDraftProps>) {
   const [prompt, setPrompt] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);

src/components/CardEditor.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import type { MutableRefObject, ReactNode } from 'react';
+import type { ReactNode, RefObject } from 'react';
 import type { AIStoryRequest, StoryDraft } from '../lib/api';
 import type { Check, Effort, Prio } from '../lib/model';
 import { newTask } from '../lib/model';
@@ -16,7 +16,7 @@ export interface CardEditorProps {
   title: string;
   onTitleChange: (title: string) => void;
   onBusyChange: (busy: boolean) => void;
-  cancelRef: MutableRefObject<(() => void) | null>;
+  cancelRef: RefObject<(() => void) | null>;
   titleExtras: ReactNode;
   onSave: (task: ReturnType<typeof newTask>) => void;
   onDelete: (taskId: string) => void;
@@ -51,7 +51,7 @@ export function CardEditor({
   onSave,
   onDelete,
   onClose,
-}: CardEditorProps) {
+}: Readonly<CardEditorProps>) {
   const base = state.mode === 'edit' ? state.task : null;
   const [emoji, setEmoji] = useState(() => firstEmoji(base?.emoji ?? ''));
   const [blocked, setBlocked] = useState(base?.blocked ?? false);

src/components/CardModal.tsx

@@ -129,7 +129,7 @@ export function CardModal({
   onSave,
   onDelete,
   onClose,
-}: CardModalProps) {
+}: Readonly<CardModalProps>) {
   const excludeId = state.mode === 'edit' ? canonicalTaskId : undefined;
   const [title, setTitle] = useState(state.mode === 'edit' ? state.task.title : '');
   const [aiBusy, setAiBusy] = useState(false);

src/components/ConfirmDialog.tsx

@@ -65,7 +65,7 @@ export function ConfirmDialog({
   destructive = false,
   onConfirm,
   onClose,
-}: ConfirmDialogProps) {
+}: Readonly<ConfirmDialogProps>) {
   const boxRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const confirmRef = useRef<HTMLButtonElement>(null);

src/components/DateField.tsx

@@ -117,7 +117,11 @@ export interface DateFieldProps {
  * Keyboard, in the popover: arrows move a day/week, PageUp/PageDown a month,
  * Enter or Space picks, Escape closes and returns to the trigger.
  */
-export function DateField({ inputId, value, onChange }: DateFieldProps) {
+export function DateField({
+  inputId,
+  value,
+  onChange,
+}: Readonly<DateFieldProps>) {
   const [open, setOpen] = useState(false);
   // The day the grid keys move; also decides the visible month.
   const [focusISO, setFocusISO] = useState(todayISO());

src/components/DebugOverlay.tsx

@@ -121,7 +121,10 @@ export function restingBox(
  * cap for the confetti loop. Mounted only when the flag is on, so a disabled
  * overlay costs nothing — no requestAnimationFrame runs.
  */
-export function DebugOverlay({ onClose, inert }: DebugOverlayProps) {
+export function DebugOverlay({
+  onClose,
+  inert,
+}: Readonly<DebugOverlayProps>) {
   const [fps, setFps] = useState<number | null>(null);
   const [target, setTarget] = useState<FrameTarget>('uncapped');
   // Moved to the opposite corner while it would otherwise cover the focused

src/components/EmojiField.tsx

@@ -85,7 +85,11 @@ export interface EmojiFieldProps {
  * typing, and everything typeable here is either already in the picker or is
  * something the wire format refuses.
  */
-export function EmojiField({ inputId, value, onChange }: EmojiFieldProps) {
+export function EmojiField({
+  inputId,
+  value,
+  onChange,
+}: Readonly<EmojiFieldProps>) {
   const [open, setOpen] = useState(false);
   const [picker, setPicker] = useState<PickerModule | null>(null);
   const [failed, setFailed] = useState(false);

src/components/IdentityGate.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { FormEvent } from 'react';
+import type { SubmitEvent } from 'react';
 import type { Identity } from '../lib/auth';
 import { azureAvailable, signInAzure } from '../lib/auth';
 
@@ -10,7 +10,7 @@ export interface IdentityGateProps {
 /** The gate renders once, so a constant id is enough to point the field at. */
 const ERROR_ID = 'g-error';
 
-export function IdentityGate({ onIdentity }: IdentityGateProps) {
+export function IdentityGate({ onIdentity }: Readonly<IdentityGateProps>) {
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [id, setId] = useState('');
@@ -47,7 +47,7 @@ export function IdentityGate({ onIdentity }: IdentityGateProps) {
     }
   };
 
-  const handleManual = (e: FormEvent) => {
+  const handleManual = (e: SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     const trimmed = id.trim();
     if (!trimmed) return;

src/components/ImportModal.tsx

@@ -91,7 +91,7 @@ export function ImportModal({
   onAdd,
   onCommitLinks,
   onClose,
-}: ImportModalProps) {
+}: Readonly<ImportModalProps>) {
   const [source, setSource] = useState(sources[0]?.name ?? '');
   const [reference, setReference] = useState('');
   const [max, setMax] = useState(MAX_DEFAULT);

src/components/IntegrationsSection.tsx

@@ -153,7 +153,7 @@ const busyMessage: Record<IntegrationAction, string> = {
 export function IntegrationsSection({
   identity,
   serverPresent,
-}: IntegrationsSectionProps) {
+}: Readonly<IntegrationsSectionProps>) {
   const [rows, setRows] = useState<IntegrationRow[]>([]);
   const [loading, setLoading] = useState(serverPresent);
   const [loadError, setLoadError] = useState<string | null>(null);

src/components/LabelsCombobox.tsx

@@ -21,7 +21,7 @@ export function LabelsCombobox({
   value,
   suggestions,
   onChange,
-}: LabelsComboboxProps) {
+}: Readonly<LabelsComboboxProps>) {
   const [text, setText] = useState('');
   const [open, setOpen] = useState(false);
   const [hi, setHi] = useState(0);

src/components/ReconnectModal.tsx

@@ -1,5 +1,5 @@
 import { useId, useRef, useState } from 'react';
-import type { FormEvent } from 'react';
+import type { SubmitEvent } from 'react';
 import type { Identity } from '../lib/auth';
 import { ReauthRequiredError, signInAzure } from '../lib/auth';
 import { getLabels } from '../lib/api';
@@ -48,7 +48,7 @@ export function ReconnectModal({
   onIdentity,
   onSignOut,
   onClose,
-}: ReconnectModalProps) {
+}: Readonly<ReconnectModalProps>) {
   const [token, setToken] = useState('');
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -76,7 +76,7 @@ export function ReconnectModal({
     }
   };
 
-  const handleToken = (e: FormEvent) => {
+  const handleToken = (e: SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     const serverToken = token.trim();
     if (!serverToken) return;

src/components/SettingsModal.tsx

@@ -108,7 +108,7 @@ export function SettingsModal({
   onDebugChange,
   onClose,
   onSaved,
-}: SettingsModalProps) {
+}: Readonly<SettingsModalProps>) {
   const [loaded, setLoaded] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [baseUrl, setBaseUrl] = useState('');

src/components/ShipDialog.tsx

@@ -53,7 +53,7 @@ export function ShipDialog({
   onShip,
   onTickAll,
   onCancel,
-}: ShipDialogProps) {
+}: Readonly<ShipDialogProps>) {
   const boxRef = useRef<HTMLDivElement>(null);
   const onDialogKeyDown = useDialogFocus(boxRef);
   const titleId = useId();