MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-55

1.5.3 Migrate (authed) layout to AppLayout; move project switcher to sidebar; retire top-nav project switcher

Done
Description

Estimate: 22m · Depends on: 1.5.2

Wire the new AppLayout + Sidebar primitives into app/(authed)/layout.tsx. This is where the shell goes from "primitive that exists in /tokens" to "every signed-in surface renders inside it." Three concrete moves:

  • Compose AppLayout: the (authed) layout's return becomes <AppLayout topNav={...} sidebar={...}>{children}</AppLayout>. The data fetches already happening in the layout (listUserWorkspaces, listProjects, getActiveProject) stay where they are — just feed the results into the new slot props instead of the old TopNav props.
  • Move ProjectSwitcher into the sidebar header: the (authed)/_components/ProjectSwitcher.tsx currently lives in TopNav. Inside this Subtask: pass it as the header prop of <Sidebar />. The visual treatment may need a width tweak (the sidebar header is narrower than the top-nav was); land it.
  • Retire the TopNav project switcher: TopNav.tsx now renders only WorkspaceSwitcher + (theme toggle slot — empty, filled by 1.5.4) + (cmd-k trigger slot — empty, filled by 1.5.4) + UserMenu. The conditional that hides the project switcher when there's no active workspace is preserved (now a no-op because the switcher isn't in TopNav anymore; document the empty-state path in the sidebar instead — when the workspace has zero projects, the sidebar header shows the existing ProjectsEmptyState CTA inline).

Sidebar sections: the layout passes the sidebar these sections:

  • Project-scoped nav (rendered only when there's an active project): "Issues" (/issues — placeholder route), "Boards" (/boards — placeholder), "Reports" (/reports — placeholder). Each placeholder route is a stub page <h1>Coming in Epic N</h1> so the navigation is functional today and the Epic-2-6 work just replaces the stub bodies.
  • Hairline divider
  • "Settings" (deep-link to /settings/project if active project, else /settings/workspace), "Docs" (external link to https://github.com/moooon-B-V/motir-core — placeholder until a real /docs route ships).

Active-item detection uses usePathname() via a thin client wrapper (authed)/_components/SidebarNav.tsx that takes the section list and renders it with the correct active flag per item.

Placeholder routes: add app/(authed)/issues/page.tsx, boards/page.tsx, reports/page.tsx — each ≤10 lines, just an <h1> + a "Coming in Epic 2" / Epic 3 / Epic 6 line. These exist so the sidebar links go somewhere real; Epic 2-6 replaces the bodies.

Existing routes (/dashboard, /settings/workspace, /settings/project, /tokens): unchanged code; they render inside the new shell as-is. Smoke test each renders correctly.

Acceptance criteria

  • app/(authed)/layout.tsx renders <AppLayout> with the sidebar populated from the same workspace/project data the previous TopNav consumed.
  • TopNav.tsx renders ONLY WorkspaceSwitcher + theme-toggle slot + cmd-k slot + UserMenu. The ProjectSwitcher import is removed from TopNav.
  • The sidebar's header carries the ProjectSwitcher; when there's no active workspace, the sidebar hides project nav entirely and shows nothing in the header.
  • Three placeholder routes exist: /issues, /boards, /reports, each ≤10 lines with a stub <h1> + an "Epic N" placeholder line.
  • Active-item detection works: navigating to /issues highlights the Issues sidebar item with aria-current="page".
  • Existing routes (/dashboard, /settings/workspace, /settings/project, /tokens) render correctly inside the new shell — the existing Playwright specs (auth-credentials, workspace-flows, projects-flow) stay green without modification.
  • Empty-state path preserved: a member with no projects in the active workspace sees the ProjectsEmptyState inline in the sidebar header (NOT in the dashboard body — that path moved with the project switcher).
  • All quality gates green; existing test suite stays green; existing E2E specs stay green.

Context refs

  • components/ui/AppLayout.tsx + Sidebar.tsx from 1.5.2
  • app/(authed)/layout.tsx — the file being migrated
  • app/(authed)/_components/TopNav.tsx + ProjectSwitcher.tsx + WorkspaceSwitcher.tsx + UserMenu.tsx + ProjectsEmptyState.tsx
  • app/(authed)/dashboard/page.tsx — the smoke route to verify still renders
  • The five 1.5.1 mockup PNGs — the visual contract
Status
Done
Type
Sub-task