Hide top bar in empty state and animate it in with first combatant

The turn navigation bar is now hidden when no combatants exist, keeping
the empty state clean. It slides down from above when the first
combatant is added, synchronized with the action bar settling animation.

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

apps/web/src/App.tsx

@@ -3,8 +3,13 @@ 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 {
+	useCallback,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from "react";
 import { ActionBar } from "./components/action-bar";
 import { CombatantRow } from "./components/combatant-row";
 import { CreatePlayerModal } from "./components/create-player-modal";
@@ -22,6 +27,44 @@ function rollDice(): number {
 	return Math.floor(Math.random() * 20) + 1;
 }
 
+function useActionBarAnimation(combatantCount: number) {
+	const wasEmptyRef = useRef(combatantCount === 0);
+	const [settling, setSettling] = useState(false);
+	const [rising, setRising] = useState(false);
+	const [topBarExiting, setTopBarExiting] = useState(false);
+
+	useLayoutEffect(() => {
+		const nowEmpty = combatantCount === 0;
+		if (wasEmptyRef.current && !nowEmpty) {
+			setSettling(true);
+		} else if (!wasEmptyRef.current && nowEmpty) {
+			setRising(true);
+			setTopBarExiting(true);
+		}
+		wasEmptyRef.current = nowEmpty;
+	}, [combatantCount]);
+
+	const empty = combatantCount === 0;
+	const risingClass = rising ? " animate-rise-to-center" : "";
+	const settlingClass = settling ? " animate-settle-to-bottom" : "";
+	const topBarClass = settling
+		? " animate-slide-down-in"
+		: topBarExiting
+			? " absolute inset-x-0 top-0 z-10 px-4 animate-slide-up-out"
+			: "";
+	const showTopBar = !empty || topBarExiting;
+
+	return {
+		risingClass,
+		settlingClass,
+		topBarClass,
+		showTopBar,
+		onSettleEnd: () => setSettling(false),
+		onRiseEnd: () => setRising(false),
+		onTopBarExitEnd: () => setTopBarExiting(false),
+	};
+}
+
 export function App() {
 	const {
 		encounter,
@@ -171,6 +214,7 @@ export function App() {
 	}, []);
 
 	const actionBarInputRef = useRef<HTMLInputElement>(null);
+	const actionBarAnim = useActionBarAnimation(encounter.combatants.length);
 
 	// Auto-scroll to the active combatant when the turn changes
 	const activeRowRef = useRef<HTMLDivElement>(null);
@@ -194,85 +238,109 @@ export function App() {
 		setSelectedCreatureId(active.creatureId as CreatureId);
 	}, [encounter.activeIndex, encounter.combatants, isLoaded]);
 
+	const isEmpty = encounter.combatants.length === 0;
+
 	return (
 		<div className="flex h-screen flex-col">
-			<div className="mx-auto flex w-full max-w-2xl flex-1 flex-col gap-3 px-4 min-h-0">
-				{/* Turn Navigation — fixed at top */}
-				<div className="shrink-0 pt-8">
-					<TurnNavigation
-						encounter={encounter}
-						onAdvanceTurn={advanceTurn}
-						onRetreatTurn={retreatTurn}
-						onClearEncounter={clearEncounter}
-						onRollAllInitiative={handleRollAllInitiative}
-						onOpenSourceManager={() => setSourceManagerOpen((o) => !o)}
-					/>
-				</div>
-
-				{sourceManagerOpen && (
-					<div className="shrink-0 rounded-md border border-border bg-card px-4 py-3">
-						<SourceManager onCacheCleared={refreshCache} />
+			<div className="relative mx-auto flex w-full max-w-2xl flex-1 flex-col gap-3 px-4 min-h-0">
+				{actionBarAnim.showTopBar && (
+					<div
+						className={`shrink-0 pt-8${actionBarAnim.topBarClass}`}
+						onAnimationEnd={actionBarAnim.onTopBarExitEnd}
+					>
+						<TurnNavigation
+							encounter={encounter}
+							onAdvanceTurn={advanceTurn}
+							onRetreatTurn={retreatTurn}
+							onClearEncounter={clearEncounter}
+							onRollAllInitiative={handleRollAllInitiative}
+							onOpenSourceManager={() => setSourceManagerOpen((o) => !o)}
+						/>
 					</div>
 				)}
 
-				{/* Scrollable area — combatant list */}
-				<div className="flex-1 overflow-y-auto min-h-0">
-					<div
-						className={`flex flex-col px-2 py-2${encounter.combatants.length === 0 ? " h-full items-center justify-center" : ""}`}
-					>
-						{encounter.combatants.length === 0 ? (
-							<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
-									key={c.id}
-									ref={i === encounter.activeIndex ? activeRowRef : null}
-									combatant={c}
-									isActive={i === encounter.activeIndex}
-									onRename={editCombatant}
-									onSetInitiative={setInitiative}
-									onRemove={removeCombatant}
-									onSetHp={setHp}
-									onAdjustHp={adjustHp}
-									onSetAc={setAc}
-									onToggleCondition={toggleCondition}
-									onToggleConcentration={toggleConcentration}
-									onShowStatBlock={
-										c.creatureId
-											? () => handleCombatantStatBlock(c.creatureId as string)
-											: undefined
-									}
-									onRollInitiative={
-										c.creatureId ? handleRollInitiative : undefined
-									}
-								/>
-							))
-						)}
+				{isEmpty ? (
+					/* Empty state — ActionBar centered */
+					<div className="flex flex-1 items-center justify-center min-h-0 pb-[15%] pt-8">
+						<div
+							className={`w-full${actionBarAnim.risingClass}`}
+							onAnimationEnd={actionBarAnim.onRiseEnd}
+						>
+							<ActionBar
+								onAddCombatant={addCombatant}
+								onAddFromBestiary={handleAddFromBestiary}
+								bestiarySearch={search}
+								bestiaryLoaded={isLoaded}
+								onViewStatBlock={handleViewStatBlock}
+								onBulkImport={handleBulkImport}
+								bulkImportDisabled={bulkImport.state.status === "loading"}
+								inputRef={actionBarInputRef}
+								playerCharacters={playerCharacters}
+								onAddFromPlayerCharacter={addFromPlayerCharacter}
+								onManagePlayers={() => setManagementOpen(true)}
+								autoFocus
+							/>
+						</div>
 					</div>
-				</div>
+				) : (
+					<>
+						{sourceManagerOpen && (
+							<div className="shrink-0 rounded-md border border-border bg-card px-4 py-3">
+								<SourceManager onCacheCleared={refreshCache} />
+							</div>
+						)}
 
-				{/* Action Bar — fixed at bottom */}
-				<div className="shrink-0 pb-8">
-					<ActionBar
-						onAddCombatant={addCombatant}
-						onAddFromBestiary={handleAddFromBestiary}
-						bestiarySearch={search}
-						bestiaryLoaded={isLoaded}
-						onViewStatBlock={handleViewStatBlock}
-						onBulkImport={handleBulkImport}
-						bulkImportDisabled={bulkImport.state.status === "loading"}
-						inputRef={actionBarInputRef}
-						playerCharacters={playerCharacters}
-						onAddFromPlayerCharacter={addFromPlayerCharacter}
-						onManagePlayers={() => setManagementOpen(true)}
-					/>
-				</div>
+						{/* Scrollable area — combatant list */}
+						<div className="flex-1 overflow-y-auto min-h-0">
+							<div className="flex flex-col px-2 py-2">
+								{encounter.combatants.map((c, i) => (
+									<CombatantRow
+										key={c.id}
+										ref={i === encounter.activeIndex ? activeRowRef : null}
+										combatant={c}
+										isActive={i === encounter.activeIndex}
+										onRename={editCombatant}
+										onSetInitiative={setInitiative}
+										onRemove={removeCombatant}
+										onSetHp={setHp}
+										onAdjustHp={adjustHp}
+										onSetAc={setAc}
+										onToggleCondition={toggleCondition}
+										onToggleConcentration={toggleConcentration}
+										onShowStatBlock={
+											c.creatureId
+												? () => handleCombatantStatBlock(c.creatureId as string)
+												: undefined
+										}
+										onRollInitiative={
+											c.creatureId ? handleRollInitiative : undefined
+										}
+									/>
+								))}
+							</div>
+						</div>
+
+						{/* Action Bar — fixed at bottom */}
+						<div
+							className={`shrink-0 pb-8${actionBarAnim.settlingClass}`}
+							onAnimationEnd={actionBarAnim.onSettleEnd}
+						>
+							<ActionBar
+								onAddCombatant={addCombatant}
+								onAddFromBestiary={handleAddFromBestiary}
+								bestiarySearch={search}
+								bestiaryLoaded={isLoaded}
+								onViewStatBlock={handleViewStatBlock}
+								onBulkImport={handleBulkImport}
+								bulkImportDisabled={bulkImport.state.status === "loading"}
+								inputRef={actionBarInputRef}
+								playerCharacters={playerCharacters}
+								onAddFromPlayerCharacter={addFromPlayerCharacter}
+								onManagePlayers={() => setManagementOpen(true)}
+							/>
+						</div>
+					</>
+				)}
 			</div>
 
 			{/* Pinned Stat Block Panel (left) */}

apps/web/src/components/action-bar.tsx

@@ -32,6 +32,7 @@ interface ActionBarProps {
 	playerCharacters?: readonly PlayerCharacter[];
 	onAddFromPlayerCharacter?: (pc: PlayerCharacter) => void;
 	onManagePlayers?: () => void;
+	autoFocus?: boolean;
 }
 
 function creatureKey(r: SearchResult): string {
@@ -50,6 +51,7 @@ export function ActionBar({
 	playerCharacters,
 	onAddFromPlayerCharacter,
 	onManagePlayers,
+	autoFocus,
 }: ActionBarProps) {
 	const [nameInput, setNameInput] = useState("");
 	const [suggestions, setSuggestions] = useState<SearchResult[]>([]);
@@ -260,6 +262,7 @@ export function ActionBar({
 						onKeyDown={handleKeyDown}
 						placeholder="+ Add combatants"
 						className="max-w-xs"
+						autoFocus={autoFocus}
 					/>
 					{hasSuggestions && (
 						<div className="absolute bottom-full z-50 mb-1 w-full max-w-xs rounded-md border border-border bg-card shadow-lg">

apps/web/src/index.css

@@ -80,20 +80,73 @@
 	}
 }
 
-@keyframes breathe {
-	0%,
-	100% {
-		opacity: 0.4;
-		scale: 0.9;
+@keyframes settle-to-bottom {
+	from {
+		transform: translateY(-40vh);
+		opacity: 0;
 	}
-	50% {
+	40% {
+		opacity: 1;
+	}
+	to {
+		transform: translateY(0);
 		opacity: 1;
-		scale: 1.1;
 	}
 }
 
-@utility animate-breathe {
-	animation: breathe 3s ease-in-out infinite;
+@utility animate-settle-to-bottom {
+	animation: settle-to-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+}
+
+@keyframes rise-to-center {
+	from {
+		transform: translateY(40vh);
+		opacity: 0;
+	}
+	40% {
+		opacity: 1;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@utility animate-rise-to-center {
+	animation: rise-to-center 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+}
+
+@keyframes slide-down-in {
+	from {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+	to {
+		transform: translateY(0);
+		opacity: 1;
+	}
+}
+
+@utility animate-slide-down-in {
+	animation: slide-down-in 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
+}
+
+@keyframes slide-up-out {
+	from {
+		transform: translateY(0);
+		opacity: 1;
+	}
+	60% {
+		opacity: 0;
+	}
+	to {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
+
+@utility animate-slide-up-out {
+	animation: slide-up-out 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }
 
 @custom-variant pointer-coarse (@media (pointer: coarse));