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

@@ -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[]>([]);