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

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

@@ -0,0 +1,6 @@
+---
+area: webapp
+type: improvement
+---
+
+Refreshed the side menu: separate organization and account menus, a new project switcher, and the menu is now resizable by dragging its edge. The account Profile page has also been redesigned.

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

@@ -1,4 +1,4 @@
-export function AvatarCircleIcon({ className}: { className?: string }) {
+function AvatarCircle({ className, strokeWidth }: { className?: string; strokeWidth: number }) {
  return (
  <svg
  className={className}
@@ -8,13 +8,28 @@ export function AvatarCircleIcon({ className }: { className?: string }) {
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  >
- <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2" />
- <circle cx="12" cy="9.5" r="2.5" stroke="currentColor" strokeWidth="2" />
+ <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth={strokeWidth} />
+ <circle cx="12" cy="9.5" r="2.5" stroke="currentColor" strokeWidth={strokeWidth} />
  <path
  d="M6 19C7.00156 16.6478 9.32233 15 12.0254 15C14.6837 15 16.9724 16.5938 18 18.884"
  stroke="currentColor"
- strokeWidth="2"
+ strokeWidth={strokeWidth}
  />
  </svg>
  );
 }
+
+/** User avatar placeholder with a 2px stroke (the default). */
+export function AvatarCircleIcon({ className }: { className?: string }) {
+ return <AvatarCircle className={className} strokeWidth={2} />;
+}
+
+/** Thinner 1.5px-stroke variant of {@link AvatarCircleIcon}. */
+export function AvatarCircleIconThin({ className }: { className?: string }) {
+ return <AvatarCircle className={className} strokeWidth={1.5} />;
+}
+
+/** Thinnest 1.25px-stroke variant of {@link AvatarCircleIcon}. */
+export function AvatarCircleIconExtraThin({ className }: { className?: string }) {
+ return <AvatarCircle className={className} strokeWidth={1.25} />;
+}

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,44 @@
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+export function LeftSideMenuIcon({
+ className,
+ hovered: controlledHovered,
+}: {
+ className?: string;
+ /** Drives the animation when provided (e.g. parent hover); otherwise the icon uses 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), not the SVG `width` attr — framer snaps the first animation
+ of an idle SVG geometry attribute. Left origin collapses the panel 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,104 @@ 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 (Kapa provider, ⌘I shortcut, dialog) for a menu that renders its own trigger. Wrap
+ * it around the popover, not inside, so the dialog and shortcut survive the popover closing.
+ * `children` receives the open function, or undefined when Ask AI is unavailable (self-hosted, no
+ * Kapa website id, or 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 +171,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/GlobalShortcuts.tsx

@@ -0,0 +1,40 @@
+import { useNavigate, useSubmit } from "@remix-run/react";
+import { useEffect } from "react";
+import { useIsImpersonating } from "~/hooks/useOrganizations";
+import { useOptionalUser } from "~/hooks/useUser";
+import { adminPath } from "~/utils/pathBuilder";
+
+/** App-wide keyboard shortcuts, mounted once at the root so they work everywhere. Renders nothing. */
+export function GlobalShortcuts() {
+ const user = useOptionalUser();
+ const isImpersonating = useIsImpersonating();
+ const navigate = useNavigate();
+ const submit = useSubmit();
+
+ const isAdmin = Boolean(user?.admin) || isImpersonating;
+
+ useEffect(() => {
+ if (!isAdmin) return;
+
+ const onKeyDown = (event: KeyboardEvent) => {
+ // Admin escape hatch: Cmd+Option+A (Ctrl+Alt+A on Windows) opens the admin dashboard, or stops
+ // impersonating. Avoids Escape — Chrome/macOS never delivers a keydown for Escape+modifier (why
+ // the old Cmd+Esc did nothing). Matched on `event.code`, not `event.key`, because Option makes
+ // "A" report "å" (so a raw listener, not the `event.key`-based useShortcutKeys hook).
+ if (event.code !== "KeyA" || !event.altKey || !(event.metaKey || event.ctrlKey)) {
+ return;
+ }
+ event.preventDefault();
+ if (isImpersonating) {
+ submit(null, { action: "/resources/impersonation", method: "delete" });
+ } else {
+ navigate(adminPath());
+ }
+ };
+
+ document.addEventListener("keydown", onKeyDown);
+ return () => document.removeEventListener("keydown", onKeyDown);
+ }, [isAdmin, isImpersonating, navigate, submit]);
+
+ return null;
+}

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>