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,7 +3,13 @@ import {
 	rollInitiativeUseCase,
 } from "@initiative/application";
 import type { CombatantId, Creature, CreatureId } from "@initiative/domain";
-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";
@@ -25,22 +31,37 @@ function useActionBarAnimation(combatantCount: number) {
 	const wasEmptyRef = useRef(combatantCount === 0);
 	const [settling, setSettling] = useState(false);
 	const [rising, setRising] = useState(false);
+	const [topBarExiting, setTopBarExiting] = useState(false);
 
-	useEffect(() => {
+	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 {
-		settling,
-		rising,
+		risingClass,
+		settlingClass,
+		topBarClass,
+		showTopBar,
 		onSettleEnd: () => setSettling(false),
 		onRiseEnd: () => setRising(false),
+		onTopBarExitEnd: () => setTopBarExiting(false),
 	};
 }
 
@@ -218,37 +239,31 @@ export function App() {
 	}, [encounter.activeIndex, encounter.combatants, isLoaded]);
 
 	const isEmpty = encounter.combatants.length === 0;
-	const risingClass = actionBarAnim.rising ? " animate-rise-to-center" : "";
-	const settlingClass = actionBarAnim.settling
-		? " animate-settle-to-bottom"
-		: "";
 
 	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>
 				)}
 
 				{isEmpty ? (
 					/* Empty state — ActionBar centered */
-					<div className="flex flex-1 items-center justify-center min-h-0 pb-[15%]">
+					<div className="flex flex-1 items-center justify-center min-h-0 pb-[15%] pt-8">
 						<div
-							className={`w-full${risingClass}`}
+							className={`w-full${actionBarAnim.risingClass}`}
 							onAnimationEnd={actionBarAnim.onRiseEnd}
 						>
 							<ActionBar
@@ -269,6 +284,12 @@ export function App() {
 					</div>
 				) : (
 					<>
+						{sourceManagerOpen && (
+							<div className="shrink-0 rounded-md border border-border bg-card px-4 py-3">
+								<SourceManager onCacheCleared={refreshCache} />
+							</div>
+						)}
+
 						{/* Scrollable area — combatant list */}
 						<div className="flex-1 overflow-y-auto min-h-0">
 							<div className="flex flex-col px-2 py-2">
@@ -301,7 +322,7 @@ export function App() {
 
 						{/* Action Bar — fixed at bottom */}
 						<div
-							className={`shrink-0 pb-8${settlingClass}`}
+							className={`shrink-0 pb-8${actionBarAnim.settlingClass}`}
 							onAnimationEnd={actionBarAnim.onSettleEnd}
 						>
 							<ActionBar