make the appType allow-list a prop instead of fourteen copies

Every locked screen shipped the same recursive normaliser: an ALLOWED_APP_TYPES set, a
normalizeLayout, a useMemo to apply it before the wrong panel could render, and a useEffect to
persist the fix. Fourteen copies, character-for-character identical except the two names — so a
fifteenth screen was a copy-paste, and a bug in the shape was a bug in fourteen places.

It is now `<WorkspaceView appTypes={{ allowed, fallback }} />`. WorkspaceView normalises before it
renders and persists the diff itself, which is the same two effects the screens were writing by hand.

One deliberate behaviour change: the framework normaliser drops `config` when it replaces an app.
The fourteen copies did `{ ...node, appType: fallback }`, keeping the old app's config on the panel
the new app now owns. That is the opposite of what `setApp` does, and a config belongs to whoever
wrote it.

Headscale keeps a local useMemo. Its check is not "is this appType allowed" but "is the server
picker present at all" — a layout saved before that panel existed is discarded for the default
wholesale. That is about a panel being missing, which the allow-list cannot see.

QrTransfer gains a persist-back it never had: it normalised on read and threw the result away every
time.

Tests: normalizeLayout is pinned on reference-identity for a no-op, null always allowed, config
dropped on replacement, rebuilding only changed branches, and idempotence — because a normaliser
that does not normalise to itself makes the persist-back an infinite write loop.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

src/apps/officer-web/Screens/Dashboard/Headscale/HeadscaleScreen.tsx

@@ -15,20 +15,6 @@ import { defaultLayout } from './defaultLayout';
 // between themselves over a channel. This screen backs both /headscale and /headscale/:section and is the
 // single place that decides what an absent or bogus section means.
 
-const ALLOWED_APP_TYPES = new Set<string | null>(['headscale-servers', 'headscale-nav', 'headscale-view', null]);
-
-function normalizeLayout(node: LayoutNode): LayoutNode {
-  if (node.type === 'panel') {
-    return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'headscale-view' };
-  }
-  const children = node.children.map((c) => {
-    const fixed = normalizeLayout(c.node);
-    return fixed === c.node ? c : { ...c, node: fixed };
-  });
-  const changed = children.some((c, i) => c !== node.children[i]);
-  return changed ? { ...node, children } : node;
-}
-
 function hasAppType(node: LayoutNode, appType: string): boolean {
   if (node.type === 'panel') return node.appType === appType;
   return node.children.some((c) => hasAppType(c.node, appType));
@@ -38,15 +24,13 @@ export const HeadscaleScreen = () => {
   const { section } = useParams();
   const rawWorkspace = useDashboardState<LayoutNode>('screens/headscale', defaultLayout);
 
+  // A layout saved before the server picker existed has no panel for it, and nothing else would ever add
+  // one — so it is rebuilt from the default. That costs a one-time reset of any manual sizing, which is
+  // cheaper than a screen permanently missing a panel. Pinning the app types is `appTypes` below; this is
+  // the part the framework can't do, because it is about a panel that is *missing* rather than wrong.
   const workspace = useMemo(() => {
-    // A layout saved before the server picker existed has no panel for it, and nothing else would ever add
-    // one — so it is rebuilt from the default. That costs a one-time reset of any manual sizing, which is
-    // cheaper than a screen permanently missing a panel.
-    const fixed = hasAppType(rawWorkspace.value, 'headscale-servers')
-      ? normalizeLayout(rawWorkspace.value)
-      : defaultLayout;
-    if (fixed === rawWorkspace.value) return rawWorkspace;
-    return { ...rawWorkspace, value: fixed };
+    if (hasAppType(rawWorkspace.value, 'headscale-servers')) return rawWorkspace;
+    return { ...rawWorkspace, value: defaultLayout };
   }, [rawWorkspace]);
 
   useEffect(() => {
@@ -64,7 +48,14 @@ export const HeadscaleScreen = () => {
 
   return (
     <div className="h-full w-full pt-2">
-      <WorkspaceView workspace={workspace} locked />
+      <WorkspaceView
+        workspace={workspace}
+        locked
+        appTypes={{
+          allowed: ['headscale-servers', 'headscale-nav', 'headscale-view'],
+          fallback: 'headscale-view',
+        }}
+      />
     </div>
   );
 };