From 32b69f8df1735628e8018c54640836a1cb17a40b Mon Sep 17 00:00:00 2001
From: Lukas <lukas.richter@maibornwolff.de>
Date: Sat, 14 Mar 2026 15:13:39 +0100
Subject: [PATCH] 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/action-bar.tsx        |  8 ++++----
 .../web/src/components/bulk-import-prompt.tsx |  2 +-
 .../web/src/components/bulk-import-toasts.tsx |  2 +-
 apps/web/src/components/color-palette.tsx     |  2 +-
 apps/web/src/components/combatant-row.tsx     | 20 +++++++++----------
 apps/web/src/components/condition-picker.tsx  |  2 +-
 apps/web/src/components/condition-tags.tsx    |  2 +-
 .../src/components/create-player-modal.tsx    |  2 +-
 apps/web/src/components/icon-grid.tsx         |  2 +-
 apps/web/src/components/player-management.tsx |  2 +-
 .../src/components/source-fetch-prompt.tsx    |  2 +-
 apps/web/src/components/source-manager.tsx    |  4 +++-
 apps/web/src/components/stat-block-panel.tsx  | 18 ++++++++---------
 apps/web/src/components/stat-block.tsx        |  6 +++---
 apps/web/src/components/turn-navigation.tsx   |  2 +-
 packages/domain/src/edit-player-character.ts  |  8 ++++----
 16 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/apps/web/src/components/action-bar.tsx b/apps/web/src/components/action-bar.tsx
index 4617c53..0a24e1e 100644
--- a/apps/web/src/components/action-bar.tsx
+++ b/apps/web/src/components/action-bar.tsx
@@ -9,7 +9,7 @@ import {
 	Plus,
 	Users,
 } from "lucide-react";
-import { type RefObject, useDeferredValue, useState } from "react";
+import React, { type RefObject, useDeferredValue, useState } from "react";
 import type { SearchResult } from "../hooks/use-bestiary.js";
 import { cn } from "../lib/utils.js";
 import { D20Icon } from "./d20-icon.js";
@@ -62,7 +62,7 @@ function AddModeSuggestions({
 	onConfirmQueued,
 	onAddFromPlayerCharacter,
 	onClear,
-}: {
+}: Readonly<{
 	nameInput: string;
 	suggestions: SearchResult[];
 	pcMatches: PlayerCharacter[];
@@ -75,7 +75,7 @@ function AddModeSuggestions({
 	onSetQueued: (q: QueuedCreature | null) => void;
 	onConfirmQueued: () => void;
 	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
-}) {
+}>) {
 	return (
 		<div className="absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-md border border-border bg-card shadow-lg">
 			<button
@@ -263,7 +263,7 @@ export function ActionBar({
 	rollAllInitiativeDisabled,
 	onOpenSourceManager,
 	autoFocus,
-}: ActionBarProps) {
+}: Readonly<ActionBarProps>) {
 	const [nameInput, setNameInput] = useState("");
 	const [suggestions, setSuggestions] = useState<SearchResult[]>([]);
 	const [pcMatches, setPcMatches] = useState<PlayerCharacter[]>([]);
diff --git a/apps/web/src/components/bulk-import-prompt.tsx b/apps/web/src/components/bulk-import-prompt.tsx
index e7b4c1a..38edfb2 100644
--- a/apps/web/src/components/bulk-import-prompt.tsx
+++ b/apps/web/src/components/bulk-import-prompt.tsx
@@ -18,7 +18,7 @@ export function BulkImportPrompt({
 	importState,
 	onStartImport,
 	onDone,
-}: BulkImportPromptProps) {
+}: Readonly<BulkImportPromptProps>) {
 	const [baseUrl, setBaseUrl] = useState(DEFAULT_BASE_URL);
 	const baseUrlId = useId();
 	const totalSources = getAllSourceCodes().length;
diff --git a/apps/web/src/components/bulk-import-toasts.tsx b/apps/web/src/components/bulk-import-toasts.tsx
index f4fd720..106156d 100644
--- a/apps/web/src/components/bulk-import-toasts.tsx
+++ b/apps/web/src/components/bulk-import-toasts.tsx
@@ -11,7 +11,7 @@ export function BulkImportToasts({
 	state,
 	visible,
 	onReset,
-}: BulkImportToastsProps) {
+}: Readonly<BulkImportToastsProps>) {
 	if (!visible) return null;
 
 	if (state.status === "loading") {
diff --git a/apps/web/src/components/color-palette.tsx b/apps/web/src/components/color-palette.tsx
index 5e68f88..fda9858 100644
--- a/apps/web/src/components/color-palette.tsx
+++ b/apps/web/src/components/color-palette.tsx
@@ -9,7 +9,7 @@ interface ColorPaletteProps {
 
 const COLORS = [...VALID_PLAYER_COLORS] as string[];
 
-export function ColorPalette({ value, onChange }: ColorPaletteProps) {
+export function ColorPalette({ value, onChange }: Readonly<ColorPaletteProps>) {
 	return (
 		<div className="flex flex-wrap gap-2">
 			{COLORS.map((color) => (
diff --git a/apps/web/src/components/combatant-row.tsx b/apps/web/src/components/combatant-row.tsx
index ba38496..f80473e 100644
--- a/apps/web/src/components/combatant-row.tsx
+++ b/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);
diff --git a/apps/web/src/components/condition-picker.tsx b/apps/web/src/components/condition-picker.tsx
index b4ce1d6..750b52c 100644
--- a/apps/web/src/components/condition-picker.tsx
+++ b/apps/web/src/components/condition-picker.tsx
@@ -61,7 +61,7 @@ export function ConditionPicker({
 	activeConditions,
 	onToggle,
 	onClose,
-}: ConditionPickerProps) {
+}: Readonly<ConditionPickerProps>) {
 	const ref = useRef<HTMLDivElement>(null);
 	const [flipped, setFlipped] = useState(false);
 	const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
diff --git a/apps/web/src/components/condition-tags.tsx b/apps/web/src/components/condition-tags.tsx
index e05b876..becd332 100644
--- a/apps/web/src/components/condition-tags.tsx
+++ b/apps/web/src/components/condition-tags.tsx
@@ -60,7 +60,7 @@ export function ConditionTags({
 	conditions,
 	onRemove,
 	onOpenPicker,
-}: ConditionTagsProps) {
+}: Readonly<ConditionTagsProps>) {
 	return (
 		<div className="flex flex-wrap items-center gap-0.5">
 			{conditions?.map((condId) => {
diff --git a/apps/web/src/components/create-player-modal.tsx b/apps/web/src/components/create-player-modal.tsx
index 40fd5cb..972ccda 100644
--- a/apps/web/src/components/create-player-modal.tsx
+++ b/apps/web/src/components/create-player-modal.tsx
@@ -24,7 +24,7 @@ export function CreatePlayerModal({
 	onClose,
 	onSave,
 	playerCharacter,
-}: CreatePlayerModalProps) {
+}: Readonly<CreatePlayerModalProps>) {
 	const [name, setName] = useState("");
 	const [ac, setAc] = useState("10");
 	const [maxHp, setMaxHp] = useState("10");
diff --git a/apps/web/src/components/icon-grid.tsx b/apps/web/src/components/icon-grid.tsx
index 9d0d528..cc332b1 100644
--- a/apps/web/src/components/icon-grid.tsx
+++ b/apps/web/src/components/icon-grid.tsx
@@ -10,7 +10,7 @@ interface IconGridProps {
 
 const ICONS = [...VALID_PLAYER_ICONS] as PlayerIcon[];
 
-export function IconGrid({ value, onChange }: IconGridProps) {
+export function IconGrid({ value, onChange }: Readonly<IconGridProps>) {
 	return (
 		<div className="flex flex-wrap gap-2">
 			{ICONS.map((iconId) => {
diff --git a/apps/web/src/components/player-management.tsx b/apps/web/src/components/player-management.tsx
index 7b000b9..f97e949 100644
--- a/apps/web/src/components/player-management.tsx
+++ b/apps/web/src/components/player-management.tsx
@@ -21,7 +21,7 @@ export function PlayerManagement({
 	onEdit,
 	onDelete,
 	onCreate,
-}: PlayerManagementProps) {
+}: Readonly<PlayerManagementProps>) {
 	useEffect(() => {
 		if (!open) return;
 		function handleKeyDown(e: KeyboardEvent) {
diff --git a/apps/web/src/components/source-fetch-prompt.tsx b/apps/web/src/components/source-fetch-prompt.tsx
index 524998a..b3d403f 100644
--- a/apps/web/src/components/source-fetch-prompt.tsx
+++ b/apps/web/src/components/source-fetch-prompt.tsx
@@ -18,7 +18,7 @@ export function SourceFetchPrompt({
 	fetchAndCacheSource,
 	onSourceLoaded,
 	onUploadSource,
-}: SourceFetchPromptProps) {
+}: Readonly<SourceFetchPromptProps>) {
 	const [url, setUrl] = useState(() => getDefaultFetchUrl(sourceCode));
 	const [status, setStatus] = useState<"idle" | "fetching" | "error">("idle");
 	const [error, setError] = useState<string>("");
diff --git a/apps/web/src/components/source-manager.tsx b/apps/web/src/components/source-manager.tsx
index 24974e0..d71d848 100644
--- a/apps/web/src/components/source-manager.tsx
+++ b/apps/web/src/components/source-manager.tsx
@@ -8,7 +8,9 @@ interface SourceManagerProps {
 	onCacheCleared: () => void;
 }
 
-export function SourceManager({ onCacheCleared }: SourceManagerProps) {
+export function SourceManager({
+	onCacheCleared,
+}: Readonly<SourceManagerProps>) {
 	const [sources, setSources] = useState<CachedSourceInfo[]>([]);
 	const [optimisticSources, applyOptimistic] = useOptimistic(
 		sources,
diff --git a/apps/web/src/components/stat-block-panel.tsx b/apps/web/src/components/stat-block-panel.tsx
index 27a7aef..6d98a2f 100644
--- a/apps/web/src/components/stat-block-panel.tsx
+++ b/apps/web/src/components/stat-block-panel.tsx
@@ -46,11 +46,11 @@ function CollapsedTab({
 	creatureName,
 	side,
 	onToggleCollapse,
-}: {
+}: Readonly<{
 	creatureName: string;
 	side: "left" | "right";
 	onToggleCollapse: () => void;
-}) {
+}>) {
 	return (
 		<button
 			type="button"
@@ -73,13 +73,13 @@ function PanelHeader({
 	onToggleCollapse,
 	onPin,
 	onUnpin,
-}: {
+}: Readonly<{
 	panelRole: "browse" | "pinned";
 	showPinButton: boolean;
 	onToggleCollapse: () => void;
 	onPin: () => void;
 	onUnpin: () => void;
-}) {
+}>) {
 	return (
 		<div className="flex items-center justify-between border-border border-b px-4 py-2">
 			<div className="flex items-center gap-1">
@@ -133,7 +133,7 @@ function DesktopPanel({
 	onPin,
 	onUnpin,
 	children,
-}: {
+}: Readonly<{
 	isCollapsed: boolean;
 	side: "left" | "right";
 	creatureName: string;
@@ -143,7 +143,7 @@ function DesktopPanel({
 	onPin: () => void;
 	onUnpin: () => void;
 	children: ReactNode;
-}) {
+}>) {
 	const sideClasses = side === "left" ? "left-0 border-r" : "right-0 border-l";
 	const collapsedTranslate =
 		side === "right"
@@ -179,10 +179,10 @@ function DesktopPanel({
 function MobileDrawer({
 	onDismiss,
 	children,
-}: {
+}: Readonly<{
 	onDismiss: () => void;
 	children: ReactNode;
-}) {
+}>) {
 	const { offsetX, isSwiping, handlers } = useSwipeToDismiss(onDismiss);
 
 	return (
@@ -239,7 +239,7 @@ export function StatBlockPanel({
 	onStartBulkImport,
 	onBulkImportDone,
 	sourceManagerMode,
-}: StatBlockPanelProps) {
+}: Readonly<StatBlockPanelProps>) {
 	const [isDesktop, setIsDesktop] = useState(
 		() => globalThis.matchMedia("(min-width: 1024px)").matches,
 	);
diff --git a/apps/web/src/components/stat-block.tsx b/apps/web/src/components/stat-block.tsx
index ccecb2e..5c98efa 100644
--- a/apps/web/src/components/stat-block.tsx
+++ b/apps/web/src/components/stat-block.tsx
@@ -16,10 +16,10 @@ function abilityMod(score: number): string {
 function PropertyLine({
 	label,
 	value,
-}: {
+}: Readonly<{
 	label: string;
 	value: string | undefined;
-}) {
+}>) {
 	if (!value) return null;
 	return (
 		<div className="text-sm">
@@ -34,7 +34,7 @@ function SectionDivider() {
 	);
 }
 
-export function StatBlock({ creature }: StatBlockProps) {
+export function StatBlock({ creature }: Readonly<StatBlockProps>) {
 	const abilities = [
 		{ label: "STR", score: creature.abilities.str },
 		{ label: "DEX", score: creature.abilities.dex },
diff --git a/apps/web/src/components/turn-navigation.tsx b/apps/web/src/components/turn-navigation.tsx
index e0e546a..5af9a81 100644
--- a/apps/web/src/components/turn-navigation.tsx
+++ b/apps/web/src/components/turn-navigation.tsx
@@ -15,7 +15,7 @@ export function TurnNavigation({
 	onAdvanceTurn,
 	onRetreatTurn,
 	onClearEncounter,
-}: TurnNavigationProps) {
+}: Readonly<TurnNavigationProps>) {
 	const hasCombatants = encounter.combatants.length > 0;
 	const isAtStart = encounter.roundNumber === 1 && encounter.activeIndex === 0;
 	const activeCombatant = encounter.combatants[encounter.activeIndex];
diff --git a/packages/domain/src/edit-player-character.ts b/packages/domain/src/edit-player-character.ts
index eb59ccb..bcafc50 100644
--- a/packages/domain/src/edit-player-character.ts
+++ b/packages/domain/src/edit-player-character.ts
@@ -23,7 +23,7 @@ interface EditFields {
 }
 
 function validateFields(fields: EditFields): DomainError | null {
-	if (fields.name !== undefined && fields.name.trim() === "") {
+	if (fields.name?.trim() === "") {
 		return {
 			kind: "domain-error",
 			code: "invalid-name",
@@ -81,9 +81,9 @@ function applyFields(
 ): PlayerCharacter {
 	return {
 		id: existing.id,
-		name: fields.name === undefined ? existing.name : fields.name.trim(),
-		ac: fields.ac === undefined ? existing.ac : fields.ac,
-		maxHp: fields.maxHp === undefined ? existing.maxHp : fields.maxHp,
+		name: fields.name?.trim() ?? existing.name,
+		ac: fields.ac ?? existing.ac,
+		maxHp: fields.maxHp ?? existing.maxHp,
 		color:
 			fields.color === undefined
 				? existing.color