feat: update ui for android

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;