more usage of tamagui primitives

resources/js/admin/mobile/components/Sheet.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { YStack, XStack } from '@tamagui/stacks';
 import { SizableText as Text } from '@tamagui/text';
 import { Pressable } from '@tamagui/react-native-web-lite';
+import { Sheet } from '@tamagui/sheet';
 import { useTranslation } from 'react-i18next';
 import { useAdminTheme } from '../theme';
 
@@ -17,42 +18,64 @@ type SheetProps = {
 
 export function MobileSheet({ open, title, onClose, children, footer, bottomOffsetPx = 88 }: SheetProps) {
   const { t } = useTranslation('mobile');
-  const { surface, textStrong, muted, overlay, shadow } = useAdminTheme();
+  const { surface, textStrong, muted, overlay, shadow, border } = useAdminTheme();
+  const bottomOffset = `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)`;
 
-  if (!open) return null;
+  if (!open) {
+    return null;
+  }
   return (
-    <div className="fixed inset-0 z-50 flex items-end justify-center backdrop-blur-sm" style={{ backgroundColor: `${overlay}66` }}>
-      <YStack
+    <Sheet
+      modal
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) {
+          onClose();
+        }
+      }}
+      snapPoints={[82]}
+      snapPointsMode="percent"
+      dismissOnOverlayPress
+      dismissOnSnapToBottom
+      zIndex={100000}
+    >
+      <Sheet.Overlay backgroundColor={`${overlay}66`} />
+      <Sheet.Frame
         width="100%"
         maxWidth={520}
+        alignSelf="center"
         borderTopLeftRadius={24}
         borderTopRightRadius={24}
         backgroundColor={surface}
         padding="$4"
         paddingBottom="$7"
-        space="$3"
         shadowColor={shadow}
         shadowOpacity={0.12}
         shadowRadius={18}
         shadowOffset={{ width: 0, height: -8 }}
-        maxHeight="82vh"
-        overflow="auto"
-        // keep sheet above bottom nav / safe area
-        style={{ marginBottom: `max(env(safe-area-inset-bottom, 0px), ${bottomOffsetPx}px)` }}
+        style={{ marginBottom: bottomOffset }}
       >
-        <XStack alignItems="center" justifyContent="space-between">
-          <Text fontSize="$md" fontWeight="800" color={textStrong}>
-            {title}
-          </Text>
-          <Pressable onPress={onClose}>
-            <Text fontSize="$md" color={muted}>
-              {t('actions.close', 'Close')}
-            </Text>
-          </Pressable>
-        </XStack>
-        {children}
-        {footer ? footer : null}
-      </YStack>
-    </div>
+        <Sheet.Handle height={5} width={48} backgroundColor={border} borderRadius={999} marginBottom="$3" />
+        <Sheet.ScrollView
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={{ paddingBottom: 6 }}
+        >
+          <YStack space="$3">
+            <XStack alignItems="center" justifyContent="space-between">
+              <Text fontSize="$md" fontWeight="800" color={textStrong}>
+                {title}
+              </Text>
+              <Pressable onPress={onClose}>
+                <Text fontSize="$md" color={muted}>
+                  {t('actions.close', 'Close')}
+                </Text>
+              </Pressable>
+            </XStack>
+            {children}
+            {footer ? footer : null}
+          </YStack>
+        </Sheet.ScrollView>
+      </Sheet.Frame>
+    </Sheet>
   );
 }