chore: update readme

CHANGELOG.md

@@ -0,0 +1,9 @@
+### 0.1.2 (May 1, 2024)
+
+- Added support for renaming, expiring, removing, and managing the routes of a machine.
+- Implemented an expiry check for machines which now reflect on the machine table.
+- Fixed an issue where `HEADSCALE_CONTAINER` was needed to start even without the Docker integration.
+- Removed the requirement for the root `API_KEY` unless OIDC was being used for authentication.
+- Switched to [React Aria](https://react-spectrum.adobe.com/react-aria/) for better accessibility support.
+- Cleaned up various different UI inconsistencies and copied components that could've been abstracted.
+- Added a changelog for any new versions going forward.

README.md

@@ -4,14 +4,13 @@
 ![Preview](/assets/main-preview.png)
 
 Headscale is a self-hosted version of the Tailscale control server, however, it currently lacks a first-party web UI.
-This is a relatively tiny Remix app that aims to provide a usable GUI for the Headscale server.
-It's still very early in it's development, however these are some of the features that are planned.
+Headplane aims to solve this issue by providing a GUI that can deeply integrate with the Headscale server.
+It's able to replicate nearly all of the functions of the official Tailscale SaaS UI, including:
 
-- [ ] Editable tags, machine names, users, etc
-- [x] ACL control through Docker integration
-- [x] OIDC based login for the web UI
-- [x] Automated API key regeneration
-- [x] Editable headscale configuration
+- Machine/Node expiry, network routing, name, and owner management
+- Access Control List (ACL) and tagging configuration
+- Support for OpenID Connect (OIDC) as a login provider
+- DNS and *safe* Headscale configuration management
 
 ## Deployment
 - If you run Headscale in a Docker container, see the [Advanced Deployment](/docs/Advanced-Integration.md) guide.

app/components/Attribute.tsx

@@ -1,5 +1,6 @@
 import { ClipboardIcon } from '@heroicons/react/24/outline'
-import toast from 'react-hot-toast/headless'
+
+import { toast } from './Toaster'
 
 type Properties = {
 	readonly name: string;

app/components/Dialog.tsx

@@ -0,0 +1,142 @@
+/* eslint-disable unicorn/no-keyword-prefix */
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
+import {
+	Button as AriaButton,
+	Dialog as AriaDialog,
+	DialogTrigger,
+	Heading as AriaHeading,
+	Modal,
+	ModalOverlay
+} from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+type ButtonProperties = Parameters<typeof AriaButton>[0] & {
+	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+function Button(properties: ButtonProperties) {
+	return (
+		<AriaButton
+			{...properties}
+			aria-label='Dialog'
+			className={cn(
+				'w-fit text-sm rounded-lg px-4 py-2',
+				'bg-main-700 dark:bg-main-800 text-white',
+				properties.isDisabled && 'opacity-50 cursor-not-allowed',
+				properties.className
+			)}
+			// If control is passed, set the state value
+			onPress={properties.control ? () => {
+				properties.control?.[1](true)
+			} : undefined}
+		/>
+	)
+}
+
+type ActionProperties = Parameters<typeof AriaButton>[0] & {
+	readonly variant: 'cancel' | 'confirm';
+}
+
+function Action(properties: ActionProperties) {
+	return (
+		<AriaButton
+			{...properties}
+			type={properties.variant === 'confirm' ? 'submit' : 'button'}
+			className={cn(
+				'px-4 py-2 rounded-lg',
+				properties.isDisabled && 'opacity-50 cursor-not-allowed',
+				properties.variant === 'cancel'
+					? 'text-ui-700 dark:text-ui-300'
+					: 'text-ui-300 dark:text-ui-300',
+				properties.variant === 'confirm'
+					? 'bg-main-700 dark:bg-main-700 pressed:bg-main-800 dark:pressed:bg-main-800'
+					: 'bg-ui-200 dark:bg-ui-800 pressed:bg-ui-300 dark:pressed:bg-ui-700',
+				properties.className
+			)}
+		/>
+	)
+}
+
+function Title(properties: Parameters<typeof AriaHeading>[0]) {
+	return (
+		<AriaHeading
+			{...properties}
+			slot='title'
+			className={cn(
+				'text-lg font-semibold leading-6 mb-5',
+				properties.className
+			)}
+		/>
+	)
+}
+
+function Text(properties: React.HTMLProps<HTMLParagraphElement>) {
+	return (
+		<p
+			{...properties}
+			className={cn(
+				'text-base leading-6 my-0',
+				properties.className
+			)}
+		/>
+	)
+}
+
+type PanelProperties = {
+	readonly children: (close: () => void) => ReactNode;
+	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+	readonly className?: string;
+}
+
+function Panel({ children, control, className }: PanelProperties) {
+	return (
+		<ModalOverlay
+			aria-hidden='true'
+			className={cn(
+				'fixed inset-0 h-screen w-screen z-50 bg-black/30',
+				'flex items-center justify-center dark:bg-black/70',
+				'entering:animate-in exiting:animate-out',
+				'entering:fade-in entering:duration-200 entering:ease-out',
+				'exiting:fade-out exiting:duration-100 exiting:ease-in',
+				className
+			)}
+			isOpen={control ? control[0] : undefined}
+			onOpenChange={control ? control[1] : undefined}
+		>
+			<Modal
+				className={cn(
+					'w-full max-w-md overflow-hidden rounded-xl p-4',
+					'bg-ui-50 dark:bg-ui-900 shadow-lg',
+					'entering:animate-in exiting:animate-out',
+					'dark:border dark:border-ui-700',
+					'entering:zoom-in-95 entering:ease-out entering:duration-200',
+					'exiting:zoom-out-95 exiting:ease-in exiting:duration-100'
+				)}
+			>
+				<AriaDialog role='alertdialog' className='outline-none relative'>
+					{({ close }) => children(close)}
+				</AriaDialog>
+			</Modal>
+		</ModalOverlay>
+	)
+}
+
+type DialogProperties = {
+	readonly children: ReactNode;
+	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+function Dialog({ children, control }: DialogProperties) {
+	if (control) {
+		return children
+	}
+
+	return (
+		<DialogTrigger>
+			{children}
+		</DialogTrigger>
+	)
+}
+
+export default Object.assign(Dialog, { Button, Title, Text, Panel, Action })

app/components/Dropdown.tsx

@@ -1,86 +0,0 @@
-import { Menu, type MenuButtonProps, Transition } from '@headlessui/react'
-import clsx from 'clsx'
-import { Fragment, type HTMLProps, type ReactNode } from 'react'
-
-type Properties = {
-	readonly children: ReactNode;
-	readonly button: ReactNode;
-	// eslint-disable-next-line unicorn/no-keyword-prefix
-	readonly className?: string;
-	readonly width?: string;
-}
-
-function Dropdown(properties: Properties) {
-	return (
-		<div className={clsx('relative', properties.className)}>
-			<Menu>
-				<Button className='flex flex-col items-center'>
-					{properties.button}
-				</Button>
-				<Transition
-					as={Fragment}
-					enter='transition ease-out duration-100'
-					enterFrom='transform opacity-0 scale-95'
-					enterTo='transform opacity-100 scale-100'
-					leave='transition ease-in duration-75'
-					leaveFrom='transform opacity-100 scale-100'
-					leaveTo='transform opacity-0 scale-95'
-				>
-					<Menu.Items className={clsx(
-						'absolute right-0 mt-2 rounded-md',
-						'text-gray-700 dark:text-gray-300',
-						'bg-white dark:bg-zinc-800',
-						'overflow-hidden z-50',
-						'border border-gray-200 dark:border-zinc-700',
-						'divide-y divide-gray-200 dark:divide-zinc-700',
-						properties.width ?? 'w-36'
-					)}
-					>
-						{properties.children}
-					</Menu.Items>
-				</Transition>
-			</Menu>
-		</div>
-	)
-}
-
-function Button(properties: MenuButtonProps<'button'>) {
-	return (
-		<Menu.Button
-			{...properties}
-			className={clsx(
-				properties.className
-			)}
-		>
-			{properties.children}
-		</Menu.Button>
-	)
-}
-
-type ItemProperties = HTMLProps<HTMLDivElement> & {
-	variant?: 'static' | 'normal';
-}
-
-function Item(properties: ItemProperties) {
-	return (
-		<Menu.Item>
-			{({ active }) => (
-				<div
-					{...properties}
-					className={clsx(
-						'px-4 py-2 w-full',
-						'focus:outline-none focus:ring',
-						'focus:ring-gray-300 dark:focus:ring-zinc-700',
-						properties.className,
-						properties.variant !== 'static' && active
-							? 'bg-gray-100 dark:bg-zinc-500' : ''
-					)}
-				>
-					{properties.children}
-				</div>
-			)}
-		</Menu.Item>
-	)
-}
-
-export default Object.assign(Dropdown, { Item })

app/components/Error.tsx

@@ -1,66 +1,52 @@
-import { Transition } from '@headlessui/react'
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline'
 import { isRouteErrorResponse, useRouteError } from '@remix-run/react'
-import clsx from 'clsx'
-import { Fragment, useEffect, useState } from 'react'
+import { useState } from 'react'
+
+import { cn } from '~/utils/cn'
 
 import Code from './Code'
+import Dialog from './Dialog'
 
 type Properties = {
 	readonly type?: 'full' | 'embedded';
 }
 
 export function ErrorPopup({ type = 'full' }: Properties) {
-	const [isOpen, setIsOpen] = useState(false)
+	// eslint-disable-next-line react/hook-use-state
+	const open = useState(true)
+
 	const error = useRouteError()
 	const routing = isRouteErrorResponse(error)
 	const message = (error instanceof Error ? error.message : 'An unexpected error occurred')
-	console.error(error)
-
-	// Debounce the error modal so it doesn't show up for a split second
-	// when the user navigates to a new page.
-	useEffect(() => {
-		setTimeout(() => {
-			setIsOpen(true)
-		}, 150)
-	}, [])
 
 	return (
-		<Transition as={Fragment} show={isOpen}>
-			<Transition.Child
-				as={Fragment}
-				enter='ease-out duration-150'
-				enterFrom='opacity-0 scale-95'
-				enterTo='opacity-100 scale-100'
-			>
-
-				<div className={clsx(
-					'flex items-center justify-center overflow-clip',
-					type === 'full' ? 'min-h-screen' : 'mt-24'
+		<Dialog>
+			<Dialog.Panel
+				className={cn(
+					type === 'embedded' ? 'pointer-events-none bg-transparent dark:bg-transparent' : '',
 				)}
-				>
-					<div className={clsx(
-						'flex flex-col items-center justify-center space-y-2 w-full sm:w-1/2 xl:w-1/3',
-						'bg-white dark:bg-zinc-800 rounded-lg py-8 px-4 md:px-16',
-						'border border-gray-200 dark:border-zinc-700 text-center'
-					)}
-					>
-						<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
-						<h1 className='text-2xl font-semibold text-gray-800 dark:text-gray-100'>
-							{routing ? error.status : 'Error'}
-						</h1>
-						{routing ? (
-							<p className='text-gray-500 dark:text-gray-400'>
-								{error.statusText}
-							</p>
-						) : (
-							<Code className='text-sm'>
-								{message}
-							</Code>
-						)}
-					</div>
-				</div>
-			</Transition.Child>
-		</Transition>
+				control={open}
+			>
+				{() => (
+					<>
+						<div className='flex items-center justify-between'>
+							<Dialog.Title className='text-3xl mb-0'>
+								{routing ? error.status : 'Error'}
+							</Dialog.Title>
+							<ExclamationTriangleIcon className='w-12 h-12 text-red-500'/>
+						</div>
+						<Dialog.Text className='mt-4 text-lg'>
+							{routing ? (
+								error.statusText
+							) : (
+								<Code>
+									{message}
+								</Code>
+							)}
+						</Dialog.Text>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
 	)
 }

app/components/Menu.tsx

@@ -0,0 +1,98 @@
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react'
+import {
+	Button as AriaButton,
+	Menu as AriaMenu,
+	MenuItem,
+	MenuTrigger,
+	Popover
+} from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+function Button(properties: Parameters<typeof AriaButton>[0]) {
+	return (
+		<AriaButton
+			{...properties}
+			className={cn(
+				'outline-none',
+				properties.className
+			)}
+			aria-label='Menu'
+		/>
+	)
+}
+
+function Items(properties: Parameters<typeof AriaMenu>[0]) {
+	return (
+		<Popover className={cn(
+			'mt-2 rounded-md',
+			'bg-ui-50 dark:bg-ui-800',
+			'overflow-hidden z-50',
+			'border border-ui-200 dark:border-ui-600',
+			'entering:animate-in exiting:animate-out',
+			'entering:fade-in entering:zoom-in-95',
+			'exiting:fade-out exiting:zoom-out-95',
+			'fill-mode-forwards origin-left-right'
+		)}
+		>
+			<AriaMenu
+				{...properties}
+				className={cn(
+					'outline-none',
+					'divide-y divide-ui-200 dark:divide-ui-600',
+					properties.className
+				)}
+			>
+				{properties.children}
+			</AriaMenu>
+		</Popover>
+	)
+}
+
+type ButtonProperties = Parameters<typeof AriaButton>[0] & {
+	readonly control?: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+function ItemButton(properties: ButtonProperties) {
+	return (
+		<MenuItem className='outline-none'>
+			<AriaButton
+				{...properties}
+				className={cn(
+					'px-4 py-2 w-full outline-none text-left',
+					'hover:bg-ui-200 dark:hover:bg-ui-700',
+					properties.className
+				)}
+				aria-label='Menu Dialog'
+				// If control is passed, set the state value
+				onPress={event => {
+					properties.onPress?.(event)
+					properties.control?.[1](true)
+				}}
+			/>
+		</MenuItem>
+	)
+}
+
+function Item(properties: Parameters<typeof MenuItem>[0]) {
+	return (
+		<MenuItem
+			{...properties}
+			className={cn(
+				'px-4 py-2 w-full outline-none',
+				'hover:bg-ui-200 dark:hover:bg-ui-700',
+				properties.className
+			)}
+		/>
+	)
+}
+
+function Menu({ children }: { readonly children: ReactNode }) {
+	return (
+		<MenuTrigger>
+			{children}
+		</MenuTrigger>
+	)
+}
+
+export default Object.assign(Menu, { Button, Item, ItemButton, Items })

app/components/Modal.tsx

@@ -1,160 +0,0 @@
-import { Dialog, Transition } from '@headlessui/react'
-import { XMarkIcon } from '@heroicons/react/24/outline'
-import clsx from 'clsx'
-import { Fragment, type ReactNode, type SetStateAction, useState } from 'react'
-
-import Button from './Button'
-
-type HookParameters = {
-	title: string;
-	description?: string;
-	buttonText?: string;
-	variant?: 'danger' | 'confirm';
-	children?: ReactNode;
-
-	// Optional because the button submits
-	onConfirm?: () => void | Promise<void>;
-	onOpen?: () => void | Promise<void>;
-	onClose?: () => void | Promise<void>;
-}
-
-type Overrides = Omit<HookParameters, 'onOpen' | 'onClose'>
-
-type Properties = {
-	readonly isOpen: boolean;
-	readonly setIsOpen: (value: SetStateAction<boolean>) => void;
-	readonly parameters?: HookParameters;
-}
-
-export type OpenFunction = (overrides?: Overrides) => void
-
-export default function useModal(properties?: HookParameters) {
-	const [isOpen, setIsOpen] = useState(false)
-	const [liveProperties, setLiveProperties] = useState(properties)
-
-	return {
-		Modal: (
-			<Modal
-				isOpen={isOpen}
-				setIsOpen={setIsOpen}
-				parameters={liveProperties}
-			/>
-		),
-
-		open: (overrides?: Overrides) => {
-			if (!overrides && !properties) {
-				throw new Error('No properties provided')
-			}
-
-			setIsOpen(true)
-			if (properties?.onOpen) {
-				void properties.onOpen()
-			}
-
-			if (overrides) {
-				setLiveProperties(overrides)
-			}
-		},
-
-		close: () => {
-			setIsOpen(false)
-			if (properties?.onClose) {
-				void properties.onClose()
-			}
-		}
-	}
-}
-
-function Modal({ parameters, isOpen, setIsOpen }: Properties) {
-	if (!parameters) {
-		return
-	}
-
-	return (
-		<Transition
-			show={isOpen}
-			as={Fragment}
-		>
-			<Dialog
-				as='div'
-				className='relative z-50'
-				onClose={() => {
-					setIsOpen(false)
-				}}
-			>
-				<Transition.Child
-					enter='ease-out duration-100'
-					enterFrom='opacity-0'
-					enterTo='opacity-100'
-					leave='ease-in duration-75'
-					leaveFrom='opacity-100'
-					leaveTo='opacity-0'
-					as={Fragment}
-				>
-					<div className='fixed inset-0 bg-black/30' aria-hidden='true'/>
-				</Transition.Child>
-				<div className='fixed inset-0 flex w-screen items-center justify-center'>
-					<Transition.Child
-						enter='transition ease-out duration-100'
-						enterFrom='transform opacity-0 scale-95'
-						enterTo='transform opacity-100 scale-100'
-						leave='transition ease-in duration-75'
-						leaveFrom='transform opacity-100 scale-100'
-						leaveTo='transform opacity-0 scale-95'
-						as={Fragment}
-					>
-						<Dialog.Panel className={clsx(
-							'rounded-lg p-4 w-full max-w-md',
-							'bg-white dark:bg-black relative',
-							'border border-gray-200 dark:border-zinc-800'
-						)}
-						>
-							<XMarkIcon
-								className={clsx(
-									'absolute top-3 right-3 rounded-lg p-1.5',
-									'w-8 h-8 text-gray-500 dark:text-gray-400',
-									'hover:bg-gray-100 dark:hover:bg-zinc-800'
-								)}
-								onClick={() => {
-									setIsOpen(false)
-								}}
-							/>
-							<Dialog.Title className='text-xl font-bold'>
-								{parameters.title}
-							</Dialog.Title>
-							{parameters.description ? (
-								<Dialog.Description className='text-gray-500 dark:text-gray-400 mt-1'>
-									{parameters.description}
-								</Dialog.Description>
-							) : undefined}
-							{parameters.children ? (
-								<div className='w-full mt-4'>
-									{parameters.children}
-								</div>
-							) : undefined}
-							<Button
-								variant='emphasized'
-								type='submit'
-								className={clsx(
-									'w-full mt-12',
-									parameters.variant === 'danger'
-										? 'bg-red-800 dark:bg-red-500 focus:ring-red-500 dark:focus:ring-red-500'
-										: ''
-								)}
-								onClick={async () => {
-									if (parameters.onConfirm) {
-										await parameters.onConfirm()
-									}
-
-									setIsOpen(false)
-								}}
-							>
-								{parameters.buttonText ?? 'Confirm'}
-							</Button>
-						</Dialog.Panel>
-					</Transition.Child>
-				</div>
-			</Dialog>
-		</Transition>
-	)
-}

app/components/Switch.tsx

@@ -0,0 +1,40 @@
+import { Switch as AriaSwitch } from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+type SwitchProperties = Parameters<typeof AriaSwitch>[0] & {
+	readonly label: string;
+}
+
+export default function Switch(properties: SwitchProperties) {
+	return (
+		<AriaSwitch
+			{...properties}
+			aria-label={properties.label}
+			className='group flex gap-2 items-center'
+		>
+			<div
+				className={cn(
+					'flex h-[26px] w-[44px] shrink-0 cursor-default',
+					'rounded-full shadow-inner bg-clip-padding',
+					'border border-solid border-white/30 p-[3px]',
+					'box-border transition duration-100 ease-in-out',
+					'outline-none group-focus-visible:ring-2 ring-black',
+
+					'bg-main-700 dark:bg-main-800',
+					'group-pressed:bg-main-800 dark:group-pressed:bg-main-900',
+					'group-selected:bg-main-900 group-selected:group-pressed:bg-main-900',
+					properties.isDisabled && 'opacity-50 cursor-not-allowed',
+					properties.className
+				)}
+			>
+				<span className={cn(
+					'h-[18px] w-[18px] transform rounded-full',
+					'bg-white shadow transition duration-100',
+					'ease-in-out translate-x-0 group-selected:translate-x-[100%]'
+				)}
+				/>
+			</div>
+		</AriaSwitch>
+	)
+}

app/components/TextField.tsx

@@ -0,0 +1,38 @@
+import { type Dispatch, type SetStateAction } from 'react'
+import {
+	Input,
+	TextField as AriaTextField
+} from 'react-aria-components'
+
+import { cn } from '~/utils/cn'
+
+type TextFieldProperties = Parameters<typeof AriaTextField>[0] & {
+	readonly label: string;
+	readonly placeholder: string;
+	readonly state: [string, Dispatch<SetStateAction<string>>];
+}
+
+export default function TextField(properties: TextFieldProperties) {
+	return (
+		<AriaTextField
+			{...properties}
+			aria-label={properties.label}
+			className='w-full'
+		>
+			<Input
+				placeholder={properties.placeholder}
+				value={properties.state[0]}
+				name={properties.name}
+				className={cn(
+					'block px-2.5 py-1.5 w-full rounded-lg my-1',
+					'border border-ui-200 dark:border-ui-600',
+					'dark:bg-ui-800 dark:text-ui-300',
+					properties.className
+				)}
+				onChange={event => {
+					properties.state[1](event.target.value)
+				}}
+			/>
+		</AriaTextField>
+	)
+}

app/components/Toaster.tsx

@@ -1,47 +1,79 @@
-import { useToaster } from 'react-hot-toast/headless'
+import { XMarkIcon } from '@heroicons/react/24/outline'
+import { type AriaToastProps, useToast, useToastRegion } from '@react-aria/toast'
+import { ToastQueue, type ToastState, useToastQueue } from '@react-stately/toast'
+import { type ReactNode, useRef } from 'react'
+import { Button } from 'react-aria-components'
+import { createPortal } from 'react-dom'
+import { ClientOnly } from 'remix-utils/client-only'
 
-export default function Toaster() {
-	const { toasts, handlers } = useToaster()
-	const { startPause, endPause, calculateOffset, updateHeight } = handlers
+import { cn } from '~/utils/cn'
+
+type ToastProperties = AriaToastProps<ReactNode> & {
+	readonly state: ToastState<ReactNode>;
+}
+
+function Toast({ state, ...properties }: ToastProperties) {
+	const reference = useRef(null)
+	const { toastProps, titleProps, closeButtonProps } = useToast(properties, state, reference)
 
 	return (
 		<div
-			className='fixed bottom-0 right-0 p-4 w-80 h-1/2 overflow-hidden'
-			onMouseEnter={startPause}
-			onMouseLeave={endPause}
+			{...toastProps}
+			ref={reference}
+			className={cn(
+				'bg-main-700 dark:bg-main-800 rounded-lg',
+				'text-main-100 dark:text-main-200 z-50',
+				'border border-main-600 dark:border-main-700',
+				'flex items-center justify-between p-3 pl-4 w-80'
+			)}
 		>
-			{toasts.slice(0, 6).map(toast => {
-				const offset = calculateOffset(toast, {
-					reverseOrder: false,
-					gutter: -8
-				})
-
-				// eslint-disable-next-line @typescript-eslint/ban-types
-				const reference = (element: HTMLDivElement | null) => {
-					if (element && typeof toast.height !== 'number') {
-						const { height } = element.getBoundingClientRect()
-						updateHeight(toast.id, -height)
-					}
-				}
-
-				return (
-					<div
-						key={toast.id}
-						ref={reference}
-						className='fixed bottom-4 right-4 p-4 bg-gray-800 rounded-lg text-white transition-all duration-300'
-						{...toast.ariaProps}
-						style={{
-							transform: `translateY(${offset}px) translateX(${toast.visible ? 0 : 200}%)`
-						}}
-					>
-						{typeof toast.message === 'function' ? (
-							toast.message(toast)
-						) : (
-							toast.message
-						)}
-					</div>
-				)
-			})}
+			<div {...titleProps}>{properties.toast.content}</div>
+			<Button
+				{...closeButtonProps}
+				className={cn(
+					'outline-none rounded-full p-1',
+					'hover:bg-main-600 dark:hover:bg-main-700'
+				)}
+			>
+				<XMarkIcon className='w-4 h-4'/>
+			</Button>
 		</div>
 	)
 }
+
+const toasts = new ToastQueue<ReactNode>({
+	maxVisibleToasts: 5
+})
+
+export function toast(text: string) {
+	return toasts.add(text, { timeout: 5000 })
+}
+
+export function Toaster() {
+	const reference = useRef(null)
+	const state = useToastQueue(toasts)
+	const { regionProps } = useToastRegion({}, state, reference)
+
+	return (
+		<ClientOnly>
+			{() => createPortal(
+				state.visibleToasts.length >= 0 ? (
+					<div
+						className={cn(
+							'fixed bottom-4 right-4',
+							'flex flex-col gap-4'
+						)}
+						{...regionProps}
+						ref={reference}
+					>
+						{state.visibleToasts.map(toast => (
+							<Toast key={toast.key} toast={toast} state={state}/>
+						))}
+					</div>
+				) : undefined,
+				document.body
+			)}
+		</ClientOnly>
+	)
+}
+

app/root.tsx

@@ -8,7 +8,7 @@ import {
 } from '@remix-run/react'
 
 import { ErrorPopup } from '~/components/Error'
-import Toaster from '~/components/Toaster'
+import { Toaster } from '~/components/Toaster'
 import stylesheet from '~/tailwind.css?url'
 import { getContext, registerConfigWatcher } from '~/utils/config'
 
@@ -33,14 +33,6 @@ export async function loader() {
 		throw new Error('The COOKIE_SECRET environment variable is required')
 	}
 
-	if (!process.env.API_KEY) {
-		throw new Error('The API_KEY environment variable is required')
-	}
-
-	if (!process.env.HEADSCALE_CONTAINER) {
-		throw new Error('The HEADSCALE_CONTAINER environment variable is required')
-	}
-
 	// eslint-disable-next-line unicorn/no-null
 	return null
 }

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

@@ -1,8 +1,8 @@
 import { useFetcher } from '@remix-run/react'
 
-import Button from '~/components/Button'
-import useModal from '~/components/Modal'
+import Dialog from '~/components/Dialog'
 import Spinner from '~/components/Spinner'
+import { cn } from '~/utils/cn'
 
 type Properties = {
 	readonly isEnabled: boolean;
@@ -12,38 +12,59 @@ type Properties = {
 
 export default function Modal({ isEnabled, disabled }: Properties) {
 	const fetcher = useFetcher()
-	const { Modal, open } = useModal({
-		title: `${isEnabled ? 'Disable' : 'Enable'} Magic DNS`,
-		variant: isEnabled ? 'danger' : 'confirm',
-		buttonText: `${isEnabled ? 'Disable' : 'Enable'} Magic DNS`,
-		description: 'Devices will no longer be accessible via your tailnet domain. The search domain will also be disabled.',
-		onConfirm: () => {
-			fetcher.submit({
-				// eslint-disable-next-line @typescript-eslint/naming-convention
-				'dns_config.magic_dns': !isEnabled
-			}, {
-				method: 'PATCH',
-				encType: 'application/json'
-			})
-		}
-	})
 
 	return (
-		<>
-			<Button
-				variant='emphasized'
-				className='w-fit text-sm'
-				disabled={disabled}
-				onClick={() => {
-					open()
-				}}
+		<Dialog>
+			<Dialog.Button
+				isDisabled={disabled}
+				className={cn(
+					'w-fit text-sm rounded-lg px-4 py-2',
+					'bg-main-700 dark:bg-main-800 text-white',
+					disabled && 'opacity-50 cursor-not-allowed'
+				)}
 			>
 				{fetcher.state === 'idle' ? undefined : (
 					<Spinner className='w-3 h-3'/>
 				)}
 				{isEnabled ? 'Disable' : 'Enable'} Magic DNS
-			</Button>
-			{Modal}
-		</>
+			</Dialog.Button>
+			<Dialog.Panel>
+				{close => (
+					<>
+						<Dialog.Title>
+							{isEnabled ? 'Disable' : 'Enable'} Magic DNS
+						</Dialog.Title>
+						<Dialog.Text>
+							Devices will no longer be accessible via your tailnet domain.
+							The search domain will also be disabled.
+						</Dialog.Text>
+						<div className='mt-6 flex justify-end gap-2 mt-6'>
+							<Dialog.Action
+								variant='cancel'
+								onPress={close}
+							>
+								Cancel
+							</Dialog.Action>
+							<Dialog.Action
+								variant='confirm'
+								onPress={() => {
+									fetcher.submit({
+										// eslint-disable-next-line @typescript-eslint/naming-convention
+										'dns_config.magic_dns': !isEnabled
+									}, {
+										method: 'PATCH',
+										encType: 'application/json'
+									})
+
+									close()
+								}}
+							>
+								{isEnabled ? 'Disable' : 'Enable'} Magic DNS
+							</Dialog.Action>
+						</div>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
 	)
 }

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

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 /* eslint-disable unicorn/no-keyword-prefix */
-import { Dialog } from '@headlessui/react'
 import { useFetcher } from '@remix-run/react'
 import { useState } from 'react'
 
-import Button from '~/components/Button'
 import Code from '~/components/Code'
+import Dialog from '~/components/Dialog'
 import Input from '~/components/Input'
-import useModal from '~/components/Modal'
 import Spinner from '~/components/Spinner'
+import TextField from '~/components/TextField'
+import { cn } from '~/utils/cn'
 
 type Properties = {
 	readonly name: string;
@@ -19,29 +19,6 @@ type Properties = {
 export default function Modal({ name, disabled }: Properties) {
 	const [newName, setNewName] = useState(name)
 	const fetcher = useFetcher()
-	const { Modal, open } = useModal({
-		title: 'Rename Tailnet',
-		description: 'Keep in mind that changing this can lead to all sorts of unexpected behavior and may break existing devices in your tailnet.',
-		buttonText: 'Rename',
-		children: (
-			<Input
-				type='text'
-				className='font-mono mt-4'
-				value={newName}
-				onChange={event => {
-					setNewName(event.target.value)
-				}}
-			/>
-		),
-		onConfirm: () => {
-			fetcher.submit({
-				'dns_config.base_domain': newName
-			}, {
-				method: 'PATCH',
-				encType: 'application/json'
-			})
-		}
-	})
 
 	return (
 		<div className='flex flex-col w-2/3'>
@@ -65,20 +42,62 @@ export default function Modal({ name, disabled }: Properties) {
 					event.target.select()
 				}}
 			/>
-			<Button
-				variant='emphasized'
-				className='text-sm w-fit'
-				disabled={disabled}
-				onClick={() => {
-					open()
-				}}
-			>
-				{fetcher.state === 'idle' ? undefined : (
-					<Spinner className='w-3 h-3'/>
-				)}
-				Rename Tailnet...
-			</Button>
-			{Modal}
+			<Dialog>
+				<Dialog.Button
+					isDisabled={disabled}
+					className={cn(
+						'w-fit text-sm rounded-lg px-4 py-2',
+						'bg-main-700 dark:bg-main-800 text-white',
+						disabled && 'opacity-50 cursor-not-allowed'
+					)}
+				>
+					{fetcher.state === 'idle' ? undefined : (
+						<Spinner className='w-3 h-3'/>
+					)}
+					Rename Tailnet
+				</Dialog.Button>
+				<Dialog.Panel>
+					{close => (
+						<>
+							<Dialog.Title>
+								Rename Tailnet
+							</Dialog.Title>
+							<Dialog.Text>
+								Keep in mind that changing this can lead to all sorts of unexpected behavior and may break existing devices in your tailnet.
+							</Dialog.Text>
+							<TextField
+								label='Tailnet name'
+								placeholder='ts.net'
+								state={[newName, setNewName]}
+								className='my-2'
+							/>
+							<div className='mt-6 flex justify-end gap-2 mt-6'>
+								<Dialog.Action
+									variant='cancel'
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant='confirm'
+									onPress={() => {
+										fetcher.submit({
+											'dns_config.base_domain': newName
+										}, {
+											method: 'PATCH',
+											encType: 'application/json'
+										})
+
+										close()
+									}}
+								>
+									Rename
+								</Dialog.Action>
+							</div>
+						</>
+					)}
+				</Dialog.Panel>
+			</Dialog>
 		</div>
 	)
 }

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.machines._index/dialogs/delete.tsx

@@ -0,0 +1,57 @@
+import { type FetcherWithComponents } from '@remix-run/react'
+import { type Dispatch, type SetStateAction } from 'react'
+
+import Dialog from '~/components/Dialog'
+import { type Machine } from '~/types'
+import { cn } from '~/utils/cn'
+
+type DeleteProperties = {
+	readonly machine: Machine;
+	readonly fetcher: FetcherWithComponents<unknown>;
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+export default function Delete({ machine, fetcher, state }: DeleteProperties) {
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Remove {machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							This machine will be permanently removed from
+							your network. To re-add it, you will need to
+							reauthenticate to your tailnet from the device.
+						</Dialog.Text>
+						<fetcher.Form method='POST'>
+							<input type='hidden' name='_method' value='delete'/>
+							<input type='hidden' name='id' value={machine.id}/>
+							<div className='mt-6 flex justify-end gap-2 mt-6'>
+								<Dialog.Action
+									variant='cancel'
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant='confirm'
+									className={cn(
+										'bg-red-500 hover:border-red-700',
+										'dark:bg-red-600 dark:hover:border-red-700',
+										'pressed:bg-red-600 hover:bg-red-600',
+										'text-white dark:text-white'
+									)}
+									onPress={close}
+								>
+									Remove
+								</Dialog.Action>
+							</div>
+						</fetcher.Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}

app/routes/_data.machines._index/dialogs/expire.tsx

@@ -0,0 +1,57 @@
+import { type FetcherWithComponents } from '@remix-run/react'
+import { type Dispatch, type SetStateAction } from 'react'
+
+import Dialog from '~/components/Dialog'
+import { type Machine } from '~/types'
+import { cn } from '~/utils/cn'
+
+type DeleteProperties = {
+	readonly machine: Machine;
+	readonly fetcher: FetcherWithComponents<unknown>;
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+export default function Expire({ machine, fetcher, state }: DeleteProperties) {
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Expire {machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							This will disconnect the machine from your Tailnet.
+							In order to reconnect, you will need to re-authenticate
+							from the device.
+						</Dialog.Text>
+						<fetcher.Form method='POST'>
+							<input type='hidden' name='_method' value='expire'/>
+							<input type='hidden' name='id' value={machine.id}/>
+							<div className='mt-6 flex justify-end gap-2 mt-6'>
+								<Dialog.Action
+									variant='cancel'
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant='confirm'
+									className={cn(
+										'bg-red-500 hover:border-red-700',
+										'dark:bg-red-600 dark:hover:border-red-700',
+										'pressed:bg-red-600 hover:bg-red-600',
+										'text-white dark:text-white'
+									)}
+									onPress={close}
+								>
+									Expire
+								</Dialog.Action>
+							</div>
+						</fetcher.Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}

app/routes/_data.machines._index/dialogs/rename.tsx

@@ -0,0 +1,89 @@
+import { type FetcherWithComponents } from '@remix-run/react'
+import { type Dispatch, type SetStateAction, useState } from 'react'
+
+import Code from '~/components/Code'
+import Dialog from '~/components/Dialog'
+import TextField from '~/components/TextField'
+import { type Machine } from '~/types'
+
+type RenameProperties = {
+	readonly machine: Machine;
+	readonly fetcher: FetcherWithComponents<unknown>;
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
+	readonly magic?: string;
+}
+
+export default function Rename({ machine, fetcher, state, magic }: RenameProperties) {
+	const [name, setName] = useState(machine.givenName)
+
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Edit machine name for {machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							This name is shown in the admin panel, in Tailscale clients,
+							and used when generating MagicDNS names.
+						</Dialog.Text>
+						<fetcher.Form method='POST'>
+							<input type='hidden' name='_method' value='rename'/>
+							<input type='hidden' name='id' value={machine.id}/>
+							<TextField
+								label='Machine name'
+								placeholder='Machine name'
+								name='name'
+								state={[name, setName]}
+								className='my-2'
+							/>
+							{magic ? (
+								name.length > 0 && name !== machine.givenName ? (
+									<p className='text-sm text-gray-500 dark:text-gray-300 leading-tight'>
+										This machine will be accessible by the hostname
+										{' '}
+										<Code className='text-sm'>
+											{name.toLowerCase().replaceAll(/\s+/g, '-')}
+										</Code>
+										{'. '}
+										The hostname
+										{' '}
+										<Code className='text-sm'>
+											{machine.givenName}
+										</Code>
+										{' '}
+										will no longer point to this machine.
+									</p>
+								) : (
+									<p className='text-sm text-gray-500 dark:text-gray-300 leading-tight'>
+										This machine is accessible by the hostname
+										{' '}
+										<Code className='text-sm'>
+											{machine.givenName}
+										</Code>
+										.
+									</p>
+								)
+							) : undefined}
+							<div className='mt-6 flex justify-end gap-2 mt-6'>
+								<Dialog.Action
+									variant='cancel'
+									onPress={close}
+								>
+									Cancel
+								</Dialog.Action>
+								<Dialog.Action
+									variant='confirm'
+									onPress={close}
+								>
+									Rename
+								</Dialog.Action>
+							</div>
+						</fetcher.Form>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}

app/routes/_data.machines._index/dialogs/routes.tsx

@@ -0,0 +1,92 @@
+import { type FetcherWithComponents } from '@remix-run/react'
+import { type Dispatch, type SetStateAction } from 'react'
+
+import Dialog from '~/components/Dialog'
+import Switch from '~/components/Switch'
+import { type Machine, type Route } from '~/types'
+import { cn } from '~/utils/cn'
+
+type RoutesProperties = {
+	readonly machine: Machine;
+	readonly routes: Route[];
+	readonly fetcher: FetcherWithComponents<unknown>;
+	readonly state: [boolean, Dispatch<SetStateAction<boolean>>];
+}
+
+// TODO: Support deleting routes
+export default function Routes({ machine, routes, fetcher, state }: RoutesProperties) {
+	return (
+		<Dialog>
+			<Dialog.Panel control={state}>
+				{close => (
+					<>
+						<Dialog.Title>
+							Edit route settings of {machine.givenName}
+						</Dialog.Title>
+						<Dialog.Text>
+							Connect to devices you can&apos;t install Tailscale on
+							by advertising IP ranges as subnet routes.
+						</Dialog.Text>
+						<div className={cn(
+							'rounded-lg overflow-y-auto my-2',
+							'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
+							'border border-zinc-200 dark:border-zinc-700'
+						)}
+						>
+							{routes.length === 0 ? (
+								<div
+									className={cn(
+										'flex py-4 px-4 bg-ui-100 dark:bg-ui-800',
+										'items-center justify-center',
+										'text-ui-600 dark:text-ui-300'
+									)}
+								>
+									<p>
+										No routes are advertised on this machine.
+									</p>
+								</div>
+							) : undefined}
+							{routes.map(route => (
+								<div
+									key={route.node.id}
+									className={cn(
+										'flex py-2 px-4 bg-ui-100 dark:bg-ui-800',
+										'items-center justify-between'
+									)}
+								>
+									<p>
+										{route.prefix}
+									</p>
+									<Switch
+										defaultSelected={route.enabled}
+										label='Enabled'
+										onChange={checked => {
+											const form = new FormData()
+											form.set('id', machine.id)
+											form.set('_method', 'routes')
+											form.set('route', route.id)
+
+											form.set('enabled', String(checked))
+											fetcher.submit(form, {
+												method: 'POST'
+											})
+										}}
+									/>
+								</div>
+							))}
+						</div>
+						<div className='mt-6 flex justify-end gap-2 mt-6'>
+							<Dialog.Action
+								variant='cancel'
+								isDisabled={fetcher.state === 'submitting'}
+								onPress={close}
+							>
+								Close
+							</Dialog.Action>
+						</div>
+					</>
+				)}
+			</Dialog.Panel>
+		</Dialog>
+	)
+}

app/routes/_data.machines._index/machine.tsx

@@ -1,22 +1,42 @@
+/* eslint-disable react/hook-use-state */
 import { ChevronDownIcon, ClipboardIcon, EllipsisHorizontalIcon } from '@heroicons/react/24/outline'
 import { type FetcherWithComponents, Link } from '@remix-run/react'
-import clsx from 'clsx'
-import toast from 'react-hot-toast/headless'
+import { useState } from 'react'
 
-import Dropdown from '~/components/Dropdown'
-import type { OpenFunction } from '~/components/Modal'
+import Menu from '~/components/Menu'
 import StatusCircle from '~/components/StatusCircle'
-import { type Machine } from '~/types'
+import { toast } from '~/components/Toaster'
+import { type Machine, type Route } from '~/types'
+import { cn } from '~/utils/cn'
+
+import Delete from './dialogs/delete'
+import Expire from './dialogs/expire'
+import Rename from './dialogs/rename'
+import Routes from './dialogs/routes'
 
 type MachineProperties = {
 	readonly machine: Machine;
-	readonly open: OpenFunction;
+	readonly routes: Route[];
 	readonly fetcher: FetcherWithComponents<unknown>;
 	readonly magic?: string;
 }
 
-export default function MachineRow({ machine, open, fetcher, magic }: MachineProperties) {
-	const tags = [...machine.forcedTags, ...machine.validTags]
+export default function MachineRow({ machine, routes, fetcher, magic }: MachineProperties) {
+	const renameState = useState(false)
+	const expireState = useState(false)
+	const removeState = useState(false)
+	const routesState = useState(false)
+
+	const expired = new Date(machine.expiry).getTime() < Date.now()
+	const tags = [
+		...machine.forcedTags,
+		...machine.validTags
+	]
+
+	if (expired) {
+		tags.unshift('Expired')
+	}
+
 	return (
 		<tr
 			key={machine.id}
@@ -27,7 +47,7 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 					to={`/machines/${machine.id}`}
 					className='group/link h-full'
 				>
-					<p className={clsx(
+					<p className={cn(
 						'font-semibold leading-snug',
 						'group-hover/link:text-blue-600',
 						'group-hover/link:dark:text-blue-400'
@@ -35,14 +55,14 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 					>
 						{machine.givenName}
 					</p>
-					<p className='text-sm text-gray-400 font-mono'>
+					<p className='text-sm text-gray-500 dark:text-gray-300 font-mono'>
 						{machine.name}
 					</p>
 					<div className='flex gap-1 mt-1'>
 						{tags.map(tag => (
 							<span
 								key={tag}
-								className={clsx(
+								className={cn(
 									'text-xs rounded-sm px-1 py-0.5',
 									'bg-gray-100 dark:bg-zinc-700',
 									'text-gray-600 dark:text-gray-300'
@@ -57,39 +77,36 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 			<td className='py-2'>
 				<div className='flex items-center gap-x-1'>
 					{machine.ipAddresses[0]}
-					<Dropdown
-						width='w-max'
-						button={(
+					<Menu>
+						<Menu.Button>
 							<ChevronDownIcon className='w-4 h-4'/>
-						)}
-					>
-						{machine.ipAddresses.map(ip => (
-							<Dropdown.Item key={ip}>
-								<button
+						</Menu.Button>
+						<Menu.Items>
+							{machine.ipAddresses.map(ip => (
+								<Menu.ItemButton
+									key={ip}
 									type='button'
-									className={clsx(
+									className={cn(
 										'flex items-center gap-x-1.5 text-sm',
 										'justify-between w-full'
 									)}
-									onClick={async () => {
+									onPress={async () => {
 										await navigator.clipboard.writeText(ip)
 										toast('Copied IP address to clipboard')
 									}}
 								>
 									{ip}
 									<ClipboardIcon className='w-3 h-3'/>
-								</button>
-							</Dropdown.Item>
-						))}
-						{magic ? (
-							<Dropdown.Item>
-								<button
+								</Menu.ItemButton>
+							))}
+							{magic ? (
+								<Menu.ItemButton
 									type='button'
-									className={clsx(
+									className={cn(
 										'flex items-center gap-x-1.5 text-sm',
 										'justify-between w-full break-keep'
 									)}
-									onClick={async () => {
+									onPress={async () => {
 										const ip = `${machine.givenName}.${machine.user.name}.${magic}`
 										await navigator.clipboard.writeText(ip)
 										toast('Copied hostname to clipboard')
@@ -97,19 +114,24 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 								>
 									{machine.givenName}.{machine.user.name}.{magic}
 									<ClipboardIcon className='w-3 h-3'/>
-								</button>
-							</Dropdown.Item>
-						) : undefined}
-					</Dropdown>
+								</Menu.ItemButton>
+							) : undefined}
+						</Menu.Items>
+					</Menu>
 				</div>
 			</td>
 			<td className='py-2'>
-				<span
-					className='flex items-center gap-x-1 text-sm text-gray-500 dark:text-gray-400'
+				<span className={cn(
+					'flex items-center gap-x-1 text-sm',
+					'text-gray-500 dark:text-gray-400'
+				)}
 				>
-					<StatusCircle isOnline={machine.online} className='w-4 h-4'/>
+					<StatusCircle
+						isOnline={machine.online && !expired}
+						className='w-4 h-4'
+					/>
 					<p>
-						{machine.online
+						{machine.online && !expired
 							? 'Connected'
 							: new Date(
 								machine.lastSeen
@@ -118,86 +140,64 @@ export default function MachineRow({ machine, open, fetcher, magic }: MachinePro
 				</span>
 			</td>
 			<td className='py-2 pr-0.5'>
-				<div className={clsx(
-					'border border-transparent rounded-lg py-0.5 w-10',
-					'group-hover:border-gray-200 dark:group-hover:border-zinc-700'
+				<Rename
+					machine={machine}
+					fetcher={fetcher}
+					state={renameState}
+					magic={magic}
+				/>
+				<Delete
+					machine={machine}
+					fetcher={fetcher}
+					state={removeState}
+				/>
+				{expired ? undefined : (
+					<Expire
+						machine={machine}
+						fetcher={fetcher}
+						state={expireState}
+					/>
 				)}
-				>
-					<Dropdown
-						className='left-1/4'
-						width='w-48'
-						button={(
-							<EllipsisHorizontalIcon className='w-5 h-5'/>
+				<Routes
+					machine={machine}
+					routes={routes}
+					fetcher={fetcher}
+					state={routesState}
+				/>
+
+				<Menu>
+					<Menu.Button
+						className={cn(
+							'flex items-center justify-center',
+							'border border-transparent rounded-lg py-0.5 w-10',
+							'group-hover:border-gray-200 dark:group-hover:border-zinc-700'
 						)}
 					>
-						<Dropdown.Item variant='static'>
-							<button
-								disabled
-								type='button'
-								className='text-left w-full opacity-50'
-								onClick={() => {
-									open()
-								}}
-							>
-								Edit machine name
-							</button>
-						</Dropdown.Item>
-						<Dropdown.Item variant='static'>
-							<button
-								disabled
-								type='button'
-								className='text-left w-full opacity-50'
-								onClick={() => {
-									open()
-								}}
-							>
-								Edit route settings
-							</button>
-						</Dropdown.Item>
-						<Dropdown.Item variant='static'>
-							<button
-								disabled
-								type='button'
-								className='text-left w-full opacity-50'
-								onClick={() => {
-									open()
-								}}
-							>
-								Edit ACL tags
-							</button>
-						</Dropdown.Item>
-						<Dropdown.Item>
-							<button
-								type='button'
-								className='text-left text-red-700 w-full'
-								onClick={() => {
-									open({
-										title: 'Remove Machine',
-										description: [
-											'This action is irreversible and will disconnect the machine from the Headscale server.',
-											'All data associated with this machine including ACLs and tags will be lost.'
-										].join('\n'),
-										variant: 'danger',
-										buttonText: 'Remove',
-										onConfirm: () => {
-											fetcher.submit(
-												{
-													id: machine.id
-												},
-												{
-													method: 'DELETE',
-													encType: 'application/json'
-												}
-											)
-										}
-									})
-								}}
-							>
-								Remove
-							</button>
-						</Dropdown.Item>
-					</Dropdown>
-				</div>
+						<EllipsisHorizontalIcon className='w-5'/>
+					</Menu.Button>
+					<Menu.Items>
+						<Menu.ItemButton control={renameState}>
+							Edit machine name
+						</Menu.ItemButton>
+						<Menu.ItemButton control={routesState}>
+							Edit route settings
+						</Menu.ItemButton>
+						<Menu.Item className='opacity-50 hover:bg-transparent'>
+							Edit ACL tags
+						</Menu.Item>
+						{expired ? undefined : (
+							<Menu.ItemButton control={expireState}>
+								Expire
+							</Menu.ItemButton>
+						)}
+						<Menu.ItemButton
+							className='text-red-500 dark:text-red-400'
+							control={removeState}
+						>
+							Remove
+						</Menu.ItemButton>
+					</Menu.Items>
+				</Menu>
 			</td>
 		</tr>
 	)

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

@@ -1,17 +1,14 @@
-
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-
 import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { type ActionFunctionArgs, json, type LoaderFunctionArgs } from '@remix-run/node'
 import { useFetcher, useLoaderData } from '@remix-run/react'
-import clsx from 'clsx'
 import { Button, Tooltip, TooltipTrigger } from 'react-aria-components'
 
 import Code from '~/components/Code'
-import useModal from '~/components/Modal'
-import { type Machine } from '~/types'
+import { type Machine, type Route } from '~/types'
+import { cn } from '~/utils/cn'
 import { getConfig, getContext } from '~/utils/config'
-import { del, pull } from '~/utils/headscale'
+import { del, post, pull } from '~/utils/headscale'
 import { getSession } from '~/utils/sessions'
 import { useLiveData } from '~/utils/useLiveData'
 
@@ -20,7 +17,8 @@ import MachineRow from './machine'
 export async function loader({ request }: LoaderFunctionArgs) {
 	const session = await getSession(request.headers.get('Cookie'))
 
-	const data = await pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!)
+	const machines = await pull<{ nodes: Machine[] }>('v1/node', session.get('hsApiKey')!)
+	const routes = await pull<{ routes: Route[] }>('v1/routes', session.get('hsApiKey')!)
 	const context = await getContext()
 
 	let magic: string | undefined
@@ -32,19 +30,13 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	}
 
 	return {
-		nodes: data.nodes,
+		nodes: machines.nodes,
+		routes: routes.routes,
 		magic
 	}
 }
 
 export async function action({ request }: ActionFunctionArgs) {
-	const data = await request.json() as { id?: string }
-	if (!data.id) {
-		return json({ message: 'No ID provided' }, {
-			status: 400
-		})
-	}
-
 	const session = await getSession(request.headers.get('Cookie'))
 	if (!session.has('hsApiKey')) {
 		return json({ message: 'Unauthorized' }, {
@@ -52,8 +44,63 @@ export async function action({ request }: ActionFunctionArgs) {
 		})
 	}
 
-	await del(`v1/node/${data.id}`, session.get('hsApiKey')!)
-	return json({ message: 'Machine removed' })
+	const data = await request.formData()
+	if (!data.has('_method') || !data.has('id')) {
+		return json({ message: 'No method or ID provided' }, {
+			status: 400
+		})
+	}
+
+	const id = String(data.get('id'))
+	const method = String(data.get('_method'))
+
+	switch (method) {
+	case 'delete': {
+		await del(`v1/node/${id}`, session.get('hsApiKey')!)
+		return json({ message: 'Machine removed' })
+	}
+
+	case 'expire': {
+		console.log('expire')
+		const data = await post(`v1/node/${id}/expire`, session.get('hsApiKey')!)
+		console.log(data)
+		return json({ message: 'Machine expired' })
+	}
+
+	case 'rename': {
+		if (!data.has('name')) {
+			return json({ message: 'No name provided' }, {
+				status: 400
+			})
+		}
+
+		const name = String(data.get('name'))
+
+		await post(`v1/node/${id}/rename/${name}`, session.get('hsApiKey')!)
+		return json({ message: 'Machine renamed' })
+	}
+
+	case 'routes': {
+		if (!data.has('route') || !data.has('enabled')) {
+			return json({ message: 'No route or enabled provided' }, {
+				status: 400
+			})
+		}
+
+		const route = String(data.get('route'))
+		const enabled = data.get('enabled') === 'true'
+		const postfix = enabled ? 'enable' : 'disable'
+
+		await post(`v1/routes/${route}/${postfix}`, session.get('hsApiKey')!)
+		return json({ message: 'Route updated' })
+	}
+
+	default: {
+		return json({ message: 'Invalid method' }, {
+			status: 400
+		})
+	}
+	}
 }
 
 export default function Page() {
@@ -61,11 +108,8 @@ export default function Page() {
 	const data = useLoaderData<typeof loader>()
 	const fetcher = useFetcher()
 
-	const { Modal, open } = useModal()
-
 	return (
 		<>
-			{Modal}
 			<h1 className='text-2xl font-medium mb-4'>Machines</h1>
 			<table className='table-auto w-full rounded-lg'>
 				<thead className='text-gray-500 dark:text-gray-400'>
@@ -79,7 +123,7 @@ export default function Page() {
 										<Button>
 											<InformationCircleIcon className='w-4 h-4 text-gray-400'/>
 										</Button>
-										<Tooltip className={clsx(
+										<Tooltip className={cn(
 											'text-sm max-w-xs p-2 rounded-lg mb-2',
 											'bg-white dark:bg-zinc-800',
 											'border border-gray-200 dark:border-zinc-700'
@@ -99,7 +143,7 @@ export default function Page() {
 						<th className='pb-2'>Last Seen</th>
 					</tr>
 				</thead>
-				<tbody className={clsx(
+				<tbody className={cn(
 					'divide-y divide-zinc-200 dark:divide-zinc-700 align-top',
 					'border-t border-zinc-200 dark:border-zinc-700'
 				)}
@@ -109,8 +153,8 @@ export default function Page() {
 							key={machine.id}
 							// Typescript isn't smart enough yet
 							machine={machine as unknown as Machine}
+							routes={data.routes.filter(route => route.node.id === machine.id) as unknown as Route[]}
 							fetcher={fetcher}
-							open={open}
 							magic={data.magic}
 						/>
 					))}

app/routes/_data.tsx

@@ -1,9 +1,9 @@
 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 Dropdown from '~/components/Dropdown'
 import { ErrorPopup } from '~/components/Error'
+import Menu from '~/components/Menu'
 import TabLink from '~/components/TabLink'
 import { getContext } from '~/utils/config'
 import { HeadscaleError, pull } from '~/utils/headscale'
@@ -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'>
@@ -62,21 +63,24 @@ export default function Layout() {
 							<a href='https://github.com/juanfont/headscale' target='_blank' rel='noreferrer' className='text-gray-300 hover:text-white'>
 								Headscale
 							</a>
-							<Dropdown
-								button={<UserCircleIcon className='w-8 h-8'/>}
-							>
-								<Dropdown.Item variant='static'>
-									<p className='font-bold'>{data.user?.name}</p>
-									<p>{data.user?.email}</p>
-								</Dropdown.Item>
-								<Dropdown.Item className='text-red-700 cursor-pointer'>
-									<Form method='POST' action='/logout'>
-										<button type='submit' className='w-full'>
-											Logout
-										</button>
-									</Form>
-								</Dropdown.Item>
-							</Dropdown>
+							<Menu>
+								<Menu.Button>
+									<UserCircleIcon className='w-8 h-8'/>
+								</Menu.Button>
+								<Menu.Items>
+									<Menu.Item className='text-right'>
+										<p className='font-bold'>{data.user?.name}</p>
+										<p>{data.user?.email}</p>
+									</Menu.Item>
+									<Menu.Item className='text-red-500 dark:text-red-400'>
+										<Form method='POST' action='/logout'>
+											<button type='submit' className='w-full text-right'>
+												Logout
+											</button>
+										</Form>
+									</Menu.Item>
+								</Menu.Items>
+							</Menu>
 						</div>
 					</div>
 					<div className='flex items-center gap-x-4'>
@@ -101,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'/>
@@ -118,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>

app/utils/cn.ts

@@ -0,0 +1,4 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs))

app/utils/config.ts

@@ -233,6 +233,7 @@ async function getOidcConfig() {
 	let issuer = process.env.OIDC_ISSUER
 	let client = process.env.OIDC_CLIENT_ID
 	let secret = process.env.OIDC_CLIENT_SECRET
+	const rootKey = process.env.API_KEY
 
 	if (!issuer || !client || !secret) {
 		const config = await getConfig()
@@ -250,6 +251,10 @@ async function getOidcConfig() {
 		return
 	}
 
+	if (!rootKey) {
+		throw new Error('Cannot use OIDC without the root API_KEY variable set')
+	}
+
 	return { issuer, client, secret }
 }
 

app/utils/docker.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
 /* eslint-disable no-await-in-loop */
 /* eslint-disable no-constant-condition */
 import { setTimeout } from 'node:timers/promises'
@@ -6,7 +6,7 @@ import { setTimeout } from 'node:timers/promises'
 import { Client } from 'undici'
 
 import { getContext } from './config'
-import { pull } from './headscale'
+import { HeadscaleError, pull } from './headscale'
 
 export async function sighupHeadscale() {
 	const context = await getContext()
@@ -61,9 +61,16 @@ export async function restartHeadscale() {
 	let attempts = 0
 	while (true) {
 		try {
-			await pull('v1/apikey', process.env.API_KEY!)
+			// Acceptable blank because API_KEY is not required
+			await pull('v1/apikey', process.env.API_KEY ?? '')
 			return
-		} catch {
+		} catch (error) {
+			// This means the server is up but the API key is invalid
+			// This can happen if the user only uses API_KEY via cookies
+			if (error instanceof HeadscaleError && error.status === 401) {
+				break
+			}
+
 			if (attempts > 10) {
 				throw new Error('Headscale did not restart in time')
 			}

app/utils/headscale.ts

@@ -12,7 +12,7 @@ export class HeadscaleError extends Error {
 
 export class FatalError extends Error {
 	constructor() {
-		super('The Headscale server is not accessible or the API_KEY is invalid.')
+		super('The Headscale server is not accessible or the supplied API key is invalid')
 		this.name = 'FatalError'
 	}
 }

docs/Advanced-Integration.md

@@ -18,6 +18,8 @@ By default this is set to `/etc/headscale/config.yaml`.
 
 ### Access Control Lists (ACLs)
 
+![ACL Preview](/assets/acl-preview.png)
+
 Headplane will enable the `Access Controls` tab if it is able to read an ACL file from Headscale.<br>
 The ACL file path is read from the following sources in order of priority:
 
@@ -66,9 +68,8 @@ services:
     ports:
       - '3000:3000'
     environment:
-      # These are always required for Headplane to work
+      # This is always required for Headplane to work
       COOKIE_SECRET: 'abcdefghijklmnopqrstuvwxyz'
-      API_KEY: 'abcdefghijklmnopqrstuvwxyz'
 
       HEADSCALE_CONTAINER: 'headscale'
       DISABLE_API_KEY_LOGIN: 'true'
@@ -80,6 +81,11 @@ services:
       OIDC_CLIENT_ID: 'headscale'
       OIDC_ISSUER: 'https://sso.example.com'
       OIDC_CLIENT_SECRET: 'super_secret_client_secret'
+
+      # This NEEDS to be set with OIDC, regardless of what's in the config
+      # This needs to be a very long-lived (999 day) API key used to create
+      # shorter ones for OIDC and allow the OIDC functionality to work
+      API_KEY: 'abcdefghijklmnopqrstuvwxyz'
 ```
 
 > For a breakdown of each configuration variable, please refer to the [Configuration](/docs/Configuration.md) guide. 

docs/Basic-Integration.md

@@ -28,13 +28,17 @@ services:
       - '3000:3000'
     environment:
       HEADSCALE_URL: 'http://headscale:8080'
-      API_KEY: 'abcdefghijklmnopqrstuvwxyz'
       COOKIE_SECRET: 'abcdefghijklmnopqrstuvwxyz'
+
+      # These are all optional!
       HEADSCALE_CONTAINER: 'headscale'
+      API_KEY: 'abcdefghijklmnopqrstuvwxyz'
       OIDC_CLIENT_ID: 'headscale'
       OIDC_ISSUER: 'https://sso.example.com'
       OIDC_CLIENT_SECRET: 'super_secret_client_secret'
       DISABLE_API_KEY_LOGIN: 'true'
+
+      # These are the default values
       HOST: '0.0.0.0'
       PORT: '3000'
 ```

docs/Configuration.md

@@ -4,9 +4,8 @@ You can configure Headplane using environment variables.
 
 #### Required Variables
 
-- **`HEADSCALE_URL`**: The public URL of your Headscale server.
-- **`API_KEY`**: An API key used to issue new ones for sessions (keep expiry fairly long).
 - **`COOKIE_SECRET`**: A secret used to sign cookies (use a relatively long and random string).
+- **`HEADSCALE_URL`**: The public URL of your Headscale server (not required if using the configuration file).
 
 #### Optional Variables
 
@@ -24,6 +23,7 @@ If you use the Headscale configuration integration, these are not required.
 - **`OIDC_ISSUER`**: The issuer URL of your OIDC provider.
 - **`OIDC_CLIENT_ID`**: The client ID of your OIDC provider.
 - **`OIDC_CLIENT_SECRET`**: The client secret of your OIDC provider.
+- **`API_KEY`**: An API key used to issue new ones for sessions (keep expiry fairly long).
 - **`DISABLE_API_KEY_LOGIN`**: If you want to disable API key login, set this to `true`.
 
 Here's what an example with Authelia would look like if you used the same client for both Headscale and Headplane.

package.json

@@ -17,8 +17,9 @@
 		"@dnd-kit/modifiers": "^7.0.0",
 		"@dnd-kit/sortable": "^8.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
-		"@headlessui/react": "^1.7.18",
 		"@heroicons/react": "^2.1.3",
+		"@react-aria/toast": "3.0.0-beta.10",
+		"@react-stately/toast": "3.0.0-beta.2",
 		"@remix-run/node": "^2.8.1",
 		"@remix-run/react": "^2.8.1",
 		"@remix-run/serve": "^2.8.1",
@@ -31,8 +32,9 @@
 		"react-aria-components": "^1.1.1",
 		"react-codemirror-merge": "^4.21.25",
 		"react-dom": "^18.2.0",
-		"react-hot-toast": "^2.4.1",
 		"remix-utils": "^7.6.0",
+		"tailwind-merge": "^2.3.0",
+		"tailwindcss-react-aria-components": "^1.1.1",
 		"undici": "^6.10.2",
 		"usehooks-ts": "^3.0.2",
 		"yaml": "^2.4.1"
@@ -46,6 +48,7 @@
 		"eslint-config-tale": "^1.0.16",
 		"postcss": "^8.4.38",
 		"tailwindcss": "^3.4.1",
+		"tailwindcss-animate": "^1.0.7",
 		"typescript": "^5.1.6",
 		"vite": "^5.1.0",
 		"vite-tsconfig-paths": "^4.2.1"

pnpm-lock.yaml

@@ -23,12 +23,15 @@ dependencies:
   '@dnd-kit/utilities':
     specifier: ^3.2.2
     version: 3.2.2(react@18.2.0)
-  '@headlessui/react':
-    specifier: ^1.7.18
-    version: 1.7.18(react-dom@18.2.0)(react@18.2.0)
   '@heroicons/react':
     specifier: ^2.1.3
     version: 2.1.3(react@18.2.0)
+  '@react-aria/toast':
+    specifier: 3.0.0-beta.10
+    version: 3.0.0-beta.10(react@18.2.0)
+  '@react-stately/toast':
+    specifier: 3.0.0-beta.2
+    version: 3.0.0-beta.2(react@18.2.0)
   '@remix-run/node':
     specifier: ^2.8.1
     version: 2.8.1(typescript@5.4.3)
@@ -65,12 +68,15 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
-  react-hot-toast:
-    specifier: ^2.4.1
-    version: 2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0)
   remix-utils:
     specifier: ^7.6.0
     version: 7.6.0(@remix-run/node@2.8.1)(@remix-run/react@2.8.1)(react@18.2.0)
+  tailwind-merge:
+    specifier: ^2.3.0
+    version: 2.3.0
+  tailwindcss-react-aria-components:
+    specifier: ^1.1.1
+    version: 1.1.1(tailwindcss@3.4.1)
   undici:
     specifier: ^6.10.2
     version: 6.10.2
@@ -106,6 +112,9 @@ devDependencies:
   tailwindcss:
     specifier: ^3.4.1
     version: 3.4.1
+  tailwindcss-animate:
+    specifier: ^1.0.7
+    version: 1.0.7(tailwindcss@3.4.1)
   typescript:
     specifier: ^5.1.6
     version: 5.4.3
@@ -126,7 +135,6 @@ packages:
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
-    dev: true
 
   /@ampproject/remapping@2.3.0:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
@@ -1102,19 +1110,6 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@headlessui/react@1.7.18(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16 || ^17 || ^18
-      react-dom: ^16 || ^17 || ^18
-    dependencies:
-      '@tanstack/react-virtual': 3.2.0(react-dom@18.2.0)(react@18.2.0)
-      client-only: 0.0.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /@heroicons/react@2.1.3(react@18.2.0):
     resolution: {integrity: sha512-fEcPfo4oN345SoqdlCDdSa4ivjaKbk0jTd+oubcgNxnNgAfzysfwWfQUr+51wigiWHQQRiZNd1Ao0M5Y3M2EGg==}
     peerDependencies:
@@ -1178,7 +1173,6 @@ packages:
       strip-ansi-cjs: /strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: true
 
   /@jridgewell/gen-mapping@0.3.5:
     resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
@@ -1187,28 +1181,23 @@ packages:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.25
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.2.1:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.25:
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@jspm/core@2.0.1:
     resolution: {integrity: sha512-Lg3PnLp0QXpxwLIAuuJboLeRaIhrgJjeuh797QADg3xz8wGLugQOS5DpsE8A6i6Adgzf+bacllkKZG3J0tGfDw==}
@@ -1276,12 +1265,10 @@ packages:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
-    dev: true
 
   /@nodelib/fs.stat@2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
-    dev: true
 
   /@nodelib/fs.walk@1.2.8:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -1289,7 +1276,6 @@ packages:
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.17.1
-    dev: true
 
   /@npmcli/fs@3.1.0:
     resolution: {integrity: sha512-7kZUAaLscfgbwBQRbvdMYaZOWyMEcPTH/tJjnyAWJ/dvvs9Ef+CERx/qJb9GExJpl1qipaDGn7KqHnFGGixd0w==}
@@ -1340,7 +1326,6 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
     requiresBuild: true
-    dev: true
     optional: true
 
   /@react-aria/breadcrumbs@3.5.11(react@18.2.0):
@@ -1608,6 +1593,18 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-aria/landmark@3.0.0-beta.10(react@18.2.0):
+    resolution: {integrity: sha512-qFfAVgCUP/d+sFXCYVJHOMA8fD9VGBWcbJIbfz14X0sdyJ1gj5SL/m4o7cX3OsD9tgPz2A33c1FfmO2gN/qOVg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-aria/utils': 3.23.2(react@18.2.0)
+      '@react-types/shared': 3.22.1(react@18.2.0)
+      '@swc/helpers': 0.5.10
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /@react-aria/link@3.6.5(react@18.2.0):
     resolution: {integrity: sha512-kg8CxKqkciQFzODvLAfxEs8gbqNXFZCW/ISOE2LHYKbh9pA144LVo71qO3SPeYVVzIjmZeW4vEMdZwqkNozecw==}
     peerDependencies:
@@ -1960,6 +1957,22 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-aria/toast@3.0.0-beta.10(react@18.2.0):
+    resolution: {integrity: sha512-b4PZaCZBc8oiiZ4xxWA0pusPj0VBiNbGJsmyQSe9L0OS7/wL+Z+70xpUMzL+RzhtRuP/lNx7G9a92HwcxFfrog==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@react-aria/i18n': 3.10.2(react@18.2.0)
+      '@react-aria/interactions': 3.21.1(react@18.2.0)
+      '@react-aria/landmark': 3.0.0-beta.10(react@18.2.0)
+      '@react-aria/utils': 3.23.2(react@18.2.0)
+      '@react-stately/toast': 3.0.0-beta.2(react@18.2.0)
+      '@react-types/button': 3.9.2(react@18.2.0)
+      '@react-types/shared': 3.22.1(react@18.2.0)
+      '@swc/helpers': 0.5.10
+      react: 18.2.0
+    dev: false
+
   /@react-aria/toggle@3.10.2(react@18.2.0):
     resolution: {integrity: sha512-DgitscHWgI6IFgnvp2HcMpLGX/cAn+XX9kF5RJQbRQ9NqUgruU5cEEGSOLMrEJ6zXDa2xmOiQ+kINcyNhA+JLg==}
     peerDependencies:
@@ -2286,6 +2299,16 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@react-stately/toast@3.0.0-beta.2(react@18.2.0):
+    resolution: {integrity: sha512-LJT3VJ01VeQHTDt+6NwmRn4ma0plZWcWByAeJ24dLYJ0gUpHhHyCCIBB/C1BwZ3/eaNKn7/Crp5FONA6bBzDaA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0
+    dependencies:
+      '@swc/helpers': 0.5.10
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /@react-stately/toggle@3.7.2(react@18.2.0):
     resolution: {integrity: sha512-SHCF2btcoK57c4lyhucRbyPBAFpp0Pdp0vcPdn3hUgqbu6e5gE0CwG/mgFmZRAQoc7PRc7XifL0uNw8diJJI0Q==}
     peerDependencies:
@@ -2927,21 +2950,6 @@ packages:
       tslib: 2.6.2
     dev: false
 
-  /@tanstack/react-virtual@3.2.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-OEdMByf2hEfDa6XDbGlZN8qO6bTjlNKqjM3im9JG+u3mCL8jALy0T/67oDI001raUUPh1Bdmfn4ZvPOV5knpcg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    dependencies:
-      '@tanstack/virtual-core': 3.2.0
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
-  /@tanstack/virtual-core@3.2.0:
-    resolution: {integrity: sha512-P5XgYoAw/vfW65byBbJQCw+cagdXDT/qH6wmABiLt4v4YBT2q2vqCOhihe+D1Nt325F/S/0Tkv6C5z0Lv+VBQQ==}
-    dev: false
-
   /@types/acorn@4.0.6:
     resolution: {integrity: sha512-veQTnWP+1D/xbxVrPC3zHnCZRjSrKfhbMUlEA43iMZLu7EsnTtkJklIuwrCPbOi8YkvDQAiW05VQQFvvz9oieQ==}
     dependencies:
@@ -3344,12 +3352,10 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
-    dev: true
 
   /ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
@@ -3363,16 +3369,13 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
-    dev: true
 
   /any-promise@1.3.0:
     resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: true
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -3383,7 +3386,6 @@ packages:
 
   /arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-    dev: true
 
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
@@ -3515,7 +3517,6 @@ packages:
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
 
   /base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -3569,7 +3570,6 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
-    dev: true
 
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -3664,7 +3664,6 @@ packages:
   /camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /caniuse-lite@1.0.30001600:
     resolution: {integrity: sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==}
@@ -3798,7 +3797,6 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
@@ -3806,7 +3804,6 @@ packages:
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /comma-separated-tokens@2.0.3:
     resolution: {integrity: sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==}
@@ -3815,7 +3812,6 @@ packages:
   /commander@4.1.1:
     resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
     engines: {node: '>= 6'}
-    dev: true
 
   /compressible@2.0.18:
     resolution: {integrity: sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==}
@@ -3885,7 +3881,6 @@ packages:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
-    dev: true
 
   /css-what@6.1.0:
     resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==}
@@ -3896,10 +3891,10 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+    dev: true
 
   /data-uri-to-buffer@3.0.1:
     resolution: {integrity: sha512-WboRycPNsVw3B3TL559F7kuBUM4d8CgMEvk6xEJlOp7OBPjt6G7z8WMWlD2rOFZLk6OYfFIUGsCOWzcQH9K2og==}
@@ -4011,7 +4006,6 @@ packages:
 
   /didyoumean@1.2.2:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-    dev: true
 
   /diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
@@ -4027,7 +4021,6 @@ packages:
 
   /dlv@1.1.3:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-    dev: true
 
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
@@ -4059,7 +4052,6 @@ packages:
 
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: true
 
   /ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@@ -4070,11 +4062,9 @@ packages:
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true
 
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: true
 
   /encodeurl@1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
@@ -4679,7 +4669,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: true
 
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -4693,7 +4682,6 @@ packages:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
     dependencies:
       reusify: 1.0.4
-    dev: true
 
   /fault@2.0.1:
     resolution: {integrity: sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==}
@@ -4768,7 +4756,6 @@ packages:
     dependencies:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
-    dev: true
 
   /format@0.2.2:
     resolution: {integrity: sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==}
@@ -4892,7 +4879,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob@10.3.10:
     resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==}
@@ -4904,7 +4890,6 @@ packages:
       minimatch: 9.0.3
       minipass: 7.0.4
       path-scurry: 1.10.1
-    dev: true
 
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -4952,14 +4937,6 @@ packages:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
     dev: true
 
-  /goober@2.1.14(csstype@3.1.3):
-    resolution: {integrity: sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==}
-    peerDependencies:
-      csstype: ^3.0.10
-    dependencies:
-      csstype: 3.1.3
-    dev: false
-
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
@@ -5231,7 +5208,6 @@ packages:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
       hasown: 2.0.2
-    dev: true
 
   /is-data-view@1.0.1:
     resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==}
@@ -5268,7 +5244,6 @@ packages:
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
-    dev: true
 
   /is-generator-function@1.0.10:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
@@ -5422,7 +5397,6 @@ packages:
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: true
 
   /iterator.prototype@1.1.2:
     resolution: {integrity: sha512-DR33HMMr8EzwuRL8Y9D3u2BMj8+RqSE850jfGu59kS7tbmPLzGkZmVSfyCFSDxuZiEY6Rzt3T2NA/qU+NwVj1w==}
@@ -5441,7 +5415,6 @@ packages:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
-    dev: true
 
   /javascript-stringify@2.1.0:
     resolution: {integrity: sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==}
@@ -5450,7 +5423,6 @@ packages:
   /jiti@1.21.0:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
-    dev: true
 
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -5550,16 +5522,13 @@ packages:
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
-    dev: true
 
   /lilconfig@3.1.1:
     resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
     engines: {node: '>=14'}
-    dev: true
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
 
   /loader-utils@3.2.1:
     resolution: {integrity: sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==}
@@ -5624,7 +5593,6 @@ packages:
   /lru-cache@10.2.0:
     resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
     engines: {node: 14 || >=16.14}
-    dev: true
 
   /lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
@@ -5798,7 +5766,6 @@ packages:
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
-    dev: true
 
   /methods@1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
@@ -6081,7 +6048,6 @@ packages:
     dependencies:
       braces: 3.0.2
       picomatch: 2.3.1
-    dev: true
 
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -6119,7 +6085,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
-    dev: true
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -6161,7 +6126,6 @@ packages:
   /minipass@7.0.4:
     resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dev: true
 
   /minizlib@2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
@@ -6231,13 +6195,11 @@ packages:
       any-promise: 1.3.0
       object-assign: 4.1.1
       thenify-all: 1.6.0
-    dev: true
 
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
-    dev: true
 
   /natural-compare-lite@1.4.0:
     resolution: {integrity: sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==}
@@ -6329,12 +6291,10 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /object-hash@3.0.0:
     resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
     engines: {node: '>= 6'}
-    dev: true
 
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@@ -6547,11 +6507,9 @@ packages:
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
-    dev: true
 
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-scurry@1.10.1:
     resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
@@ -6559,7 +6517,6 @@ packages:
     dependencies:
       lru-cache: 10.2.0
       minipass: 7.0.4
-    dev: true
 
   /path-to-regexp@0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
@@ -6591,7 +6548,6 @@ packages:
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
-    dev: true
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -6606,12 +6562,10 @@ packages:
   /pify@2.3.0:
     resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /pkg-types@1.0.3:
     resolution: {integrity: sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==}
@@ -6649,7 +6603,6 @@ packages:
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
-    dev: true
 
   /postcss-js@4.0.1(postcss@8.4.38):
     resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
@@ -6659,7 +6612,6 @@ packages:
     dependencies:
       camelcase-css: 2.0.1
       postcss: 8.4.38
-    dev: true
 
   /postcss-load-config@4.0.2(postcss@8.4.38):
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
@@ -6676,7 +6628,6 @@ packages:
       lilconfig: 3.1.1
       postcss: 8.4.38
       yaml: 2.4.1
-    dev: true
 
   /postcss-modules-extract-imports@3.0.0(postcss@8.4.38):
     resolution: {integrity: sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==}
@@ -6743,7 +6694,6 @@ packages:
     dependencies:
       postcss: 8.4.38
       postcss-selector-parser: 6.0.16
-    dev: true
 
   /postcss-selector-parser@6.0.16:
     resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
@@ -6751,11 +6701,9 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
-    dev: true
 
   /postcss@8.4.38:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
@@ -6764,7 +6712,6 @@ packages:
       nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.2.0
-    dev: true
 
   /prelude-ls@1.2.1:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
@@ -6864,7 +6811,6 @@ packages:
 
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
 
   /range-parser@1.2.1:
     resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==}
@@ -6992,20 +6938,6 @@ packages:
       scheduler: 0.23.0
     dev: false
 
-  /react-hot-toast@2.4.1(csstype@3.1.3)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: '>=16'
-      react-dom: '>=16'
-    dependencies:
-      goober: 2.1.14(csstype@3.1.3)
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    transitivePeerDependencies:
-      - csstype
-    dev: false
-
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: true
@@ -7080,7 +7012,6 @@ packages:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
       pify: 2.3.0
-    dev: true
 
   /read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
@@ -7276,7 +7207,6 @@ packages:
       is-core-module: 2.13.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /resolve@2.0.0-next.5:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
@@ -7303,7 +7233,6 @@ packages:
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true
 
   /rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
@@ -7339,7 +7268,6 @@ packages:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
-    dev: true
 
   /sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
@@ -7469,12 +7397,10 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       shebang-regex: 3.0.0
-    dev: true
 
   /shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
-    dev: true
 
   /side-channel@1.0.6:
     resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==}
@@ -7492,7 +7418,6 @@ packages:
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
-    dev: true
 
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
@@ -7502,7 +7427,6 @@ packages:
   /source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /source-map-support@0.5.21:
     resolution: {integrity: sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==}
@@ -7573,7 +7497,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: true
 
   /string-width@5.1.2:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
@@ -7582,7 +7505,6 @@ packages:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
-    dev: true
 
   /string.prototype.matchall@4.0.11:
     resolution: {integrity: sha512-NUdh0aDavY2og7IbBPenWqR9exH+E26Sv8e0/eTe1tltDGZL+GtBkDAnnyBtmekfK6/Dq3MkcGtzXFEd1LQrtg==}
@@ -7653,14 +7575,12 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
   /strip-ansi@7.1.0:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
     dependencies:
       ansi-regex: 6.0.1
-    dev: true
 
   /strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
@@ -7706,7 +7626,6 @@ packages:
       mz: 2.7.0
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
-    dev: true
 
   /supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
@@ -7725,8 +7644,29 @@ packages:
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
+
+  /tailwind-merge@2.3.0:
+    resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
+    dependencies:
+      '@babel/runtime': 7.24.1
+    dev: false
+
+  /tailwindcss-animate@1.0.7(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.1
     dev: true
 
+  /tailwindcss-react-aria-components@1.1.1(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-ig2pJOz4Gb10uYbGrFiIb5Fs3hUlZ5fTaNfDmLMofVhwXLpyOY+swaSBNg3XzS0ccQHgag3vXxIuHQXVetKYQg==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+    dependencies:
+      tailwindcss: 3.4.1
+    dev: false
+
   /tailwindcss@3.4.1:
     resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
     engines: {node: '>=14.0.0'}
@@ -7756,7 +7696,6 @@ packages:
       sucrase: 3.35.0
     transitivePeerDependencies:
       - ts-node
-    dev: true
 
   /tar-fs@2.1.1:
     resolution: {integrity: sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==}
@@ -7799,13 +7738,11 @@ packages:
     engines: {node: '>=0.8'}
     dependencies:
       thenify: 3.3.1
-    dev: true
 
   /thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
     dependencies:
       any-promise: 1.3.0
-    dev: true
 
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
@@ -7843,7 +7780,6 @@ packages:
 
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-    dev: true
 
   /tsconfck@3.0.3(typescript@5.4.3):
     resolution: {integrity: sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==}
@@ -8112,7 +8048,6 @@ packages:
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /util@0.12.5:
     resolution: {integrity: sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==}
@@ -8320,7 +8255,6 @@ packages:
     hasBin: true
     dependencies:
       isexe: 2.0.0
-    dev: true
 
   /which@3.0.1:
     resolution: {integrity: sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==}
@@ -8337,7 +8271,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi@8.1.0:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
@@ -8346,7 +8279,6 @@ packages:
       ansi-styles: 6.2.1
       string-width: 5.1.2
       strip-ansi: 7.1.0
-    dev: true
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}

tailwind.config.ts

@@ -1,5 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import type { Config } from 'tailwindcss'
+import colors from 'tailwindcss/colors'
+import animate from 'tailwindcss-animate'
+import aria from 'tailwindcss-react-aria-components'
 
 export default {
 	content: ['./app/**/*.{js,jsx,ts,tsx}'],
@@ -17,9 +20,13 @@ export default {
 		extend: {
 			height: {
 				editor: 'calc(100vh - 20rem)'
+			},
+			colors: {
+				main: colors.slate,
+				ui: colors.neutral
 			}
 		}
 	},
-	plugins: []
+	plugins: [animate, aria]
 } satisfies Config