feat: completely nuke headlessui and consolidate to aria

app/routes/_data.acls._index/editor.tsx

@@ -6,10 +6,10 @@ import CodeMirror from '@uiw/react-codemirror'
 import clsx from 'clsx'
 import { useEffect, useMemo, useState } from 'react'
 import CodeMirrorMerge from 'react-codemirror-merge'
-import { toast } from 'react-hot-toast/headless'
 
 import Button from '~/components/Button'
 import Spinner from '~/components/Spinner'
+import { toast } from '~/components/Toaster'
 
 import Fallback from './fallback'
 
@@ -48,28 +48,24 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 		<>
 			<div className={clsx(
 				'border border-gray-200 dark:border-gray-700',
-				'rounded-b-lg rounded-tr-lg mb-2 overflow-hidden'
+				'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden'
 			)}
 			>
-				{loading ? (
-					<Fallback acl={acl} where='client'/>
-				) : (
-					mode === 'edit' ? (
-						<CodeMirror
-							value={acl}
-							className='h-editor text-sm'
-							theme={light ? githubLight : githubDark}
-							extensions={[aclType]}
-							readOnly={!data.hasAclWrite}
-							onChange={value => {
-								setAcl(value)
-							}}
-						/>
+				<div className='overflow-y-scroll h-editor text-sm'>
+					{loading ? (
+						<Fallback acl={acl} where='client'/>
 					) : (
-						<div
-							className='overflow-y-scroll'
-							style={{ height: 'calc(100vh - 20rem)' }}
-						>
+						mode === 'edit' ? (
+							<CodeMirror
+								value={acl}
+								theme={light ? githubLight : githubDark}
+								extensions={[aclType]}
+								readOnly={!data.hasAclWrite}
+								onChange={value => {
+									setAcl(value)
+								}}
+							/>
+						) : (
 							<CodeMirrorMerge
 								theme={light ? githubLight : githubDark}
 								orientation='a-b'
@@ -85,9 +81,9 @@ export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
 									extensions={[aclType]}
 								/>
 							</CodeMirrorMerge>
-						</div>
-					)
-				)}
+						)
+					)}
+				</div>
 			</div>
 
 			<Button

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

@@ -1,13 +1,12 @@
-import { Tab } from '@headlessui/react'
 import { BeakerIcon, CubeTransparentIcon, EyeIcon, PencilSquareIcon } from '@heroicons/react/24/outline'
 import { type ActionFunctionArgs, json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
-import clsx from 'clsx'
 import { useState } from 'react'
-import { Fragment } from 'react/jsx-runtime'
+import { Tab, TabList, TabPanel, Tabs } from 'react-aria-components'
 import { ClientOnly } from 'remix-utils/client-only'
 
 import Notice from '~/components/Notice'
+import { cn } from '~/utils/cn'
 import { getAcl, getContext, patchAcl } from '~/utils/config'
 import { sighupHeadscale } from '~/utils/docker'
 import { getSession } from '~/utils/sessions'
@@ -87,100 +86,80 @@ export default function Page() {
 				</a>
 			</p>
 
-			<Tab.Group>
-				<Tab.List className={clsx(
+			<Tabs>
+				<TabList className={cn(
 					'flex border-t border-gray-200 dark:border-gray-700',
 					'w-fit rounded-t-lg overflow-hidden',
 					'text-gray-400 dark:text-gray-500'
 				)}
 				>
-					<Tab as={Fragment}>
-						{({ selected }) => (
-							<button
-								type='button'
-								className={clsx(
-									'px-4 py-2 rounded-tl-lg',
-									'focus:outline-none flex items-center gap-2',
-									'border-l border-gray-200 dark:border-gray-700',
-									selected ? 'text-gray-900 dark:text-gray-100' : ''
-								)}
-							>
-								<PencilSquareIcon className='w-5 h-5'/>
-								<p>
-									Edit file
-								</p>
-							</button>
+					<Tab
+						id='edit'
+						className={({ isSelected }) => cn(
+							'px-4 py-2 rounded-tl-lg',
+							'focus:outline-none flex items-center gap-2',
+							'border-x border-gray-200 dark:border-gray-700',
+							isSelected ? 'text-gray-900 dark:text-gray-100' : ''
 						)}
+					>
+						<PencilSquareIcon className='w-5 h-5'/>
+						<p>Edit file</p>
 					</Tab>
-					<Tab as={Fragment}>
-						{({ selected }) => (
-							<button
-								type='button'
-								className={clsx(
-									'px-4 py-2',
-									'focus:outline-none flex items-center gap-2',
-									'border-x border-gray-200 dark:border-gray-700',
-									selected ? 'text-gray-900 dark:text-gray-100' : ''
-								)}
-							>
-								<EyeIcon className='w-5 h-5'/>
-								<p>
-									Preview changes
-								</p>
-							</button>
+					<Tab
+						id='diff'
+						className={({ isSelected }) => cn(
+							'px-4 py-2',
+							'focus:outline-none flex items-center gap-2',
+							'border-x border-gray-200 dark:border-gray-700',
+							isSelected ? 'text-gray-900 dark:text-gray-100' : ''
 						)}
+					>
+						<EyeIcon className='w-5 h-5'/>
+						<p>Preview changes</p>
 					</Tab>
-					<Tab as={Fragment}>
-						{({ selected }) => (
-							<button
-								type='button'
-								className={clsx(
-									'px-4 py-2 rounded-tr-lg',
-									'focus:outline-none flex items-center gap-2',
-									'border-r border-gray-200 dark:border-gray-700',
-									selected ? 'text-gray-900 dark:text-gray-100' : ''
-								)}
-							>
-								<BeakerIcon className='w-5 h-5'/>
-								<p>
-									Preview rules
-								</p>
-							</button>
+					<Tab
+						id='preview'
+						className={({ isSelected }) => cn(
+							'px-4 py-2 rounded-tr-lg',
+							'focus:outline-none flex items-center gap-2',
+							'border-x border-gray-200 dark:border-gray-700',
+							isSelected ? 'text-gray-900 dark:text-gray-100' : ''
 						)}
+					>
+						<BeakerIcon className='w-5 h-5'/>
+						<p>Preview rules</p>
 					</Tab>
-				</Tab.List>
-				<Tab.Panels>
-					<Tab.Panel>
-						<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
-							{() => (
-								<Editor data={data} acl={acl} setAcl={setAcl} mode='edit'/>
-							)}
-						</ClientOnly>
-					</Tab.Panel>
-					<Tab.Panel>
-						<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
-							{() => (
-								<Editor data={data} acl={acl} setAcl={setAcl} mode='diff'/>
-							)}
-						</ClientOnly>
-					</Tab.Panel>
-					<Tab.Panel>
-						<div
-							className={clsx(
-								'border border-gray-200 dark:border-gray-700',
-								'rounded-b-lg rounded-tr-lg mb-4 overflow-hidden',
-								'p-16 flex flex-col items-center justify-center'
-							)}
-						>
-							<CubeTransparentIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
-							<p className='w-1/2 text-center mt-4'>
-								The Preview rules is very much still a work in progress.
-								It is a bit complicated to implement right now but hopefully it will be available soon.
-							</p>
-						</div>
-					</Tab.Panel>
-				</Tab.Panels>
-			</Tab.Group>
+				</TabList>
+				<TabPanel id='edit'>
+					<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
+						{() => (
+							<Editor data={data} acl={acl} setAcl={setAcl} mode='edit'/>
+						)}
+					</ClientOnly>
+				</TabPanel>
+				<TabPanel id='diff'>
+					<ClientOnly fallback={<Fallback acl={acl} where='server'/>}>
+						{() => (
+							<Editor data={data} acl={acl} setAcl={setAcl} mode='diff'/>
+						)}
+					</ClientOnly>
+				</TabPanel>
+				<TabPanel id='preview'>
+					<div
+						className={cn(
+							'border border-gray-200 dark:border-gray-700',
+							'rounded-b-lg rounded-tr-lg mb-4 overflow-hidden',
+							'p-16 flex flex-col items-center justify-center'
+						)}
+					>
+						<CubeTransparentIcon className='w-24 h-24 text-gray-300 dark:text-gray-500'/>
+						<p className='w-1/2 text-center mt-4'>
+							The Preview rules is very much still a work in progress.
+							It is a bit complicated to implement right now but hopefully it will be available soon.
+						</p>
+					</div>
+				</TabPanel>
+			</Tabs>
 		</div>
 	)
 }

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

@@ -19,7 +19,7 @@ export default function Modal({ isEnabled, disabled }: Properties) {
 				isDisabled={disabled}
 				className={cn(
 					'w-fit text-sm rounded-lg px-4 py-2',
-					'bg-gray-700 dark:bg-gray-800 text-white',
+					'bg-main-700 dark:bg-main-800 text-white',
 					disabled && 'opacity-50 cursor-not-allowed'
 				)}
 			>

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

@@ -47,7 +47,7 @@ export default function Modal({ name, disabled }: Properties) {
 					isDisabled={disabled}
 					className={cn(
 						'w-fit text-sm rounded-lg px-4 py-2',
-						'bg-gray-700 dark:bg-gray-800 text-white',
+						'bg-main-700 dark:bg-main-800 text-white',
 						disabled && 'opacity-50 cursor-not-allowed'
 					)}
 				>

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

@@ -1,7 +1,5 @@
-import { Switch } from '@headlessui/react'
 import { type ActionFunctionArgs } from '@remix-run/node'
 import { json, useFetcher, useLoaderData } from '@remix-run/react'
-import clsx from 'clsx'
 import { useState } from 'react'
 
 import Button from '~/components/Button'
@@ -9,6 +7,7 @@ import Code from '~/components/Code'
 import Input from '~/components/Input'
 import Notice from '~/components/Notice'
 import Spinner from '~/components/Spinner'
+import Switch from '~/components/Switch'
 import TableList from '~/components/TableList'
 import { getConfig, getContext, patchConfig } from '~/utils/config'
 import { restartHeadscale } from '~/utils/docker'
@@ -97,12 +96,9 @@ export default function Page() {
 								Override local DNS
 							</span>
 							<Switch
-								checked={localOverride}
-								disabled={!data.hasConfigWrite}
-								className={clsx(
-									localOverride ? 'bg-gray-800 dark:bg-gray-600' : 'bg-gray-200 dark:bg-gray-400',
-									'relative inline-flex h-4 w-9 items-center rounded-full'
-								)}
+								label='Override local DNS'
+								defaultSelected={localOverride}
+								isDisabled={!data.hasConfigWrite}
 								onChange={() => {
 									fetcher.submit({
 										// eslint-disable-next-line @typescript-eslint/naming-convention
@@ -114,15 +110,7 @@ export default function Page() {
 
 									setLocalOverride(!localOverride)
 								}}
-							>
-								<span className='sr-only'>Override local DNS</span>
-								<span
-									className={clsx(
-										localOverride ? 'translate-x-6' : 'translate-x-1',
-										'inline-block h-2 w-2 transform rounded-full bg-white transition'
-									)}
-								/>
-							</Switch>
+							/>
 						</div>
 					</div>
 					<TableList>

app/routes/_data.tsx

@@ -1,6 +1,6 @@
 import { Cog8ToothIcon, CpuChipIcon, GlobeAltIcon, LockClosedIcon, ServerStackIcon, UserCircleIcon, UsersIcon } from '@heroicons/react/24/outline'
 import { type LoaderFunctionArgs, redirect } from '@remix-run/node'
-import { Form, Outlet, useLoaderData, useRouteError } from '@remix-run/react'
+import { Form, Outlet, useLoaderData } from '@remix-run/react'
 
 import { ErrorPopup } from '~/components/Error'
 import Menu from '~/components/Menu'
@@ -43,9 +43,10 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 export default function Layout() {
 	const data = useLoaderData<typeof loader>()
+
 	return (
 		<>
-			<header className='mb-6 bg-gray-800 text-white dark:bg-gray-700'>
+			<header className='mb-6 bg-main-700 dark:bg-main-800 text-white'>
 				<nav className='container mx-auto'>
 					<div className='flex items-center justify-between mb-8 pt-4'>
 						<div className='flex items-center gap-x-2'>
@@ -71,7 +72,7 @@ export default function Layout() {
 										<p className='font-bold'>{data.user?.name}</p>
 										<p>{data.user?.email}</p>
 									</Menu.Item>
-									<Menu.Item className='text-red-700 cursor-pointer'>
+									<Menu.Item className='text-red-500 dark:text-red-400'>
 										<Form method='POST' action='/logout'>
 											<button type='submit' className='w-full text-right'>
 												Logout
@@ -104,15 +105,9 @@ export default function Layout() {
 }
 
 export function ErrorBoundary() {
-	const data = useLoaderData<typeof loader>()
-	const error = useRouteError()
-	if (!data) {
-		throw error
-	}
-
 	return (
 		<>
-			<header className='mb-16 bg-gray-800 text-white dark:bg-gray-700'>
+			<header className='mb-16 bg-main-700 dark:bg-main-800 text-white'>
 				<nav className='container mx-auto'>
 					<div className='flex items-center gap-x-2 mb-8 pt-4'>
 						<CpuChipIcon className='w-8 h-8'/>
@@ -121,13 +116,9 @@ export function ErrorBoundary() {
 					<div className='flex items-center gap-x-4'>
 						<TabLink to='/machines' name='Machines' icon={<ServerStackIcon className='w-5 h-5'/>}/>
 						<TabLink to='/users' name='Users' icon={<UsersIcon className='w-5 h-5'/>}/>
-						{data.hasAcl ? <TabLink to='/acls' name='Access Control' icon={<LockClosedIcon className='w-5 h-5'/>}/> : undefined}
-						{data.hasConfig ? (
-							<>
-								<TabLink to='/dns' name='DNS' icon={<GlobeAltIcon className='w-5 h-5'/>}/>
-								<TabLink to='/settings' name='Settings' icon={<Cog8ToothIcon className='w-5 h-5'/>}/>
-							</>
-						) : undefined}
+						<TabLink to='/acls' name='Access Control' icon={<LockClosedIcon className='w-5 h-5'/>}/>
+						<TabLink to='/dns' name='DNS' icon={<GlobeAltIcon className='w-5 h-5'/>}/>
+						<TabLink to='/settings' name='Settings' icon={<Cog8ToothIcon className='w-5 h-5'/>}/>
 					</div>
 				</nav>
 			</header>