Implement the 010-ui-baseline feature that establishes a modern UI using Tailwind CSS v4 and shadcn/ui-style components for the encounter screen

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

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

@@ -0,0 +1,39 @@
+import { type FormEvent, useState } from "react";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+
+interface ActionBarProps {
+	onAddCombatant: (name: string) => void;
+	onAdvanceTurn: () => void;
+}
+
+export function ActionBar({ onAddCombatant, onAdvanceTurn }: ActionBarProps) {
+	const [nameInput, setNameInput] = useState("");
+
+	const handleAdd = (e: FormEvent) => {
+		e.preventDefault();
+		if (nameInput.trim() === "") return;
+		onAddCombatant(nameInput);
+		setNameInput("");
+	};
+
+	return (
+		<div className="flex items-center gap-3 rounded-md border border-border bg-card px-4 py-3">
+			<form onSubmit={handleAdd} className="flex flex-1 items-center gap-2">
+				<Input
+					type="text"
+					value={nameInput}
+					onChange={(e) => setNameInput(e.target.value)}
+					placeholder="Combatant name"
+					className="max-w-xs"
+				/>
+				<Button type="submit" size="sm">
+					Add
+				</Button>
+			</form>
+			<Button variant="outline" size="sm" onClick={onAdvanceTurn}>
+				Next Turn
+			</Button>
+		</div>
+	);
+}