@oxy.so/bloom 4.1.0 → 4.2.0

package/src/bottom-bar/BottomBarBase.tsx

@@ -1,8 +1,9 @@
-import { useRef, useState, type ComponentType } from 'react';
+import { useContext, useRef, useState, type ComponentType } from 'react';
 import { View, ScrollView, Keyboard, Platform } from 'react-native';
 import { useEffect } from 'react';
 import Animated, { useAnimatedReaction, useAnimatedStyle, interpolate, runOnJS, useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { BottomBarSlotContext } from '../layout/bottom-bar-slot';
 import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { FAB_METRICS } from '../fab/constants';
 import { windowEdgeGap } from '../layout/edge';
@@ -17,7 +18,7 @@ interface Props extends BottomBarProps {
   Item: ComponentType<TabBarButtonProps>;
   Blur: ComponentType<ProgressiveBlurProps>;
 }
-export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueChange, action,
+export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueChange, activeProgress, onValueLongPress, action,
   actionPlacement = 'auto', actionBehavior = 'hide', material = 'translucent', minimizeProgress, blur = true, maxWidth = 560, style, testID }: Props) {
   const insets = useSafeAreaInsets();
   const minimize = useMinimizeState();
@@ -45,14 +46,15 @@ export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueCha
     node.inert = actionHidden;
   }, [actionHidden]);
   const [keyboardVisible, setKeyboardVisible] = useState(false);
-  const bottom = windowEdgeGap(insets.bottom);
+  const suppliedBottomInset = useContext(BottomBarSlotContext);
+  const bottom = Math.max(0, windowEdgeGap(insets.bottom) - (suppliedBottomInset ?? 0));
   useEffect(() => {
     if (Platform.OS === 'web') return;
     const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
     const hide = Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
     return () => { show.remove(); hide.remove(); };
   }, []);
-  useClaimBottomEdge(keyboardVisible ? 0 : bottom + footprint);
+  useClaimBottomEdge(keyboardVisible || suppliedBottomInset !== undefined ? 0 : bottom + footprint);
   const rowStyle = useAnimatedStyle(() => ({
     height: interpolate(reducedMotion ? Number(progress.value > 0.01) : progress.value, [0, 1], [EXPANDED_HEIGHT, MINIMIZED_HEIGHT], 'clamp'),
   }), [progress, reducedMotion]);
@@ -70,6 +72,7 @@ export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueCha
     {blur && material === 'translucent' && <Blur direction="bottom" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: bottom + footprint + BLUR_BLEED }} />}
     <Animated.View testID={testID ? `${testID}-row` : undefined} onLayout={event => setRowWidth(event.nativeEvent.layout.width)} pointerEvents="box-none" style={[{ justifyContent: items.length ? 'center' : 'flex-end', alignSelf: 'center', width: '100%', maxWidth, paddingLeft: 12, paddingRight: 12, marginBottom: bottom, flexDirection: 'row', alignItems: 'center' }, rowStyle]}>
       {items.length > 0 && <View testID={testID ? `${testID}-navigation` : undefined} style={{ width: navigationWidth, minWidth: 0 }}><ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ minWidth: '100%' }}><View style={{ width: Math.max(navigationWidth, items.length * 44 + 8) }}><Navigation scrollable={navigationWidth > 0 && navigationWidth < items.length * 44 + 8} embedded blur={false} material={material} minimizeProgress={progress}
+        activeProgress={activeProgress} onIndexLongPress={onValueLongPress ? index => { if (items[index]) onValueLongPress(items[index].name); } : undefined}
         activeIndex={items.findIndex(item => item.name === value)} onIndexChange={index => { if (items[index]) onValueChange(items[index].name); }}>
         {items.map((item, index) => <Item key={item.name} item={item} index={index} />)}
       </Navigation></View></ScrollView></View>}

package/src/bottom-bar/types.ts

@@ -7,6 +7,10 @@ export interface BottomBarProps {
   items: TabBarItem[];
   value: string;
   onValueChange: (value: string) => void;
+  /** Optional continuous selection supplied by a swipe pager, in item-index space. */
+  activeProgress?: SharedValue<number>;
+  /** Long press on a destination (for example an account switcher). */
+  onValueLongPress?: (value: string) => void;
   /** Static action sibling; outside the navigation scrub detector. */
   action?: ReactNode;
   /** Auto places the action above navigation when side-by-side targets would be cramped. */

package/src/layout/bottom-bar-slot.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+/** Bottom safe area already supplied by the measured app-shell slot. */
+export const BottomBarSlotContext = createContext<number | undefined>(undefined);

package/src/settings-modal/SettingsModal.tsx

@@ -26,9 +26,10 @@ import Animated, {
 
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { RiArrowLeftSLine } from '../icons/remix/RiArrowLeftSLine';
 import { RiArrowRightSLine } from '../icons/remix/RiArrowRightSLine';
 import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
+import { PageHeader } from '../page-header';
+import { ButtonGroup, ButtonGroupItem } from '../button-group';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { VerticalFade } from './SettingsArt';
 import { Backdrop, OverlayRoot } from '../overlay';
@@ -58,9 +59,7 @@ import { IS_WEB, useSettingsWebCss } from './web-css';
  *             20px icon (icon/secondary) + 8 + body-medium label
  *             (selected: background/secondary/hover + text/primary;
  *             hover: background/secondary/hover @ 60%)
- *   content   title row px 32 pt 32 pb 12 (Storage 6), title-3-medium +
- *             24px round close (background/tertiary, hover tertiary/hover,
- *             16px glyph); the page scrolls under a 40px top fade that eases
+ *   content   shared inline PageHeader and close ButtonGroup island; the page scrolls under a 40px top fade that eases
  *             in (200ms) once it is scrolled; px 32 pb 32
  *   toast     "Saved" pill straddling the panel's bottom edge: 1px
  *             border/button, background/primary, py 4 pr 10 pl 6, gap 4,
@@ -133,6 +132,7 @@ export function SettingsModal({
   page: controlledPage,
   defaultPage,
   onPageChange,
+  initialView = 'navigation',
   labels,
   testID,
 }: SettingsModalProps) {
@@ -156,7 +156,9 @@ export function SettingsModal({
   const insets = useSafeAreaInsets();
 
   // `compact` layout is two levels: the section list, then a page pushed over it.
-  const [compactPageOpen, setCompactPageOpen] = useState(false);
+  const [compactPageOpen, setCompactPageOpen] = useState(initialView === 'page');
+  const initialViewRef = useRef(initialView);
+  initialViewRef.current = initialView;
 
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
@@ -167,7 +169,7 @@ export function SettingsModal({
 
   const show = useCallback(() => {
     setInternalPage(defaultPageRef.current);
-    setCompactPageOpen(false);
+    setCompactPageOpen(initialViewRef.current === 'page');
     setMounted(true);
     setOpenCount((count) => count + 1);
   }, []);
@@ -398,7 +400,7 @@ export function SettingsModal({
                   {layout === 'compact' ? (
                     compactPageOpen && pageConfig ? (
                       <View style={styles.content}>
-                        <CompactHeader
+                        <SettingsHeader
                           title={pageConfig.title}
                           onBack={() => setCompactPageOpen(false)}
                           backLabel={labels?.back ?? 'Back'}
@@ -419,7 +421,7 @@ export function SettingsModal({
                       </View>
                     ) : (
                       <View style={styles.content}>
-                        <CompactHeader
+                        <SettingsHeader
                           title={labels?.dialog ?? 'Settings'}
                           closeLabel={closeLabel}
                           onClose={requestClose}
@@ -449,36 +451,18 @@ export function SettingsModal({
                         testID={testID}
                       />
                       <View style={styles.content}>
-                        <View
-                          style={[
-                            styles.titleRow,
-                            {
-                              paddingLeft: CONTENT_INSET[layout],
-                              paddingRight: CONTENT_INSET[layout],
-                              paddingTop: CONTENT_INSET[layout],
-                              paddingBottom: pageConfig?.compactTitle ? 6 : 12,
-                            },
-                          ]}
-                          testID={testID ? `${testID}-title-row` : undefined}
-                        >
-                          <Text
-                            variant="title-3-medium"
-                            role="heading"
-                            style={{ color: palette.text }}
-                          >
-                            {pageConfig?.title ?? ''}
-                          </Text>
-                          <SettingsCloseButton
-                            label={closeLabel}
-                            onPress={requestClose}
-                            palette={palette}
-                            testID={testID ? `${testID}-close` : undefined}
-                          />
-                        </View>
+                        <SettingsHeader
+                          title={pageConfig?.title ?? ''}
+                          closeLabel={closeLabel}
+                          onClose={requestClose}
+                          palette={palette}
+                          testID={testID}
+                        />
                         <PageScroller
                           key={currentPage}
                           palette={palette}
                           inset={CONTENT_INSET[layout]}
+                          insetTop={pageConfig?.compactTitle ? 6 : 12}
                           testID={testID}
                         >
                           {pageConfig?.content}
@@ -638,42 +622,8 @@ function RailRow({
 //  Close button, scroller, toast
 // ---------------------------------------------------------------------------
 
-function SettingsCloseButton({
-  label,
-  onPress,
-  palette,
-  testID,
-}: {
-  label: string;
-  onPress: () => void;
-  palette: SettingsPalette;
-  testID?: string;
-}) {
-  const [hovered, setHovered] = useState(false);
-  return (
-    <Pressable
-      role="button"
-      accessibilityLabel={label}
-      {...webDataSet({ bloomSettingsPress: '' })}
-      onPress={onPress}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
-      testID={testID}
-      style={[
-        styles.close,
-        { backgroundColor: hovered ? palette.tertiaryHover : palette.tertiary },
-      ]}
-    >
-      <RiCloseLine width={16} height={16} fill={palette.iconSecondary} />
-    </Pressable>
-  );
-}
-
-/**
- * The `compact` title bar: optional back chevron, the title, the close button —
- * 56px, the page's 16px inset, hairline under it.
- */
-function CompactHeader({
+/** Shared header on every layout; the modal already owns safe-area insets. */
+function SettingsHeader({
   title,
   onBack,
   backLabel,
@@ -690,39 +640,34 @@ function CompactHeader({
   palette: SettingsPalette;
   testID?: string;
 }) {
+  // Inline chrome does not reveal with scroll. An explicit local offset keeps
+  // the page behind the modal from influencing this header's paint or title.
+  const scrollY = useSharedValue(0);
   return (
-    <View
-      style={[styles.compactHeader, { borderBottomColor: palette.separator }]}
-      testID={testID ? `${testID}-title-row` : undefined}
-    >
-      {onBack ? (
-        <Pressable
-          role="button"
-          accessibilityLabel={backLabel}
-          {...webDataSet({ bloomSettingsPress: '' })}
-          onPress={onBack}
-          hitSlop={8}
-          testID={testID ? `${testID}-back` : undefined}
-          style={styles.compactBack}
-        >
-          <RiArrowLeftSLine width={24} height={24} fill={palette.text} />
-        </Pressable>
-      ) : null}
-      <Text
-        variant="headline-medium"
-        role="heading"
-        numberOfLines={1}
-        style={[styles.compactTitle, { color: palette.text }]}
-      >
-        {title}
-      </Text>
-      <SettingsCloseButton
-        label={closeLabel}
-        onPress={onClose}
-        palette={palette}
-        testID={testID ? `${testID}-close` : undefined}
-      />
-    </View>
+    <PageHeader
+      title={title}
+      headingLevel={2}
+      onBack={onBack}
+      backLabel={backLabel}
+      safeArea={false}
+      sticky={false}
+      placement="inline"
+      scrim="none"
+      scrimColor={palette.full}
+      scrollY={scrollY}
+      actions={
+        <ButtonGroup accessibilityLabel={closeLabel}>
+          <ButtonGroupItem
+            iconOnly
+            leadingIcon={RiCloseLine}
+            accessibilityLabel={closeLabel}
+            onPress={onClose}
+            testID={testID ? `${testID}-close` : undefined}
+          />
+        </ButtonGroup>
+      }
+      testID={testID ? `${testID}-header` : undefined}
+    />
   );
 }
 
@@ -736,7 +681,7 @@ function PageScroller({
   children: React.ReactNode;
   palette: SettingsPalette;
   inset: number;
-  /** Top inset — only the compact page, which has no title row above its content. */
+  /** Content gap below PageHeader; desktop Storage uses the compact 6px gap. */
   insetTop?: number;
   testID?: string;
 }) {
@@ -865,27 +810,6 @@ const styles = StyleSheet.create({
   railChevron: {
     marginLeft: 'auto',
   },
-  compactHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-    height: 56,
-    paddingLeft: 16,
-    paddingRight: 16,
-    borderBottomWidth: 1,
-  },
-  compactBack: {
-    width: 32,
-    height: 32,
-    marginLeft: -8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 9999,
-  },
-  compactTitle: {
-    flex: 1,
-    minWidth: 0,
-  },
   panel: {
     flexDirection: 'row',
     borderRadius: 24,
@@ -924,18 +848,6 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
   },
-  titleRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  close: {
-    width: 24,
-    height: 24,
-    borderRadius: 9999,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   scrollHost: {
     flex: 1,
     minHeight: 0,

package/src/settings-modal/types.ts

@@ -33,11 +33,11 @@ export interface SettingsNavGroup {
 
 /** One page of the content pane. */
 export interface SettingsModalPage {
-  /** Heading of the fixed title row. */
+  /** Heading of the shared PageHeader. */
   title: string;
   content: ReactNode;
   /**
-   * Used on the Storage page: a 6px title gap instead of 12px, because the page
+   * Used on the Storage page: a 6px gap below PageHeader instead of 12px, because the page
    * already carries 10px of headroom for the dropzone's progress badge.
    */
   compactTitle?: boolean;
@@ -73,6 +73,8 @@ export interface SettingsModalProps {
   /** Page selected every time the modal opens. Defaults to the first navigable row. */
   defaultPage?: string;
   onPageChange?: (page: string) => void;
+  /** Compact layout: start at the section list (default) or open the selected page directly. Resets on each open. */
+  initialView?: 'navigation' | 'page';
   labels?: SettingsModalLabels;
   testID?: string;
 }

package/src/sidebar/Sidebar.tsx

@@ -388,7 +388,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     setSuppressUserHover(expanding);
   };
 
-  const headerControl = flatMobile ? (
+  const headerControl = flatMobile && showSearch ? (
     <View
       ref={searchFieldRef}
       style={{