use anchor tag for system table links

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

@@ -19,9 +19,9 @@ export default memo(function AlertsButton({ system }: { system: SystemRecord })
 		() => (
 			<Dialog>
 				<DialogTrigger asChild>
-					<Button variant="ghost" size="icon" aria-label={t`Alerts`} data-nolink onClick={() => setOpened(true)}>
+					<Button variant="ghost" size="icon" aria-label={t`Alerts`} onClick={() => setOpened(true)}>
 						<BellIcon
-							className={cn("h-[1.2em] w-[1.2em] pointer-events-none", {
+							className={cn("h-[1.2em] w-[1.2em]", {
 								"fill-primary": hasSystemAlert,
 							})}
 						/>

beszel/site/src/components/router.tsx

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

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,25 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
 			enableHiding: false,
 			invertSorting: false,
 			Icon: ServerIcon,
-			cell: (info) => (
+			cell: (info) => {
-				<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1 md:pe-5">
+				const { name } = info.row.original
-					<IndicatorDot system={info.row.original} />
+				return useMemo(
-					{info.getValue() as string}
+					() => (
-				</span>
+						<>
-			),
+							<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>
+						</>
+					),
+					[name]
+				)
+			},
 			header: sortableHeader,
 		},
 		{
@@ -277,7 +292,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>
@@ -349,7 +364,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>