feat: add various machine operations

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

@@ -0,0 +1,92 @@
+import { type FetcherWithComponents } from '@remix-run/react'
+import { type Dispatch, type SetStateAction } from 'react'
+
+import Dialog from '~/components/Dialog'
+import Switch from '~/components/Switch'
+import { type Machine, type Route } from '~/types'
+import { cn } from '~/utils/cn'
+
+type RoutesProperties = {
+	readonly machine: Machine;
+	readonly routes: Route[];
+	readonly fetcher: FetcherWithComponents<unknown>;
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+// TODO: Support deleting routes
+export default function Routes({ machine, routes, fetcher, state }: RoutesProperties) {
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Edit route settings of {machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							Connect to devices you can&apos;t install Tailscale on
+							by advertising IP ranges as subnet routes.
+						</Dialog.Text>
+						<div className={cn(
+							'rounded-lg overflow-y-auto my-2',
+							'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
+							'border border-zinc-200 dark:border-zinc-700'
+						)}
+						>
+							{routes.length === 0 ? (
+								<div
+									className={cn(
+										'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
+										'items-center justify-center',
+										'text-ui-600 dark:text-ui-300'
+									)}
+								>
+									<p>
+										No routes are advertised on this machine.
+									</p>
+								</div>
+							) : undefined}
+							{routes.map(route => (
+								<div
+									key={route.node.id}
+									className={cn(
+										'flex py-2 px-4 bg-ui-100 dark:bg-ui-800',
+										'items-center justify-between'
+									)}
+								>
+									<p>
+										{route.prefix}
+									</p>
+									<Switch
+										defaultSelected={route.enabled}
+										label='Enabled'
+										onChange={checked => {
+											const form = new FormData()
+											form.set('id', machine.id)
+											form.set('_method', 'routes')
+											form.set('route', route.id)
+
+											form.set('enabled', String(checked))
+											fetcher.submit(form, {
+												method: 'POST'
+											})
+										}}
+									/>
+								</div>
+							))}
+						</div>
+						<div className='mt-6 flex justify-end gap-2 mt-6'>
+							<Dialog.Action
+								variant='cancel'
+								isDisabled={fetcher.state === 'submitting'}
+								onPress={close}
+							>
+								Close
+							</Dialog.Action>
+						</div>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}