feat: update more primitives to use the new api

app/layouts/dashboard.tsx

@@ -1,24 +1,21 @@
-import { type LoaderFunctionArgs, Outlet, redirect } from 'react-router';
+import { Outlet, redirect } from 'react-router';
 import { ErrorPopup } from '~/components/Error';
-import type { LoadContext } from '~/server';
 import { pruneEphemeralNodes } from '~/server/db/pruner';
 import ResponseError from '~/server/headscale/api/response-error';
 import log from '~/utils/log';
+import type { Route } from './+types/dashboard';
 
-export async function loader({
-	request,
-	context,
-	...rest
-}: LoaderFunctionArgs<LoadContext>) {
-	const healthy = await context.client.healthcheck();
+export async function loader({ request, context, ...rest }: Route.LoaderArgs) {
 	const session = await context.sessions.auth(request);
+	const api = context.hsApi.getRuntimeClient(session.api_key);
 	await pruneEphemeralNodes({ context, request, ...rest });
+	const healthy = await api.isHealthy();
 
 	// We shouldn't session invalidate if Headscale is down
-	// TODO: Notify in the logs or the UI that OIDC auth key is wrong if enabled
+	// TODO: Notify in the logs or the UI whether or not the OIDC auth key is wrong if enabled
 	if (healthy) {
 		try {
-			await context.client.get('v1/apikey', session.api_key);
+			await api.getApiKeys();
 		} catch (error) {
 			if (error instanceof ResponseError) {
 				log.debug('api', 'API Key validation failed %o', error);

app/layouts/shell.tsx

@@ -1,26 +1,18 @@
 import { eq } from 'drizzle-orm';
 import { CircleCheckIcon } from 'lucide-react';
-import {
-	LoaderFunctionArgs,
-	Outlet,
-	redirect,
-	useLoaderData,
-} from 'react-router';
+import { Outlet, redirect } from 'react-router';
 import Button from '~/components/Button';
 import Card from '~/components/Card';
 import Footer from '~/components/Footer';
 import Header from '~/components/Header';
-import type { LoadContext } from '~/server';
 import { users } from '~/server/db/schema';
 import { Capabilities } from '~/server/web/roles';
 import toast from '~/utils/toast';
+import { Route } from './+types/shell';
 
 // This loads the bare minimum for the application to function
 // So we know that if context fails to load then well, oops?
-export async function loader({
-	request,
-	context,
-}: LoaderFunctionArgs<LoadContext>) {
+export async function loader({ request, context }: Route.LoaderArgs) {
 	try {
 		const session = await context.sessions.auth(request);
 		if (
@@ -39,6 +31,7 @@ export async function loader({
 			}
 		}
 
+		const api = context.hsApi.getRuntimeClient(session.api_key);
 		const check = await context.sessions.check(request, Capabilities.ui_access);
 		return {
 			config: context.hs.c,
@@ -62,7 +55,7 @@ export async function loader({
 				),
 			},
 			onboarding: request.url.endsWith('/onboarding'),
-			healthy: await context.client.healthcheck(),
+			healthy: await api.isHealthy(),
 		};
 	} catch {
 		return redirect('/login', {
@@ -73,14 +66,12 @@ export async function loader({
 	}
 }
 
-export default function Shell() {
-	const data = useLoaderData<typeof loader>();
-
+export default function Shell({ loaderData }: Route.ComponentProps) {
 	return (
 		<>
-			<Header {...data} />
+			<Header {...loaderData} />
 			{/* Always show the outlet if we are onboarding */}
-			{(data.onboarding ? true : data.uiAccess) ? (
+			{(loaderData.onboarding ? true : loaderData.uiAccess) ? (
 				<Outlet />
 			) : (
 				<Card className="mx-auto w-fit mt-24">
@@ -96,13 +87,13 @@ export default function Shell() {
 						className="flex text-md font-mono"
 						onPress={async () => {
 							await navigator.clipboard.writeText(
-								`tailscale up --login-server=${data.url}`,
+								`tailscale up --login-server=${loaderData.url}`,
 							);
 
 							toast('Copied to clipboard');
 						}}
 					>
-						tailscale up --login-server={data.url}
+						tailscale up --login-server={loaderData.url}
 					</Button>
 					<p className="text-xs mt-1 opacity-50 text-center">
 						Click this button to copy the command.
@@ -113,7 +104,7 @@ export default function Shell() {
 					</p>
 				</Card>
 			)}
-			<Footer {...data} />
+			<Footer {...loaderData} />
 		</>
 	);
 }