Merge pull request #702 from streamplace/natb/dropdown-stuff-2

fix: clean up dropdown rendering a bit

js/components/src/components/mobile-player/ui/viewer-context-menu.tsx

···
                 <View
                   style={[
                     zero.flex.values[1],
-                    zero.layout.flex.row,
+                    isMobile ? zero.layout.flex.row : zero.layout.flex.column,
                     zero.layout.flex.spaceBetween,
                     zero.pr[4],
                   ]}
                 >
                   <Text>Quality</Text>
-                  <Text muted>
-                    ({quality}, {lowLatency ? "low latency" : "regular latency"}
-                    )
+                  <Text muted size={isMobile ? "base" : "sm"}>
+                    {quality === "source" ? "Source" : quality},{" "}
+                    {lowLatency ? "Low Latency" : ""}
                   </Text>
                 </View>
               </DropdownMenuSubTrigger>

js/components/src/components/ui/dropdown.native.tsx

···
+import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
+import {
+  Check,
+  CheckCircle,
+  ChevronLeft,
+  ChevronRight,
+  Circle,
+} from "lucide-react-native";
+import React, {
+  createContext,
+  forwardRef,
+  ReactNode,
+  startTransition,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { Pressable, StyleSheet, useWindowDimensions, View } from "react-native";
+import Animated, {
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import {
+  a,
+  borderRadius,
+  fontSize,
+  gap,
+  layout,
+  ml,
+  p,
+  pb,
+  pl,
+  pr,
+  pt,
+  px,
+  py,
+  right,
+} from "../../lib/theme/atoms";
+import { useTheme } from "../../ui";
+import {
+  objectFromObjects,
+  TextContext as TextClassContext,
+} from "./primitives/text";
+import { Text } from "./text";
+
+// Navigation stack context for bottom sheet menus
+interface NavigationStackItem {
+  key: string;
+  title?: string;
+  content: ReactNode | ((state: { pressed: boolean }) => ReactNode);
+}
+
+interface NavigationStackContextValue {
+  stack: NavigationStackItem[];
+  push: (item: NavigationStackItem) => void;
+  pop: () => void;
+  isNested: boolean;
+}
+
+const NavigationStackContext =
+  createContext<NavigationStackContextValue | null>(null);
+
+const useNavigationStack = () => {
+  const context = useContext(NavigationStackContext);
+  return context;
+};
+
+// Context to capture submenu content for mobile navigation
+interface SubMenuContextValue {
+  title?: string;
+  renderContent: () => ReactNode;
+  setRenderContent: (renderer: () => ReactNode) => void;
+  setTitle: (title: string) => void;
+  trigger: () => void;
+  key: string | null;
+}
+
+const SubMenuContext = createContext<SubMenuContextValue | null>(null);
+
+// Context for RadioGroup on native
+interface RadioGroupContextValue {
+  value?: string;
+  onValueChange?: (value: string) => void;
+}
+
+const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+
+export const DropdownMenu = DropdownMenuPrimitive.Root;
+export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+export const DropdownMenuRadioGroup = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>
+>(({ children, value, onValueChange, ...props }, ref) => {
+  return (
+    <RadioGroupContext.Provider value={{ value, onValueChange }}>
+      {children}
+    </RadioGroupContext.Provider>
+  );
+});
+
+export const DropdownMenuSub = forwardRef<any, any>(
+  ({ children, ...props }, ref) => {
+    const navStack = useNavigationStack();
+    const [subMenuTitle, setSubMenuTitle] = useState<string | undefined>();
+    const renderContentRef = useRef<(() => ReactNode) | null>(null);
+    const [subMenuKey, setSubMenuKey] = useState<string | null>(null);
+
+    const trigger = () => {
+      if (renderContentRef.current && navStack) {
+        const key = `submenu-${Date.now()}`;
+        setSubMenuKey(key);
+        navStack.push({
+          key,
+          title: subMenuTitle,
+          content: (props: any) => {
+            const renderFn = renderContentRef.current;
+            return renderFn ? renderFn() : null;
+          },
+        });
+      }
+    };
+
+    const setRenderContent = (renderer: () => ReactNode) => {
+      renderContentRef.current = renderer;
+    };
+
+    const contextValue = React.useMemo(
+      () => ({
+        renderContent: () => renderContentRef.current?.(),
+        setRenderContent,
+        title: subMenuTitle,
+        setTitle: setSubMenuTitle,
+        trigger,
+        key: subMenuKey,
+      }),
+      [subMenuTitle, subMenuKey, navStack],
+    );
+
+    return (
+      <SubMenuContext.Provider value={contextValue}>
+        {children}
+      </SubMenuContext.Provider>
+    );
+  },
+);
+
+export const DropdownMenuBottomSheet = forwardRef<
+  any,
+  DropdownMenuPrimitive.ContentProps & {
+    overlayStyle?: any;
+    portalHost?: string;
+  }
+>(function DropdownMenuBottomSheet(
+  { overlayStyle, portalHost, children, ...rest },
+  _ref,
+) {
+  const { onOpenChange } = DropdownMenuPrimitive.useRootContext();
+  const { zero: zt, theme } = useTheme();
+  const sheetRef = useRef<BottomSheet>(null);
+  const { width } = useWindowDimensions();
+  const isWide = width >= 450;
+  const sheetWidth = isWide ? 450 : width;
+  const horizontalMargin = isWide ? (width - sheetWidth) / 2 : 0;
+
+  const insets = useSafeAreaInsets();
+
+  const [stack, setStack] = useState<NavigationStackItem[]>([
+    { key: "root", content: children },
+  ]);
+
+  React.useEffect(() => {
+    setStack((prev) => {
+      if (!Array.isArray(prev) || prev.length === 0) {
+        return [{ key: "root", content: children }];
+      }
+      const newStack = [...prev];
+      newStack[0] = { ...newStack[0], content: children };
+      return newStack;
+    });
+  }, [children]);
+
+  const slideAnim = useSharedValue(0);
+  const fadeAnim = useSharedValue(1);
+
+  const push = (item: NavigationStackItem) => {
+    setStack((prev) => {
+      if (!Array.isArray(prev))
+        return [{ key: "root", content: children }, item];
+      return [...prev, item];
+    });
+
+    slideAnim.value = 40;
+    fadeAnim.value = 0;
+    slideAnim.value = withTiming(0, { duration: 350 });
+    fadeAnim.value = withTiming(1, { duration: 350 });
+  };
+
+  const popStack = () => {
+    startTransition(() => {
+      setStack((prev) => {
+        if (!Array.isArray(prev) || prev.length <= 1) {
+          return [{ key: "root", content: children }];
+        }
+        return prev.slice(0, -1);
+      });
+    });
+  };
+
+  const resetAnimationValues = () => {
+    setTimeout(() => {
+      slideAnim.value = 0;
+      fadeAnim.value = 1;
+    }, 5);
+  };
+
+  const pop = () => {
+    if (stack.length <= 1) return;
+
+    slideAnim.value = withTiming(40, { duration: 150 });
+    fadeAnim.value = withTiming(0, { duration: 150 }, (finished) => {
+      if (finished) {
+        runOnJS(popStack)();
+        runOnJS(resetAnimationValues)();
+      }
+    });
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateX: slideAnim.value }],
+    opacity: fadeAnim.value,
+  }));
+
+  const headerAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: fadeAnim.value,
+  }));
+
+  const currentLevel = stack[stack.length - 1];
+  const isNested = stack.length > 1;
+
+  const onBackgroundTap = () => {
+    if (sheetRef.current) sheetRef.current?.close();
+
+    setTimeout(() => {
+      onOpenChange?.(false);
+    }, 300);
+  };
+
+  if (!currentLevel) {
+    return null;
+  }
+
+  return (
+    <DropdownMenuPrimitive.Portal hostName={portalHost}>
+      <NavigationStackContext.Provider value={{ stack, push, pop, isNested }}>
+        <BottomSheet
+          ref={sheetRef}
+          enablePanDownToClose
+          enableDynamicSizing
+          detached={isWide}
+          bottomInset={isWide ? 0 : 0}
+          backdropComponent={({ style }) => (
+            <Pressable
+              style={[style, StyleSheet.absoluteFill]}
+              onPress={() => onBackgroundTap()}
+            />
+          )}
+          onClose={() => onOpenChange?.(false)}
+          style={[
+            overlayStyle,
+            StyleSheet.flatten(rest.style),
+            isWide && { marginHorizontal: horizontalMargin },
+          ]}
+          backgroundStyle={[zt.bg.popover, a.radius.all.md, a.shadows.md, p[1]]}
+          handleIndicatorStyle={[
+            a.sizes.width[12],
+            a.sizes.height[1],
+            zt.bg.mutedForeground,
+          ]}
+        >
+          {isNested && (
+            <Animated.View
+              style={[
+                headerAnimatedStyle,
+                a.layout.flex.row,
+                a.layout.flex.alignCenter,
+                px[4],
+                pb[2],
+                {
+                  borderBottomWidth: 1,
+                  borderBottomColor: theme.colors.border,
+                },
+              ]}
+            >
+              <Pressable
+                onPress={pop}
+                style={[
+                  a.layout.flex.row,
+                  a.layout.flex.alignCenter,
+                  gap.all[2],
+                ]}
+                hitSlop={80}
+              >
+                <ChevronLeft size={20} color={theme.colors.foreground} />
+                {currentLevel?.title ? (
+                  <Text size="lg">{currentLevel.title}</Text>
+                ) : null}
+              </Pressable>
+            </Animated.View>
+          )}
+          <Animated.View style={animatedStyle}>
+            <BottomSheetScrollView
+              style={[px[4]]}
+              contentContainerStyle={{
+                paddingBottom: insets.bottom + 50,
+                overflow: "hidden",
+              }}
+            >
+              {stack.map((level, index) => {
+                const isCurrent = index === stack.length - 1;
+                return (
+                  <View
+                    key={level.key}
+                    style={[{ display: isCurrent ? "flex" : "none" }]}
+                  >
+                    {typeof level.content === "function"
+                      ? level.content({ pressed: true })
+                      : level.content}
+                  </View>
+                );
+              })}
+            </BottomSheetScrollView>
+          </Animated.View>
+        </BottomSheet>
+      </NavigationStackContext.Provider>
+    </DropdownMenuPrimitive.Portal>
+  );
+});
+
+export const DropdownMenuSubTrigger = forwardRef<
+  any,
+  DropdownMenuPrimitive.SubTriggerProps & {
+    inset?: boolean;
+    subMenuTitle?: string;
+  } & {
+    ref?: React.RefObject<DropdownMenuPrimitive.SubTriggerRef>;
+    className?: string;
+    inset?: boolean;
+    children?: React.ReactNode;
+  }
+>(({ inset, children, subMenuTitle, ...props }, ref) => {
+  const subMenuContext = useContext(SubMenuContext);
+  const { icons } = useTheme();
+
+  React.useEffect(() => {
+    if (subMenuContext && subMenuTitle) {
+      subMenuContext.setTitle(subMenuTitle);
+    }
+  }, [subMenuContext, subMenuTitle]);
+
+  return (
+    <Pressable
+      onPress={() => {
+        subMenuContext?.trigger();
+      }}
+      {...props}
+    >
+      <View
+        style={[
+          inset && gap[2],
+          layout.flex.row,
+          layout.flex.alignCenter,
+          a.radius.all.sm,
+          py[1],
+          pl[2],
+          pr[2],
+        ]}
+      >
+        {typeof children === "function" ? (
+          children({ pressed: true })
+        ) : typeof children === "string" ? (
+          <Text>{children}</Text>
+        ) : (
+          children
+        )}
+        <View style={[a.layout.position.absolute, a.position.right[1]]}>
+          <ChevronRight size={18} color={icons.color.muted} />
+        </View>
+      </View>
+    </Pressable>
+  );
+});
+
+export const DropdownMenuSubContent = forwardRef<
+  any,
+  DropdownMenuPrimitive.SubContentProps & { children?: ReactNode }
+>(({ children, ...props }, ref) => {
+  const subMenuContext = useContext(SubMenuContext);
+  const navStack = useNavigationStack();
+  const prevChildrenRef = useRef<ReactNode>(null);
+
+  React.useEffect(() => {
+    if (subMenuContext && navStack) {
+      if (prevChildrenRef.current === children) {
+        return;
+      }
+
+      prevChildrenRef.current = children;
+      subMenuContext.setRenderContent(() => children);
+    }
+  }, [children, subMenuContext, navStack]);
+
+  return null;
+});
+
+export const DropdownMenuContent = forwardRef<
+  any,
+  DropdownMenuPrimitive.ContentProps & {
+    overlayStyle?: any;
+    portalHost?: string;
+  }
+>(({ overlayStyle, portalHost, style, children, ...props }, ref) => {
+  return (
+    <DropdownMenuBottomSheet {...props}>{children}</DropdownMenuBottomSheet>
+  );
+});
+
+export const DropdownMenuContentWithoutPortal = forwardRef<
+  any,
+  DropdownMenuPrimitive.ContentProps & {
+    overlayStyle?: any;
+    maxHeightPercentage?: number;
+  }
+>(
+  (
+    { overlayStyle, maxHeightPercentage = 0.8, children, style, ...props },
+    ref,
+  ) => {
+    return (
+      <DropdownMenuBottomSheet {...props}>{children}</DropdownMenuBottomSheet>
+    );
+  },
+);
+
+export const ResponsiveDropdownMenuContent = forwardRef<
+  any,
+  any & { onModeChange?: (isSheet: boolean) => void }
+>(({ children, onModeChange, ...props }, ref) => {
+  React.useEffect(() => {
+    onModeChange?.(true);
+  }, [onModeChange]);
+
+  return (
+    <DropdownMenuBottomSheet ref={ref} {...props}>
+      {children}
+    </DropdownMenuBottomSheet>
+  );
+});
+
+export const DropdownMenuItem = forwardRef<
+  any,
+  DropdownMenuPrimitive.ItemProps & { inset?: boolean; disabled?: boolean }
+>(({ inset, disabled, style, children, ...props }, ref) => {
+  const { theme } = useTheme();
+  return (
+    <Pressable {...props}>
+      <TextClassContext.Provider
+        value={objectFromObjects([
+          { color: theme.colors.popoverForeground },
+          a.fontSize.base,
+        ])}
+      >
+        <View
+          style={[
+            a.layout.flex.row,
+            a.layout.flex.alignCenter,
+            a.radius.all.sm,
+            py[1],
+            pl[2],
+            pr[2],
+          ]}
+        >
+          {typeof children === "function" ? (
+            children({ pressed: true })
+          ) : typeof children === "string" ? (
+            <Text style={[inset && gap[2], disabled && { opacity: 0.5 }]}>
+              {children}
+            </Text>
+          ) : (
+            children
+          )}
+        </View>
+      </TextClassContext.Provider>
+    </Pressable>
+  );
+});
+
+export const DropdownMenuCheckboxItem = forwardRef<
+  any,
+  DropdownMenuPrimitive.CheckboxItemProps & {
+    ref?: React.RefObject<DropdownMenuPrimitive.CheckboxItemRef>;
+    children?: React.ReactNode;
+  }
+>(({ children, checked, ...props }, ref) => {
+  const { theme } = useTheme();
+
+  return (
+    <Pressable
+      onPress={(e) => {
+        props.onCheckedChange?.(!checked);
+        props.onPress?.(e);
+      }}
+      {...props}
+    >
+      <View
+        style={[
+          a.layout.flex.row,
+          a.layout.flex.alignCenter,
+          a.radius.all.sm,
+          py[1],
+          pl[2],
+          pr[2],
+          pr[8],
+        ]}
+      >
+        {children}
+        <View style={[pl[1], layout.position.absolute, right[1]]}>
+          {checked ? (
+            <CheckCircle
+              size={14}
+              strokeWidth={3}
+              color={theme.colors.foreground}
+            />
+          ) : (
+            <Circle
+              size={14}
+              strokeWidth={3}
+              color={theme.colors.mutedForeground}
+            />
+          )}
+        </View>
+      </View>
+    </Pressable>
+  );
+});
+
+export const DropdownMenuRadioItem = forwardRef<
+  any,
+  DropdownMenuPrimitive.RadioItemProps & {
+    ref?: React.RefObject<DropdownMenuPrimitive.RadioItemRef>;
+    children?: React.ReactNode;
+    value?: string;
+  }
+>(({ children, value, ...props }, ref) => {
+  const { theme } = useTheme();
+  const radioGroupContext = useContext(RadioGroupContext);
+  const isSelected = radioGroupContext?.value === value;
+
+  return (
+    <Pressable
+      onPress={(e) => {
+        if (value && radioGroupContext?.onValueChange) {
+          radioGroupContext.onValueChange(value);
+        }
+        props.onPress?.(e);
+      }}
+      {...props}
+    >
+      <View
+        style={[
+          a.layout.flex.row,
+          a.layout.flex.alignCenter,
+          a.radius.all.sm,
+          py[1],
+          pl[2],
+          pr[8],
+        ]}
+      >
+        {children}
+        {isSelected && (
+          <View style={[pl[1], layout.position.absolute, right[1]]}>
+            <Check size={14} strokeWidth={3} color={theme.colors.foreground} />
+          </View>
+        )}
+      </View>
+    </Pressable>
+  );
+});
+
+export const DropdownMenuLabel = forwardRef<
+  any,
+  DropdownMenuPrimitive.LabelProps & { inset?: boolean }
+>(({ inset, ...props }, ref) => {
+  const { theme } = useTheme();
+  return (
+    <Text
+      ref={ref}
+      style={
+        [
+          px[2],
+          py[2],
+          { color: theme.colors.textMuted },
+          a.fontSize.base,
+          (inset && gap[2]) as any,
+        ] as any
+      }
+      {...props}
+    />
+  );
+});
+
+export const DropdownMenuSeparator = forwardRef<
+  any,
+  DropdownMenuPrimitive.SeparatorProps
+>((props, ref) => {
+  const { theme } = useTheme();
+  return (
+    <View
+      ref={ref}
+      style={[
+        {
+          borderBottomWidth: 1,
+          borderBottomColor: theme.colors.border,
+          marginVertical: -0.5,
+        },
+      ]}
+      {...props}
+    />
+  );
+});
+
+export function DropdownMenuShortcut(props: any) {
+  const { theme } = useTheme();
+  return (
+    <Text
+      style={[
+        ml.auto,
+        { color: theme.colors.textMuted },
+        a.fontSize.sm,
+        a.letterSpacing.widest,
+      ]}
+      {...props}
+    />
+  );
+}
+
+export const DropdownMenuGroup = forwardRef<
+  any,
+  { inset?: boolean; title?: string; children: ReactNode }
+>((props, ref) => {
+  const { theme } = useTheme();
+  const { inset, title, children, ...rest } = props;
+  return (
+    <View style={[pt[2], inset && gap[2]]} ref={ref} {...rest}>
+      {title && (
+        <Text style={[{ color: theme.colors.textMuted }, pb[1], pl[2]]}>
+          {title}
+        </Text>
+      )}
+      <View
+        style={[
+          { backgroundColor: theme.colors.muted },
+          p[2],
+          gap.all[1],
+          { borderRadius: borderRadius.lg },
+        ]}
+      >
+        {children}
+      </View>
+    </View>
+  );
+});
+
+export const DropdownMenuInfo = forwardRef<any, any>(
+  ({ description, ...props }, ref) => {
+    const { theme } = useTheme();
+    return (
+      <Text
+        style={[
+          { color: theme.colors.textMuted },
+          pt[1],
+          pl[2],
+          pb[2],
+          fontSize.sm,
+        ]}
+      >
+        {description}
+      </Text>
+    );
+  },
+);

js/components/src/components/ui/dropdown.tsx

···
-import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
 import * as DropdownMenuPrimitive from "@rn-primitives/dropdown-menu";
 import {
   Check,
-  CheckCircle,
   ChevronDown,
-  ChevronLeft,
   ChevronRight,
   ChevronUp,
-  Circle,
 } from "lucide-react-native";
-import React, {
-  createContext,
-  forwardRef,
-  ReactNode,
-  startTransition,
-  useContext,
-  useRef,
-  useState,
-} from "react";
+import React, { forwardRef, ReactNode } from "react";
 import {
   Platform,
-  Pressable,
   ScrollView,
   StyleSheet,
   useWindowDimensions,
   View,
 } from "react-native";
-import Animated, {
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withTiming,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 import {
   a,
   borderRadius,
···
 } from "./primitives/text";
 import { Text } from "./text";
 
-// Navigation stack context for bottom sheet menus
-interface NavigationStackItem {
-  key: string;
-  title?: string;
-  content: ReactNode | ((state: { pressed: boolean }) => ReactNode);
-}
-
-interface NavigationStackContextValue {
-  stack: NavigationStackItem[];
-  push: (item: NavigationStackItem) => void;
-  pop: () => void;
-  isNested: boolean;
-}
-
-const NavigationStackContext =
-  createContext<NavigationStackContextValue | null>(null);
-
-const useNavigationStack = () => {
-  const context = useContext(NavigationStackContext);
-  return context;
-};
-
-// Context to capture submenu content for mobile navigation
-interface SubMenuContextValue {
-  title?: string;
-  renderContent: () => ReactNode;
-  setRenderContent: (renderer: () => ReactNode) => void;
-  setTitle: (title: string) => void;
-  trigger: () => void;
-  key: string | null;
-}
-
-const SubMenuContext = createContext<SubMenuContextValue | null>(null);
-
 export const DropdownMenu = DropdownMenuPrimitive.Root;
 export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+export const DropdownMenuRadioGroup = forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioGroup>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>
+>(({ children, ...props }, ref) => {
+  return (
+    <DropdownMenuPrimitive.RadioGroup ref={ref} {...props}>
+      {children}
+    </DropdownMenuPrimitive.RadioGroup>
+  );
+});
 
-// Custom DropdownMenuSub that works with mobile navigation
 export const DropdownMenuSub = forwardRef<any, any>(
   ({ children, ...props }, ref) => {
-    const navStack = useNavigationStack();
-    const [subMenuTitle, setSubMenuTitle] = useState<string | undefined>();
-    const renderContentRef = useRef<(() => ReactNode) | null>(null);
-    const [subMenuKey, setSubMenuKey] = useState<string | null>(null);
-
-    // If we're in a mobile navigation stack, use custom context
-    if (navStack) {
-      const trigger = () => {
-        if (renderContentRef.current) {
-          const key = `submenu-${Date.now()}`;
-          setSubMenuKey(key);
-          navStack.push({
-            key,
-            title: subMenuTitle,
-            // Store a function that always reads the latest content from the ref
-            content: (props: any) => {
-              const renderFn = renderContentRef.current;
-              return renderFn ? renderFn() : null;
-            },
-          });
-        }
-      };
-
-      const setRenderContent = (renderer: () => ReactNode) => {
-        renderContentRef.current = renderer;
-      };
-
-      const contextValue = React.useMemo(
-        () => ({
-          renderContent: () => renderContentRef.current?.(),
-          setRenderContent,
-          title: subMenuTitle,
-          setTitle: setSubMenuTitle,
-          trigger,
-          key: subMenuKey,
-        }),
-        [subMenuTitle, subMenuKey],
-      );
-
-      return (
-        <SubMenuContext.Provider value={contextValue}>
-          {children}
-        </SubMenuContext.Provider>
-      );
-    }
-
-    // Web - use primitive
     return (
       <DropdownMenuPrimitive.Sub ref={ref} {...props}>
         {children}
···
   },
 );
 
-export const DropdownMenuBottomSheet = forwardRef<
-  any,
-  DropdownMenuPrimitive.ContentProps & {
-    overlayStyle?: any;
-    portalHost?: string;
-  }
->(function DropdownMenuBottomSheet(
-  { overlayStyle, portalHost, children, ...rest },
-  _ref,
-) {
-  // Use the primitives' context to know if open
-  const { onOpenChange } = DropdownMenuPrimitive.useRootContext();
-  const { zero: zt, theme } = useTheme();
-  const sheetRef = useRef<BottomSheet>(null);
-  const { width } = useWindowDimensions();
-  const isWide = Platform.OS !== "web" && width >= 800;
-  const sheetWidth = isWide ? 450 : width;
-  const horizontalMargin = isWide ? (width - sheetWidth) / 2 : 0;
-
-  const insets = useSafeAreaInsets();
-
-  // Navigation stack state
-  const [stack, setStack] = useState<NavigationStackItem[]>([
-    { key: "root", content: children },
-  ]);
-
-  // Update root content when children changes
-  React.useEffect(() => {
-    setStack((prev) => {
-      if (!Array.isArray(prev) || prev.length === 0) {
-        return [{ key: "root", content: children }];
-      }
-      // Update the root item content
-      const newStack = [...prev];
-      newStack[0] = { ...newStack[0], content: children };
-      return newStack;
-    });
-  }, [children]);
-
-  const slideAnim = useSharedValue(0);
-  const fadeAnim = useSharedValue(1);
-
-  const push = (item: NavigationStackItem) => {
-    // First, update the stack
-    setStack((prev) => {
-      if (!Array.isArray(prev))
-        return [{ key: "root", content: children }, item];
-      return [...prev, item];
-    });
-
-    // Then animate from right to center with fade
-    slideAnim.value = 40;
-    fadeAnim.value = 0;
-    slideAnim.value = withTiming(0, { duration: 350 });
-    fadeAnim.value = withTiming(1, { duration: 350 });
-  };
-
-  const popStack = () => {
-    startTransition(() => {
-      setStack((prev) => {
-        if (!Array.isArray(prev) || prev.length <= 1) {
-          return [{ key: "root", content: children }];
-        }
-        return prev.slice(0, -1);
-      });
-    });
-  };
-
-  const resetAnimationValues = () => {
-    setTimeout(() => {
-      slideAnim.value = 0;
-      fadeAnim.value = 1;
-    }, 5);
-  };
-
-  const pop = () => {
-    if (stack.length <= 1) return;
-
-    // Animate out to the right with fade
-    slideAnim.value = withTiming(40, { duration: 150 });
-    fadeAnim.value = withTiming(0, { duration: 150 }, (finished) => {
-      if (finished) {
-        // Update stack first with startTransition for smoother render
-        runOnJS(popStack)();
-
-        // Then reset animation position after a brief delay to ensure component has unmounted
-        runOnJS(resetAnimationValues)();
-      }
-    });
-  };
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: slideAnim.value }],
-    opacity: fadeAnim.value,
-  }));
-
-  const headerAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: fadeAnim.value,
-  }));
-
-  const currentLevel = stack[stack.length - 1];
-  const isNested = stack.length > 1;
-
-  const onBackgroundTap = () => {
-    if (sheetRef.current) sheetRef.current?.close();
-
-    setTimeout(() => {
-      onOpenChange?.(false);
-    }, 300);
-  };
-
-  // Safety check - if no current level, don't render
-  if (!currentLevel) {
-    return null;
-  }
-
-  return (
-    <DropdownMenuPrimitive.Portal hostName={portalHost}>
-      <NavigationStackContext.Provider value={{ stack, push, pop, isNested }}>
-        <BottomSheet
-          ref={sheetRef}
-          enablePanDownToClose
-          enableDynamicSizing
-          detached={isWide}
-          bottomInset={isWide ? 0 : 0}
-          backdropComponent={({ style }) => (
-            <Pressable
-              style={[style, StyleSheet.absoluteFill]}
-              onPress={() => onBackgroundTap()}
-            />
-          )}
-          onClose={() => onOpenChange?.(false)}
-          style={[
-            overlayStyle,
-            StyleSheet.flatten(rest.style),
-            isWide && { marginHorizontal: horizontalMargin },
-          ]}
-          backgroundStyle={[zt.bg.popover, a.radius.all.md, a.shadows.md, p[1]]}
-          handleIndicatorStyle={[
-            a.sizes.width[12],
-            a.sizes.height[1],
-            zt.bg.mutedForeground,
-          ]}
-        >
-          {isNested && (
-            <Animated.View
-              style={[
-                headerAnimatedStyle,
-                a.layout.flex.row,
-                a.layout.flex.alignCenter,
-                px[4],
-                pb[2],
-                {
-                  borderBottomWidth: 1,
-                  borderBottomColor: theme.colors.border,
-                },
-              ]}
-            >
-              <Pressable
-                onPress={pop}
-                style={[
-                  a.layout.flex.row,
-                  a.layout.flex.alignCenter,
-                  gap.all[2],
-                ]}
-                hitSlop={80}
-              >
-                <ChevronLeft size={20} color={theme.colors.foreground} />
-                {currentLevel?.title ? (
-                  <Text size="lg">{currentLevel.title}</Text>
-                ) : null}
-              </Pressable>
-            </Animated.View>
-          )}
-          <Animated.View style={animatedStyle}>
-            <BottomSheetScrollView
-              style={[px[4]]}
-              contentContainerStyle={{
-                paddingBottom: insets.bottom + 50,
-                overflow: "hidden",
-              }}
-            >
-              {/* Render all stack levels to keep components mounted, but hide non-current ones */}
-              {stack.map((level, index) => {
-                const isCurrent = index === stack.length - 1;
-                return (
-                  <View
-                    key={level.key}
-                    style={[{ display: isCurrent ? "flex" : "none" }]}
-                  >
-                    {typeof level.content === "function"
-                      ? level.content({ pressed: true })
-                      : level.content}
-                  </View>
-                );
-              })}
-            </BottomSheetScrollView>
-          </Animated.View>
-        </BottomSheet>
-      </NavigationStackContext.Provider>
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-
 export const DropdownMenuSubTrigger = forwardRef<
   any,
   DropdownMenuPrimitive.SubTriggerProps & {
···
     children?: React.ReactNode;
   }
 >(({ inset, children, subMenuTitle, ...props }, ref) => {
-  const navStack = useNavigationStack();
-  const subMenuContext = useContext(SubMenuContext);
-  const { icons, theme } = useTheme();
-
-  // Set the title in the submenu context if provided
-  React.useEffect(() => {
-    if (subMenuContext && subMenuTitle) {
-      subMenuContext.setTitle(subMenuTitle);
-    }
-  }, [subMenuContext, subMenuTitle]);
-
-  // If we're in a navigation stack (mobile bottom sheet), handle differently
-  if (navStack && subMenuContext) {
-    return (
-      <Pressable
-        onPress={() => {
-          subMenuContext.trigger();
-        }}
-        {...props}
-      >
-        <View
-          style={[
-            inset && gap[2],
-            layout.flex.row,
-            layout.flex.alignCenter,
-            a.radius.all.sm,
-            py[1],
-            pl[2],
-            pr[2],
-          ]}
-        >
-          {typeof children === "function" ? (
-            children({ pressed: true })
-          ) : typeof children === "string" ? (
-            <Text>{children}</Text>
-          ) : (
-            children
-          )}
-          <View style={[a.layout.position.absolute, a.position.right[1]]}>
-            <ChevronRight size={18} color={icons.color.muted} />
-          </View>
-        </View>
-      </Pressable>
-    );
-  }
-
-  // Web behavior - use primitive
+  const { icons } = useTheme();
   const { open } = DropdownMenuPrimitive.useSubContext();
   const Icon =
     Platform.OS === "web" ? ChevronRight : open ? ChevronUp : ChevronDown;
+
   return (
     <TextClassContext.Provider
       value={objectFromObjects([
···
   DropdownMenuPrimitive.SubContentProps & { children?: ReactNode }
 >(({ children, ...props }, ref) => {
   const { zero: zt } = useTheme();
-  const subMenuContext = useContext(SubMenuContext);
-  const navStack = useNavigationStack();
-  const prevChildrenRef = useRef<ReactNode>(null);
 
-  // Register a render function that will be called fresh each time
-  React.useEffect(() => {
-    if (subMenuContext && navStack) {
-      // Only update if children reference actually changed
-      if (prevChildrenRef.current === children) {
-        return;
-      }
-
-      prevChildrenRef.current = children;
-
-      // Pass a function that returns the current children
-      subMenuContext.setRenderContent(() => children);
-
-      // Force a stack update to trigger rerender with the actual children
-      if (subMenuContext.key) {
-        // Store the children directly so React can handle updates
-        //navStack.updateContent(subMenuContext.key, children);
-      }
-    }
-  }, [children, subMenuContext, navStack]);
-
-  // On mobile, don't render the subcontent here - it'll be rendered in the nav stack
-  // But keep the component mounted so effects run when children change
-  if (navStack && subMenuContext) {
-    // Component stays mounted to track prop changes, but renders nothing
-    return null;
-  }
-
-  // Web - use primitive
   return (
     <DropdownMenuPrimitive.SubContent
       ref={ref}
       style={[
         a.zIndex[50],
-        a.sizes.minWidth[32],
+        a.sizes.minWidth[64],
+        a.sizes.maxWidth[64],
         a.overflow.hidden,
         a.radius.all.md,
         a.borders.width.thin,
···
 >(({ overlayStyle, portalHost, style, children, ...props }, ref) => {
   const { zero: zt } = useTheme();
   const { height } = useWindowDimensions();
-  const maxHeight = height * 0.8;
+  const maxHeight = height * 0.9;
 
   return (
     <DropdownMenuPrimitive.Portal hostName={portalHost}>
···
           style={
             [
               a.zIndex[50],
-              a.sizes.minWidth[32],
+              a.sizes.minWidth[64],
               a.sizes.maxWidth[64],
+              { maxHeight: maxHeight },
               a.overflow.hidden,
               a.radius.all.md,
               a.borders.width.thin,
···
           }
           {...props}
         >
-          <ScrollView style={{ maxHeight }} showsVerticalScrollIndicator={true}>
+          <ScrollView showsVerticalScrollIndicator={false}>
             {typeof children === "function"
               ? children({ pressed: false })
               : children}
···
   }
 >(
   (
-    { overlayStyle, maxHeightPercentage = 0.8, children, style, ...props },
+    { overlayStyle, maxHeightPercentage = 0.9, children, style, ...props },
     ref,
   ) => {
     const { theme } = useTheme();
···
           style={
             [
               { zIndex: 999999 },
-              a.sizes.minWidth[32],
+              a.sizes.minWidth[64],
               a.sizes.maxWidth[64],
+              { maxHeight: maxHeight },
               a.radius.all.md,
               a.borders.width.thin,
               { borderColor: theme.colors.border },
···
           }
           {...props}
         >
-          <ScrollView style={{ maxHeight }} showsVerticalScrollIndicator={true}>
+          <ScrollView showsVerticalScrollIndicator={false}>
             {typeof children === "function"
               ? children({ pressed: false })
               : children}
···
   },
 );
 
-/// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
-/// Prefer passing scoped content in as **otherwise it may crash the app**.
-export const ResponsiveDropdownMenuContent = forwardRef<any, any>(
-  ({ children, ...props }, ref) => {
-    const { width } = useWindowDimensions();
+export const ResponsiveDropdownMenuContent = forwardRef<
+  any,
+  any & { onModeChange?: (isSheet: boolean) => void }
+>(({ children, onModeChange, ...props }, ref) => {
+  const { width } = useWindowDimensions();
+
+  const isBottomSheet =
+    Platform.OS !== "web" || (Platform.OS === "web" && width <= 980);
 
-    // On web, you might want to always use the normal dropdown
-    const isBottomSheet = Platform.OS !== "web";
+  React.useEffect(() => {
+    onModeChange?.(isBottomSheet);
+  }, [isBottomSheet, onModeChange]);
 
-    if (isBottomSheet) {
-      return (
-        <DropdownMenuBottomSheet ref={ref} {...props}>
-          {children}
-        </DropdownMenuBottomSheet>
-      );
-    }
+  if (isBottomSheet) {
     return (
       <DropdownMenuContent align="start" ref={ref} {...props}>
         {children}
       </DropdownMenuContent>
     );
-  },
-);
+  }
+  return (
+    <DropdownMenuContent ref={ref} {...props}>
+      {children}
+    </DropdownMenuContent>
+  );
+});
 
 export const DropdownMenuItem = forwardRef<
   any,
···
 >(({ inset, disabled, style, children, ...props }, ref) => {
   const { theme } = useTheme();
   return (
-    <Pressable {...props}>
+    <DropdownMenuPrimitive.Item ref={ref} {...props}>
       <TextClassContext.Provider
         value={objectFromObjects([
           { color: theme.colors.popoverForeground },
···
           )}
         </View>
       </TextClassContext.Provider>
-    </Pressable>
+    </DropdownMenuPrimitive.Item>
   );
 });
 
···
   }
 >(({ children, checked, ...props }, ref) => {
   const { theme } = useTheme();
+
   return (
     <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
···
       >
         {children}
         <View style={[pl[1], layout.position.absolute, right[1]]}>
-          {checked ? (
-            <CheckCircle
-              size={14}
-              strokeWidth={3}
-              color={theme.colors.foreground}
-            />
-          ) : (
-            <Circle
-              size={14}
-              strokeWidth={3}
-              color={theme.colors.mutedForeground}
-            />
-          )}
+          <DropdownMenuPrimitive.ItemIndicator>
+            <Check size={14} strokeWidth={3} color={theme.colors.foreground} />
+          </DropdownMenuPrimitive.ItemIndicator>
         </View>
       </View>
     </DropdownMenuPrimitive.CheckboxItem>
···
   DropdownMenuPrimitive.RadioItemProps & {
     ref?: React.RefObject<DropdownMenuPrimitive.RadioItemRef>;
     children?: React.ReactNode;
+    value?: string;
   }
->(({ children, ...props }, ref) => {
+>(({ children, value, ...props }, ref) => {
   const { theme } = useTheme();
+
   return (
     <DropdownMenuPrimitive.RadioItem
       ref={ref}
       closeOnPress={props.closeOnPress || false}
+      value={value}
       {...props}
     >
       <View
···
     );
   },
 );
+
+// Re-export DropdownMenuBottomSheet for compatibility with native
+export const DropdownMenuBottomSheet = DropdownMenuContent;