fix: switch to new aria components

app/routes/machines/dialogs/move.tsx

@@ -26,9 +26,7 @@ export default function Move({ machine, users, isOpen, setIsOpen }: MoveProps) {
 					defaultSelectedKey={machine.user.id}
 				>
 					{users.map((user) => (
-						<Select.Item key={user.id} id={user.name}>
-							{user.name}
-						</Select.Item>
+						<Select.Item key={user.id}>{user.name}</Select.Item>
 					))}
 				</Select>
 			</Dialog.Panel>

app/routes/machines/dialogs/new.tsx

@@ -1,14 +1,11 @@
-import { KeyIcon, ServerIcon } from '@primer/octicons-react';
-import { useEffect, useState } from 'react';
-import { Link, useFetcher } from 'react-router';
-
+import { Computer, KeySquare } from 'lucide-react';
+import { useState } from 'react';
+import { useNavigate } from 'react-router';
 import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
+import Input from '~/components/Input';
 import Menu from '~/components/Menu';
 import Select from '~/components/Select';
-import Spinner from '~/components/Spinner';
-import TextField from '~/components/TextField';
-import { toast } from '~/components/Toaster';
 import type { User } from '~/types';
 
 export interface NewProps {
@@ -17,32 +14,14 @@ export interface NewProps {
 }
 
 export default function New(data: NewProps) {
-	const fetcher = useFetcher<{ success?: boolean }>();
 	const [pushDialog, setPushDialog] = useState(false);
 	const [mkey, setMkey] = useState('');
-	const [user, setUser] = useState('');
-	const [toasted, setToasted] = useState(false);
-
-	useEffect(() => {
-		if (!fetcher.data || toasted) {
-			return;
-		}
-
-		if (fetcher.data.success) {
-			toast('Registered new machine');
-		} else {
-			toast('Failed to register machine due to an invalid key');
-		}
-
-		setToasted(true);
-	}, [fetcher.data, toasted]);
+	const navigate = useNavigate();
 
 	return (
 		<>
 			<Dialog isOpen={pushDialog} onOpenChange={setPushDialog}>
-				<Dialog.Panel
-					isDisabled={!mkey || !mkey.trim().startsWith('mkey:') || !user}
-				>
+				<Dialog.Panel isDisabled={!mkey.trim().startsWith('mkey:')}>
 					<Dialog.Title>Register Machine Key</Dialog.Title>
 					<Dialog.Text className="mb-4">
 						The machine key is given when you run{' '}
@@ -54,41 +33,55 @@ export default function New(data: NewProps) {
 					</Dialog.Text>
 					<input type="hidden" name="_method" value="register" />
 					<input type="hidden" name="id" value="_" />
-					<TextField
+					<Input
+						isRequired
 						label="Machine Key"
 						placeholder="mkey:ff....."
+						validationBehavior="native"
 						name="mkey"
-						state={[mkey, setMkey]}
-						className="my-2 font-mono"
+						onChange={setMkey}
 					/>
 					<Select
+						isRequired
 						label="Owner"
 						name="user"
 						placeholder="Select a user"
-						state={[user, setUser]}
 					>
 						{data.users.map((user) => (
-							<Select.Item key={user.id} id={user.name}>
-								{user.name}
-							</Select.Item>
+							<Select.Item key={user.id}>{user.name}</Select.Item>
 						))}
 					</Select>
 				</Dialog.Panel>
 			</Dialog>
 			<Menu>
 				<Menu.Button variant="heavy">Add Device</Menu.Button>
-				<Menu.Items>
-					<Menu.ItemButton onPress={() => setPushDialog(true)}>
-						<ServerIcon className="w-4 h-4 mr-2" />
-						Register Machine Key
-					</Menu.ItemButton>
-					<Menu.ItemButton>
-						<Link to="/settings/auth-keys">
-							<KeyIcon className="w-4 h-4 mr-2" />
-							Generate Pre-auth Key
-						</Link>
-					</Menu.ItemButton>
-				</Menu.Items>
+				<Menu.Panel
+					onAction={(key) => {
+						if (key === 'register') {
+							setPushDialog(true);
+							return;
+						}
+
+						if (key === 'pre-auth') {
+							navigate('/settings/auth-keys');
+						}
+					}}
+				>
+					<Menu.Section>
+						<Menu.Item key="register" textValue="Register Machine Key">
+							<div className="flex items-center gap-x-3">
+								<Computer className="w-4" />
+								Register Machine Key
+							</div>
+						</Menu.Item>
+						<Menu.Item key="pre-auth" textValue="Generate Pre-auth Key">
+							<div className="flex items-center gap-x-3">
+								<KeySquare className="w-4" />
+								Generate Pre-auth Key
+							</div>
+						</Menu.Item>
+					</Menu.Section>
+				</Menu.Panel>
 			</Menu>
 		</>
 	);

app/routes/machines/dialogs/rename.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
-import TextField from '~/components/TextField';
+import Input from '~/components/Input';
 import type { Machine } from '~/types';
 
 interface RenameProps {
@@ -29,11 +29,10 @@ export default function Rename({
 				</Dialog.Text>
 				<input type="hidden" name="_method" value="rename" />
 				<input type="hidden" name="id" value={machine.id} />
-				<TextField
+				<Input
 					label="Machine name"
 					placeholder="Machine name"
 					name="name"
-					className="my-2"
 					defaultValue={machine.givenName}
 					onChange={setName}
 				/>