Seller dashboard: navigation without the sidebar

Status (2026-10-10): live on main, and the only navigation. The old sidebar, its header, the legacy shell, the NEXT_PUBLIC_NEW_NAV switch and the unused --sidebar-* CSS tokens were deleted at the founder's request (--sidebar itself stays: it is the header's and the bars' surface colour). Going back means reverting that commit.

Design record and clickable prototypes: the "Vlozi Sidebar-less Nav Wireframes" canvas (frames 9 and 11 are the approved ones).

What changes for users

Tablet and desktop (768px and up): a two-row header.

• Row 1: the Vlozi mark (always links home), a workspace menu (switch, new workspace, the 3-of-3 limit), the plan tag, the credits pill, the notification bell, a ? menu (Documentation, Send feedback, Keyboard shortcuts) and the account menu (credits, Your account, Workspace settings, Light/Dark/System theme, Sign out).
• The plan tag (next to the workspace) names the plan, and turns into the alert when something needs doing: "Pro trial · 3 days left" (coral dot in the last week), "Payment due" (red), "Starter · ends 3 Nov". A coral Upgrade appears beside it only when it matters: on Free, under 20% of the month's credits ("Starter · 12% credits"), or in a trial's last week ("Keep Pro"). It carries the next plan's real yearly saving ("−17%"). The tag opens a card: credits against the month's allotment, the next plan and its price, the yearly price, Upgrade and Billing. People without billing access see the tag alone. On phones the plan shows under the workspace name and Upgrade sits in the account menu. Rules: src/lib/plan-status.ts.
• Row 2: Home · the current service (coral) · the switch button ⊞ · that service's pages as tabs. Pages that don't fit go behind +N; the page you're on always keeps a visible tab.
• At Home the Home button and the coral button are one, "⌂ Home" (Home has no pages of its own). The rest of row 2 shows Recent: the services you opened lately, each landing on the page you last used there (chips that don't fit are left out). ⚙ Settings sits at the right end.
• Home page: "Needs you" first (the bell's list: chats waiting, paused campaigns, insights, billing alerts…), then every service you can open as a small tile. No page title; the coral button names it.
• Workspace Settings is a section of its own. On /dashboard/settings/* the coral button reads "Settings" and the tabs are its sections (General, Team, Billing, API keys, Services, Website), filtered by the person's permissions. "Back to Settings" works like any other service.
• Integrations is no longer in the nav (founder, 2026-10-09). The page stays: connecting an account returns there, and it counts as Home.
• ⊞ flips only the tabs area over to show every service as tiles. They wrap onto as many lines as needed, never scroll, and hang over a lightly dimmed page.
  • ⚙ Settings has a fixed corner at the top right of the flip, solid dark; filtering never moves it. Typing "set" + Enter opens it when no service matches.
  • Type to filter; Enter opens the first match; Esc or a click outside closes.
  • Double-click ⊞ jumps back to the previous service. A "Back to …" tile does the same from the keyboard.
  • The key hints ("Arrow keys move · Enter opens…") show only when it was opened with Ctrl/⌘+\.
• Ctrl+\ (⌘+\ on a Mac) opens the switcher. It's the old sidebar key.

Phones (under 768px): no second row.

• The header shows the service name; tapping it opens the service sheet.
• A coral floating button sits above the bottom bar:
  • tap: the service sheet
  • hold: a speed dial (Search, Home, Back, Switch)
  • double-tap: back to the previous service
• When the button hides: it stays off editors and the console screens (Mailbox inbox, AI Copilot, Chatbot Sandbox, Contacts Playground). It tucks away while you type, while you scroll down, and while a page shows its own bottom bar.
• The bottom bar keeps the service's pages: four, plus More. Home has none, so no bar there.
• The service sheet has ⚙ Settings next to its search box.

Everywhere:

• Each service remembers the last page you opened in it, per workspace (browser storage only).
• Switching workspace takes you to the same section in the new workspace, or to Overview if the new workspace doesn't have that service.
• Editors keep row 1 only. These are the newsletter template and campaign editors, the blog editor, the content composer and the OAuth consent screen. Row 1 there scrolls away, exactly as the old header did.

Rollout (done)

1. 2026-10-10: the new navigation became the default, then the only one. Deleted: components/app-sidebar.tsx, components/dashboard-header.tsx, components/ui/sidebar.tsx, components/shell/legacy-dashboard-shell.tsx, lib/flags.ts, and the --sidebar-* tokens other than --sidebar. The Mailbox folder bar lost its in-page ("inline") mode, which only the sidebar layout used.

How it's built

Page heights. Full-height pages size themselves from three CSS variables set by the shell: --dash-header-h, --dash-sticky-h and --dash-bottom-gutter. Never hard-code the header height again. The pages that use them today: Mailbox, AI Copilot, Chatbot Sandbox, Contacts Playground, the Forms builder preview and the content-engine Activity day headers.

A page with its own fixed bottom bar calls useSuppressFab(active) so the phone button steps aside. The Media bulk-action bar is the first user.

A page that replaces the phone bottom bar is listed in hasOwnBottomBar() (dashboard-nav.ts). In the new shell the page bar then yields and --dash-bottom-gutter is 0, so the page draws its own bar inside its own height. Only the Mailbox inbox does this (Inbox · mailboxes · Folders · Compose; see mailbox-redesign.md).

A page that needs row 2's height calls useHideServiceBar(active) (src/hooks/use-service-bar-hidden.ts). The header then shows row 1 only and --dash-header-h shrinks with it. The Mailbox reader uses it while a conversation is open.

Before flipping it on: manual checks

Automated: unit, component and accessibility tests for every piece (vitest + axe), plus a production build with the switch both off and on. Still needs eyes on real screens:

• Widths 360, 390, 768, 820, 1024, 1280 and 1440:
  • row 1 fits at 768
  • "+N" appears and disappears on resize
  • no sideways page scroll
  • switcher tiles wrap with no inner scroll
• Full-height pages:
  • Mailbox: no page scroll, and the reply box stays above the phone keyboard
  • AI Copilot, Chatbot Sandbox, Contacts Playground
  • Forms builder preview, content-engine Activity
  • newsletter template and campaign editors, blog editor, content composer
• The flip:
  • double-click ⊞ goes back
  • Ctrl/⌘+\ toggles
  • Esc returns focus to ⊞
  • reduced motion makes the flip instant
• Phone floating button:
  • tap, hold and double-tap work with a real thumb
  • it hides while scrolling and typing
  • it's absent on consoles and editors
  • the first-run hint stays dismissed
• A teammate with a narrow custom role sees only their services, and a forbidden deep link shows "No access".
• Workspace switch: you land in the right place, and the 3-of-3 limit shows.
• Dark mode and every theme preset: the coral accent follows the preset.

Gap log

Found while building this. Fixed means fixed on the branch, in the commit named.

Fixed

Open (not done in this branch)