remove usememo return in add system dialog

- forgot to remove this before last commit. interferes with token display.

beszel/site/package.json

@@ -13,25 +13,25 @@
 	"dependencies": {
 		"@henrygd/queue": "^1.0.7",
 		"@henrygd/semaphore": "^0.0.2",
-		"@lingui/detect-locale": "^5.3.3",
-		"@lingui/macro": "^5.3.3",
-		"@lingui/react": "^5.3.3",
+		"@lingui/detect-locale": "^5.4.1",
+		"@lingui/macro": "^5.4.1",
+		"@lingui/react": "^5.4.1",
 		"@nanostores/react": "^0.7.3",
 		"@nanostores/router": "^0.11.0",
-		"@radix-ui/react-alert-dialog": "^1.1.14",
-		"@radix-ui/react-checkbox": "^1.3.2",
-		"@radix-ui/react-dialog": "^1.1.14",
+		"@radix-ui/react-alert-dialog": "^1.1.15",
+		"@radix-ui/react-checkbox": "^1.3.3",
+		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-direction": "^1.1.1",
-		"@radix-ui/react-dropdown-menu": "^2.1.15",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
 		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-select": "^2.2.5",
+		"@radix-ui/react-select": "^2.2.6",
 		"@radix-ui/react-separator": "^1.1.7",
-		"@radix-ui/react-slider": "^1.3.5",
+		"@radix-ui/react-slider": "^1.3.6",
 		"@radix-ui/react-slot": "^1.2.3",
-		"@radix-ui/react-switch": "^1.2.5",
-		"@radix-ui/react-tabs": "^1.1.12",
-		"@radix-ui/react-toast": "^1.2.14",
-		"@radix-ui/react-tooltip": "^1.2.7",
+		"@radix-ui/react-switch": "^1.2.6",
+		"@radix-ui/react-tabs": "^1.1.13",
+		"@radix-ui/react-toast": "^1.2.15",
+		"@radix-ui/react-tooltip": "^1.2.8",
 		"@tanstack/react-table": "^8.21.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
@@ -40,27 +40,27 @@
 		"lucide-react": "^0.452.0",
 		"nanostores": "^0.11.4",
 		"pocketbase": "^0.26.2",
-		"react": "^18.3.1",
-		"react-dom": "^18.3.1",
+		"react": "^19.1.1",
+		"react-dom": "^19.1.1",
 		"recharts": "^2.15.4",
 		"tailwind-merge": "^2.6.0",
-		"tailwindcss-animate": "^1.0.7",
 		"valibot": "^0.42.1"
 	},
 	"devDependencies": {
-		"@lingui/cli": "^5.3.3",
-		"@lingui/swc-plugin": "^5.5.2",
-		"@lingui/vite-plugin": "^5.3.3",
+		"@lingui/cli": "^5.4.1",
+		"@lingui/swc-plugin": "^5.6.1",
+		"@lingui/vite-plugin": "^5.4.1",
 		"@tailwindcss/container-queries": "^0.1.1",
-		"@types/bun": "^1.2.19",
-		"@types/react": "^18.3.23",
+		"@tailwindcss/postcss": "^4.1.12",
+		"@types/bun": "^1.2.20",
+		"@types/react": "^18.3.24",
 		"@types/react-dom": "^18.3.7",
 		"@vitejs/plugin-react-swc": "^3.11.0",
-		"autoprefixer": "^10.4.21",
 		"postcss": "^8.5.6",
-		"tailwindcss": "^3.4.17",
+		"tailwindcss": "^4.1.12",
 		"tailwindcss-rtl": "^0.9.0",
-		"typescript": "^5.8.3",
+		"tw-animate-css": "^1.3.7",
+		"typescript": "^5.9.2",
 		"vite": "^6.3.5"
 	},
 	"overrides": {

beszel/site/postcss.config.js

@@ -1,6 +1,5 @@
 export default {
 	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
+		"@tailwindcss/postcss": {},
 	},
 }

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

@@ -165,9 +165,7 @@ export const SystemDialog = ({ setOpen, system }: { setOpen: (open: boolean) =>
 						<Trans>
 							Copy the installation command for the agent below, or register agents automatically with a{" "}
 							<Link
-								onClick={() => {
-									setOpen(false)
-								}}
+								onClick={() => setOpen(false)}
 								href={getPagePath($router, "settings", { name: "tokens" })}
 								className="link"
 							>
@@ -274,7 +272,7 @@ interface CopyButtonProps {
 	text: string
 	onClick: () => void
 	dropdownItems: DropdownItem[]
-	icon?: React.ReactElement
+	icon?: React.ReactElement<any>
 }
 
 const CopyButton = memo((props: CopyButtonProps) => {

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

@@ -2,23 +2,22 @@ import { t } from "@lingui/core/macro"
 import { memo, useMemo, useState } from "react"
 import { useStore } from "@nanostores/react"
 import { $alerts } from "@/lib/stores"
-import { Dialog, DialogTrigger, DialogContent } from "@/components/ui/dialog"
 import { BellIcon } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { SystemRecord } from "@/types"
-import { AlertDialogContent } from "./alerts-dialog"
+import { AlertDialogContent } from "./alerts-sheet"
+import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 
 export default memo(function AlertsButton({ system }: { system: SystemRecord }) {
 	const [opened, setOpened] = useState(false)
 	const alerts = useStore($alerts)
 
 	const hasSystemAlert = alerts[system.id]?.size > 0
-
 	return useMemo(
 		() => (
-			<Dialog>
-				<DialogTrigger asChild>
+			<Sheet>
+				<SheetTrigger asChild>
 					<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
 						<BellIcon
 							className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
@@ -26,32 +25,12 @@ export default memo(function AlertsButton({ system }: { system: SystemRecord })
 							})}
 						/>
 					</Button>
-				</DialogTrigger>
-				<DialogContent className="max-h-full sm:max-h-[95svh] overflow-auto max-w-[37rem]">
+				</SheetTrigger>
+				<SheetContent className="max-h-full overflow-auto w-145 !max-w-full p-4 sm:p-6">
 					{opened && <AlertDialogContent system={system} />}
-				</DialogContent>
-			</Dialog>
+				</SheetContent>
+			</Sheet>
 		),
 		[opened, hasSystemAlert]
 	)
-
-	// return useMemo(
-	// 	() => (
-	// 		<Sheet>
-	// 			<SheetTrigger asChild>
-	// 				<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
-	// 					<BellIcon
-	// 						className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
-	// 							"fill-primary": hasAlert,
-	// 						})}
-	// 					/>
-	// 				</Button>
-	// 			</SheetTrigger>
-	// 			<SheetContent className="max-h-full overflow-auto w-[35em] p-4 sm:p-5">
-	// 				{opened && <AlertDialogContent system={system} />}
-	// 			</SheetContent>
-	// 		</Sheet>
-	// 	),
-	// 	[opened, hasAlert]
-	// )
 })

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

@@ -288,7 +288,7 @@ export function UserAuthForm({
 									// }}
 								/>
 							)}
-							<span className="translate-y-[1px]">{provider.displayName}</span>
+							<span className="translate-y-px">{provider.displayName}</span>
 						</button>
 					))}
 				</div>
@@ -299,7 +299,7 @@ export function UserAuthForm({
 					<DialogTrigger asChild>
 						<button type="button" className={cn(buttonVariants({ variant: "outline" }))}>
 							<img className="me-2 h-4 w-4 dark:invert" src={prependBasePath("/_/images/oauth2/github.svg")} alt="" />
-							<span className="translate-y-[1px]">GitHub</span>
+							<span className="translate-y-px">GitHub</span>
 						</button>
 					</DialogTrigger>
 					<DialogContent style={{ maxWidth: 440, width: "90%" }}>

beszel/site/src/components/navbar.tsx

@@ -1,4 +1,4 @@
-import { Trans } from "@lingui/react/macro";
+import { Trans } from "@lingui/react/macro"
 import { useState, lazy, Suspense } from "react"
 import { Button, buttonVariants } from "@/components/ui/button"
 import {

beszel/site/src/components/router.tsx

@@ -35,18 +35,20 @@ export const navigate = (urlString: string) => {
 	$router.open(urlString)
 }
 
-function onClick(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
-	e.preventDefault()
-	$router.open(new URL((e.currentTarget as HTMLAnchorElement).href).pathname)
-}
-
-export const Link = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-	let clickFn = onClick
-	if (props.onClick) {
-		clickFn = (e) => {
-			onClick(e)
-			props.onClick?.(e)
-		}
-	}
-	return <a {...props} onClick={clickFn}></a>
+export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+	return (
+		<a
+			{...props}
+			onClick={(e) => {
+				e.preventDefault()
+				const href = props.href || ""
+				if (e.ctrlKey || e.metaKey) {
+					window.open(href, "_blank")
+				} else {
+					navigate(href)
+					props.onClick?.(e)
+				}
+			}}
+		></a>
+	)
 }

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

@@ -105,7 +105,7 @@ const ActiveAlerts = () => {
 								return (
 									<Alert
 										key={alert.id}
-										className="hover:-translate-y-[1px] duration-200 bg-transparent border-foreground/10  hover:shadow-md shadow-black"
+										className="hover:-translate-y-px duration-200 bg-transparent border-foreground/10  hover:shadow-md shadow-black"
 									>
 										<info.icon className="h-4 w-4" />
 										<AlertTitle>

beszel/site/src/components/routes/settings/config-yaml.tsx

@@ -1,5 +1,5 @@
-import { t } from "@lingui/core/macro";
-import { Trans } from "@lingui/react/macro";
+import { t } from "@lingui/core/macro"
+import { Trans } from "@lingui/react/macro"
 import { isAdmin } from "@/lib/utils"
 import { Separator } from "@/components/ui/separator"
 import { Button } from "@/components/ui/button"

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

@@ -39,8 +39,8 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 			</div>
 			<Separator className="my-4" />
 			<form onSubmit={handleSubmit} className="space-y-5">
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium flex items-center gap-2">
 							<LanguagesIcon className="h-4 w-4" />
 							<Trans>Language</Trans>
@@ -73,8 +73,8 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					</Select>
 				</div>
 				<Separator />
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">
 							<Trans>Chart options</Trans>
 						</h3>
@@ -102,8 +102,8 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					</p>
 				</div>
 				<Separator />
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">
 							<Trans comment="Temperature / network units">Unit preferences</Trans>
 						</h3>
@@ -112,7 +112,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 						</p>
 					</div>
 					<div className="grid sm:grid-cols-3 gap-4">
-						<div className="space-y-2">
+						<div className="grid gap-2">
 							<Label className="block" htmlFor="unitTemp">
 								<Trans>Temperature unit</Trans>
 							</Label>
@@ -134,7 +134,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 								</SelectContent>
 							</Select>
 						</div>
-						<div className="space-y-2">
+						<div className="grid gap-2">
 							<Label className="block" htmlFor="unitNet">
 								<Trans comment="Context: Bytes or bits">Network unit</Trans>
 							</Label>
@@ -156,7 +156,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 								</SelectContent>
 							</Select>
 						</div>
-						<div className="space-y-2">
+						<div className="grid gap-2">
 							<Label className="block" htmlFor="unitDisk">
 								<Trans>Disk unit</Trans>
 							</Label>
@@ -181,8 +181,8 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					</div>
 				</div>
 				<Separator />
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">
 							<Trans>Warning thresholds</Trans>
 						</h3>
@@ -191,7 +191,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 						</p>
 					</div>
 					<div className="grid grid-cols-2 lg:grid-cols-3 gap-4 items-end">
-						<div className="space-y-1">
+						<div className="grid gap-2">
 							<Label htmlFor="colorWarn">
 								<Trans>Warning (%)</Trans>
 							</Label>
@@ -205,7 +205,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 								defaultValue={userSettings.colorWarn ?? 65}
 							/>
 						</div>
-						<div className="space-y-1">
+						<div className="grid gap-1">
 							<Label htmlFor="colorCrit">
 								<Trans>Critical (%)</Trans>
 							</Label>

beszel/site/src/components/routes/settings/notifications.tsx

@@ -87,8 +87,8 @@ const SettingsNotificationsPage = ({ userSettings }: { userSettings: UserSetting
 			</div>
 			<Separator className="my-4" />
 			<div className="space-y-5">
-				<div className="space-y-2">
-					<div className="mb-4">
+				<div className="grid gap-2">
+					<div className="mb-2">
 						<h3 className="mb-1 text-lg font-medium">
 							<Trans>Email notifications</Trans>
 						</h3>

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

@@ -12,7 +12,7 @@ import {
 } from "@/lib/stores"
 import { ChartData, ChartTimes, ContainerStatsRecord, GPUData, SystemRecord, SystemStatsRecord } from "@/types"
 import { ChartType, Unit, Os } from "@/lib/enums"
-import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import React, { lazy, memo, useCallback, useEffect, useMemo, useRef, useState, type JSX } from "react"
 import { Card, CardHeader, CardTitle, CardDescription } from "../ui/card"
 import { useStore } from "@nanostores/react"
 import Spinner from "../spinner"
@@ -872,10 +872,10 @@ function ChartCard({
 
 	return (
 		<Card className={cn("pb-2 sm:pb-4 odd:last-of-type:col-span-full", { "col-span-full": !grid })} ref={ref}>
-			<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
+			<CardHeader className="pb-5 pt-4 gap-1 relative max-sm:py-3 max-sm:px-4">
 				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
-				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
+				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-3.5 sm:end-3.5">{cornerEl}</div>}
 			</CardHeader>
 			<div className="ps-0 w-[calc(100%-1.5em)] h-48 md:h-52 relative group">
 				{

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

@@ -55,6 +55,8 @@ import {
 import { buttonVariants } from "../ui/button"
 import { t } from "@lingui/core/macro"
 import { MeterState } from "@/lib/enums"
+import { $router, Link } from "../router"
+import { getPagePath } from "@nanostores/router"
 
 const STATUS_COLORS = {
 	up: "bg-green-500",
@@ -107,12 +109,22 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			enableHiding: false,
 			invertSorting: false,
 			Icon: ServerIcon,
-			cell: (info) => (
-				<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1 md:pe-5">
-					<IndicatorDot system={info.row.original} />
-					{info.getValue() as string}
-				</span>
-			),
+			cell: (info) => {
+				const { name } = info.row.original
+				return (
+					<>
+						<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1 md:pe-5">
+							<IndicatorDot system={info.row.original} />
+							{name}
+						</span>
+						<Link
+							href={getPagePath($router, "system", { name })}
+							className="inset-0 absolute size-full"
+							aria-label={name}
+						></Link>
+					</>
+				)
+			},
 			header: sortableHeader,
 		},
 		{
@@ -277,7 +289,7 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			name: () => t({ message: "Actions", comment: "Table column" }),
 			size: 50,
 			cell: ({ row }) => (
-				<div className="flex justify-end items-center gap-1 -ms-3">
+				<div className="relative z-10 flex justify-end items-center gap-1 -ms-3">
 					<AlertButton system={row.original} />
 					<ActionsButton system={row.original} />
 				</div>
@@ -331,7 +343,7 @@ export function IndicatorDot({ system, className }: { system: SystemRecord; clas
 	className ||= STATUS_COLORS[system.status as keyof typeof STATUS_COLORS] || ""
 	return (
 		<span
-			className={cn("flex-shrink-0 size-2 rounded-full", className)}
+			className={cn("shrink-0 size-2 rounded-full", className)}
 			// style={{ marginBottom: "-1px" }}
 		/>
 	)
@@ -349,7 +361,7 @@ export const ActionsButton = memo(({ system }: { system: SystemRecord }) => {
 			<>
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
-						<Button variant="ghost" size={"icon"} data-nolink>
+						<Button variant="ghost" size={"icon"}>
 							<span className="sr-only">
 								<Trans>Open menu</Trans>
 							</span>

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

@@ -41,7 +41,7 @@ import { memo, useEffect, useMemo, useState } from "react"
 import { $systems } from "@/lib/stores"
 import { useStore } from "@nanostores/react"
 import { cn, useLocalStorage } from "@/lib/utils"
-import { $router, Link, navigate } from "../router"
+import { $router, Link } from "../router"
 import { useLingui, Trans } from "@lingui/react/macro"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { Input } from "../ui/input"
@@ -291,15 +291,9 @@ const SystemTableRow = memo(
 			return (
 				<TableRow
 					// data-state={row.getIsSelected() && "selected"}
-					className={cn("cursor-pointer transition-opacity", {
+					className={cn("cursor-pointer transition-opacity relative", {
 						"opacity-50": system.status === "paused",
 					})}
-					onClick={(e) => {
-						const target = e.target as HTMLElement
-						if (!target.closest("[data-nolink]") && e.currentTarget.contains(target)) {
-							navigate(getPagePath($router, "system", { name: system.name }))
-						}
-					}}
 				>
 					{row.getVisibleCells().map((cell) => (
 						<TableCell
@@ -307,7 +301,7 @@ const SystemTableRow = memo(
 							style={{
 								width: cell.column.getSize(),
 							}}
-							className={cn("overflow-hidden relative", length > 10 ? "py-2" : "py-2.5")}
+							className={length > 10 ? "py-2" : "py-2.5"}
 						>
 							{flexRender(cell.column.columnDef.cell, cell.getContext())}
 						</TableCell>
@@ -345,14 +339,14 @@ const SystemCard = memo(
 								</div>
 							</CardTitle>
 							{table.getColumn("actions")?.getIsVisible() && (
-								<div className="flex gap-1 flex-shrink-0 relative z-10">
+								<div className="flex gap-1 shrink-0 relative z-10">
 									<AlertButton system={system} />
 									<ActionsButton system={system} />
 								</div>
 							)}
 						</div>
 					</CardHeader>
-					<CardContent className="space-y-2.5 text-sm px-5 pt-3.5 pb-4">
+					<CardContent className="grid gap-2.5 text-sm px-5 pt-3.5 pb-4">
 						{table.getAllColumns().map((column) => {
 							if (!column.getIsVisible() || column.id === "system" || column.id === "actions") return null
 							const cell = row.getAllCells().find((cell) => cell.column.id === column.id)

beszel/site/src/components/ui/alert-dialog.tsx

@@ -34,7 +34,7 @@ const AlertDialogContent = React.forwardRef<
 		<AlertDialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% sm:rounded-lg",
 				className
 			)}
 			{...props}
@@ -44,7 +44,7 @@ const AlertDialogContent = React.forwardRef<
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
 const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("flex flex-col space-y-2 text-center sm:text-start", className)} {...props} />
+	<div className={cn("grid gap-2 text-center sm:text-start", className)} {...props} />
 )
 AlertDialogHeader.displayName = "AlertDialogHeader"
 

beszel/site/src/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-	"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
 	{
 		variants: {
 			variant: {

beszel/site/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
 	{
 		variants: {
 			variant: {

beszel/site/src/components/ui/card.tsx

@@ -5,16 +5,14 @@ import { cn } from "@/lib/utils"
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
 	<div
 		ref={ref}
-		className={cn("rounded-lg border border-border/60 bg-card text-card-foreground shadow-sm", className)}
+		className={cn("rounded-lg border border-border/60 bg-card text-card-foreground shadow-xs", className)}
 		{...props}
 	/>
 ))
 Card.displayName = "Card"
 
 const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-	)
+	({ className, ...props }, ref) => <div ref={ref} className={cn("grid gap-1.5 p-6", className)} {...props} />
 )
 CardHeader.displayName = "CardHeader"
 

beszel/site/src/components/ui/chart.tsx

@@ -4,6 +4,8 @@ import * as RechartsPrimitive from "recharts"
 import { chartTimeData, cn } from "@/lib/utils"
 import { ChartData } from "@/types"
 
+import type { JSX } from "react";
+
 // Format: { THEME_NAME: CSS_SELECTOR }
 const THEMES = { light: "", dark: ".dark" } as const
 
@@ -41,21 +43,21 @@ const ChartContainer = React.forwardRef<
 	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
 
 	return (
-		//<ChartContext.Provider value={{ config }}>
-		<div
+        //<ChartContext.Provider value={{ config }}>
+        //</ChartContext.Provider>
+        <div
 			data-chart={chartId}
 			ref={ref}
 			className={cn(
-				"text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+				"text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
 				className
 			)}
 			{...props}
 		>
-			{/* <ChartStyle id={chartId} config={config} /> */}
-			<RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
-		</div>
-		//</ChartContext.Provider>
-	)
+            {/* <ChartStyle id={chartId} config={config} /> */}
+            <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+        </div>
+    );
 })
 ChartContainer.displayName = "Chart"
 
@@ -169,7 +171,7 @@ const ChartTooltipContent = React.forwardRef<
 			<div
 				ref={ref}
 				className={cn(
-					"grid min-w-[7rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+					"grid min-w-28 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
 					className
 				)}
 			>
@@ -196,7 +198,7 @@ const ChartTooltipContent = React.forwardRef<
 											<itemConfig.icon />
 										) : (
 											<div
-												className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+												className={cn("shrink-0 rounded-[2px] border-border bg-(--color-bg)", {
 													"h-2.5 w-2.5": indicator === "dot",
 													"w-1": indicator === "line",
 													"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",

beszel/site/src/components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			"peer size-4 flex items-center justify-center shrink-0 rounded-[.3em] border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			"peer size-4 flex items-center justify-center shrink-0 rounded-[.3em] border border-input ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
 
 			className
 		)}

beszel/site/src/components/ui/command.tsx

@@ -12,7 +12,7 @@ const Command = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<CommandPrimitive
 		ref={ref}
-		className={cn("flex h-full w-full flex-col overflow-hidden bg-popover text-popover-foreground", className)}
+		className={cn("flex h-full w-full flex-col overflow-hidden bg-card", className)}
 		{...props}
 	/>
 ))
@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
 		<CommandPrimitive.Input
 			ref={ref}
 			className={cn(
-				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 				className
 			)}
 			{...props}
@@ -105,7 +105,7 @@ const CommandItem = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default opacity-70 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent/70 aria-selected:opacity-90 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
+			"relative flex cursor-default opacity-70 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-accent/60 aria-selected:opacity-90 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50",
 			className
 		)}
 		{...props}

beszel/site/src/components/ui/dialog.tsx

@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-50% data-[state=closed]:slide-out-to-top-48% data-[state=open]:slide-in-from-left-50% data-[state=open]:slide-in-from-top-48% sm:rounded-lg",
 				className
 			)}
 			{...props}
 		>
 			{children}
-			<DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+			<DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 				<X className="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>
@@ -52,7 +52,7 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("flex flex-col space-y-1.5 text-center sm:text-start", className)} {...props} />
+	<div className={cn("grid gap-1.5 text-center sm:text-start", className)} {...props} />
 )
 DialogHeader.displayName = "DialogHeader"
 

beszel/site/src/components/ui/dropdown-menu.tsx

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-			"flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none focus:bg-accent/70 data-[state=open]:bg-accent/70",
+			"flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 data-[state=open]:bg-accent/70",
 			inset && "ps-8",
 			className
 		)}
@@ -44,7 +44,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 			className
 		)}
 		{...props}
@@ -61,7 +61,7 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				className
 			)}
 			{...props}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none focus:bg-accent/70 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			inset && "ps-8",
 			className
 		)}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent/70 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className
 		)}
 		checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent/70 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className
 		)}
 		{...props}

beszel/site/src/components/ui/input-copy.tsx

@@ -11,7 +11,7 @@ export function InputCopy({ value, id, name }: { value: string; id: string; name
 			<Input readOnly id={id} name={name} value={value} required></Input>
 			<div
 				className={
-					"h-6 w-24 bg-gradient-to-r rtl:bg-gradient-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
+					"h-6 w-24 bg-linear-to-r rtl:bg-linear-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
 				}
 			></div>
 			<TooltipProvider delayDuration={100} disableHoverableContent>

beszel/site/src/components/ui/input-tags.tsx

@@ -33,7 +33,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
 		return (
 			<div
 				className={cn(
-					"bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border px-3 py-2 text-sm  placeholder:text-muted-foreground has-[:focus-visible]:outline-none ring-offset-background has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					"bg-background min-h-10 flex w-full flex-wrap gap-2 rounded-md border px-3 py-2 text-sm  placeholder:text-muted-foreground has-focus-visible:outline-hidden ring-offset-background has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 					className
 				)}
 			>
@@ -53,7 +53,7 @@ const InputTags = React.forwardRef<HTMLInputElement, InputTagsProps>(
 					</Badge>
 				))}
 				<input
-					className="flex-1 outline-none bg-background placeholder:text-muted-foreground"
+					className="flex-1 outline-hidden bg-background placeholder:text-muted-foreground"
 					value={pendingDataPoint}
 					onChange={(e) => setPendingDataPoint(e.target.value)}
 					onKeyDown={(e) => {

beszel/site/src/components/ui/input.tsx

@@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type,
 		<input
 			type={type}
 			className={cn(
-				"flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 				className
 			)}
 			ref={ref}

beszel/site/src/components/ui/select.tsx

@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			"flex h-10 w-full items-center justify-between rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 			className
 		)}
 		{...props}
@@ -66,7 +66,7 @@ const SelectContent = React.forwardRef<
 		<SelectPrimitive.Content
 			ref={ref}
 			className={cn(
-				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				position === "popper" &&
 					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 				className
@@ -79,7 +79,7 @@ const SelectContent = React.forwardRef<
 				className={cn(
 					"p-1",
 					position === "popper" &&
-						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+						"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
 				)}
 			>
 				{children}
@@ -105,7 +105,7 @@ const SelectItem = React.forwardRef<
 	<SelectPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none focus:bg-accent/70 focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className
 		)}
 		{...props}

beszel/site/src/components/ui/separator.tsx

@@ -11,7 +11,7 @@ const Separator = React.forwardRef<
 		ref={ref}
 		decorative={decorative}
 		orientation={orientation}
-		className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+		className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
 		{...props}
 	/>
 ))

beszel/site/src/components/ui/sheet.tsx

@@ -0,0 +1,101 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({ ...props }: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+	return (
+		<SheetPrimitive.Overlay
+			data-slot="sheet-overlay"
+			className={cn(
+				"data-[state=open]:animate-in duration-500 isolate data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40",
+				className
+			)}
+			{...props}
+		/>
+	)
+}
+
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+	side?: "top" | "right" | "bottom" | "left"
+}) {
+	return (
+		<SheetPortal>
+			<SheetOverlay />
+			<SheetPrimitive.Content
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-[400ms]",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<XIcon className="size-4" />
+					<span className="sr-only">Close</span>
+				</SheetPrimitive.Close>
+			</SheetPrimitive.Content>
+		</SheetPortal>
+	)
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-header" className={cn("flex flex-col gap-1.5 p-4", className)} {...props} />
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot="sheet-footer" className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+}
+
+function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
+		<SheetPrimitive.Title
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
+			{...props}
+		/>
+	)
+}
+
+function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>) {
+	return (
+		<SheetPrimitive.Description
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	)
+}
+
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }

beszel/site/src/components/ui/slider.tsx

@@ -15,7 +15,7 @@ const Slider = React.forwardRef<
 		<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
 			<SliderPrimitive.Range className="absolute h-full bg-primary" />
 		</SliderPrimitive.Track>
-		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+		<SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
 	</SliderPrimitive.Root>
 ))
 Slider.displayName = SliderPrimitive.Root.displayName

beszel/site/src/components/ui/switch.tsx

@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SwitchPrimitives.Root
 		className={cn(
-			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
 			className
 		)}
 		{...props}
@@ -17,7 +17,7 @@ const Switch = React.forwardRef<
 	>
 		<SwitchPrimitives.Thumb
 			className={cn(
-				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 rtl:data-[state=checked]:-translate-x-5 data-[state=unchecked]:translate-x-0"
+				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=checked]:rtl:-translate-x-5 data-[state=unchecked]:translate-x-0"
 			)}
 		/>
 	</SwitchPrimitives.Root>

beszel/site/src/components/ui/table.tsx

@@ -27,7 +27,7 @@ TableBody.displayName = "TableBody"
 
 const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
 	({ className, ...props }, ref) => (
-		<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
+		<tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium last:[&>tr]:border-b-0", className)} {...props} />
 	)
 )
 TableFooter.displayName = "TableFooter"
@@ -37,7 +37,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
 		<tr
 			ref={ref}
 			className={cn(
-				"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/20 data-[state=selected]:!bg-muted",
+				"border-b border-border/60 hover:bg-muted/40 dark:hover:bg-muted/20 data-[state=selected]:bg-muted!",
 				className
 			)}
 			{...props}

beszel/site/src/components/ui/tabs.tsx

@@ -27,7 +27,7 @@ const TabsTrigger = React.forwardRef<
 	<TabsPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs cursor-pointer",
 			className
 		)}
 		{...props}
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
-			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			"mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
 			className
 		)}
 		{...props}

beszel/site/src/components/ui/textarea.tsx

@@ -8,7 +8,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ classNa
 	return (
 		<textarea
 			className={cn(
-				"flex min-h-14 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+				"flex min-h-14 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
 				className
 			)}
 			ref={ref}

beszel/site/src/components/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
 	<ToastPrimitives.Viewport
 		ref={ref}
 		className={cn(
-			"fixed top-0 z-[100] flex max-h-dvh w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			"fixed top-0 z-100 flex max-h-dvh w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
 			className
 		)}
 		{...props}
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-	"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
 	{
 		variants: {
 			variant: {
@@ -52,7 +52,7 @@ const ToastAction = React.forwardRef<
 	<ToastPrimitives.Action
 		ref={ref}
 		className={cn(
-			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
 			className
 		)}
 		{...props}
@@ -67,7 +67,7 @@ const ToastClose = React.forwardRef<
 	<ToastPrimitives.Close
 		ref={ref}
 		className={cn(
-			"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
 			className
 		)}
 		toast-close=""

beszel/site/src/index.css

@@ -1,6 +1,55 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@config '../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentcolor);
+	}
+}
+
+@utility link {
+	@apply text-primary font-medium underline-offset-4 hover:underline;
+}
+
+@utility ns-dialog {
+	/* New system dialog width */
+	min-width: 30.3rem;
+	:where(:lang(zh), :lang(zh-CN), :lang(ko)) & {
+		min-width: 27.9rem;
+	}
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentcolor);
+	}
+}
 
 @layer base {
 	:root {
@@ -57,18 +106,20 @@
 	}
 }
 
-/* Fonts */
-@supports (font-variation-settings: normal) {
-	:root {
-		font-family: Inter, InterVariable, sans-serif;
+@layer utilities {
+	/* Fonts */
+	@supports (font-variation-settings: normal) {
+		:root {
+			font-family: Inter, InterVariable, sans-serif;
+		}
+	}
+	@font-face {
+		font-family: InterVariable;
+		font-style: normal;
+		font-weight: 100 900;
+		font-display: swap;
+		src: url("/static/InterVariable.woff2?v=4.0") format("woff2");
 	}
-}
-@font-face {
-	font-family: InterVariable;
-	font-style: normal;
-	font-weight: 100 900;
-	font-display: swap;
-	src: url("/static/InterVariable.woff2?v=4.0") format("woff2");
 }
 
 @layer base {
@@ -81,19 +132,6 @@
 	}
 }
 
-@layer utilities {
-	.link {
-		@apply text-primary font-medium underline-offset-4 hover:underline;
-	}
-	/* New system dialog width */
-	.ns-dialog {
-		min-width: 30.3rem;
-	}
-	:where(:lang(zh), :lang(zh-CN), :lang(ko)) .ns-dialog {
-		min-width: 27.9rem;
-	}
-}
-
 .recharts-tooltip-wrapper {
 	z-index: 1;
 }

beszel/site/src/lib/use-intersection-observer.ts

@@ -84,7 +84,7 @@ export function useIntersectionObserver({
 		entry: undefined,
 	}))
 
-	const callbackRef = useRef<UseIntersectionObserverOptions["onChange"]>()
+	const callbackRef = useRef<UseIntersectionObserverOptions["onChange"]>(undefined)
 
 	callbackRef.current = onChange
 

beszel/site/tailwind.config.js

@@ -94,11 +94,11 @@ module.exports = {
 		},
 	},
 	plugins: [
-		require("@tailwindcss/container-queries"),
-		require("tailwindcss-animate"),
-		require("tailwindcss-rtl"),
-		function ({ addVariant }) {
-			addVariant("light", ".light &")
-		},
+		// require("@tailwindcss/container-queries"),
+		// require("tailwindcss-animate"),
+		// require("tailwindcss-rtl"),
+		// function ({ addVariant }) {
+		// 	addVariant("light", ".light &")
+		// },
 	],
 }