Use Readonly props and optional chaining/nullish coalescing

Mark component props as Readonly<> across 15 component files and
simplify edit-player-character field access with optional chaining
and nullish coalescing.

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

apps/web/src/components/combatant-row.tsx

@@ -50,13 +50,13 @@ function EditableName({
 	onRename,
 	onShowStatBlock,
 	color,
-}: {
+}: Readonly<{
 	name: string;
 	combatantId: CombatantId;
 	onRename: (id: CombatantId, newName: string) => void;
 	onShowStatBlock?: () => void;
 	color?: string;
-}) {
+}>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(name);
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -154,10 +154,10 @@ function EditableName({
 function MaxHpDisplay({
 	maxHp,
 	onCommit,
-}: {
+}: Readonly<{
 	maxHp: number | undefined;
 	onCommit: (value: number | undefined) => void;
-}) {
+}>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(maxHp?.toString() ?? "");
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -215,12 +215,12 @@ function ClickableHp({
 	maxHp,
 	onAdjust,
 	dimmed,
-}: {
+}: Readonly<{
 	currentHp: number | undefined;
 	maxHp: number | undefined;
 	onAdjust: (delta: number) => void;
 	dimmed?: boolean;
-}) {
+}>) {
 	const [popoverOpen, setPopoverOpen] = useState(false);
 	const status = deriveHpStatus(currentHp, maxHp);
 
@@ -265,10 +265,10 @@ function ClickableHp({
 function AcDisplay({
 	ac,
 	onCommit,
-}: {
+}: Readonly<{
 	ac: number | undefined;
 	onCommit: (value: number | undefined) => void;
-}) {
+}>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(ac?.toString() ?? "");
 	const inputRef = useRef<HTMLInputElement>(null);
@@ -319,13 +319,13 @@ function InitiativeDisplay({
 	dimmed,
 	onSetInitiative,
 	onRollInitiative,
-}: {
+}: Readonly<{
 	initiative: number | undefined;
 	combatantId: CombatantId;
 	dimmed: boolean;
 	onSetInitiative: (id: CombatantId, value: number | undefined) => void;
 	onRollInitiative?: (id: CombatantId) => void;
-}) {
+}>) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(initiative?.toString() ?? "");
 	const inputRef = useRef<HTMLInputElement>(null);