@oxy.so/bloom 3.5.0 → 4.0.0

package/lib/module/sidebar/Sidebar.js

@@ -1,7 +1,8 @@
 "use strict";
 
+import { useBloomAppearance } from "../appearance/index.js";
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Pressable, ScrollView, TextInput, View } from 'react-native';
+import { Pressable, TextInput, View } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
 import { Badge } from "../badge/index.js";
 import { CloseButton } from '../button';
@@ -12,6 +13,7 @@ import { RiSearchLine } from "../icons/remix/RiSearchLine.js";
 import { RiSideBarFill } from "../icons/remix/RiSideBarFill.js";
 import { Kbd } from "../kbd/index.js";
 import { borderRadius } from "../styles/tokens.js";
+import { Z_INDEX } from "../styles/z-index.js";
 import { ThemeToggle } from "../theme-toggle/index.js";
 import { Text, TYPE_SCALE } from "../typography/index.js";
 import { SidebarSizeProvider, SIDEBAR_METRICS } from "./metrics.js";
@@ -22,6 +24,7 @@ import { SidebarItem } from "./SidebarItem.js";
 import { SidebarModeSwitcher } from "./SidebarModeSwitcher.js";
 import { SidebarPlanCard } from "./SidebarPlanCard.js";
 import { SidebarRail } from "./SidebarRail.js";
+import { SidebarScrollArea } from "./SidebarScrollArea.js";
 import { SidebarTeamMenu } from "./SidebarTeamMenu.js";
 import { SidebarLogoView } from "./SidebarLogoView.js";
 import { SidebarUserMenu } from "./SidebarUserMenu.js";
@@ -31,15 +34,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  *   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
@@ -53,6 +56,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * 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, query) {
   return label.toLocaleLowerCase().includes(query);
@@ -98,7 +102,7 @@ function SearchField({
       style: inputStyle,
       testID: "sidebar-search-input"
     }), /*#__PURE__*/_jsx(CloseButton, {
-      size: "2xs",
+      size: "xs",
       accessibilityLabel: "Clear navigation search",
       onPress: () => onDismiss(true),
       style: {
@@ -123,7 +127,7 @@ const SidebarPanel = ({
   onClose,
   fluid = false,
   surface = 'card',
-  size = 'medium',
+  size: sizeProp,
   showThemeToggle = true,
   showSearch = true,
   searchShortcutLabel = '⌘L',
@@ -142,6 +146,16 @@ const SidebarPanel = ({
   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();
@@ -152,6 +166,7 @@ const SidebarPanel = ({
   });
   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(null);
@@ -169,23 +184,31 @@ const SidebarPanel = ({
       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 => {
-    if (fluid && !collapsed) expandedWidth.value = event.nativeEvent.layout.width;
-  }, [fluid, collapsed, expandedWidth]);
+    if (fluid && !collapsed && progress.value === 0) expandedWidth.value = event.nativeEvent.layout.width;
+  }, [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%'
-    };
+    const padding = expandedPadding + (collapsedPadding - expandedPadding) * p;
     return {
-      width: expandedWidth.value + (collapsedWidth - expandedWidth.value) * p
+      width: fluid && p === 0 ? '100%' : expandedWidth.value + (collapsedWidth - expandedWidth.value) * p,
+      paddingLeft: padding,
+      paddingRight: padding
     };
-  }, [progress, expandedWidth, fluid, collapsedWidth]);
+  }, [progress, expandedWidth, fluid, collapsedWidth, expandedPadding, collapsedPadding]);
   const navInset = useAnimatedStyle(() => {
     const inset = 2 * (1 - progress.value);
     return {
@@ -195,9 +218,38 @@ const SidebarPanel = ({
   }, [progress]);
   const sideBarIconStyle = useAnimatedStyle(() => ({
     transform: [{
-      scaleX: progress.value >= 0.5 ? 1 : -1
+      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)}%`,
+      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(() => {
@@ -265,7 +317,7 @@ const SidebarPanel = ({
           backgroundColor: isSelected ? palette.badgePrimary : palette.badgeNeutral
         },
         textStyle: {
-          color: isSelected ? '#ffffff' : palette.textSecondary
+          color: isSelected ? palette.badgePrimaryForeground : palette.textSecondary
         }
       }) : undefined
     }, item.key);
@@ -378,11 +430,11 @@ const SidebarPanel = ({
     accessibilityLabel: collapsed ? 'Expand sidebar' : 'Collapse sidebar',
     "aria-expanded": !collapsed,
     onPress: toggleCollapse,
-    style: collapsed ? {
-      width: 36,
+    style: {
+      width: '100%',
       alignItems: 'center',
       justifyContent: 'center'
-    } : undefined,
+    },
     testID: "sidebar-collapse",
     children: /*#__PURE__*/_jsx(Animated.View, {
       style: sideBarIconStyle,
@@ -422,7 +474,7 @@ const SidebarPanel = ({
       placeholder: placeholder,
       label: "Filter navigation"
     })]
-  }) : /*#__PURE__*/_jsxs(Pressable, {
+  }) : /*#__PURE__*/_jsxs(AnimatedPressable, {
     ref: searchTriggerRef,
     ...(IS_WEB ? {
       dataSet: {
@@ -437,29 +489,32 @@ const SidebarPanel = ({
     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
-    },
+    }, searchGapStyle],
     testID: "sidebar-search",
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: {
+    children: [/*#__PURE__*/_jsxs(Animated.View, {
+      style: [{
         flexDirection: 'row',
         alignItems: 'center',
-        gap: 8,
         minWidth: 0,
-        flex: collapsed ? undefined : 1
-      },
-      children: [/*#__PURE__*/_jsx(RiSearchLine, {
-        width: 20,
-        height: 20,
-        fill: palette.textSecondary
+        flex: 1
+      }, searchGapStyle],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flexShrink: 0
+        },
+        children: /*#__PURE__*/_jsx(RiSearchLine, {
+          width: metrics.row.icon,
+          height: metrics.row.icon,
+          fill: palette.textSecondary
+        })
       }), /*#__PURE__*/_jsx(Collapsible, {
         collapsed: collapsed,
         children: /*#__PURE__*/_jsx(Text, {
@@ -519,24 +574,18 @@ const SidebarPanel = ({
     })
   }) : 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 ? /*#__PURE__*/_jsxs(_Fragment, {
+  // 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 ? /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(View, {
-      style: collapsed ? {
-        width: '100%',
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-        justifyContent: 'center',
-        gap: 10
-      } : {
+      style: {
         width: '100%',
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
         gap: 8
       },
-      children: [/*#__PURE__*/_jsx(View, {
+      children: [logo ? /*#__PURE__*/_jsx(View, {
         style: {
           minWidth: 0,
           flexShrink: 1,
@@ -544,25 +593,38 @@ const SidebarPanel = ({
         },
         children: /*#__PURE__*/_jsx(SidebarLogoView, {
           logo: logo,
-          collapsed: collapsed,
+          collapsed: false,
           testID: "sidebar-logo"
         })
-      }), headerControl]
-    }), accountMenu]
-  }) : /*#__PURE__*/_jsxs(View, {
-    style: collapsed ? {
-      width: '100%',
-      flexDirection: 'column-reverse',
-      alignItems: 'flex-start',
-      justifyContent: 'center',
-      gap: 10
-    } : {
-      width: '100%',
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    },
-    children: [accountMenu ?? /*#__PURE__*/_jsx(View, {}), headerControl]
+      }) : accountMenu ?? /*#__PURE__*/_jsx(View, {}), headerControl]
+    }), logo ? accountMenu : null]
+  }) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Animated.View, {
+      testID: "sidebar-header",
+      style: [{
+        width: '100%',
+        position: 'relative'
+      }, headerGeometry],
+      children: [logo || account ? /*#__PURE__*/_jsx(Animated.View, {
+        style: [{
+          position: 'absolute',
+          left: 0,
+          minWidth: 0
+        }, headerIdentityGeometry],
+        children: logo ? /*#__PURE__*/_jsx(SidebarLogoView, {
+          logo: logo,
+          collapsed: collapsed,
+          testID: "sidebar-logo"
+        }) : accountMenu
+      }) : null, /*#__PURE__*/_jsx(Animated.View, {
+        testID: "sidebar-header-control",
+        style: [{
+          position: 'absolute',
+          height: 20
+        }, headerControlGeometry],
+        children: headerControl
+      })]
+    }), logo ? accountMenu : null]
   });
   return /*#__PURE__*/_jsx(SidebarSizeProvider, {
     value: size,
@@ -580,43 +642,67 @@ const SidebarPanel = ({
           justifyContent: 'space-between',
           overflow: 'hidden',
           paddingTop: metrics.padding,
-          paddingBottom: metrics.padding,
-          paddingLeft: collapsed ? metrics.collapsedPaddingX : metrics.padding,
-          paddingRight: collapsed ? metrics.collapsedPaddingX : metrics.padding
+          paddingBottom: metrics.padding
         }, chrome, panelStyle, style],
-        children: [hasTree ?
-        /*#__PURE__*/
-        // With a tree the header and search stay put; only the rows scroll,
-        // 24 between the primary rows and the tree section.
-        _jsxs(View, {
+        children: [/*#__PURE__*/_jsxs(View, {
           style: {
             width: '100%',
             minHeight: 0,
-            flexShrink: 1,
-            gap: 12
+            flexShrink: 1
           },
-          children: [headerRow, modeSwitcher, showSearch && !flatMobile ? searchButton : null, /*#__PURE__*/_jsxs(ScrollView, {
+          children: [/*#__PURE__*/_jsxs(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
+            },
+            children: [headerRow, modeSwitcher, showSearch && !flatMobile ? searchButton : null]
+          }), /*#__PURE__*/_jsxs(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: {
-              gap: 24
+              paddingTop: headerOverlap + 12,
+              paddingBottom: 8,
+              paddingLeft: 8,
+              paddingRight: 8,
+              gap: hasTree ? 24 : 0
             },
             showsVerticalScrollIndicator: false,
-            children: [shownItems.length > 0 ? /*#__PURE__*/_jsx(View, {
+            children: [shownItems.length > 0 || !hasTree ? /*#__PURE__*/_jsx(Animated.View, {
               role: "navigation",
-              style: {
+              style: [{
                 width: '100%',
                 gap: 4
-              },
-              children: shownItems.map(renderRow)
+              }, !hasTree && navInset],
+              children: nothingMatches && !hasTree ? /*#__PURE__*/_jsx(Text, {
+                variant: "body-regular",
+                style: {
+                  paddingLeft: 8,
+                  paddingRight: 8,
+                  paddingTop: 12,
+                  paddingBottom: 12,
+                  color: palette.textTertiary
+                },
+                children: noResultsLabel
+              }) : shownItems.map(renderRow)
             }) : null, tree && !collapsed && shownFolders.length > 0 ? /*#__PURE__*/_jsxs(View, {
               style: {
                 width: '100%',
@@ -643,7 +729,7 @@ const SidebarPanel = ({
                   testID: `sidebar-folder-${folder.key}`
                 }, folder.key))
               })]
-            }) : null, nothingMatches ? /*#__PURE__*/_jsx(Text, {
+            }) : null, nothingMatches && hasTree ? /*#__PURE__*/_jsx(Text, {
               variant: "body-regular",
               style: {
                 paddingLeft: 8,
@@ -653,50 +739,6 @@ const SidebarPanel = ({
               children: noResultsLabel
             }) : null]
           })]
-        }) :
-        /*#__PURE__*/
-        /* 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. */
-        _jsxs(ScrollView, {
-          style: {
-            marginTop: -8,
-            marginBottom: -8,
-            marginLeft: -8,
-            marginRight: -8,
-            flexGrow: 0,
-            flexShrink: 1,
-            minHeight: 0
-          },
-          contentContainerStyle: {
-            padding: 8,
-            gap: 12
-          },
-          showsVerticalScrollIndicator: false,
-          children: [headerRow, modeSwitcher, /*#__PURE__*/_jsxs(View, {
-            style: {
-              width: '100%',
-              gap: 12
-            },
-            children: [showSearch && !flatMobile ? searchButton : null, /*#__PURE__*/_jsx(Animated.View, {
-              role: "navigation",
-              style: [{
-                width: '100%',
-                gap: 4
-              }, navInset],
-              children: nothingMatches ? /*#__PURE__*/_jsx(Text, {
-                variant: "body-regular",
-                style: {
-                  paddingLeft: 8,
-                  paddingRight: 8,
-                  paddingTop: 12,
-                  paddingBottom: 12,
-                  color: palette.textTertiary
-                },
-                children: noResultsLabel
-              }) : shownItems.map(renderRow)
-            })]
-          })]
         }), /*#__PURE__*/_jsxs(View, {
           style: {
             width: '100%',
@@ -704,13 +746,48 @@ const SidebarPanel = ({
             gap: 12,
             paddingTop: hasTree ? 12 : 0
           },
-          children: [showThemeToggle ? collapsed ? /*#__PURE__*/_jsx(ThemeToggle, {
-            collapsed: true
-          }) : /*#__PURE__*/_jsx(ThemeToggle, {
-            appearance: "sidebar-segmented",
-            style: plain ? {
-              backgroundColor: palette.panel
-            } : undefined
+          children: [showThemeToggle ? /*#__PURE__*/_jsxs(Animated.View, {
+            testID: "sidebar-theme-morph",
+            style: [{
+              position: 'relative',
+              overflow: 'hidden'
+            }, themeGeometry],
+            children: [/*#__PURE__*/_jsx(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],
+              children: /*#__PURE__*/_jsx(ThemeToggle, {
+                variant: "sidebar-segmented",
+                style: plain ? {
+                  backgroundColor: palette.panel
+                } : undefined
+              })
+            }), /*#__PURE__*/_jsx(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],
+              children: /*#__PURE__*/_jsx(ThemeToggle, {
+                collapsed: true
+              })
+            })]
           }) : null, shownSecondary.length > 0 ? /*#__PURE__*/_jsx(View, {
             role: "navigation",
             style: {
@@ -721,14 +798,14 @@ const SidebarPanel = ({
           }) : null, plan ? /*#__PURE__*/_jsx(SidebarPlanCard, {
             plan: plan,
             collapsed: collapsed,
-            style: plain && !collapsed ? {
+            style: plain ? {
               backgroundColor: palette.panel
             } : undefined,
             testID: "sidebar-plan"
           }) : team ? /*#__PURE__*/_jsx(SidebarTeamMenu, {
             team: team,
             collapsed: collapsed,
-            style: plain && !collapsed ? {
+            style: plain ? {
               backgroundColor: palette.panel
             } : undefined,
             testID: "sidebar-team"