From 9c75d8b9fc5f3afebe3c6bf17e4c6d50995a4789 Mon Sep 17 00:00:00 2001
From: Whitewater <me@waterwater.moe>
Date: Thu, 3 Apr 2025 21:33:57 +0900
Subject: [PATCH] fix: wrap SubscriptionFeedCategoryContextMenu in a View
 (#3402)

* fix(mobile): wrap SubscriptionFeedCategoryContextMenu in a View

* chore(mobile): add asChild and style props to ContextMenu.Trigger
---
 .../mobile/src/modules/context-menu/feeds.tsx | 12 ++-
 .../modules/subscription/CategoryGrouped.tsx  | 86 ++++++++++---------
 2 files changed, 53 insertions(+), 45 deletions(-)

diff --git a/apps/mobile/src/modules/context-menu/feeds.tsx b/apps/mobile/src/modules/context-menu/feeds.tsx
index 2e2de4b4f..a718ef6f0 100644
--- a/apps/mobile/src/modules/context-menu/feeds.tsx
+++ b/apps/mobile/src/modules/context-menu/feeds.tsx
@@ -1,5 +1,5 @@
 import { FeedViewType } from "@follow/constants"
-import type { FC, PropsWithChildren } from "react"
+import type { CSSProperties, FC, PropsWithChildren } from "react"
 import { useCallback, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import type { ListRenderItemInfo } from "react-native"
@@ -31,7 +31,7 @@ export const SubscriptionFeedItemContextMenu: FC<
   const navigation = useNavigation()
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
+      <ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
 
       <ContextMenu.Content>
         {view === FeedViewType.Articles && (
@@ -199,15 +199,21 @@ export const SubscriptionFeedCategoryContextMenu = ({
   feedIds,
   view: currentView,
   children,
+  asChild,
+  style,
 }: PropsWithChildren<{
   category: string
   feedIds: string[]
   view: FeedViewType
+  asChild?: boolean
+  style?: CSSProperties
 }>) => {
   const { t } = useTranslation()
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger>{children}</ContextMenu.Trigger>
+      <ContextMenu.Trigger asChild={asChild} style={style}>
+        {children}
+      </ContextMenu.Trigger>
 
       <ContextMenu.Content>
         <ContextMenu.Item
diff --git a/apps/mobile/src/modules/subscription/CategoryGrouped.tsx b/apps/mobile/src/modules/subscription/CategoryGrouped.tsx
index 25973429f..f5a7c7a5d 100644
--- a/apps/mobile/src/modules/subscription/CategoryGrouped.tsx
+++ b/apps/mobile/src/modules/subscription/CategoryGrouped.tsx
@@ -1,6 +1,6 @@
 import { cn } from "@follow/utils"
 import { memo, useState } from "react"
-import { Text, TouchableOpacity } from "react-native"
+import { Text, TouchableOpacity, View } from "react-native"
 import Animated, { useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated"
 
 import { GROUPED_LIST_MARGIN } from "@/src/components/ui/grouped/constants"
@@ -54,51 +54,53 @@ export const CategoryGrouped = memo(
 
     return (
       <>
-        <SubscriptionFeedCategoryContextMenu
-          category={category}
-          feedIds={subscriptionIds}
-          view={view}
-        >
-          <ItemPressable
-            itemStyle={ItemPressableStyle.Grouped}
-            onPress={() => {
-              const isHorizontalScrolling = getHorizontalScrolling()
-              if (isHorizontalScrolling) {
-                return
-              }
-              selectFeed({
-                type: "category",
-                categoryName: category,
-              })
-              closeDrawer()
-              navigation.pushControllerView(FeedScreen, {
-                feedId: category,
-              })
-            }}
-            className={cn("h-12 flex-row items-center px-3", {
-              "rounded-t-[10px]": isFirst,
-              "rounded-b-[10px]": isLast,
-            })}
-            style={{ marginHorizontal: GROUPED_LIST_MARGIN }}
+        <View style={{ marginHorizontal: GROUPED_LIST_MARGIN }}>
+          <SubscriptionFeedCategoryContextMenu
+            category={category}
+            feedIds={subscriptionIds}
+            view={view}
+            asChild
           >
-            <TouchableOpacity
-              hitSlop={10}
+            <ItemPressable
+              itemStyle={ItemPressableStyle.Grouped}
               onPress={() => {
-                rotateSharedValue.value = withSpring(expanded ? 0 : 90, {})
-                setExpanded(!expanded)
+                const isHorizontalScrolling = getHorizontalScrolling()
+                if (isHorizontalScrolling) {
+                  return
+                }
+                selectFeed({
+                  type: "category",
+                  categoryName: category,
+                })
+                closeDrawer()
+                navigation.pushControllerView(FeedScreen, {
+                  feedId: category,
+                })
               }}
-              className="size-5 flex-row items-center justify-center"
+              className={cn("h-12 flex-row items-center px-3", {
+                "rounded-t-[10px]": isFirst,
+                "rounded-b-[10px]": isLast,
+              })}
             >
-              <Animated.View style={rotateStyle} className="ml-2">
-                <RightCuteFiIcon color={secondaryLabelColor} height={14} width={14} />
-              </Animated.View>
-            </TouchableOpacity>
-            <Text className="text-text ml-4 font-medium">{category}</Text>
-            {!!unreadCounts && (
-              <Text className="text-secondary-label ml-auto text-xs">{unreadCounts}</Text>
-            )}
-          </ItemPressable>
-        </SubscriptionFeedCategoryContextMenu>
+              <TouchableOpacity
+                hitSlop={10}
+                onPress={() => {
+                  rotateSharedValue.value = withSpring(expanded ? 0 : 90, {})
+                  setExpanded(!expanded)
+                }}
+                className="size-5 flex-row items-center justify-center"
+              >
+                <Animated.View style={rotateStyle} className="ml-2">
+                  <RightCuteFiIcon color={secondaryLabelColor} height={14} width={14} />
+                </Animated.View>
+              </TouchableOpacity>
+              <Text className="text-text ml-4 font-medium">{category}</Text>
+              {!!unreadCounts && (
+                <Text className="text-secondary-label ml-auto text-xs">{unreadCounts}</Text>
+              )}
+            </ItemPressable>
+          </SubscriptionFeedCategoryContextMenu>
+        </View>
 
         {!isLast && <ItemSeparator />}
         {expanded && (