FN-6725: preserve responsive command center nav order

Reassert the responsive Command Center placement contracts for tablet and mobile navigation.

- Document the tablet contract that keeps Command Center after Agents while Documents remains in overflow.
- Document the mobile contract that keeps Command Center after Mailbox without duplicating it in More.
- Extend the mobile nav regression test to cover mailbox badges and primary plugin overflow behavior.

Files changed:
 packages/dashboard/app/components/Header.tsx         |  3 +++
 packages/dashboard/app/components/MobileNavBar.tsx   |  3 +++
 .../app/components/__tests__/MobileNavBar.test.tsx   | 20 ++++++++++++++++++--
 3 files changed, 24 insertions(+), 2 deletions(-)

Fusion-Task-Id: FN-6725

Fusion-Task-Lineage: 9130b2d9-4163-4fed-bdc4-96ee6e1f4855
This commit is contained in:
gsxdsm
2026-06-19 10:17:37 -07:00
parent d3a32f0e5f
commit c16557fb16
3 changed files with 24 additions and 2 deletions

View File

@@ -1024,6 +1024,9 @@ export function Header({
FNXC:Navigation 2026-06-19-12:00:
Tablet navigation promotes Command Center immediately after Agents while desktop keeps Command Center in the More-views overflow.
Documents moves to the tablet More-views overflow below to conserve horizontal space without changing desktop ordering.
FNXC:Navigation 2026-06-19-08:24:
FN-6725 re-verified this tablet contract after a suspected revert: Command Center remains a single inline tablet destination after Agents, Documents remains overflow-only on tablet, and desktop ordering stays unchanged.
*/
<button
className={`view-toggle-btn${view === "command-center" ? " active" : ""}`}

View File

@@ -281,6 +281,9 @@ export function MobileNavBar({
FNXC:Navigation 2026-06-19-12:05:
Mobile navigation adds Command Center as a fixed top-level tab immediately after Mailbox.
Primary plugin tabs, including Compound Engineering, are demoted to the More sheet so touch targets stay wide and Command Center is not duplicated.
FNXC:Navigation 2026-06-19-08:24:
FN-6725 re-verified the suspected-revert surface: Command Center remains adjacent to Mailbox even when mailbox badges render, primary plugin tabs remain More-sheet-only, and no Command Center More-sheet duplicate is allowed.
*/
const MAX_PRIMARY_PLUGIN_TOP_LEVEL_TABS = 0;
const topLevelPrimaryPluginViews = sortedPrimaryPluginViews.slice(0, MAX_PRIMARY_PLUGIN_TOP_LEVEL_TABS);

View File

@@ -254,20 +254,36 @@ describe("MobileNavBar", () => {
expect(props.onChangeView).toHaveBeenCalledWith("mailbox");
});
it("places Command Center immediately after Mailbox and routes from the top-level tab", () => {
it("places Command Center after Mailbox while primary plugins stay More-only", () => {
const props = createDefaultProps();
render(<MobileNavBar {...props} view="board" mailboxUnreadCount={3} mailboxPendingApprovalCount={1} />);
render(
<MobileNavBar
{...props}
view="board"
mailboxUnreadCount={3}
mailboxPendingApprovalCount={1}
pluginDashboardViews={[
{
pluginId: "fusion-plugin-compound-engineering",
view: { viewId: "compound-engineering", label: "Compound Engineering", componentPath: "./CompoundEngineeringView", icon: "Workflow", placement: "primary", order: 1 },
},
]}
/>,
);
const mailboxTab = screen.getByTestId("mobile-nav-tab-mailbox");
const commandCenterTab = screen.getByTestId("mobile-nav-tab-command-center");
expect(mailboxTab.compareDocumentPosition(commandCenterTab) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
expect(commandCenterTab.previousElementSibling).toBe(mailboxTab);
expect(mailboxTab.querySelector(".mobile-nav-tab-badge")?.textContent).toBe("3");
expect(screen.queryByTestId("mobile-nav-tab-plugin-fusion-plugin-compound-engineering-compound-engineering")).toBeNull();
fireEvent.click(commandCenterTab);
expect(props.onChangeView).toHaveBeenCalledWith("command-center");
fireEvent.click(screen.getByTestId("mobile-nav-tab-more"));
expect(screen.queryByTestId("mobile-more-item-command-center")).toBeNull();
expect(screen.getByTestId("mobile-more-item-plugin-fusion-plugin-compound-engineering-compound-engineering")).toBeDefined();
});
it("agents tab calls onChangeView with 'agents'", () => {