feat: switch to new dialog across all code

app/routes/machines/dialogs/new.tsx

@@ -1,16 +1,15 @@
-import { Form, useFetcher, Link } from 'react-router';
-import { Dispatch, SetStateAction, useState, useEffect } from 'react';
-import { PlusIcon, ServerIcon, KeyIcon } from '@primer/octicons-react';
-import { cn } from '~/utils/cn';
+import { KeyIcon, ServerIcon } from '@primer/octicons-react';
+import { useEffect, useState } from 'react';
+import { Link, useFetcher } from 'react-router';
 
 import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
-import TextField from '~/components/TextField';
-import Select from '~/components/Select';
 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 { Machine, type User } from '~/types';
+import type { User } from '~/types';
 
 export interface NewProps {
 	server: string;
@@ -19,7 +18,7 @@ export interface NewProps {
 
 export default function New(data: NewProps) {
 	const fetcher = useFetcher<{ success?: boolean }>();
-	const mkeyState = useState(false);
+	const [pushDialog, setPushDialog] = useState(false);
 	const [mkey, setMkey] = useState('');
 	const [user, setUser] = useState('');
 	const [toasted, setToasted] = useState(false);
@@ -36,78 +35,50 @@ export default function New(data: NewProps) {
 		}
 
 		setToasted(true);
-	}, [fetcher.data, toasted, mkey]);
+	}, [fetcher.data, toasted]);
 
 	return (
 		<>
-			<Dialog>
-				<Dialog.Panel control={mkeyState}>
-					{(close) => (
-						<>
-							<Dialog.Title>Register Machine Key</Dialog.Title>
-							<Dialog.Text className="mb-4">
-								The machine key is given when you run{' '}
-								<Code isCopyable>
-									tailscale up --login-server=
-									{data.server}
-								</Code>{' '}
-								on your device.
-							</Dialog.Text>
-							<fetcher.Form
-								method="POST"
-								onSubmit={(e) => {
-									fetcher.submit(e.currentTarget);
-									close();
-								}}
-							>
-								<input type="hidden" name="_method" value="register" />
-								<input type="hidden" name="id" value="_" />
-								<TextField
-									label="Machine Key"
-									placeholder="mkey:ff....."
-									name="mkey"
-									state={[mkey, setMkey]}
-									className="my-2 font-mono"
-								/>
-								<Select
-									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>
-								<Dialog.Gutter>
-									<Dialog.Action variant="cancel" onPress={close}>
-										Cancel
-									</Dialog.Action>
-									<Dialog.Action
-										variant="confirm"
-										isDisabled={
-											!mkey || !mkey.trim().startsWith('mkey:') || !user
-										}
-									>
-										{fetcher.state === 'idle' ? undefined : (
-											<Spinner className="w-3 h-3" />
-										)}
-										Register
-									</Dialog.Action>
-								</Dialog.Gutter>
-							</fetcher.Form>
-						</>
-					)}
+			<Dialog isOpen={pushDialog} onOpenChange={setPushDialog}>
+				<Dialog.Panel
+					isDisabled={!mkey || !mkey.trim().startsWith('mkey:') || !user}
+				>
+					<Dialog.Title>Register Machine Key</Dialog.Title>
+					<Dialog.Text className="mb-4">
+						The machine key is given when you run{' '}
+						<Code isCopyable>
+							tailscale up --login-server=
+							{data.server}
+						</Code>{' '}
+						on your device.
+					</Dialog.Text>
+					<input type="hidden" name="_method" value="register" />
+					<input type="hidden" name="id" value="_" />
+					<TextField
+						label="Machine Key"
+						placeholder="mkey:ff....."
+						name="mkey"
+						state={[mkey, setMkey]}
+						className="my-2 font-mono"
+					/>
+					<Select
+						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>
 				</Dialog.Panel>
 			</Dialog>
 			<Menu>
-				<Menu.Button variant="heavy">
-					Add Device
-				</Menu.Button>
+				<Menu.Button variant="heavy">Add Device</Menu.Button>
 				<Menu.Items>
-					<Menu.ItemButton control={mkeyState}>
+					<Menu.ItemButton onPress={() => setPushDialog(true)}>
 						<ServerIcon className="w-4 h-4 mr-2" />
 						Register Machine Key
 					</Menu.ItemButton>