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

.server-changes/account-profile-page-layout.md

@@ -0,0 +1,11 @@
+---
+area: webapp
+type: improvement
+---
+
+Redesign the account Profile page (`/account`) to use the same row-and-divider
+layout as the Security page: each setting is a full-width row with the title on
+the left and its control on the right, separated by divider lines. Profile
+picture, Full name, Email address, and a "Receive onboarding emails" toggle
+(replacing the old checkbox) each sit on equal-height rows, and the Update
+button is now a primary button.

.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/assets/icons/ChainLinkIcon.tsx

@@ -0,0 +1,27 @@
+export function ChainLinkIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10 19.0004L9.82843 19.1719C8.26634 20.734 5.73368 20.734 4.17158 19.1719L3.82843 18.8288C2.26634 17.2667 2.26633 14.734 3.82843 13.1719L7.17158 9.8288C8.73368 8.2667 11.2663 8.2667 12.8284 9.8288L13.1716 10.1719C13.8252 10.8256 14.2053 11.6491 14.312 12.5004"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.68799 12.5004C9.79463 13.3516 10.1748 14.1752 10.8284 14.8288L11.1715 15.1719C12.7336 16.734 15.2663 16.734 16.8284 15.1719L20.1715 11.8288C21.7336 10.2667 21.7336 7.73404 20.1715 6.17194L19.8284 5.8288C18.2663 4.2667 15.7336 4.2667 14.1715 5.8288L14 6.00037"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/LeftSideMenuCollapsedIcon.tsx

@@ -0,0 +1,22 @@
+export function LeftSideMenuCollapsedIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="4" y="4" width="16" height="16" rx="3" stroke="currentColor" strokeWidth="2" />
+      <rect x="6" y="6" width="2" height="12" rx="1" fill="currentColor" />
+      <path
+        d="M12 14.5L14.5 12L12 9.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}

apps/webapp/app/assets/icons/LeftSideMenuIcon.tsx

@@ -0,0 +1,49 @@
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+export function LeftSideMenuIcon({
+  className,
+  hovered: controlledHovered,
+}: {
+  className?: string;
+  /**
+   * When provided, the shape animation is driven by this prop (e.g. from a
+   * parent button's hover). When omitted, the icon animates on its own hover.
+   */
+  hovered?: boolean;
+}) {
+  const [internalHovered, setInternalHovered] = useState(false);
+  const isControlled = controlledHovered !== undefined;
+  const hovered = isControlled ? controlledHovered : internalHovered;
+
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onMouseEnter={isControlled ? undefined : () => setInternalHovered(true)}
+      onMouseLeave={isControlled ? undefined : () => setInternalHovered(false)}
+    >
+      <rect x="4" y="4" width="16" height="16" rx="2" stroke="currentColor" strokeWidth="2" />
+      {/* Animate a transform (scaleX) rather than the SVG `width` attribute:
+          framer snaps the first animation of an SVG geometry attribute after it
+          has been idle, whereas transforms animate reliably. Anchoring the origin
+          to the left edge collapses the panel from right to left. */}
+      <motion.rect
+        x="6"
+        y="6"
+        width="5"
+        height="12"
+        rx="1"
+        fill="currentColor"
+        initial={false}
+        style={{ originX: 0 }}
+        animate={{ scaleX: hovered ? 0.2 : 1 }}
+        transition={{ duration: 0.3, ease: "easeInOut" }}
+      />
+    </svg>
+  );
+}

apps/webapp/app/components/UserProfilePhoto.tsx

@@ -1,4 +1,4 @@
-import { UserCircleIcon } from "@heroicons/react/24/solid";
+import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon";
 import { useOptionalUser } from "~/hooks/useUser";
 import { cn } from "~/utils/cn";
 
@@ -26,6 +26,6 @@ export function UserAvatar({
       />
     </div>
   ) : (
-    <UserCircleIcon className={cn("aspect-square text-charcoal-400", className)} />
+    <AvatarCircleIcon className={cn("aspect-square text-charcoal-400", className)} />
   );
 }