feat: update ui for android

frontend/components/containers/drawer.tsx

@@ -4,7 +4,7 @@ import {
   DrawerContentScrollView,
   DrawerNavigationOptions as NavProps,
 } from "@react-navigation/drawer";
-import { Button, View } from "tamagui";
+import { Button, Text, View } from "tamagui";
 import {
   CommonActions,
   DrawerActions,
@@ -24,19 +24,25 @@ const Drawer = (props: DrawerContentComponentProps) => {
 
   return (
     <View pt={insets.top} flex={1}>
-      <View p="$4">
+      <View py="$4" px="$2">
         <UserMenuButton />
       </View>
 
       <DrawerContentScrollView
-        contentContainerStyle={{ padding: 18, paddingTop: 0 }}
+        contentContainerStyle={{
+          paddingTop: 0,
+          paddingLeft: 0,
+          paddingStart: 0,
+          paddingRight: 18,
+          paddingBottom: 18,
+        }}
         {...props}
       >
         <DrawerItemList {...props} />
       </DrawerContentScrollView>
 
       <View px="$4" py="$2">
-        <ThemeSwitcher />
+        <ThemeSwitcher $xs={{ alignSelf: "flex-start" }} />
       </View>
     </View>
   );
@@ -85,7 +91,11 @@ const DrawerItemList = ({
           onPress={onPress}
           icon={drawerIcon?.({ size: 16, color: "$color", focused }) as never}
           size="$4"
-          $xs={{ size: "$5", borderRadius: 999, borderWidth: 0 }}
+          $xs={{ size: "$5" }}
+          borderRadius={0}
+          borderTopRightRadius="$10"
+          borderBottomRightRadius="$10"
+          borderWidth={0}
         >
           {drawerLabel !== undefined
             ? drawerLabel

frontend/components/containers/server-stats-bar.tsx

@@ -61,6 +61,7 @@ const ServerStatsBar = ({ url }: Props) => {
   return (
     <ScrollView
       horizontal
+      flexGrow={0}
       contentContainerStyle={{
         flexDirection: "row",
         alignItems: "center",

frontend/components/containers/terminal.tsx

@@ -55,6 +55,7 @@ const Terminal = ({ client = "xtermjs", style, ...props }: TerminalProps) => {
         horizontal
         flexGrow={0}
         contentContainerStyle={{ flexDirection: "row" }}
+        $gtSm={{ display: "none" }}
       >
         <TerminalButton
           title={<Icons name="swap-horizontal" size={16} />}

frontend/components/containers/theme-switcher.tsx

@@ -12,21 +12,28 @@ const ThemeSwitcher = ({ iconSize = 18, ...props }: Props) => {
   const id = useId();
 
   return (
-    <XStack alignItems="center" gap="$2">
-      <Ionicons
-        name={theme === "light" ? "moon-outline" : "sunny-outline"}
-        size={iconSize}
-      />
-      <Label htmlFor={id} flex={1} cursor="pointer">
-        Dark Mode
-      </Label>
+    <XStack
+      alignItems="center"
+      gap="$4"
+      w="auto"
+      justifyContent="space-between"
+      {...props}
+    >
+      <XStack alignItems="center" gap="$2">
+        <Ionicons
+          name={theme === "light" ? "moon-outline" : "sunny-outline"}
+          size={iconSize}
+        />
+        <Label htmlFor={id} cursor="pointer">
+          Dark Mode
+        </Label>
+      </XStack>
       <Switch
         id={id}
         onPress={toggle}
         checked={theme === "dark"}
         size="$2"
         cursor="pointer"
-        {...props}
       >
         <Switch.Thumb animation="quicker" />
       </Switch>

frontend/components/containers/user-menu-button.tsx

@@ -7,7 +7,6 @@ import {
   Text,
   useMedia,
   View,
-  YGroup,
 } from "tamagui";
 import MenuButton from "../ui/menu-button";
 import Icons from "../ui/icons";
@@ -29,8 +28,11 @@ const UserMenuButton = () => {
         trigger={
           <Button
             bg="$colorTransparent"
+            borderWidth={0}
             justifyContent="flex-start"
-            p={0}
+            borderRadius="$10"
+            py={0}
+            px="$2"
             gap="$1"
           >
             <Avatar circular size="$3">
@@ -42,7 +44,7 @@ const UserMenuButton = () => {
                 {team ? `${team.icon} ${team.name}` : "Personal"}
               </Text>
             </View>
-            <Icons name="chevron-down" size={16} />
+            <Icons name="chevron-down" size={16} mr="$2" />
           </Button>
         }
       >
@@ -59,6 +61,7 @@ const UserMenuButton = () => {
           title="Logout"
         />
       </MenuButton>
+
       <TeamForm />
     </>
   );

frontend/components/ui/menu-button.tsx

@@ -25,7 +25,7 @@ const MenuButtonFrame = ({
     <Popover size="$1" {...props}>
       <Popover.Trigger asChild={asChild}>{trigger}</Popover.Trigger>
 
-      <Adapt when="sm" platform="touch">
+      {/* <Adapt when="sm" platform="touch">
         <Popover.Sheet modal dismissOnSnapToBottom snapPointsMode="fit">
           <Popover.Sheet.Overlay
             animation="quickest"
@@ -33,11 +33,10 @@ const MenuButtonFrame = ({
             exitStyle={{ opacity: 0 }}
           />
           <Popover.Sheet.Frame padding="$4">
-            {/* <Adapt.Contents /> */}
-            {children}
+            <Adapt.Contents />
           </Popover.Sheet.Frame>
         </Popover.Sheet>
-      </Adapt>
+      </Adapt> */}
 
       <Popover.Content
         bordered
@@ -53,12 +52,8 @@ const MenuButtonFrame = ({
 };
 
 const MenuButtonItem = (props: GetProps<typeof ListItem>) => {
-  if (Platform.OS === "android" || Platform.OS === "ios") {
-    return <ListItem hoverTheme pressTheme {...props} />;
-  }
-
   return (
-    <Popover.Close asChild>
+    <Popover.Close flexDirection="row" asChild>
       <ListItem hoverTheme pressTheme {...props} />
     </Popover.Close>
   );

frontend/components/ui/pager-view.tsx

@@ -1,52 +1,30 @@
-import { useDebounceCallback } from "@/hooks/useDebounce";
-import React, { ComponentPropsWithoutRef, useEffect, useRef } from "react";
+import React, { ComponentPropsWithoutRef, forwardRef } from "react";
 import RNPagerView from "react-native-pager-view";
 
 export type PagerViewProps = ComponentPropsWithoutRef<typeof RNPagerView> & {
-  page?: number;
   onChangePage?: (page: number) => void;
-  EmptyComponent?: () => JSX.Element;
 };
 
-const PagerView = ({
-  page,
-  onChangePage,
-  EmptyComponent,
-  children,
-  ...props
-}: PagerViewProps) => {
-  const ref = useRef<RNPagerView>(null);
-
-  const [onPageSelect, clearPageSelectDebounce] = useDebounceCallback(
-    (page) => onChangePage?.(page),
-    300
-  );
-
-  const [setPage] = useDebounceCallback((page) => {
-    ref.current?.setPage(page);
-    clearPageSelectDebounce();
-  }, 100);
-
-  useEffect(() => {
-    if (page != null) {
-      const npage = EmptyComponent != null ? page + 1 : page;
-      setPage(npage);
-    }
-  }, [page, EmptyComponent]);
-
-  return (
-    <RNPagerView
-      ref={ref}
-      {...props}
-      onPageSelected={(e) => {
-        const pos = e.nativeEvent.position;
-        onPageSelect(EmptyComponent ? pos - 1 : pos);
-      }}
-    >
-      {EmptyComponent ? <EmptyComponent key="-1" /> : null}
-      {children}
-    </RNPagerView>
-  );
+export type PagerViewRef = {
+  setPage: (page: number) => void;
+  setPageWithoutAnimation: (page: number) => void;
 };
 
+const PagerView = forwardRef<PagerViewRef, PagerViewProps>(
+  ({ onChangePage, children, ...props }, ref) => {
+    return (
+      <RNPagerView
+        ref={ref as never}
+        {...props}
+        onPageSelected={(e) => {
+          const pos = e.nativeEvent.position;
+          onChangePage?.(pos);
+        }}
+      >
+        {children}
+      </RNPagerView>
+    );
+  }
+);
+
 export default PagerView;

frontend/components/ui/pager-view.web.tsx

@@ -1,48 +1,40 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from "react";
 import { View } from "react-native";
-import { PagerViewProps } from "./pager-view";
+import { PagerViewProps, PagerViewRef } from "./pager-view";
 
-const PagerView = ({
-  EmptyComponent,
-  children,
-  page,
-  initialPage,
-}: PagerViewProps) => {
-  const [curPage, setPage] = useState<number>(page || initialPage || 0);
+const PagerView = forwardRef<PagerViewRef, PagerViewProps>(
+  ({ children, initialPage }, ref) => {
+    const [curPage, setPage] = useState<number>(initialPage || 0);
 
-  useEffect(() => {
-    if (page != null) {
-      setPage(page);
-    }
-  }, [page]);
+    useImperativeHandle(ref, () => ({
+      setPage,
+      setPageWithoutAnimation: setPage,
+    }));
 
-  const content = useMemo(() => {
-    if (!Array.isArray(children)) {
-      return null;
-    }
+    const content = useMemo(() => {
+      if (!Array.isArray(children)) {
+        return null;
+      }
 
-    return children.map((element, index) => {
-      return (
-        <View
-          key={element.key || index}
-          style={{ display: index === curPage ? "flex" : "none", flex: 1 }}
-        >
-          {element}
-        </View>
-      );
-    });
-  }, [curPage, children]);
+      return children.map((element, index) => {
+        return (
+          <View
+            key={element.key || index}
+            style={{ display: index === curPage ? "flex" : "none", flex: 1 }}
+          >
+            {element}
+          </View>
+        );
+      });
+    }, [curPage, children]);
 
-  const pageElement = useMemo(() => {
-    return Array.isArray(children) ? children[curPage] : null;
-  }, [curPage, children]);
-
-  return (
-    <>
-      {!pageElement && EmptyComponent ? <EmptyComponent key="-1" /> : null}
-      {content}
-    </>
-  );
-};
+    return content;
+  }
+);
 
 export default PagerView;