feat(hub): single node mode and alerts button on system detail page

internal/site/src/components/alerts/alert-button.tsx

@@ -9,7 +9,13 @@ import { cn } from "@/lib/utils"
 import type { SystemRecord } from "@/types"
 import { AlertDialogContent } from "./alerts-sheet"
 
-export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
+export default memo(function AlertsButton({
+	system,
+	variant = "ghost",
+}: {
+	system: SystemRecord
+	variant?: "ghost" | "outline"
+}) {
 	const [opened, setOpened] = useState(false)
 	const alerts = useStore($alerts)
 
@@ -18,7 +24,7 @@ export default memo(function AlertsButton({ system }: { system: SystemRecord })
 		() => (
 			<Sheet>
 				<SheetTrigger asChild>
-					<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
+					<Button variant={variant} size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
 						<BellIcon
 							className={cn("size-[1.2em] pointer-events-none", {
 								"fill-primary": hasSystemAlert,
@@ -31,6 +37,6 @@ export default memo(function AlertsButton({ system }: { system: SystemRecord })
 				</SheetContent>
 			</Sheet>
 		),
-		[opened, hasSystemAlert]
+		[opened, hasSystemAlert, variant]
 	)
 })

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

@@ -1,16 +1,31 @@
 import { useLingui } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
 import { memo, Suspense, useEffect, useMemo } from "react"
+import { $router, navigate } from "@/components/router"
 import SystemsTable from "@/components/systems-table/systems-table"
 import { ActiveAlerts } from "@/components/active-alerts"
 import { FooterRepoLink } from "@/components/footer-repo-link"
+import { $systems, $userSettings } from "@/lib/stores"
+import { saveSettings } from "@/components/routes/settings/layout"
 
 export default memo(() => {
 	const { t } = useLingui()
+	const systems = useStore($systems)
+	const { singleNodeMode } = useStore($userSettings, { keys: ["singleNodeMode"] })
 
 	useEffect(() => {
 		document.title = `${t`All Systems`} / Beszel`
 	}, [t])
 
+	useEffect(() => {
+		if (singleNodeMode && systems.length === 1) {
+			navigate(getPagePath($router, "system", { id: systems[0].id }))
+		} else if (singleNodeMode && systems.length > 1) {
+			saveSettings({ singleNodeMode: false })
+		}
+	}, [systems, singleNodeMode])
+
 	return useMemo(
 		() => (
 			<>

internal/site/src/components/routes/settings/general.tsx

@@ -4,6 +4,7 @@ import { LanguagesIcon, LoaderCircleIcon, SaveIcon } from "lucide-react"
 import { useState } from "react"
 import { useStore } from "@nanostores/react"
 import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -12,22 +13,26 @@ import Slider from "@/components/ui/slider"
 import { HourFormat, Unit } from "@/lib/enums"
 import { dynamicActivate } from "@/lib/i18n"
 import languages from "@/lib/languages"
-import { $userSettings, defaultLayoutWidth } from "@/lib/stores"
+import { $systems, $userSettings, defaultLayoutWidth } from "@/lib/stores"
 import { chartTimeData, currentHour12 } from "@/lib/utils"
 import type { UserSettings } from "@/types"
 import { saveSettings } from "./layout"
 
 export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
 	const [isLoading, setIsLoading] = useState(false)
+	const [singleNodeMode, setSingleNodeMode] = useState(!!userSettings.singleNodeMode)
 	const { i18n } = useLingui()
 	const currentUserSettings = useStore($userSettings)
 	const layoutWidth = currentUserSettings.layoutWidth ?? defaultLayoutWidth
+	const systems = useStore($systems)
+	const multiSystem = systems.length > 1
 
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
 		e.preventDefault()
 		setIsLoading(true)
 		const formData = new FormData(e.target as HTMLFormElement)
 		const data = Object.fromEntries(formData) as Partial<UserSettings>
+		data.singleNodeMode = singleNodeMode
 		await saveSettings(data)
 		setIsLoading(false)
 	}
@@ -108,6 +113,28 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					/>
 				</div>
 				<Separator />
+				<div className="grid gap-2">
+					<div className="mb-2">
+						<h3 className="mb-1 text-lg font-medium">
+							<Trans>Single node mode</Trans>
+						</h3>
+						<p className="text-sm text-muted-foreground leading-relaxed">
+							<Trans>Redirect to the system dashboard automatically when only one system is configured.</Trans>
+						</p>
+					</div>
+					<div className="flex items-center gap-2">
+						<Switch
+							id="singleNodeMode"
+							checked={singleNodeMode}
+							onCheckedChange={setSingleNodeMode}
+							disabled={multiSystem}
+						/>
+						<Label htmlFor="singleNodeMode" className={multiSystem ? "opacity-50" : ""}>
+							<Trans>Enable single node mode</Trans>
+						</Label>
+					</div>
+				</div>
+				<Separator />
 				<div className="grid gap-2">
 					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">

internal/site/src/components/routes/system/info-bar.tsx

@@ -23,6 +23,8 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import AlertButton from "@/components/alerts/alert-button"
+import { ActionsButton } from "@/components/systems-table/systems-table-columns"
 import { FreeBsdIcon, TuxIcon, WebSocketIcon, WindowsIcon } from "@/components/ui/icons"
 import { Separator } from "@/components/ui/separator"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
@@ -201,6 +203,8 @@ export default function InfoBar({
 					</div>
 				</div>
 				<div className="xl:ms-auto flex items-center gap-2 max-sm:-mb-1">
+					<AlertButton system={system} variant="outline" />
+					<ActionsButton system={system} variant="outline" />
 					<ChartTimeSelect className="w-full xl:w-40" agentVersion={chartData.agentVersion} />
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>

internal/site/src/components/systems-table/systems-table-columns.tsx

@@ -582,7 +582,7 @@ export function IndicatorDot({ system, className }: { system: SystemRecord; clas
 	)
 }
 
-export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
+export const ActionsButton = memo(({ system, variant = "ghost" }: { system: SystemRecord; variant?: "ghost" | "outline" }) => {
 	const [deleteOpen, setDeleteOpen] = useState(false)
 	const [editOpen, setEditOpen] = useState(false)
 	const editOpened = useRef(false)
@@ -594,7 +594,7 @@ export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 			<>
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
-						<Button variant="ghost" size={"icon"}>
+						<Button variant={variant} size={"icon"}>
 							<span className="sr-only">
 								<Trans>Open menu</Trans>
 							</span>
@@ -681,5 +681,5 @@ export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 				</AlertDialog>
 			</>
 		)
-	}, [id, status, host, name, system, t, deleteOpen, editOpen])
+	}, [id, status, host, name, system, t, deleteOpen, editOpen, variant])
 })

internal/site/src/types.d.ts

@@ -297,6 +297,7 @@ export interface UserSettings {
 	colorCrit?: number
 	hourFormat?: HourFormat
 	layoutWidth?: number
+	singleNodeMode?: boolean
 }
 
 type ChartDataContainer = {