Improve empty encounter UX with interactive add button

Replace the static "No combatants yet" text with a centered, breathing
"+" icon that focuses the action bar input on click, guiding users to
add their first combatant.

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

apps/web/src/App.tsx

@@ -3,6 +3,7 @@ import {
 	rollInitiativeUseCase,
 } from "@initiative/application";
 import type { CombatantId, Creature, CreatureId } from "@initiative/domain";
+import { Plus } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { ActionBar } from "./components/action-bar";
 import { CombatantRow } from "./components/combatant-row";
@@ -160,6 +161,8 @@ export function App() {
 		setPinnedCreatureId(null);
 	}, []);
 
+	const actionBarInputRef = useRef<HTMLInputElement>(null);
+
 	// Auto-scroll to the active combatant when the turn changes
 	const activeRowRef = useRef<HTMLDivElement>(null);
 	useEffect(() => {
@@ -205,11 +208,17 @@ export function App() {
 
 				{/* Scrollable area — combatant list */}
 				<div className="flex-1 overflow-y-auto min-h-0">
-					<div className="flex flex-col px-2 py-2">
+					<div
+						className={`flex flex-col px-2 py-2${encounter.combatants.length === 0 ? " h-full items-center justify-center" : ""}`}
+					>
 						{encounter.combatants.length === 0 ? (
-							<p className="py-12 text-center text-sm text-muted-foreground">
-								No combatants yet — add one to get started
-							</p>
+							<button
+								type="button"
+								onClick={() => actionBarInputRef.current?.focus()}
+								className="animate-breathe cursor-pointer text-muted-foreground transition-colors hover:text-primary"
+							>
+								<Plus className="size-14" />
+							</button>
 						) : (
 							encounter.combatants.map((c, i) => (
 								<CombatantRow
@@ -249,6 +258,7 @@ export function App() {
 						onViewStatBlock={handleViewStatBlock}
 						onBulkImport={handleBulkImport}
 						bulkImportDisabled={bulkImport.state.status === "loading"}
+						inputRef={actionBarInputRef}
 					/>
 				</div>
 			</div>