officerdev/platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
pastilhas
2026-08-07 10:06:59 +00:00
co-authored by Claude Opus 5
parent 2c84bb34be
commit 1de1d925a5
18 changed files with 215 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/apps/officer-web/Screens/Dashboard/Calendar/CalendarScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
@@ -13,38 +12,16 @@ import { defaultLayout } from './defaultLayout';
// resolves to the first collection inside the panels rather than by redirecting, because until the
// collection list has loaded there is no canonical URL to redirect to.
const ALLOWED_APP_TYPES = new Set<string | null>(['calendar-nav', 'calendar-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'calendar-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;
}
export const CalendarScreen = () => {
const rawWorkspace = useDashboardState<LayoutNode>('screens/calendar', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/calendar', defaultLayout);
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['calendar-nav', 'calendar-view'], fallback: 'calendar-view' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/ChatHistory/index.tsx
+5 -35
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef } from 'react';
import { useEffect, useRef } from 'react';
import { useParams, useNavigate } from 'react-router';
import type { LayoutNode, SelectedSession } from 'officerdev';
import { WorkspaceView, chatListPath, cwdFromSplat } from 'officerdev';
@@ -11,28 +11,9 @@ import type { ClaudeSessionDetail } from 'state/useClaudeSessions';
import { usePanelChannel } from 'hooks/usePanelChannel';
import { defaultLayout } from './defaultLayout';
// Allowed panel app types for the /chat screen
const ALLOWED_APP_TYPES = new Set<string | null>(['chat-session-list', 'chat-detail', null]);
// How many messages to render on first open (anchored to the bottom); scroll-up pages older ones in.
const CHAT_TAIL = 20;
/** Recursively fix any panel that uses a wrong app type (e.g. officerdev/chat) */
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
if (!ALLOWED_APP_TYPES.has(node.appType)) {
return { ...node, appType: 'chat-detail' };
}
return node;
}
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;
}
type SessionListPageProps = {
isNew?: boolean;
};
@@ -45,25 +26,13 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
const client = useClient();
const selectedRef = useRef(selected);
selectedRef.current = selected;
const rawWorkspace = useDashboardState<LayoutNode>('screens/chat', defaultLayout);
// A layout persisted before the chat panels were renamed still names `officerdev/chat`, which no
// longer resolves; `appTypes` lands anything unknown on the detail panel.
const workspace = useDashboardState<LayoutNode>('screens/chat', defaultLayout);
const isMobile = useIsMobile();
const navigate = useNavigate();
const mobilePanelId = isMobile && (sessionId || isNew) ? 'chat-detail' : undefined;
// Normalize synchronously so the wrong panel never renders
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
// Persist the fix to the backend
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
// Retire a legacy `?cwd=`. Nothing reads it any more and nothing writes it, but a refresh re-requests
// the address bar verbatim — so one left over from before the path-based groups sits there forever,
// looking like it means something. On a bare /chat it still says which group you wanted, so upgrade
@@ -133,6 +102,7 @@ export const SessionListPage = ({ isNew }: SessionListPageProps) => {
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['chat-session-list', 'chat-detail'], fallback: 'chat-detail' }}
mobilePanelId={mobilePanelId}
onMobilePanelChange={(id) => {
// Back goes to the group's list, not the default one. On /chat/g/* that group is in the URL;
src/apps/officer-web/Screens/Dashboard/Contacts/ContactsScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
@@ -7,38 +6,16 @@ import { defaultLayout } from './defaultLayout';
// /contacts — the CardDAV half of the same sidecar as /calendar; see CalendarScreen for why the selected
// collection is a query param rather than a route segment.
const ALLOWED_APP_TYPES = new Set<string | null>(['contacts-nav', 'contacts-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'contacts-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;
}
export const ContactsScreen = () => {
const rawWorkspace = useDashboardState<LayoutNode>('screens/contacts', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/contacts', defaultLayout);
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['contacts-nav', 'contacts-view'], fallback: 'contacts-view' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Gitea/GiteaScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import { Navigate, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_GITEA_SECTION, giteaSectionPath, isGiteaSection } from 'officerdev';
@@ -13,35 +12,9 @@ import { defaultLayout } from './defaultLayout';
// between themselves over a channel. This screen backs both /gitea and /gitea/:section and is the single
// place that decides what an absent or bogus section means.
const ALLOWED_APP_TYPES = new Set<string | null>(['gitea-nav', 'gitea-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'gitea-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;
}
export const GiteaScreen = () => {
const { section, owner, name } = useParams();
const rawWorkspace = useDashboardState<LayoutNode>('screens/gitea', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/gitea', defaultLayout);
// Bare /gitea, or a section that doesn't exist, resolves to a canonical URL rather than rendering a default
// while the address bar says something else — the nav highlight is derived from the URL.
@@ -55,7 +28,11 @@ export const GiteaScreen = () => {
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['gitea-nav', 'gitea-view'], fallback: 'gitea-view' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Headscale/HeadscaleScreen.tsx
+14 -23
View File
@@ -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>
);
};
src/apps/officer-web/Screens/Dashboard/Invoices/InvoicesScreen.tsx
+6 -29
View File
@@ -1,5 +1,4 @@
import type { LayoutNode } from 'officerdev';
import { useEffect, useMemo } from 'react';
import { Navigate, useParams } from 'react-router';
import { DEFAULT_INVOICES_SECTION, invoicesSectionPath, isInvoicesSection, WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
@@ -14,35 +13,9 @@ import { defaultLayout } from './defaultLayout';
// params. So the panels read the URL rather than passing state to each other, and this screen is the single
// place that decides what an absent or bogus section means.
const ALLOWED_APP_TYPES = new Set<string | null>(['invoices-nav', 'invoices-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'invoices-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;
}
export const InvoicesScreen = () => {
const { section } = useParams();
const rawWorkspace = useDashboardState<LayoutNode>('screens/invoices', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/invoices', defaultLayout);
// Bare /invoices, or a section that doesn't exist, resolves to a canonical URL rather than rendering a
// default while the address bar says something else — the nav highlight is derived from the URL.
@@ -52,7 +25,11 @@ export const InvoicesScreen = () => {
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['invoices-nav', 'invoices-view'], fallback: 'invoices-view' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Jellyfin/JellyfinScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import { Navigate, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_JELLYFIN_SECTION, jellyfinSectionPath, isJellyfinSection } from 'officerdev';
@@ -16,35 +15,9 @@ import { defaultLayout } from './defaultLayout';
// The open section is :section in the URL; which library, which item and what is playing are in the query
// string. Nothing about "what is open" lives in a panel channel.
const ALLOWED_APP_TYPES = new Set<string | null>(['jellyfin-nav', 'jellyfin-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'jellyfin-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;
}
export const JellyfinScreen = () => {
const { section } = useParams();
const rawWorkspace = useDashboardState<LayoutNode>('screens/jellyfin', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/jellyfin', defaultLayout);
// Bare /jellyfin, or a section that doesn't exist, canonicalises rather than rendering a default behind a
// URL that names something else — the nav highlight comes from the router, so a bogus URL highlights nothing.
@@ -54,7 +27,11 @@ export const JellyfinScreen = () => {
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['jellyfin-nav', 'jellyfin-view'], fallback: 'jellyfin-view' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Music/MusicScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
@@ -7,38 +6,16 @@ import { defaultLayout } from './defaultLayout';
// /music uses the Workspace/Panel system (like /chat): two vertical panels — the library browser
// (music-browser) and the content/detail (music-detail) — coordinating via the 'music:cwd' channel.
const ALLOWED_APP_TYPES = new Set<string | null>(['music-browser', 'music-detail', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'music-detail' };
}
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;
}
export const MusicScreen = () => {
const rawWorkspace = useDashboardState<LayoutNode>('screens/music', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/music', defaultLayout);
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['music-browser', 'music-detail'], fallback: 'music-detail' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Photos/PhotosScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import { Navigate, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_PHOTOS_SECTION, photosSectionPath, isPhotosSection } from 'officerdev';
@@ -12,35 +11,9 @@ import { defaultLayout } from './defaultLayout';
// The open section is :section in the URL; deeper selection (which asset, album, person, search) is in the
// query string. Nothing about "what is open" lives in a panel channel.
const ALLOWED_APP_TYPES = new Set<string | null>(['photos-nav', 'photos-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'photos-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;
}
export const PhotosScreen = () => {
const { section } = useParams();
const rawWorkspace = useDashboardState<LayoutNode>('screens/photos', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/photos', defaultLayout);
// Bare /photos, or a section that doesn't exist, canonicalises rather than rendering a default behind a URL
// that names something else — the nav highlight comes from the router, so a bogus URL highlights nothing.
@@ -50,7 +23,11 @@ export const PhotosScreen = () => {
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['photos-nav', 'photos-view'], fallback: 'photos-view' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/QrTransfer/QrTransferScreen.tsx
+8 -22
View File
@@ -1,4 +1,3 @@
import { useMemo } from 'react';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
@@ -14,27 +13,14 @@ import { defaultLayout } from './defaultLayout';
// Both panels are pure client-side: nothing about a transfer reaches the server, which is the point.
// The receiver needs a secure origin for camera access — over the tailnet with HTTPS that is satisfied.
const ALLOWED_APP_TYPES = new Set<string | null>(['qr-send', 'qr-receive', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'qr-send' };
}
const children = node.children.map((c) => {
const fixed = normalizeLayout(c.node);
return fixed === c.node ? c : { ...c, node: fixed };
});
return children.some((c, i) => c !== node.children[i]) ? { ...node, children } : node;
}
export const QrTransferScreen = () => {
const rawWorkspace = useDashboardState<LayoutNode>('screens/qr-transfer', defaultLayout);
const workspace = useDashboardState<LayoutNode>('screens/qr-transfer', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
return <WorkspaceView workspace={workspace} locked />;
return (
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['qr-send', 'qr-receive'], fallback: 'qr-send' }}
/>
);
};
src/apps/officer-web/Screens/Dashboard/Soulseek/SoulseekScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
@@ -8,40 +7,18 @@ import { defaultLayout } from './defaultLayout';
// the left and a section view (soulseek-view) on the right, coordinating via the 'soulseek:section'
// channel. Both talk to slskd through the /api/slskd auth proxy.
const ALLOWED_APP_TYPES = new Set<string | null>(['soulseek-nav', 'soulseek-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'soulseek-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;
}
export const SoulseekScreen = () => {
// v2: nav + view (replaced the earlier search + transfers split) — new key so the old persisted
// layout doesn't resurrect as two mismatched panels.
const rawWorkspace = useDashboardState<LayoutNode>('screens/soulseek-v2', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/soulseek-v2', defaultLayout);
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['soulseek-nav', 'soulseek-view'], fallback: 'soulseek-view' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/SystemMonitor/SystemMonitorScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
@@ -7,38 +6,16 @@ import { defaultLayout } from './defaultLayout';
// /system-monitor uses the Workspace/Panel system (like /music): a horizontal split with an (empty for
// now) left panel and the system snapshot on the right.
const ALLOWED_APP_TYPES = new Set<string | null>(['monitor-side', 'monitor-main', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'monitor-main' };
}
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;
}
export const SystemMonitorScreen = () => {
const rawWorkspace = useDashboardState<LayoutNode>('screens/system-monitor', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/system-monitor', defaultLayout);
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['monitor-side', 'monitor-main'], fallback: 'monitor-main' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Transmission/TransmissionScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import { Navigate, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import {
@@ -19,35 +18,9 @@ import { defaultLayout } from './defaultLayout';
// backs both /transmission and /transmission/:section and is the single place that decides what an absent or
// bogus section means.
const ALLOWED_APP_TYPES = new Set<string | null>(['transmission-nav', 'transmission-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'transmission-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;
}
export const TransmissionScreen = () => {
const { section } = useParams();
const rawWorkspace = useDashboardState<LayoutNode>('screens/transmission', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/transmission', defaultLayout);
// Bare /transmission, or a section that doesn't exist, resolves to a canonical URL rather than rendering a
// default while the address bar says something else — the nav highlight is derived from the URL.
@@ -57,7 +30,11 @@ export const TransmissionScreen = () => {
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['transmission-nav', 'transmission-view'], fallback: 'transmission-view' }}
/>
</div>
);
};
src/apps/officer-web/Screens/Dashboard/Wallet/WalletScreen.tsx
+6 -29
View File
@@ -1,4 +1,3 @@
import { useEffect, useMemo } from 'react';
import { Navigate, useLocation, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_WALLET_SECTION, walletSectionPath, isWalletSection } from 'officerdev';
@@ -15,36 +14,10 @@ import { defaultLayout } from './defaultLayout';
// themselves over a channel. This screen backs both /wallet and /wallet/:section and is the single place
// that decides what an absent or bogus section means.
const ALLOWED_APP_TYPES = new Set<string | null>(['wallet-nav', 'wallet-view', null]);
function normalizeLayout(node: LayoutNode): LayoutNode {
if (node.type === 'panel') {
return ALLOWED_APP_TYPES.has(node.appType) ? node : { ...node, appType: 'wallet-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;
}
export const WalletScreen = () => {
const { section } = useParams();
const { search } = useLocation();
const rawWorkspace = useDashboardState<LayoutNode>('screens/wallet', defaultLayout);
const workspace = useMemo(() => {
const fixed = normalizeLayout(rawWorkspace.value);
if (fixed === rawWorkspace.value) return rawWorkspace;
return { ...rawWorkspace, value: fixed };
}, [rawWorkspace]);
useEffect(() => {
if (rawWorkspace.isLoaded && workspace.value !== rawWorkspace.value) {
rawWorkspace.setValue(workspace.value);
}
}, [rawWorkspace.isLoaded, workspace.value, rawWorkspace.value]);
const workspace = useDashboardState<LayoutNode>('screens/wallet', defaultLayout);
// Bare /wallet, or a section that doesn't exist, resolves to a canonical URL rather than rendering a
// default while the address bar says something else — the nav highlight is derived from the URL. The
@@ -56,7 +29,11 @@ export const WalletScreen = () => {
return (
<div className="h-full w-full pt-2">
<WorkspaceView workspace={workspace} locked />
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['wallet-nav', 'wallet-view'], fallback: 'wallet-view' }}
/>
</div>
);
};
src/workspaces/officerdev/src/components/Workspace/WorkspaceView.tsx
+26 -3
View File
@@ -5,7 +5,7 @@ import { useIsMobile } from 'hooks/useIsMobile';
import { useSessionState } from 'hooks/useSessionState';
import type { LayoutNode, DashboardState, EphemeralPanels, PanelComponents, PanelConfig } from './types';
import type { DropPosition } from './layout-utils';
import { splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, countPanels, setZoom, setPanelConfig, collectPanelConfigs, findPanelApp } from './layout-utils';
import { splitPanel, removePanel, setApp, updateSizes, swapPanels, movePanel, countPanels, setZoom, setPanelConfig, collectPanelConfigs, findPanelApp, normalizeLayout } from './layout-utils';
import { WorkspaceProvider } from './WorkspaceContext';
import { parseWorkspaceKey } from './workspace-identity';
import { WorkspaceRenderer } from './WorkspaceRenderer';
@@ -14,6 +14,17 @@ import { useAppRegistry } from '../../AppRegistry/useAppRegistry';
type WorkspaceViewProps = {
workspace: DashboardState;
locked?: boolean;
/**
* Pin every panel to one of these app types, replacing anything else with `fallback` and writing the
* repair back. A locked screen should always pass this: its layout is persisted user state that
* outlives the code, and an appType the screen no longer renders becomes an empty box the user cannot
* get out of, because a locked screen has no app picker.
*
* This used to be fourteen character-identical `normalizeLayout` functions in fourteen screens, each
* with its own `useMemo` and persist-back `useEffect` — which is how nine screens ended up with no
* guard at all and one with a guard that re-ran forever because it never wrote the correction back.
*/
appTypes?: { allowed: readonly string[]; fallback: string };
cwd?: string;
root?: string;
components?: PanelComponents;
@@ -24,12 +35,24 @@ type WorkspaceViewProps = {
const noop = () => {};
export const WorkspaceView = ({ workspace, locked, cwd = '~', root, components, ephemeral, mobilePanelId, onMobilePanelChange }: WorkspaceViewProps) => {
export const WorkspaceView = ({ workspace, locked, appTypes, cwd = '~', root, components, ephemeral, mobilePanelId, onMobilePanelChange }: WorkspaceViewProps) => {
const { registry } = useAppRegistry();
const isMobile = useIsMobile();
const layout = workspace.value;
// Deliberately not memoised. `normalizeLayout` returns its input by reference when nothing needed
// fixing, so the identity everything downstream depends on is already stable; a `useMemo` here would
// only add a dependency array to get wrong, and the callers pass a fresh object literal for `appTypes`
// anyway, which would defeat it. The walk is a handful of nodes.
const layout = appTypes ? normalizeLayout(workspace.value, appTypes.allowed, appTypes.fallback) : workspace.value;
const onLayoutChange = workspace.setValue;
// Write the repair back, so a layout is fixed once rather than re-fixed on every mount for the rest of
// its life. Terminates because the normalised tree normalises to itself.
const rawLayout = workspace.value;
useEffect(() => {
if (!workspace.isLoaded || layout === rawLayout) return;
onLayoutChange(layout);
}, [workspace.isLoaded, layout, rawLayout, onLayoutChange]);
const [swapSourceId, setSwapSourceId] = useState<string | null>(null);
const [dragSourceId, setDragSourceId] = useState<string | null>(null);
// Per tab and per dashboard: maximising the chat panel and refreshing should come back maximised, while
src/workspaces/officerdev/src/components/Workspace/index.ts
+1
View File
@@ -27,6 +27,7 @@ export {
setPanelConfig,
collectPanelConfigs,
findPanelApp,
normalizeLayout,
} from './layout-utils';
export type { WorkspaceIdentity } from './workspace-identity';
export { parseWorkspaceKey } from './workspace-identity';
src/workspaces/officerdev/src/components/Workspace/layout-utils.test.ts
+65
View File
@@ -7,6 +7,7 @@ import {
findPanelApp,
hasAnyApp,
movePanel,
normalizeLayout,
pruneEmptyPanels,
removePanel,
setApp,
@@ -548,3 +549,67 @@ describe('findPanelApp', () => {
expect(findPanelApp(panel('only', 'chat'), 'only')).toBe('chat');
});
});
// The guard that keeps a locked screen renderable. It runs against persisted state that outlives the code
// that wrote it, so the reference-equality contract is the load-bearing part: it is what tells the caller
// whether there is a repair worth writing back, and a normaliser that always returned a new tree would
// PATCH the server on every mount of every screen.
describe('normalizeLayout', () => {
const ALLOWED = ['nav', 'view'];
test('returns the same tree by reference when nothing needs fixing', () => {
const root = group('g', 'horizontal', [panel('p1', 'nav'), panel('p2', 'view')]);
expect(normalizeLayout(root, ALLOWED, 'view')).toBe(root);
});
test('leaves empty panels alone — null is always allowed', () => {
const root = group('g', 'horizontal', [panel('p1'), panel('p2', 'view')]);
expect(normalizeLayout(root, ALLOWED, 'view')).toBe(root);
});
test('replaces an app the screen does not know with the fallback', () => {
const root = group('g', 'horizontal', [panel('p1', 'renamed-away'), panel('p2', 'view')]);
const next = normalizeLayout(root, ALLOWED, 'view');
expect(next).not.toBe(root);
expect(find(next, 'p1')!.appType).toBe('view');
// The panel keeps its id and its position; only the app it names changes.
expect(ids(next)).toEqual(['p1', 'p2']);
});
test('drops the config with the app that owned it', () => {
// The same rule `setApp` follows: a config belongs to whichever app wrote it, and the fallback would
// read the previous occupant's settings as its own.
const root = group('g', 'horizontal', [panel('p1', 'gone', { config: { agentName: 'frontend' } })]);
const fixed = find(normalizeLayout(root, ALLOWED, 'view'), 'p1')!;
expect(fixed.appType).toBe('view');
expect('config' in fixed).toBe(false);
});
test('fixes nested panels and rebuilds only the branches that changed', () => {
const clean = group('h', 'vertical', [panel('p1', 'nav'), panel('p2', 'view')]);
const root = group('g', 'horizontal', [clean, group('k', 'vertical', [panel('p3', 'stale')])]);
const next = normalizeLayout(root, ALLOWED, 'view') as LayoutGroup;
expect(find(next, 'p3')!.appType).toBe('view');
// The untouched branch is carried through by reference, which is what keeps its panels mounted.
expect(next.children[0]!.node).toBe(clean);
});
test('a normalised tree normalises to itself — the persist-back cannot loop', () => {
const root = group('g', 'horizontal', [panel('p1', 'stale'), panel('p2', 'view')]);
const once = normalizeLayout(root, ALLOWED, 'view');
expect(normalizeLayout(once, ALLOWED, 'view')).toBe(once);
});
test('handles a bare panel as the whole tree', () => {
expect((normalizeLayout(panel('only', 'stale'), ALLOWED, 'view') as LayoutPanel).appType).toBe('view');
const ok = panel('only', 'nav');
expect(normalizeLayout(ok, ALLOWED, 'view')).toBe(ok);
});
});
src/workspaces/officerdev/src/components/Workspace/layout-utils.ts
+30
View File
@@ -132,6 +132,36 @@ export function updateSizes(root: LayoutNode, groupId: string, sizes: number[]):
return { ...root, children: newChildren };
}
/**
* Pin every panel in a tree to an app the screen actually knows how to render.
*
* A locked screen's layout is persisted user state, so it outlives the code that wrote it: rename an
* appType, drop a panel from a screen, restore an old row, and the stored tree still names something the
* screen has no answer for. `PanelSlot` renders that as an empty bordered box with no picker — and on a
* locked screen there is no way for the user to get out of it.
*
* Returns the input by reference when nothing needed fixing, which is what lets the caller tell "this
* layout was already fine" from "this layout was repaired and should be written back".
*
* `null` — an empty panel — is always allowed. It is a state of the framework rather than an app, every
* hand-rolled copy of this allowed it, and a screen that forgot to would rewrite each of its empty panels
* to the fallback on first load.
*/
export function normalizeLayout(node: LayoutNode, allowed: readonly string[], fallback: string): LayoutNode {
if (node.type === 'panel') {
if (node.appType === null || allowed.includes(node.appType)) return node;
// The config goes with the app that owned it. Whatever is in there was written by the app this panel
// is no longer running, and handing it to the fallback is the same mistake `setApp` avoids.
const { config: _drop, ...rest } = node;
return { ...rest, appType: fallback };
}
const children = node.children.map((child) => {
const fixed = normalizeLayout(child.node, allowed, fallback);
return fixed === child.node ? child : { ...child, node: fixed };
});
return children.some((c, i) => c !== node.children[i]) ? { ...node, children } : node;
}
export function pruneEmptyPanels(root: LayoutNode): LayoutNode | null {
if (root.type === 'panel') {
return root.appType ? root : null;