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:
@@ -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" : ""}`}
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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'", () => {
|
||||
|
||||
Reference in New Issue
Block a user