@oxy.so/bloom 4.1.0 → 4.3.0

package/src/settings-modal/SettingsModal.tsx

@@ -6,19 +6,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  BackHandler,
-  Pressable,
-  ScrollView,
-  StyleSheet,
-  View,
-  useWindowDimensions,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-} from 'react-native';
+import { BackHandler, Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
 import Animated, {
   Easing,
   useAnimatedStyle,
+  useAnimatedScrollHandler,
+  type SharedValue,
   useReducedMotion,
   useSharedValue,
   withTiming,
@@ -26,11 +19,11 @@ 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';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
@@ -58,10 +51,8 @@ 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
- *             in (200ms) once it is scrolled; px 32 pb 32
+ *   content   one viewport with a sticky PageHeader and its scroll-linked edge;
+ *             content insets belong to the page body, never the viewport
  *   toast     "Saved" pill straddling the panel's bottom edge: 1px
  *             border/button, background/primary, py 4 pr 10 pl 6, gap 4,
  *             16px lime check + body-2-medium, shadow-dropdown. Rises 12px in,
@@ -88,7 +79,11 @@ const RAIL_WIDTH = 274;
 /** `medium` layout: the rail narrows so the page keeps a readable measure. */
 const RAIL_WIDTH_MEDIUM = 220;
 /** Content inset per layout — 32 at regular, stepping down with the room. */
-const CONTENT_INSET: Record<SettingsModalLayout, number> = { regular: 32, medium: 24, compact: 16 };
+const CONTENT_INSET: Record<SettingsModalLayout, number> = {
+  regular: 32,
+  medium: 24,
+  compact: 16,
+};
 const VIEWPORT_GUTTER = 16;
 const MOTION_MS = 300;
 const UNMOUNT_MS = 320;
@@ -128,11 +123,13 @@ export function SettingsModal({
   control,
   open: controlledOpen,
   onClose,
+  onBeforeLeave,
   groups,
   pages,
   page: controlledPage,
   defaultPage,
   onPageChange,
+  initialView = 'navigation',
   labels,
   testID,
 }: SettingsModalProps) {
@@ -156,7 +153,14 @@ 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 beforeLeaveRef = useRef(onBeforeLeave);
+  beforeLeaveRef.current = onBeforeLeave;
+  const mayLeave = useCallback((reason: 'close' | 'navigation' | 'page') =>
+    beforeLeaveRef.current?.(reason) !== false, []);
 
   const onCloseRef = useRef(onClose);
   onCloseRef.current = onClose;
@@ -167,7 +171,7 @@ export function SettingsModal({
 
   const show = useCallback(() => {
     setInternalPage(defaultPageRef.current);
-    setCompactPageOpen(false);
+    setCompactPageOpen(initialViewRef.current === 'page');
     setMounted(true);
     setOpenCount((count) => count + 1);
   }, []);
@@ -210,31 +214,37 @@ export function SettingsModal({
   }, [isControlled, controlledOpen, show, hide]);
 
   const requestClose = useCallback(() => {
+    if (!mayLeave('close')) return false;
     if (isControlledRef.current) onCloseRef.current?.();
     else hide();
-  }, [hide]);
+    return true;
+  }, [hide, mayLeave]);
 
   useImperativeHandle(
     control?.ref,
     () => ({
       open: show,
       close: (cb?: () => void) => {
-        hide();
-        if (cb) setTimeout(cb, UNMOUNT_MS);
+        if (requestClose() && cb) setTimeout(cb, UNMOUNT_MS);
       },
     }),
-    [show, hide],
+    [show, requestClose],
   );
 
   const selectPage = useCallback(
     (next: string) => {
+      if (next !== currentPage && !mayLeave('page')) return;
       if (controlledPage === undefined) setInternalPage(next);
       setCompactPageOpen(true);
       onPageChange?.(next);
     },
-    [controlledPage, onPageChange],
+    [controlledPage, currentPage, onPageChange, mayLeave],
   );
 
+  const requestNavigation = useCallback(() => {
+    if (mayLeave('navigation')) setCompactPageOpen(false);
+  }, [mayLeave]);
+
   // Escape closes (web). On `window`, not `document`: a menu or popover opened
   // inside the modal handles Escape on `document` and stops propagation there,
   // so the innermost surface closes first and the modal stays open.
@@ -259,12 +269,12 @@ export function SettingsModal({
     if (!mounted || IS_WEB || typeof BackHandler?.addEventListener !== 'function') return;
     const sub = BackHandler.addEventListener('hardwareBackPress', () => {
       // On a pushed page (compact), back returns to the section list first.
-      if (compactPageOpenRef.current) setCompactPageOpen(false);
+      if (compactPageOpenRef.current) requestNavigation();
       else requestClose();
       return true;
     });
     return () => sub.remove();
-  }, [mounted, requestClose]);
+  }, [mounted, requestClose, requestNavigation]);
 
   // ----- saved toast -------------------------------------------------------
   const [savedPhase, setSavedPhase] = useState<SavedPhase>('hidden');
@@ -326,9 +336,7 @@ export function SettingsModal({
   // Full screen, a .85 scale reads as the page shrinking away; compact rises 16px instead.
   const webPanelMotion: WebCssStyle = {
     opacity: visible ? 1 : 0,
-    transform: isCompact
-      ? [{ translateY: visible ? 0 : 16 }]
-      : [{ scale: visible ? 1 : 0.85 }],
+    transform: isCompact ? [{ translateY: visible ? 0 : 16 }] : [{ scale: visible ? 1 : 0.85 }],
     filter: visible ? 'blur(0px)' : 'blur(4px)',
     transitionProperty: 'opacity, transform, filter',
     transitionDuration: reducedMotion ? '0ms' : `${MOTION_MS}ms`,
@@ -398,16 +406,14 @@ export function SettingsModal({
                   {layout === 'compact' ? (
                     compactPageOpen && pageConfig ? (
                       <View style={styles.content}>
-                        <CompactHeader
-                          title={pageConfig.title}
-                          onBack={() => setCompactPageOpen(false)}
-                          backLabel={labels?.back ?? 'Back'}
-                          closeLabel={closeLabel}
-                          onClose={requestClose}
-                          palette={palette}
-                          testID={testID}
-                        />
                         <PageScroller
+                          header={{
+                            title: pageConfig.title,
+                            onBack: requestNavigation,
+                            backLabel: labels?.back ?? 'Back',
+                            closeLabel,
+                            onClose: requestClose,
+                          }}
                           key={currentPage}
                           palette={palette}
                           inset={CONTENT_INSET.compact}
@@ -419,14 +425,12 @@ export function SettingsModal({
                       </View>
                     ) : (
                       <View style={styles.content}>
-                        <CompactHeader
-                          title={labels?.dialog ?? 'Settings'}
-                          closeLabel={closeLabel}
-                          onClose={requestClose}
-                          palette={palette}
-                          testID={testID}
-                        />
                         <SettingsRail
+                          header={{
+                            title: labels?.dialog ?? 'Settings',
+                            closeLabel,
+                            onClose: requestClose,
+                          }}
                           groups={groups}
                           page={currentPage}
                           onSelect={selectPage}
@@ -449,36 +453,16 @@ 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>
                         <PageScroller
+                          header={{
+                            title: pageConfig?.title ?? '',
+                            closeLabel,
+                            onClose: requestClose,
+                          }}
                           key={currentPage}
                           palette={palette}
                           inset={CONTENT_INSET[layout]}
+                          insetTop={pageConfig?.compactTitle ? 6 : 12}
                           testID={testID}
                         >
                           {pageConfig?.content}
@@ -505,7 +489,10 @@ export function SettingsModal({
 
 function ringVars(palette: SettingsPalette): WebCssStyle | null {
   return IS_WEB
-    ? { '--bloom-settings-ring': palette.ring, '--bloom-settings-ring-offset': palette.full }
+    ? {
+        '--bloom-settings-ring': palette.ring,
+        '--bloom-settings-ring-offset': palette.full,
+      }
     : null;
 }
 
@@ -514,6 +501,7 @@ function ringVars(palette: SettingsPalette): WebCssStyle | null {
 // ---------------------------------------------------------------------------
 
 function SettingsRail({
+  header,
   groups,
   page,
   onSelect,
@@ -522,6 +510,7 @@ function SettingsRail({
   layout,
   testID,
 }: {
+  header?: SettingsHeaderProps;
   groups: SettingsNavGroup[];
   page: string | undefined;
   onSelect: (page: string) => void;
@@ -531,42 +520,68 @@ function SettingsRail({
   testID?: string;
 }) {
   const compact = layout === 'compact';
+  const scrollY = useSharedValue(0);
+  const onScroll = useAnimatedScrollHandler((event) => {
+    scrollY.value = Math.max(0, event.contentOffset.y);
+  }, [scrollY]);
   return (
-    <ScrollView
+    <Animated.ScrollView
       role="navigation"
       aria-label={label}
       style={[
         compact
           ? styles.railCompact
           : [styles.rail, { width: layout === 'medium' ? RAIL_WIDTH_MEDIUM : RAIL_WIDTH }],
-        { backgroundColor: palette.secondary, borderRightColor: palette.separator },
+        {
+          backgroundColor: palette.secondary,
+          borderRightColor: palette.separator,
+        },
       ]}
-      contentContainerStyle={[styles.railContent, compact ? styles.railContentCompact : null]}
+      contentContainerStyle={header ? undefined : styles.railContent}
+      stickyHeaderIndices={header && !IS_WEB ? [0] : undefined}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
+      contentInsetAdjustmentBehavior="never"
+      automaticallyAdjustContentInsets={false}
       showsVerticalScrollIndicator={false}
       testID={testID ? `${testID}-rail` : undefined}
     >
-      {groups.map((group) => (
-        <View key={group.key ?? group.label} style={styles.group}>
-          <Text variant="body-medium" style={[styles.groupLabel, { color: palette.textSecondary }]}>
-            {group.label}
-          </Text>
-          <View style={styles.groupRows}>
-            {group.items.map((item) => (
-              <RailRow
-                key={item.key}
-                item={item}
-                // A list, not a selection, when the rows ARE the navigation.
-                selected={!compact && item.page !== undefined && item.page === page}
-                showChevron={compact && item.page !== undefined}
-                onSelect={onSelect}
-                palette={palette}
-                testID={testID ? `${testID}-nav-${item.key}` : undefined}
-              />
-            ))}
+      {header ? (
+        <SettingsHeader
+          {...header}
+          palette={palette}
+          scrimColor={palette.secondary}
+          scrollY={scrollY}
+          testID={testID}
+        />
+      ) : null}
+      <View style={header ? [styles.railContent, styles.railContentCompact] : { gap: 20 }}>
+        {groups.map((group) => (
+          <View key={group.key ?? group.label} style={styles.group}>
+            <Text
+              variant="body-medium"
+              style={[styles.groupLabel, { color: palette.textSecondary }]}
+            >
+              {group.label}
+            </Text>
+            <View style={styles.groupRows}>
+              {group.items.map((item) => (
+                <RailRow
+                  key={item.key}
+                  item={item}
+                  // A list, not a selection, when the rows ARE the navigation.
+                  selected={!compact && item.page !== undefined && item.page === page}
+                  showChevron={compact && item.page !== undefined}
+                  onSelect={onSelect}
+                  palette={palette}
+                  testID={testID ? `${testID}-nav-${item.key}` : undefined}
+                />
+              ))}
+            </View>
           </View>
-        </View>
-      ))}
-    </ScrollView>
+        ))}
+      </View>
+    </Animated.ScrollView>
   );
 }
 
@@ -587,9 +602,7 @@ function RailRow({
 }) {
   const [hovered, setHovered] = useState(false);
   const Icon = item.icon;
-  const onPress = item.page
-    ? () => onSelect(item.page as string)
-    : item.onPress;
+  const onPress = item.page ? () => onSelect(item.page as string) : item.onPress;
   return (
     <Pressable
       role="button"
@@ -620,7 +633,9 @@ function RailRow({
         numberOfLines={1}
         style={[
           styles.railLabel,
-          { color: selected || showChevron ? palette.text : palette.textSecondary },
+          {
+            color: selected || showChevron ? palette.text : palette.textSecondary,
+          },
         ]}
       >
         {item.label}
@@ -638,142 +653,102 @@ 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>
-  );
-}
+/** Shared header on every layout; the modal already owns safe-area insets. */
+type SettingsHeaderProps = {
+  title: string;
+  onBack?: () => void;
+  backLabel?: string;
+  closeLabel: string;
+  onClose: () => void;
+};
 
-/**
- * The `compact` title bar: optional back chevron, the title, the close button —
- * 56px, the page's 16px inset, hairline under it.
- */
-function CompactHeader({
+function SettingsHeader({
   title,
   onBack,
   backLabel,
   closeLabel,
   onClose,
   palette,
+  scrollY,
+  scrimColor = palette.full,
   testID,
-}: {
-  title: string;
-  onBack?: () => void;
-  backLabel?: string;
-  closeLabel: string;
-  onClose: () => void;
+}: SettingsHeaderProps & {
   palette: SettingsPalette;
+  scrollY: SharedValue<number>;
+  scrimColor?: string;
   testID?: string;
 }) {
   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={IS_WEB}
+      placement="inline"
+      scrim="auto"
+      scrimColor={scrimColor}
+      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}
+    />
   );
 }
 
+/** Each page owns one full-height viewport, including its header. */
 function PageScroller({
   children,
+  header,
   palette,
   inset,
   insetTop = 0,
   testID,
 }: {
   children: React.ReactNode;
+  header: SettingsHeaderProps;
   palette: SettingsPalette;
   inset: number;
-  /** Top inset — only the compact page, which has no title row above its content. */
+  /** Body spacing below the header; compact-title pages keep their smaller gap. */
   insetTop?: number;
   testID?: string;
 }) {
-  const [scrolled, setScrolled] = useState(false);
-  const onScroll = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
-    const next = event.nativeEvent.contentOffset.y > 0;
-    setScrolled((prev) => (prev === next ? prev : next));
-  }, []);
-  const fade: WebCssStyle = {
-    opacity: scrolled ? 1 : 0,
-    ...(IS_WEB
-      ? { transitionProperty: 'opacity', transitionDuration: '200ms', transitionTimingFunction: 'ease-out' }
-      : null),
-  };
+  const scrollY = useSharedValue(0);
+  const onScroll = useAnimatedScrollHandler((event) => {
+    scrollY.value = Math.max(0, event.contentOffset.y);
+  }, [scrollY]);
   return (
-    <View style={styles.scrollHost}>
-      <ScrollView
-        style={styles.scroll}
-        contentContainerStyle={[
-          styles.scrollContent,
-          { paddingLeft: inset, paddingRight: inset, paddingBottom: inset, paddingTop: insetTop },
-        ]}
-        onScroll={onScroll}
-        scrollEventThrottle={16}
-        testID={testID ? `${testID}-page` : undefined}
-      >
-        {children}
-      </ScrollView>
-      {/* Progressive top fade — `from-background-primary-default`. */}
+    <Animated.ScrollView
+      style={styles.scroll}
+      stickyHeaderIndices={IS_WEB ? undefined : [0]}
+      onScroll={onScroll}
+      scrollEventThrottle={16}
+      contentInsetAdjustmentBehavior="never"
+      automaticallyAdjustContentInsets={false}
+      testID={testID ? `${testID}-page` : undefined}
+    >
+      <SettingsHeader {...header} palette={palette} scrollY={scrollY} testID={testID} />
       <View
-        pointerEvents="none"
-        style={[styles.fade, fade]}
-        testID={testID ? `${testID}-fade` : undefined}
+        style={{
+          paddingLeft: inset,
+          paddingRight: inset,
+          paddingBottom: inset,
+          paddingTop: insetTop,
+        }}
       >
-        <VerticalFade color={palette.primary} />
+        {children}
       </View>
-    </View>
+    </Animated.ScrollView>
   );
 }
 
@@ -865,27 +840,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,33 +878,9 @@ 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,
-    position: 'relative',
-  },
   scroll: {
     flex: 1,
-  },
-  scrollContent: {},
-  fade: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    height: 40,
+    minHeight: 0,
   },
   toast: {
     position: 'absolute',