feat: add support for AAAA records

CHANGELOG.md

@@ -16,6 +16,7 @@
 - Added validation for machine renaming to prevent invalid submissions (closes [#192](https://github.com/tale/headplane/issues/192)).
 - Unmanaged (non-OIDC) users cannot have a role assigned to them so the menu option was disabled.
 - Support Docker container discovery through labels (via [#194](https://github.com/tale/headplane/pull/194)).
+- AAAA records are now supported on the DNS page (closes [#189](https://github.com/tale/headplane/issues/189)).
 
 ### 0.5.10 (April 4, 2025)
 - Fix an issue where other preferences to skip onboarding affected every user.

app/routes/dns/components/manage-records.tsx

@@ -38,8 +38,8 @@ export default function ManageRecords({ records, isDisabled }: Props) {
 									<div className="flex gap-4 items-center">
 										<p
 											className={cn(
-												'font-mono text-sm font-bold py-1 px-2 rounded-md',
-												'bg-headplane-100 dark:bg-headplane-700/30',
+												'font-mono text-sm font-bold py-1 px-2 rounded-md text-center',
+												'bg-headplane-100 dark:bg-headplane-700/30 min-w-12',
 											)}
 										>
 											{record.type}

app/routes/dns/dialogs/add-record.tsx

@@ -2,9 +2,10 @@ import { useMemo, useState } from 'react';
 import Code from '~/components/Code';
 import Dialog from '~/components/Dialog';
 import Input from '~/components/Input';
+import Select from '~/components/Select';
 
 interface Props {
-	records: { name: string; type: 'A' | string; value: string }[];
+	records: { name: string; type: 'A' | 'AAAA' | string; value: string }[];
 }
 
 export default function AddRecord({ records }: Props) {
@@ -29,7 +30,15 @@ export default function AddRecord({ records }: Props) {
 				</Dialog.Text>
 				<div className="flex flex-col gap-2 mt-4">
 					<input type="hidden" name="action_id" value="add_record" />
-					<input type="hidden" name="record_type" value="A" />
+					<Select
+						isRequired
+						label="Record Type"
+						name="record_type"
+						defaultInputValue="A"
+					>
+						<Select.Item key="A">A</Select.Item>
+						<Select.Item key="AAAA">AAAA</Select.Item>
+					</Select>
 					<Input
 						isRequired
 						label="Domain"