Implement the 023-clear-encounter feature that adds a clear encounter button with confirmation dialog to remove all combatants and reset round/turn counters, with the cleared state persisting across page refreshes

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

apps/web/src/components/turn-navigation.tsx

@@ -1,17 +1,19 @@
 import type { Encounter } from "@initiative/domain";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
 import { Button } from "./ui/button";
 
 interface TurnNavigationProps {
 	encounter: Encounter;
 	onAdvanceTurn: () => void;
 	onRetreatTurn: () => void;
+	onClearEncounter: () => void;
 }
 
 export function TurnNavigation({
 	encounter,
 	onAdvanceTurn,
 	onRetreatTurn,
+	onClearEncounter,
 }: TurnNavigationProps) {
 	const hasCombatants = encounter.combatants.length > 0;
 	const isAtStart = encounter.roundNumber === 1 && encounter.activeIndex === 0;
@@ -44,16 +46,27 @@ export function TurnNavigation({
 				)}
 			</div>
 
-			<Button
-				variant="outline"
-				size="sm"
-				className="hover:bg-muted"
-				onClick={onAdvanceTurn}
-				disabled={!hasCombatants}
-			>
-				Next
-				<ChevronRight className="h-4 w-4" />
-			</Button>
+			<div className="flex items-center gap-1">
+				<Button
+					variant="outline"
+					size="sm"
+					className="hover:bg-muted"
+					onClick={onAdvanceTurn}
+					disabled={!hasCombatants}
+				>
+					Next
+					<ChevronRight className="h-4 w-4" />
+				</Button>
+				<Button
+					variant="ghost"
+					size="icon"
+					className="h-8 w-8 text-muted-foreground hover:text-destructive"
+					onClick={onClearEncounter}
+					disabled={!hasCombatants}
+				>
+					<Trash2 className="h-4 w-4" />
+				</Button>
+			</div>
 		</div>
 	);
 }