Remove useNavigate everywhere, and make request a query param. And convert dialog to Jotai

src-web/lib/alert.ts

@@ -0,0 +1,21 @@
+import type { DialogProps } from '../components/core/Dialog';
+import type { AlertProps } from '../hooks/Alert';
+import { Alert } from '../hooks/Alert';
+import { showDialog } from './dialog';
+
+interface AlertArgs {
+  id: string;
+  title: DialogProps['title'];
+  body: AlertProps['body'];
+  size?: DialogProps['size'];
+}
+
+export function showAlert({ id, title, body, size = 'sm' }: AlertArgs) {
+  showDialog({
+    id,
+    title,
+    hideX: true,
+    size,
+    render: ({ hide }) => Alert({ onHide: hide, body }),
+  });
+}

src-web/lib/dialog.ts

@@ -0,0 +1,21 @@
+import { atom } from 'jotai/index';
+import type { DialogInstance } from '../components/Dialogs';
+import { trackEvent } from './analytics';
+import { jotaiStore } from './jotai';
+
+export const dialogsAtom = atom<DialogInstance[]>([]);
+
+export function showDialog({ id, ...props }: DialogInstance) {
+  trackEvent('dialog', 'show', { id });
+  jotaiStore.set(dialogsAtom, (a) => [...a.filter((d) => d.id !== id), { id, ...props }]);
+}
+
+export function toggleDialog({ id, ...props }: DialogInstance) {
+  const dialogs = jotaiStore.get(dialogsAtom);
+  if (dialogs.some((d) => d.id === id)) hideDialog(id);
+  else showDialog({ id, ...props });
+}
+
+export function hideDialog(id: string) {
+  jotaiStore.set(dialogsAtom, (a) => a.filter((d) => d.id !== id));
+}

src-web/lib/toast.ts

@@ -1,11 +1,18 @@
 import { atom } from 'jotai/index';
-import type { PrivateToastEntry, ToastEntry } from '../components/Toasts';
+import type { ToastInstance } from '../components/Toasts';
 import { generateId } from './generateId';
 import { jotaiStore } from './jotai';
 
-export const toastsAtom = atom<PrivateToastEntry[]>([]);
+export const toastsAtom = atom<ToastInstance[]>([]);
 
-export function showToast({ id, timeout = 5000, ...props }: ToastEntry) {
+export function showToast({
+  id,
+  timeout = 5000,
+  ...props
+}: Omit<ToastInstance, 'id' | 'timeout'> & {
+  id?: ToastInstance['id'];
+  timeout?: ToastInstance['timeout'];
+}) {
   id = id ?? generateId();
   if (timeout != null) {
     setTimeout(() => hideToast(id), timeout);