Add status bar provider (#11066)

web/src/components/navigation/Bottombar.tsx

@@ -4,11 +4,15 @@ import { Drawer, DrawerContent, DrawerTrigger } from "../ui/drawer";
 import useSWR from "swr";
 import { FrigateStats } from "@/types/stats";
 import { useFrigateStats } from "@/api/ws";
-import { useMemo } from "react";
+import { useContext, useEffect, useMemo } from "react";
 import useStats from "@/hooks/use-stats";
 import GeneralSettings from "../menu/GeneralSettings";
 import AccountSettings from "../menu/AccountSettings";
 import useNavigation from "@/hooks/use-navigation";
+import {
+  StatusBarMessagesContext,
+  StatusMessage,
+} from "@/context/statusbar-provider";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
@@ -30,6 +34,11 @@ function StatusAlertNav() {
     revalidateOnFocus: false,
   });
   const { payload: latestStats } = useFrigateStats();
+
+  const { messages, addMessage, clearMessages } = useContext(
+    StatusBarMessagesContext,
+  )!;
+
   const stats = useMemo(() => {
     if (latestStats) {
       return latestStats;
@@ -39,7 +48,14 @@ function StatusAlertNav() {
   }, [initialStats, latestStats]);
   const { potentialProblems } = useStats(stats);
 
-  if (!potentialProblems || potentialProblems.length == 0) {
+  useEffect(() => {
+    clearMessages("stats");
+    potentialProblems.forEach((problem) => {
+      addMessage("stats", problem.text, problem.color);
+    });
+  }, [potentialProblems, addMessage, clearMessages]);
+
+  if (!messages || Object.keys(messages).length === 0) {
     return;
   }
 
@@ -50,13 +66,16 @@ function StatusAlertNav() {
       </DrawerTrigger>
       <DrawerContent className="max-h-[75dvh] px-2 mx-1 rounded-t-2xl overflow-hidden">
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
-          {potentialProblems.map((prob) => (
-            <div
-              key={prob.text}
-              className="w-full flex items-center text-xs gap-2 capitalize"
-            >
-              <IoIosWarning className={`size-5 ${prob.color}`} />
-              {prob.text}
+          {Object.entries(messages).map(([key, messageArray]) => (
+            <div key={key} className="w-full flex items-center gap-2">
+              {messageArray.map(({ id, text, color }: StatusMessage) => (
+                <div key={id} className="flex items-center text-xs gap-2">
+                  <IoIosWarning
+                    className={`size-5 ${color || "text-danger"}`}
+                  />
+                  {text}
+                </div>
+              ))}
             </div>
           ))}
         </div>