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>
Center action bar in empty state for better onboarding UX
2026-03-13 14:43:41 +01:00 · 2026-03-13 14:29:51 +01:00 · 2026-03-13 11:52:09 +01:00 · 2026-03-13 11:51:58 +01:00 · 2026-03-13 11:51:34 +01:00 · 2026-03-12 18:47:47 +01:00
10 changed files with 366 additions and 197 deletions
--- a/apps/web/src/App.tsx
+++ b/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) */}
--- a/apps/web/src/components/tests/turn-navigation.test.tsx
+++ b/apps/web/src/components/tests/turn-navigation.test.tsx
@@ -54,11 +54,11 @@ describe("TurnNavigation", () => {
 			expect(container.textContent).not.toContain("—");
 		});

-		it("round badge and combatant name are in separate DOM elements", () => {
+		it("round badge and combatant name are siblings in the center area", () => {
 			renderNav();
 			const badge = screen.getByText("R1");
 			const name = screen.getByText("Goblin");
-			expect(badge.parentElement).not.toBe(name.parentElement);
+			expect(badge.parentElement).toBe(name.parentElement);
 		});

 		it("updates the round badge when round changes", () => {
--- a/apps/web/src/components/action-bar.tsx
+++ b/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">
@@ -437,83 +440,93 @@ export function ActionBar({
 				<Button type="submit" size="sm">
 					Add
 				</Button>
-				{onManagePlayers && (
-					<Button
-						type="button"
-						size="sm"
-						variant="ghost"
-						onClick={onManagePlayers}
-						title="Player characters"
-					>
-						<Users className="h-4 w-4" />
-					</Button>
-				)}
-				{bestiaryLoaded && onViewStatBlock && (
-					<div ref={viewerRef} className="relative">
+				<div className="flex items-center gap-0">
+					{onManagePlayers && (
 						<Button
 							type="button"
-							size="sm"
+							size="icon"
 							variant="ghost"
-							onClick={() => (viewerOpen ? closeViewer() : openViewer())}
+							className="text-muted-foreground hover:text-hover-neutral"
+							onClick={onManagePlayers}
+							title="Player characters"
+							aria-label="Player characters"
 						>
-							<Eye className="h-4 w-4" />
+							<Users className="h-5 w-5" />
 						</Button>
-						{viewerOpen && (
-							<div className="absolute bottom-full right-0 z-50 mb-1 w-64 rounded-md border border-border bg-card shadow-lg">
-								<div className="p-2">
-									<Input
-										ref={viewerInputRef}
-										type="text"
-										value={viewerQuery}
-										onChange={(e) => handleViewerQueryChange(e.target.value)}
-										onKeyDown={handleViewerKeyDown}
-										placeholder="Search stat blocks..."
-										className="w-full"
-									/>
-								</div>
-								{viewerResults.length > 0 && (
-									<ul className="max-h-48 overflow-y-auto border-t border-border py-1">
-										{viewerResults.map((result, i) => (
-											<li key={creatureKey(result)}>
-												<button
-													type="button"
-													className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
-														i === viewerIndex
-															? "bg-accent/20 text-foreground"
-															: "text-foreground hover:bg-hover-neutral-bg"
-													}`}
-													onClick={() => handleViewerSelect(result)}
-													onMouseEnter={() => setViewerIndex(i)}
-												>
-													<span>{result.name}</span>
-													<span className="text-xs text-muted-foreground">
-														{result.sourceDisplayName}
-													</span>
-												</button>
-											</li>
-										))}
-									</ul>
-								)}
-								{viewerQuery.length >= 2 && viewerResults.length === 0 && (
-									<div className="border-t border-border px-3 py-2 text-sm text-muted-foreground">
-										No creatures found
+					)}
+					{bestiaryLoaded && onViewStatBlock && (
+						<div ref={viewerRef} className="relative">
+							<Button
+								type="button"
+								size="icon"
+								variant="ghost"
+								className="text-muted-foreground hover:text-hover-neutral"
+								onClick={() => (viewerOpen ? closeViewer() : openViewer())}
+								title="Browse stat blocks"
+								aria-label="Browse stat blocks"
+							>
+								<Eye className="h-5 w-5" />
+							</Button>
+							{viewerOpen && (
+								<div className="absolute bottom-full right-0 z-50 mb-1 w-64 rounded-md border border-border bg-card shadow-lg">
+									<div className="p-2">
+										<Input
+											ref={viewerInputRef}
+											type="text"
+											value={viewerQuery}
+											onChange={(e) => handleViewerQueryChange(e.target.value)}
+											onKeyDown={handleViewerKeyDown}
+											placeholder="Search stat blocks..."
+											className="w-full"
+										/>
 									</div>
-								)}
-							</div>
-						)}
-					</div>
-				)}
-				{bestiaryLoaded && onBulkImport && (
-					<Button
-						type="button"
-						size="sm"
-						variant="ghost"
-						onClick={onBulkImport}
-						disabled={bulkImportDisabled}
-					>
-						<Import className="h-4 w-4" />
-					</Button>
-				)}
+									{viewerResults.length > 0 && (
+										<ul className="max-h-48 overflow-y-auto border-t border-border py-1">
+											{viewerResults.map((result, i) => (
+												<li key={creatureKey(result)}>
+													<button
+														type="button"
+														className={`flex w-full items-center justify-between px-3 py-1.5 text-left text-sm ${
+															i === viewerIndex
+																? "bg-accent/20 text-foreground"
+																: "text-foreground hover:bg-hover-neutral-bg"
+														}`}
+														onClick={() => handleViewerSelect(result)}
+														onMouseEnter={() => setViewerIndex(i)}
+													>
+														<span>{result.name}</span>
+														<span className="text-xs text-muted-foreground">
+															{result.sourceDisplayName}
+														</span>
+													</button>
+												</li>
+											))}
+										</ul>
+									)}
+									{viewerQuery.length >= 2 && viewerResults.length === 0 && (
+										<div className="border-t border-border px-3 py-2 text-sm text-muted-foreground">
+											No creatures found
+										</div>
+									)}
+								</div>
+							)}
+						</div>
+					)}
+					{bestiaryLoaded && onBulkImport && (
+						<Button
+							type="button"
+							size="icon"
+							variant="ghost"
+							className="text-muted-foreground hover:text-hover-neutral"
+							onClick={onBulkImport}
+							disabled={bulkImportDisabled}
+							title="Bulk import"
+							aria-label="Bulk import"
+						>
+							<Import className="h-5 w-5" />
+						</Button>
+					)}
+				</div>
 			</form>
 		</div>
 	);
--- a/apps/web/src/components/combatant-row.tsx
+++ b/apps/web/src/components/combatant-row.tsx
@@ -49,11 +49,13 @@ function EditableName({
 	combatantId,
 	onRename,
 	onShowStatBlock,
+	color,
 }: {
 	name: string;
 	combatantId: CombatantId;
 	onRename: (id: CombatantId, newName: string) => void;
 	onShowStatBlock?: () => void;
+	color?: string;
 }) {
 	const [editing, setEditing] = useState(false);
 	const [draft, setDraft] = useState(name);
@@ -143,6 +145,7 @@ function EditableName({
 				onTouchCancel={cancelLongPress}
 				onTouchMove={cancelLongPress}
 				className="truncate text-left text-sm text-foreground cursor-text hover:text-hover-neutral transition-colors"
+				style={color ? { color } : undefined}
 			>
 				{name}
 			</button>
@@ -482,10 +485,9 @@ export function CombatantRow({
 		}
 	}, [combatant.isConcentrating]);

-	const pcColor =
-		combatant.color && !isActive && !combatant.isConcentrating
-			? PLAYER_COLOR_HEX[combatant.color as keyof typeof PLAYER_COLOR_HEX]
-			: undefined;
+	const pcColor = combatant.color
+		? PLAYER_COLOR_HEX[combatant.color as keyof typeof PLAYER_COLOR_HEX]
+		: undefined;

 	return (
 		/* biome-ignore lint/a11y/noStaticElementInteractions: role="button" is set conditionally when onShowStatBlock exists */
@@ -499,7 +501,6 @@ export function CombatantRow({
 				isPulsing && "animate-concentration-pulse",
 				onShowStatBlock && "cursor-pointer",
 			)}
-			style={pcColor ? { borderLeftColor: pcColor } : undefined}
 			onClick={onShowStatBlock}
 			onKeyDown={
 				onShowStatBlock ? activateOnKeyDown(onShowStatBlock) : undefined
@@ -566,6 +567,7 @@ export function CombatantRow({
 						combatantId={id}
 						onRename={onRename}
 						onShowStatBlock={onShowStatBlock}
+						color={pcColor}
 					/>
 					<ConditionTags
 						conditions={combatant.conditions}
--- a/apps/web/src/components/create-player-modal.tsx
+++ b/apps/web/src/components/create-player-modal.tsx
@@ -53,6 +53,15 @@ export function CreatePlayerModal({
 		}
 	}, [open, playerCharacter]);

+	useEffect(() => {
+		if (!open) return;
+		function handleKeyDown(e: KeyboardEvent) {
+			if (e.key === "Escape") onClose();
+		}
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+
 	if (!open) return null;

 	const handleSubmit = (e: FormEvent) => {
@@ -77,8 +86,16 @@ export function CreatePlayerModal({
 	};

 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-			<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
+		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			onMouseDown={onClose}
+		>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
+			<div
+				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+				onMouseDown={(e) => e.stopPropagation()}
+			>
 				<div className="mb-4 flex items-center justify-between">
 					<h2 className="text-lg font-semibold text-foreground">
 						{isEdit ? "Edit Player" : "Create Player"}
--- a/apps/web/src/components/player-management.tsx
+++ b/apps/web/src/components/player-management.tsx
@@ -3,7 +3,8 @@ import type {
 	PlayerCharacterId,
 	PlayerIcon,
 } from "@initiative/domain";
-import { Pencil, Plus, X } from "lucide-react";
+import { Pencil, Plus, Trash2, X } from "lucide-react";
+import { useEffect } from "react";
 import { PLAYER_COLOR_HEX, PLAYER_ICON_MAP } from "./player-icon-map";
 import { Button } from "./ui/button";
 import { ConfirmButton } from "./ui/confirm-button";
@@ -25,11 +26,28 @@ export function PlayerManagement({
 	onDelete,
 	onCreate,
 }: PlayerManagementProps) {
+	useEffect(() => {
+		if (!open) return;
+		function handleKeyDown(e: KeyboardEvent) {
+			if (e.key === "Escape") onClose();
+		}
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [open, onClose]);
+
 	if (!open) return null;

 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-			<div className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl">
+		// biome-ignore lint/a11y/noStaticElementInteractions: backdrop click to close
+		<div
+			className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+			onMouseDown={onClose}
+		>
+			{/* biome-ignore lint/a11y/noStaticElementInteractions: prevent close when clicking modal content */}
+			<div
+				className="w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-xl"
+				onMouseDown={(e) => e.stopPropagation()}
+			>
 				<div className="mb-4 flex items-center justify-between">
 					<h2 className="text-lg font-semibold text-foreground">
 						Player Characters
@@ -83,7 +101,7 @@ export function PlayerManagement({
 										<Pencil size={14} />
 									</button>
 									<ConfirmButton
-										icon={<X size={14} />}
+										icon={<Trash2 size={14} />}
 										label="Delete player character"
 										onConfirm={() => onDelete(pc.id)}
 										className="h-6 w-6 text-muted-foreground"
--- a/apps/web/src/components/source-manager.tsx
+++ b/apps/web/src/components/source-manager.tsx
@@ -47,7 +47,12 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 				<span className="text-sm font-semibold text-foreground">
 					Cached Sources
 				</span>
-				<Button size="sm" variant="outline" onClick={handleClearAll}>
+				<Button
+					size="sm"
+					variant="outline"
+					className="hover:text-hover-destructive hover:border-hover-destructive"
+					onClick={handleClearAll}
+				>
 					<Trash2 className="mr-1 h-3 w-3" />
 					Clear All
 				</Button>
@@ -69,7 +74,7 @@ export function SourceManager({ onCacheCleared }: SourceManagerProps) {
 						<button
 							type="button"
 							onClick={() => handleClearSource(source.sourceCode)}
-							className="text-muted-foreground hover:text-hover-danger"
+							className="rounded-md p-1 text-muted-foreground transition-colors hover:bg-hover-destructive-bg hover:text-hover-destructive"
 						>
 							<Trash2 className="h-3.5 w-3.5" />
 						</button>
--- a/apps/web/src/components/turn-navigation.tsx
+++ b/apps/web/src/components/turn-navigation.tsx
@@ -1,5 +1,5 @@
 import type { Encounter } from "@initiative/domain";
-import { Settings, StepBack, StepForward, Trash2 } from "lucide-react";
+import { Library, StepBack, StepForward, Trash2 } from "lucide-react";
 import { D20Icon } from "./d20-icon";
 import { Button } from "./ui/button";
 import { ConfirmButton } from "./ui/confirm-button";
@@ -27,28 +27,22 @@ export function TurnNavigation({

 	return (
 		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
-			<div className="flex flex-shrink-0 items-center gap-3">
-				<Button
-					variant="outline"
-					size="icon"
-					className="h-8 w-8 text-foreground border-foreground hover:text-hover-action hover:border-hover-action hover:bg-transparent"
-					onClick={onRetreatTurn}
-					disabled={!hasCombatants || isAtStart}
-					title="Previous turn"
-					aria-label="Previous turn"
-				>
-					<StepBack className="h-5 w-5" />
-				</Button>
-				<span className="rounded-full bg-muted text-foreground text-sm px-2 py-0.5 font-semibold">
+			<Button
+				size="icon"
+				onClick={onRetreatTurn}
+				disabled={!hasCombatants || isAtStart}
+				title="Previous turn"
+				aria-label="Previous turn"
+			>
+				<StepBack className="h-5 w-5" />
+			</Button>
+
+			<div className="min-w-0 flex-1 flex items-center justify-center gap-2 text-sm">
+				<span className="rounded-full bg-muted text-foreground text-sm px-2 py-0.5 font-semibold shrink-0">
 					R{encounter.roundNumber}
 				</span>
-			</div>
-
-			<div className="min-w-0 flex-1 text-center text-sm">
 				{activeCombatant ? (
-					<span className="truncate block font-medium">
-						{activeCombatant.name}
-					</span>
+					<span className="truncate font-medium">{activeCombatant.name}</span>
 				) : (
 					<span className="text-muted-foreground">No combatants</span>
 				)}
@@ -59,7 +53,7 @@ export function TurnNavigation({
 					<Button
 						variant="ghost"
 						size="icon"
-						className="h-8 w-8 text-muted-foreground hover:text-hover-action"
+						className="text-muted-foreground hover:text-hover-action"
 						onClick={onRollAllInitiative}
 						title="Roll all initiative"
 						aria-label="Roll all initiative"
@@ -69,25 +63,23 @@ export function TurnNavigation({
 					<Button
 						variant="ghost"
 						size="icon"
-						className="h-8 w-8 text-muted-foreground hover:text-hover-neutral"
+						className="text-muted-foreground hover:text-hover-neutral"
 						onClick={onOpenSourceManager}
 						title="Manage cached sources"
 						aria-label="Manage cached sources"
 					>
-						<Settings className="h-5 w-5" />
+						<Library className="h-5 w-5" />
 					</Button>
 					<ConfirmButton
 						icon={<Trash2 className="h-5 w-5" />}
 						label="Clear encounter"
 						onConfirm={onClearEncounter}
 						disabled={!hasCombatants}
-						className="h-8 w-8 text-muted-foreground"
+						className="text-muted-foreground"
 					/>
 				</div>
 				<Button
-					variant="outline"
 					size="icon"
-					className="h-8 w-8 text-foreground border-foreground hover:text-hover-action hover:border-hover-action hover:bg-transparent"
 					onClick={onAdvanceTurn}
 					disabled={!hasCombatants}
 					title="Next turn"
--- a/apps/web/src/components/ui/confirm-button.tsx
+++ b/apps/web/src/components/ui/confirm-button.tsx
@@ -97,8 +97,9 @@ export function ConfirmButton({
 				size="icon"
 				className={cn(
 					className,
-					isConfirming &&
-						"bg-destructive text-primary-foreground rounded-md animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground",
+					isConfirming
+						? "bg-destructive text-primary-foreground rounded-md animate-confirm-pulse hover:bg-destructive hover:text-primary-foreground"
+						: "hover:text-hover-destructive",
 				)}
 				onClick={handleClick}
 				onKeyDown={handleKeyDown}
--- a/apps/web/src/index.css
+++ b/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));
Author	SHA1	Message	Date
Lukas	75778884bd	Hide top bar in empty state and animate it in with first combatant All checks were successful CI / check (push) Successful in 45s Details CI / build-image (push) Successful in 18s Details 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>	2026-03-13 14:43:41 +01:00
Lukas	72d4f30e60	Center action bar in empty state for better onboarding UX Replace the abstract + icon with the actual input field centered at the optical center when no combatants exist. Animate the transition in both directions: settling down when the first combatant is added, rising up when all combatants are removed. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-13 14:29:51 +01:00
Lukas	96b37d4bdd	Color player character names instead of left border All checks were successful CI / check (push) Successful in 45s Details CI / build-image (push) Successful in 18s Details Player characters now show their chosen color on their name text rather than as a left border glow. Left border is reserved for active row (accent) and concentration (purple). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-13 11:52:09 +01:00
Lukas	76ca78c169	Improve player modals: Escape to close, trash icon for delete Both player management and create/edit modals now close on Escape. Delete player character button uses Trash2 icon instead of X to distinguish permanent deletion from dismissal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-13 11:51:58 +01:00
Lukas	b0c27b8ab9	Add red hover effect to destructive buttons ConfirmButton now shows hover:text-hover-destructive in its default state. Source manager delete buttons and Clear All get matching destructive hover styling. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-13 11:51:34 +01:00
Lukas	458c277e9f	Polish UI: consistent icon buttons, tooltips, modal backdrop close, and top bar layout All checks were successful CI / check (push) Successful in 45s Details CI / build-image (push) Successful in 17s Details - Standardize icon button sizing (size="icon") and color (text-muted-foreground) across top and bottom bars - Group bottom bar icon buttons with gap-0 to match top bar style - Add missing tooltips/aria-labels for stat block viewer, bulk import buttons - Replace Settings icon with Library for source manager - Make step forward/back buttons use primary (solid) variant - Move round badge next to combatant name in center of top bar - Close player create/edit and management modals on backdrop click Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-12 18:47:47 +01:00