feat: respect context in server

app/routes/settings/auth-keys.tsx

@@ -7,9 +7,10 @@ import Select from '~/components/Select';
 import TableList from '~/components/TableList';
 import type { PreAuthKey, User } from '~/types';
 import { post, pull } from '~/utils/headscale';
+import { noContext } from '~/utils/log';
 import { send } from '~/utils/res';
 import { getSession } from '~/utils/sessions.server';
-import { hp_getConfig } from '~/utils/state';
+import type { AppContext } from '~server/context/app';
 import AuthKeyRow from './components/key';
 import AddPreAuthKey from './dialogs/new';
 
@@ -90,14 +91,21 @@ export async function action({ request }: ActionFunctionArgs) {
 	}
 }
 
-export async function loader({ request }: LoaderFunctionArgs) {
-	const context = hp_getConfig();
+export async function loader({
+	request,
+	context,
+}: LoaderFunctionArgs<AppContext>) {
 	const session = await getSession(request.headers.get('Cookie'));
 	const users = await pull<{ users: User[] }>(
 		'v1/user',
 		session.get('hsApiKey')!,
 	);
 
+	if (!context) {
+		throw noContext();
+	}
+
+	const ctx = context.context;
 	const preAuthKeys = await Promise.all(
 		users.users.map((user) => {
 			const qp = new URLSearchParams();
@@ -113,7 +121,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 	return {
 		keys: preAuthKeys.flatMap((keys) => keys.preAuthKeys),
 		users: users.users,
-		server: context.headscale.public_url ?? context.headscale.url,
+		server: ctx.headscale.public_url ?? ctx.headscale.url,
 	};
 }
 

app/routes/settings/local-agent.tsx

@@ -1,22 +1,23 @@
 import { useMemo } from 'react';
-import { useLoaderData, type LoaderFunctionArgs } from 'react-router';
-import { getSession, commitSession } from '~/utils/sessions.server'
-import { queryAgent } from '~/utils/ws-agent'
-import AgentManagement from './components/agent/manage'
+import { type LoaderFunctionArgs, useLoaderData } from 'react-router';
+import { commitSession, getSession } from '~/utils/sessions.server';
+import { queryAgent } from '~/utils/ws-agent';
+import AgentManagement from './components/agent/manage';
 
 export async function loader({ request, context }: LoaderFunctionArgs) {
 	const { ws, wsAuthKey } = context;
 	const session = await getSession(request.headers.get('Cookie'));
 	const onboarding = session.get('agent_onboarding') ?? false;
 
-	const nodeKey = 'nodekey:542dad28354eb8d51e240aada7adf0222ba3ecc74af0bbd56123f03eefdb391b'
+	const nodeKey =
+		'nodekey:542dad28354eb8d51e240aada7adf0222ba3ecc74af0bbd56123f03eefdb391b';
 	const stats = await queryAgent([nodeKey]);
 
 	return {
 		configured: wsAuthKey !== undefined,
 		onboarding,
-		stats: stats[nodeKey]
-	}
+		stats: stats?.[nodeKey],
+	};
 }
 
 export default function Page() {
@@ -24,21 +25,18 @@ export default function Page() {
 
 	// Whether we show the onboarding or management UI
 	const management = useMemo(() => {
-		return data.configured && (data.onboarding === false)
+		return data.configured && data.onboarding === false;
 	}, [data.configured, data.onboarding]);
 
 	return (
 		<div className="flex flex-col gap-8 max-w-screen-lg">
 			{management ? (
-				<AgentManagement
-					reachable={true}
-					hostInfo={data.stats}
-				/>
+				<AgentManagement reachable={true} hostInfo={data.stats} />
 			) : (
-			<div>
-				<h1>Local Agent Coming Soon</h1>
-			</div>
+				<div>
+					<h1>Local Agent Coming Soon</h1>
+				</div>
 			)}
 		</div>
-	)
+	);
 }