feat(webapp): highlight impersonation mode in the side menu

Add a yellow-500/80 right border to the side menu while impersonating and match
the "Stop impersonating" text and icon to it, both driven by a single
IMPERSONATION_ACCENT constant. Also consolidate this branch's webapp UI notes
into one .server-changes file.

Author: samejr

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

@@ -3,7 +3,7 @@ area: webapp
 type: improvement
 ---
 
-Restructure the side menu's top-left and project/organization navigation:
+Refresh the side menu and account UI:
 
 - 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)
@@ -12,11 +12,17 @@ Restructure the side menu's top-left and project/organization navigation:
   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.
+  organization), with a separate account menu button (Profile, Personal Access
+  Tokens, Security, admin/impersonation, Logout) beside it.
 - Match the Environment selector popover's item sizing (icons and labels,
   including the branch submenu and its footer) to the Project popover so the two
   side-menu menus are visually consistent.
+- Redesign the account Profile page (/account) into the Security page's
+  row-and-divider layout: Profile picture, Full name, Email address, and a
+  "Receive onboarding emails" toggle on equal-height rows, with a primary Update
+  button.
+- Signal impersonation mode with a yellow side-menu border and a matching
+  "Stop impersonating" accent.
 
 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

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

@@ -156,6 +156,14 @@ function getSectionCollapsed(
 const SIDE_MENU_POPOVER_ITEM_ICON = "h-5 w-5 text-text-dimmed";
 const SIDE_MENU_POPOVER_ITEM_LABEL = "text-[0.90625rem] font-medium tracking-[-0.01em]";
 
+// Accent used to signal impersonation mode across the UI (the side menu border and the
+// "Stop impersonating" action). Full class strings per Tailwind's static scanning — change
+// the shade here to update everywhere.
+const IMPERSONATION_ACCENT = {
+  border: "border-yellow-500/80",
+  text: "text-yellow-500/80",
+};
+
 type SideMenuUser = Pick<
   UserWithDashboardPreferences,
   "email" | "admin" | "dashboardPreferences"
@@ -296,7 +304,8 @@ export function SideMenu({
   return (
     <div
       className={cn(
-        "relative h-full border-r border-grid-bright bg-background-bright transition-all duration-200",
+        "relative h-full border-r bg-background-bright transition-all duration-200",
+        user.isImpersonating ? IMPERSONATION_ACCENT.border : "border-grid-bright",
         isCollapsed ? "w-[2.75rem]" : "w-56"
       )}
     >
@@ -1029,7 +1038,7 @@ function AccountMenu({ isAdmin, isImpersonating }: { isAdmin: boolean; isImperso
               <PopoverMenuItem
                 title={
                   <div className="flex w-full items-center justify-between">
-                    <span className="text-amber-400">Stop impersonating</span>
+                    <span className={IMPERSONATION_ACCENT.text}>Stop impersonating</span>
                     <span className="flex items-center gap-1">
                       <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
                       <ShortcutKey shortcut={{ key: "esc" }} variant="medium/bright" />
@@ -1038,7 +1047,7 @@ function AccountMenu({ isAdmin, isImpersonating }: { isAdmin: boolean; isImperso
                 }
                 icon={UserCrossIcon}
                 onClick={stopImpersonating}
-                leadingIconClassName={cn(SIDE_MENU_POPOVER_ITEM_ICON, "text-amber-400")}
+                leadingIconClassName={cn(SIDE_MENU_POPOVER_ITEM_ICON, IMPERSONATION_ACCENT.text)}
                 className={SIDE_MENU_POPOVER_ITEM_LABEL}
               />
             ) : (