feat: add proper error component

app/routes/_data.tsx

@@ -1,7 +1,8 @@
 import { Cog8ToothIcon, CpuChipIcon, GlobeAltIcon, LockClosedIcon, ServerStackIcon, UsersIcon } from '@heroicons/react/24/outline'
 import { type LoaderFunctionArgs, redirect } from '@remix-run/node'
-import { Outlet } from '@remix-run/react'
+import { Outlet, useRouteError } from '@remix-run/react'
 
+import { ErrorPopup } from '~/components/Error'
 import TabLink from '~/components/TabLink'
 import { HeadscaleError, pull } from '~/utils/headscale'
 import { destroySession, getSession } from '~/utils/sessions'
@@ -61,3 +62,25 @@ export default function Layout() {
 	)
 }
 
+export function ErrorBoundary() {
+	return (
+		<>
+			<header className='mb-16 bg-gray-800 text-white dark:bg-gray-700'>
+				<nav className='container mx-auto'>
+					<div className='flex items-center gap-x-2 mb-8 pt-4'>
+						<CpuChipIcon className='w-8 h-8'/>
+						<h1 className='text-2xl'>Headplane</h1>
+					</div>
+					<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'/>}/>
+						<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>
+			<ErrorPopup type='embedded'/>
+		</>
+	)
+}