Link to relevant page from status bar warnings / errors (#11140)

* Use hash state for system pages

* Add links to items

* Add stats to other types

* Link on mobile as well

* Use link

* Cleanup using util

web/src/components/Statusbar.tsx

@@ -9,6 +9,7 @@ import { useContext, useEffect, useMemo } from "react";
 import { FaCheck } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { MdCircle } from "react-icons/md";
+import { Link } from "react-router-dom";
 import useSWR from "swr";
 
 export default function Statusbar() {
@@ -43,7 +44,13 @@ export default function Statusbar() {
   useEffect(() => {
     clearMessages("stats");
     potentialProblems.forEach((problem) => {
-      addMessage("stats", problem.text, problem.color);
+      addMessage(
+        "stats",
+        problem.text,
+        problem.color,
+        undefined,
+        problem.relevantLink,
+      );
     });
   }, [potentialProblems, addMessage, clearMessages]);
 
@@ -110,14 +117,25 @@ export default function Statusbar() {
         ) : (
           Object.entries(messages).map(([key, messageArray]) => (
             <div key={key} className="h-full flex items-center gap-2">
-              {messageArray.map(({ id, text, color }: StatusMessage) => (
-                <div key={id} className="flex items-center text-sm gap-2">
-                  <IoIosWarning
-                    className={`size-5 ${color || "text-danger"}`}
-                  />
-                  {text}
-                </div>
-              ))}
+              {messageArray.map(({ id, text, color, link }: StatusMessage) => {
+                const message = (
+                  <div
+                    key={id}
+                    className={`flex items-center text-sm gap-2 ${link ? "hover:underline cursor-pointer" : ""}`}
+                  >
+                    <IoIosWarning
+                      className={`size-5 ${color || "text-danger"}`}
+                    />
+                    {text}
+                  </div>
+                );
+
+                if (link) {
+                  return <Link to={link}>{message}</Link>;
+                } else {
+                  return message;
+                }
+              })}
             </div>
           ))
         )}

web/src/components/menu/GeneralSettings.tsx

@@ -139,7 +139,7 @@ export default function GeneralSettings({ className }: GeneralSettings) {
               <DropdownMenuLabel>System</DropdownMenuLabel>
               <DropdownMenuSeparator />
               <DropdownMenuGroup className={isDesktop ? "" : "flex flex-col"}>
-                <Link to="/system">
+                <Link to="/system#general">
                   <MenuItem
                     className={
                       isDesktop

web/src/components/navigation/Bottombar.tsx

@@ -13,6 +13,7 @@ import {
   StatusBarMessagesContext,
   StatusMessage,
 } from "@/context/statusbar-provider";
+import { Link } from "react-router-dom";
 
 function Bottombar() {
   const navItems = useNavigation("secondary");
@@ -51,7 +52,13 @@ function StatusAlertNav() {
   useEffect(() => {
     clearMessages("stats");
     potentialProblems.forEach((problem) => {
-      addMessage("stats", problem.text, problem.color);
+      addMessage(
+        "stats",
+        problem.text,
+        problem.color,
+        undefined,
+        problem.relevantLink,
+      );
     });
   }, [potentialProblems, addMessage, clearMessages]);
 
@@ -68,14 +75,22 @@ function StatusAlertNav() {
         <div className="w-full h-auto py-4 overflow-y-auto overflow-x-hidden flex flex-col items-center gap-2">
           {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>
-              ))}
+              {messageArray.map(({ id, text, color, link }: StatusMessage) => {
+                const message = (
+                  <div key={id} className="flex items-center text-xs gap-2">
+                    <IoIosWarning
+                      className={`size-5 ${color || "text-danger"}`}
+                    />
+                    {text}
+                  </div>
+                );
+
+                if (link) {
+                  return <Link to={link}>{message}</Link>;
+                } else {
+                  return message;
+                }
+              })}
             </div>
           ))}
         </div>