Skip to content

feat(webapp): redesign the side menu project and organization menus #4066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
samejr wants to merge 17 commits into
base: main
Choose a base branch
from
Open

feat(webapp): redesign the side menu project and organization menus #4066

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c6138e3
feat(webapp): split the side menu project and organization menus
samejr Jun 28, 2026
f2e8a0e
feat(webapp): dim project menu trigger and add environment tooltip
samejr Jun 28, 2026
440023b
feat(webapp): connect the environment selector to the project menu
samejr Jun 28, 2026
d7c6af0
feat(webapp): size side menu popover items to match the nav items
samejr Jun 29, 2026
3aa2886
feat(webapp): pin the project and environment selectors above the scr…
samejr Jun 30, 2026
e9fe1d0
feat(webapp): make the side menu env switcher a segmented control
samejr Jun 30, 2026
f2a3cbe
feat(webapp): refine side menu selectors and spacing
samejr Jul 2, 2026
8e37da9
feat(webapp): polish the project selector, help menu, and collapsed s…
samejr Jul 2, 2026
2fe465c
feat(webapp): align the project section padding with the nav items
samejr Jul 2, 2026
8f99e6a
Merge remote-tracking branch 'origin/main' into samejr/org-menu-update
samejr Jul 2, 2026
f593730
feat(webapp): add a collapse toggle button to the side menu footer
samejr Jul 2, 2026
d5c39f5
feat(webapp): remove the middle collapse handle in favor of the foote…
samejr Jul 2, 2026
24557d8
fix(webapp): keep the project section bottom padding constant when co…
samejr Jul 2, 2026
0b0f66d
feat(webapp): add an account menu to the side menu header
samejr Jul 3, 2026
26aa1be
feat(webapp): use a custom chain link icon for private connections
samejr Jul 3, 2026
6d701ab
feat(webapp): use the custom avatar icon for the profile picture plac…
samejr Jul 3, 2026
347fabe
feat(webapp): redesign the account profile page with a row-based layout
samejr Jul 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions .server-changes/side-menu-project-and-org-menus.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
area: webapp
type: improvement
---

Restructure the side menu's top-left and project/organization navigation:

- Add a new "Project" section above the "Environment" section with a popover
that lists the org's projects (folder icon + checkmark for the selected one)
and a "New project" item at the bottom.
- The top-left menu now shows the organization (avatar + org name, no
project/diagonal divider) and its popover is a clean list of org-level items
(Settings, Usage, Billing with plan badge, Billing alerts, Team, Private
connections, Roles, SSO, Vercel integration, Slack integration, Switch
organization, then Account and Logout) using the same icons and links as the
organization settings side menu.

The org loader now exposes whether the RBAC and SSO plugins are installed so the
side menu can gate the Roles and SSO items the same way the settings side menu
does.
227 changes: 126 additions & 101 deletions apps/webapp/app/components/navigation/EnvironmentSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,17 @@ export function EnvironmentSelector({
<span
className={cn(
"overflow-hidden transition-all duration-200",
isCollapsed ? "max-w-0 opacity-0" : "max-w-[16px] opacity-100"
isCollapsed ? "max-w-0 opacity-0" : "max-w-[16px] opacity-0 group-hover:opacity-100"
)}
>
<DropdownIcon className="size-4 min-w-4 text-text-dimmed transition group-hover:text-text-bright" />
</span>
</PopoverTrigger>
}
content={environmentFullTitle(environment)}
content={`${environmentFullTitle(environment)} environment`}
side="right"
sideOffset={8}
hidden={!isCollapsed}
delayDuration={isCollapsed ? 0 : 500}
Comment on lines +97 to +100

@devin-ai-integration devin-ai-integration Bot Jun 28, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 EnvironmentSelector tooltip now visible in all contexts, not just collapsed sidebar

The old code used hidden={!isCollapsed} to completely suppress the tooltip when the sidebar was expanded. The new code at apps/webapp/app/components/navigation/EnvironmentSelector.tsx:121 replaces this with delayDuration={isCollapsed ? 0 : 500}, meaning the tooltip is now always visible (immediately when collapsed, after 500ms when expanded). This changes behavior for the three other consumers of EnvironmentSelector outside the side menu (BlankStatePanels.tsx:303, BlankStatePanels.tsx:582, and the limits route at line 284), where isCollapsed defaults to false. Previously those tooltips were completely hidden; now they appear after 500ms on hover. This is arguably better UX but is an implicit behavioral change to those other call sites.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

buttonClassName="!h-8"
asChild
disableHoverableContent
Expand Down Expand Up @@ -196,10 +196,6 @@ function Branches({
branchEnvironments: SideMenuEnvironment[];
currentEnvironment: SideMenuEnvironment;
}) {
const organization = useOrganization();
const project = useProject();
const environment = useEnvironment();
const { urlForEnvironment } = useEnvironmentSwitcher();
const navigation = useNavigation();
const [isMenuOpen, setMenuOpen] = useState(false);
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
Expand Down Expand Up @@ -231,23 +227,6 @@ function Branches({
}, 150);
};

const activeBranches = branchEnvironments.filter((env) => env.archivedAt === null);
const state =
branchEnvironments.length === 0
? "no-branches"
: activeBranches.length === 0
? "no-active-branches"
: "has-branches";

// Only surface the active environment's archived-branch item in the submenu it
// actually belongs to. Both Development and Preview render this component, so
// without the parent check an archived dev branch would leak into the Preview
// submenu (and vice-versa).
const currentBranchIsArchived =
environment.archivedAt !== null && environment.parentEnvironmentId === parentEnvironment.id;

const envTextClassName = environmentTextClassName(parentEnvironment);

return (
<Popover onOpenChange={(open) => setMenuOpen(open)} open={isMenuOpen}>
<div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} className="flex">
Expand All @@ -273,88 +252,134 @@ function Branches({
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<div className="flex flex-col gap-1 p-1">
{currentBranchIsArchived && (
<PopoverMenuItem
key={environment.id}
to={urlForEnvironment(environment)}
title={
<>
<BranchesPopoverContent
parentEnvironment={parentEnvironment}
branchEnvironments={branchEnvironments}
currentEnvironment={currentEnvironment}
/>
</PopoverContent>
</div>
</Popover>
);
}

/**
* The inner content of the branches popover (branch list, empty states, and the
* "Manage branches" footer). Shared by the dropdown's hover submenu (`Branches`)
* and the side-menu segmented control's Preview popover.
*/
export function BranchesPopoverContent({
parentEnvironment,
branchEnvironments,
currentEnvironment,
}: {
parentEnvironment: SideMenuEnvironment;
branchEnvironments: SideMenuEnvironment[];
currentEnvironment: SideMenuEnvironment;
}) {
const organization = useOrganization();
const project = useProject();
const environment = useEnvironment();
const { urlForEnvironment } = useEnvironmentSwitcher();

const activeBranches = branchEnvironments.filter((env) => env.archivedAt === null);
const state =
branchEnvironments.length === 0
? "no-branches"
: activeBranches.length === 0
? "no-active-branches"
: "has-branches";

// Only surface the active environment's archived-branch item in the submenu it
// actually belongs to. Both Development and Preview render this component, so
// without the parent check an archived dev branch would leak into the Preview
// submenu (and vice-versa).
const currentBranchIsArchived =
environment.archivedAt !== null && environment.parentEnvironmentId === parentEnvironment.id;

const envTextClassName = environmentTextClassName(parentEnvironment);

return (
<>
<div className="flex flex-col gap-1 p-1">
{currentBranchIsArchived && (
<PopoverMenuItem
key={environment.id}
to={urlForEnvironment(environment)}
title={
<>
<span className={cn("block w-full", envTextClassName)}>
{environment.branchName}
</span>
<Badge variant="extra-small">Archived</Badge>
</>
}
icon={
<BranchEnvironmentIconSmall className={cn("size-4 shrink-0", envTextClassName)} />
}
isSelected={environment.id === currentEnvironment.id}
/>
)}
{state === "has-branches" ? (
<>
{branchEnvironments
.filter((env) => env.archivedAt === null)
.map((env) => (
<PopoverMenuItem
key={env.id}
to={urlForEnvironment(env)}
title={
<span className={cn("block w-full", envTextClassName)}>
{environment.branchName}
{env.branchName ?? DEFAULT_DEV_BRANCH}
</span>
<Badge variant="extra-small">Archived</Badge>
</>
}
icon={
<BranchEnvironmentIconSmall className={cn("size-4 shrink-0", envTextClassName)} />
}
isSelected={environment.id === currentEnvironment.id}
/>
)}
{state === "has-branches" ? (
<>
{branchEnvironments
.filter((env) => env.archivedAt === null)
.map((env) => (
<PopoverMenuItem
key={env.id}
to={urlForEnvironment(env)}
title={
<span className={cn("block w-full", envTextClassName)}>
{env.branchName ?? DEFAULT_DEV_BRANCH}
</span>
}
icon={
<BranchEnvironmentIconSmall
className={cn("size-4 shrink-0", envTextClassName)}
/>
}
isSelected={env.id === currentEnvironment.id}
}
icon={
<BranchEnvironmentIconSmall
className={cn("size-4 shrink-0", envTextClassName)}
/>
))}
</>
) : state === "no-branches" ? (
<div className="flex max-w-sm flex-col gap-1 p-2">
<div className="flex items-center gap-1">
<BranchEnvironmentIconSmall className={cn("size-4", envTextClassName)} />
<Header2>Create your first branch</Header2>
</div>
<Paragraph spacing variant="small">
Branches are a way to test new features in isolation before merging them into the
main environment.
</Paragraph>
<Paragraph variant="small">
Branches are only available when using <V4Badge inline /> or above. Read our{" "}
<TextLink to={docsPath("upgrade-to-v4")}>v4 upgrade guide</TextLink> to learn
more.
</Paragraph>
</div>
) : (
<div className="flex max-w-sm flex-col gap-1 p-2">
<Paragraph variant="extra-small">All branches are archived.</Paragraph>
</div>
)}
}
isSelected={env.id === currentEnvironment.id}
/>
))}
</>
) : state === "no-branches" ? (
<div className="flex max-w-sm flex-col gap-1 p-2">
<div className="flex items-center gap-1">
<BranchEnvironmentIconSmall className={cn("size-4", envTextClassName)} />
<Header2>Create your first branch</Header2>
</div>
<Paragraph spacing variant="small">
Branches are a way to test new features in isolation before merging them into the main
environment.
</Paragraph>
<Paragraph variant="small">
Branches are only available when using <V4Badge inline /> or above. Read our{" "}
<TextLink to={docsPath("upgrade-to-v4")}>v4 upgrade guide</TextLink> to learn more.
</Paragraph>
</div>
<div className="border-t border-charcoal-700 p-1">
{parentEnvironment.type === "DEVELOPMENT" ? (
<PopoverMenuItem
to={branchesDevPath(organization, project, environment)}
title="Manage dev branches"
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
leadingIconClassName="text-text-dimmed"
/>
) : (
<PopoverMenuItem
to={branchesPath(organization, project, environment)}
title="Manage preview branches"
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
leadingIconClassName="text-text-dimmed"
/>
)}
) : (
<div className="flex max-w-sm flex-col gap-1 p-2">
<Paragraph variant="extra-small">All branches are archived.</Paragraph>
</div>
</PopoverContent>
)}
</div>
</Popover>
<div className="border-t border-charcoal-700 p-1">
{parentEnvironment.type === "DEVELOPMENT" ? (
<PopoverMenuItem
to={branchesDevPath(organization, project, environment)}
title="Manage dev branches"
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
leadingIconClassName="text-text-dimmed"
/>
) : (
<PopoverMenuItem
to={branchesPath(organization, project, environment)}
title="Manage preview branches"
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
leadingIconClassName="text-text-dimmed"
/>
)}
Comment on lines +360 to +375

@devin-ai-integration devin-ai-integration Bot Jul 2, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚩 Exported BranchesPopoverContent relies on useEnvironment() for the manage-branches link, which may break in future reuse contexts

The newly exported BranchesPopoverContent is documented as shared between the dropdown submenu and a future "side-menu segmented control's Preview popover." However, the "Manage branches" link at EnvironmentSelector.tsx:369 and EnvironmentSelector.tsx:376 uses environment from useEnvironment() (the route-context environment) rather than deriving the correct parent environment from the parentEnvironment prop. If a user is on a Development environment and opens a Preview branches popover, the link would point to the Development branches page instead of the Preview one. This is a pre-existing behavior (identical to the old Branches component), but exporting the component for reuse makes it more likely to surface in practice.

Open in Devin Review

Was this helpful? React with 👍 or 👎 to provide feedback.

Comment on lines +360 to +375

@coderabbitai coderabbitai Bot Jul 2, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Footer links use the wrong environment for the URL.

branchesDevPath/branchesPath are called with environment (the currently active route environment from useEnvironment()), but the branch of interest here is parentEnvironment (whose .type is used to pick dev-vs-preview). If the user is currently on a different environment (e.g., Production) while hovering the Preview branches submenu, "Manage preview branches" will build a URL using Production's id/slug instead of the Preview parent environment, sending the user to the wrong page.

🐛 Proposed fix 
       {parentEnvironment.type === "DEVELOPMENT" ? (
           <PopoverMenuItem
-            to={branchesDevPath(organization, project, environment)}
+            to={branchesDevPath(organization, project, parentEnvironment)}
             title="Manage dev branches"
             icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
             leadingIconClassName="text-text-dimmed"
           />
         ) : (
           <PopoverMenuItem
-            to={branchesPath(organization, project, environment)}
+            to={branchesPath(organization, project, parentEnvironment)}
             title="Manage preview branches"
             icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
             leadingIconClassName="text-text-dimmed"
           />
         )}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<div className="border-t border-charcoal-700 p-1">
{parentEnvironment.type === "DEVELOPMENT" ? (
<PopoverMenuItem
to={branchesDevPath(organization, project, environment)}
title="Manage dev branches"
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
leadingIconClassName="text-text-dimmed"
/>
) : (
<PopoverMenuItem
to={branchesPath(organization, project, environment)}
title="Manage preview branches"
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
leadingIconClassName="text-text-dimmed"
/>
)}
<div className="border-t border-charcoal-700 p-1">
{parentEnvironment.type === "DEVELOPMENT" ? (
<PopoverMenuItem
to={branchesDevPath(organization, project, parentEnvironment)}
title="Manage dev branches"
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
leadingIconClassName="text-text-dimmed"
/>
) : (
<PopoverMenuItem
to={branchesPath(organization, project, parentEnvironment)}
title="Manage preview branches"
icon={<Cog8ToothIcon className="size-4 text-text-dimmed" />}
leadingIconClassName="text-text-dimmed"
/>
)}

</div>
</>
);
}
12 changes: 2 additions & 10 deletions apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,21 +70,13 @@ export function HelpAndFeedback({
<QuestionMarkIcon className="size-5 min-w-5 shrink-0 text-success" />
<span
className={cn(
"overflow-hidden whitespace-nowrap text-2sm text-text-bright transition-all duration-150",
"overflow-hidden whitespace-nowrap text-[0.90625rem] font-medium tracking-[-0.01em] text-text-dimmed transition-all duration-150 group-hover:text-text-bright",
isCollapsed ? "max-w-0 opacity-0" : "max-w-[150px] opacity-100"
)}
>
Help & Feedback
</span>
</span>
<ShortcutKey
className={cn(
"size-4 flex-none transition-all duration-150",
isCollapsed ? "hidden" : ""
)}
shortcut={{ key: "h" }}
variant="medium/bright"
/>
</PopoverTrigger>
}
content={
Expand All @@ -95,7 +87,7 @@ export function HelpAndFeedback({
}
side="right"
sideOffset={8}
hidden={!isCollapsed}
delayDuration={isCollapsed ? 0 : 500}
buttonClassName="!h-8 w-full"
asChild
disableHoverableContent
Expand Down
Loading