fix: resolve type errors and lint components/routes

app/components/Code.tsx

@@ -1,4 +1,4 @@
-import { useState, type HTMLProps } from 'react';
+import { useState, HTMLProps } from 'react';
 import { CopyIcon, CheckIcon } from '@primer/octicons-react';
 import { cn } from '~/utils/cn';
 import { toast } from '~/components/Toaster';
@@ -20,7 +20,7 @@ export default function Code(props: Props) {
 			>
 				{props.children}
 			</code>
-			{props.isCopyable && props.children ? (
+			{props.isCopyable ? (
 				<button
 					className={cn(
 						'ml-1 p-1 rounded-md',
@@ -29,6 +29,10 @@ export default function Code(props: Props) {
 						'inline-flex items-center justify-center',
 					)}
 					onClick={() => {
+						if (!props.children) {
+							throw new Error('Made copyable without children');
+						}
+
 						navigator.clipboard.writeText(props.children.join(''));
 						toast('Copied to clipboard');
 						setIsCopied(true);

app/components/Footer.tsx

@@ -1,12 +1,16 @@
 import { cn } from '~/utils/cn';
 import Link from '~/components/Link';
 
+declare global {
+	const __VERSION__: string;
+}
+
 interface FooterProps {
 	url: string;
 	debug: boolean;
 }
 
-export default function Footer({ url, debug, integration }: FooterProps) {
+export default function Footer({ url, debug }: FooterProps) {
 	return (
 		<footer
 			className={cn(

app/components/Toaster.tsx

@@ -1,7 +1,15 @@
 import { XIcon } from '@primer/octicons-react';
-import { type AriaToastProps, useToast, useToastRegion } from '@react-aria/toast';
-import { ToastQueue, type ToastState, useToastQueue } from '@react-stately/toast';
-import { type ReactNode, useRef } from 'react';
+import {
+	AriaToastProps,
+	useToast,
+	useToastRegion,
+} from '@react-aria/toast';
+import {
+	ToastQueue,
+	ToastState,
+	useToastQueue,
+} from '@react-stately/toast';
+import { ReactNode, useRef } from 'react';
 import { Button } from 'react-aria-components';
 import { createPortal } from 'react-dom';
 import { ClientOnly } from 'remix-utils/client-only';
@@ -14,7 +22,6 @@ type ToastProps = AriaToastProps<ReactNode> & {
 function Toast({ state, ...properties }: ToastProps) {
 	const reference = useRef(null);
 
-	// @ts-expect-error: RefObject doesn't map to FocusableElement?
 	const { toastProps, titleProps, closeButtonProps } = useToast(
 		properties,
 		state,
@@ -58,13 +65,11 @@ export function Toaster() {
 	const reference = useRef(null);
 	const state = useToastQueue(toasts);
 
-	// @ts-expect-error: React 19 has weird types for Portal vs Node
 	const { regionProps } = useToastRegion({}, state, reference);
 
 	return (
 		<ClientOnly>
 			{
-				// @ts-expect-error: Portal doesn't match Node in React 19 yet
 				() =>
 					createPortal(
 						state.visibleToasts.length >= 0 ? (

app/routes/acls/editor.tsx

@@ -5,8 +5,8 @@ import {
 	PencilIcon,
 } from '@primer/octicons-react';
 import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
-import { useLoaderData, useRevalidator } from 'react-router';
-import { useDebounceFetcher } from 'remix-utils/use-debounce-fetcher';
+import { useLoaderData, useRevalidator, useFetcher } from 'react-router';
+//import { useDebounceFetcher } from 'remix-utils/use-debounce-fetcher';
 import { useEffect, useState, useMemo } from 'react';
 import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components';
 import { setTimeout } from 'node:timers/promises';
@@ -149,7 +149,7 @@ export async function action({ request }: ActionFunctionArgs) {
 
 export default function Page() {
 	const data = useLoaderData<typeof loader>();
-	const fetcher = useDebounceFetcher<typeof action>();
+	const fetcher = useFetcher<typeof action>();
 	const revalidator = useRevalidator();
 
 	const [acl, setAcl] = useState(data.policy ?? '');

app/routes/auth/login.tsx

@@ -1,4 +1,8 @@
-import { type ActionFunctionArgs, type LoaderFunctionArgs, redirect } from 'react-router';
+import {
+	type ActionFunctionArgs,
+	type LoaderFunctionArgs,
+	redirect,
+} from 'react-router';
 import { Form, useActionData, useLoaderData } from 'react-router';
 import { useMemo } from 'react';
 

app/routes/dns/components/nameservers.tsx

@@ -48,7 +48,7 @@ export default function Nameservers({ nameservers, isDisabled }: Props) {
 interface ListProps {
 	isGlobal: boolean;
 	isDisabled: boolean;
-	nameservers: string[];
+	nameservers: Record<string, string[]>;
 	name: string;
 }
 

app/routes/dns/overview.tsx

@@ -43,22 +43,22 @@ export async function loader() {
 export async function action({ request }: ActionFunctionArgs) {
 	const session = await getSession(request.headers.get('Cookie'));
 	if (!session.has('hsApiKey')) {
-		return send({ success: false }, 401);
+		return data({ success: false }, { status: 401 });
 	}
 
 	const context = await loadContext();
 	if (!context.config.write) {
-		return send({ success: false }, 403);
+		return data({ success: false }, { status: 403 });
 	}
 
-	const data = (await request.json()) as Record<string, unknown>;
-	await patchConfig(data);
+	const patch = (await request.json()) as Record<string, unknown>;
+	await patchConfig(patch);
 
 	if (context.integration?.onConfigChange) {
 		await context.integration.onConfigChange(context.integration.context);
 	}
 
-	return { success: true };
+	return data({ success: true });
 }
 
 export default function Page() {

app/routes/machines/components/machine.tsx

@@ -1,6 +1,6 @@
 import { ChevronDownIcon, CopyIcon } from '@primer/octicons-react';
 import { Link } from 'react-router';
-
+import { useMemo } from 'react';
 import Menu from '~/components/Menu';
 import StatusCircle from '~/components/StatusCircle';
 import { toast } from '~/components/Toaster';
@@ -35,7 +35,11 @@ export default function MachineRow({ machine, routes, magic, users }: Props) {
 		: magic;
 
 	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet, subnetApproved } = routes.reduce(
+	const { exit, subnet, subnetApproved } = routes.reduce<{
+		exit: Route[];
+		subnetApproved: Route[];
+		subnet: Route[];
+	}>(
 		(acc, route) => {
 			if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
 				acc.exit.push(route);

app/routes/machines/dialogs/routes.tsx

@@ -1,5 +1,5 @@
 import { useFetcher } from 'react-router';
-import { type Dispatch, type SetStateAction, useMemo } from 'react';
+import { Dispatch, SetStateAction, useMemo } from 'react';
 
 import Dialog from '~/components/Dialog';
 import Switch from '~/components/Switch';
@@ -18,7 +18,10 @@ export default function Routes({ machine, routes, state }: RoutesProps) {
 	const fetcher = useFetcher();
 
 	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet } = routes.reduce(
+	const { exit, subnet } = routes.reduce<{
+		exit: Route[];
+		subnet: Route[];
+	}>(
 		(acc, route) => {
 			if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
 				acc.exit.push(route);

app/routes/machines/machine.tsx

@@ -81,7 +81,11 @@ export default function Page() {
 	}
 
 	// This is much easier with Object.groupBy but it's too new for us
-	const { exit, subnet, subnetApproved } = routes.reduce(
+	const { exit, subnet, subnetApproved } = routes.reduce<{
+		exit: Route[];
+		subnet: Route[];
+		subnetApproved: Route[];
+	}>(
 		(acc, route) => {
 			if (route.prefix === '::/0' || route.prefix === '0.0.0.0/0') {
 				acc.exit.push(route);
@@ -133,7 +137,6 @@ export default function Page() {
 				</span>
 
 				<MenuOptions
-					className={cn('bg-ui-100 dark:bg-ui-800')}
 					machine={machine}
 					routes={routes}
 					users={users}

app/routes/users/overview.tsx

@@ -1,4 +1,9 @@
-import { type DataRef, DndContext, useDraggable, useDroppable } from '@dnd-kit/core';
+import {
+	DataRef,
+	DndContext,
+	useDraggable,
+	useDroppable,
+} from '@dnd-kit/core';
 import { PersonIcon } from '@primer/octicons-react';
 import type { ActionFunctionArgs, LoaderFunctionArgs } from 'react-router';
 import { useActionData, useLoaderData, useSubmit } from 'react-router';

app/routes/util/healthz.ts

@@ -22,5 +22,5 @@ export async function loader() {
 		}
 	}
 
-	return { status: 'OK' };
+	return data({ status: 'OK' });
 }

biome.json

@@ -21,7 +21,10 @@
 	"linter": {
 		"enabled": true,
 		"rules": {
-			"recommended": true
+			"recommended": true,
+			"style": {
+				"useImportType": "off"
+			}
 		}
 	},
 	"javascript": {