feat: title transform follow the english title case rules

Innei · Innei · commit bc0a9358b5cb · 2025-05-21T22:34:37.000+08:00
Signed-off-by: Innei &lt;tukon479@gmail.com&gt;
diff --git a/apps/desktop/layer/renderer/package.json b/apps/desktop/layer/renderer/package.json
@@ -89,6 +89,7 @@
     "shiki": "3.3.0",
     "sonner": "2.0.3",
     "tinykeys": "3.0.0",
+    "title-case": "4.3.2",
     "tldts": "7.0.4",
     "ufo": "1.6.1",
     "use-context-selector": "2.0.0",
diff --git a/apps/desktop/layer/renderer/src/modules/command/hooks/use-register-hotkey.ts b/apps/desktop/layer/renderer/src/modules/command/hooks/use-register-hotkey.ts
@@ -1,4 +1,5 @@
 import { useRefValue } from "@follow/hooks"
+import { checkIsEditableElement } from "@follow/utils/dom"
 import { useEffect } from "react"
 import { tinykeys } from "tinykeys"
 
@@ -17,8 +18,6 @@ export interface RegisterHotkeyOptions<T extends FollowCommandId> {
   options?: HotkeyOptions
 }
 
-const IGNORE_INPUT_ELEMENT = [HTMLInputElement, HTMLTextAreaElement]
-
 const SPECIAL_KEYS_MAPPINGS = {
   "?": "Shift+Slash",
 }
@@ -54,11 +53,7 @@ export const useCommandHotkey = <T extends FollowCommandId>({
 
       keyMap[nextKey] = (event) => {
         const { target } = event
-        if (
-          !options?.forceInputElement &&
-          (IGNORE_INPUT_ELEMENT.some((el) => target instanceof el) ||
-            (target as HTMLElement).getAttribute("contenteditable") === "true")
-        ) {
+        if (!options?.forceInputElement && checkIsEditableElement(target as HTMLElement)) {
           return
         }
 
diff --git a/apps/desktop/layer/renderer/src/modules/command/shortcuts/SettingShortcuts.tsx b/apps/desktop/layer/renderer/src/modules/command/shortcuts/SettingShortcuts.tsx
@@ -0,0 +1,38 @@
+import { KbdCombined } from "@follow/components/ui/kbd/Kbd.js"
+import { cn } from "@follow/utils/utils"
+import { useTranslation } from "react-i18next"
+
+import { shortcuts, shortcutsType } from "~/constants/shortcuts"
+
+export const SettingShortcuts = () => {
+  const { t } = useTranslation("shortcuts")
+  return (
+    <div className="mt-4 space-y-6">
+      {Object.keys(shortcuts).map((type) => (
+        <section key={type}>
+          <div className="text-text-secondary mb-2 pl-3 text-sm font-medium capitalize">
+            {t(shortcutsType[type])}
+          </div>
+          <div className="text-text rounded-md border text-[13px]">
+            {Object.keys(shortcuts[type]).map((action, index) => (
+              <div
+                key={`${type}-${action}`}
+                className={cn(
+                  "flex h-9 items-center justify-between px-3 py-1.5",
+                  index % 2 && "bg-fill-quinary",
+                )}
+              >
+                <div>{t(shortcuts[type][action].name)}</div>
+                <div>
+                  <KbdCombined joint>
+                    {`${shortcuts[type][action].key}${shortcuts[type][action].extra ? `, ${shortcuts[type][action].extra}` : ""}`}
+                  </KbdCombined>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  )
+}
diff --git a/apps/desktop/layer/renderer/src/modules/entry-column/templates/list-item-template.tsx b/apps/desktop/layer/renderer/src/modules/entry-column/templates/list-item-template.tsx
@@ -2,6 +2,7 @@ import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
 import { clsx, cn, formatEstimatedMins, formatTimeToSeconds, isSafari } from "@follow/utils/utils"
 import { useMemo } from "react"
+import { titleCase } from "title-case"
 
 import { AudioPlayer, useAudioPlayerAtomSelector } from "~/atoms/player"
 import { useGeneralSettingKey } from "~/atoms/settings/general"
@@ -154,8 +155,8 @@ export function ListItem({
           {entry.entries.title ? (
             <EntryTranslation
               className={cn("hyphens-auto font-medium", lineClamp.title)}
-              source={entry.entries.title}
-              target={translation?.title}
+              source={titleCase(entry.entries.title ?? "")}
+              target={titleCase(translation?.title ?? "")}
             />
           ) : (
             <EntryTranslation
diff --git a/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryTitle.tsx b/apps/desktop/layer/renderer/src/modules/entry-content/components/EntryTitle.tsx
@@ -1,5 +1,6 @@
 import { formatEstimatedMins, formatTimeToSeconds } from "@follow/utils/utils"
 import { useMemo } from "react"
+import { titleCase } from "title-case"
 
 import { useUISettingKey } from "~/atoms/settings/ui"
 import { useWhoami } from "~/atoms/user"
@@ -74,8 +75,8 @@ export const EntryTitle = ({ entryId, compact }: EntryLinkProps) => {
             className="cursor-link hover:multi-[scale-[1.01];opacity-95] inline-block select-text break-words text-[1.7rem] font-bold leading-normal duration-200"
           >
             <EntryTranslation
-              source={entry.entries.title}
-              target={translation.data?.title}
+              source={titleCase(entry.entries.title ?? "")}
+              target={titleCase(translation.data?.title ?? "")}
               className="text-text inline-block select-text hyphens-auto duration-200"
               inline={false}
               bilingual
diff --git a/apps/desktop/layer/renderer/src/pages/settings/(settings)/shortcuts.tsx b/apps/desktop/layer/renderer/src/pages/settings/(settings)/shortcuts.tsx
@@ -1,8 +1,4 @@
-import { KbdCombined } from "@follow/components/ui/kbd/Kbd.js"
-import { cn } from "@follow/utils/utils"
-import { useTranslation } from "react-i18next"
-
-import { shortcuts, shortcutsType } from "~/constants/shortcuts"
+import { SettingShortcuts } from "~/modules/command/shortcuts/SettingShortcuts"
 import { SettingsTitle } from "~/modules/settings/title"
 import { defineSettingPageData } from "~/modules/settings/utils"
 
@@ -15,38 +11,10 @@ export const loader = defineSettingPageData({
   priority,
 })
 export function Component() {
-  const { t } = useTranslation("shortcuts")
   return (
     <>
       <SettingsTitle />
-
-      <div className="mt-4 space-y-6">
-        {Object.keys(shortcuts).map((type) => (
-          <section key={type}>
-            <div className="text-text-secondary mb-2 pl-3 text-sm font-medium capitalize">
-              {t(shortcutsType[type])}
-            </div>
-            <div className="text-text rounded-md border text-[13px]">
-              {Object.keys(shortcuts[type]).map((action, index) => (
-                <div
-                  key={`${type}-${action}`}
-                  className={cn(
-                    "flex h-9 items-center justify-between px-3 py-1.5",
-                    index % 2 && "bg-fill-quinary",
-                  )}
-                >
-                  <div>{t(shortcuts[type][action].name)}</div>
-                  <div>
-                    <KbdCombined joint>
-                      {`${shortcuts[type][action].key}${shortcuts[type][action].extra ? `, ${shortcuts[type][action].extra}` : ""}`}
-                    </KbdCombined>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </section>
-        ))}
-      </div>
+      <SettingShortcuts />
     </>
   )
 }
diff --git a/apps/desktop/layer/renderer/src/providers/global-hotkeys-provider.tsx b/apps/desktop/layer/renderer/src/providers/global-hotkeys-provider.tsx
@@ -1,5 +1,10 @@
 import { highlightElement } from "@follow/components/common/Focusable/utils.js"
-import { nextFrame, preventDefault, stopPropagation } from "@follow/utils/dom"
+import {
+  checkIsEditableElement,
+  nextFrame,
+  preventDefault,
+  stopPropagation,
+} from "@follow/utils/dom"
 import { EventBus } from "@follow/utils/event-bus"
 import { useEffect } from "react"
 import { tinykeys } from "tinykeys"
@@ -22,10 +27,7 @@ export const GlobalHotkeysProvider = () => {
   useEventListener("keydown", (e) => {
     if (e.key === "Tab") {
       nextFrame(() => {
-        if (
-          document.activeElement instanceof HTMLInputElement ||
-          document.activeElement instanceof HTMLTextAreaElement
-        ) {
+        if (checkIsEditableElement(e.target as HTMLElement)) {
           return
         }
         highlightElement(document.activeElement as HTMLElement)
diff --git a/locales/settings/en.json b/locales/settings/en.json
@@ -11,8 +11,8 @@
   "actions.action_card.and": "And",
   "actions.action_card.block": "Block",
   "actions.action_card.block_rules": "Block Rules",
-  "actions.action_card.custom_filters": "Custom filters",
-  "actions.action_card.enable_readability": "Enable readability",
+  "actions.action_card.custom_filters": "Custom Filters",
+  "actions.action_card.enable_readability": "Enable Readability",
   "actions.action_card.feed_options.entry_author": "Entry Author",
   "actions.action_card.feed_options.entry_content": "Entry Content",
   "actions.action_card.feed_options.entry_media_length": "Entry Media Length",
@@ -26,44 +26,44 @@
   "actions.action_card.feed_options.subscription_view": "Subscription View",
   "actions.action_card.field": "Field",
   "actions.action_card.from": "From",
-  "actions.action_card.generate_summary": "Generate summary using AI",
+  "actions.action_card.generate_summary": "Generate Summary Using AI",
   "actions.action_card.name": "Name",
-  "actions.action_card.new_entry_notification": "Notification of new entry",
-  "actions.action_card.no_translation": "No translation",
-  "actions.action_card.operation_options.contains": "contains",
-  "actions.action_card.operation_options.does_not_contain": "does not contain",
-  "actions.action_card.operation_options.is_equal_to": "is equal to",
-  "actions.action_card.operation_options.is_greater_than": "is greater than",
-  "actions.action_card.operation_options.is_less_than": "is less than",
-  "actions.action_card.operation_options.is_not_equal_to": "is not equal to",
-  "actions.action_card.operation_options.matches_regex": "matches regex",
+  "actions.action_card.new_entry_notification": "Notification of New Entry",
+  "actions.action_card.no_translation": "No Translation",
+  "actions.action_card.operation_options.contains": "Contains",
+  "actions.action_card.operation_options.does_not_contain": "Does Not Contain",
+  "actions.action_card.operation_options.is_equal_to": "Is Equal to",
+  "actions.action_card.operation_options.is_greater_than": "Is Greater Than",
+  "actions.action_card.operation_options.is_less_than": "Is Less Than",
+  "actions.action_card.operation_options.is_not_equal_to": "Is Not Equal to",
+  "actions.action_card.operation_options.matches_regex": "Matches Regex",
   "actions.action_card.operator": "Operator",
   "actions.action_card.or": "Or",
-  "actions.action_card.rewrite_rules": "Rewrite rules",
+  "actions.action_card.rewrite_rules": "Rewrite Rules",
   "actions.action_card.settings": "Settings",
   "actions.action_card.silence": "Silence",
-  "actions.action_card.source_content": "View source content",
+  "actions.action_card.source_content": "View Source Content",
   "actions.action_card.star": "Star",
-  "actions.action_card.then_do": "Then do…",
+  "actions.action_card.then_do": "Then Do…",
   "actions.action_card.to": "To",
   "actions.action_card.translate_into": "Translate",
   "actions.action_card.value": "Value",
   "actions.action_card.webhooks": "Webhooks",
-  "actions.action_card.when_feeds_match": "When feeds match…",
+  "actions.action_card.when_feeds_match": "When Feeds Match…",
   "actions.condition": "Condition",
   "actions.conditions": "Conditions",
   "actions.edit_condition": "Edit Condition",
   "actions.edit_rewrite_rule": "Edit Rewrite Rule",
   "actions.edit_rule": "Edit Rule",
   "actions.edit_webhook": "Edit Webhook",
-  "actions.info": "Action are collections of rules that you can automate to perform tasks on server or client side.",
-  "actions.navigate.prompt": "You have unsaved Action changes. Are you sure you want to leave?",
+  "actions.info": "Actions Are Collections of Rules That You Can Automate to Perform Tasks on Server or Client Side.",
+  "actions.navigate.prompt": "You Have Unsaved Action Changes. Are You Sure You Want to Leave?",
   "actions.newRule": "New Rule",
   "actions.save": "Save",
-  "actions.saveSuccess": "🎉 Actions saved.",
+  "actions.saveSuccess": "🎉 Actions Saved.",
   "actions.sidebar_title": "Actions",
   "actions.title": "Actions",
-  "appearance.code_highlight_theme": "Code highlight theme",
+  "appearance.code_highlight_theme": "Code Highlight Theme",
   "appearance.content": "Content",
   "appearance.content_font.default": "Default (UI Font)",
   "appearance.content_font.label": "Content Font",
@@ -75,28 +75,28 @@
   "appearance.content_line_height.snug": "Snug",
   "appearance.content_line_height.tight": "Tight",
   "appearance.custom_css.button": "Edit",
-  "appearance.custom_css.description": "Custom CSS style for content",
+  "appearance.custom_css.description": "Custom CSS Style for Content",
   "appearance.custom_css.label": "Custom CSS",
   "appearance.custom_font": "Custom Font",
-  "appearance.date_format": "Date format",
+  "appearance.date_format": "Date Format",
   "appearance.font.custom": "Custom",
   "appearance.font.system": "System UI",
   "appearance.fonts": "Fonts",
   "appearance.general": "General",
-  "appearance.guess_code_language.description": "Major programming languages that use models to infer unlabeled code blocks",
-  "appearance.guess_code_language.label": "Guess code language",
-  "appearance.hide_extra_badge.description": "Hide the special badge of the feed in the sidebar, e.g. Boost, Claimed",
-  "appearance.hide_extra_badge.label": "Hide special badge",
-  "appearance.hide_recent_reader.description": "Hide the recent reader in the entry header.",
-  "appearance.hide_recent_reader.label": "Hide recent reader",
+  "appearance.guess_code_language.description": "Major Programming Languages That Use Models to Infer Unlabeled Code Blocks",
+  "appearance.guess_code_language.label": "Guess Code Language",
+  "appearance.hide_extra_badge.description": "Hide the Special Badge of the Feed in the Sidebar, e.g. Boost, Claimed",
+  "appearance.hide_extra_badge.label": "Hide Special Badge",
+  "appearance.hide_recent_reader.description": "Hide the Recent Reader in the Entry Header.",
+  "appearance.hide_recent_reader.label": "Hide Recent Reader",
   "appearance.misc": "Misc",
-  "appearance.modal_overlay.description": "Show modal overlay",
-  "appearance.modal_overlay.label": "Show modal overlay",
-  "appearance.opaque_sidebars.label": "Opaque sidebars",
-  "appearance.reader_render_inline_style.description": "Allows rendering of the inline style of the original HTML.",
-  "appearance.reader_render_inline_style.label": "Render inline style",
-  "appearance.reduce_motion.description": "Reducing the motion of elements to improve performance and reduce energy consumption",
-  "appearance.reduce_motion.label": "Reduce motion",
+  "appearance.modal_overlay.description": "Show Modal Overlay",
+  "appearance.modal_overlay.label": "Show Modal Overlay",
+  "appearance.opaque_sidebars.label": "Opaque Sidebars",
+  "appearance.reader_render_inline_style.description": "Allows Rendering of the Inline Style of the Original HTML.",
+  "appearance.reader_render_inline_style.label": "Render Inline Style",
+  "appearance.reduce_motion.description": "Reducing the Motion of Elements to Improve Performance and Reduce Energy Consumption",
+  "appearance.reduce_motion.label": "Reduce Motion",
   "appearance.save": "Save",
   "appearance.sidebar": "Sidebar",
   "appearance.sidebar_title": "Appearance",
@@ -110,19 +110,19 @@
   "appearance.theme.label": "Theme",
   "appearance.theme.light": "Light",
   "appearance.theme.system": "System",
-  "appearance.thumbnail_ratio.description": "The ratio of the thumbnail in the entry list.",
+  "appearance.thumbnail_ratio.description": "The Ratio of the Thumbnail in the Entry List.",
   "appearance.thumbnail_ratio.original": "Original",
   "appearance.thumbnail_ratio.square": "Square",
-  "appearance.thumbnail_ratio.title": "Thumbnail ratio",
+  "appearance.thumbnail_ratio.title": "Thumbnail Ratio",
   "appearance.title": "Appearance",
   "appearance.ui_font": "Global Font",
-  "appearance.unread_count.badge.label": "Show as badge",
-  "appearance.unread_count.label": "Unread count",
-  "appearance.unread_count.view_and_subscription.label": "Show in view and subscription",
+  "appearance.unread_count.badge.label": "Show as Badge",
+  "appearance.unread_count.label": "Unread Count",
+  "appearance.unread_count.view_and_subscription.label": "Show in View and Subscription",
   "appearance.use_pointer_cursor.description": "When the mouse hovers over any interactive element, the cursor appears as a hand.",
-  "appearance.use_pointer_cursor.label": "Use hand cursor",
+  "appearance.use_pointer_cursor.label": "Use Hand Cursor",
   "appearance.zen_mode.description": "Zen mode is an undisturbed reading mode that allows you to focus on the content without any interference. Enabling Zen mode will hide the sidebar.",
-  "appearance.zen_mode.label": "Zen mode",
+  "appearance.zen_mode.label": "Zen Mode",
   "common.give_star": "<HeartIcon />Love our product? <Link>Give us a star on GitHub!</Link>",
   "customizeToolbar.more_actions.description": "Will be shown in the dropdown menu",
   "customizeToolbar.more_actions.title": "More Actions",
@@ -296,7 +296,7 @@
   "invitation.earlyAccess": "Folo is currently requires an invitation code to use.",
   "invitation.earlyAccessMessage": "😰 Sorry, Folo is currently requires an invitation code to use.",
   "invitation.generate": "Generate",
-  "invitation.generateButton": "Generate new code",
+  "invitation.generateButton": "Generate New Code",
   "invitation.generateCost": "You can spend {{INVITATION_PRICE}} <PowerIcon /> Power to generate an invitation code for your friends.",
   "invitation.getCodeMessage": "You can get an invitation code through the following methods:",
   "invitation.limitationMessage": "Based on your usage time, you can generate up to {{limitation}} invitation codes.",
@@ -503,4 +503,4 @@
   "wallet.withdraw.submitButton": "Submit",
   "wallet.withdraw.success": "Withdrawal successful!",
   "wallet.withdraw.toRss3Label": "Withdraw as RSS3"
-}
+}
diff --git a/locales/shortcuts/en.json b/locales/shortcuts/en.json
@@ -1,5 +1,5 @@
 {
-  "keys.audio.playPause": "Play/Pause (When the audio player is open)",
+  "keys.audio.playPause": "Play/Pause (When the Audio Player Is Open)",
   "keys.entries.markAllAsRead": "Mark All as Read",
   "keys.entries.next": "Next Entry",
   "keys.entries.previous": "Previous Entry",
@@ -24,7 +24,7 @@
   "keys.subscriptions.add": "Add Subscription",
   "keys.subscriptions.nextSubscription": "Next Subscription",
   "keys.subscriptions.openInBrowser": "Open in Browser",
-  "keys.subscriptions.openSiteInBrowser": "Open site in Browser",
+  "keys.subscriptions.openSiteInBrowser": "Open Site in Browser",
   "keys.subscriptions.previousSubscription": "Previous Subscription",
   "keys.subscriptions.switchBetweenViews": "Switch Between Views",
   "keys.subscriptions.switchNextView": "Switch to Next View",
diff --git a/packages/internal/utils/src/dom.ts b/packages/internal/utils/src/dom.ts
@@ -79,3 +79,12 @@ export function isNodeVisibleInScroller(node: Element, scroller: Element) {
 
   return nodeRight > scrollerLeft && nodeLeft < scrollerRight
 }
+
+export const checkIsEditableElement = (element: HTMLElement) => {
+  return (
+    element.isContentEditable ||
+    element.getAttribute("contenteditable") === "true" ||
+    (element instanceof HTMLInputElement && element.type === "text") ||
+    element instanceof HTMLTextAreaElement
+  )
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
