admin: live query detail becomes a modal, live/history and period pickers become tabs and radios, client delete confirms in a dialog

the streamed-query detail panel is now a rac modal dialog with focus containment and restore. the live/history switch is rac tabs driven by the url, the overview period picker is a rac radio group, and the clients delete flow uses the shared confirm dialog; an authority turn keeps the dialog open and withdraws only the destructive action.
This commit is contained in:
2026-08-29 11:55:24 +02:00
parent 79578e1d2a
commit 317d5dd4f8
11 changed files with 709 additions and 375 deletions
+21 -8
View File
@@ -8,6 +8,7 @@
* and a stray outside click is not one. Escape still cancels.
*/
import type { ReactNode } from "react";
import * as stylex from "@stylexjs/stylex";
import { Dialog as AriaDialog, Heading, Modal, ModalOverlay } from "react-aria-components";
import { colors } from "./tokens.stylex";
@@ -19,6 +20,14 @@ interface Props {
/** The full sentence the operator reads before confirming; names the entity. */
message: string;
confirmLabel: string;
/**
* Stands in for the confirm action when the write can no longer land, the way
* an open edit dialog drops its Save. Closing the dialog instead would throw
* focus at a control that is now disabled and say nothing about why, so the
* question stays on screen and only the answer that would fail is withdrawn.
* Cancel is always live.
*/
lock?: ReactNode;
onConfirm: () => void;
onCancel: () => void;
}
@@ -80,7 +89,7 @@ const styles = stylex.create({
},
});
export default function ConfirmDialog({ isOpen, title, message, confirmLabel, onConfirm, onCancel }: Props) {
export default function ConfirmDialog({ isOpen, title, message, confirmLabel, lock, onConfirm, onCancel }: Props) {
return (
<ModalOverlay
isOpen={isOpen}
@@ -99,13 +108,17 @@ export default function ConfirmDialog({ isOpen, title, message, confirmLabel, on
<button type="button" onClick={onCancel} {...stylex.props(shared.button, shared.focusRing)}>
Cancel
</button>
<button
type="button"
onClick={onConfirm}
{...stylex.props(styles.dangerButton, shared.focusRing)}
>
{confirmLabel}
</button>
{lock === undefined ? (
<button
type="button"
onClick={onConfirm}
{...stylex.props(styles.dangerButton, shared.focusRing)}
>
{confirmLabel}
</button>
) : (
lock
)}
</div>
</AriaDialog>
</Modal>