feat(mobile): discover language settings

apps/mobile/src/modules/discover/Category.tsx

@@ -11,9 +11,12 @@ import { FilterCuteReIcon } from "@/src/icons/filter_cute_re"
 import { Grid2CuteReIcon } from "@/src/icons/grid_2_cute_re"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { Recommendations } from "@/src/modules/discover/Recommendations"
+import { DiscoverSettingsScreen } from "@/src/screens/(modal)/DiscoverSettingsScreen"
 import { RecommendationCategoryScreen } from "@/src/screens/(stack)/recommendation/RecommendationCategoryScreen"
 
 export const Category = () => {
+  const navigation = useNavigation()
+
   return (
     <>
       <View className="mt-4 flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
@@ -21,7 +24,12 @@ export const Category = () => {
           <Grid2CuteReIcon width={24} height={24} />
           <Text className="text-label text-2xl font-bold leading-[1.1]">Categories</Text>
         </View>
-        <ItemPressable className="rounded-lg p-1">
+        <ItemPressable
+          className="rounded-lg p-1"
+          onPress={() => {
+            navigation.presentControllerView(DiscoverSettingsScreen)
+          }}
+        >
           <FilterCuteReIcon width={20} height={20} />
         </ItemPressable>
       </View>

apps/mobile/src/modules/discover/Trending.tsx

@@ -8,6 +8,8 @@ import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { FilterCuteReIcon } from "@/src/icons/filter_cute_re"
 import { TrendingUpCuteReIcon } from "@/src/icons/trending_up_cute_re"
+import { useNavigation } from "@/src/lib/navigation/hooks"
+import { DiscoverSettingsScreen } from "@/src/screens/(modal)/DiscoverSettingsScreen"
 
 import { fetchFeedTrending } from "./api"
 import { FeedSummary } from "./FeedSummary"
@@ -21,13 +23,14 @@ export const Trending = ({
 }) => {
   const discoverLanguage = useUISettingKey("discoverLanguage")
   const { data, isLoading } = useQuery({
-    queryKey: ["trending", "feeds"],
+    queryKey: ["trending", "feeds", discoverLanguage],
     queryFn: () =>
       fetchFeedTrending({
         lang: discoverLanguage === "all" ? undefined : discoverLanguage,
         limit: 20,
       }).then((res) => res.data),
   })
+  const navigation = useNavigation()
 
   return (
     <View className={className}>
@@ -36,7 +39,13 @@ export const Trending = ({
           <TrendingUpCuteReIcon width={24} height={24} />
           <Text className="text-label text-2xl font-bold leading-[1.1]">Trending</Text>
         </View>
-        <ItemPressable className="rounded-lg p-1" itemStyle={ItemPressableStyle.UnStyled}>
+        <ItemPressable
+          className="rounded-lg p-1"
+          itemStyle={ItemPressableStyle.UnStyled}
+          onPress={() => {
+            navigation.presentControllerView(DiscoverSettingsScreen)
+          }}
+        >
           <FilterCuteReIcon width={20} height={20} />
         </ItemPressable>
       </View>

apps/mobile/src/screens/(modal)/DiscoverSettingsScreen.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next"
+import { View } from "react-native"
+
+import { setUISetting, useUISettingKey } from "@/src/atoms/settings/ui"
+import {
+  NavigationBlurEffectHeaderView,
+  SafeNavigationScrollView,
+} from "@/src/components/layouts/views/SafeNavigationScrollView"
+import { Select } from "@/src/components/ui/form/Select"
+import {
+  GroupedInsetListCard,
+  GroupedInsetListCell,
+  GroupedInsetListSectionHeader,
+} from "@/src/components/ui/grouped/GroupedList"
+
+export const DiscoverSettingsScreen = () => {
+  const { t } = useTranslation("settings")
+  const discoverLanguage = useUISettingKey("discoverLanguage")
+
+  return (
+    <SafeNavigationScrollView
+      className="bg-system-grouped-background"
+      Header={<NavigationBlurEffectHeaderView title={t("discoverFilters.title")} />}
+    >
+      <GroupedInsetListSectionHeader label={t("discoverFilters.filters")} marginSize="small" />
+      <GroupedInsetListCard>
+        <GroupedInsetListCell label={t("discoverFilters.language")}>
+          <View className="w-[100px]">
+            <Select
+              options={[
+                { label: "All", value: "all" },
+                { label: "English", value: "eng" },
+                { label: "中文", value: "cmn" },
+              ]}
+              value={discoverLanguage}
+              onValueChange={(val) => {
+                setUISetting("discoverLanguage", val as "all" | "eng" | "cmn")
+              }}
+            />
+          </View>
+        </GroupedInsetListCell>
+      </GroupedInsetListCard>
+    </SafeNavigationScrollView>
+  )
+}

locales/settings/en.json

@@ -140,6 +140,9 @@
   "data_control.export_local_database.label": "Export local database",
   "data_control.import_opml.label": "Import subscriptions from OPML",
   "data_control.utils": "Utils",
+  "discoverFilters.filters": "Filters",
+  "discoverFilters.language": "Language",
+  "discoverFilters.title": "Discover Filters",
   "feeds.claimTips": "To claim your feeds and receive tips, right-click on the feed in your subscription list and select Claim.",
   "feeds.noFeeds": "No claimed feeds",
   "feeds.tableHeaders.name": "Name",