fix(mobile): improve i18n for subscription form

hyoban · hyoban · commit 9d1c1a6bd394 · 2025-05-08T11:55:41.000+08:00
diff --git a/apps/mobile/src/components/ui/form/Switch.tsx b/apps/mobile/src/components/ui/form/Switch.tsx
@@ -31,7 +31,7 @@ export const FormSwitch = ({
   }
   return (
     <View className={"w-full flex-row"}>
-      <View className="flex-1">
+      <View className="flex-1 gap-1">
         <FormLabel className="pl-1" label={label} optional />
         {!!description && (
           <Text className="text-secondary-label mb-1 pl-1 text-sm">{description}</Text>
diff --git a/apps/mobile/src/components/ui/form/TextField.tsx b/apps/mobile/src/components/ui/form/TextField.tsx
@@ -34,7 +34,7 @@ const BaseField = ({
   ...rest
 }: TextInputProps & BaseFieldProps & { ref?: React.Ref<TextInput | null> }) => {
   return (
-    <View className="w-full flex-1">
+    <View className="w-full flex-1 gap-1">
       {!!label && <FormLabel className="pl-2.5" label={label} optional={!required} />}
       {!!description && (
         <Text className="text-secondary-label mb-1 pl-2.5 text-sm">{description}</Text>
diff --git a/apps/mobile/src/modules/feed/FollowFeed.tsx b/apps/mobile/src/modules/feed/FollowFeed.tsx
@@ -2,6 +2,7 @@ import { FeedViewType } from "@follow/constants"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useEffect, useState } from "react"
 import { Controller, useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import { Text, View } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { z } from "zod"
@@ -70,6 +71,8 @@ export function FollowUrl(props: { url: string }) {
 }
 
 function FollowImpl(props: { feedId: string }) {
+  const { t } = useTranslation()
+  const { t: tCommon } = useTranslation("common")
   const { feedId: id } = props
 
   const feed = useFeed(id)
@@ -147,13 +150,13 @@ function FollowImpl(props: { feedId: string }) {
       contentContainerStyle={{ paddingBottom: insets.bottom }}
       Header={
         <NavigationBlurEffectHeaderView
-          title={`${isSubscribed ? "Edit" : "Follow"} - ${feed?.title}`}
+          title={`${isSubscribed ? tCommon("words.edit") : tCommon("words.follow")} - ${feed?.title}`}
           headerRight={
             <HeaderSubmitTextButton
               isValid={isValid}
               onPress={form.handleSubmit(submit)}
               isLoading={isLoading}
-              label={isSubscribed ? "Save" : "Follow"}
+              label={isSubscribed ? tCommon("words.save") : tCommon("words.follow")}
             />
           }
         />
@@ -174,56 +177,58 @@ function FollowImpl(props: { feedId: string }) {
       {/* Group 2 */}
       <GroupedInsetListCard className="gap-y-4 p-4">
         <FormProvider form={form}>
-          <View>
+          <View className="-mx-2.5">
             <Controller
               name="title"
               control={form.control}
               render={({ field: { onChange, ref, value } }) => (
                 <TextField
-                  label="Title"
-                  description="Custom title for this Feed. Leave empty to use the default."
+                  label={t("subscription_form.title")}
+                  description={t("subscription_form.title_description")}
                   onChangeText={onChange}
                   value={value}
                   ref={ref}
+                  wrapperClassName="ml-2.5"
                 />
               )}
             />
           </View>
 
-          <View>
+          <View className="-mx-2.5">
             <Controller
               name="category"
               control={form.control}
               render={({ field: { onChange, ref, value } }) => (
                 <TextField
-                  label="Category"
-                  description="By default, your follows will be grouped by website."
+                  label={t("subscription_form.category")}
+                  description={t("subscription_form.category_description")}
                   onChangeText={onChange}
                   value={value || ""}
                   ref={ref}
+                  wrapperClassName="ml-2.5"
                 />
               )}
             />
           </View>
 
-          <View>
+          <View className="-mx-1">
             <Controller
               name="isPrivate"
               control={form.control}
               render={({ field: { onChange, value } }) => (
                 <FormSwitch
                   size="sm"
                   value={value}
-                  label="Private"
-                  description="Private feeds are only visible to you."
+                  label={t("subscription_form.private_follow")}
+                  description={t("subscription_form.private_follow_description")}
                   onValueChange={onChange}
                 />
               )}
             />
           </View>
 
           <View className="-mx-4">
-            <FormLabel className="mb-4 pl-5" label="View" optional />
+            <FormLabel className="mb-4 pl-4" label={t("subscription_form.view")} optional />
 
             <Controller
               name="view"
diff --git a/apps/mobile/src/modules/list/FollowList.tsx b/apps/mobile/src/modules/list/FollowList.tsx
@@ -3,6 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { useQuery } from "@tanstack/react-query"
 import { useEffect } from "react"
 import { Controller, useForm } from "react-hook-form"
+import { useTranslation } from "react-i18next"
 import { Alert, StyleSheet, Text, View } from "react-native"
 import { z } from "zod"
 
@@ -57,6 +58,8 @@ const formSchema = z.object({
 })
 
 const Impl = (props: { id: string }) => {
+  const { t } = useTranslation()
+  const { t: tCommon } = useTranslation("common")
   const { id } = props
   const list = useList(id)
 
@@ -146,13 +149,13 @@ const Impl = (props: { id: string }) => {
       contentViewClassName="gap-y-4 mt-2"
       Header={
         <NavigationBlurEffectHeaderView
-          title={`${isSubscribed ? "Edit" : "Follow"} - ${list?.title}`}
+          title={`${isSubscribed ? tCommon("words.edit") : tCommon("words.follow")} - ${list?.title}`}
           headerRight={
             <HeaderSubmitTextButton
               isValid={isValid}
               onPress={form.handleSubmit(submit)}
               isLoading={isLoading}
-              label={isSubscribed ? "Save" : "Follow"}
+              label={isSubscribed ? tCommon("words.save") : tCommon("words.follow")}
             />
           }
         />
@@ -179,36 +182,37 @@ const Impl = (props: { id: string }) => {
       <GroupedInsetListCard className="gap-y-6 px-5 py-4">
         <FormProvider form={form}>
           <View className="-mx-4">
-            <FormLabel className="mb-4 pl-5" label="View" optional />
+            <FormLabel className="mb-4 pl-4" label={t("subscription_form.view")} optional />
 
             <FeedViewSelector readOnly value={list.view} />
           </View>
 
-          <View>
+          <View className="-mx-2.5">
             <Controller
               name="title"
               control={form.control}
               render={({ field: { onChange, ref, value } }) => (
                 <TextField
-                  label="Title"
-                  description="Custom title for this Feed. Leave empty to use the default."
+                  label={t("subscription_form.title")}
+                  description={t("subscription_form.title_description")}
                   onChangeText={onChange}
                   value={value}
                   ref={ref}
+                  wrapperClassName="ml-2.5"
                 />
               )}
             />
           </View>
 
-          <View>
+          <View className="-mx-1">
             <Controller
               name="isPrivate"
               control={form.control}
               render={({ field: { onChange, value } }) => (
                 <FormSwitch
                   value={value}
-                  label="Private"
-                  description="Private feeds are only visible to you."
+                  label={t("subscription_form.private_follow")}
+                  description={t("subscription_form.private_follow_description")}
                   onValueChange={onChange}
                   size="sm"
                 />
diff --git a/apps/mobile/src/modules/screen/atoms.ts b/apps/mobile/src/modules/screen/atoms.ts
@@ -145,7 +145,7 @@ export const useSelectedFeedTitle = () => {
       return viewDef?.name ? t(viewDef.name) : ""
     }
     case "feed": {
-      return selectedFeed.feedId === FEED_COLLECTION_LIST ? "Collections" : (feed?.title ?? "")
+      return selectedFeed.feedId === FEED_COLLECTION_LIST ? t("words.starred") : (feed?.title ?? "")
     }
     case "category": {
       return selectedFeed.categoryName
diff --git a/locales/mobile/default/en.json b/locales/mobile/default/en.json
@@ -50,6 +50,13 @@
   "operation.unstar": "Unstar",
   "profile.title": "{{name}}'s Profile",
   "profile.uncategorized_feeds": "Uncategorized feeds",
+  "subscription_form.category": "Category",
+  "subscription_form.category_description": "By default, your follows will be grouped by website.",
+  "subscription_form.private_follow": "Private Follow",
+  "subscription_form.private_follow_description": "Whether this follow is publicly visible on your profile page.",
+  "subscription_form.title": "Title",
+  "subscription_form.title_description": "Custom title for this Feed. Leave empty to use the default.",
+  "subscription_form.view": "View",
   "tabs.discover": "Discover",
   "tabs.home": "Home",
   "tabs.settings": "Settings",
diff --git a/locales/mobile/default/ja.json b/locales/mobile/default/ja.json
@@ -36,6 +36,13 @@
   "operation.unfollow": "フォロー解除",
   "profile.title": "{{name}}のプロフィール",
   "profile.uncategorized_feeds": "未分類のフィード",
+  "subscription_form.category": "カテゴリー",
+  "subscription_form.category_description": "デフォルトでは、フォローはウェブサイトごとにグループ化されます。",
+  "subscription_form.private_follow": "プライベートフォロー",
+  "subscription_form.private_follow_description": "このフォローがあなたのプロフィールページに公開されるかどうか。",
+  "subscription_form.title": "タイトル",
+  "subscription_form.title_description": "このフィードのカスタムタイトル。デフォルトを使用するには空白のままにしてください。",
+  "subscription_form.view": "表示",
   "tabs.discover": "発見",
   "tabs.home": "ホーム",
   "tabs.settings": "設定",
diff --git a/locales/mobile/default/zh-CN.json b/locales/mobile/default/zh-CN.json
@@ -23,6 +23,9 @@
   "onboarding.welcome_title": "欢迎使用 Folo！",
   "operation.add_feeds_to_category": "移动至分类",
   "operation.change_to_other_view": "更改为其他视图",
+  "operation.copy.link": "链接",
+  "operation.copy_which": "复制{{which}}",
+  "operation.copy_which_success": "{{which}}已复制到剪贴板",
   "operation.delete_category": "删除分类",
   "operation.edit": "编辑",
   "operation.error_since": "源失效：",
@@ -46,6 +49,13 @@
   "operation.unstar": "取消收藏",
   "profile.title": "{{name}}的个人资料",
   "profile.uncategorized_feeds": "未分类的订阅源",
+  "subscription_form.category": "分类",
+  "subscription_form.category_description": "默认情况下，你的订阅将按网站域名分组。",
+  "subscription_form.private_follow": "私密订阅",
+  "subscription_form.private_follow_description": "开启后，此订阅不再显示在个人资料页面。",
+  "subscription_form.title": "标题",
+  "subscription_form.title_description": "此订阅源的自定义标题，留空则使用默认标题。",
+  "subscription_form.view": "视图",
   "tabs.discover": "发现",
   "tabs.home": "首页",
   "tabs.settings": "设置",
diff --git a/locales/mobile/default/zh-TW.json b/locales/mobile/default/zh-TW.json
@@ -45,6 +45,13 @@
   "operation.unstar": "取消收藏",
   "profile.title": "{{name}} 的個人資料",
   "profile.uncategorized_feeds": "未分類的 RSS 摘要",
+  "subscription_form.category": "類別",
+  "subscription_form.category_description": "預設情況下，您的跟隨將按網站域名分組。",
+  "subscription_form.private_follow": "私人跟隨",
+  "subscription_form.private_follow_description": "啟用後，此跟隨將不再顯示於個人資料頁面上。",
+  "subscription_form.title": "標題",
+  "subscription_form.title_description": "此 RSS 摘要的自定義標題。留空以使用預設標題。",
+  "subscription_form.view": "視圖",
   "tabs.discover": "探索",
   "tabs.home": "首頁",
   "tabs.settings": "設定",
diff --git a/scripts/copy-translation.ts b/scripts/copy-translation.ts
@@ -3,8 +3,24 @@ import path from "node:path"
 
 const sourceDir = "./locales/app"
 const targetDir = "./locales/mobile/default"
-const keysToCopy: string[] = ["feed_item.error_since"]
-const keysToPlace = ["operation.error_since"]
+const keysToCopy: string[] = [
+  "feed_form.title",
+  "feed_form.title_description",
+  "feed_form.category",
+  "feed_form.category_description",
+  "feed_form.private_follow",
+  "feed_form.private_follow_description",
+  "feed_form.view",
+]
+const keysToPlace = [
+  "subscription_form.title",
+  "subscription_form.title_description",
+  "subscription_form.category",
+  "subscription_form.category_description",
+  "subscription_form.private_follow",
+  "subscription_form.private_follow_description",
+  "subscription_form.view",
+]
 
 const copyTranslations = (sourceDir: string, targetDir: string) => {
   const sourceFiles = fs.readdirSync(sourceDir)

Original file line number	Diff line number	Diff line change
`@@ -31,7 +31,7 @@ export const FormSwitch = ({`
`31`	`31`	`}`
`32`	`32`	`return (`
`33`	`33`	`<View className={"w-full flex-row"}>`
`34`		`- <View className="flex-1">`
	`34`	`+ <View className="flex-1 gap-1">`
`35`	`35`	`<FormLabel className="pl-1" label={label} optional />`
`36`	`36`	`{!!description && (`
`37`	`37`	`<Text className="text-secondary-label mb-1 pl-1 text-sm">{description}</Text>`
Original file line number	Diff line number	Diff line change
`@@ -145,7 +145,7 @@ export const useSelectedFeedTitle = () => {`
`145`	`145`	`return viewDef?.name ? t(viewDef.name) : ""`
`146`	`146`	`}`
`147`	`147`	`case "feed": {`
`148`		`- return selectedFeed.feedId === FEED_COLLECTION_LIST ? "Collections" : (feed?.title ?? "")`
	`148`	`+ return selectedFeed.feedId === FEED_COLLECTION_LIST ? t("words.starred") : (feed?.title ?? "")`
`149`	`149`	`}`
`150`	`150`	`case "category": {`
`151`	`151`	`return selectedFeed.categoryName`