feat: implement raw acl editing on the web ui

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

@@ -0,0 +1,113 @@
+import { json } from '@codemirror/lang-json'
+import { useFetcher } from '@remix-run/react'
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
+import CodeMirror from '@uiw/react-codemirror'
+import clsx from 'clsx'
+import { useEffect, 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'
+
+type EditorProperties = {
+	readonly acl: string;
+	readonly setAcl: (acl: string) => void;
+	readonly mode: 'edit' | 'diff';
+
+	readonly data: {
+		hasAclWrite: boolean;
+		currentAcl: string;
+	};
+}
+
+export default function Editor({ data, acl, setAcl, mode }: EditorProperties) {
+	const [light, setLight] = useState(false)
+	const fetcher = useFetcher()
+
+	useEffect(() => {
+		const theme = window.matchMedia('(prefers-color-scheme: light)')
+		setLight(theme.matches)
+
+		theme.addEventListener('change', theme => {
+			setLight(theme.matches)
+		})
+	}, [])
+
+	return (
+
+		<>
+			<div className={clsx(
+				'border border-gray-200 dark:border-gray-700',
+				'rounded-b-lg rounded-tr-lg mb-2 overflow-hidden'
+			)}
+			>
+				{mode === 'edit' ? (
+					<CodeMirror
+						value={acl}
+						maxHeight='calc(100vh - 20rem)'
+						theme={light ? githubLight : githubDark}
+						extensions={[json()]}
+						readOnly={!data.hasAclWrite}
+						onChange={value => {
+							setAcl(value)
+						}}
+					/>
+				) : (
+					<div
+						className='overflow-y-scroll'
+						style={{ height: 'calc(100vh - 20rem)' }}
+					>
+						<CodeMirrorMerge
+							theme={light ? githubLight : githubDark}
+							orientation='a-b'
+						>
+							<CodeMirrorMerge.Original
+								readOnly
+								value={data.currentAcl}
+								extensions={[json()]}
+							/>
+							<CodeMirrorMerge.Modified
+								readOnly
+								value={acl}
+								extensions={[json()]}
+							/>
+						</CodeMirrorMerge>
+					</div>
+				)}
+			</div>
+
+			<Button
+				variant='emphasized'
+				className='text-sm w-fit mr-2'
+				onClick={() => {
+					fetcher.submit({
+						acl
+					}, {
+						method: 'PATCH',
+						encType: 'application/json'
+					})
+
+					toast('Updated tailnet ACL policy')
+				}}
+			>
+				{fetcher.state === 'idle' ? undefined : (
+					<Spinner className='w-3 h-3'/>
+				)}
+				Save
+			</Button>
+			<Button
+				variant='emphasized'
+				className={clsx(
+					'text-sm w-fit bg-gray-100 dark:bg-transparent',
+					'border border-gray-200 dark:border-gray-700'
+				)}
+				onClick={() => {
+					setAcl(data.currentAcl)
+				}}
+			>
+				Discard Changes
+			</Button>
+		</>
+	)
+}