Merge pull request #153 from oslabs-beta/dev

Dev

Author: amitharor

client/src/App.tsx

@@ -23,6 +23,9 @@ const App = () => {
     return window.matchMedia('(prefers-color-scheme: dark)').matches;
   });
 
+  // Toast position state for responsive behavior
+  const [toastPosition, setToastPosition] = useState('top-center');
+
   // ----------------------------------------------------------
   // * USEEFFECT for light/dark mode toggle
   // ----------------------------------------------------------
@@ -36,6 +39,26 @@ const App = () => {
     }
   }, [isDark]);
 
+  // ----------------------------------------------------------
+  // * USEEFFECT for responsive toast positioning
+  // ----------------------------------------------------------
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 640px)');
+
+    const updateToastPosition = (e) => {
+      setToastPosition(e.matches ? 'bottom-right' : 'top-center');
+    };
+
+    // Set initial position
+    updateToastPosition(mediaQuery);
+
+    // Listen for screen size changes
+    mediaQuery.addEventListener('change', updateToastPosition);
+
+    // Cleanup listener
+    return () => mediaQuery.removeEventListener('change', updateToastPosition);
+  }, []);
+
   const toggleTheme = () => {
     setIsDark((prevIsDark) => !prevIsDark);
   };
@@ -61,20 +84,22 @@ const App = () => {
             </div>
           </SignedOut>
           <SignedIn>
+            {/* SONNER TOAST NOTIFICATIONS - Moved outside to same stacking context as Header */}
+            <Toaster
+              theme={isDark ? 'dark' : 'light'}
+              position={toastPosition}
+              className="z-[60]" // Higher than header's z-50
+              richColors={true}
+              expand={false}
+              duration={5000}
+              closeButton={false}
+            />
+
             {/* Create a fixed viewport container that starts from top (overlaps with header) */}
             <div className="fixed bottom-0 left-0 right-0 top-0 flex flex-col">
               {/* Scrollable content area with top padding to account for header */}
               <div className="flex-1 overflow-y-auto pb-24 pt-16">
                 <div className="max-w-9xl mx-auto">
-                  {/* SONNER TOAST NOTIFICATIONS */}
-                  <Toaster
-                    theme={isDark ? 'dark' : 'light'}
-                    position="bottom-right"
-                    richColors={true}
-                    expand={false}
-                    duration={5000}
-                    closeButton={false}
-                  />
                   {/* SIMPLE WEBSOCKET TOAST NOTIFICATIONS */}
                   <ToastNotifications />
                   <Routes>

client/src/components/ToastNotifications.tsx

@@ -23,9 +23,14 @@ interface K8sNotification {
 
 const ToastNotifications = () => {
   useEffect(() => {
-    console.log('[Toast] 🚀 Component mounted, attempting WebSocket connection...');
-    console.log('[Toast] 🔗 Connecting to:', import.meta.env.VITE_API_URL || 'http://localhost:3000');
-    
+    console.log(
+      '[Toast] 🚀 Component mounted, attempting WebSocket connection...',
+    );
+    console.log(
+      '[Toast] 🔗 Connecting to:',
+      import.meta.env.VITE_API_URL || 'http://localhost:3000',
+    );
+
     // Connect to WebSocket server with more options
     const socket = io(import.meta.env.VITE_API_URL || 'http://localhost:3000', {
       reconnection: true,
@@ -45,7 +50,10 @@ const ToastNotifications = () => {
     });
 
     socket.on('disconnect', (reason) => {
-      console.log('[Toast] ❌ Disconnected from WebSocket server. Reason:', reason);
+      console.log(
+        '[Toast] ❌ Disconnected from WebSocket server. Reason:',
+        reason,
+      );
       toast.warning('Disconnected from monitoring server');
     });
 
@@ -63,13 +71,17 @@ const ToastNotifications = () => {
         title: notification.title,
         severity: notification.metadata.severity,
         namespace: notification.metadata.namespace,
-        pod: notification.metadata.pod
+        pod: notification.metadata.pod,
       });
 
       // Create toast message
       const message = `${notification.title}\n${notification.metadata.namespace}/${notification.metadata.pod}\n${notification.message}`;
-      
-      console.log('[Toast] 🍞 Showing toast for:', notification.type, notification.metadata.severity);
+
+      console.log(
+        '[Toast] 🍞 Showing toast for:',
+        notification.type,
+        notification.metadata.severity,
+      );
 
       // Show toast based on type and severity
       switch (notification.type) {
@@ -98,7 +110,10 @@ const ToastNotifications = () => {
           toast.info(message, { duration: 5000 });
           break;
         default:
-          console.log('[Toast] ❓ Unknown notification type:', notification.type);
+          console.log(
+            '[Toast] ❓ Unknown notification type:',
+            notification.type,
+          );
           toast.info(message, { duration: 5000 });
       }
     });
@@ -113,9 +128,9 @@ const ToastNotifications = () => {
       console.log('[Toast] 🧪 Connection status check:');
       console.log('[Toast] 🔌 Connected:', socket.connected);
       console.log('[Toast] 🆔 Socket ID:', socket.id);
-      
+
       // Test toast to make sure Sonner is working
-      toast.info('Toast component loaded and ready!');
+      toast.info('Coffybara loaded and ready!');
     }, 2000);
 
     // Cleanup on unmount