- 
-
- ) : (
-
+
+
+ );
+ }
+
+ const PlaceholderIcon = PLACEHOLDER_BY_STROKE_WIDTH[strokeWidth];
+ return
- (null);
const [isTruncated, setIsTruncated] = useState(false);
@@ -113,7 +116,12 @@ export function EnvironmentLabel({
const content = (
{text}
diff --git a/apps/webapp/app/components/navigation/AccountSideMenu.tsx b/apps/webapp/app/components/navigation/AccountSideMenu.tsx
index ba7938adde6..f48de39e2fc 100644
--- a/apps/webapp/app/components/navigation/AccountSideMenu.tsx
+++ b/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 }) {
Back to app
-
-
diff --git a/apps/webapp/app/components/environments/EnvironmentLabel.tsx b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
index 8143e5e5e7d..3fd5d526fc1 100644
--- a/apps/webapp/app/components/environments/EnvironmentLabel.tsx
+++ b/apps/webapp/app/components/environments/EnvironmentLabel.tsx
@@ -81,12 +81,15 @@ export function EnvironmentLabel({
tooltipSideOffset = 34,
tooltipSide = "right",
disableTooltip = false,
+ truncate = true,
}: {
environment: Environment;
className?: string;
tooltipSideOffset?: number;
tooltipSide?: "top" | "right" | "bottom" | "left";
disableTooltip?: boolean;
+ /** When false, the label clips without an ellipsis (side menu fades it in place). Defaults true. */
+ truncate?: boolean;
}) {
const spanRef = useRef
+
-
+
Upgrade
+
);
diff --git a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
index 7e2a3efdb50..0f51b225457 100644
--- a/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
+++ b/apps/webapp/app/components/navigation/EnvironmentSelector.tsx
@@ -35,18 +35,26 @@ import { V4Badge } from "../V4Badge";
import { type SideMenuEnvironment, type SideMenuProject } from "./SideMenu";
import { Badge } from "../primitives/Badge";
+// Size this Env popover's items to match the Project popover (SIDE_MENU_POPOVER_ITEM_* in
+// SideMenu.tsx). Only at these call sites, so shared EnvironmentLabel/EnvironmentCombo defaults stay.
+const ENV_POPOVER_ITEM_ICON = "size-5";
+const ENV_POPOVER_ITEM_LABEL = "text-[0.90625rem] font-medium tracking-[-0.01em]";
+
export function EnvironmentSelector({
organization,
project,
environment,
className,
isCollapsed = false,
+ isDragging = false,
}: {
organization: MatchedOrganization;
project: SideMenuProject;
environment: SideMenuEnvironment;
className?: string;
isCollapsed?: boolean;
+ /** True while the side menu is being drag-resized; keeps the row in its expanded arrangement. */
+ isDragging?: boolean;
}) {
const { isManagedCloud } = useFeatures();
const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -73,42 +81,58 @@ export function EnvironmentSelector({
button={
}
- content={environmentFullTitle(environment)}
+ content={`${environmentFullTitle(environment)} environment`}
side="right"
sideOffset={8}
+ // Tooltip only on the collapsed rail (expanded shows the label; this selector is also reused
+ // outside the side menu, where a hover tooltip is unwanted).
hidden={!isCollapsed}
+ delayDuration={0}
buttonClassName="h-8!"
asChild
+ tabbable
disableHoverableContent
/>
(null);
@@ -234,23 +268,6 @@ function Branches({
}, 150);
};
- const activeBranches = branchEnvironments.filter((env) => env.archivedAt === null);
- const state =
- branchEnvironments.length === 0
- ? "no-branches"
- : activeBranches.length === 0
- ? "no-active-branches"
- : "has-branches";
-
- // Only surface the active environment's archived-branch item in the submenu it
- // actually belongs to. Both Development and Preview render this component, so
- // without the parent check an archived dev branch would leak into the Preview
- // submenu (and vice-versa).
- const currentBranchIsArchived =
- environment.archivedAt !== null && environment.parentEnvironmentId === parentEnvironment.id;
-
- const envTextClassName = environmentTextClassName(parentEnvironment);
-
return (
setMenuOpen(open)} open={isMenuOpen}>
-
}
isSelected={false}
@@ -176,8 +210,12 @@ export function EnvironmentSelector({
)}
title={
-
}
isSelected={false}
@@ -199,10 +237,6 @@ function Branches({
branchEnvironments: SideMenuEnvironment[];
currentEnvironment: SideMenuEnvironment;
}) {
- const organization = useOrganization();
- const project = useProject();
- const environment = useEnvironment();
- const { urlForEnvironment } = useEnvironmentSwitcher();
const navigation = useNavigation();
const [isMenuOpen, setMenuOpen] = useState(false);
const timeoutRef = useRef
@@ -263,7 +280,11 @@ function Branches({
textAlignLeft
fullWidth
>
-
-
-
-
-
-
+
+
+
-
+
+ {openAskAI !== undefined && (
+
-
-
-
-
+
+
+ )}
+
);
}
diff --git a/apps/webapp/app/components/navigation/NotificationPanel.tsx b/apps/webapp/app/components/navigation/NotificationPanel.tsx
index bb07b54da9a..78cb52ca591 100644
--- a/apps/webapp/app/components/navigation/NotificationPanel.tsx
+++ b/apps/webapp/app/components/navigation/NotificationPanel.tsx
@@ -121,7 +121,7 @@ export function NotificationPanel({
return (
-
- {currentBranchIsArchived && (
-
-
- {environment.branchName}
-
- Archived
-
- }
- icon={
-
+
+ );
+}
+
+/**
+ * Inner content of the branches popover (list, empty states, "Manage branches" footer). Shared by
+ * the `Branches` hover submenu and the side-menu Preview popover.
+ */
+export function BranchesPopoverContent({
+ parentEnvironment,
+ branchEnvironments,
+ currentEnvironment,
+}: {
+ parentEnvironment: SideMenuEnvironment;
+ branchEnvironments: SideMenuEnvironment[];
+ currentEnvironment: SideMenuEnvironment;
+}) {
+ const organization = useOrganization();
+ const project = useProject();
+ const environment = useEnvironment();
+ const { urlForEnvironment } = useEnvironmentSwitcher();
+
+ const activeBranches = branchEnvironments.filter((env) => env.archivedAt === null);
+ const state =
+ branchEnvironments.length === 0
+ ? "no-branches"
+ : activeBranches.length === 0
+ ? "no-active-branches"
+ : "has-branches";
+
+ // Show the archived-branch item only in the submenu it belongs to: both Development and Preview
+ // render this, so without the parent check an archived dev branch leaks into Preview (and vice-versa).
+ const currentBranchIsArchived =
+ environment.archivedAt !== null && environment.parentEnvironmentId === parentEnvironment.id;
+
+ const envTextClassName = environmentTextClassName(parentEnvironment);
+
+ return (
+ <>
+
+ {parentEnvironment.type === "DEVELOPMENT" ? (
+
+
+ {currentBranchIsArchived && (
+
- {branchEnvironments
- .filter((env) => env.archivedAt === null)
- .map((env) => (
-
- {env.branchName ?? DEFAULT_DEV_BRANCH}
-
- }
- icon={
- Archived
- ) : state === "no-branches" ? (
-
-
-
- Branches are a way to test new features in isolation before merging them into the
- main environment.
-
-
- Branches are only available when using v4 upgrade guide to learn
- more.
-
-
- ) : (
-
- Create your first branch
-
-
- All branches are archived.
-
- )}
-
- {parentEnvironment.type === "DEVELOPMENT" ? (
-
+ {env.branchName ?? DEFAULT_DEV_BRANCH}
+
+ }
+ icon={
+
-
+
);
}
diff --git a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
index cf3cb62aaa5..669271fe766 100644
--- a/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
+++ b/apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx
@@ -1,25 +1,27 @@
import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
import { motion } from "framer-motion";
import { Fragment, useState } from "react";
+import { AISparkleIcon } from "~/assets/icons/AISparkleIcon";
import { BookIcon } from "~/assets/icons/BookIcon";
import { BulbIcon } from "~/assets/icons/BulbIcon";
+import { DropdownIcon } from "~/assets/icons/DropdownIcon";
import { EnvelopeIcon } from "~/assets/icons/EnvelopeIcon";
import { QuestionMarkIcon } from "~/assets/icons/QuestionMarkIcon";
import { RadarPulseIcon } from "~/assets/icons/RadarPulseIcon";
import { StarIcon } from "~/assets/icons/StarIcon";
import { useShortcutKeys } from "~/hooks/useShortcutKeys";
-import { sanitizeHttpUrl } from "~/utils/sanitizeUrl";
import { useCurrentPlan } from "~/routes/_app.orgs.$organizationSlug/route";
import { useRecentChangelogs } from "~/routes/resources.platform-changelogs";
import { cn } from "~/utils/cn";
+import { sanitizeHttpUrl } from "~/utils/sanitizeUrl";
+import { AskAIRoot } from "../AskAI";
import { Feedback } from "../Feedback";
import { Shortcuts } from "../Shortcuts";
-import { Button } from "../primitives/Buttons";
import { Paragraph } from "../primitives/Paragraph";
import { Popover, PopoverContent, PopoverTrigger } from "../primitives/Popover";
import { ShortcutKey } from "../primitives/ShortcutKey";
import { SimpleTooltip } from "../primitives/Tooltip";
-import { SideMenuItem } from "./SideMenuItem";
+import { SideMenuItem, SideMenuItemButton } from "./SideMenuItem";
export function HelpAndFeedback({
disableShortcut = false,
@@ -49,135 +51,161 @@ export function HelpAndFeedback({
+
+ Branches are a way to test new features in isolation before merging them into the main
+ environment.
+
+
+ Branches are only available when using v4 upgrade guide to learn more.
+
-
+ ) : (
+
+ Create your first branch
+
+
+ All branches are archived.
+
+ )}
+
)}
- shortcut={{ key: "h" }}
- variant="medium/bright"
- />
-
- }
- content={
-
- Help & Feedback
-
-
-
-
- Contact us…
-
- }
- />
-
-
- What's new
- {changelogs.map((entry) => (
-
-
+
+
+
+
+ What's new
+ {changelogs.map((entry) => (
+
+
+
+
{isCollapsed ? (
Back to app
-
+
(null);
- const [showHeaderDivider, setShowHeaderDivider] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(
user.dashboardPreferences.sideMenu?.isCollapsed ?? false
);
+ const [isDragging, setIsDragging] = useState(false);
+ // True during a click/⌘B/release-snap animation. With isDragging, marks any in-flight transition
+ // (the gutter is only reserved once settled — see `showReservedGutter`).
+ const [isAnimating, setIsAnimating] = useState(false);
+ // Direction of an in-flight drag, for the Free-plan banner slide. A drag that started expanded is a
+ // close (the banner tracks it down); one that started collapsed is an open (the banner stays hidden
+ // until fully open, then rises). Only meaningful while `isDragging`.
+ const [dragStartedCollapsed, setDragStartedCollapsed] = useState(false);
+
+ // --- Resize state (see the module constants above) ---
+ const rootRef = useRef(null);
+ const rafRef = useRef(null);
+ // Mirror of `isCollapsed` for the drag handlers (outside React's render cycle; no stale closures).
+ const isCollapsedRef = useRef(isCollapsed);
+ // The last-committed expanded width; animation targets and re-expansion read from here.
+ const expandedWidthRef = useRef(
+ clamp(user.dashboardPreferences.sideMenu?.width ?? DEFAULT_WIDTH, DEFAULT_WIDTH, MAX_WIDTH)
+ );
+ // Frozen first-paint width; never changes, so React never fights the imperative width writes.
+ const initialWidthRef = useRef(
+ (user.dashboardPreferences.sideMenu?.isCollapsed ?? false)
+ ? COLLAPSED_WIDTH
+ : expandedWidthRef.current
+ );
+ const widthRef = useRef(initialWidthRef.current);
+ const progressRef = useRef((user.dashboardPreferences.sideMenu?.isCollapsed ?? false) ? 1 : 0);
+ // Frozen initial style (incl. CSS vars) so the SSR HTML has the right collapsed/expanded visuals
+ // (no pre-hydration flash). Stable identity, so React never rewrites it after writeVisual.
+ const initialStyleRef = useRef({
+ width: initialWidthRef.current,
+ "--sm-collapse": String(progressRef.current),
+ "--sm-label-opacity": String(progressToLabelOpacity(progressRef.current)),
+ } as CSSProperties);
+ // Removes an in-flight drag's window listeners (set on pointerdown; cleared on finish/unmount).
+ const dragCleanupRef = useRef<(() => void) | null>(null);
+
const preferencesFetcher = useFetcher();
const pendingPreferencesRef = useRef<{
isCollapsed?: boolean;
+ width?: number;
sectionId?: SideMenuSectionId;
sectionCollapsed?: boolean;
}>({});
@@ -179,6 +353,7 @@ export function SideMenu({
const persistSideMenuPreferences = useCallback(
(data: {
isCollapsed?: boolean;
+ width?: number;
sectionId?: SideMenuSectionId;
sectionCollapsed?: boolean;
}) => {
@@ -202,6 +377,9 @@ export function SideMenu({
if (pending.isCollapsed !== undefined) {
formData.append("isCollapsed", String(pending.isCollapsed));
}
+ if (pending.width !== undefined) {
+ formData.append("width", String(pending.width));
+ }
if (pending.sectionId !== undefined && pending.sectionCollapsed !== undefined) {
formData.append("sectionId", pending.sectionId);
formData.append("sectionCollapsed", String(pending.sectionCollapsed));
@@ -216,41 +394,243 @@ export function SideMenu({
[user.isImpersonating, preferencesFetcher]
);
- // Flush pending preferences on unmount to avoid losing the last toggle
+ // Flush routine in a ref so the unmount effect can have empty deps. `useFetcher` returns a fresh
+ // object each render, so depending on it would fire the cleanup (flushing the debounce) every
+ // render — and drags re-render constantly — instead of only on unmount.
+ const flushPendingPreferencesRef = useRef<() => void>();
+ flushPendingPreferencesRef.current = () => {
+ if (debounceTimeoutRef.current) {
+ clearTimeout(debounceTimeoutRef.current);
+ }
+ if (user.isImpersonating) return;
+ const pending = pendingPreferencesRef.current;
+ const hasPendingChanges =
+ pending.isCollapsed !== undefined ||
+ pending.width !== undefined ||
+ (pending.sectionId !== undefined && pending.sectionCollapsed !== undefined);
+ if (!hasPendingChanges) return;
+
+ const formData = new FormData();
+ if (pending.isCollapsed !== undefined) {
+ formData.append("isCollapsed", String(pending.isCollapsed));
+ }
+ if (pending.width !== undefined) {
+ formData.append("width", String(pending.width));
+ }
+ if (pending.sectionId !== undefined && pending.sectionCollapsed !== undefined) {
+ formData.append("sectionId", pending.sectionId);
+ formData.append("sectionCollapsed", String(pending.sectionCollapsed));
+ }
+ preferencesFetcher.submit(formData, {
+ method: "POST",
+ action: "/resources/preferences/sidemenu",
+ });
+ pendingPreferencesRef.current = {};
+ };
+
+ // Flush pending preferences on unmount. Empty deps so cleanup runs only on a real unmount
+ // (see flushPendingPreferencesRef).
useEffect(() => {
- return () => {
- if (debounceTimeoutRef.current) {
- clearTimeout(debounceTimeoutRef.current);
+ return () => flushPendingPreferencesRef.current?.();
+ }, []);
+
+ // Measure the reserved scrollbar-gutter width once and expose it as `--sm-sb-gutter` (the padding
+ // hands off to it seamlessly; platform-dependent, so it must be measured). A probe with the same
+ // scrollbar classes is measured so the value matches what that styling reserves.
+ useEffect(() => {
+ const el = rootRef.current;
+ if (!el) return;
+ const probe = document.createElement("div");
+ probe.className = "scrollbar-gutter-stable scrollbar-thumb-on-hover";
+ probe.style.cssText =
+ "position:absolute;top:-9999px;left:-9999px;width:100px;height:100px;overflow-y:auto;visibility:hidden;";
+ document.body.appendChild(probe);
+ const gutter = probe.offsetWidth - probe.clientWidth;
+ document.body.removeChild(probe);
+ if (gutter > 0) el.style.setProperty("--sm-sb-gutter", `${gutter}px`);
+ }, []);
+
+ // Write width + collapse vars straight to the DOM (no re-render) so drags stay smooth; all
+ // width-driven visuals (labels, headers, padding, dividers) read them.
+ const writeVisual = useCallback((width: number, progress: number) => {
+ widthRef.current = width;
+ progressRef.current = progress;
+ const el = rootRef.current;
+ if (!el) return;
+ el.style.width = `${width}px`;
+ el.style.setProperty("--sm-collapse", String(progress));
+ el.style.setProperty("--sm-label-opacity", String(progressToLabelOpacity(progress)));
+ }, []);
+
+ // Animate width + progress over COLLAPSE_ANIM_MS (toggle button, ⌘B shortcut, release-snap).
+ const animateTo = useCallback(
+ (targetWidth: number, targetProgress: number) => {
+ if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+ const startWidth = widthRef.current;
+ const startProgress = progressRef.current;
+ if (startWidth === targetWidth && startProgress === targetProgress) {
+ setIsAnimating(false);
+ return;
}
- if (user.isImpersonating) return;
- const pending = pendingPreferencesRef.current;
- const hasPendingChanges =
- pending.isCollapsed !== undefined ||
- (pending.sectionId !== undefined && pending.sectionCollapsed !== undefined);
+ setIsAnimating(true);
+ const startTime = performance.now();
+ const step = (now: number) => {
+ const t = clamp((now - startTime) / COLLAPSE_ANIM_MS, 0, 1);
+ const eased = easeStandard(t);
+ writeVisual(
+ startWidth + (targetWidth - startWidth) * eased,
+ startProgress + (targetProgress - startProgress) * eased
+ );
+ if (t < 1) {
+ rafRef.current = requestAnimationFrame(step);
+ } else {
+ rafRef.current = null;
+ writeVisual(targetWidth, targetProgress);
+ setIsAnimating(false);
+ }
+ };
+ rafRef.current = requestAnimationFrame(step);
+ },
+ [writeVisual]
+ );
- if (hasPendingChanges) {
- const formData = new FormData();
- if (pending.isCollapsed !== undefined) {
- formData.append("isCollapsed", String(pending.isCollapsed));
+ // Collapse/expand to a resting state and remember it.
+ const applyCollapsed = useCallback(
+ (next: boolean) => {
+ isCollapsedRef.current = next;
+ setIsCollapsed(next);
+ persistSideMenuPreferences({ isCollapsed: next });
+ animateTo(next ? COLLAPSED_WIDTH : expandedWidthRef.current, next ? 1 : 0);
+ },
+ [animateTo, persistSideMenuPreferences]
+ );
+
+ const handleToggleCollapsed = useCallback(() => {
+ applyCollapsed(!isCollapsedRef.current);
+ }, [applyCollapsed]);
+
+ // Drag runs on window-level listeners so releasing anywhere finalizes it. (Pointer capture alone
+ // was unreliable: if the browser drops it mid-drag, the release never fires and the menu strands.)
+ const onHandlePointerDown = useCallback(
+ (e: ReactPointerEvent) => {
+ if (e.button !== 0) return;
+ e.preventDefault();
+ // Capture just quiets hover states while dragging; the drag doesn't depend on it.
+ try {
+ e.currentTarget.setPointerCapture(e.pointerId);
+ } catch {}
+ if (rafRef.current !== null) {
+ cancelAnimationFrame(rafRef.current);
+ rafRef.current = null;
+ }
+ // Grabbing the handle interrupts any in-flight collapse/expand; clear the flag so a drag that
+ // rests via writeVisual (not animateTo) doesn't strand it true and keep the gutter hidden.
+ setIsAnimating(false);
+ // Never allow two concurrent drags.
+ dragCleanupRef.current?.();
+
+ const drag = {
+ startX: e.clientX,
+ startWidth: rootRef.current?.getBoundingClientRect().width ?? widthRef.current,
+ startedCollapsed: isCollapsedRef.current,
+ didDrag: false,
+ };
+
+ const cleanup = () => {
+ window.removeEventListener("pointermove", onMove);
+ window.removeEventListener("pointerup", onUp);
+ window.removeEventListener("pointercancel", onCancel);
+ window.removeEventListener("blur", onCancel);
+ document.body.style.userSelect = "";
+ document.body.style.cursor = "";
+ dragCleanupRef.current = null;
+ };
+
+ const onMove = (ev: PointerEvent) => {
+ const dx = ev.clientX - drag.startX;
+ if (!drag.didDrag) {
+ // Ignore tiny movement so a click still reads as a click (toggle), not a drag.
+ if (Math.abs(dx) < DRAG_CLICK_THRESHOLD) return;
+ drag.didDrag = true;
+ setIsDragging(true);
+ setDragStartedCollapsed(drag.startedCollapsed);
+ document.body.style.userSelect = "none";
+ document.body.style.cursor = "col-resize";
}
- if (pending.sectionId !== undefined && pending.sectionCollapsed !== undefined) {
- formData.append("sectionId", pending.sectionId);
- formData.append("sectionCollapsed", String(pending.sectionCollapsed));
+ const width = clamp(drag.startWidth + dx, COLLAPSED_WIDTH, MAX_WIDTH);
+ writeVisual(width, widthToProgress(width));
+ };
+
+ const onUp = () => {
+ cleanup();
+ setIsDragging(false);
+
+ // A press with no meaningful drag toggles the menu.
+ if (!drag.didDrag) {
+ applyCollapsed(!isCollapsedRef.current);
+ return;
}
- preferencesFetcher.submit(formData, {
- method: "POST",
- action: "/resources/preferences/sidemenu",
- });
- pendingPreferencesRef.current = {};
- }
- };
- }, [preferencesFetcher, user.isImpersonating]);
- const handleToggleCollapsed = () => {
- const newIsCollapsed = !isCollapsed;
- setIsCollapsed(newIsCollapsed);
- persistSideMenuPreferences({ isCollapsed: newIsCollapsed });
- };
+ const width = widthRef.current;
+ // A drag that started collapsed is an opening gesture: flip the snap zone so an early
+ // release keeps opening.
+ const snapThreshold = drag.startedCollapsed
+ ? EXPAND_SNAP_THRESHOLD
+ : COLLAPSE_SNAP_THRESHOLD;
+ if (width >= DEFAULT_WIDTH) {
+ // Rest at the dragged width.
+ const rounded = Math.round(width);
+ expandedWidthRef.current = rounded;
+ isCollapsedRef.current = false;
+ setIsCollapsed(false);
+ persistSideMenuPreferences({ isCollapsed: false, width: rounded });
+ writeVisual(rounded, 0);
+ } else if (widthToProgress(width) <= snapThreshold) {
+ // Released near the default width — spring back open.
+ expandedWidthRef.current = DEFAULT_WIDTH;
+ isCollapsedRef.current = false;
+ setIsCollapsed(false);
+ persistSideMenuPreferences({ isCollapsed: false, width: DEFAULT_WIDTH });
+ animateTo(DEFAULT_WIDTH, 0);
+ } else {
+ // Released deeper in (or over-dragged past min width) — collapse the rest of the way.
+ isCollapsedRef.current = true;
+ setIsCollapsed(true);
+ persistSideMenuPreferences({ isCollapsed: true });
+ animateTo(COLLAPSED_WIDTH, 1);
+ }
+ };
+
+ const onCancel = () => {
+ cleanup();
+ setIsDragging(false);
+ if (!drag.didDrag) return;
+ // Settle back to the current resting state.
+ animateTo(
+ isCollapsedRef.current ? COLLAPSED_WIDTH : expandedWidthRef.current,
+ isCollapsedRef.current ? 1 : 0
+ );
+ };
+
+ window.addEventListener("pointermove", onMove);
+ window.addEventListener("pointerup", onUp);
+ window.addEventListener("pointercancel", onCancel);
+ window.addEventListener("blur", onCancel);
+ dragCleanupRef.current = cleanup;
+ },
+ [animateTo, applyCollapsed, persistSideMenuPreferences, writeVisual]
+ );
+
+ // Keep the drag handlers' collapsed mirror in sync; tear down any in-flight animation/drag on unmount.
+ useEffect(() => {
+ isCollapsedRef.current = isCollapsed;
+ }, [isCollapsed]);
+ useEffect(() => {
+ return () => {
+ if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+ dragCleanupRef.current?.();
+ };
+ }, []);
/** Generic handler for any collapsible section - just pass the section ID */
const handleSectionToggle = useCallback(
@@ -265,95 +645,84 @@ export function SideMenu({
action: handleToggleCollapsed,
});
- useEffect(() => {
- const handleScroll = () => {
- if (borderRef.current) {
- const shouldShowHeaderDivider = borderRef.current.scrollTop > 1;
- if (showHeaderDivider !== shouldShowHeaderDivider) {
- setShowHeaderDivider(shouldShowHeaderDivider);
- }
- }
- };
+ // Reserve the scrollbar gutter only when fully settled open (stops the list shifting as it starts/
+ // stops overflowing). Dropped mid-transition so the right padding can animate instead of a fixed
+ // gutter snapping away (see SIDE_MENU_SCROLL_PAD_RIGHT).
+ const showReservedGutter = !isCollapsed && !isDragging && !isAnimating;
- borderRef.current?.addEventListener("scroll", handleScroll);
- return () => borderRef.current?.removeEventListener("scroll", handleScroll);
- }, [showHeaderDivider]);
+ // Free-plan banner slide (see FreePlanBanner). "tracking" = a close in progress, so the banner
+ // follows --sm-collapse down and is gone by the halfway point; "hidden" = collapsed or an open in
+ // progress (stays off-screen); "shown" = settled open, so it rises back up. Drag and click/⌘B share
+ // this: a click drives --sm-collapse through the same animation, with isAnimating standing in for
+ // isDragging and isCollapsed giving the direction.
+ const bannerPhase: "shown" | "tracking" | "hidden" = isDragging
+ ? dragStartedCollapsed
+ ? "hidden"
+ : "tracking"
+ : isAnimating
+ ? isCollapsed
+ ? "tracking"
+ : "hidden"
+ : isCollapsed
+ ? "hidden"
+ : "shown";
return (
@@ -241,7 +241,6 @@ export function OrganizationSettingsSideMenu({
-
-
-
-
+ so it works everywhere, not just where this menu is.
+ return (
+ setIsOpen(open)} open={isOpen}>
+
+
+
+
+ );
+}
+
+function ProjectSelector({
+ project,
+ organization,
+ environment,
+ isCollapsed = false,
+ isDragging = false,
+ className,
+}: {
+ project: SideMenuProject;
+ organization: MatchedOrganization;
+ environment: SideMenuEnvironment;
+ isCollapsed?: boolean;
+ /** True while the menu is being drag-resized; keeps the row in its expanded arrangement. */
+ isDragging?: boolean;
+ className?: string;
+}) {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const navigation = useNavigation();
+
+ useEffect(() => {
+ setIsMenuOpen(false);
+ }, [navigation.location?.pathname]);
+
+ return (
+ setIsMenuOpen(open)} open={isMenuOpen}>
+
+
+
);
}
-function SwitchOrganizations({
- organizations,
- organization,
+/**
+ * Hover-expandable submenu row for side-menu popovers (Account, Switch organization, Integrations):
+ * a menu item with a trailing chevron that reveals `children` in a popover to the right, with a
+ * short close delay so the pointer can cross the gap.
+ */
+function SideMenuPopoverSubMenu({
+ title,
+ icon,
+ leadingIconClassName,
+ children,
}: {
- organizations: MatchedOrganization[];
- organization: MatchedOrganization;
+ title: string;
+ icon: RenderIcon;
+ leadingIconClassName?: string;
+ children: ReactNode;
}) {
const navigation = useNavigation();
- const [isMenuOpen, setMenuOpen] = useState(false);
+ const [isOpen, setIsOpen] = useState(false);
const timeoutRef = useRef(null);
- // Clear timeout on unmount
useEffect(() => {
return () => {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
};
}, []);
+ // Close the submenu on navigation (the parent popover closes too).
useEffect(() => {
- setMenuOpen(false);
+ setIsOpen(false);
}, [navigation.location?.pathname]);
- const handleMouseEnter = () => {
- if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
- }
- setMenuOpen(true);
+ const openNow = () => {
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ setIsOpen(true);
};
-
- const handleMouseLeave = () => {
- // Small delay before closing to allow moving to the content
- timeoutRef.current = setTimeout(() => {
- setMenuOpen(false);
- }, 150);
+ const closeSoon = () => {
+ // Small delay before closing so the pointer can move onto the content.
+ timeoutRef.current = setTimeout(() => setIsOpen(false), 150);
};
return (
- setMenuOpen(open)} open={isMenuOpen}>
-
- {/* Top segment */}
-
- );
-}
-
-function CollapseToggle({ isCollapsed, onToggle }: { isCollapsed: boolean; onToggle: () => void }) {
const [isHovering, setIsHovering] = useState(false);
return (
-
+>(function SideMenuItemButton({ icon, name, trailing, className, type, ...props }, ref) {
+ return (
+
+ );
+});
diff --git a/apps/webapp/app/components/navigation/SideMenuSection.tsx b/apps/webapp/app/components/navigation/SideMenuSection.tsx
index 70b5e099538..8225d9e701c 100644
--- a/apps/webapp/app/components/navigation/SideMenuSection.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuSection.tsx
@@ -1,5 +1,5 @@
import { AnimatePresence, motion } from "framer-motion";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
import { ToggleArrowIcon } from "~/assets/icons/ToggleArrowIcon";
type Props = {
@@ -14,9 +14,7 @@ type Props = {
headerAction?: React.ReactNode;
};
-/** A collapsible section for the side menu
- * The collapsed state is passed in as a prop, and there's a callback when it's toggled so we can save the state.
- */
+/** A collapsible section for the side menu. Collapsed state is controlled via props + a toggle callback. */
export function SideMenuSection({
title,
initialCollapsed = false,
@@ -27,6 +25,7 @@ export function SideMenuSection({
headerAction,
}: Props) {
const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
+ const contentRef = useRef(null);
const handleToggle = useCallback(() => {
const newIsCollapsed = !isCollapsed;
@@ -34,22 +33,37 @@ export function SideMenuSection({
onCollapseToggle?.(newIsCollapsed);
}, [isCollapsed, onCollapseToggle]);
+ // Collapsed items stay in the DOM (height 0) for the animation, so `inert` removes them from the
+ // tab order and a11y tree (it doesn't affect layout). Set the DOM property directly — React 18's
+ // `inert` prop handling is unreliable.
+ useEffect(() => {
+ if (contentRef.current) {
+ contentRef.current.inert = isCollapsed;
+ }
+ }, [isCollapsed]);
+
return (
+
-
-
-
-
-
- Admin dashboard
-
-
-
-
- ) : isAdmin && user.isImpersonating ? (
-
-
- ) : null}
+
+
+
- {isAdmin && !user.isImpersonating ? (
-
-
}
- content={`${organization.title} / ${project.name ?? "Select a project"}`}
+ content={organization.title}
side="right"
sideOffset={8}
hidden={!isCollapsed}
buttonClassName="h-8!"
asChild
+ tabbable
disableHoverableContent
/>
-
+ )}
+
-
+
-
+
+
+
+
-
+
+
-
+
@@ -809,30 +1195,34 @@ function V3DeprecationContent() {
);
}
-function ProjectSelector({
- project,
+function OrgSelector({
organization,
organizations,
- user,
isCollapsed = false,
+ isDragging = false,
+ isAdmin,
+ isImpersonating,
}: {
- project: SideMenuProject;
organization: MatchedOrganization;
organizations: MatchedOrganization[];
- user: SideMenuUser;
isCollapsed?: boolean;
+ /** True while the menu is being drag-resized; keeps the row in its expanded arrangement. */
+ isDragging?: boolean;
+ /** Account context, only used to render the collapsed-rail "Account" submenu (see below). */
+ isAdmin: boolean;
+ isImpersonating: boolean;
}) {
const currentPlan = useCurrentPlan();
const [isOrgMenuOpen, setOrgMenuOpen] = useState(false);
const navigation = useNavigation();
const { isManagedCloud } = useFeatures();
+ const featureFlags = useFeatureFlags();
+ const showSelfServe = useShowSelfServe();
+ const isUsingRbacPlugin = useIsUsingRbacPlugin();
+ const isUsingSsoPlugin = useIsUsingSsoPlugin();
- let plan: string | undefined = undefined;
- if (currentPlan?.v3Subscription?.isPaying === false) {
- plan = "Free";
- } else if (currentPlan?.v3Subscription?.isPaying === true) {
- plan = currentPlan.v3Subscription.plan?.title;
- }
+ const isPaying = currentPlan?.v3Subscription?.isPaying === true;
+ const planTitle = currentPlan?.v3Subscription?.plan?.title;
useEffect(() => {
setOrgMenuOpen(false);
@@ -844,40 +1234,37 @@ function ProjectSelector({
button={
-
+ Admin dashboard
+
+ }
+ icon={HomeIcon}
+ leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
+ className={SIDE_MENU_POPOVER_ITEM_LABEL}
+ />
+ )}
-
-
-
-
-
-
- {organization.title}
-
-
- {plan && (
-
- {plan} plan
-
- )}
- {simplur`${organization.membersCount} member[|s]`}
-
-
-
-
- {isManagedCloud && (
-
-
- )}
+ {!isCollapsed &&
+
+
+ Billing
+ {isPaying && planTitle ? {planTitle} : null}
+
+ }
+ icon={CreditCardIcon}
+ leadingIconClassName={SIDE_MENU_POPOVER_ITEM_ICON}
+ className={SIDE_MENU_POPOVER_ITEM_LABEL}
+ />
+ )}
+ {isManagedCloud && showSelfServe && (
+
+ {organizations.length > 1 ? (
+
+ {/* Collapsed: the account button is hidden, so surface Account as a submenu here (the only
+ always-reachable menu on the rail). */}
+ {isCollapsed && (
+
+
+ )}
+
+
+ );
+}
+
+/**
+ * Account menu entries, shared by the standalone account popover (expanded rail) and the "Account"
+ * submenu in the org popover (collapsed rail).
+ */
+function AccountMenuItems({
+ isAdmin,
+ isImpersonating,
+}: {
+ isAdmin: boolean;
+ isImpersonating: boolean;
+}) {
+ const submit = useSubmit();
+ const stopImpersonating = () =>
+ submit(null, { action: "/resources/impersonation", method: "delete" });
+
+ return (
+ <>
+ {isAdmin && (
+
+ {isImpersonating ? (
+
+ Stop impersonating
+
+ }
+ icon={UserCrossIcon}
+ onClick={stopImpersonating}
+ leadingIconClassName={cn(SIDE_MENU_POPOVER_ITEM_ICON, IMPERSONATION_ACCENT.text)}
+ className={SIDE_MENU_POPOVER_ITEM_LABEL}
+ />
+ ) : (
+
+
+
+
+
+ );
+}
+
+function AccountMenu({ isAdmin, isImpersonating }: { isAdmin: boolean; isImpersonating: boolean }) {
+ const [isOpen, setIsOpen] = useState(false);
+ const navigation = useNavigation();
+
+ useEffect(() => {
+ setIsOpen(false);
+ }, [navigation.location?.pathname]);
+
+ // The admin shortcut lives in
+
+
{organization.projects.map((p) => {
const isSelected = p.id === project.id;
return (
@@ -957,99 +1609,72 @@ function ProjectSelector({
}
isSelected={isSelected}
icon={isSelected ? FolderOpenIcon : FolderClosedIcon}
- leadingIconClassName="text-indigo-500"
+ leadingIconClassName="h-5 w-5 text-indigo-500"
+ className={SIDE_MENU_POPOVER_ITEM_LABEL}
/>
);
})}
-
-
- {organizations.length > 1 ? (
-
-
-
-
-
+ setIsOpen(open)} open={isOpen}>
+
- Switch organization
+ {title}
-
);
}
-function SelectorDivider() {
+function SwitchOrganizations({
+ organizations,
+ organization,
+}: {
+ organizations: MatchedOrganization[];
+ organization: MatchedOrganization;
+}) {
+ return (
+
+
+ );
+}
+
+function Integrations({ organization }: { organization: MatchedOrganization }) {
return (
-
+
+
);
}
-/** Helper component that fades out but preserves width (collapses to 0 width) */
+/**
+ * Fades out and collapses to 0 width via the menu's `--sm-label-opacity` variable, tracking a drag
+ * in real time (no CSS opacity transition — it would lag the per-frame variable writes).
+ */
function CollapsibleElement({
- isCollapsed,
+ isDragging = false,
children,
className,
}: {
- isCollapsed: boolean;
+ /** Only blocks clicks on the fading button mid-drag; the hiding is width+opacity below. */
+ isDragging?: boolean;
children: ReactNode;
className?: string;
}) {
+ // Width AND opacity follow --sm-label-opacity: opacity alone would leave the invisible button
+ // holding 32px of row width, pushing the primary item's clip edge into its icon ("masked" mid-drag).
+ // Shrinking width on the same curve hands that space back. No CSS transition (it would lag the writes).
return (
(null);
+ const [height, setHeight] = useState(0);
+
+ useEffect(() => {
+ const el = contentRef.current;
+ if (!el) return;
+ const measure = () => setHeight(el.offsetHeight);
+ measure();
+ const ro = new ResizeObserver(measure);
+ ro.observe(el);
+ return () => ro.disconnect();
+ }, []);
+
+ // Close progress, doubled + clamped so the banner is fully gone by the time the menu is halfway shut.
+ const closeProgress = "min(var(--sm-collapse, 0) * 2, 1)";
+ // Slide a little past its own height to clear the section padding + the viewport edge.
+ const offset = height + 24;
+
+ const maxHeight =
+ phase === "shown"
+ ? height
+ ? `${height}px`
+ : "none"
+ : phase === "hidden"
+ ? "0px"
+ : `calc((1 - ${closeProgress}) * ${height}px)`;
+ // On close the banner no longer slides itself: its reserved height collapses (maxHeight) and, because
+ // the bottom section is pinned to the bottom, that drops Help & Feedback down while the full-height
+ // banner overflows off the bottom edge. Only the pop-up-from-hidden rise uses translateY, so "hidden"
+ // parks it below the edge; "shown" and "tracking" both sit at 0.
+ const translateY = phase === "hidden" ? `${offset}px` : "0px";
+ // Fade out as it slides off (tracking --sm-collapse) and fade back in on the settled-open rise.
+ const opacity = phase === "shown" ? 1 : phase === "hidden" ? 0 : `calc(1 - ${closeProgress})`;
+
return (
@@ -1172,126 +1882,77 @@ function HelpAndAI({
organizationId={organizationId}
projectId={projectId}
/>
-
);
}
-function AnimatedChevron({
- isHovering,
+function CollapseMenuButton({
isCollapsed,
+ isDragging = false,
+ onToggle,
}: {
- isHovering: boolean;
isCollapsed: boolean;
+ isDragging?: boolean;
+ onToggle: () => void;
}) {
- // When hovering and expanded: left chevron (pointing left to collapse)
- // When hovering and collapsed: right chevron (pointing right to expand)
- // When not hovering: straight vertical line
-
- const getRotation = () => {
- if (!isHovering) return { top: 0, bottom: 0 };
- if (isCollapsed) {
- // Right chevron
- return { top: -17, bottom: 17 };
- } else {
- // Left chevron
- return { top: 17, bottom: -17 };
- }
- };
-
- const { top, bottom } = getRotation();
-
- // Calculate horizontal offset to keep chevron centered when rotated
- // Left chevron: translate left (-1.5px)
- // Right chevron: translate right (+1.5px)
- const getTranslateX = () => {
- if (!isHovering) return 0;
- return isCollapsed ? 1.5 : -1.5;
- };
-
- return (
-
- {organizations.map((org) => (
-
-
-
+ {children}
+
+
+ {organizations.map((org) => (
+
+
+
+
{children}
);
}
-/** Helper component that fades out and collapses height completely */
-function CollapsibleHeight({
- isCollapsed,
- children,
- className,
+/**
+ * The Free-plan banner at the foot of the menu. On close it doesn't collapse or slide on its own: its
+ * reserved height collapses (tracking --sm-collapse, gone by the halfway point) and, because the bottom
+ * section is pinned to the bottom, that pushes the whole section (Help & Feedback + this banner) down so
+ * the full-height banner slides off the bottom edge. On open it lags, waiting for the settled "shown"
+ * phase, then rises back up via translateY. Height is measured so the reclaimed space matches the banner.
+ */
+function FreePlanBanner({
+ to,
+ percentage,
+ phase,
}: {
- isCollapsed: boolean;
- children: ReactNode;
- className?: string;
+ to: string;
+ percentage: number;
+ phase: "shown" | "tracking" | "hidden";
}) {
+ const contentRef = useRef
-
);
}
function HelpAndAI({
isCollapsed,
+ isDragging,
organizationId,
projectId,
+ onToggleCollapsed,
}: {
isCollapsed: boolean;
+ isDragging: boolean;
organizationId: string;
projectId: string;
+ onToggleCollapsed: () => void;
}) {
return (
{children}
+
+
- {/* Vertical line to mask the side menu border */}
-
+ // Shrink-and-fade only while dragging CLOSED, where this sits beside Help & Feedback and would
+ // overlap it as the row narrows. Dragging OPEN it stays put: collapsed, this IS the expand
+ // affordance, and the 0->1 variable would make the icon grow from nothing. At rest: natural size.
+
-
+
-
+
+
-
+
{isCollapsed ? "Expand" : "Collapse"}
);
}
+
+/**
+ * Resize affordance straddling the menu's right border: hover reveals an indigo line, drag resizes,
+ * click toggles collapsed/expanded, and the tooltip follows the pointer's Y. The strip extends 4px
+ * past the edge, so the menu root deliberately has no overflow-hidden (only its inner grid does).
+ */
+function ResizeHandle({
+ isCollapsed,
+ isDragging,
+ onPointerDown,
+}: {
+ isCollapsed: boolean;
+ isDragging: boolean;
+ onPointerDown: (e: ReactPointerEvent) => void;
+}) {
+ // Fully controlled so open never flips controlled/uncontrolled mid-interaction; open requests
+ // during a drag are dropped.
+ const [isTooltipOpen, setTooltipOpen] = useState(false);
+ // Pointer Y within the strip — anchors the tooltip beside the cursor, not the strip's center.
+ const [anchorY, setAnchorY] = useState(0);
+
+ return (
+
+ setTooltipOpen(open && !isDragging)}
+ >
+
+
+
+ Drag to resize
+
+ {isCollapsed ? "Click to expand" : "Click to collapse"}
+
+
+
+
+ );
+}
diff --git a/apps/webapp/app/components/navigation/SideMenuHeader.tsx b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
index 80143e9e0d9..8ccbfa7de70 100644
--- a/apps/webapp/app/components/navigation/SideMenuHeader.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuHeader.tsx
@@ -40,15 +40,8 @@ export function SideMenuHeader({
{visiblePart}
{fadingPart && (
-
{children !== undefined ? (
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index c47f949ab40..f17051266d4 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -1,4 +1,9 @@
-import { type AnchorHTMLAttributes, type ReactNode } from "react";
+import {
+ type AnchorHTMLAttributes,
+ type ButtonHTMLAttributes,
+ forwardRef,
+ type ReactNode,
+} from "react";
import { Link } from "@remix-run/react";
import { motion } from "framer-motion";
import { usePathName } from "~/hooks/usePathName";
@@ -14,6 +19,7 @@ export function SideMenuItem({
trailingIcon,
trailingIconClassName,
name,
+ nameClassName,
to,
badge,
target,
@@ -30,18 +36,14 @@ export function SideMenuItem({
trailingIcon?: RenderIcon;
trailingIconClassName?: string;
name: string;
+ nameClassName?: string;
to: string;
badge?: ReactNode;
target?: AnchorHTMLAttributes["target"];
isCollapsed?: boolean;
action?: ReactNode;
disableIconHover?: boolean;
- /**
- * Visually indented variant — same item, just pushed further from
- * the left edge so it reads as a child of the row above. Used for
- * grouped sub-items like the Tasks > (Agents / Standard / Scheduled)
- * cluster. The indent is only applied when the side menu is expanded.
- */
+ /** Indented variant for grouped sub-items; only applied when the menu is expanded. */
indented?: boolean;
"data-action"?: string;
}) {
@@ -56,7 +58,7 @@ export function SideMenuItem({
target={target}
data-action={dataAction}
className={cn(
- "group/menulink flex h-8 items-center gap-2 overflow-hidden rounded pl-1.75 pr-2",
+ "group/menulink flex h-8 items-center gap-2 overflow-hidden rounded pl-1.75 pr-2 focus-custom",
isIndented ? "min-w-0 flex-1" : "w-full",
isActive
? "bg-tertiary text-text-bright"
@@ -75,32 +77,39 @@ export function SideMenuItem({
)}
/>
-
- {name}
-
- {badge && !isCollapsed && (
-
+
- {badge}
-
- )}
- {trailingIcon && !isCollapsed && (
-
);
@@ -125,9 +134,11 @@ export function SideMenuItem({
buttonClassName="h-8! block w-full"
hidden={!isCollapsed}
asChild
+ tabbable
disableHoverableContent
/>
{!isCollapsed && (
+ // Fades with the labels via --sm-label-opacity (unset → fully visible).
{
+ if (isDragging) return;
+ setAnchorY(Math.round(e.clientY - e.currentTarget.getBoundingClientRect().top));
+ }}
+ className="group/resize absolute inset-y-0 -right-1 z-30 w-2 cursor-col-resize touch-none"
+ >
+
+
+
{visiblePart}
{fadingPart && (
-
- {fadingPart}
-
+ // --sm-label-opacity morphs "Project" → "Proj" as the menu narrows (unset elsewhere → 1).
+ {fadingPart}
)}
{children !== undefined ? (
diff --git a/apps/webapp/app/components/navigation/SideMenuItem.tsx b/apps/webapp/app/components/navigation/SideMenuItem.tsx
index c47f949ab40..f17051266d4 100644
--- a/apps/webapp/app/components/navigation/SideMenuItem.tsx
+++ b/apps/webapp/app/components/navigation/SideMenuItem.tsx
@@ -1,4 +1,9 @@
-import { type AnchorHTMLAttributes, type ReactNode } from "react";
+import {
+ type AnchorHTMLAttributes,
+ type ButtonHTMLAttributes,
+ forwardRef,
+ type ReactNode,
+} from "react";
import { Link } from "@remix-run/react";
import { motion } from "framer-motion";
import { usePathName } from "~/hooks/usePathName";
@@ -14,6 +19,7 @@ export function SideMenuItem({
trailingIcon,
trailingIconClassName,
name,
+ nameClassName,
to,
badge,
target,
@@ -30,18 +36,14 @@ export function SideMenuItem({
trailingIcon?: RenderIcon;
trailingIconClassName?: string;
name: string;
+ nameClassName?: string;
to: string;
badge?: ReactNode;
target?: AnchorHTMLAttributes{badge}
+ )}
+ {trailingIcon && !isCollapsed && (
+
{action}
@@ -152,7 +164,35 @@ export function SideMenuItem({
buttonClassName="h-8! block w-full"
hidden={!isCollapsed}
asChild
+ tabbable
disableHoverableContent
/>
);
}
+
+/** Button styled to match {@link SideMenuItem}, for entries that open a dialog rather than navigate. */
+export const SideMenuItemButton = forwardRef<
+ HTMLButtonElement,
+ { icon: RenderIcon; name: string; trailing?: ReactNode } & ButtonHTMLAttributes
{/* Header container - stays in DOM to preserve height */}
- {/* Header - fades out when sidebar is collapsed */}
-
-
void;
@@ -88,7 +92,7 @@ function SimpleTooltip({
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
index c7935544082..32920a678ff 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.team/route.tsx
@@ -496,7 +496,8 @@ export default function Page() {
diff --git a/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx b/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
index cfe74e9ccc9..26133675e0d 100644
--- a/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
+++ b/apps/webapp/app/routes/_app.orgs.$organizationSlug/route.tsx
@@ -11,6 +11,7 @@ import { RegionsPresenter, type Region } from "~/presenters/v3/RegionsPresenter.
import { getImpersonationId } from "~/services/impersonation.server";
import { getCachedUsage, getBillingLimit, getCurrentPlan } from "~/services/platform.v3.server";
import { rbac } from "~/services/rbac.server";
+import { ssoController } from "~/services/sso.server";
import { canManageBillingLimits } from "~/services/routeBuilders/permissions.server";
import { requireUser } from "~/services/session.server";
import { telemetry } from "~/services/telemetry.server";
@@ -33,6 +34,26 @@ export function useCurrentPlan(matches?: UIMatch[]) {
return data?.currentPlan;
}
+/** Whether the optional RBAC plugin is installed (gates the Roles UI). */
+export function useIsUsingRbacPlugin(matches?: UIMatch[]) {
+ const data = useTypedMatchesData({
+ id: "routes/_app.orgs.$organizationSlug",
+ matches,
+ });
+
+ return data?.isUsingRbacPlugin ?? false;
+}
+
+/** Whether the optional SSO plugin is installed (gates the SSO UI). */
+export function useIsUsingSsoPlugin(matches?: UIMatch[]) {
+ const data = useTypedMatchesData({
+ id: "routes/_app.orgs.$organizationSlug",
+ matches,
+ });
+
+ return data?.isUsingSsoPlugin ?? false;
+}
+
export const shouldRevalidate: ShouldRevalidateFunction = (params) => {
const { currentParams, nextParams } = params;
@@ -98,7 +119,16 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
const shouldLoadRegions = !!projectParam && !!environment && environment.type !== "DEVELOPMENT";
- const [sessionAuth, plan, usage, billingLimit, customDashboards, regions] = await Promise.all([
+ const [
+ sessionAuth,
+ plan,
+ usage,
+ billingLimit,
+ customDashboards,
+ regions,
+ isUsingRbacPlugin,
+ isUsingSsoPlugin,
+ ] = await Promise.all([
rbac
.authenticateSession(request, {
userId: user.id,
@@ -123,6 +153,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
.then(({ regions }) => regions)
.catch(() => [] as Region[])
: Promise.resolve([] as Region[]),
+ // Resolve which optional plugins (RBAC, SSO) are installed so the side menu can gate their
+ // items. Both calls are cheap and cached.
+ rbac.isUsingPlugin().catch(() => false),
+ ssoController.isUsingPlugin().catch(() => false),
]);
const userCanManageBillingLimits = sessionAuth.ok
? canManageBillingLimits(sessionAuth.ability)
@@ -184,6 +218,8 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
},
widgetLimitPerDashboard,
canManageBillingLimits: userCanManageBillingLimits,
+ isUsingRbacPlugin,
+ isUsingSsoPlugin,
});
};
diff --git a/apps/webapp/app/routes/account._index/route.tsx b/apps/webapp/app/routes/account._index/route.tsx
index b4b92c8a133..99ef9b87bb3 100644
--- a/apps/webapp/app/routes/account._index/route.tsx
+++ b/apps/webapp/app/routes/account._index/route.tsx
@@ -3,8 +3,6 @@ import { conformZodMessage, parseWithZod } from "@conform-to/zod";
import { Form, type MetaFunction, useActionData } from "@remix-run/react";
import { type ActionFunction, json } from "@remix-run/server-runtime";
import { z } from "zod";
-import { AvatarCircleIcon } from "~/assets/icons/AvatarCircleIcon";
-import { EnvelopeIcon } from "~/assets/icons/EnvelopeIcon";
import { UserProfilePhoto } from "~/components/UserProfilePhoto";
import {
MainHorizontallyCenteredContainer,
@@ -12,15 +10,12 @@ import {
PageContainer,
} from "~/components/layout/AppLayout";
import { Button } from "~/components/primitives/Buttons";
-import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
-import { Fieldset } from "~/components/primitives/Fieldset";
-import { FormButtons } from "~/components/primitives/FormButtons";
import { FormError } from "~/components/primitives/FormError";
import { Header2 } from "~/components/primitives/Headers";
-import { Hint } from "~/components/primitives/Hint";
import { Input } from "~/components/primitives/Input";
import { InputGroup } from "~/components/primitives/InputGroup";
import { Label } from "~/components/primitives/Label";
+import { Switch } from "~/components/primitives/Switch";
import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
import { prisma } from "~/db.server";
import { useUser } from "~/hooks/useUser";
@@ -144,56 +139,72 @@ export default function Page() {
-
-
+
{headerAction &&
+ {/*
+ Divider fades in via --sm-collapse (0 → 1) as the header fades out. Only while expanded.
+ */}
+
{title}
{headerAction}
}
-
- {/* Divider - absolutely positioned, visible when sidebar is collapsed but section is expanded */}
-
+
+
Profile
diff --git a/apps/webapp/app/routes/resources.preferences.sidemenu.tsx b/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
index 94db448b581..4e43269d0ea 100644
--- a/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
+++ b/apps/webapp/app/routes/resources.preferences.sidemenu.tsx
@@ -15,6 +15,7 @@ const booleanFromFormData = z
const RequestSchema = z.object({
isCollapsed: booleanFromFormData,
+ width: z.coerce.number().int().positive().optional(),
sectionId: SideMenuSectionIdSchema.optional(),
sectionCollapsed: booleanFromFormData,
// Generic item order fields
@@ -66,6 +67,7 @@ export async function action({ request }: ActionFunctionArgs) {
await updateSideMenuPreferences({
user,
isCollapsed: result.data.isCollapsed,
+ width: result.data.width,
sectionCollapsed,
});
diff --git a/apps/webapp/app/routes/storybook.icons/route.tsx b/apps/webapp/app/routes/storybook.icons/route.tsx
index dee5aa3e25a..a465e05fb5a 100644
--- a/apps/webapp/app/routes/storybook.icons/route.tsx
+++ b/apps/webapp/app/routes/storybook.icons/route.tsx
@@ -81,6 +81,7 @@ import { KeyboardUpIcon } from "~/assets/icons/KeyboardUpIcon";
import { KeyboardWindowsIcon } from "~/assets/icons/KeyboardWindowsIcon";
import { KeyIcon } from "~/assets/icons/KeyIcon";
import { KeyValueIcon } from "~/assets/icons/KeyValueIcon";
+import { LeftSideMenuIcon } from "~/assets/icons/LeftSideMenuIcon";
import { ListBulletIcon } from "~/assets/icons/ListBulletIcon";
import { ListCheckedIcon } from "~/assets/icons/ListCheckedIcon";
import { LogsIcon } from "~/assets/icons/LogsIcon";
@@ -217,6 +218,7 @@ const icons: IconEntry[] = [
{ name: "KeyboardWindowsIcon", render: simple(KeyboardWindowsIcon) },
{ name: "KeyIcon", render: simple(KeyIcon) },
{ name: "KeyValueIcon", render: simple(KeyValueIcon) },
+ { name: "LeftSideMenuIcon", render: simple(LeftSideMenuIcon) },
{ name: "ListBulletIcon", render: simple(ListBulletIcon) },
{ name: "ListCheckedIcon", render: simple(ListCheckedIcon) },
{ name: "LlamaIcon", render: simple(LlamaIcon) },
diff --git a/apps/webapp/app/services/dashboardPreferences.server.ts b/apps/webapp/app/services/dashboardPreferences.server.ts
index 7af007dc381..a8b9149eff5 100644
--- a/apps/webapp/app/services/dashboardPreferences.server.ts
+++ b/apps/webapp/app/services/dashboardPreferences.server.ts
@@ -5,6 +5,8 @@ import { type UserFromSession } from "./session.server";
const SideMenuPreferences = z.object({
isCollapsed: z.boolean().default(false),
+ /** Expanded side menu width in px, set by the resize handle. */
+ width: z.number().optional(),
// Map for section collapsed states - keys are section identifiers
collapsedSections: z.record(z.string(), z.boolean()).optional(),
/** Organization-specific settings */
@@ -124,10 +126,13 @@ export async function clearCurrentProject({ user }: { user: UserFromSession }) {
export async function updateSideMenuPreferences({
user,
isCollapsed,
+ width,
sectionCollapsed,
}: {
user: UserFromSession;
isCollapsed?: boolean;
+ /** Expanded side menu width in px (from the resize handle) */
+ width?: number;
/** Update a specific section's collapsed state */
sectionCollapsed?: { sectionId: SideMenuSectionId; collapsed: boolean };
}) {
@@ -148,6 +153,7 @@ export async function updateSideMenuPreferences({
const updatedSideMenu = SideMenuPreferences.parse({
...currentSideMenu,
...(isCollapsed !== undefined && { isCollapsed }),
+ ...(width !== undefined && { width }),
collapsedSections: updatedCollapsedSections,
});
@@ -156,7 +162,11 @@ export async function updateSideMenuPreferences({
JSON.stringify(updatedSideMenu.collapsedSections) !==
JSON.stringify(currentSideMenu.collapsedSections);
- if (updatedSideMenu.isCollapsed === currentSideMenu.isCollapsed && !hasCollapsedSectionsChanged) {
+ if (
+ updatedSideMenu.isCollapsed === currentSideMenu.isCollapsed &&
+ updatedSideMenu.width === currentSideMenu.width &&
+ !hasCollapsedSectionsChanged
+ ) {
return;
}
diff --git a/apps/webapp/app/tailwind.css b/apps/webapp/app/tailwind.css
index 5a6429fce80..2bc91d77323 100644
--- a/apps/webapp/app/tailwind.css
+++ b/apps/webapp/app/tailwind.css
@@ -339,8 +339,10 @@
@utility focus-custom {
&:focus-visible {
outline: 1px solid var(--color-text-link);
- outline-offset: 0px;
- border-radius: 3px;
+ /* Inset the ring inside the box; at offset 0 the outline sits outside the border edge and gets
+ clipped by ancestors with overflow hidden/auto (scroll areas, the side menu grid). */
+ outline-offset: -1px;
+ border-radius: 5px;
}
}
@@ -348,6 +350,44 @@
scrollbar-gutter: stable;
}
+/* Fade the thumb in only while the pointer is in the scroll area. Uses
+ ::-webkit-scrollbar (no scrollbar-width) so Chrome keeps a classic always-present
+ bar to reveal, not the auto-hiding overlay; Firefox falls back to standard props.
+ Thumb color is a registered @property so it can transition. */
+@property --sm-sb-thumb {
+ syntax: "";
+ initial-value: transparent;
+ inherits: true;
+}
+
+@utility scrollbar-thumb-on-hover {
+ transition: --sm-sb-thumb 200ms ease;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+ &::-webkit-scrollbar-track {
+ background: transparent;
+ }
+ &::-webkit-scrollbar-thumb {
+ background-color: var(--sm-sb-thumb);
+ /* transparent border + padding-box clip = thinner thumb, inset from the channel edges */
+ border: 2px solid transparent;
+ border-radius: 9999px;
+ background-clip: padding-box;
+ }
+
+ @supports (-moz-appearance: none) {
+ scrollbar-width: thin;
+ scrollbar-color: var(--sm-sb-thumb) transparent;
+ }
+
+ &:hover {
+ --sm-sb-thumb: var(--color-surface-control);
+ }
+}
+
/* Shared stop list for the animated glow utilities below. The gradient itself
is assembled per-element so the animated --gradient-angle resolves there. */
:root {