perf: switch to SSE dispatched changes

Previously we would use naive revalidators which would invalidate EVERY
SINGLE action loader every 3 seconds, resulting in several fetches. It
would also bubble fetches across the layout actions into the individual
pages.

This new approach selectively has live stores of resources which then
poll for changes on the server side and then dispatches updates to the
client via a new /events/live SSE endpoint.

app/routes/settings/auth-keys/overview.tsx

@@ -6,6 +6,7 @@ import Link from "~/components/link";
 import Notice from "~/components/Notice";
 import Select from "~/components/Select";
 import TableList from "~/components/TableList";
+import { usersResource } from "~/server/headscale/live-store";
 import { Capabilities } from "~/server/web/roles";
 import type { PreAuthKey } from "~/types";
 import type { User } from "~/types/User";
@@ -22,7 +23,8 @@ export async function loader({ request, context }: Route.LoaderArgs) {
   const apiKey = context.auth.getHeadscaleApiKey(principal, context.oidc?.apiKey);
   const api = context.hsApi.getRuntimeClient(apiKey);
 
-  const users = await api.getUsers();
+  const usersSnap = await context.hsLive.get(usersResource, api);
+  const users = usersSnap.data;
 
   let keys: { user: User | null; preAuthKeys: PreAuthKey[] }[];
   let missing: { user: User; error: unknown }[] = [];