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/components/action-bar.tsx

@@ -1,5 +1,11 @@
 import { Check, Eye, Import, Minus, Plus } from "lucide-react";
-import { type FormEvent, useEffect, useRef, useState } from "react";
+import {
+	type FormEvent,
+	type RefObject,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
 import type { SearchResult } from "../hooks/use-bestiary.js";
 import { Button } from "./ui/button.js";
 import { Input } from "./ui/input.js";
@@ -20,6 +26,7 @@ interface ActionBarProps {
 	onViewStatBlock?: (result: SearchResult) => void;
 	onBulkImport?: () => void;
 	bulkImportDisabled?: boolean;
+	inputRef?: RefObject<HTMLInputElement | null>;
 }
 
 function creatureKey(r: SearchResult): string {
@@ -34,6 +41,7 @@ export function ActionBar({
 	onViewStatBlock,
 	onBulkImport,
 	bulkImportDisabled,
+	inputRef,
 }: ActionBarProps) {
 	const [nameInput, setNameInput] = useState("");
 	const [suggestions, setSuggestions] = useState<SearchResult[]>([]);
@@ -222,6 +230,7 @@ export function ActionBar({
 			>
 				<div className="relative flex-1">
 					<Input
+						ref={inputRef}
 						type="text"
 						value={nameInput}
 						onChange={(e) => handleNameChange(e.target.value)}