feat: restart docker container

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

@@ -30,7 +30,7 @@ export default function Domains({ baseDomain, searchDomains }: Properties) {
 	const [activeId, setActiveId] = useState<number | string | null>(null)
 	const [localDomains, setLocalDomains] = useState(searchDomains)
 	const [newDomain, setNewDomain] = useState('')
-	const fetcher = useFetcher({ key: 'search-domains' })
+	const fetcher = useFetcher()
 
 	useEffect(() => {
 		setLocalDomains(searchDomains)
@@ -154,7 +154,7 @@ type DomainProperties = {
 }
 
 function Domain({ domain, id, localDomains, isDrag }: DomainProperties) {
-	const fetcher = useFetcher({ key: 'individual-domain' })
+	const fetcher = useFetcher()
 
 	const {
 		attributes,

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

@@ -2,6 +2,7 @@
 /* eslint-disable unicorn/no-keyword-prefix */
 import { Dialog } from '@headlessui/react'
 import { useFetcher } from '@remix-run/react'
+import clsx from 'clsx'
 import { useState } from 'react'
 
 type Properties = {
@@ -14,7 +15,30 @@ export default function Modal({ name }: Properties) {
 	const fetcher = useFetcher()
 
 	return (
-		<>
+		<div className='flex flex-col w-2/3'>
+			<h1 className='text-2xl font-medium mb-4'>Tailnet Name</h1>
+			<p className='text-gray-700 dark:text-gray-300'>
+				This is the base domain name of your Tailnet.
+				Devices are accessible at
+				{' '}
+				<code className='bg-gray-100 dark:bg-zinc-700 p-0.5 rounded-md'>
+					[device].[user].{name}
+				</code>
+				{' '}
+				when Magic DNS is enabled.
+			</p>
+			<input
+				readOnly
+				className={clsx(
+					'my-4 px-3 py-2 border rounded-lg focus:ring-none w-2/3 font-mono text-sm',
+					'dark:bg-zinc-800 dark:text-white dark:border-zinc-700'
+				)}
+				type='text'
+				value={name}
+				onFocus={event => {
+					event.target.select()
+				}}
+			/>
 			<button
 				type='button'
 				className='rounded-lg px-3 py-2 bg-gray-800 text-white w-fit text-sm'
@@ -32,7 +56,7 @@ export default function Modal({ name }: Properties) {
 			>
 				<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
 				<div className='fixed inset-0 flex w-screen items-center justify-center'>
-					<Dialog.Panel className='bg-white rounded-lg p-4 w-full max-w-md'>
+					<Dialog.Panel className='bg-white rounded-lg p-4 w-full max-w-md dark:bg-zinc-800'>
 						<Dialog.Title className='text-lg font-bold'>
 							Rename {name}
 						</Dialog.Title>
@@ -43,7 +67,7 @@ export default function Modal({ name }: Properties) {
 						</Dialog.Description>
 						<input
 							type='text'
-							className='border rounded-lg p-2 w-full mt-4'
+							className='border rounded-lg p-2 w-full mt-4 dark:bg-zinc-700 dark:text-white dark:border-zinc-700'
 							value={newName}
 							onChange={event => {
 								setNewName(event.target.value)
@@ -69,6 +93,6 @@ export default function Modal({ name }: Properties) {
 					</Dialog.Panel>
 				</div>
 			</Dialog>
-		</>
+		</div>
 	)
 }

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

@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import { useState } from 'react'
 
 import { getConfig, patchConfig } from '~/utils/config'
+import { restartHeadscale } from '~/utils/docker'
 
 import Domains from './domains'
 import MagicModal from './magic'
@@ -29,42 +30,20 @@ export async function loader() {
 
 export async function action({ request }: ActionFunctionArgs) {
 	const data = await request.json() as Record<string, unknown>
-	console.log(data)
 	await patchConfig(data)
+	await restartHeadscale()
 	return json({ success: true })
 }
 
 export default function Page() {
 	const data = useLoaderData<typeof loader>()
-	const fetcher = useFetcher({ key: 'dns-page' })
+	const fetcher = useFetcher()
 	const [localOverride, setLocalOverride] = useState(data.overrideLocal)
 	const [ns, setNs] = useState('')
 
 	return (
 		<div className='flex flex-col gap-16 max-w-screen-lg'>
-			<div className='flex flex-col w-2/3'>
-				<h1 className='text-2xl font-medium mb-4'>Tailnet Name</h1>
-				<p className='text-gray-700 dark:text-gray-300'>
-					This is the base domain name of your Tailnet.
-					Devices are accessible at
-					{' '}
-					<code className='bg-gray-100 p-1 rounded-md'>
-						[device].[user].{data.baseDomain}
-					</code>
-					{' '}
-					when Magic DNS is enabled.
-				</p>
-				<input
-					readOnly
-					className='my-4 px-3 py-2 border rounded-lg focus:ring-none w-2/3 font-mono text-sm'
-					type='text'
-					value={data.baseDomain}
-					onFocus={event => {
-						event.target.select()
-					}}
-				/>
-				<RenameModal name={data.baseDomain}/>
-			</div>
+			<RenameModal name={data.baseDomain}/>
 			<div className='flex flex-col w-2/3'>
 				<h1 className='text-2xl font-medium mb-4'>Nameservers</h1>
 				<p className='text-gray-700 dark:text-gray-300'>