Merge branch 'main' of https://github.com/khairul169/vaulterm

frontend/components/containers/drawer.tsx

@@ -13,14 +13,17 @@ import {
 import { Link } from "expo-router";
 import ThemeSwitcher from "./theme-switcher";
 import UserMenuButton from "./user-menu-button";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 export type DrawerNavigationOptions = NavProps & {
   hidden?: boolean | null;
 };
 
 const Drawer = (props: DrawerContentComponentProps) => {
+  const insets = useSafeAreaInsets();
+
   return (
-    <>
+    <View pt={insets.top} flex={1}>
       <View p="$4">
         <UserMenuButton />
       </View>
@@ -35,7 +38,7 @@ const Drawer = (props: DrawerContentComponentProps) => {
       <View px="$4" py="$2">
         <ThemeSwitcher />
       </View>
-    </>
+    </View>
   );
 };
 
@@ -81,6 +84,8 @@ const DrawerItemList = ({
           bg={focused ? "$background" : "$colorTransparent"}
           onPress={onPress}
           icon={drawerIcon?.({ size: 16, color: "$color", focused }) as never}
+          size="$4"
+          $xs={{ size: "$5", borderRadius: 999, borderWidth: 0 }}
         >
           {drawerLabel !== undefined
             ? drawerLabel

frontend/components/ui/input.tsx

@@ -17,7 +17,7 @@ export const InputField = <T extends FieldValues>({
     name={name}
     render={({ field, fieldState }) => (
       <>
-        <Input {...field} {...props} />
+        <Input {...field} onChangeText={field.onChange} {...props} />
         <ErrorMessage error={fieldState.error} />
       </>
     )}

frontend/components/ui/menu-button.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+import { Platform } from "react-native";
 import {
+  Adapt,
   GetProps,
   ListItem,
   Popover,
-  styled,
   withStaticProperties,
 } from "tamagui";
 
@@ -14,7 +15,7 @@ type MenuButtonProps = GetProps<typeof Popover> & {
 };
 
 const MenuButtonFrame = ({
-  asChild,
+  asChild = true,
   trigger,
   children,
   width,
@@ -24,6 +25,20 @@ const MenuButtonFrame = ({
     <Popover size="$1" {...props}>
       <Popover.Trigger asChild={asChild}>{trigger}</Popover.Trigger>
 
+      <Adapt when="sm" platform="touch">
+        <Popover.Sheet modal dismissOnSnapToBottom snapPointsMode="fit">
+          <Popover.Sheet.Overlay
+            animation="quickest"
+            enterStyle={{ opacity: 0 }}
+            exitStyle={{ opacity: 0 }}
+          />
+          <Popover.Sheet.Frame padding="$4">
+            {/* <Adapt.Contents /> */}
+            {children}
+          </Popover.Sheet.Frame>
+        </Popover.Sheet>
+      </Adapt>
+
       <Popover.Content
         bordered
         enterStyle={{ y: -10, opacity: 0 }}
@@ -37,11 +52,17 @@ const MenuButtonFrame = ({
   );
 };
 
-const MenuButtonItem = (props: GetProps<typeof ListItem>) => (
-  <Popover.Close asChild>
-    <ListItem hoverTheme pressTheme {...props} />
-  </Popover.Close>
-);
+const MenuButtonItem = (props: GetProps<typeof ListItem>) => {
+  if (Platform.OS === "android" || Platform.OS === "ios") {
+    return <ListItem hoverTheme pressTheme {...props} />;
+  }
+
+  return (
+    <Popover.Close asChild>
+      <ListItem hoverTheme pressTheme {...props} />
+    </Popover.Close>
+  );
+};
 
 const MenuButton = withStaticProperties(MenuButtonFrame, {
   Item: MenuButtonItem,

frontend/components/ui/modal.tsx

@@ -32,6 +32,7 @@ const Modal = ({
           zIndex={999}
           modal
           dismissOnSnapToBottom
+          snapPoints={[40, 60, 0]}
           // disableDrag
         >
           <Sheet.Overlay