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

src-web/components/Toasts.tsx

@@ -5,41 +5,30 @@ import { hideToast, toastsAtom } from '../lib/toast';
 import { Toast, type ToastProps } from './core/Toast';
 import { Portal } from './Portal';
 
-export type ToastEntry = {
-  id?: string;
+export type ToastInstance = {
+  id: string;
   message: ReactNode;
-  timeout?: 3000 | 5000 | 8000 | null;
+  timeout: 3000 | 5000 | 8000 | null;
   onClose?: ToastProps['onClose'];
 } & Omit<ToastProps, 'onClose' | 'open' | 'children' | 'timeout'>;
 
-export type PrivateToastEntry = ToastEntry & {
-  id: string;
-  timeout: number | null;
-};
-
-function ToastInstance({ id, message, timeout, ...props }: PrivateToastEntry) {
-  return (
-    <Toast
-      open
-      timeout={timeout}
-      {...props}
-      // We call onClose inside actions.hide instead of passing to toast so that
-      // it gets called from external close calls as well
-      onClose={() => hideToast(id)}
-    >
-      {message}
-    </Toast>
-  );
-}
-
 export const Toasts = () => {
   const toasts = useAtomValue(toastsAtom);
   return (
     <Portal name="toasts">
       <div className="absolute right-0 bottom-0 z-20">
         <AnimatePresence>
-          {toasts.map((props: PrivateToastEntry) => (
-            <ToastInstance key={props.id} {...props} />
+          {toasts.map(({ message, ...props }: ToastInstance) => (
+            <Toast
+              key={props.id}
+              open
+              {...props}
+              // We call onClose inside actions.hide instead of passing to toast so that
+              // it gets called from external close calls as well
+              onClose={() => hideToast(props.id)}
+            >
+              {message}
+            </Toast>
           ))}
         </AnimatePresence>
       </div>