Extract PlayerCharacterSection component from App.tsx

Move player character modal state (createPlayerOpen, managementOpen,
editingPlayer) into a self-contained component with an imperative ref
handle. Closing the create/edit modal now returns to management.

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

apps/web/src/App.tsx

@@ -17,8 +17,10 @@ import {
 } from "react";
 import { ActionBar } from "./components/action-bar";
 import { CombatantRow } from "./components/combatant-row";
-import { CreatePlayerModal } from "./components/create-player-modal";
-import { PlayerManagement } from "./components/player-management";
+import {
+	PlayerCharacterSection,
+	type PlayerCharacterSectionHandle,
+} from "./components/player-character-section";
 import { StatBlockPanel } from "./components/stat-block-panel";
 import { Toast } from "./components/toast";
 import { TurnNavigation } from "./components/turn-navigation";
@@ -97,12 +99,6 @@ export function App() {
 		deleteCharacter: deletePlayerCharacter,
 	} = usePlayerCharacters();
 
-	const [createPlayerOpen, setCreatePlayerOpen] = useState(false);
-	const [managementOpen, setManagementOpen] = useState(false);
-	const [editingPlayer, setEditingPlayer] = useState<
-		(typeof playerCharacters)[number] | undefined
-	>(undefined);
-
 	const {
 		search,
 		getCreature,
@@ -184,6 +180,7 @@ export function App() {
 	}, [sidePanel.dismissPanel, bulkImport.reset]);
 
 	const actionBarInputRef = useRef<HTMLInputElement>(null);
+	const playerCharacterRef = useRef<PlayerCharacterSectionHandle>(null);
 	const actionBarAnim = useActionBarAnimation(encounter.combatants.length);
 
 	// Auto-scroll to the active combatant when the turn changes
@@ -256,7 +253,9 @@ export function App() {
 								inputRef={actionBarInputRef}
 								playerCharacters={playerCharacters}
 								onAddFromPlayerCharacter={addFromPlayerCharacter}
-								onManagePlayers={() => setManagementOpen(true)}
+								onManagePlayers={() =>
+									playerCharacterRef.current?.openManagement()
+								}
 								onRollAllInitiative={handleRollAllInitiative}
 								showRollAllInitiative={hasCreatureCombatants}
 								rollAllInitiativeDisabled={!canRollAllInitiative}
@@ -313,7 +312,9 @@ export function App() {
 								inputRef={actionBarInputRef}
 								playerCharacters={playerCharacters}
 								onAddFromPlayerCharacter={addFromPlayerCharacter}
-								onManagePlayers={() => setManagementOpen(true)}
+								onManagePlayers={() =>
+									playerCharacterRef.current?.openManagement()
+								}
 								onRollAllInitiative={handleRollAllInitiative}
 								showRollAllInitiative={hasCreatureCombatants}
 								rollAllInitiativeDisabled={!canRollAllInitiative}
@@ -403,43 +404,12 @@ export function App() {
 				/>
 			)}
 
-			<CreatePlayerModal
-				open={createPlayerOpen}
-				onClose={() => {
-					setCreatePlayerOpen(false);
-					setEditingPlayer(undefined);
-				}}
-				onSave={(name, ac, maxHp, color, icon) => {
-					if (editingPlayer) {
-						editPlayerCharacter?.(editingPlayer.id, {
-							name,
-							ac,
-							maxHp,
-							color: color ?? null,
-							icon: icon ?? null,
-						});
-					} else {
-						createPlayerCharacter(name, ac, maxHp, color, icon);
-					}
-				}}
-				playerCharacter={editingPlayer}
-			/>
-
-			<PlayerManagement
-				open={managementOpen}
-				onClose={() => setManagementOpen(false)}
+			<PlayerCharacterSection
+				ref={playerCharacterRef}
 				characters={playerCharacters}
-				onEdit={(pc) => {
-					setEditingPlayer(pc);
-					setCreatePlayerOpen(true);
-					setManagementOpen(false);
-				}}
-				onDelete={(id) => deletePlayerCharacter?.(id)}
-				onCreate={() => {
-					setEditingPlayer(undefined);
-					setCreatePlayerOpen(true);
-					setManagementOpen(false);
-				}}
+				onCreateCharacter={createPlayerCharacter}
+				onEditCharacter={editPlayerCharacter}
+				onDeleteCharacter={deletePlayerCharacter}
 			/>
 		</div>
 	);