Files
platform/src/apps/officer-web/Screens/Dashboard/Wallet/WalletScreen.tsx
T
pastilhasandClaude Opus 5 1de1d925a5 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>
2026-08-07 10:06:59 +00:00

40 lines
2.0 KiB
TypeScript

import { Navigate, useLocation, useParams } from 'react-router';
import type { LayoutNode } from 'officerdev';
import { WorkspaceView, DEFAULT_WALLET_SECTION, walletSectionPath, isWalletSection } from 'officerdev';
import { useDashboardState } from 'state/useDashboardState';
import { defaultLayout } from './defaultLayout';
// /wallet uses the Workspace/Panel system (like /transmission): the wallet list and section nav on the left,
// the section itself on the right. Both talk to the officer-wallet sidecar through the /api/wallet auth
// proxy, which holds no key material of its own — seeds live encrypted in the sidecar and are decrypted
// there only for the length of an unlock window.
//
// The open section is :section in the URL, the open wallet is ?wallet= and any coin-control selection is
// ?coins=, so both panels read the URL with useParams/useSearchParams rather than passing state between
// 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.
export const WalletScreen = () => {
const { section } = useParams();
const { search } = useLocation();
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
// ?wallet= param is deliberately carried through rather than dropped: /wallet?wallet=3 is a legitimate
// deep link and canonicalising the section must not silently change which wallet is open.
if (!isWalletSection(section)) {
return <Navigate to={`${walletSectionPath(DEFAULT_WALLET_SECTION)}${search}`} replace />;
}
return (
<div className="h-full w-full pt-2">
<WorkspaceView
workspace={workspace}
locked
appTypes={{ allowed: ['wallet-nav', 'wallet-view'], fallback: 'wallet-view' }}
/>
</div>
);
};