Put toast on top

src-web/components/GlobalHooks.tsx

@@ -32,6 +32,8 @@ import { monokaiProDefault } from '../lib/theme/themes/monokai-pro';
 import { rosePineDefault } from '../lib/theme/themes/rose-pine';
 import { yaakDark } from '../lib/theme/themes/yaak';
 import { getThemeCSS } from '../lib/theme/window';
+import { Button } from './core/Button';
+import { useToast } from './ToastContext';
 
 export function GlobalHooks() {
   // Include here so they always update, even if no component references them
@@ -39,6 +41,16 @@ export function GlobalHooks() {
   useRecentEnvironments();
   useRecentRequests();
 
+  const toast = useToast();
+  useEffect(() => {
+    toast.show({
+      id: 'test',
+      message: 'Hello Toast!',
+      action: <Button color="primary">HEllo</Button>,
+      timeout: 1000000,
+    });
+  }, [toast]);
+
   // Other useful things
   useSyncThemeToDocument();
   useCommandPalette();

src-web/components/ToastContext.tsx

@@ -67,7 +67,7 @@ export const ToastProvider = ({ children }: { children: React.ReactNode }) => {
     <ToastContext.Provider value={state}>
       {children}
       <Portal name="toasts">
-        <div className="absolute right-0 bottom-0">
+        <div className="absolute right-0 bottom-0 z-10">
           <AnimatePresence>
             {toasts.map((props: PrivateToastEntry) => (
               <ToastInstance key={props.id} {...props} />