chore: cleanup and use aria components in places

app/routes/_data.machines._index/route.tsx

@@ -1,17 +1,13 @@
-
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from '@remix-run/node'
 import { useFetcher, useLoaderData } from '@remix-run/react'
-import clsx from 'clsx'
 import { Button, Tooltip, TooltipTrigger } from 'react-aria-components'
 
 import Code from '~/components/Code'
-import useModal from '~/components/Modal'
 import { type Machine } from '~/types'
+import { cn } from '~/utils/cn'
 import { getConfig, getContext } from '~/utils/config'
-import { del, pull } from '~/utils/headscale'
+import { del, post, pull } from '~/utils/headscale'
 import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
@@ -20,6 +16,7 @@ import MachineRow from './machine'
 export async function loader({ request }: LoaderFunctionArgs) {
 	const session = await getSession(request.headers.get('Cookie'))
 
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 	const data = await pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!)
 	const context = await getContext()
 
@@ -38,13 +35,6 @@ export async function loader({ request }: LoaderFunctionArgs) {
 }
 
 export async function action({ request }: ActionFunctionArgs) {
-	const data = await request.json() as { id?: string }
-	if (!data.id) {
-		return json({ message: 'No ID provided' }, {
-			status: 400
-		})
-	}
-
 	const session = await getSession(request.headers.get('Cookie'))
 	if (!session.has('hsApiKey')) {
 		return json({ message: 'Unauthorized' }, {
@@ -52,8 +42,43 @@ export async function action({ request }: ActionFunctionArgs) {
 		})
 	}
 
-	await del(`v1/node/${data.id}`, session.get('hsApiKey')!)
-	return json({ message: 'Machine removed' })
+	const data = await request.formData()
+	if (!data.has('_method') || !data.has('id')) {
+		return json({ message: 'No method or ID provided' }, {
+			status: 400
+		})
+	}
+
+	const id = String(data.get('id'))
+	const method = String(data.get('_method'))
+
+	switch (method) {
+	case 'delete': {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		await del(`v1/node/${id}`, session.get('hsApiKey')!)
+		return json({ message: 'Machine removed' })
+	}
+
+	case 'rename': {
+		if (!data.has('name')) {
+			return json({ message: 'No name provided' }, {
+				status: 400
+			})
+		}
+
+		const name = String(data.get('name'))
+
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		await post(`v1/node/${id}/rename/${name}`, session.get('hsApiKey')!)
+		return json({ message: 'Machine renamed' })
+	}
+
+	default: {
+		return json({ message: 'Invalid method' }, {
+			status: 400
+		})
+	}
+	}
 }
 
 export default function Page() {
@@ -61,11 +86,8 @@ export default function Page() {
 	const data = useLoaderData<typeof loader>()
 	const fetcher = useFetcher()
 
-	const { Modal, open } = useModal()
-
 	return (
 		<>
-			{Modal}
 			<h1 className='text-2xl font-medium mb-4'>Machines</h1>
 			<table className='table-auto w-full rounded-lg'>
 				<thead className='text-gray-500 dark:text-gray-400'>
@@ -79,7 +101,7 @@ export default function Page() {
 										<Button>
 											<InformationCircleIcon className='w-4 h-4 text-gray-400'/>
 										</Button>
-										<Tooltip className={clsx(
+										<Tooltip className={cn(
 											'text-sm max-w-xs p-2 rounded-lg mb-2',
 											'bg-white dark:bg-zinc-800',
 											'border border-gray-200 dark:border-zinc-700'
@@ -99,7 +121,7 @@ export default function Page() {
 						<th className='pb-2'>Last Seen</th>
 					</tr>
 				</thead>
-				<tbody className={clsx(
+				<tbody className={cn(
 					'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
 					'border-t border-zinc-200 dark:border-zinc-700'
 				)}
@@ -110,7 +132,6 @@ export default function Page() {
 							// Typescript isn't smart enough yet
 							machine={machine as unknown as Machine}
 							fetcher={fetcher}
-							open={open}
 							magic={data.magic}
 						/>
 					))}