peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ux): modal error dialog for server-refused actions + ESC closes only the topmost

Browse source 
- Duplicate-tag create/rename hit the uq_tags_user_name constraint and 500'd; now caught and
  returned as a clear 409 ('You already have a tag named …').
- New global error dialog (errorDialog store + ErrorDialog modal) for definitive server refusals;
  the api layer wiring + mount land with the rest of the round.
- Modal now keeps a stack so ESC dismisses only the top modal — an error over the tag editor
  closes the error and leaves the editor open.
This commit is contained in:
npeter83 2026-06-18 01:17:31 +02:00
parent edd8c85132
commit b55a944e7c
7 changed files with 102 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/Modal.tsx
View file

@ -1,7 +1,12 @@
import { useEffect, type ReactNode } from "react";
import { useEffect, useRef, type ReactNode } from "react";
import { createPortal } from "react-dom";
import { X } from "lucide-react";
// Stack of open modals so ESC only closes the topmost one — e.g. an error dialog over the
// tag editor: pressing ESC dismisses just the error and returns to the editor underneath.
let modalStack: number[] = [];
let nextModalId = 1;
// Small centered modal shell (portaled to <body>): backdrop + ESC + scroll-lock close.
export default function Modal({
title,
@ -14,18 +19,27 @@ export default function Modal({
children: ReactNode;
maxWidth?: string;
}) {
// Keep a stable handler across renders so the stack id is assigned once per mount.
const onCloseRef = useRef(onClose);
onCloseRef.current = onClose;
useEffect(() => {
const id = nextModalId++;
modalStack.push(id);
const onKey = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
if (e.key === "Escape" && modalStack[modalStack.length - 1] === id) {
e.stopPropagation();
onCloseRef.current();
}
};
window.addEventListener("keydown", onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
window.removeEventListener("keydown", onKey);
modalStack = modalStack.filter((x) => x !== id);
document.body.style.overflow = prev;
};
}, [onClose]);
}, []);
return createPortal(
<div