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,16 +239,15 @@ 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">
+			<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}
@@ -237,18 +257,13 @@ export function App() {
 							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>
 				)}
 
 				{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

apps/web/src/index.css

@@ -95,7 +95,7 @@
 }
 
 @utility animate-settle-to-bottom {
-	animation: settle-to-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1);
+	animation: settle-to-bottom 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
 }
 
 @keyframes rise-to-center {
@@ -113,7 +113,40 @@
 }
 
 @utility animate-rise-to-center {
-	animation: rise-to-center 700ms cubic-bezier(0.22, 1, 0.36, 1);
+	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));