feat: make the config patchable

app/routes/_data.dns._index/rename.tsx

@@ -1,5 +1,7 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+/* eslint-disable unicorn/no-keyword-prefix */
 import { Dialog } from '@headlessui/react'
-import { Form } from '@remix-run/react'
+import { useFetcher } from '@remix-run/react'
 import { useState } from 'react'
 
 type Properties = {
@@ -8,6 +10,8 @@ type Properties = {
 
 export default function Modal({ name }: Properties) {
 	const [isOpen, setIsOpen] = useState(false)
+	const [newName, setNewName] = useState(name)
+	const fetcher = useFetcher()
 
 	return (
 		<>
@@ -37,19 +41,31 @@ export default function Modal({ name }: Properties) {
 							of unexpected behavior and may break existing devices
 							in your tailnet.
 						</Dialog.Description>
-						<Form method='PATCH'>
-							<input
-								type='text'
-								className='border rounded-lg p-2 w-full mt-4'
-								placeholder={name}
-							/>
-							<button
-								type='button'
-								className='rounded-lg py-2 bg-gray-800 text-white w-full mt-2'
-							>
-								Rename
-							</button>
-						</Form>
+						<input
+							type='text'
+							className='border rounded-lg p-2 w-full mt-4'
+							value={newName}
+							onChange={event => {
+								setNewName(event.target.value)
+							}}
+						/>
+						<button
+							type='submit'
+							className='rounded-lg py-2 bg-gray-800 text-white w-full mt-2'
+							onClick={() => {
+								fetcher.submit({
+									'dns_config.base_domain': newName
+								}, {
+									method: 'PATCH',
+									encType: 'application/json'
+								})
+
+								setIsOpen(false)
+								setNewName(name)
+							}}
+						>
+							Rename
+						</button>
 					</Dialog.Panel>
 				</div>
 			</Dialog>

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

@@ -1,9 +1,10 @@
 import { Switch } from '@headlessui/react'
-import { useLoaderData } from '@remix-run/react'
+import { type ActionFunctionArgs } from '@remix-run/node'
+import { json, useLoaderData } from '@remix-run/react'
 import clsx from 'clsx'
 import { useState } from 'react'
 
-import { getConfig } from '~/utils/config'
+import { getConfig, patchConfig } from '~/utils/config'
 
 import MagicModal from './magic'
 import RenameModal from './rename'
@@ -25,6 +26,12 @@ export async function loader() {
 	return dns
 }
 
+export async function action({ request }: ActionFunctionArgs) {
+	const data = await request.json() as Record<string, unknown>
+	await patchConfig(data)
+	return json({ success: true })
+}
+
 export default function Page() {
 	const data = useLoaderData<typeof loader>()
 	const [localOverride, setLocalOverride] = useState(data.overrideLocal)