From 44ad8c7f30618b5265b8d19a1fa402bfa0135c68 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 11 Jun 2024 12:04:46 -0700
Subject: [PATCH] Put toast on top

---
 src-web/components/GlobalHooks.tsx  | 12 ++++++++++++
 src-web/components/ToastContext.tsx |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src-web/components/GlobalHooks.tsx b/src-web/components/GlobalHooks.tsx
index f38c5902..adefe109 100644
--- a/src-web/components/GlobalHooks.tsx
+++ b/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();
diff --git a/src-web/components/ToastContext.tsx b/src-web/components/ToastContext.tsx
index ada47ec5..f6d056ef 100644
--- a/src-web/components/ToastContext.tsx
+++ b/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} />