Add system info

remote_frontend/src/hooks/providers/ToastProvider.tsx

@@ -0,0 +1,44 @@
+import {
+  Toast,
+  ToastBody,
+  ToastTitle,
+  Toaster,
+  useId,
+  useToastController,
+} from "@fluentui/react-components";
+import React, { PropsWithChildren } from "react";
+
+type ToastContext = (
+  title: string,
+  body: string,
+  intent?: "error" | "info" | "success" | "warning"
+) => void;
+
+const ToastContextK = React.createContext<ToastContext | null>(null);
+
+export function ToastProvider(p: PropsWithChildren): React.ReactElement {
+  const toasterId = useId("toaster");
+  const { dispatchToast } = useToastController(toasterId);
+
+  const hook: ToastContext = (title, body, intent) => {
+    dispatchToast(
+      <Toast>
+        <ToastTitle>{title}</ToastTitle>
+        <ToastBody>{body}</ToastBody>
+      </Toast>,
+      { intent: intent ?? "info" }
+    );
+  };
+
+  return (
+    <>
+      <ToastContextK.Provider value={hook}>{p.children}</ToastContextK.Provider>
+
+      <Toaster toasterId={toasterId} />
+    </>
+  );
+}
+
+export function useToast(): ToastContext {
+  return React.useContext(ToastContextK)!;
+}