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

.server-changes/side-menu-project-and-org-menus.md

@@ -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.

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -41,12 +41,16 @@ export function EnvironmentSelector({
   environment,
   className,
   isCollapsed = false,
+  showConnector = false,
 }: {
   organization: MatchedOrganization;
   project: SideMenuProject;
   environment: SideMenuEnvironment;
   className?: string;
   isCollapsed?: boolean;
+  /** Show an end tree-connector to the left of the icon so the selector reads
+   * as connected to the Project menu above it. Only used in the side menu. */
+  showConnector?: boolean;
 }) {
   const { isManagedCloud } = useFeatures();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -71,6 +75,21 @@ export function EnvironmentSelector({
               className
             )}
           >
+            {showConnector &&
+              !isCollapsed && (
+                // End tree-connector sized to the full button height (viewBox matches the
+                // 20x32 box) so the vertical line reaches the button's top edge and meets the
+                // Project button above, with the corner aligned to the environment icon's center.
+                <svg
+                  aria-hidden
+                  viewBox="0 0 20 32"
+                  fill="none"
+                  className="mr-1.5 h-8 w-5 shrink-0 text-charcoal-600"
+                >
+                  <line x1="10" y1="0" x2="10" y2="16" stroke="currentColor" strokeWidth="1" />
+                  <line x1="10" y1="16" x2="20" y2="16" stroke="currentColor" strokeWidth="1" />
+                </svg>
+              )}
             <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
               <EnvironmentIcon environment={environment} className="size-5 shrink-0" />
               <span
@@ -96,10 +115,10 @@ export function EnvironmentSelector({
             </span>
           </PopoverTrigger>
         }
-        content={environmentFullTitle(environment)}
+        content={`${environmentFullTitle(environment)} environment`}
         side="right"
         sideOffset={8}
-        hidden={!isCollapsed}
+        delayDuration={isCollapsed ? 0 : 500}
         buttonClassName="!h-8"
         asChild
         disableHoverableContent
@@ -111,6 +130,7 @@ export function EnvironmentSelector({
         align="start"
         style={{ maxHeight: `calc(var(--radix-popover-content-available-height) - 10vh)` }}
       >
+        <PopoverSectionHeader title="Environments" />
         <div className="flex flex-col gap-1 p-1">
           {project.environments
             .filter((env) => env.parentEnvironmentId === null)