From 0638ff3c21b91c74af273b8b5d67b3c86f0fe38f Mon Sep 17 00:00:00 2001
From: henrygd <hank@henrygd.me>
Date: Sun, 24 Aug 2025 19:48:21 -0400
Subject: [PATCH] refactor: add subscribe / unsubscribe to alertManager

---
 .../routes/settings/tokens-fingerprints.tsx   |  8 +++----
 beszel/site/src/lib/utils.ts                  | 23 +++++++++++++++----
 beszel/site/src/main.tsx                      | 16 +++++++++----
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/beszel/site/src/components/routes/settings/tokens-fingerprints.tsx b/beszel/site/src/components/routes/settings/tokens-fingerprints.tsx
index 92379e2..678a02f 100644
--- a/beszel/site/src/components/routes/settings/tokens-fingerprints.tsx
+++ b/beszel/site/src/components/routes/settings/tokens-fingerprints.tsx
@@ -292,11 +292,11 @@ const SectionTable = memo(({ fingerprints = [] }: { fingerprints: FingerprintRec
 				<TableBody className="whitespace-pre">
 					{fingerprints.map((fingerprint, i) => (
 						<TableRow key={i}>
-							<TableCell className="font-medium ps-5 py-2.5">{fingerprint.expand.system.name}</TableCell>
-							<TableCell className="font-mono text-[0.95em] py-2.5">{fingerprint.token}</TableCell>
-							<TableCell className="font-mono text-[0.95em] py-2.5">{fingerprint.fingerprint}</TableCell>
+							<TableCell className="font-medium ps-5 py-2">{fingerprint.expand.system.name}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.token}</TableCell>
+							<TableCell className="font-mono text-[0.95em] py-2">{fingerprint.fingerprint}</TableCell>
 							{!isReadOnly && (
-								<TableCell className="py-2.5 px-4 xl:px-2">
+								<TableCell className="py-2 px-4 xl:px-2">
 									<ActionsButtonTable fingerprint={fingerprint} />
 								</TableCell>
 							)}
diff --git a/beszel/site/src/lib/utils.ts b/beszel/site/src/lib/utils.ts
index a143bda..d29820b 100644
--- a/beszel/site/src/lib/utils.ts
+++ b/beszel/site/src/lib/utils.ts
@@ -537,6 +537,7 @@ export const getSystemNameFromId = (() => {
 /** Helper to manage user alerts */
 export const alertManager = (() => {
 	const collection = pb.collection<AlertRecord>("alerts")
+	let unsub: () => void
 
 	/** Fields to fetch from alerts collection */
 	const fields = "id,name,system,value,min,triggered"
@@ -597,17 +598,29 @@ export const alertManager = (() => {
 		}
 	})()
 
-	collection.subscribe("*", batchUpdate, { fields })
+	async function subscribe() {
+		unsub = await collection.subscribe("*", batchUpdate, { fields })
+	}
+
+	function unsubscribe() {
+		unsub?.()
+	}
+
+	async function refresh() {
+		const records = await fetchAlerts()
+		add(records)
+	}
 
 	return {
 		/** Add alerts to store */
 		add,
 		/** Remove alerts from store */
 		remove,
+		/** Subscribe to alerts */
+		subscribe,
+		/** Unsubscribe from alerts */
+		unsubscribe,
 		/** Refresh alerts with latest data from hub */
-		async refresh() {
-			const records = await fetchAlerts()
-			add(records)
-		},
+		refresh,
 	}
 })()
diff --git a/beszel/site/src/main.tsx b/beszel/site/src/main.tsx
index 9f63ee8..7d371fd 100644
--- a/beszel/site/src/main.tsx
+++ b/beszel/site/src/main.tsx
@@ -38,10 +38,17 @@ const App = memo(() => {
 		})
 		// get servers / alerts / settings
 		updateUserSettings()
-		// get alerts after system list is loaded
-		updateSystemList().then(alertManager.refresh)
+		// need to get system list before alerts
+		updateSystemList()
+			// get alerts
+			.then(alertManager.refresh)
+			// subscribe to new alert updates
+			.then(alertManager.subscribe)
 
-		return () => updateFavicon("favicon.svg")
+		return () => {
+			updateFavicon("favicon.svg")
+			alertManager.unsubscribe()
+		}
 	}, [])
 
 	// update favicon
@@ -54,7 +61,8 @@ const App = memo(() => {
 				if (system.status === SystemStatus.Down) {
 					updateFavicon("favicon-red.svg")
 					return
-				} else if (system.status === SystemStatus.Up) {
+				} 
+				if (system.status === SystemStatus.Up) {
 					up = true
 				}
 			}