peter
3ef2c38eb4
Modal takes a required initialFocus (field / close / action), a field that loads late takes the focus while it still rests on the close button, and ModalFooter portals a dialog's commit row under the scrolling body from any depth. The header and footer fades follow the body's scroll timeline, and the viewport's interactive-widget=resizes-content keeps the footer above an on-screen keyboard.
21 lines
815 B
TypeScript
21 lines
815 B
TypeScript
import { useSyncExternalStore } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { dismissError, getError, subscribeError } from "../lib/errorDialog";
|
|
import Modal, { ModalFooter } from "./ui/Modal";
|
|
import { Button } from "./ui/Button";
|
|
|
|
// Renders the current app error (if any) as a modal the user must acknowledge.
|
|
export default function ErrorDialog() {
|
|
const { t } = useTranslation();
|
|
const err = useSyncExternalStore(subscribeError, getError, getError);
|
|
if (!err) return null;
|
|
return (
|
|
<Modal initialFocus="close" title={err.title} onClose={dismissError} maxWidth="max-w-md">
|
|
<p className="text-sm leading-relaxed text-fg/90">{err.message}</p>
|
|
<ModalFooter>
|
|
<Button onClick={dismissError}>{t("errors.ok")}</Button>
|
|
</ModalFooter>
|
|
</Modal>
|
|
);
|
|
}
|