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/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,
 	);