Skip to content

Commit ece2637

Browse files
committed
feat(mobile): actions icons
1 parent f526edf commit ece2637

File tree

11 files changed

+173
-22
lines changed

11 files changed

+173
-22
lines changed

apps/desktop/src/renderer/src/modules/action/target-action-list.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ export const TargetActionList = ({ index }: { index: number }) => {
129129
},
130130
{
131131
title: t("actions.action_card.silence"),
132-
icon: <i className="i-mgc-ghost-cute-re" />,
132+
icon: <i className="i-mgc-volume-mute-cute-re" />,
133133
enabled: !!silence,
134134
onInit: (data) => {
135135
data.result.silence = true

apps/mobile/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,8 @@
137137
"eas-cli": "16.3.1",
138138
"expo-drizzle-studio-plugin": "0.1.2",
139139
"nbump": "2.0.9",
140-
"postcss": "8.5.3"
140+
"postcss": "8.5.3",
141+
"sf-symbols-typescript": "2.1.0"
141142
},
142143
"appName": "Folo",
143144
"expo": {

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

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { cn } from "@follow/utils"
2+
import { SymbolView } from "expo-symbols"
23
import type { FC, PropsWithChildren } from "react"
34
import * as React from "react"
45
import { Fragment } from "react"
56
import type { PressableProps, ViewProps } from "react-native"
67
import { Pressable, StyleSheet, Text, View } from "react-native"
78
import Animated, { FadeIn, FadeOut } from "react-native-reanimated"
9+
import type { SFSymbol } from "sf-symbols-typescript"
810

911
import { CheckFilledIcon } from "@/src/icons/check_filled"
1012
import { MingcuteRightLine } from "@/src/icons/mingcute_right_line"
@@ -195,12 +197,16 @@ export const GroupedInsetListCell: FC<
195197
label: string
196198
description?: string
197199
children?: React.ReactNode
200+
icon?: SFSymbol
198201
} & BaseCellClassNames
199-
> = ({ label, description, children, leftClassName, rightClassName }) => {
202+
> = ({ label, description, children, leftClassName, rightClassName, icon }) => {
200203
return (
201204
<GroupedInsetListBaseCell className="bg-secondary-system-grouped-background flex-1">
202205
<View className={cn("flex-1 gap-1", leftClassName)}>
203-
<Text className="text-label">{label}</Text>
206+
<View className="flex-row items-center gap-2">
207+
{!!icon && <SymbolView name={icon} size={20} tintColor="black" />}
208+
<Text className="text-label">{label}</Text>
209+
</View>
204210
{!!description && (
205211
<Text className="text-secondary-label text-sm leading-tight">{description}</Text>
206212
)}
@@ -271,7 +277,8 @@ export const GroupedInsetListActionCell: FC<{
271277
description?: string
272278
onPress?: () => void
273279
disabled?: boolean
274-
}> = ({ label, description, onPress, disabled }) => {
280+
icon?: SFSymbol
281+
}> = ({ label, description, onPress, disabled, icon }) => {
275282
const rightIconColor = useColor("tertiaryLabel")
276283
return (
277284
<Pressable
@@ -284,7 +291,10 @@ export const GroupedInsetListActionCell: FC<{
284291
className={cn(pressed ? "bg-system-fill" : undefined, disabled && "opacity-40")}
285292
>
286293
<View className="flex-1">
287-
<Text className="text-label">{label}</Text>
294+
<View className="flex-row items-center gap-2">
295+
{!!icon && <SymbolView name={icon} size={20} tintColor="black" />}
296+
<Text className="text-label">{label}</Text>
297+
</View>
288298
{!!description && (
289299
<Text className="text-secondary-label text-sm leading-tight">{description}</Text>
290300
)}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react"
2+
import Svg, { Path } from "react-native-svg"
3+
4+
interface BellRingingCuteReIconProps {
5+
width?: number
6+
height?: number
7+
color?: string
8+
}
9+
10+
export const BellRingingCuteReIcon = ({
11+
width = 24,
12+
height = 24,
13+
color = "#10161F",
14+
}: BellRingingCuteReIconProps) => {
15+
return (
16+
<Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
17+
<Path
18+
d="M17.221 2.082a1.064 1.064 0 0 0-.473.458c-.114.213-.12.657-.011.859.041.077.393.455.781.84.703.699 1.015 1.085 1.372 1.701.089.154.222.373.295.488.548.856 1.886.4 1.805-.615-.017-.209-.058-.315-.25-.659a9.53 9.53 0 0 0-.935-1.394c-.585-.734-1.408-1.515-1.769-1.678-.234-.107-.601-.106-.815 0M5.898 2.12c-.197.098-.781.604-1.15.996A10.507 10.507 0 0 0 3.197 5.27c-.152.292-.172.36-.17.585a.974.974 0 0 0 1.393.89c.256-.122.364-.241.626-.695.415-.718.706-1.085 1.436-1.812.557-.555.72-.742.777-.889.176-.461-.061-1.025-.519-1.234-.223-.102-.63-.1-.842.005m5.306.926a7.548 7.548 0 0 0-4.612 2.269C5.598 6.359 4.907 7.677 4.66 9a7.694 7.694 0 0 1-.087.42c-.012.044-.037.908-.054 1.92-.04 2.402-.054 2.469-.796 3.983-.481.981-.554 1.314-.423 1.937a2.225 2.225 0 0 0 1.457 1.628c.246.081.364.088 1.815.109l1.552.023.091.26c.287.813.844 1.556 1.5 1.998.373.252.939.507 1.347.609.509.126 1.367.126 1.876 0a4.848 4.848 0 0 0 1.347-.609c.656-.442 1.213-1.185 1.5-1.998l.091-.26 1.552-.023c1.451-.021 1.569-.028 1.815-.109A2.225 2.225 0 0 0 20.7 17.26c.133-.632.064-.928-.474-2.049-.704-1.466-.704-1.47-.747-3.871-.025-1.397-.047-1.916-.095-2.157-.191-.972-.488-1.76-.948-2.524a7.516 7.516 0 0 0-7.232-3.613m2.006 2.089a5.367 5.367 0 0 1 2.585 1.403 5.458 5.458 0 0 1 1.629 3.042c.051.279.073.764.096 2.16.029 1.727.035 1.82.134 2.284.144.67.292 1.071.729 1.976.208.429.377.797.377.817 0 .02-.03.07-.066.11-.064.07-.324.073-6.687.073-6.105 0-6.626-.005-6.694-.066-.04-.037-.073-.089-.073-.116 0-.027.17-.397.379-.821.397-.811.607-1.39.746-2.057.074-.354.087-.609.114-2.2.035-1.99.058-2.218.306-2.977.271-.83.728-1.55 1.392-2.196.869-.845 1.853-1.33 3.092-1.526.127-.02.519-.03.871-.021.503.011.732.036 1.07.115m.442 13.989c-.119.205-.516.544-.782.67-.764.36-1.612.233-2.22-.332a2.122 2.122 0 0 1-.302-.338L10.275 19h3.45l-.073.124"
19+
fill={color}
20+
fillRule="evenodd"
21+
/>
22+
</Svg>
23+
)
24+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react"
2+
import Svg, { Path } from "react-native-svg"
3+
4+
interface GhostCuteReIconProps {
5+
width?: number
6+
height?: number
7+
color?: string
8+
}
9+
10+
export const GhostCuteReIcon = ({
11+
width = 24,
12+
height = 24,
13+
color = "#10161F",
14+
}: GhostCuteReIconProps) => {
15+
return (
16+
<Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
17+
<Path
18+
d="M11.34 2.024c-.908.094-1.475.209-2.18.442-2.904.96-5.173 3.414-5.893 6.374-.251 1.033-.242.804-.257 6.105-.015 5.366-.024 5.153.244 5.714.27.566.78 1.022 1.373 1.227.235.081.346.094.793.091.634-.003.738-.036 1.596-.511.78-.431.89-.472 1.324-.496.458-.025.727.031 1.102.232.665.356 1.271.638 1.498.697.781.202 1.737.163 2.412-.098.202-.078.546-.25 1.206-.6.376-.2.645-.256 1.102-.231.434.024.544.065 1.324.496.858.475.962.508 1.596.511.447.003.558-.01.793-.091a2.424 2.424 0 0 0 1.373-1.227c.268-.561.259-.348.244-5.714-.015-5.331-.004-5.085-.27-6.15a8.62 8.62 0 0 0-.659-1.775c-1.271-2.621-3.814-4.477-6.741-4.919-.409-.062-1.658-.11-1.98-.077m1.528 2.038a6.899 6.899 0 0 1 4.073 1.997c1.044 1.043 1.666 2.245 1.97 3.801.054.276.064.973.077 5.095.017 5.314.037 4.908-.255 5.031-.137.057-.152.054-.427-.082a28.73 28.73 0 0 1-.766-.403 5.592 5.592 0 0 0-.74-.343 4.132 4.132 0 0 0-2.611.025c-.315.111-.374.14-.989.48-.514.283-.811.377-1.2.377-.389 0-.686-.094-1.2-.377-.614-.339-.674-.368-.989-.481-.801-.286-1.747-.295-2.611-.025-.143.045-.548.237-.9.428-.867.469-.869.469-1.035.4-.286-.12-.265.263-.265-4.812 0-4.947.004-5.041.22-5.893a7.02 7.02 0 0 1 4.311-4.824c.565-.216 1.086-.334 1.889-.43.315-.037 1.023-.02 1.448.036M8.637 9.055c-.444.095-.864.472-1.034.926-.118.315-.113.763.012 1.066.28.681.929 1.037 1.664.913 1.087-.183 1.578-1.514.883-2.393-.2-.253-.514-.45-.818-.514a1.356 1.356 0 0 0-.707.002m6 0c-.444.095-.864.472-1.034.926-.118.315-.113.763.012 1.066.28.681.929 1.037 1.664.913 1.087-.183 1.578-1.514.883-2.393-.2-.253-.514-.45-.818-.514a1.356 1.356 0 0 0-.707.002"
19+
fill={color}
20+
fillRule="evenodd"
21+
/>
22+
</Svg>
23+
)
24+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react"
2+
import Svg, { Path } from "react-native-svg"
3+
4+
interface QuillPenCuteReIconProps {
5+
width?: number
6+
height?: number
7+
color?: string
8+
}
9+
10+
export const QuillPenCuteReIcon = ({
11+
width = 24,
12+
height = 24,
13+
color = "#10161F",
14+
}: QuillPenCuteReIconProps) => {
15+
return (
16+
<Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
17+
<Path
18+
d="M18.554 2.541c-2.349.408-4.701 1.283-6.571 2.446-2.664 1.657-4.588 4.025-5.845 7.192a20.53 20.53 0 0 0-1.036 3.541c-.212 1.126-.533 3.848-.569 4.822-.028.734-.003.861.219 1.106.219.242.417.33.748.33.329 0 .534-.09.739-.323.189-.216.229-.343.258-.835.051-.85.186-2.082.251-2.295.087-.282.365-.567.665-.679.119-.044.403-.101.632-.126 2.918-.315 5.427-1.239 7.382-2.72 2.002-1.515 3.448-3.778 4.255-6.657.123-.44.19-.605.319-.789.239-.34.579-1.081.686-1.494.08-.311.093-.453.091-1.04-.002-.809-.072-1.146-.36-1.731-.222-.452-.375-.633-.638-.755-.256-.119-.507-.118-1.226.007m.229 2.109c.016.071.028.265.026.43-.006.602-.318 1.29-.749 1.65-.821.688-2.725 1.709-4.225 2.268-.405.151-.582.285-.705.531-.255.511-.077 1.104.405 1.344.303.152.547.155.952.014.511-.177 1.138-.449 1.873-.809.358-.176.66-.312.67-.301.03.029-.483.99-.733 1.373-.847 1.3-1.904 2.275-3.32 3.064-1.084.604-2.659 1.138-4.036 1.37-.457.077-1.794.248-1.814.233-.031-.024.288-1.228.478-1.811 1.012-3.094 2.564-5.323 4.815-6.913 1.538-1.086 3.553-1.948 5.692-2.433.324-.074.6-.135.615-.137.015-.002.04.056.056.127"
19+
fill={color}
20+
fillRule="evenodd"
21+
/>
22+
</Svg>
23+
)
24+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react"
2+
import Svg, { Path } from "react-native-svg"
3+
4+
interface Translate2AiCuteReIconProps {
5+
width?: number
6+
height?: number
7+
color?: string
8+
}
9+
10+
export const Translate2AiCuteReIcon = ({
11+
width = 24,
12+
height = 24,
13+
color = "#10161F",
14+
}: Translate2AiCuteReIconProps) => {
15+
return (
16+
<Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
17+
<Path
18+
d="M18.726 1.046c-.191.055-.423.21-.521.347a3.981 3.981 0 0 0-.258.58c-.219.581-.377.844-.714 1.19a2.854 2.854 0 0 1-1.087.718l-.501.191c-.548.212-.786.857-.515 1.399.13.26.308.385.812.57.573.21.88.392 1.222.726.336.328.555.659.717 1.087l.191.501c.154.396.608.68 1.014.632.258-.031.535-.171.677-.343.062-.076.187-.34.278-.586.21-.573.392-.88.726-1.222a2.86 2.86 0 0 1 1.087-.717l.501-.191c.548-.212.786-.857.515-1.399-.13-.26-.308-.385-.812-.57-.573-.21-.88-.392-1.222-.726a2.86 2.86 0 0 1-.717-1.087l-.191-.501a1.018 1.018 0 0 0-1.202-.599M8.673 3.063c-.244.075-.523.351-.609.603-.047.138-.064.341-.064.761V5H5.947c-2.349 0-2.34-.001-2.641.3a.96.96 0 0 0 0 1.4c.314.314.127.3 4.101.3 3.22 0 3.513.005 3.513.065 0 .149-.218 1.021-.348 1.394-.285.818-.892 1.927-1.409 2.575l-.171.213-.257-.349A9.527 9.527 0 0 1 7.579 8.86c-.186-.442-.317-.615-.553-.733-.552-.275-1.21-.025-1.4.533-.097.284-.082.462.07.852.387.992.953 1.976 1.637 2.842l.263.334-.172.148c-.863.747-2.316 1.621-3.528 2.122-.475.196-.642.323-.773.585a.989.989 0 0 0 .82 1.449c.252.021.632-.121 1.637-.613 1.194-.583 2.298-1.298 3.168-2.051l.248-.214.272.231a17.26 17.26 0 0 0 1.627 1.188c.217.135.402.265.411.288.009.024-.049.222-.129.441-.48 1.319-1.129 3.357-1.164 3.658a.972.972 0 0 0 .285.78.987.987 0 0 0 1.404.001c.158-.159.19-.228.359-.768.102-.326.284-.895.406-1.263l.22-.67h5.626l.22.67c.122.368.304.937.406 1.263.169.54.201.609.359.768a.988.988 0 0 0 1.042.233c.412-.141.704-.612.645-1.042-.053-.387-.884-2.912-1.413-4.292-.731-1.907-1.718-4.047-2.406-5.215-.373-.632-.969-.985-1.666-.985-.701 0-1.291.351-1.673.996-.285.48-1.005 1.917-1.385 2.764a26.31 26.31 0 0 1-.346.756c-.05.056-1.688-1.164-1.666-1.242.006-.02.118-.171.249-.337 1.136-1.429 1.994-3.352 2.206-4.947.047-.353.06-.39.136-.39.047 0 .177-.027.289-.061.378-.112.69-.537.69-.939 0-.237-.12-.514-.303-.697C13.401 5.007 13.35 5 11.553 5H10v-.553c0-.696-.052-.893-.303-1.144-.279-.279-.63-.361-1.024-.24m10.715 1.54.403.404-.182.166c-.224.206-.23.212-.436.436l-.166.182-.396-.396L18.215 5l.383-.394c.21-.216.383-.396.384-.4.001-.003.184.175.406.397m-3.371 7.876c.605 1.197 1.543 3.319 1.543 3.491 0 .017-.918.03-2.04.03-1.122 0-2.04-.006-2.04-.012 0-.007.036-.087.08-.179a.803.803 0 0 0 .08-.269c0-.244 1.112-2.699 1.711-3.775.131-.236.146-.25.197-.181.03.041.241.444.469.895"
19+
fill={color}
20+
fillRule="evenodd"
21+
/>
22+
</Svg>
23+
)
24+
}
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import * as React from "react"
2+
import Svg, { Path } from "react-native-svg"
3+
4+
interface WebhookCuteReIconProps {
5+
width?: number
6+
height?: number
7+
color?: string
8+
}
9+
10+
export const WebhookCuteReIcon = ({
11+
width = 24,
12+
height = 24,
13+
color = "#10161F",
14+
}: WebhookCuteReIconProps) => {
15+
return (
16+
<Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
17+
<Path
18+
d="M11.358 3.061c-1.436.224-2.674 1.281-3.155 2.694C8.103 6.05 8 6.68 8 7c0 .49.129 1.078.362 1.661.046.115.035.14-.291.62a27.709 27.709 0 0 0-1.786 3.002l-.365.703-.45.063a3.625 3.625 0 0 0-1.31.415 3.978 3.978 0 0 0-1.696 1.696 3.63 3.63 0 0 0-.406 1.235 3.416 3.416 0 0 0 0 1.21c.222 1.469 1.266 2.705 2.697 3.192.295.1.925.203 1.245.203.322 0 .951-.103 1.245-.204a4.473 4.473 0 0 0 1.555-.94l.184-.172.698.064c.974.091 3.662.091 4.636 0l.698-.064.184.172a4.1 4.1 0 0 0 2.195 1.086c.484.072.726.072 1.21 0a3.986 3.986 0 0 0 2.931-2.102 3.63 3.63 0 0 0 .406-1.235 3.416 3.416 0 0 0 0-1.21 3.986 3.986 0 0 0-2.102-2.931 3.625 3.625 0 0 0-1.31-.415l-.45-.063-.375-.723a26.71 26.71 0 0 0-1.593-2.703c-.5-.751-.518-.784-.473-.9C15.878 8.047 16 7.489 16 7c0-.32-.103-.95-.203-1.245-.241-.707-.734-1.418-1.287-1.856a4.012 4.012 0 0 0-1.905-.841 3.728 3.728 0 0 0-1.247.003m1.134 1.999c.36.093.626.25.912.536.296.295.448.561.536.933a2.05 2.05 0 0 1-.169 1.408c-.133.263-.575.703-.841.838a2.047 2.047 0 0 1-1.86 0c-.269-.136-.709-.576-.845-.845a2.047 2.047 0 0 1 0-1.86c.137-.27.576-.709.846-.845a2.078 2.078 0 0 1 1.421-.165m-1.773 5.722c.319.112.942.218 1.281.218.339 0 .962-.106 1.281-.218.158-.055.438-.18.622-.278l.333-.177.361.553c.659 1.009 1.537 2.602 1.451 2.631-.076.025-.585.396-.777.566-.406.361-.86 1.075-1.067 1.679a4.216 4.216 0 0 0-.14 1.911c.022.079.004.089-.21.12-.304.043-3.404.043-3.708 0-.214-.031-.232-.041-.21-.12a4.216 4.216 0 0 0-.14-1.911c-.207-.604-.661-1.318-1.067-1.679-.192-.17-.701-.541-.777-.566-.096-.032.731-1.519 1.535-2.758l.277-.426.333.177c.184.098.464.223.622.278M6.492 15.06c.36.093.626.25.912.536.296.295.448.561.536.933a2.05 2.05 0 0 1-.169 1.408c-.133.263-.575.703-.841.838a2.047 2.047 0 0 1-1.86 0c-.269-.136-.709-.576-.845-.845a2.047 2.047 0 0 1 0-1.86c.137-.27.576-.709.846-.845a2.078 2.078 0 0 1 1.421-.165m12 0c.36.093.626.25.912.536.296.295.448.561.536.933.166.707-.02 1.36-.536 1.875-.403.403-.858.596-1.404.596-.546 0-1.001-.193-1.404-.596C16.193 18.001 16 17.546 16 17c0-.546.193-1.001.596-1.404.404-.405.833-.588 1.386-.593a2.32 2.32 0 0 1 .51.057"
19+
fill={color}
20+
fillRule="evenodd"
21+
/>
22+
</Svg>
23+
)
24+
}

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import type { ParseKeys } from "i18next"
2+
import type { SFSymbol } from "sf-symbols-typescript"
23

34
import type { SupportedLanguages } from "@/src/lib/language"
45
import type { Navigation } from "@/src/lib/navigation/Navigation"
56
import { actionActions } from "@/src/store/action/store"
6-
import type { ActionId, ActionRule } from "@/src/store/action/types"
7+
import type { ActionId } from "@/src/store/action/types"
78

89
import { EditRewriteRulesScreen } from "../routes/EditRewriteRules"
910
import { EditWebhooksScreen } from "../routes/EditWebhooks"
@@ -104,39 +105,47 @@ export const availableActionList: Array<{
104105
label: Extract<ParseKeys<"settings">, `actions.action_card.${string}`>
105106
onEnable?: (index: number) => void
106107
onNavigate?: (router: Navigation, index: number) => void
107-
component?: React.FC<{ rule: ActionRule }>
108+
icon: SFSymbol
108109
}> = [
109110
{
110111
value: "summary",
111112
label: "actions.action_card.generate_summary",
113+
icon: "sparkles",
112114
},
113115
{
114116
value: "translation",
115117
label: "actions.action_card.translate_into",
118+
icon: "translate",
116119
},
117120
{
118121
value: "readability",
119122
label: "actions.action_card.enable_readability",
123+
icon: "text.document",
120124
},
121125
{
122126
value: "sourceContent",
123127
label: "actions.action_card.source_content",
128+
icon: "macwindow",
124129
},
125130
{
126131
value: "newEntryNotification",
127132
label: "actions.action_card.new_entry_notification",
133+
icon: "bell.and.waves.left.and.right",
128134
},
129135
{
130136
value: "silence",
131137
label: "actions.action_card.silence",
138+
icon: "speaker.slash",
132139
},
133140
{
134141
value: "block",
135142
label: "actions.action_card.block",
143+
icon: "xmark.circle",
136144
},
137145
{
138146
value: "rewriteRules",
139147
label: "actions.action_card.rewrite_rules",
148+
icon: "pencil.and.outline",
140149
onEnable: (index: number) => {
141150
actionActions.patchRule(index, {
142151
result: {
@@ -156,6 +165,7 @@ export const availableActionList: Array<{
156165
{
157166
value: "webhooks",
158167
label: "actions.action_card.webhooks",
168+
icon: "arrow.up.right.square",
159169
onEnable: (index) => {
160170
actionActions.patchRule(index, { result: { webhooks: [""] } })
161171
},

apps/mobile/src/modules/settings/routes/EditRule.tsx

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -255,20 +255,22 @@ const ActionSection: React.FC<{ rule: ActionRule }> = ({ rule }) => {
255255
},
256256
]}
257257
>
258-
{action.component ? (
259-
<action.component rule={rule} />
260-
) : action.onNavigate ? (
261-
<GroupedInsetListActionCell
262-
label={t(action.label)}
263-
onPress={() => action.onNavigate?.(navigation, rule.index)}
264-
/>
265-
) : (
266-
<GroupedInsetListCell
267-
label={t(action.label)}
268-
leftClassName="flex-none"
269-
rightClassName="flex-1 flex-row justify-end"
270-
/>
271-
)}
258+
<View className="flex-row items-center gap-2">
259+
{action.onNavigate ? (
260+
<GroupedInsetListActionCell
261+
label={t(action.label)}
262+
icon={action.icon}
263+
onPress={() => action.onNavigate?.(navigation, rule.index)}
264+
/>
265+
) : (
266+
<GroupedInsetListCell
267+
label={t(action.label)}
268+
icon={action.icon}
269+
leftClassName="flex-none"
270+
rightClassName="flex-1 flex-row justify-end"
271+
/>
272+
)}
273+
</View>
272274
</SwipeableItem>
273275
))}
274276
{notEnabledActions.length > 0 && (
@@ -288,6 +290,11 @@ const ActionSection: React.FC<{ rule: ActionRule }> = ({ rule }) => {
288290
}
289291
}}
290292
>
293+
<DropdownMenu.ItemIcon
294+
ios={{
295+
name: action.icon,
296+
}}
297+
/>
291298
<DropdownMenu.ItemTitle>{t(action.label)}</DropdownMenu.ItemTitle>
292299
</DropdownMenu.Item>
293300
))}

0 commit comments

Comments
 (0)