Figma alignment, batch 2A: sidebar navigation like Figma

For agentic workers: subagent-driven. One implementation task (FB1), then review.

Goal: the sidebar shows exactly Figma’s structure. Every screen the app has stays reachable.

Spec: the Figma file xjx0pz8JSVeCqP1kYg3elT, sidebar instance 126:1565 in frame 123:7183. Figma’s sidebar has three groups:

The user approved this structure on 2026-09-26. Read the batch 1 audit docs/superpowers/specs/2026-09-25-figma-alignment-audit.md §1 for the rest.

Global constraints (same as batch 1)

Tokens: add or change them in styles/tokens.css, with dark values. No new hex literals in components.
i18n: every string is in en, ms and zh, and the ms text is genuine Malay.
Tests: vitest for each behaviour change. Keep existing vitest and e2e green; grep web/e2e/*.spec.ts for nav labels and routes you touch.
No route removed. Every existing URL keeps working, and deep links and bookmarks still resolve.
Permission filtering stays. A hub shows a tab only if the member may open it, and shows its sidebar item only if at least one tab is visible.
Runtime check:
- Serve with vite from this worktree on --port 5190 (the API is on :3000).
- Screenshot with a throwaway Playwright script outside the repo that logs in the way web/e2e/support.ts does.
- Shoot at 1920×1080 and 1280×800, light and dark, as owner@demo.test and employee@demo.test.
- Compare with the Figma sidebar render.
Commits end with Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>.

Files:

web/src/app/shell/{nav.ts,Sidebar.tsx,UserMenu.tsx}
web/src/app/routes.ts or wherever routes are assembled
a new accounting hub layout, following web/src/features/team/TeamLayout.tsx or settings/SettingsLayout.tsx
web/src/features/team/*
a new projects page under web/src/features/accounting/approvers or features/projects
locales
tests

Groups and items. Groups are workspace, requests and manage. The approvals group goes away.

workspace:
- 首页 Home: hidden. There is no module yet; batch 2J builds it. Add no route.
- 项目 Projects: a new route /projects.
- Activity: unchanged.
requests:
- Expense claims and Petty cash: unchanged.
- Advances: an app item Figma lacks. Keep it, placed after 备用金.
- 资产预订 Asset booking: hidden. No module yet.
manage:
- 团队 Team: its layout gains an “Org structure” tab that renders the existing org-structure page. /org-structure stays a working URL.
- 会计 Accounting: a new hub at /accounting with tabs Chart of accounts, Journal entries, Fiscal periods, Reports and Float register. Each tab renders the existing page at its existing URL. The sidebar item is active for any of those routes, including /reports and /petty-cash/floats.
- 公告 Announcements: hidden. No module yet.

Moved out of the sidebar into the user menu (top-right). Each keeps its route and permission gate:

Settings
Workflows
Payout channels
Approvals, with the count badge. It covers petty-cash and advance approvals that the claims tab does not, so it stays reachable here. Batch 2G’s notifications will point to it later.

Projects page (/projects):

The project-axis analytic accounts as a list: code, name, parent, active.
The existing projects × steps approvers grid, moved here or embedded. /accounting/approvers stays a working URL, redirecting or rendering the same page.
Create and rename project, and retire and reactivate if the API supports them, using the existing analytic-account endpoints in api/openapi.yaml. These actions are behind accounting.account.manage; hide the controls without it.
Money is not involved.

Visual. Match Figma exactly, reading get_design_context on 126:1565 children:

icon/text x-positions (the nav is indented relative to the group headings);
row heights (they differ per group in Figma: about 44px in 工作区 and about 36px in 申请 and 管理);
heading size;
divider width and position;
active pill size;
icons: 4-squares, folder, pulse, $-document, wallet, cube, people, calculator, megaphone. Use lucide equivalents.

Commit: Figma batch 2A: sidebar navigation like Figma.