feat(ui): org/project layout remake by viktormarinho · Pull Request #2482 · decocms/mesh

viktormarinho · 2026-02-23T16:27:09Z

Summary

button: removed font-medium (inherits body weight 450), removed unused brand variant (token no longer in @theme)
card: added shadow-xs for subtle lift
sidebar: active menu item now uses bg-sidebar-primary text-sidebar-primary-foreground — gives proper contrast in both light and dark (Studio) sidebars
tabs: underline variant active indicator aligned to border-primary
step-indicator: ported from studio-demo
empty-state: cleaner icon container (rounded-xl bg-muted/50), added illustration/className/children props (backward-compatible)
empty-state-illustrations: ported 8 monochrome SVG illustrations from studio-demo (AgentsIllustration, ConnectionsIllustration, TasksIllustration, etc.)

Test plan

bun run check — passes (0 TS errors)
bun run lint — passes (0 warnings)
bun run fmt:check — passes
bun test — 829/829 pass
Visual: buttons/cards look correct with warm-neutral palette
Visual: active sidebar item has correct contrast in both light and Studio dark sidebar

🤖 Generated with Claude Code

Summary by cubic

Rebuilt the org/project layout with phase 2 tokens, a CSS‑scoped dark sidebar, and a refined shell. Added an inbox footer with invitations, a redesigned user menu, improved account switching, accurate active states, and smoother chat transitions.

New Features
- Sidebar inbox footer with avatar and inbox popover; accept/decline org invitations; replaces the settings footer.
- Account switcher uses a DropdownMenu with color‑coded org avatars and supports org‑only mode when experimental_projects is off.
- User menu redesigned with a DropdownMenu and links to Home, Terms, Privacy, GitHub, and Community; added a settings cog icon.
- Page.Header adds a SidebarTrigger (hideSidebarTrigger) and updated sizing; chat panel gets smoother fade/ease; StepIndicator added; EmptyState now supports illustrations; tabs underline uses primary.
Bug Fixes
- Chat uses a unified bg-background and updated sticky overlays; skeleton matches the new background.
- Dark sidebar styling is CSS‑scoped and skipped when experimental_projects is off; collapsed labels/icons, item sizing, and active route states behave correctly.
- Shell keeps the floating card layout, fixes corner artifacts, and restores the minimal no‑context header with MeshUserMenu.
- MCP Store version dropdown uses the default variant; added prefers‑reduced‑motion support.

^{Written for commit 20efddc. Summary will update on new commits.}

@theme

- Remove font-medium from button base (inherits body weight 450) - Remove unused brand variant (bg-brand-green-light no longer in @theme) - Add shadow-xs to card for subtle lift - Fix mcp-server-hero-section VersionDropdown brand → default variant

…eeded)

github-actions · 2026-02-23T16:27:21Z

🧪 Benchmark

Should we run the Virtual MCP strategy benchmark for this PR?

React with 👍 to run the benchmark.

Reaction	Action
👍	Run quick benchmark (10 & 128 tools)

Benchmark will run on the next push after you react.

github-actions · 2026-02-23T16:27:22Z

Release Options

Should a new version be published when this PR is merged?

React with an emoji to vote on the release type:

Reaction	Type	Next Version
👍	Prerelease	`2.113.2-alpha.1`
🎉	Patch	`2.113.2`
❤️	Minor	`2.114.0`
🚀	Major	`3.0.0`

Current version: 2.113.1

Deployment

Deploy to production (triggers ArgoCD sync after Docker image is published)

cubic-dev-ai

No issues found across 8 files

- Add data-studio attribute to SidebarLayout for CSS-driven dark sidebar - Remove AppTopbar and Topbar function (no longer needed) - Simplify no-context fallback to bare Outlet - Sidebar header: replace all hardcoded zinc/bg colors with sidebar-* tokens - Sidebar header: remove isDark logic (CSS handles light/dark via [data-studio]) - Account switcher: remove variant prop, use sidebar tokens throughout - Account switcher: always show two-line layout (org + project name) - ProjectTopbar: remove dark wrapper, add subtle border-b

- sidebar: use text-sidebar-foreground so dark Studio sidebar shows light text correctly (was inheriting text-foreground = dark) - topbar: hide header when all portal divs are empty, use h-11 (nothing injects into portals yet; will be wired in Phase 4) - layout: add pt-1.5 to SidebarLayout + rounded-tl-xl border-t border-l to SidebarInset for the demo's floating canvas effect

…tokens Nav items, settings footer, and group labels were using text-foreground and text-muted-foreground which are dark in light mode — invisible on Studio's dark sidebar. Switching to text-sidebar-foreground/* adapts correctly to both.

…bar tokens

Add [data-studio] [data-sidebar="sidebar"] rule to global.css that overrides generic tokens (--foreground, --muted-foreground, --accent, etc.) to dark-mode values scoped only to the sidebar inner element. This makes text-foreground, text-muted-foreground, bg-accent etc. work correctly on the dark Studio sidebar without any per-component changes. Revert all components back to standard text-foreground / text-muted-foreground.

…g, size-4 icons)

…t border-l handles separation)

- Wrap chat panel in bg-sidebar container with padding (pl-1.5 pr-[5px] pb-[5px]) - Inner card: bg-card rounded-xl border border-sidebar-border shadow-sm - Main content gets rounded-tr-xl + border-r when chat is open - Extract ShellLayoutInner to access useDecoChatOpen inside Chat.Provider

Move border-t/border-l/rounded-* from SidebarInset (full width) to the ResizablePanel wrapping main content. This fixes: - border-t no longer extends over the chat panel area - rounded-tr-xl now always present (both corners match) - border-r added to main content panel when chat is open - Chat card retains its own independent border/shadow

… artifact

- SidebarInset: transparent background so bg-sidebar shows through rounded corners - Card styling moved to inner div wrapper (not ResizablePanel) to avoid library interference with border-radius - ResizablePanel is pure sizing container only

- Add MeshUserMenu to SidebarSettingsFooter (sidebar footer, per design plan) - Restore minimal topbar with MeshUserMenu in the no-context fallback path (root/home route that renders without a project context)

…tcher)

- Refactor MeshAccountSwitcher from Popover to DropdownMenu with improved org/project switching UX, color-coded org avatars, and collapsible icon support - Add SidebarTrigger to PageHeader with hideSidebarTrigger prop; adjust header height (h-12→h-11), border opacity, and padding - Simplify chat background: remove dynamic --chat-surface CSS variable, use bg-background throughout chat root, sticky overlay, and skeleton - Improve side-panel-chat transitions: use ease-[var(--ease-out-quart)], add fade-in animation, refine duration timings - Fix sidebar settings footer padding and collapsible icon visibility - Add prefers-reduced-motion support to global.css Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Delete leftover components from the account switcher and topbar refactor: sidebar footer inbox, account switcher panels (org, user, inbox, menu items), and project-topbar. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Replace UserMenu compound component with DropdownMenu primitives, add Terms of Use, Privacy Policy, GitHub, and Community links with external link indicators, and use consistent 14px icon sizing throughout. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…isabled Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…is off Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

cubic-dev-ai

1 issue found across 8 files (changes from recent commits).

Prompt for AI agents (all issues)


Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/mesh/src/web/components/sidebar/footer/inbox.tsx">

<violation number="1" location="apps/mesh/src/web/components/sidebar/footer/inbox.tsx:69">
P2: Reset `isRejecting` after a successful reject so the item doesn’t remain disabled if the invitation still renders.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

cubic-dev-ai · 2026-02-24T21:10:02Z

apps/mesh/src/web/components/sidebar/footer/inbox.tsx

+        setIsRejecting(false);
+      } else {
+        toast.success("Invitation declined");
+        queryClient.invalidateQueries();


P2: Reset isRejecting after a successful reject so the item doesn’t remain disabled if the invitation still renders.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At apps/mesh/src/web/components/sidebar/footer/inbox.tsx, line 69: <comment>Reset `isRejecting` after a successful reject so the item doesn’t remain disabled if the invitation still renders.</comment> <file context> @@ -0,0 +1,185 @@ + setIsRejecting(false); + } else { + toast.success("Invitation declined"); + queryClient.invalidateQueries(); + } + } catch { </file context>

viktormarinho added 6 commits February 23, 2026 13:15

feat(ui): use sidebar-primary tokens for active menu item state

30d1416

feat(ui): align tabs underline active indicator to primary token

db75136

feat(ui): port step-indicator and entity-link from studio-demo

71da663

feat(ui): align empty-state with demo style; add illustrations

c0267fd

feat(ui): remove entity-link (no usages, can be added in Phase 4 if n…

26f99f1

…eeded)

cubic-dev-ai bot reviewed Feb 23, 2026

View reviewed changes

viktormarinho added 14 commits February 23, 2026 13:35

fix(sidebar): replace remaining hardcoded foreground colors with side…

d31d46a

…bar tokens

fix(sidebar): match demo item sizing (h-8, rounded-md, tighter paddin…

3e683be

…g, size-4 icons)

fix(sidebar): remove border-r from header/content/footer (SidebarInse…

c651457

…t border-l handles separation)

fix(shell): make ResizableHandle blend with bg-sidebar to hide corner…

572fef7

… artifact

fix(shell): restore MeshUserMenu

abd200a

- Add MeshUserMenu to SidebarSettingsFooter (sidebar footer, per design plan) - Restore minimal topbar with MeshUserMenu in the no-context fallback path (root/home route that renders without a project context)

fix(sidebar): remove MeshUserMenu from footer (already in account swi…

2ca3635

…tcher)

chore: remove unused MeshOrgSwitcher (was only used in deleted Topbar)

1a831ba

viktormarinho changed the title ~~feat(ui): component restyling phase 2~~ feat(ui): remake some stuff Feb 23, 2026

viktormarinho changed the title ~~feat(ui): remake some stuff~~ feat(ui): layout remake Feb 23, 2026

viktormarinho changed the title ~~feat(ui): layout remake~~ feat(ui): org/project layout remake Feb 23, 2026

rafavalls and others added 4 commits February 24, 2026 05:08

chore: remove unused files flagged by knip

01c3442

Delete leftover components from the account switcher and topbar refactor: sidebar footer inbox, account switcher panels (org, user, inbox, menu items), and project-topbar. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat(sidebar): add inbox footer component with avatar and inbox popover

c96ec63

feat(sidebar): replace settings footer with inbox footer

b4521ea

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

rafavalls and others added 6 commits February 24, 2026 15:07

fix(user-menu): add homepage link, show external arrows on hover only

04174b9

feat(sidebar): skip dark studio styles when experimental_projects is off

ba0a733

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat(account-switcher): show only org name in trigger when projects d…

64a90e0

…isabled Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

feat(account-switcher): org-only dropdown when experimental_projects …

f95b704

…is off Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

update design of inbox popover

a7ec9eb

cubic-dev-ai bot reviewed Feb 24, 2026

View reviewed changes

cog icon in settings

20efddc

viktormarinho merged commit d5eb10f into main Feb 24, 2026
7 checks passed

viktormarinho deleted the feat/ui-phase-2-components branch February 24, 2026 21:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): org/project layout remake#2482

feat(ui): org/project layout remake#2482
viktormarinho merged 31 commits intomainfrom
feat/ui-phase-2-components

viktormarinho commented Feb 23, 2026 •

edited by cubic-dev-ai bot

Loading

Uh oh!

github-actions bot commented Feb 23, 2026

Uh oh!

github-actions bot commented Feb 23, 2026 •

edited by viktormarinho

Loading

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

cubic-dev-ai bot left a comment

Uh oh!

cubic-dev-ai bot Feb 24, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

viktormarinho commented Feb 23, 2026 • edited by cubic-dev-ai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Summary by cubic

Uh oh!

github-actions bot commented Feb 23, 2026

🧪 Benchmark

Uh oh!

github-actions bot commented Feb 23, 2026 • edited by viktormarinho Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Release Options

Deployment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Feb 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

viktormarinho commented Feb 23, 2026 •

edited by cubic-dev-ai bot

Loading

github-actions bot commented Feb 23, 2026 •

edited by viktormarinho

Loading

cubic-dev-ai bot Feb 24, 2026 •

edited

Loading