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

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

@@ -0,0 +1,41 @@
+---
+area: webapp
+type: improvement
+---
+
+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)
+  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), 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.
+- Move the Settings item to the top of the organization settings side menu.
+- Align the organization settings and account side menus' horizontal padding
+  with the main side menu, and tighten the "Personal Access Tokens" label so it
+  no longer truncates.
+- Restyle the "Shortcuts" and "Contact us…" entries in the Help & Feedback
+  popover to match the other menu items (icon size/alignment, dimmed text, text
+  size).
+- Make the main side menu resizable: drag its right edge to set a custom width
+  (remembered per user), with the labels, headers, and padding transitioning in
+  real time and a snap to open or collapsed when released below the default
+  width. Clicking the edge toggles the menu and a tooltip explains both
+  gestures.
+
+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/AskAI.tsx

@@ -11,11 +11,12 @@ import { useSearchParams } from "@remix-run/react";
 import DOMPurify from "dompurify";
 import { motion } from "framer-motion";
 import { marked } from "marked";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { useTypedRouteLoaderData } from "remix-typedjson";
 import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
 import { SparkleListIcon } from "~/assets/icons/SparkleListIcon";
 import { useFeatures } from "~/hooks/useFeatures";
+import { useShortcutKeys } from "~/hooks/useShortcutKeys";
 import { type loader } from "~/root";
 import { Button } from "./primitives/Buttons";
 import { Callout } from "./primitives/Callout";
@@ -38,6 +39,105 @@ function useKapaWebsiteId() {
   return routeMatch?.kapa.websiteId;
 }
 
+/** Open/close state for the Ask AI dialog, including the `?aiHelp=` deep-link handling. */
+function useAskAIState() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [initialQuery, setInitialQuery] = useState<string | undefined>();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const openAskAI = useCallback((question?: string) => {
+    if (question) {
+      setInitialQuery(question);
+    } else {
+      setInitialQuery(undefined);
+    }
+    setIsOpen(true);
+  }, []);
+
+  const closeAskAI = useCallback(() => {
+    setIsOpen(false);
+    setInitialQuery(undefined);
+  }, []);
+
+  // Handle URL param functionality
+  useEffect(() => {
+    const aiHelp = searchParams.get("aiHelp");
+    if (aiHelp) {
+      // Delay to avoid hCaptcha bot detection
+      window.setTimeout(() => openAskAI(aiHelp), 1000);
+
+      // Clone instead of mutating in place
+      const next = new URLSearchParams(searchParams);
+      next.delete("aiHelp");
+      setSearchParams(next);
+    }
+  }, [searchParams, openAskAI]);
+
+  return { isOpen, setIsOpen, initialQuery, openAskAI, closeAskAI };
+}
+
+/**
+ * Hosts Ask AI for a menu that renders its own trigger (the side menu's Help & Feedback popover):
+ * the Kapa provider, the global ⌘I shortcut, and the dialog all live here, and `children`
+ * receives the open function to render a trigger with. Wrap this around the popover rather than
+ * inside its content so the dialog and shortcut survive the popover closing. `children` receives
+ * undefined when Ask AI is unavailable (self-hosted, no Kapa website id, or during SSR).
+ */
+export function AskAIRoot({
+  children,
+}: {
+  children: (openAskAI: (() => void) | undefined) => ReactNode;
+}) {
+  const { isManagedCloud } = useFeatures();
+  const websiteId = useKapaWebsiteId();
+
+  if (!isManagedCloud || !websiteId) {
+    return <>{children(undefined)}</>;
+  }
+
+  return (
+    <ClientOnly fallback={<>{children(undefined)}</>}>
+      {() => <AskAIRootProvider websiteId={websiteId}>{children}</AskAIRootProvider>}
+    </ClientOnly>
+  );
+}
+
+function AskAIRootProvider({
+  websiteId,
+  children,
+}: {
+  websiteId: string;
+  children: (openAskAI: () => void) => ReactNode;
+}) {
+  const { isOpen, setIsOpen, initialQuery, openAskAI, closeAskAI } = useAskAIState();
+
+  useShortcutKeys({
+    shortcut: { modifiers: ["mod"], key: "i", enabledOnInputElements: true },
+    action: () => openAskAI(),
+  });
+
+  return (
+    <KapaProvider
+      integrationId={websiteId}
+      callbacks={{
+        askAI: {
+          onQuerySubmit: () => openAskAI(),
+          onAnswerGenerationCompleted: () => openAskAI(),
+        },
+      }}
+      botProtectionMechanism="hcaptcha"
+    >
+      {children(() => openAskAI())}
+      <AskAIDialog
+        initialQuery={initialQuery}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        closeAskAI={closeAskAI}
+      />
+    </KapaProvider>
+  );
+}
+
 export function AskAI({ isCollapsed = false }: { isCollapsed?: boolean }) {
   const { isManagedCloud } = useFeatures();
   const websiteId = useKapaWebsiteId();
@@ -72,37 +172,7 @@ type AskAIProviderProps = {
 };
 
 function AskAIProvider({ websiteId, isCollapsed = false }: AskAIProviderProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [initialQuery, setInitialQuery] = useState<string | undefined>();
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const openAskAI = useCallback((question?: string) => {
-    if (question) {
-      setInitialQuery(question);
-    } else {
-      setInitialQuery(undefined);
-    }
-    setIsOpen(true);
-  }, []);
-
-  const closeAskAI = useCallback(() => {
-    setIsOpen(false);
-    setInitialQuery(undefined);
-  }, []);
-
-  // Handle URL param functionality
-  useEffect(() => {
-    const aiHelp = searchParams.get("aiHelp");
-    if (aiHelp) {
-      // Delay to avoid hCaptcha bot detection
-      window.setTimeout(() => openAskAI(aiHelp), 1000);
-
-      // Clone instead of mutating in place
-      const next = new URLSearchParams(searchParams);
-      next.delete("aiHelp");
-      setSearchParams(next);
-    }
-  }, [searchParams, openAskAI]);
+  const { isOpen, setIsOpen, initialQuery, openAskAI, closeAskAI } = useAskAIState();
 
   return (
     <KapaProvider

apps/webapp/app/components/Shortcuts.tsx

@@ -1,8 +1,8 @@
 import { KeyboardIcon } from "~/assets/icons/KeyboardIcon";
 import { useState } from "react";
 import { useShortcutKeys } from "~/hooks/useShortcutKeys";
-import { Button } from "./primitives/Buttons";
 import { Header3 } from "./primitives/Headers";
+import { SideMenuItemButton } from "./navigation/SideMenuItem";
 import { Paragraph } from "./primitives/Paragraph";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "./primitives/SheetV3";
 import { ShortcutKey } from "./primitives/ShortcutKey";
@@ -11,19 +11,12 @@ export function Shortcuts() {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button
-          variant="small-menu-item"
-          LeadingIcon={KeyboardIcon}
-          leadingIconClassName="text-text-dimmed group-hover/button:text-text-bright"
+        <SideMenuItemButton
+          icon={KeyboardIcon}
+          name="Shortcuts"
           data-action="shortcuts"
-          fullWidth
-          textAlignLeft
-          shortcut={{ modifiers: ["shift"], key: "?", enabled: false }}
-          className="gap-x-0 pl-1.5"
-          iconSpacing="gap-x-1.5"
-        >
-          Shortcuts
-        </Button>
+          trailing={<ShortcutKey shortcut={{ modifiers: ["shift"], key: "?" }} variant="medium" />}
+        />
       </SheetTrigger>
       <ShortcutContent />
     </Sheet>

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-text-dimmed", className)} />
+    <AvatarCircleIcon className={cn("aspect-square text-text-dimmed", className)} />
   );
 }

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

@@ -7,7 +7,6 @@ import {
   personalAccessTokensPath,
   rootPath,
 } from "~/utils/pathBuilder";
-import { AskAI } from "../AskAI";
 import { LinkButton } from "../primitives/Buttons";
 import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
 import { SideMenuHeader } from "./SideMenuHeader";
@@ -34,7 +33,7 @@ export function AccountSideMenu({ user }: { user: User }) {
           <span className="text-text-bright">Back to app</span>
         </LinkButton>
       </div>
-      <div className="mb-6 flex grow flex-col overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
+      <div className="mb-6 flex grow flex-col overflow-y-auto pl-2.5 pr-0 pt-2 scrollbar-gutter-stable scrollbar-thin scrollbar-track-transparent scrollbar-thumb-surface-control">
         <SideMenuHeader title="Account" />
         <SideMenuItem
           name="Profile"
@@ -45,6 +44,7 @@ export function AccountSideMenu({ user }: { user: User }) {
         />
         <SideMenuItem
           name="Personal Access Tokens"
+          nameClassName="tracking-[-0.04em]"
           icon={ShieldIcon}
           activeIconColor="text-text-bright"
           to={personalAccessTokensPath()}
@@ -60,7 +60,6 @@ export function AccountSideMenu({ user }: { user: User }) {
       </div>
       <div className="flex w-full items-center justify-between border-t border-grid-bright p-1">
         <HelpAndFeedback />
-        <AskAI />
       </div>
     </div>
   );