feat(mobile): simplify entry header

apps/mobile/src/modules/entry-content/EntryContentHeaderRightActions.tsx

@@ -40,6 +40,7 @@ type ActionItem = {
   active?: boolean
   iconColor?: string
   isCheckbox?: boolean
+  inMenu?: boolean
 }
 
 export function EntryContentHeaderRightActions(props: HeaderRightActionsProps) {
@@ -170,6 +171,7 @@ const HeaderRightActionsImpl = ({
       onPress: toggleReadability,
       active: showReadability,
       isCheckbox: true,
+      inMenu: true,
     },
     !showAISummarySetting && {
       key: "GenerateSummary",
@@ -179,6 +181,7 @@ const HeaderRightActionsImpl = ({
       onPress: toggleAISummary,
       active: showAISummary,
       isCheckbox: true,
+      inMenu: true,
     },
     !showAITranslationSetting && {
       key: "ShowTranslation",
@@ -188,6 +191,7 @@ const HeaderRightActionsImpl = ({
       onPress: toggleAITranslation,
       active: showTranslation,
       isCheckbox: true,
+      inMenu: true,
     },
     {
       key: "Share",
@@ -196,6 +200,20 @@ const HeaderRightActionsImpl = ({
       iconIOS: { name: "square.and.arrow.up" },
       onPress: handleShare,
     },
+    {
+      key: "CopyLink",
+      title: t("operation.copy_link"),
+      iconIOS: { name: "link" },
+      onPress: handleCopyLink,
+      inMenu: true,
+    },
+    {
+      key: "OpenInBrowser",
+      title: "Open in Browser",
+      iconIOS: { name: "safari" },
+      onPress: handleOpenInBrowser,
+      inMenu: true,
+    },
   ].filter(Boolean) as ActionItem[]
 
   return (
@@ -211,20 +229,22 @@ const HeaderRightActionsImpl = ({
         }))}
         className="absolute right-[32px] z-10 flex-row gap-2"
       >
-        {actionItems.map(
-          (item) =>
-            item && (
-              <ActionBarItem
-                key={item.key}
-                onPress={item.onPress}
-                label={item.title}
-                active={item.active}
-                iconColor={item.iconColor}
-              >
-                {item.icon}
-              </ActionBarItem>
-            ),
-        )}
+        {actionItems
+          .filter((item) => !item.inMenu)
+          .map(
+            (item) =>
+              item && (
+                <ActionBarItem
+                  key={item.key}
+                  onPress={item.onPress}
+                  label={item.title}
+                  active={item.active}
+                  iconColor={item.iconColor}
+                >
+                  {item.icon}
+                </ActionBarItem>
+              ),
+          )}
       </Animated.View>
 
       <DropdownMenu.Root>
@@ -258,14 +278,27 @@ const HeaderRightActionsImpl = ({
               )}
             </DropdownMenu.Group>
           )}
-          <DropdownMenu.Item key="CopyLink" onSelect={handleCopyLink}>
-            <DropdownMenu.ItemTitle>{t("operation.copy_link")}</DropdownMenu.ItemTitle>
-            <DropdownMenu.ItemIcon ios={{ name: "link" }} />
-          </DropdownMenu.Item>
-          <DropdownMenu.Item key="OpenInBrowser" onSelect={handleOpenInBrowser}>
-            <DropdownMenu.ItemTitle>Open in Browser</DropdownMenu.ItemTitle>
-            <DropdownMenu.ItemIcon ios={{ name: "safari" }} />
-          </DropdownMenu.Item>
+          {actionItems
+            .filter((item) => item?.inMenu)
+            .map(
+              (item) =>
+                item &&
+                (item.isCheckbox ? (
+                  <DropdownMenu.CheckboxItem
+                    key={item.key}
+                    value={item.active!}
+                    onSelect={item.onPress}
+                  >
+                    <DropdownMenu.ItemTitle>{item.title}</DropdownMenu.ItemTitle>
+                    <DropdownMenu.ItemIcon ios={item.iconIOS} />
+                  </DropdownMenu.CheckboxItem>
+                ) : (
+                  <DropdownMenu.Item key={item.key} onSelect={item.onPress}>
+                    <DropdownMenu.ItemTitle>{item.title}</DropdownMenu.ItemTitle>
+                    <DropdownMenu.ItemIcon ios={item.iconIOS} />
+                  </DropdownMenu.Item>
+                )),
+            )}
         </DropdownMenu.Content>
       </DropdownMenu.Root>
     </View>