feat(mobile): action page (#3019)

Author: hyoban

apps/mobile/src/components/layouts/header/NavigationHeader.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@follow/utils"
 import { getDefaultHeaderHeight, HeaderTitle } from "@react-navigation/elements"
 import { router, useNavigation } from "expo-router"
 import type { FC, PropsWithChildren, ReactNode } from "react"
@@ -295,12 +296,21 @@ export const DefaultHeaderBackButton = ({ canGoBack }: { canGoBack: boolean }) =
 export const UINavigationHeaderActionButton = ({
   children,
   onPress,
+  disabled,
+  className,
 }: {
   children: ReactNode
   onPress?: () => void
+  disabled?: boolean
+  className?: string
 }) => {
   return (
-    <TouchableOpacity hitSlop={5} className="p-2" onPress={onPress}>
+    <TouchableOpacity
+      hitSlop={5}
+      className={cn("p-2", className)}
+      onPress={onPress}
+      disabled={disabled}
+    >
       {children}
     </TouchableOpacity>
   )

apps/mobile/src/components/ui/grouped/GroupedList.tsx

@@ -6,8 +6,9 @@ import type { PressableProps, ViewProps } from "react-native"
 import { Pressable, StyleSheet, Text, View } from "react-native"
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated"
 
+import { CheckFilledIcon } from "@/src/icons/check_filled"
 import { MingcuteRightLine } from "@/src/icons/mingcute_right_line"
-import { useColor } from "@/src/theme/colors"
+import { accentColor, useColor } from "@/src/theme/colors"
 
 export enum GroupedInsetListCardItemStyle {
   NavigationLink = "NavigationLink",
@@ -150,7 +151,7 @@ export const GroupedInsetListCell: FC<
   } & BaseCellClassNames
 > = ({ label, description, children, leftClassName, rightClassName }) => {
   return (
-    <GroupedInsetListBaseCell className="flex-1">
+    <GroupedInsetListBaseCell className="bg-secondary-system-grouped-background flex-1">
       <View className={cn("flex-1", leftClassName)}>
         <Text className="text-label">{label}</Text>
         {!!description && (
@@ -163,15 +164,48 @@ export const GroupedInsetListCell: FC<
   )
 }
 
+export const GroupedInsetListActionCellRadio: FC<{
+  label: string
+  description?: string
+  onPress?: () => void
+  disabled?: boolean
+  selected?: boolean
+}> = ({ label, description, onPress, disabled, selected }) => {
+  return (
+    <Pressable onPress={onPress} disabled={disabled}>
+      {({ pressed }) => (
+        <GroupedInsetListBaseCell
+          className={cn(pressed ? "bg-system-fill" : undefined, disabled && "opacity-40")}
+        >
+          <View className="flex-1">
+            <Text className="text-label">{label}</Text>
+            {!!description && (
+              <Text className="text-secondary-label text-sm leading-tight">{description}</Text>
+            )}
+          </View>
+
+          <View className="ml-4 size-[18px]">
+            {selected && <CheckFilledIcon height={18} width={18} color={accentColor} />}
+          </View>
+        </GroupedInsetListBaseCell>
+      )}
+    </Pressable>
+  )
+}
+
 export const GroupedInsetListActionCell: FC<{
   label: string
   description?: string
-  onPress: () => void
+  onPress?: () => void
   disabled?: boolean
 }> = ({ label, description, onPress, disabled }) => {
   const rightIconColor = useColor("tertiaryLabel")
   return (
-    <Pressable onPress={onPress} disabled={disabled}>
+    <Pressable
+      onPress={onPress}
+      disabled={disabled}
+      className="bg-secondary-system-grouped-background"
+    >
       {({ pressed }) => (
         <GroupedInsetListBaseCell
           className={cn(pressed ? "bg-system-fill" : undefined, disabled && "opacity-40")}
@@ -194,7 +228,7 @@ export const GroupedInsetListActionCell: FC<{
 
 export const GroupedInsetButtonCell: FC<{
   label: string
-  onPress: () => void
+  onPress?: () => void
   disabled?: boolean
   style?: "destructive" | "primary"
 }> = ({ label, onPress, disabled, style = "primary" }) => {

apps/mobile/src/modules/settings/SettingsList.tsx

@@ -97,7 +97,6 @@ const DataGroupNavigationLinks: GroupNavigationLink[] = [
       navigation.navigate("Actions")
     },
     iconBackgroundColor: "#059669",
-    todo: true,
     anonymous: false,
   },
 

apps/mobile/src/modules/settings/actions/components.tsx

@@ -0,0 +1,40 @@
+import { Text } from "react-native"
+import * as DropdownMenu from "zeego/dropdown-menu"
+
+import { GroupedInsetListCell } from "@/src/components/ui/grouped/GroupedList"
+import { actionActions } from "@/src/store/action/store"
+import type { ActionRule } from "@/src/store/action/types"
+
+import { translationOptions } from "./constant"
+
+export const ActionFormTranslation: React.FC<{ rule: ActionRule }> = ({ rule }) => {
+  const currentTranslation = translationOptions.find(
+    (translation) => translation.value === rule.result?.translation,
+  )
+  return (
+    <GroupedInsetListCell
+      label="Translate into"
+      leftClassName="flex-none"
+      rightClassName="flex-1 flex-row items-center gap-4 justify-end"
+    >
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <Text className="text-label">{currentTranslation?.label || "Select"}</Text>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          {translationOptions.map((translation) => (
+            <DropdownMenu.CheckboxItem
+              value={translation.value === currentTranslation?.value}
+              key={translation.value}
+              onSelect={() => {
+                actionActions.patchRule(rule.index, { result: { translation: translation.value } })
+              }}
+            >
+              <DropdownMenu.ItemTitle>{translation.label}</DropdownMenu.ItemTitle>
+            </DropdownMenu.CheckboxItem>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </GroupedInsetListCell>
+  )
+}

apps/mobile/src/modules/settings/actions/constant.ts

@@ -0,0 +1,181 @@
+import type { SupportedLanguages } from "@/src/lib/language"
+import { actionActions } from "@/src/store/action/store"
+import type { ActionId, ActionRule } from "@/src/store/action/types"
+
+import type { SettingsNavigation } from "../hooks"
+import { ActionFormTranslation } from "./components"
+
+export const filterFieldOptions = [
+  {
+    label: "Subscription View",
+    value: "view",
+    type: "view",
+  },
+  {
+    label: "Feed Title",
+    value: "title",
+  },
+  {
+    label: "Feed Category",
+    value: "category",
+  },
+  {
+    label: "Site URL",
+    value: "site_url",
+  },
+  {
+    label: "Feed URL",
+    value: "feed_url",
+  },
+  {
+    label: "Entry Title",
+    value: "entry_title",
+  },
+  {
+    label: "Entry Content",
+    value: "entry_content",
+  },
+  {
+    label: "Entry URL",
+    value: "entry_url",
+  },
+  {
+    label: "Entry Author",
+    value: "entry_author",
+  },
+  {
+    label: "Entry Media Length",
+    value: "entry_media_length",
+    type: "number",
+  },
+]
+
+export const filterOperatorOptions = [
+  {
+    label: "contains",
+    value: "contains",
+    types: ["text"],
+  },
+  {
+    label: "does not contain",
+    value: "not_contains",
+    types: ["text"],
+  },
+  {
+    label: "is equal to",
+    value: "eq",
+    types: ["number", "text", "view"],
+  },
+  {
+    label: "is not equal to",
+    value: "not_eq",
+    types: ["number", "text", "view"],
+  },
+  {
+    label: "is greater than",
+    value: "gt",
+    types: ["number"],
+  },
+  {
+    label: "is less than",
+    value: "lt",
+    types: ["number"],
+  },
+  {
+    label: "matches regex",
+    value: "regex",
+    types: ["text"],
+  },
+]
+
+export const availableActionList: Array<{
+  value: ActionId
+  label: string
+  onEnable?: (index: number) => void
+  onNavigate?: (router: SettingsNavigation, index: number) => void
+  component?: React.FC<{ rule: ActionRule }>
+}> = [
+  {
+    value: "summary",
+    label: "Generate summary using AI",
+  },
+  {
+    value: "translation",
+    label: "Translate into",
+    onEnable: (index) => {
+      actionActions.patchRule(index, { result: { translation: "zh-CN" } })
+    },
+    component: ActionFormTranslation,
+  },
+  {
+    value: "readability",
+    label: "Enable readability",
+  },
+  {
+    value: "sourceContent",
+    label: "View source content",
+  },
+  {
+    value: "newEntryNotification",
+    label: "Notification of new entry",
+  },
+  {
+    value: "silence",
+    label: "Silence",
+  },
+  {
+    value: "block",
+    label: "Block",
+  },
+  {
+    value: "rewriteRules",
+    label: "Rewrite Rules",
+    onEnable: (index: number) => {
+      actionActions.patchRule(index, {
+        result: {
+          rewriteRules: [
+            {
+              from: "",
+              to: "",
+            },
+          ],
+        },
+      })
+    },
+    onNavigate: (router, index) => {
+      router.navigate("EditRewriteRules", { index })
+    },
+  },
+  {
+    value: "webhooks",
+    label: "Webhooks",
+    onEnable: (index) => {
+      actionActions.patchRule(index, { result: { webhooks: [""] } })
+    },
+    onNavigate: (router, index) => {
+      router.navigate("EditWebhooks", { index })
+    },
+  },
+]
+
+export const translationOptions: {
+  label: string
+  value: SupportedLanguages
+}[] = [
+  {
+    label: "English",
+    value: "en",
+  },
+  {
+    label: "日本語",
+    value: "ja",
+  },
+  {
+    label: "简体中文",
+    value: "zh-CN",
+  },
+  {
+    label: "繁體中文",
+    value: "zh-TW",
+  },
+]

apps/mobile/src/modules/settings/hooks.ts

@@ -6,3 +6,5 @@ import type { SettingsStackParamList } from "./types"
 export const useSettingsNavigation = () => {
   return useNavigation<NativeStackNavigationProp<SettingsStackParamList>>()
 }
+
+export type SettingsNavigation = ReturnType<typeof useSettingsNavigation>