improve useeffects for favicon and system subscription

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

@@ -155,7 +155,7 @@ export default function SystemDetail({ name }: { name: string }) {
 		return () => {
 			pb.collection('systems').unsubscribe(system.id)
 		}
-	}, [system])
+	}, [system.id])
 
 	const chartData: ChartData = useMemo(() => {
 		const lastCreated = Math.max(

beszel/site/src/lib/utils.ts

@@ -9,7 +9,6 @@ import { timeDay, timeHour } from 'd3-time'
 import { useEffect, useState } from 'react'
 import { CpuIcon, HardDriveIcon, MemoryStickIcon, ServerIcon } from 'lucide-react'
 import { EthernetIcon, ThermometerIcon } from '@/components/ui/icons'
-import { newQueue, Queue } from '@henrygd/queue'
 
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs))
@@ -103,8 +102,9 @@ export const formatDay = (timestamp: string) => {
 	return dayFormatter.format(new Date(timestamp))
 }
 
-export const updateFavicon = (newIcon: string) =>
-	((document.querySelector("link[rel='icon']") as HTMLLinkElement).href = `/static/${newIcon}`)
+export const updateFavicon = (newIcon: string) => {
+	;(document.querySelector("link[rel='icon']") as HTMLLinkElement).href = `/static/${newIcon}`
+}
 
 export const isAdmin = () => pb.authStore.model?.role === 'admin'
 export const isReadOnlyUser = () => pb.authStore.model?.role === 'readonly'

beszel/site/src/main.tsx

@@ -73,29 +73,27 @@ const App = () => {
 		updateUserSettings()
 		// get alerts after system list is loaded
 		updateSystemList().then(updateAlerts)
+
+		return () => updateFavicon('favicon.svg')
 	}, [])
 
 	// update favicon
 	useEffect(() => {
-		if (!authenticated || !systems.length) {
+		if (!systems.length || !authenticated) {
 			updateFavicon('favicon.svg')
 		} else {
 			let up = false
 			for (const system of systems) {
 				if (system.status === 'down') {
 					updateFavicon('favicon-red.svg')
-					return () => updateFavicon('favicon.svg')
+					return
 				} else if (system.status === 'up') {
 					up = true
 				}
 			}
 			updateFavicon(up ? 'favicon-green.svg' : 'favicon.svg')
-			return () => updateFavicon('favicon.svg')
 		}
-		return () => {
-			updateFavicon('favicon.svg')
-		}
-	}, [authenticated, systems])
+	}, [systems])
 
 	if (!page) {
 		return <h1 className="text-3xl text-center my-14">404</h1>