dostulata/initiative
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement the 027-ui-polish feature that adds six combatant row improvements (inline conditions, row-click stat block, hover-only remove button, AC shield shape, expanded concentration click target, larger d20 icon) plus top bar redesign with icon-only StepBack/StepForward navigation buttons, dark-themed scrollbars, and multiple UX fixes including stat block panel stability during initiative rolls and mobile touch safety for hidden buttons

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-10 19:00:49 +01:00
parent d5f7b6ee36
commit f029c1a85b
14 changed files with 811 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
apps/web/src/components/turn-navigation.tsx
View File

@@ -1,5 +1,5 @@
import type { Encounter } from "@initiative/domain";
import { ChevronLeft, ChevronRight, Trash2 } from "lucide-react";
import { StepBack, StepForward, Trash2 } from "lucide-react";
import { D20Icon } from "./d20-icon";
import { Button } from "./ui/button";
@@ -26,13 +26,14 @@ export function TurnNavigation({
<div className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3">
<Button
variant="outline"
size="sm"
className="hover:bg-muted"
size="icon"
className="h-8 w-8 text-foreground border-foreground hover:text-primary hover:border-primary hover:bg-muted"
onClick={onRetreatTurn}
disabled={!hasCombatants || isAtStart}
title="Previous turn"
aria-label="Previous turn"
>
<ChevronLeft className="h-4 w-4" />
Previous
<StepBack className="h-5 w-5" />
</Button>
<div className="text-center text-sm">
@@ -49,35 +50,38 @@ export function TurnNavigation({
)}
</div>
<div className="flex items-center gap-1">
<div className="flex items-center gap-3">
<div className="flex items-center gap-0">
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:text-primary"
onClick={onRollAllInitiative}
title="Roll all initiative"
aria-label="Roll all initiative"
>
<D20Icon className="h-6 w-6" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:text-destructive"
onClick={onClearEncounter}
disabled={!hasCombatants}
>
<Trash2 className="h-5 w-5" />
</Button>
</div>
<Button
variant="outline"
size="sm"
className="hover:bg-muted"
size="icon"
className="h-8 w-8 text-foreground border-foreground hover:text-primary hover:border-primary hover:bg-muted"
onClick={onAdvanceTurn}
disabled={!hasCombatants}
title="Next turn"
aria-label="Next turn"
>
Next
<ChevronRight className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
className="h-8 w-8 text-muted-foreground hover:text-primary"
onClick={onRollAllInitiative}
title="Roll all initiative"
aria-label="Roll all initiative"
>
<D20Icon className="h-5 w-5" />
</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" />
<StepForward className="h-5 w-5" />
</Button>
</div>
</div>