From 75778884bd1be7d135b2f5ea9b8a8e77a0149f7b Mon Sep 17 00:00:00 2001
From: Lukas <lukas.richter@maibornwolff.de>
Date: Fri, 13 Mar 2026 14:34:02 +0100
Subject: [PATCH] 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   | 75 +++++++++++++++++++++++++++---------------
 apps/web/src/index.css | 37 +++++++++++++++++++--
 2 files changed, 83 insertions(+), 29 deletions(-)

diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index ff5037d..9192dd8 100644
--- a/apps/web/src/App.tsx
+++ b/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
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 4314f8e..741f4af 100644
--- a/apps/web/src/index.css
+++ b/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));