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

frontend/app/(drawer)/_layout.tsx

@@ -22,6 +22,7 @@ export default function Layout() {
           drawerType: media.sm ? "front" : "permanent",
           drawerStyle: { width: 250 },
           headerLeft: media.sm ? undefined : () => null,
+          headerStyle: {elevation: 0, borderBottomWidth: 0}
         }}
       >
         <Drawer.Screen

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

frontend/pages/auth/login.tsx

@@ -58,6 +58,7 @@ export default function LoginPage() {
             <InputField
               form={form}
               name="username"
+              autoCapitalize="none"
               onSubmitEditing={onSubmit}
             />
           </FormField>
@@ -65,6 +66,7 @@ export default function LoginPage() {
             <InputField
               form={form}
               name="password"
+              autoCapitalize="none"
               secureTextEntry
               onSubmitEditing={onSubmit}
             />

frontend/pages/auth/register.tsx

@@ -48,25 +48,36 @@ const RegisterPage = () => {
           <ErrorAlert error={register.error} />
 
           <FormField label="Full Name">
-            <InputField form={form} name="name" />
+            <InputField form={form} name="name" autoCapitalize="words" />
           </FormField>
 
           <FormField label="Username">
-            <InputField form={form} name="username" />
+            <InputField form={form} name="username" autoCapitalize="none" />
           </FormField>
 
           <FormField label="Email Address">
-            <InputField form={form} name="email" />
+            <InputField
+              form={form}
+              name="email"
+              keyboardType="email-address"
+              autoCapitalize="none"
+            />
           </FormField>
 
           <FormField label="Password">
-            <InputField form={form} name="password" secureTextEntry />
+            <InputField
+              form={form}
+              name="password"
+              autoCapitalize="none"
+              secureTextEntry
+            />
           </FormField>
 
           <FormField label="Confirm Password">
             <InputField
               form={form}
               name="confirmPassword"
+              autoCapitalize="none"
               secureTextEntry
               onSubmitEditing={onSubmit}
             />