feat(webapp): redesign the side menu project and organization menus by samejr · Pull Request #4066 · triggerdotdev/trigger.dev

samejr · 2026-06-28T20:39:07Z

This is a test concept that separates Projects from the Org menu in the main side menu.

Preview URL: https://samejr-org-menu-update.triggerlabs.dev/

The top-left menu now represents the organization: it shows the org name and avatar and opens a flat list of org-level pages (Settings, Usage, Billing, Billing alerts, Team, an Integrations submenu, Switch organization, Account, Logout). Projects move into a dedicated "Project" section in the menu body: a project picker dropdown with the environment selector directly beneath it.

The Project menu trigger now matches the other side menu items: its label and folder icon are dimmed by default and brighten on hover, instead of staying highlighted. The environment selector shows a "[name] environment" tooltip on hover. It opens instantly when the side menu is collapsed and after a short delay when expanded.

Add an end tree-connector to the left of the environment selector and remove the gap between it and the project dropdown, so the environment reads as nested under the project in the side menu.

changeset-bot · 2026-06-28T20:39:10Z

⚠️ No Changeset found

Latest commit: 49f6968

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-06-28T20:39:23Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

Walkthrough

The org route loader now detects RBAC and SSO plugin availability, exposes both flags in loader data, and adds hooks for reading them. The side menu is reorganized into separate organization and project selectors: the organization popover lists org-level actions, integrations, account, logout, and organization switching, while the project selector shows project-only actions. EnvironmentSelector updates its tooltip behavior and moves branch popover content into BranchesPopoverContent. The help popover label styling and tooltip timing are adjusted, and the navigation note is updated to match the new structure.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is missing the required template sections, including issue reference, checklist, testing steps, changelog, and screenshots.	Add the full template: Closes `#issue`, checklist, Testing, Changelog, and Screenshots sections with concrete details.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main UI redesign of the side menu project and organization menus.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch samejr/org-menu-update

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

trigger-dot-bot · 2026-06-28T20:44:10Z

Preview Deployment

Status	Preview	Commit	Updated
🟢 Ready	samejr-org-menu-update.triggerlabs.dev	`49f6968`	Jul 12, 13:40 UTC

Bump the org menu and project picker popover items to a 20px leading icon and a 0.90625rem label so they match the side menu nav items. The project folder icons keep their indigo color and the Vercel and Slack icons keep their smaller size.

…oll area Move the Project header, project picker, and environment selector into a fixed region so they stay put while the nav list scrolls, and shift the scroll divider down to the top of the scrollable section.

The side menu environment switcher is now a segmented control (Dev, Staging, Prev, Prod) instead of a dropdown, with each segment tinted in its environment color when active. The Dev segment shows the local dev server connection as a small pulsing dot with a hover tooltip, replacing the old connection button and modal. Preview opens a popover to switch branches and shows the active branch name. When the side menu is collapsed it falls back to the original dropdown selector, which is also still used on the blank-state panels and the Limits page.

- Revert the environment segmented control back to the dropdown selector, restoring the dev connection button and its modal - Hide the org, project, and environment selector chevrons until hover - Reorganize the project popover so New project and Project settings sit above a divider, before the project list - Remove the Environments header from the environment popover - Fix the dev connection button being clipped and tune the scroll section padding

…ide menu - Brighten the project selector trigger label and icon - Keep a constant 1px border on the project selector (transparent when collapsed) so it no longer nudges 1px on collapse - Animate the scroll section left padding in sync with the side menu collapse, matching its duration and easing - Remove the H shortcut key from the Help & Feedback button and surface it in a 500ms hover tooltip instead, keeping the shortcut working - Match the Help & Feedback label to the other side menu items (size and dimmed color)

- Apply the scrollable section left padding to the top Project section (Project header, project selector, environment selector), animated in sync with the collapse - Keep the menus reducing width instead of shifting right by holding their right edge - Match the section right and bottom padding to the left padding for symmetry, since there is no scrollbar in this section - Leave the organization menu unchanged

# Conflicts: # apps/webapp/app/components/navigation/SideMenu.tsx # apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx

pkg-pr-new · 2026-07-02T13:34:15Z

Open in StackBlitz

@trigger.dev/build

npm i https://pkg.pr.new/@trigger.dev/build@baeb7bd

trigger.dev

npm i https://pkg.pr.new/trigger.dev@baeb7bd

@trigger.dev/core

npm i https://pkg.pr.new/@trigger.dev/core@baeb7bd

@trigger.dev/python

npm i https://pkg.pr.new/@trigger.dev/python@baeb7bd

@trigger.dev/react-hooks

npm i https://pkg.pr.new/@trigger.dev/react-hooks@baeb7bd

@trigger.dev/redis-worker

npm i https://pkg.pr.new/@trigger.dev/redis-worker@baeb7bd

@trigger.dev/rsc

npm i https://pkg.pr.new/@trigger.dev/rsc@baeb7bd

@trigger.dev/schema-to-json

npm i https://pkg.pr.new/@trigger.dev/schema-to-json@baeb7bd

@trigger.dev/sdk

npm i https://pkg.pr.new/@trigger.dev/sdk@baeb7bd

commit: baeb7bd

- Replace the Ask AI button in the side menu footer with a collapse toggle that mirrors the middle handle (toggles the menu, Collapse/Expand tooltip with the cmd+b shortcut) - Add an animated LeftSideMenuIcon (scaleX transform so it animates on the compositor and never snaps) that animates on button hover, dimmed by default and bright on hover - Swap in a static LeftSideMenuCollapsedIcon when the menu is collapsed, and match the tooltip open delay to the Help and Feedback button - Add LeftSideMenuIcon to the storybook icons route Removes the Ask AI button and its cmd+i shortcut from the footer.

…r button The side menu footer collapse button now handles toggling, so the middle-right handle (and its animated chevron) is redundant. The cmd+b shortcut is preserved.

…llapsing The top section's bottom padding was pb-1 when collapsed and pb-2.5 when open, causing a vertical layout shift below the environment menu on toggle. Make it a constant pb-2.5 so only the horizontal padding animates.

- Add an Account menu (user avatar button) to the top of the side menu, between the organization menu and where the impersonation button used to be - The menu links to Profile, Personal Access Tokens, and Security, plus Logout - For admins it adds an Admin dashboard / Stop impersonating item with the cmd+esc shortcut shown inline, replacing the old permanent admin/impersonation button - Move Logout out of the organization menu into the account menu, and add a divider above Switch organization

Add a ChainLinkIcon and use it for the Private connections item in both the organization settings side menu and the organization dropdown, replacing the heroicons link icon.

…eholder - Replace the heroicons UserCircleIcon fallback in UserProfilePhoto/UserAvatar with the custom AvatarCircleIcon, matching the account menu Profile item - Size the account button avatar to match the popover menu item icons (20px)

Adopt the Security page's row-and-divider pattern on /account: each setting is a row with the title on the left and its control on the right. Profile picture, Full name, Email address, and a "Receive onboarding emails" toggle switch sit on equal-height rows, and the Update button is now a primary button.

…he project menu Bump the Env popover's item icons (size-5) and labels (text-[0.90625rem]) to match the Project popover, including the preview/dev branch submenu, its branch list, and the "Manage branches" footer. Applied only at these call sites so the shared EnvironmentLabel/EnvironmentCombo defaults used across the app are unchanged.

…ide menu Match the organization settings and account side menus' horizontal padding (pl-2.5, pr-0, stable scrollbar gutter) to the main side menu. Add a nameClassName prop to SideMenuItem and tighten the "Personal Access Tokens" label's tracking so it no longer truncates.

…tems to the other entries The "Shortcuts" and "Contact us…" entries used Button variant="small-menu-item" (bright, smaller text, misaligned icon) while the other entries use SideMenuItem. Add a shared SideMenuItemButton that mirrors SideMenuItem's styling and works as a Radix asChild dialog/sheet trigger, and use it for both entries.

…hortcuts item The popover restyle dropped the "⇧ ?" hint that the old button rendered via its shortcut prop. Add a trailing slot to SideMenuItemButton and pass the ShortcutKey so the hint is shown again.

Drag the side menu right border to set a custom width, remembered per user in dashboard preferences. Dragging below the default width fades the labels, section headers, badges, and item actions in real time and, on release, snaps back open or collapses depending on how far it was dragged. A plain click on the edge toggles collapsed/expanded (Cmd+B still works) and a pointer-following tooltip explains both gestures. The drag runs on window-level pointer listeners so releasing anywhere, including past the collapsed width or outside the window, always finalizes the resize. The initial width and collapse CSS variables are server-rendered to avoid an expanded-state flash before hydration. Also adds the missing asChild to the account menu tooltip trigger, fixing nested buttons that made React discard the server-rendered document on every page load.

Ask AI now sits at the top of the Help & Feedback popover with its Cmd+I shortcut, instead of a separate footer button. The dialog and shortcut are hosted around the popover so they keep working after it closes, and the duplicate footer button is removed from the account and organization settings side menus.

…section Slow the resize handle's indigo hover line to 300ms, and make releasing an opening drag keep opening once pulled a tenth of the way out. Also drop the redundant Project settings item from the Manage section (it stays in the project dropdown).

The Org, Project, Environment, Account, and Help & Feedback trigger buttons and the collapsible section headers now snap on hover instead of fading, matching the nav items in the scrollable area. The Project selector keeps a border-color transition so its outline still fades on collapse. Help & Feedback also gains the same up/down disclosure chevron the other menu triggers reveal on hover.

The disclosure chevron is a hover affordance with no meaning in the collapsed rail, but it was left mounted there. Rendering it only when the side menu is expanded keeps the collapsed icon clean and stops the chevron slot from affecting the collapsed button's layout or paint.

SimpleTooltip removed its trigger from the tab order (tabIndex=-1), so every side menu item wrapped in one (the nav links and the org/project/environment/account selectors) was skipped when tabbing. Add an opt-in tabbable prop to SimpleTooltip and set it on those triggers, give each the focus-custom ring, and turn the collapsible section headers into real buttons so they are keyboard-operable too. Tab order now follows the DOM top to bottom in both the expanded and collapsed states.

The shared focus-custom outline sat just outside the border box (offset 0), so it was clipped by any ancestor with overflow hidden/auto (scroll areas, the side menu grid) and covered by adjacent elements' backgrounds. Draw it 1px inside instead so the full ring is always visible. Applies everywhere focus-custom is used.

Resolves conflicts across the side menu files against main's Tailwind v3 to v4 migration: keep the side menu redesign, resize, keyboard-focus, and account/help menu work; adopt v4 class syntax (h-8! important suffix) and main's functional additions (environment list revalidate-on-open, changelog URL sanitizing). tailwind.config.js is removed (v4 config lives in tailwind.css) and the focus ring inset is re-applied there.

… menu The side menu still used the old charcoal-* utility classes and v3 arbitrary spacing after the v4 merge. Switch to the semantic aliases the rest of the app adopted (background-hover, grid-bright, surface-control) and the numeric spacing scale (pl-1.75, min-w-56, min-w-64). No visual change: the aliases resolve to the same underlying shades.

In the Switch organization submenu, New organization now sits above the list of organizations with the divider below it, instead of below the list.

In the dev and preview branch submenus, the Manage branches link now sits above the branch list with the divider below it, instead of below the list.

When a side menu section is collapsed its items are visually hidden (height 0) but stayed in the DOM, so keyboard and screen-reader users could still focus them. Mark the collapsed content inert so it is removed from both the tab order and the accessibility tree, restoring it when the section expands.

Bump the inset focus-custom ring's border-radius from 3px to 5px so the corners read as slightly rounder now that the ring sits inside the element.

…m pages Add a 1.5px-stroke variant of the avatar placeholder icon (AvatarCircleIconThin) alongside the 2px default, and a thin prop on UserAvatar/UserProfilePhoto. Use it for the account page's profile picture and the team page member rows; every other avatar keeps the 2px variant.

Add AvatarCircleIconExtraThin (1.25px stroke) and switch the avatar placeholder's thin boolean to a strokeWidth prop (1.25 | 1.5 | 2). The team page member rows use the 1.25px variant at a slightly smaller size; the account profile picture keeps 1.5px; every other avatar stays at 2px.

…esize While the side menu is being drag-resized, the account, dev-connection and collapse buttons (each sitting to the right of a primary item) used to stay put and overlap the org, environment and Help items as the row narrowed. Fade them out during the drag and return them on release.

The previous fix faded the account, dev connection and collapse buttons with a class based opacity transition. During a quick drag that 200ms transition lagged behind the shrinking row, so the buttons stayed briefly visible and overlapped the org and Help items (the reported dark overlay). Drive the account and dev connection opacity from the imperative --sm-label-opacity variable instead so it tracks the drag frame by frame with no lag, and hide the collapse button instantly (it cannot use the variable because it stays visible as the expand button when the menu is collapsed).

…id-drag Fading the secondary buttons out was not enough: while drag-resizing, the account, dev connection and collapse buttons and the hover chevrons still held their full layout width, so as the row narrowed they pushed the primary item's overflow clip edge into its icon. The org avatar and Help & Feedback icon were progressively swallowed by the clip and read as a dark panel covering them. Drive those widths from the per frame --sm-label-opacity variable instead, in the same curve as the fade, so the space is handed back to the primary item as the menu narrows and its icon stays fully visible at every width. The collapse button only shrinks while dragging since it keeps its natural size as the expand affordance when the menu rests collapsed.

…gging the side menu open The nav item labels already reveal in real time during a drag-open, but the org, project, environment and Help & Feedback labels were gated on the collapsed state, which only flips on release, so they stayed hidden for the whole drag and popped in at the end. Drive their width and opacity from the per frame --sm-label-opacity variable instead, exactly like the nav items, and keep those rows in their expanded arrangement while a drag is in progress so the revealing label has the layout it needs in both directions. Outside the resizable side menu the variable is unset and falls back to fully visible, so the environment selector and help popover render unchanged everywhere else.

…utton label, env tooltip) - Flush the side menu preference debounce only on real unmount. The unmount effect listed the fetcher in its deps, and useFetcher returns a fresh object every render, so the cleanup fired on every re-render and prematurely flushed the 500ms debounce. A drag re-renders constantly, so this turned one save into many. Hold the flush routine in a ref and give the effect an empty dep array. - Give the dev server connection button an accessible name so screen readers announce it (it was icon only). - Only show the environment selector tooltip on the collapsed rail, matching the org and project selectors. It had switched to an always-on delayed tooltip, which also leaked into the blank-state panels and Limits page that reuse this selector.

samejr added 3 commits June 28, 2026 20:15

feat(webapp): connect the environment selector to the project menu

440023b

Add an end tree-connector to the left of the environment selector and remove the gap between it and the project dropdown, so the environment reads as nested under the project in the side menu.