@oxy.so/bloom 3.6.0 → 4.0.0

package/src/settings-modal/SettingsTools.tsx

@@ -350,7 +350,7 @@ function ServerRow({
             {server.tools?.map((tool) => (
               <Chip
                 key={tool}
-                size="small"
+                size="sm"
                 style={{ backgroundColor: palette.secondary }}
                 textStyle={{ color: palette.textSecondary }}
               >
@@ -571,8 +571,8 @@ export function SettingsToolsPage({
             description="Wait indefinitely to authenticate when prompted. When off, skip authentication prompts after 30 seconds."
           >
             <Switch
-              value={waitForAuthentication}
-              onValueChange={onWaitForAuthenticationChange}
+              checked={waitForAuthentication}
+              onCheckedChange={onWaitForAuthenticationChange}
               accessibilityLabel="Wait for MCP authentication"
             />
           </SettingsRow>
@@ -599,7 +599,7 @@ export function SettingsToolsPage({
         description="Configured in the dashboard"
         inset={8}
         action={
-          <Button variant="secondary" size="small" onPress={onManageTeam}>
+          <Button size="sm" onPress={onManageTeam} appearance="subtle" tone="neutral">
             Manage
           </Button>
         }
@@ -617,7 +617,7 @@ export function SettingsToolsPage({
                 cloud.
               </Text>
             </View>
-            <Button variant="secondary" size="small" onPress={onConfigureTeam}>
+            <Button size="sm" onPress={onConfigureTeam} appearance="subtle" tone="neutral">
               Configure Team MCP Servers
             </Button>
           </View>

package/src/settings-modal/palette.ts

@@ -1,33 +1,5 @@
-/**
- * Settings-modal tokens, resolved from Bloom's theme through the
- * shared ramps (`button/shared.ts`) — the same ramps `Button`, the menus and
- * `AgentLimitsCard` paint from.
- *
- *   Token                                light            dark
- *   background/full                      card             neutral-925 (#121212)
- *   background/primary/default           card             neutral-800
- *   background/primary/hover             neutral-100      neutral-700 @60% over 800
- *   background/secondary/default         neutral-100      neutral-900
- *   background/secondary/hover           neutral-200      neutral-800
- *   background/tertiary/default          neutral-200      neutral-800
- *   background/tertiary/hover            neutral-300      neutral-700
- *   separator-border / border-table      neutral-200      neutral-800
- *   border/button/default                neutral-200      neutral-700
- *   border/button/hover                  neutral-300      neutral-500
- *   border/button/active                 neutral-400      neutral-600
- *   background/primary/active            neutral-200      neutral-800
- *   border/checkbox/default              neutral-300      neutral-700
- *   file-upload-icon background          neutral-300      neutral-600
- *   file-upload-icon foreground (hover)  neutral-400 (500) neutral-400 (300)
- *   text/primary                         text             text
- *   text/secondary, icon/secondary       neutral-500      neutral-500
- *   text/tertiary, icon/tertiary         neutral-400      neutral-600
- *   text/error/primary                   red-500          red-400
- *   accent-400 / accent-500              accent ramp      accent ramp
- *   lime-600 (Saved check)               success-600      success-600
- *   shadow-xs / shadow-dropdown          fixed light      fixed dark alphas
- */
-import { ACCENT_TABLE, BUTTON_SHADOW, colorRamp, DANGER_TABLE, mixColor, resolveButtonRamps, type Ramp } from '../button/shared';
+/** Surface and text slots read canonical theme roles; fixed shadow geometry is unchanged. */
+import { ACCENT_TABLE, BUTTON_SHADOW, colorRamp, DANGER_TABLE, resolveButtonRamps, type Ramp } from '../button/shared';
 import { MENU_SHADOW } from '../floating/menu-palette';
 import type { Theme } from '../theme/types';
 
@@ -68,74 +40,24 @@ export interface SettingsPalette {
 }
 
 export function resolveSettingsPalette(theme: Theme): SettingsPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const success = colorRamp(theme.colors.success, ACCENT_TABLE);
-  // `error`, not `negative`: the dark `negative` is M3's pale on-container pink
-  // (rgb 255 180 171 on the blue preset), so its ramp never reaches the
-  // saturated red-600 status dot. `error` stays saturated in both modes.
-  const danger = colorRamp(theme.colors.error, DANGER_TABLE);
-  const shared = {
-    text: theme.colors.text,
-    iconPrimary: theme.colors.text,
-    textSecondary: n[500],
-    iconSecondary: n[500],
-    accent,
-    neutral: n,
-    success,
-    danger,
-    ring: accent[500],
-    backdrop: 'rgba(0, 0, 0, 0.7)',
-  };
-  if (theme.isDark) {
-    return {
-      ...shared,
-      full: mixColor(n[900], n[950], 0.4),
-      primary: n[800],
-      primaryHover: mixColor(n[800], n[700], 0.6),
-      secondary: n[900],
-      secondaryHover: n[800],
-      secondaryHoverSoft: mixColor(n[900], n[800], 0.6),
-      tertiary: n[800],
-      tertiaryHover: n[700],
-      separator: n[800],
-      borderButton: n[700],
-      borderButtonHover: n[500],
-      borderButtonActive: n[600],
-      primaryActive: n[800],
-      borderCheckbox: n[700],
-      uploadIconBackground: n[600],
-      uploadIconForeground: n[400],
-      uploadIconForegroundHover: n[300],
-      textTertiary: n[600],
-      iconTertiary: n[600],
-      error: danger[400],
-      shadowXs: BUTTON_SHADOW.dark,
-      shadowDropdown: MENU_SHADOW.dark,
-    };
-  }
+  const c = theme.colors;
+  // Retained only for decorative artwork, categorical server tiles and status dots.
+  const { accent, neutral } = resolveButtonRamps(theme);
+  const success = colorRamp(c.success, ACCENT_TABLE);
+  const danger = colorRamp(c.error, DANGER_TABLE);
   return {
-    ...shared,
-    full: theme.colors.card,
-    primary: theme.colors.card,
-    primaryHover: n[100],
-    secondary: n[100],
-    secondaryHover: n[200],
-    secondaryHoverSoft: mixColor(n[100], n[200], 0.6),
-    tertiary: n[200],
-    tertiaryHover: n[300],
-    separator: n[200],
-    borderButton: n[200],
-    borderButtonHover: n[300],
-    borderButtonActive: n[400],
-    primaryActive: n[200],
-    borderCheckbox: n[300],
-    uploadIconBackground: n[300],
-    uploadIconForeground: n[400],
-    uploadIconForegroundHover: n[500],
-    textTertiary: n[400],
-    iconTertiary: n[400],
-    error: danger[500],
-    shadowXs: BUTTON_SHADOW.light,
-    shadowDropdown: MENU_SHADOW.light,
+    full: c.background, primary: c.card, primaryHover: c.backgroundSecondary,
+    secondary: c.backgroundSecondary, secondaryHover: c.backgroundTertiary,
+    secondaryHoverSoft: c.backgroundTertiary, tertiary: c.backgroundTertiary,
+    tertiaryHover: c.card, separator: c.borderLight, borderButton: c.border,
+    borderButtonHover: c.border, borderButtonActive: c.primary,
+    primaryActive: c.backgroundTertiary, borderCheckbox: c.border,
+    uploadIconBackground: c.backgroundTertiary, uploadIconForeground: c.textSecondary,
+    uploadIconForegroundHover: c.text, text: c.text, textSecondary: c.textSecondary,
+    textTertiary: c.textTertiary, iconPrimary: c.text, iconSecondary: c.textSecondary,
+    iconTertiary: c.textTertiary, error: c.errorSubtleForeground,
+    accent, neutral, success, danger, ring: c.primary, backdrop: 'rgba(0, 0, 0, 0.7)',
+    shadowXs: theme.isDark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
+    shadowDropdown: theme.isDark ? MENU_SHADOW.dark : MENU_SHADOW.light,
   };
 }

package/src/sidebar/Sidebar.tsx

@@ -1,7 +1,7 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Pressable,
-  ScrollView,
   TextInput,
   View,
   type LayoutChangeEvent,
@@ -24,6 +24,7 @@ import { RiSearchLine } from '../icons/remix/RiSearchLine';
 import { RiSideBarFill } from '../icons/remix/RiSideBarFill';
 import { Kbd } from '../kbd';
 import { borderRadius } from '../styles/tokens';
+import { Z_INDEX } from '../styles/z-index';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { ThemeToggle } from '../theme-toggle';
 import { Text, TYPE_SCALE } from '../typography';
@@ -35,6 +36,7 @@ import { SidebarItem } from './SidebarItem';
 import { SidebarModeSwitcher } from './SidebarModeSwitcher';
 import { SidebarPlanCard } from './SidebarPlanCard';
 import { SidebarRail } from './SidebarRail';
+import { SidebarScrollArea } from './SidebarScrollArea';
 import { SidebarTeamMenu } from './SidebarTeamMenu';
 import { SidebarLogoView } from './SidebarLogoView';
 import { SidebarUserMenu } from './SidebarUserMenu';
@@ -45,15 +47,15 @@ import type { SidebarNavItem, SidebarProps } from './types';
  *
  *   panel      `size` wide expanded (p12), its collapsed width at px7 py12 —
  *              with the 1px border that leaves exactly the size's item column
- *              (`metrics.ts`; `medium` is the historical 260 / 52 / 36)
+ *              (`metrics.ts`; `md` is the historical 260 / 52 / 36)
  *   surface    `card` radius 24, 1px border-button-white, shadow-sidebar,
  *              background-secondary; `plain` drops the chrome onto
  *              background-full; `docked` keeps the fill, squares the corners
  *              and leaves one hairline on the inner edge, full height
- *   top        scroller (−8 margin / 8 padding, so rings and the profile pill
- *              are not clipped), gap 12: account switcher + collapse control
- *              (a column, avatar last, when collapsed), quick search, nav
- *              (px2 expanded, gap 4)
+ *   top        fixed account/logo + collapse control, modes and quick search,
+ *              gap 12; destinations alone scroll below (px2 expanded, gap 4).
+ *              The viewport overlaps half the last control, at most 20px,
+ *              with matching content padding and 8px side room for rings.
  *   bottom     gap 12: theme toggle (segmented expanded, icon collapsed),
  *              secondary rows, team card
  *   search     pill button p8 gap8 on background-tertiary (hover tertiary-hover
@@ -67,6 +69,8 @@ import type { SidebarNavItem, SidebarProps } from './types';
  * collapse through `Collapsible` — the icons never move. Reduced motion snaps.
  */
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 const EASE_IN_OUT = Easing.bezier(0.4, 0, 0.2, 1);
 
 function matchesQuery(label: string, query: string): boolean {
@@ -123,7 +127,7 @@ function SearchField({
         testID="sidebar-search-input"
       />
       <CloseButton
-        size="2xs"
+        size="xs"
         accessibilityLabel="Clear navigation search"
         onPress={() => onDismiss(true)}
         style={{ backgroundColor: palette.tertiaryHover }}
@@ -148,7 +152,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   onClose,
   fluid = false,
   surface = 'card',
-  size = 'medium',
+  size: sizeProp,
   showThemeToggle = true,
   showSearch = true,
   searchShortcutLabel = '⌘L',
@@ -167,6 +171,9 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   testID,
 }) => {
   const palette = useSidebarPalette();
+  const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp === 'large' ? 'lg' : sizeProp;
+  const {size: scopedSize} = useBloomAppearance({size: canonicalSize}, {size: 'md', tone: 'neutral'});
+  const size = scopedSize === 'xs' ? 'sm' : scopedSize;
   const metrics = SIDEBAR_METRICS[size];
   useSidebarWebCss();
   const reducedMotion = useReducedMotion();
@@ -179,6 +186,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   const collapsed = mobile ? false : collapsedState;
 
   const [searchActive, setSearchActive] = useState(false);
+  const [headerOverlap, setHeaderOverlap] = useState(10);
   const [query, setQuery] = useState('');
   const [suppressUserHover, setSuppressUserHover] = useState(false);
   const searchFieldRef = useRef<View>(null);
@@ -194,30 +202,62 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     progress.value = reducedMotion ? target : withTiming(target, { duration: MORPH_MS, easing: EASE_IN_OUT });
   }, [collapsed, reducedMotion, progress]);
 
+  const searchGapStyle = useAnimatedStyle(() => ({ gap: 8 * (1 - progress.value) }), [progress]);
+
   // `fluid` fills its container while expanded; the morph needs a number, so
   // the last expanded width is measured. The collapsed end is the size's own.
   const collapsedWidth = metrics.collapsed;
   const expandedWidth = useSharedValue(metrics.expanded);
+  useEffect(() => {
+    if (!fluid) expandedWidth.value = metrics.expanded;
+  }, [fluid, metrics.expanded, expandedWidth]);
   const onPanelLayout = useCallback(
     (event: LayoutChangeEvent) => {
-      if (fluid && !collapsed) expandedWidth.value = event.nativeEvent.layout.width;
+      if (fluid && !collapsed && progress.value === 0) expandedWidth.value = event.nativeEvent.layout.width;
     },
-    [fluid, collapsed, expandedWidth],
+    [fluid, collapsed, expandedWidth, progress],
   );
+  const expandedPadding = metrics.padding;
+  const collapsedPadding = metrics.collapsedPaddingX;
   const panelStyle = useAnimatedStyle(() => {
     const p = progress.value;
-    if (fluid && p === 0) return { width: '100%' };
-    return { width: expandedWidth.value + (collapsedWidth - expandedWidth.value) * p };
-  }, [progress, expandedWidth, fluid, collapsedWidth]);
+    const padding = expandedPadding + (collapsedPadding - expandedPadding) * p;
+    return {
+      width: fluid && p === 0 ? '100%' : expandedWidth.value + (collapsedWidth - expandedWidth.value) * p,
+      paddingLeft: padding, paddingRight: padding,
+    };
+  }, [progress, expandedWidth, fluid, collapsedWidth, expandedPadding, collapsedPadding]);
   const navInset = useAnimatedStyle(() => {
     const inset = 2 * (1 - progress.value);
     return { paddingLeft: inset, paddingRight: inset };
   }, [progress]);
   const sideBarIconStyle = useAnimatedStyle(
-    () => ({ transform: [{ scaleX: progress.value >= 0.5 ? 1 : -1 }] }),
+    () => ({ transform: [{ scaleX: 2 * progress.value - 1 }] }),
     [progress],
   );
 
+  const hasLogo = !!logo;
+  const hasAccount = !!account;
+  const headerGeometry = useAnimatedStyle(() => ({
+    height: hasLogo ? 36 + 30 * progress.value : hasAccount ? 32 + 30 * progress.value : 20,
+  }), [progress, hasLogo, hasAccount]);
+  const headerIdentityGeometry = useAnimatedStyle(() => ({
+    top: hasLogo ? 0 : 30 * progress.value,
+    right: (hasLogo ? 28 : 20) * (1 - progress.value),
+  }), [progress, hasLogo]);
+  const headerControlGeometry = useAnimatedStyle(() => {
+    const p = progress.value;
+    return {
+      left: `${100 * (1 - p)}%` as `${number}%`,
+      width: 20 + 16 * p,
+      top: hasLogo ? 8 + 38 * p : hasAccount ? 6 * (1 - p) : 0,
+      transform: [{ translateX: -20 * (1 - p) }],
+    };
+  }, [progress, hasLogo, hasAccount]);
+  const themeGeometry = useAnimatedStyle(() => ({ height: 40 - 4 * progress.value }), [progress]);
+  const themeExpandedStyle = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
+  const themeCollapsedStyle = useAnimatedStyle(() => ({ opacity: progress.value }), [progress]);
+
   // ---- search ------------------------------------------------------------
   const activateSearch = useCallback(() => {
     if (!mobile) setCollapsed(false);
@@ -294,7 +334,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             <Badge
               content={item.badge}
               style={{ backgroundColor: isSelected ? palette.badgePrimary : palette.badgeNeutral }}
-              textStyle={{ color: isSelected ? '#ffffff' : palette.textSecondary }}
+              textStyle={{ color: isSelected ? palette.badgePrimaryForeground : palette.textSecondary }}
             />
           ) : undefined
         }
@@ -391,7 +431,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
       accessibilityLabel={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
       aria-expanded={!collapsed}
       onPress={toggleCollapse}
-      style={collapsed ? { width: 36, alignItems: 'center', justifyContent: 'center' } : undefined}
+      style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }}
       testID="sidebar-collapse"
     >
       <Animated.View style={sideBarIconStyle}>
@@ -430,7 +470,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
       />
     </View>
   ) : (
-    <Pressable
+    <AnimatedPressable
       ref={searchTriggerRef}
       {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' }, ...(collapsed ? { title: searchLabel } : null) } : {})}
       role="button"
@@ -438,34 +478,35 @@ const SidebarPanel: React.FC<SidebarProps> = ({
       onPress={activateSearch}
       onHoverIn={searchHover.onIn}
       onHoverOut={searchHover.onOut}
-      style={
+      style={[
         {
           flexDirection: 'row',
           alignItems: 'center',
-          gap: 8,
-          padding: 8,
+          padding: metrics.row.padding,
           overflow: 'hidden',
           borderRadius: borderRadius.full,
           backgroundColor: searchHover.state ? palette.searchHover : palette.tertiary,
           '--bloom-sidebar-ring': palette.ring,
-        } as WebCssStyle
-      }
+        } as WebCssStyle, searchGapStyle,
+      ]}
       testID="sidebar-search"
     >
-      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, minWidth: 0, flex: collapsed ? undefined : 1 }}>
-        <RiSearchLine width={20} height={20} fill={palette.textSecondary} />
+      <Animated.View style={[{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flex: 1 }, searchGapStyle]}>
+        <View style={{ flexShrink: 0 }}>
+          <RiSearchLine width={metrics.row.icon} height={metrics.row.icon} fill={palette.textSecondary} />
+        </View>
         <Collapsible collapsed={collapsed}>
           <Text variant="body-medium" numberOfLines={1} style={{ color: palette.textSecondary }}>
             {searchLabel}
           </Text>
         </Collapsible>
-      </View>
+      </Animated.View>
       {searchShortcutLabel ? (
         <Collapsible collapsed={collapsed}>
           <Kbd>{searchShortcutLabel}</Kbd>
         </Collapsible>
       ) : null}
-    </Pressable>
+    </AnimatedPressable>
   );
 
   // A folder matching the query keeps every row; otherwise only its matching rows.
@@ -518,35 +559,30 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     </View>
   ) : null;
 
-  // With a logo the brand leads the header and the account switcher gets its
-  // own row under it; collapsed, the mark sits on top of the expand control.
-  const headerRow = logo ? (
+  // Keep the same children mounted while the header changes from a row to a
+  // column. Numeric positions share the panel clock, including reversals.
+  const headerRow = mobile ? (
     <>
-      <View
-        style={
-          collapsed
-            ? { width: '100%', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center', gap: 10 }
-            : { width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }
-        }
-      >
-        <View style={{ minWidth: 0, flexShrink: 1, display: flatMobile && searchActive ? 'none' : 'flex' }}>
-          <SidebarLogoView logo={logo} collapsed={collapsed} testID="sidebar-logo" />
-        </View>
+      <View style={{ width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+        {logo ? <View style={{ minWidth: 0, flexShrink: 1, display: flatMobile && searchActive ? 'none' : 'flex' }}>
+          <SidebarLogoView logo={logo} collapsed={false} testID="sidebar-logo" />
+        </View> : accountMenu ?? <View />}
         {headerControl}
       </View>
-      {accountMenu}
+      {logo ? accountMenu : null}
     </>
   ) : (
-    <View
-      style={
-        collapsed
-          ? { width: '100%', flexDirection: 'column-reverse', alignItems: 'flex-start', justifyContent: 'center', gap: 10 }
-          : { width: '100%', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }
-      }
-    >
-      {accountMenu ?? <View />}
-      {headerControl}
-    </View>
+    <>
+      <Animated.View testID="sidebar-header" style={[{ width: '100%', position: 'relative' }, headerGeometry]}>
+        {logo || account ? <Animated.View style={[{ position: 'absolute', left: 0, minWidth: 0 }, headerIdentityGeometry]}>
+          {logo ? <SidebarLogoView logo={logo} collapsed={collapsed} testID="sidebar-logo" /> : accountMenu}
+        </Animated.View> : null}
+        <Animated.View testID="sidebar-header-control" style={[{ position: 'absolute', height: 20 }, headerControlGeometry]}>
+          {headerControl}
+        </Animated.View>
+      </Animated.View>
+      {logo ? accountMenu : null}
+    </>
   );
 
   return (
@@ -566,98 +602,74 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             overflow: 'hidden',
             paddingTop: metrics.padding,
             paddingBottom: metrics.padding,
-            paddingLeft: collapsed ? metrics.collapsedPaddingX : metrics.padding,
-            paddingRight: collapsed ? metrics.collapsedPaddingX : metrics.padding,
           },
           chrome,
           panelStyle,
           style,
         ]}
       >
-        {hasTree ? (
-          // With a tree the header and search stay put; only the rows scroll,
-          // 24 between the primary rows and the tree section.
-          <View style={{ width: '100%', minHeight: 0, flexShrink: 1, gap: 12 }}>
+        <View style={{ width: '100%', minHeight: 0, flexShrink: 1 }}>
+          {/* Fixed chrome shares the panel's morph, never the destination scroll.
+              The viewport reaches half a control behind it, so rows dissolve
+              before reaching the controls while the first row retains its gap. */}
+          <View
+            testID={`${testID ?? 'sidebar'}-fixed-header`}
+            pointerEvents="box-none"
+            onLayout={(event) => setHeaderOverlap(Math.min(20, event.nativeEvent.layout.height / 2))}
+            style={{ width: '100%', flexShrink: 0, gap: 12, zIndex: Z_INDEX.floating }}
+          >
             {headerRow}
             {modeSwitcher}
             {showSearch && !flatMobile ? searchButton : null}
-            <ScrollView
-              {...(IS_WEB ? { dataSet: { bloomSidebarScroll: 'none' } } : {})}
-              style={{ flexGrow: 0, flexShrink: 1, minHeight: 0 }}
-              contentContainerStyle={{ gap: 24 }}
-              showsVerticalScrollIndicator={false}
-            >
-              {shownItems.length > 0 ? (
-                <View role="navigation" style={{ width: '100%', gap: 4 }}>
-                  {shownItems.map(renderRow)}
-                </View>
-              ) : null}
-              {tree && !collapsed && shownFolders.length > 0 ? (
-                <View style={{ width: '100%', gap: 10 }}>
-                  <Text variant="body-medium" style={{ color: palette.textSecondary }}>
-                    {tree.label}
+          </View>
+          <SidebarScrollArea
+            fadeColor={plain ? palette.flat : palette.panel}
+            testID={`${testID ?? 'sidebar'}-scroll`}
+            {...(IS_WEB ? { dataSet: { bloomSidebarScroll: 'none' } } : {})}
+            style={{ marginTop: -headerOverlap, marginBottom: -8, marginLeft: -8, marginRight: -8, flexGrow: 0, flexShrink: 1, minHeight: 0 }}
+            contentContainerStyle={{ paddingTop: headerOverlap + 12, paddingBottom: 8, paddingLeft: 8, paddingRight: 8, gap: hasTree ? 24 : 0 }}
+            showsVerticalScrollIndicator={false}
+          >
+            {shownItems.length > 0 || !hasTree ? (
+              <Animated.View role="navigation" style={[{ width: '100%', gap: 4 }, !hasTree && navInset]}>
+                {nothingMatches && !hasTree ? (
+                  <Text variant="body-regular" style={{ paddingLeft: 8, paddingRight: 8, paddingTop: 12, paddingBottom: 12, color: palette.textTertiary }}>
+                    {noResultsLabel}
                   </Text>
-                  <View role="navigation" accessibilityLabel={tree.label} style={{ width: '100%', gap: 4 }}>
-                    {shownFolders.map((folder) => (
-                      <SidebarFolder
-                        key={folder.key}
-                        folder={folder}
-                        forceOpen={normalized.length > 0}
-                        selectedItem={selectedTreeItem}
-                        onItemPress={onTreeItemPress}
-                        testID={`sidebar-folder-${folder.key}`}
-                      />
-                    ))}
-                  </View>
+                ) : shownItems.map(renderRow)}
+              </Animated.View>
+            ) : null}
+            {tree && !collapsed && shownFolders.length > 0 ? (
+              <View style={{ width: '100%', gap: 10 }}>
+                <Text variant="body-medium" style={{ color: palette.textSecondary }}>{tree.label}</Text>
+                <View role="navigation" accessibilityLabel={tree.label} style={{ width: '100%', gap: 4 }}>
+                  {shownFolders.map((folder) => (
+                    <SidebarFolder key={folder.key} folder={folder} forceOpen={normalized.length > 0}
+                      selectedItem={selectedTreeItem} onItemPress={onTreeItemPress} testID={`sidebar-folder-${folder.key}`} />
+                  ))}
                 </View>
-              ) : null}
-              {nothingMatches ? (
-                <Text variant="body-regular" style={{ paddingLeft: 8, paddingRight: 8, color: palette.textTertiary }}>
-                  {noResultsLabel}
-                </Text>
-              ) : null}
-            </ScrollView>
-          </View>
-        ) : (
-        /* The scroller clips on every side, so it is padded out by 8 and pulled
-            back with a matching negative margin: the selected row's ring, the
-            profile's hover pill and focus rings all land inside the clip. */
-        <ScrollView
-          style={{ marginTop: -8, marginBottom: -8, marginLeft: -8, marginRight: -8, flexGrow: 0, flexShrink: 1, minHeight: 0 }}
-          contentContainerStyle={{ padding: 8, gap: 12 }}
-          showsVerticalScrollIndicator={false}
-        >
-          {headerRow}
-          {modeSwitcher}
-
-          <View style={{ width: '100%', gap: 12 }}>
-            {showSearch && !flatMobile ? searchButton : null}
-            <Animated.View role="navigation" style={[{ width: '100%', gap: 4 }, navInset]}>
-              {nothingMatches ? (
-                <Text
-                  variant="body-regular"
-                  style={{ paddingLeft: 8, paddingRight: 8, paddingTop: 12, paddingBottom: 12, color: palette.textTertiary }}
-                >
-                  {noResultsLabel}
-                </Text>
-              ) : (
-                shownItems.map(renderRow)
-              )}
-            </Animated.View>
-          </View>
-        </ScrollView>
-        )}
+              </View>
+            ) : null}
+            {nothingMatches && hasTree ? (
+              <Text variant="body-regular" style={{ paddingLeft: 8, paddingRight: 8, color: palette.textTertiary }}>{noResultsLabel}</Text>
+            ) : null}
+          </SidebarScrollArea>
+        </View>
 
         <View style={{ width: '100%', flexShrink: 0, gap: 12, paddingTop: hasTree ? 12 : 0 }}>
           {showThemeToggle ? (
-            collapsed ? (
-              <ThemeToggle collapsed />
-            ) : (
-              <ThemeToggle
-                appearance="sidebar-segmented"
-                style={plain ? { backgroundColor: palette.panel } : undefined}
-              />
-            )
+            <Animated.View testID="sidebar-theme-morph" style={[{ position: 'relative', overflow: 'hidden' }, themeGeometry]}>
+              <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} aria-hidden={collapsed} accessibilityElementsHidden={collapsed} importantForAccessibility={collapsed ? 'no-hide-descendants' : 'auto'}
+                {...(IS_WEB && collapsed ? { inert: true } : {})}
+                style={[{ position: 'absolute', left: 0, top: 0 }, themeExpandedStyle]}>
+                <ThemeToggle variant="sidebar-segmented" style={plain ? { backgroundColor: palette.panel } : undefined} />
+              </Animated.View>
+              <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} aria-hidden={!collapsed} accessibilityElementsHidden={!collapsed} importantForAccessibility={collapsed ? 'auto' : 'no-hide-descendants'}
+                {...(IS_WEB && !collapsed ? { inert: true } : {})}
+                style={[{ position: 'absolute', left: 0, top: 0 }, themeCollapsedStyle]}>
+                <ThemeToggle collapsed />
+              </Animated.View>
+            </Animated.View>
           ) : null}
           {shownSecondary.length > 0 ? (
             <View role="navigation" style={{ width: '100%', gap: 4 }}>
@@ -668,14 +680,14 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             <SidebarPlanCard
               plan={plan}
               collapsed={collapsed}
-              style={plain && !collapsed ? { backgroundColor: palette.panel } : undefined}
+              style={plain ? { backgroundColor: palette.panel } : undefined}
               testID="sidebar-plan"
             />
           ) : team ? (
             <SidebarTeamMenu
               team={team}
               collapsed={collapsed}
-              style={plain && !collapsed ? { backgroundColor: palette.panel } : undefined}
+              style={plain ? { backgroundColor: palette.panel } : undefined}
               testID="sidebar-team"
             />
           ) : null}