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

Replace single-click rename with double-click, pencil icon, and long-press (#6)

Browse Source 
Single-clicking a combatant name now opens the stat block panel instead of
entering edit mode. Renaming is triggered by double-click, a hover pencil
icon, or long-press on touch. Also fixes condition picker positioning when
near viewport edges.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-11 22:22:21 +01:00
parent 613bb70065
commit 2d8e823eff
5 changed files with 118 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/src/components/condition-picker.tsx
View File

@@ -64,12 +64,21 @@ export function ConditionPicker({
}: ConditionPickerProps) {
const ref = useRef<HTMLDivElement>(null);
const [flipped, setFlipped] = useState(false);
const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
useLayoutEffect(() => {
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
setFlipped(rect.bottom > window.innerHeight);
const spaceBelow = window.innerHeight - rect.top;
const spaceAbove = rect.bottom;
const shouldFlip =
rect.bottom > window.innerHeight && spaceAbove > spaceBelow;
setFlipped(shouldFlip);
const available = shouldFlip ? spaceAbove : spaceBelow;
if (rect.height > available) {
setMaxHeight(available - 16);
}
}, []);
useEffect(() => {
@@ -88,9 +97,10 @@ export function ConditionPicker({
<div
ref={ref}
className={cn(
"absolute z-10 w-fit rounded-md border border-border bg-background p-1 shadow-lg",
flipped ? "bottom-full mb-1" : "mt-1",
"absolute left-0 z-10 w-fit overflow-y-auto rounded-md border border-border bg-background p-1 shadow-lg",
flipped ? "bottom-full mb-1" : "top-full mt-1",
)}
style={maxHeight ? { maxHeight } : undefined}
>
{CONDITION_DEFINITIONS.map((def) => {
const Icon = ICON_MAP[def.iconName];