refactor (hub): add systemsManager module

- Removed the `updateSystemList` function and replaced it with a more efficient system management approach using `systemsManager`.
- Updated the `App` component to initialize and subscribe to system updates through the new `systemsManager`.
- Refactored the `SystemsTable` and `SystemDetail` components to utilize the new state management for systems, improving performance and maintainability.
- Enhanced the `ActiveAlerts` component to fetch system names directly from the new state structure.

beszel/site/src/components/routes/home.tsx

@@ -1,12 +1,10 @@
 import { Suspense, memo, useEffect, useMemo } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "../ui/card"
-import { $alerts, $systems } from "@/lib/stores"
+import { $alerts, $allSystemsById } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import { GithubIcon } from "lucide-react"
 import { Separator } from "../ui/separator"
-import { getSystemNameFromId } from "@/lib/utils"
-import { pb, updateRecordList, updateSystemList } from "@/lib/api"
-import { AlertRecord, SystemRecord } from "@/types"
+import { AlertRecord } from "@/types"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import { $router, Link } from "../router"
 import { Plural, Trans, useLingui } from "@lingui/react/macro"
@@ -14,8 +12,6 @@ import { getPagePath } from "@nanostores/router"
 import { alertInfo } from "@/lib/alerts"
 import SystemsTable from "@/components/systems-table/systems-table"
 
-// const SystemsTable = lazy(() => import("../systems-table/systems-table"))
-
 export default memo(function () {
 	const { t } = useLingui()
 
@@ -23,19 +19,6 @@ export default memo(function () {
 		document.title = t`Dashboard` + " / Beszel"
 	}, [t])
 
-	useEffect(() => {
-		// make sure we have the latest list of systems
-		updateSystemList()
-
-		// subscribe to real time updates for systems / alerts
-		pb.collection<SystemRecord>("systems").subscribe("*", (e) => {
-			updateRecordList(e, $systems)
-		})
-		return () => {
-			pb.collection("systems").unsubscribe("*")
-		}
-	}, [])
-
 	return useMemo(
 		() => (
 			<>
@@ -69,6 +52,7 @@ export default memo(function () {
 
 const ActiveAlerts = () => {
 	const alerts = useStore($alerts)
+	const systems = useStore($allSystemsById)
 
 	const { activeAlerts, alertsKey } = useMemo(() => {
 		const activeAlerts: AlertRecord[] = []
@@ -112,7 +96,7 @@ const ActiveAlerts = () => {
 									>
 										<info.icon className="h-4 w-4" />
 										<AlertTitle>
-											{getSystemNameFromId(alert.system)} {info.name().toLowerCase().replace("cpu", "CPU")}
+											{systems[alert.system]?.name} {info.name().toLowerCase().replace("cpu", "CPU")}
 										</AlertTitle>
 										<AlertDescription>
 											{alert.name === "Status" ? (
@@ -125,7 +109,7 @@ const ActiveAlerts = () => {
 											)}
 										</AlertDescription>
 										<Link
-											href={getPagePath($router, "system", { name: getSystemNameFromId(alert.system) })}
+											href={getPagePath($router, "system", { name: systems[alert.system]?.name })}
 											className="absolute inset-0 w-full h-full"
 											aria-label="View system"
 										></Link>