initial system events

src/App.tsx

@@ -8,6 +8,7 @@ import { DashboardProvider } from './dashboard/provider/DashboardProvider.tsx';
 import { PrinterWidgetProvider } from './printers/providers/PrinterWidgetProvider.tsx';
 import { SSEProvider } from './core/sse/SSEProvider.tsx';
 import { SettingsProvider } from './core/settings/settingsProvider.tsx';
+import { EventNotifications } from './system/components/event-notifications/EventNotifications.tsx';
 
 export default function App() {
     const [opened, { toggle }] = useDisclosure();
@@ -40,6 +41,7 @@ export default function App() {
                     </AppShell>
                     <ScrollToTop />
                     <AxiosErrorHandler />
+                    <EventNotifications />
                     <PrinterWidgetProvider />
                 </DashboardProvider>
             </SSEProvider>

src/system/components/event-notifications/EventNotifications.tsx

@@ -0,0 +1,36 @@
+import SSEContext from "@/core/sse/SSEContext";
+import { useId } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
+import { useContext, useEffect, useState } from "react";
+
+export function EventNotifications() {
+    const subscriberId = useId();
+    const { connected, subscribe, unsubscribe } = useContext(SSEContext)
+    const [message, setMessage] = useState("")
+    const [error, setError] = useState<Error | null>(null);
+    useEffect(() => {
+        if (!connected) return;
+        setMessage("")
+        const subscription = {
+            subscriberId,
+            provider: `system/events`,
+        }
+        subscribe({
+            ...subscription,
+            event: `system.state`,
+            callback: setMessage
+        }).catch(setError);
+        return () => {
+            unsubscribe(subscriberId)
+        }
+    }, [connected])
+
+    useEffect(() => {
+        console.log(message)
+        notifications.show({
+            title: message,
+            message: message,
+        })
+    }, [message])
+    return (<></>)
+}