root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(FN-1330): consolidate mobile Board/List tabs into Tasks tab with header toggle

Browse Source 
- Merge mobile Board and List tabs into unified Tasks tab in MobileNavBar
- Add Board/List toggle to Header component for switching views within Tasks tab
- Add comprehensive Header tests covering toggle functionality and keyboard navigation
- Update mobile feature access tests to reflect new tab structure
- Add mobile task view toggle CSS styles
This commit is contained in:
Fusion
2026-04-15 09:10:38 -07:00
committed by gsxdsm
parent 9c31c1136f
commit 13b80f89e4
6 changed files with 150 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
packages/dashboard/app/components/Header.tsx
View File

@@ -588,6 +588,32 @@ export function Header({
</div>
<div className="header-actions">
{/* Mobile View Toggle - compact board/list switcher in header when mobile nav is active */}
{hideFullNav && onChangeView && (view === "board" || view === "list") && (
<div className="view-toggle" data-testid="mobile-view-toggle">
<button
className={`view-toggle-btn${view === "board" ? " active" : ""}`}
onClick={() => onChangeView("board")}
title="Board view"
aria-label="Board view"
aria-pressed={view === "board"}
data-testid="mobile-view-toggle-board"
>
<LayoutGrid size={16} />
</button>
<button
className={`view-toggle-btn${view === "list" ? " active" : ""}`}
onClick={() => onChangeView("list")}
title="List view"
aria-label="List view"
aria-pressed={view === "list"}
data-testid="mobile-view-toggle-list"
>
<List size={16} />
</button>
</div>
)}
{/* Mobile Search Trigger - only on mobile, show trigger button in header */}
{onSearchChange && isMobile && (hideFullNav || view === "board" || view === "list") && !shouldShowMobileSearch && (
<button

29
packages/dashboard/app/components/MobileNavBar.tsx
View File

@@ -9,7 +9,6 @@ import {
GitBranch,
Grid3X3,
LayoutGrid,
List,
Lightbulb,
Loader2,
Mail,
@@ -172,25 +171,21 @@ export function MobileNavBar({
>
<button
type="button"
className={`mobile-nav-tab${view === "board" ? " mobile-nav-tab--active" : ""}`}
data-testid="mobile-nav-tab-board"
className={`mobile-nav-tab${view === "board" || view === "list" ? " mobile-nav-tab--active" : ""}`}
data-testid="mobile-nav-tab-tasks"
role="tab"
aria-selected={view === "board"}
onClick={() => onChangeView("board")}
aria-selected={view === "board" || view === "list"}
onClick={() => {
// If already on a tasks view, stay there; otherwise go to board
if (view === "board" || view === "list") {
onChangeView(view);
} else {
onChangeView("board");
}
}}
>
<LayoutGrid />
<span className="mobile-nav-tab-label">Board</span>
</button>
<button
type="button"
className={`mobile-nav-tab${view === "list" ? " mobile-nav-tab--active" : ""}`}
data-testid="mobile-nav-tab-list"
role="tab"
aria-selected={view === "list"}
onClick={() => onChangeView("list")}
>
<List />
<span className="mobile-nav-tab-label">List</span>
<span className="mobile-nav-tab-label">Tasks</span>
</button>
<button

70
packages/dashboard/app/components/__tests__/Header.test.tsx
View File

@@ -921,10 +921,74 @@ describe("Header", () => {
expect(screen.getByTitle("List view")).toBeDefined();
});
it("hides view toggle when mobileNavEnabled is true", () => {
it("hides desktop view toggle when mobileNavEnabled is true (mobile view toggle shown separately)", () => {
// When mobileNavEnabled, the full desktop-style view toggle (with agents, missions, etc.)
// should be hidden. Instead, a compact board/list-only toggle appears via mobile-view-toggle.
render(<Header view="board" onChangeView={vi.fn()} mobileNavEnabled={true} />);
expect(screen.queryByTitle("Board view")).toBeNull();
expect(screen.queryByTitle("List view")).toBeNull();
// The full desktop toggle is hidden
expect(screen.queryByTitle("Agents view")).toBeNull();
expect(screen.queryByTitle("Missions view")).toBeNull();
// But the mobile compact toggle is shown
expect(screen.getByTestId("mobile-view-toggle")).toBeDefined();
});
it("renders mobile view toggle when mobileNavEnabled and view is board", () => {
const onChangeView = vi.fn();
render(<Header view="board" onChangeView={onChangeView} mobileNavEnabled={true} />);
expect(screen.getByTestId("mobile-view-toggle")).toBeDefined();
expect(screen.getByTestId("mobile-view-toggle-board")).toBeDefined();
expect(screen.getByTestId("mobile-view-toggle-list")).toBeDefined();
});
it("renders mobile view toggle when mobileNavEnabled and view is list", () => {
render(<Header view="list" onChangeView={vi.fn()} mobileNavEnabled={true} />);
expect(screen.getByTestId("mobile-view-toggle")).toBeDefined();
expect(screen.getByTestId("mobile-view-toggle-board")).toBeDefined();
expect(screen.getByTestId("mobile-view-toggle-list")).toBeDefined();
});
it("does not render mobile view toggle when mobileNavEnabled and view is agents", () => {
render(<Header view="agents" onChangeView={vi.fn()} mobileNavEnabled={true} />);
expect(screen.queryByTestId("mobile-view-toggle")).toBeNull();
});
it("does not render mobile view toggle when mobileNavEnabled and view is missions", () => {
render(<Header view="missions" onChangeView={vi.fn()} mobileNavEnabled={true} />);
expect(screen.queryByTestId("mobile-view-toggle")).toBeNull();
});
it("mobile view toggle board button calls onChangeView('board')", () => {
const onChangeView = vi.fn();
render(<Header view="list" onChangeView={onChangeView} mobileNavEnabled={true} />);
fireEvent.click(screen.getByTestId("mobile-view-toggle-board"));
expect(onChangeView).toHaveBeenCalledWith("board");
});
it("mobile view toggle list button calls onChangeView('list')", () => {
const onChangeView = vi.fn();
render(<Header view="board" onChangeView={onChangeView} mobileNavEnabled={true} />);
fireEvent.click(screen.getByTestId("mobile-view-toggle-list"));
expect(onChangeView).toHaveBeenCalledWith("list");
});
it("mobile view toggle board button is active when view is board", () => {
render(<Header view="board" onChangeView={vi.fn()} mobileNavEnabled={true} />);
const boardBtn = screen.getByTestId("mobile-view-toggle-board");
const listBtn = screen.getByTestId("mobile-view-toggle-list");
expect(boardBtn.className).toContain("active");
expect(boardBtn.getAttribute("aria-pressed")).toBe("true");
expect(listBtn.className).not.toContain("active");
expect(listBtn.getAttribute("aria-pressed")).toBe("false");
});
it("mobile view toggle list button is active when view is list", () => {
render(<Header view="list" onChangeView={vi.fn()} mobileNavEnabled={true} />);
const boardBtn = screen.getByTestId("mobile-view-toggle-board");
const listBtn = screen.getByTestId("mobile-view-toggle-list");
expect(listBtn.className).toContain("active");
expect(listBtn.getAttribute("aria-pressed")).toBe("true");
expect(boardBtn.className).not.toContain("active");
expect(boardBtn.getAttribute("aria-pressed")).toBe("false");
});
it("hides overflow trigger when mobileNavEnabled is true", () => {

38
packages/dashboard/app/components/__tests__/MobileNavBar.test.tsx
View File

@@ -56,11 +56,10 @@ describe("MobileNavBar", () => {
mockViewport("mobile");
});
it("renders nine tab buttons (board + list + agents + missions + chat + mailbox + skills + roadmaps + more)", () => {
it("renders eight tab buttons (tasks + agents + missions + chat + mailbox + skills + roadmaps + more)", () => {
render(<MobileNavBar {...createDefaultProps()} />);
expect(screen.getByTestId("mobile-nav-tab-board")).toBeDefined();
expect(screen.getByTestId("mobile-nav-tab-list")).toBeDefined();
expect(screen.getByTestId("mobile-nav-tab-tasks")).toBeDefined();
expect(screen.getByTestId("mobile-nav-tab-agents")).toBeDefined();
expect(screen.getByTestId("mobile-nav-tab-missions")).toBeDefined();
expect(screen.getByTestId("mobile-nav-tab-chat")).toBeDefined();
@@ -95,38 +94,43 @@ describe("MobileNavBar", () => {
expect(screen.getByTestId("mobile-nav-tab-agents").className).toContain("mobile-nav-tab--active");
});
it("board tab calls onChangeView with 'board'", () => {
it("tasks tab calls onChangeView with 'board' when coming from a non-tasks view", () => {
const props = createDefaultProps();
render(<MobileNavBar {...props} view="list" />);
render(<MobileNavBar {...props} view="agents" />);
fireEvent.click(screen.getByTestId("mobile-nav-tab-board"));
fireEvent.click(screen.getByTestId("mobile-nav-tab-tasks"));
expect(props.onChangeView).toHaveBeenCalledWith("board");
});
it("list tab calls onChangeView with 'list'", () => {
it("tasks tab calls onChangeView with 'board' when already on board", () => {
const props = createDefaultProps();
render(<MobileNavBar {...props} view="board" />);
fireEvent.click(screen.getByTestId("mobile-nav-tab-list"));
fireEvent.click(screen.getByTestId("mobile-nav-tab-tasks"));
expect(props.onChangeView).toHaveBeenCalledWith("board");
});
it("tasks tab calls onChangeView with 'list' when already on list", () => {
const props = createDefaultProps();
render(<MobileNavBar {...props} view="list" />);
fireEvent.click(screen.getByTestId("mobile-nav-tab-tasks"));
expect(props.onChangeView).toHaveBeenCalledWith("list");
});
it("board tab is active when view is 'board'", () => {
it("tasks tab is active when view is 'board'", () => {
render(<MobileNavBar {...createDefaultProps()} view="board" />);
expect(screen.getByTestId("mobile-nav-tab-board").className).toContain("mobile-nav-tab--active");
expect(screen.getByTestId("mobile-nav-tab-list").className).not.toContain("mobile-nav-tab--active");
expect(screen.getByTestId("mobile-nav-tab-tasks").className).toContain("mobile-nav-tab--active");
});
it("list tab is active when view is 'list'", () => {
it("tasks tab is active when view is 'list'", () => {
render(<MobileNavBar {...createDefaultProps()} view="list" />);
expect(screen.getByTestId("mobile-nav-tab-list").className).toContain("mobile-nav-tab--active");
expect(screen.getByTestId("mobile-nav-tab-board").className).not.toContain("mobile-nav-tab--active");
expect(screen.getByTestId("mobile-nav-tab-tasks").className).toContain("mobile-nav-tab--active");
});
it("board and list tabs are not active when view is 'agents'", () => {
it("tasks tab is not active when view is 'agents'", () => {
render(<MobileNavBar {...createDefaultProps()} view="agents" />);
expect(screen.getByTestId("mobile-nav-tab-board").className).not.toContain("mobile-nav-tab--active");
expect(screen.getByTestId("mobile-nav-tab-list").className).not.toContain("mobile-nav-tab--active");
expect(screen.getByTestId("mobile-nav-tab-tasks").className).not.toContain("mobile-nav-tab--active");
});
it("missions tab calls onChangeView with 'missions'", () => {