formatting (biome)

agent/deltatracker/deltatracker.go

@@ -78,34 +78,3 @@ func (t *DeltaTracker[K, V]) Cycle() {
 	t.previous = t.current
 	t.current = make(map[K]V)
 }
-
-// 	// --- Example 1: Integer values (unchanged) ---
-// 	fmt.Println("--- 🚀 Example with int64 values (PIDs) ---")
-// 	pidTracker := NewDeltaTracker[int, int64]()
-// 	pidTracker.Set(101, 20000)
-// 	pidTracker.Cycle()
-// 	pidTracker.Set(101, 22500)
-// 	fmt.Println("PID Deltas:", pidTracker.Deltas())
-// 	fmt.Println("----------------------------------------")
-
-// 	// --- Example 2: Float values (New!) ---
-// 	fmt.Println("\n--- 🚀 Example with float64 values (CPU Load) ---")
-// 	// Track the 1-minute load average for different servers.
-// 	loadTracker := NewDeltaTracker[string, float64]()
-
-// 	// Minute 1
-// 	loadTracker.Set("server-alpha", 0.74)
-// 	loadTracker.Set("server-beta", 1.15)
-// 	fmt.Println("Minute 1 Loads:", loadTracker.Deltas())
-// 	loadTracker.Cycle()
-
-// 	// Minute 2
-// 	loadTracker.Set("server-alpha", 0.68) // Load decreased
-// 	loadTracker.Set("server-beta", 1.55)  // Load increased
-// 	loadTracker.Set("server-gamma", 0.25) // New server
-
-// 	minute2Deltas := loadTracker.Deltas()
-// 	fmt.Println("Minute 2 Load Deltas:", minute2Deltas)
-// 	fmt.Printf("Change in alpha's load: %.2f\n", minute2Deltas["server-alpha"])
-// 	fmt.Printf("Change in beta's load:  %.2f\n", minute2Deltas["server-beta"])
-// 	fmt.Println("----------------------------------------")

internal/site/src/components/add-system.tsx

@@ -1,5 +1,9 @@
-import { Trans } from "@lingui/react/macro"
 import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
+import { ChevronDownIcon, ExternalLinkIcon, PlusIcon } from "lucide-react"
+import { memo, useEffect, useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
 	Dialog,
@@ -10,34 +14,30 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { isReadOnlyUser, pb } from "@/lib/api"
+import { SystemStatus } from "@/lib/enums"
 import { $publicKey } from "@/lib/stores"
 import { cn, generateToken, tokenMap, useBrowserStorage } from "@/lib/utils"
-import { pb, isReadOnlyUser } from "@/lib/api"
-import { useStore } from "@nanostores/react"
-import { ChevronDownIcon, ExternalLinkIcon, PlusIcon } from "lucide-react"
-import { memo, useEffect, useRef, useState } from "react"
-import { $router, basePath, Link, navigate } from "./router"
-import { SystemRecord } from "@/types"
-import { SystemStatus } from "@/lib/enums"
-import { AppleIcon, DockerIcon, FreeBsdIcon, TuxIcon, WindowsIcon } from "./ui/icons"
-import { InputCopy } from "./ui/input-copy"
-import { getPagePath } from "@nanostores/router"
+import type { SystemRecord } from "@/types"
 import {
 	copyDockerCompose,
 	copyDockerRun,
 	copyLinuxCommand,
 	copyWindowsCommand,
-	DropdownItem,
+	type DropdownItem,
 	InstallDropdown,
 } from "./install-dropdowns"
+import { $router, basePath, Link, navigate } from "./router"
 import { DropdownMenu, DropdownMenuTrigger } from "./ui/dropdown-menu"
+import { AppleIcon, DockerIcon, FreeBsdIcon, TuxIcon, WindowsIcon } from "./ui/icons"
+import { InputCopy } from "./ui/input-copy"
 
 export function AddSystemButton({ className }: { className?: string }) {
 	const [open, setOpen] = useState(false)
-	let opened = useRef(false)
+	const opened = useRef(false)
 	if (open) {
 		opened.current = true
 	}

internal/site/src/components/alerts-history-columns.tsx

@@ -1,11 +1,11 @@
-import { ColumnDef } from "@tanstack/react-table"
-import { AlertsHistoryRecord } from "@/types"
-import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { formatShortDate, toFixedFloat, formatDuration, cn } from "@/lib/utils"
-import { alertInfo } from "@/lib/alerts"
-import { Trans } from "@lingui/react/macro"
 import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import type { ColumnDef } from "@tanstack/react-table"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { alertInfo } from "@/lib/alerts"
+import { cn, formatDuration, formatShortDate, toFixedFloat } from "@/lib/utils"
+import type { AlertsHistoryRecord } from "@/types"
 
 export const alertsHistoryColumns: ColumnDef<AlertsHistoryRecord>[] = [
 	{
@@ -38,7 +38,7 @@ export const alertsHistoryColumns: ColumnDef<AlertsHistoryRecord>[] = [
 			</Button>
 		),
 		cell: ({ getValue, row }) => {
-			let name = getValue() as string
+			const name = getValue() as string
 			const info = alertInfo[row.original.name]
 			const Icon = info?.icon
 

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

@@ -1,13 +1,13 @@
 import { t } from "@lingui/core/macro"
-import { memo, useMemo, useState } from "react"
 import { useStore } from "@nanostores/react"
-import { $alerts } from "@/lib/stores"
 import { BellIcon } from "lucide-react"
-import { cn } from "@/lib/utils"
+import { memo, useMemo, useState } from "react"
 import { Button } from "@/components/ui/button"
-import { SystemRecord } from "@/types"
-import { AlertDialogContent } from "./alerts-sheet"
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
+import { $alerts } from "@/lib/stores"
+import { cn } from "@/lib/utils"
+import type { SystemRecord } from "@/types"
+import { AlertDialogContent } from "./alerts-sheet"
 
 export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
 	const [opened, setOpened] = useState(false)

internal/site/src/components/alerts/alerts-sheet.tsx

@@ -1,21 +1,20 @@
 import { t } from "@lingui/core/macro"
-import { Trans, Plural } from "@lingui/react/macro"
-import { $alerts, $systems } from "@/lib/stores"
-import { cn, debounce } from "@/lib/utils"
-import { alertInfo } from "@/lib/alerts"
-import { Switch } from "@/components/ui/switch"
-import { AlertInfo, AlertRecord, SystemRecord } from "@/types"
-import { lazy, memo, Suspense, useMemo, useState } from "react"
-import { toast } from "@/components/ui/use-toast"
+import { Plural, Trans } from "@lingui/react/macro"
 import { useStore } from "@nanostores/react"
 import { getPagePath } from "@nanostores/router"
-import { Checkbox } from "@/components/ui/checkbox"
-import { DialogTitle, DialogDescription } from "@/components/ui/dialog"
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"
-import { ServerIcon, GlobeIcon } from "lucide-react"
+import { GlobeIcon, ServerIcon } from "lucide-react"
+import { lazy, memo, Suspense, useMemo, useState } from "react"
 import { $router, Link } from "@/components/router"
-import { DialogHeader } from "@/components/ui/dialog"
+import { Checkbox } from "@/components/ui/checkbox"
+import { DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Switch } from "@/components/ui/switch"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { toast } from "@/components/ui/use-toast"
+import { alertInfo } from "@/lib/alerts"
 import { pb } from "@/lib/api"
+import { $alerts, $systems } from "@/lib/stores"
+import { cn, debounce } from "@/lib/utils"
+import type { AlertInfo, AlertRecord, SystemRecord } from "@/types"
 
 const Slider = lazy(() => import("@/components/ui/slider"))
 
@@ -172,7 +171,7 @@ export function AlertContent({
 
 	const [checked, setChecked] = useState(global ? false : !!alert)
 	const [min, setMin] = useState(alert?.min || 10)
-	const [value, setValue] = useState(alert?.value || (singleDescription ? 0 : alertData.start ?? 80))
+	const [value, setValue] = useState(alert?.value || (singleDescription ? 0 : (alertData.start ?? 80)))
 
 	const Icon = alertData.icon
 

internal/site/src/components/command-palette.tsx

@@ -1,3 +1,7 @@
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
+import { getPagePath } from "@nanostores/router"
+import { DialogDescription } from "@radix-ui/react-dialog"
 import {
 	AlertOctagonIcon,
 	BookIcon,
@@ -10,7 +14,7 @@ import {
 	SettingsIcon,
 	UsersIcon,
 } from "lucide-react"
-
+import { memo, useEffect, useMemo } from "react"
 import {
 	CommandDialog,
 	CommandEmpty,
@@ -21,15 +25,10 @@ import {
 	CommandSeparator,
 	CommandShortcut,
 } from "@/components/ui/command"
-import { memo, useEffect, useMemo } from "react"
+import { isAdmin } from "@/lib/api"
 import { $systems } from "@/lib/stores"
 import { getHostDisplayValue, listen } from "@/lib/utils"
 import { $router, basePath, navigate, prependBasePath } from "./router"
-import { Trans } from "@lingui/react/macro"
-import { t } from "@lingui/core/macro"
-import { getPagePath } from "@nanostores/router"
-import { DialogDescription } from "@radix-ui/react-dialog"
-import { isAdmin } from "@/lib/api"
 
 export default memo(function CommandPalette({ open, setOpen }: { open: boolean; setOpen: (open: boolean) => void }) {
 	useEffect(() => {

internal/site/src/components/copy-to-clipboard.tsx

@@ -1,8 +1,8 @@
-import { Trans } from "@lingui/react/macro";
+import { Trans } from "@lingui/react/macro"
 import { useEffect, useMemo, useRef } from "react"
+import { $copyContent } from "@/lib/stores"
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog"
 import { Textarea } from "./ui/textarea"
-import { $copyContent } from "@/lib/stores"
 
 export default function CopyToClipboard({ content }: { content: string }) {
 	return (

internal/site/src/components/install-dropdowns.tsx

@@ -1,7 +1,7 @@
-import { memo } from "react"
-import { DropdownMenuContent, DropdownMenuItem } from "./ui/dropdown-menu"
-import { copyToClipboard, getHubURL } from "@/lib/utils"
 import { i18n } from "@lingui/core"
+import { memo } from "react"
+import { copyToClipboard, getHubURL } from "@/lib/utils"
+import { DropdownMenuContent, DropdownMenuItem } from "./ui/dropdown-menu"
 
 // const isbeta = beszel.hub_version.includes("beta")
 // const imagetag = isbeta ? ":edge" : ""

internal/site/src/components/lang-toggle.tsx

@@ -1,11 +1,10 @@
+import { useLingui } from "@lingui/react/macro"
 import { LanguagesIcon } from "lucide-react"
-
 import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
+import { dynamicActivate } from "@/lib/i18n"
 import languages from "@/lib/languages"
 import { cn } from "@/lib/utils"
-import { useLingui } from "@lingui/react/macro"
-import { dynamicActivate } from "@/lib/i18n"
 
 export function LangToggle() {
 	const { i18n } = useLingui()

internal/site/src/components/login/auth-form.tsx

@@ -1,19 +1,19 @@
 import { t } from "@lingui/core/macro"
 import { Trans } from "@lingui/react/macro"
-import { cn } from "@/lib/utils"
+import { getPagePath } from "@nanostores/router"
+import { KeyIcon, LoaderCircle, LockIcon, LogInIcon, MailIcon } from "lucide-react"
+import type { AuthMethodsList, AuthProviderInfo, OAuth2AuthConfig } from "pocketbase"
+import { useCallback, useEffect, useState } from "react"
+import * as v from "valibot"
 import { buttonVariants } from "@/components/ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { KeyIcon, LoaderCircle, LockIcon, LogInIcon, MailIcon } from "lucide-react"
-import { $authenticated } from "@/lib/stores"
-import * as v from "valibot"
-import { toast } from "../ui/use-toast"
-import { Dialog, DialogContent, DialogTrigger, DialogHeader, DialogTitle } from "@/components/ui/dialog"
-import { useCallback, useEffect, useState } from "react"
-import { AuthMethodsList, AuthProviderInfo, OAuth2AuthConfig } from "pocketbase"
-import { $router, Link, prependBasePath } from "../router"
-import { getPagePath } from "@nanostores/router"
 import { pb } from "@/lib/api"
+import { $authenticated } from "@/lib/stores"
+import { cn } from "@/lib/utils"
+import { $router, Link, prependBasePath } from "../router"
+import { toast } from "../ui/use-toast"
 import { OtpInputForm } from "./otp-forms"
 
 const honeypot = v.literal("")
@@ -83,9 +83,9 @@ export function UserAuthForm({
 				const result = v.safeParse(Schema, data)
 				if (!result.success) {
 					console.log(result)
-					let errors = {}
+					const errors = {}
 					for (const issue of result.issues) {
-						// @ts-ignore
+						// @ts-expect-error
 						errors[issue.path[0].key] = issue.message
 					}
 					setErrors(errors)
@@ -96,7 +96,7 @@ export function UserAuthForm({
 				if (isFirstRun) {
 					// check that passwords match
 					if (password !== passwordConfirm) {
-						let msg = "Passwords do not match"
+						const msg = "Passwords do not match"
 						setErrors({ passwordConfirm: msg })
 						return
 					}

internal/site/src/components/login/forgot-pass-form.tsx

@@ -1,15 +1,14 @@
-import { Trans } from "@lingui/react/macro"
 import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
 import { LoaderCircle, MailIcon, SendHorizonalIcon } from "lucide-react"
+import { useCallback, useState } from "react"
+import { pb } from "@/lib/api"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "../ui/button"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog"
 import { Input } from "../ui/input"
 import { Label } from "../ui/label"
-import { useCallback, useState } from "react"
 import { toast } from "../ui/use-toast"
-import { buttonVariants } from "../ui/button"
-import { cn } from "@/lib/utils"
-import { Dialog, DialogHeader } from "../ui/dialog"
-import { DialogContent, DialogTrigger, DialogTitle } from "../ui/dialog"
-import { pb } from "@/lib/api"
 
 const showLoginFaliedToast = () => {
 	toast({

internal/site/src/components/login/login.tsx

@@ -1,14 +1,14 @@
 import { t } from "@lingui/core/macro"
-import { UserAuthForm } from "@/components/login/auth-form"
-import { Logo } from "../logo"
-import { useEffect, useMemo, useState } from "react"
 import { useStore } from "@nanostores/react"
-import ForgotPassword from "./forgot-pass-form"
-import { $router } from "../router"
-import { AuthMethodsList } from "pocketbase"
-import { useTheme } from "../theme-provider"
+import type { AuthMethodsList } from "pocketbase"
+import { useEffect, useMemo, useState } from "react"
+import { UserAuthForm } from "@/components/login/auth-form"
 import { pb } from "@/lib/api"
+import { Logo } from "../logo"
 import { ModeToggle } from "../mode-toggle"
+import { $router } from "../router"
+import { useTheme } from "../theme-provider"
+import ForgotPassword from "./forgot-pass-form"
 import { OtpRequestForm } from "./otp-forms"
 
 export default function () {
@@ -53,7 +53,7 @@ export default function () {
 		<div className="min-h-svh grid items-center py-12">
 			<div
 				className="grid gap-5 w-full px-4 mx-auto"
-				// @ts-ignore
+				// @ts-expect-error
 				style={{ maxWidth: "21.5em", "--border": theme == "light" ? "hsl(30, 8%, 70%)" : "hsl(220, 3%, 25%)" }}
 			>
 				<div className="absolute top-3 right-3">

internal/site/src/components/login/otp-forms.tsx

@@ -1,15 +1,15 @@
+import { Trans } from "@lingui/react/macro"
+import { LoaderCircle, MailIcon, SendHorizonalIcon } from "lucide-react"
 import { useCallback, useState } from "react"
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/otp"
 import { pb } from "@/lib/api"
 import { $authenticated } from "@/lib/stores"
-import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/ui/otp"
-import { Trans } from "@lingui/react/macro"
-import { showLoginFaliedToast } from "./auth-form"
 import { cn } from "@/lib/utils"
-import { MailIcon, LoaderCircle, SendHorizonalIcon } from "lucide-react"
-import { Label } from "../ui/label"
+import { $router } from "../router"
 import { buttonVariants } from "../ui/button"
 import { Input } from "../ui/input"
-import { $router } from "../router"
+import { Label } from "../ui/label"
+import { showLoginFaliedToast } from "./auth-form"
 
 export function OtpInputForm({ otpId, mfaId }: { otpId: string; mfaId: string }) {
 	const [value, setValue] = useState("")

internal/site/src/components/mode-toggle.tsx

@@ -1,8 +1,7 @@
 import { t } from "@lingui/core/macro"
 import { MoonStarIcon, SunIcon } from "lucide-react"
-
-import { Button } from "@/components/ui/button"
 import { useTheme } from "@/components/theme-provider"
+import { Button } from "@/components/ui/button"
 
 export function ModeToggle() {
 	const { theme, setTheme } = useTheme()

internal/site/src/components/navbar.tsx

@@ -1,6 +1,5 @@
 import { Trans } from "@lingui/react/macro"
-import { useState, lazy, Suspense } from "react"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { getPagePath } from "@nanostores/router"
 import {
 	DatabaseBackupIcon,
 	LogOutIcon,
@@ -11,23 +10,24 @@ import {
 	UserIcon,
 	UsersIcon,
 } from "lucide-react"
-import { $router, basePath, Link, prependBasePath } from "./router"
-import { LangToggle } from "./lang-toggle"
-import { ModeToggle } from "./mode-toggle"
-import { Logo } from "./logo"
-import { cn, runOnce } from "@/lib/utils"
-import { isReadOnlyUser, isAdmin, logOut, pb } from "@/lib/api"
+import { lazy, Suspense, useState } from "react"
+import { Button, buttonVariants } from "@/components/ui/button"
 import {
 	DropdownMenu,
-	DropdownMenuTrigger,
 	DropdownMenuContent,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
 	DropdownMenuGroup,
 	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
+import { isAdmin, isReadOnlyUser, logOut, pb } from "@/lib/api"
+import { cn, runOnce } from "@/lib/utils"
 import { AddSystemButton } from "./add-system"
-import { getPagePath } from "@nanostores/router"
+import { LangToggle } from "./lang-toggle"
+import { Logo } from "./logo"
+import { ModeToggle } from "./mode-toggle"
+import { $router, basePath, Link, prependBasePath } from "./router"
 
 const CommandPalette = lazy(() => import("./command-palette"))
 

internal/site/src/components/router.tsx

@@ -23,7 +23,7 @@ export const prependBasePath = (path: string) => (basePath + path).replaceAll("/
 
 // prepend base path to routes
 for (const route in routes) {
-	// @ts-ignore need as const above to get nanostores to parse types properly
+	// @ts-expect-error need as const above to get nanostores to parse types properly
 	routes[route] = prependBasePath(routes[route])
 }
 

internal/site/src/components/routes/settings/tokens-fingerprints.tsx

@@ -3,13 +3,13 @@ import { Trans, useLingui } from "@lingui/react/macro"
 import { redirectPage } from "@nanostores/router"
 import {
 	CopyIcon,
+	ExternalLinkIcon,
 	FingerprintIcon,
 	KeyIcon,
 	MoreHorizontalIcon,
 	RotateCwIcon,
 	ServerIcon,
 	Trash2Icon,
-	ExternalLinkIcon,
 } from "lucide-react"
 import { memo, useEffect, useMemo, useState } from "react"
 import {

internal/site/src/components/spinner.tsx

@@ -1,5 +1,5 @@
-import { cn } from "@/lib/utils"
 import { LoaderCircleIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
 
 export default function ({ msg, className }: { msg?: string; className?: string }) {
 	return (

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

@@ -1,6 +1,9 @@
-import { SystemRecord } from "@/types"
-import { CellContext, ColumnDef, HeaderContext } from "@tanstack/react-table"
-import { ClassValue } from "clsx"
+import { t } from "@lingui/core/macro"
+import { Trans, useLingui } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
+import type { CellContext, ColumnDef, HeaderContext } from "@tanstack/react-table"
+import type { ClassValue } from "clsx"
 import {
 	ArrowUpDownIcon,
 	CopyIcon,
@@ -15,7 +18,10 @@ import {
 	Trash2Icon,
 	WifiIcon,
 } from "lucide-react"
-import { Button } from "../ui/button"
+import { memo, useMemo, useRef, useState } from "react"
+import { isReadOnlyUser, pb } from "@/lib/api"
+import { MeterState, SystemStatus } from "@/lib/enums"
+import { $longestSystemNameLen, $userSettings } from "@/lib/stores"
 import {
 	cn,
 	copyToClipboard,
@@ -25,24 +31,12 @@ import {
 	getMeterState,
 	parseSemVer,
 } from "@/lib/utils"
-import { EthernetIcon, GpuIcon, HourglassIcon, ThermometerIcon } from "../ui/icons"
-import { useStore } from "@nanostores/react"
-import { $longestSystemNameLen, $userSettings } from "@/lib/stores"
-import { Trans, useLingui } from "@lingui/react/macro"
-import { useMemo, useRef, useState } from "react"
-import { memo } from "react"
-import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
-} from "../ui/dropdown-menu"
-import AlertButton from "../alerts/alert-button"
-import { Dialog } from "../ui/dialog"
+import type { SystemRecord } from "@/types"
 import { SystemDialog } from "../add-system"
-import { AlertDialog } from "../ui/alert-dialog"
+import AlertButton from "../alerts/alert-button"
+import { $router, Link } from "../router"
 import {
+	AlertDialog,
 	AlertDialogAction,
 	AlertDialogCancel,
 	AlertDialogContent,
@@ -51,12 +45,16 @@ import {
 	AlertDialogHeader,
 	AlertDialogTitle,
 } from "../ui/alert-dialog"
-import { buttonVariants } from "../ui/button"
-import { t } from "@lingui/core/macro"
-import { MeterState, SystemStatus } from "@/lib/enums"
-import { $router, Link } from "../router"
-import { getPagePath } from "@nanostores/router"
-import { isReadOnlyUser, pb } from "@/lib/api"
+import { Button, buttonVariants } from "../ui/button"
+import { Dialog } from "../ui/dialog"
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "../ui/dropdown-menu"
+import { EthernetIcon, GpuIcon, HourglassIcon, ThermometerIcon } from "../ui/icons"
 
 const STATUS_COLORS = {
 	[SystemStatus.Up]: "bg-green-500",
@@ -290,7 +288,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 		},
 		{
 			id: "actions",
-			// @ts-ignore
+			// @ts-expect-error
 			name: () => t({ message: "Actions", comment: "Table column" }),
 			size: 50,
 			cell: ({ row }) => (
@@ -305,7 +303,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 
 function sortableHeader(context: HeaderContext<SystemRecord, unknown>) {
 	const { column } = context
-	// @ts-ignore
+	// @ts-expect-error
 	const { Icon, hideSort, name }: { Icon: React.ElementType; name: () => string; hideSort: boolean } = column.columnDef
 	return (
 		<Button
@@ -353,7 +351,7 @@ export function IndicatorDot({ system, className }: { system: SystemRecord; clas
 export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 	const [deleteOpen, setDeleteOpen] = useState(false)
 	const [editOpen, setEditOpen] = useState(false)
-	let editOpened = useRef(false)
+	const editOpened = useRef(false)
 	const { t } = useLingui()
 	const { id, status, host, name } = system
 

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

@@ -1,17 +1,31 @@
+import { Trans, useLingui } from "@lingui/react/macro"
+import { useStore } from "@nanostores/react"
+import { getPagePath } from "@nanostores/router"
 import {
-	ColumnDef,
-	ColumnFiltersState,
-	getFilteredRowModel,
-	SortingState,
-	getSortedRowModel,
+	type ColumnDef,
+	type ColumnFiltersState,
 	flexRender,
-	VisibilityState,
 	getCoreRowModel,
+	getFilteredRowModel,
+	getSortedRowModel,
+	type Row,
+	type SortingState,
+	type Table as TableType,
 	useReactTable,
-	Row,
-	Table as TableType,
+	type VisibilityState,
 } from "@tanstack/react-table"
-import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
+import {
+	ArrowDownIcon,
+	ArrowUpDownIcon,
+	ArrowUpIcon,
+	EyeIcon,
+	FilterIcon,
+	LayoutGridIcon,
+	LayoutListIcon,
+	Settings2Icon,
+} from "lucide-react"
+import { memo, useEffect, useMemo, useRef, useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
 	DropdownMenu,
@@ -24,30 +38,16 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { SystemRecord } from "@/types"
-import {
-	ArrowUpDownIcon,
-	LayoutGridIcon,
-	LayoutListIcon,
-	ArrowDownIcon,
-	ArrowUpIcon,
-	Settings2Icon,
-	EyeIcon,
-	FilterIcon,
-} from "lucide-react"
-import { memo, useEffect, useMemo, useRef, useState } from "react"
-import { $pausedSystems, $downSystems, $upSystems, $systems } from "@/lib/stores"
-import { useStore } from "@nanostores/react"
-import { cn, runOnce, useBrowserStorage } from "@/lib/utils"
-import { $router, Link } from "../router"
-import { useLingui, Trans } from "@lingui/react/macro"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Input } from "@/components/ui/input"
-import { getPagePath } from "@nanostores/router"
-import SystemsTableColumns, { ActionsButton, IndicatorDot } from "./systems-table-columns"
-import AlertButton from "../alerts/alert-button"
+import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { SystemStatus } from "@/lib/enums"
-import { useVirtualizer, VirtualItem } from "@tanstack/react-virtual"
+import { $downSystems, $pausedSystems, $systems, $upSystems } from "@/lib/stores"
+import { cn, runOnce, useBrowserStorage } from "@/lib/utils"
+import type { SystemRecord } from "@/types"
+import AlertButton from "../alerts/alert-button"
+import { $router, Link } from "../router"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
+import SystemsTableColumns, { ActionsButton, IndicatorDot } from "./systems-table-columns"
 
 type ViewMode = "table" | "grid"
 type StatusFilter = "all" | SystemRecord["status"]
@@ -309,15 +309,8 @@ export default function SystemsTable() {
 	)
 }
 
-const AllSystemsTable = memo(function ({
-	table,
-	rows,
-	colLength,
-}: {
-	table: TableType<SystemRecord>
-	rows: Row<SystemRecord>[]
-	colLength: number
-}) {
+const AllSystemsTable = memo(
+	({ table, rows, colLength }: { table: TableType<SystemRecord>; rows: Row<SystemRecord>[]; colLength: number }) => {
 		// The virtualizer will need a reference to the scrollable container element
 		const scrollRef = useRef<HTMLDivElement>(null)
 
@@ -371,7 +364,8 @@ const AllSystemsTable = memo(function ({
 				</div>
 			</div>
 		)
-})
+	}
+)
 
 function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>; colLength: number }) {
 	const { i18n } = useLingui()
@@ -395,7 +389,8 @@ function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>
 	}, [i18n.locale, colLength])
 }
 
-const SystemTableRow = memo(function ({
+const SystemTableRow = memo(
+	({
 		row,
 		virtualRow,
 		colLength,
@@ -404,7 +399,7 @@ const SystemTableRow = memo(function ({
 		virtualRow: VirtualItem
 		length: number
 		colLength: number
-}) {
+	}) => {
 		const system = row.original
 		const { t } = useLingui()
 		return useMemo(() => {
@@ -430,7 +425,8 @@ const SystemTableRow = memo(function ({
 				</TableRow>
 			)
 		}, [system, system.status, colLength, t])
-})
+	}
+)
 
 const SystemCard = memo(
 	({ row, table, colLength }: { row: Row<SystemRecord>; table: TableType<SystemRecord>; colLength: number }) => {
@@ -471,7 +467,7 @@ const SystemCard = memo(
 								if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null
 								const cell = row.getAllCells().find((cell) => cell.column.id === column.id)
 								if (!cell) return null
-								// @ts-ignore
+								// @ts-expect-error
 								const { Icon, name } = column.columnDef as ColumnDef<SystemRecord, unknown>
 								return (
 									<>

internal/site/src/lib/utils.ts

@@ -1,6 +1,7 @@
 import { t } from "@lingui/core/macro"
 import { type ClassValue, clsx } from "clsx"
 import { timeDay, timeHour } from "d3-time"
+import { listenKeys } from "nanostores"
 import { useEffect, useState } from "react"
 import { twMerge } from "tailwind-merge"
 import { prependBasePath } from "@/components/router"
@@ -8,7 +9,6 @@ import { toast } from "@/components/ui/use-toast"
 import type { ChartTimeData, FingerprintRecord, SemVer, SystemRecord } from "@/types"
 import { HourFormat, MeterState, Unit } from "./enums"
 import { $copyContent, $userSettings } from "./stores"
-import { listenKeys } from "nanostores"
 
 export const FAVICON_DEFAULT = "favicon.svg"
 export const FAVICON_GREEN = "favicon-green.svg"