feat: add support for split dns

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

@@ -1,14 +1,8 @@
 import { type ActionFunctionArgs } from '@remix-run/node'
-import { json, useFetcher, useLoaderData } from '@remix-run/react'
-import { useState } from 'react'
-import { Button, Input } from 'react-aria-components'
+import { json, useLoaderData } from '@remix-run/react'
 
 import Code from '~/components/Code'
 import Notice from '~/components/Notice'
-import Spinner from '~/components/Spinner'
-import Switch from '~/components/Switch'
-import TableList from '~/components/TableList'
-import { cn } from '~/utils/cn'
 import { loadContext } from '~/utils/config/headplane'
 import { loadConfig, patchConfig } from '~/utils/config/headscale'
 import { restartHeadscale } from '~/utils/docker'
@@ -17,6 +11,7 @@ import { useLiveData } from '~/utils/useLiveData'
 
 import Domains from './domains'
 import MagicModal from './magic'
+import Nameservers from './nameservers'
 import RenameModal from './rename'
 
 // We do not want to expose every config value
@@ -68,9 +63,13 @@ export async function action({ request }: ActionFunctionArgs) {
 export default function Page() {
 	useLiveData({ interval: 5000 })
 	const data = useLoaderData<typeof loader>()
-	const fetcher = useFetcher()
-	const [localOverride, setLocalOverride] = useState(data.overrideLocal)
-	const [ns, setNs] = useState('')
+
+	const allNs: Record<string, string[]> = {}
+	for (const key of Object.keys(data.splitDns)) {
+		allNs[key] = data.splitDns[key]
+	}
+
+	allNs.global = data.nameservers
 
 	return (
 		<div className="flex flex-col gap-16 max-w-screen-lg">
@@ -82,113 +81,11 @@ export default function Page() {
 					</Notice>
 					)}
 			<RenameModal name={data.baseDomain} disabled={!data.config.write} />
-			<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">
-					Set the nameservers used by devices on the Tailnet
-					to resolve DNS queries.
-				</p>
-				<div className="mt-4">
-					<div className="flex items-center justify-between mb-2">
-						<h2 className="text-md font-medium opacity-80">
-							Global Nameservers
-						</h2>
-						<div className="flex gap-2 items-center">
-							<span className="text-sm opacity-50">
-								Override local DNS
-							</span>
-							<Switch
-								label="Override local DNS"
-								defaultSelected={localOverride}
-								isDisabled={!data.config.write}
-								onChange={() => {
-									fetcher.submit({
-										// eslint-disable-next-line @typescript-eslint/naming-convention
-										'dns_config.override_local_dns': !localOverride,
-									}, {
-										method: 'PATCH',
-										encType: 'application/json',
-									})
-
-									setLocalOverride(!localOverride)
-								}}
-							/>
-						</div>
-					</div>
-					<TableList>
-						{data.nameservers.map((ns, index) => (
-							// eslint-disable-next-line react/no-array-index-key
-							<TableList.Item key={index}>
-								<p className="font-mono text-sm">{ns}</p>
-								<Button
-									className={cn(
-										'text-sm',
-										'text-red-600 dark:text-red-400',
-										'hover:text-red-700 dark:hover:text-red-300',
-										!data.config.write && 'opacity-50 cursor-not-allowed',
-									)}
-									isDisabled={!data.config.write}
-									onPress={() => {
-										fetcher.submit({
-											// eslint-disable-next-line @typescript-eslint/naming-convention
-											'dns_config.nameservers': data.nameservers.filter((_, index_) => index_ !== index),
-										}, {
-											method: 'PATCH',
-											encType: 'application/json',
-										})
-									}}
-								>
-									Remove
-								</Button>
-							</TableList.Item>
-						))}
-						{data.config.write
-							? (
-								<TableList.Item>
-									<Input
-										type="text"
-										className="font-mono text-sm bg-transparent w-full mr-2"
-										placeholder="Nameserver"
-										value={ns}
-										onChange={(event) => {
-											setNs(event.target.value)
-										}}
-									/>
-									{fetcher.state === 'idle'
-										? (
-											<Button
-												className={cn(
-													'text-sm font-semibold',
-													'text-blue-600 dark:text-blue-400',
-													'hover:text-blue-700 dark:hover:text-blue-300',
-													ns.length === 0 && 'opacity-50 cursor-not-allowed',
-												)}
-												isDisabled={ns.length === 0}
-												onPress={() => {
-													fetcher.submit({
-													// eslint-disable-next-line @typescript-eslint/naming-convention
-														'dns_config.nameservers': [...data.nameservers, ns],
-													}, {
-														method: 'PATCH',
-														encType: 'application/json',
-													})
-
-													setNs('')
-												}}
-											>
-												Add
-											</Button>
-											)
-										: (
-											<Spinner className="w-3 h-3 mr-0" />
-											)}
-								</TableList.Item>
-								)
-							: undefined}
-					</TableList>
-					{/* TODO: Split DNS and Custom A Records */}
-				</div>
-			</div>
+			<Nameservers
+				nameservers={allNs}
+				override={data.overrideLocal}
+				isDisabled={!data.config.write}
+			/>
 
 			<Domains
 				baseDomain={data.magicDns ? data.baseDomain : undefined}