Merge remote-tracking branch 'origin/mobile-main' into dev

Author: DIYgod

apps/mobile/changelog/0.5.0.md

@@ -0,0 +1,25 @@
+# What's New in v0.5.0
+
+## Shiny new things
+
+- Added streaming text-to-speech playback
+- Enabled background OTA updates
+- Added Spotlight settings with refined highlighting controls
+
+## Improvements
+
+- Upgraded the app to Expo SDK 55 and the latest React Native Firebase stack
+- Improved OTA policy handling and release metadata flow
+- Increased AI summary font size for better readability
+
+## No longer broken
+
+- Fixed YouTube embeds closing incorrectly on iOS
+- Fixed Android video playback changing the original audio pitch
+- Fixed social sign-in state refresh
+- Fixed session refresh after cookie updates
+- Fixed iOS archive and build issues on Expo SDK 55 / Xcode 26.4
+
+## Thanks
+
+Special thanks to volunteer contributor @luckycold for their valuable contribution

apps/mobile/changelog/next.md

@@ -2,24 +2,10 @@
 
 ## Shiny new things
 
-- Added streaming text-to-speech playback
-- Enabled background OTA updates
-- Added Spotlight settings with refined highlighting controls
-
 ## Improvements
 
-- Upgraded the app to Expo SDK 55 and the latest React Native Firebase stack
-- Improved OTA policy handling and release metadata flow
-- Increased AI summary font size for better readability
-
 ## No longer broken
 
-- Fixed YouTube embeds closing incorrectly on iOS
-- Fixed Android video playback changing the original audio pitch
-- Fixed social sign-in state refresh
-- Fixed session refresh after cookie updates
-- Fixed iOS archive and build issues on Expo SDK 55 / Xcode 26.4
-
 ## Thanks
 
-Special thanks to volunteer contributor @luckycold for their valuable contribution
+Special thanks to volunteer contributors @ for their valuable contributions

apps/mobile/ios/Folo/Info.plist

@@ -33,7 +33,7 @@
 	<key>CFBundlePackageType</key>
 	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.4.1</string>
+	<string>0.5.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -54,7 +54,7 @@
 		</dict>
 	</array>
 	<key>CFBundleVersion</key>
-	<string>1</string>
+	<string>3</string>
 	<key>ITSAppUsesNonExemptEncryption</key>
 	<false/>
 	<key>LSApplicationCategoryType</key>

apps/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@follow/mobile",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "private": true,
   "main": "src/main.tsx",
   "scripts": {

apps/mobile/release.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.1",
+  "version": "0.5.0",
   "mode": "store",
   "runtimeVersion": null,
   "channel": null

apps/mobile/src/modules/entry-list/templates/EntryTranslation.tsx

@@ -1,9 +1,11 @@
 import { useMemo } from "react"
 import type { TextProps } from "react-native"
-import { View } from "react-native"
+import { Text as RNText, View } from "react-native"
 
 import { useGeneralSettingKey } from "@/src/atoms/settings/general"
+import { useSpotlightSettingKey } from "@/src/atoms/settings/spotlight"
 import { Text } from "@/src/components/ui/typography/Text"
+import { HighlightedText } from "@/src/modules/spotlight/HighlightedText"
 
 export const EntryTranslation = ({
   source,
@@ -22,6 +24,7 @@ export const EntryTranslation = ({
   bilingual?: boolean
 } & TextProps) => {
   const bilingualFinal = useGeneralSettingKey("translationMode") === "bilingual" || bilingual
+  const spotlightRules = useSpotlightSettingKey("spotlights")
   const nextSource = useMemo(() => {
     if (!source) {
       return ""
@@ -37,25 +40,27 @@ export const EntryTranslation = ({
   if (!bilingualFinal) {
     return (
       <Text {...props} className={className}>
-        {nextTarget || nextSource}
+        <HighlightedText text={nextTarget || nextSource} rules={spotlightRules} />
       </Text>
     )
   }
   if (inline) {
     return (
       <Text {...props} className={className}>
-        {`${nextTarget ? `${nextTarget}   ⇋   ` : ""}${nextSource}`}
+        {nextTarget ? <HighlightedText text={nextTarget} rules={spotlightRules} /> : null}
+        {nextTarget ? <RNText>{"   ⇋   "}</RNText> : null}
+        <HighlightedText text={nextSource} rules={spotlightRules} />
       </Text>
     )
   }
   return (
     <View>
       <Text {...props} className={className}>
-        {nextSource}
+        <HighlightedText text={nextSource} rules={spotlightRules} />
       </Text>
       {nextTarget && (
         <Text {...props} className={className}>
-          {nextTarget}
+          <HighlightedText text={nextTarget} rules={spotlightRules} />
         </Text>
       )}
     </View>

apps/mobile/src/modules/spotlight/HighlightedText.tsx

@@ -0,0 +1,39 @@
+import type { SpotlightRule } from "@follow/shared/spotlight"
+import { Fragment, useMemo } from "react"
+import { Text as RNText } from "react-native"
+
+import { getHighlightedTextSegments } from "./highlightedTextSegments"
+import { getHighlightedTextSegmentStyle } from "./highlightedTextStyle"
+
+export const HighlightedText = ({
+  text,
+  rules,
+}: {
+  text?: string | null
+  rules: SpotlightRule[]
+}) => {
+  const segments = useMemo(() => getHighlightedTextSegments(text, rules), [rules, text])
+  const keyedSegments = useMemo(() => {
+    let offset = 0
+
+    return segments.map((segment) => {
+      const key = segment.highlight ? `${offset}-${segment.highlight.ruleId}-${segment.text}` : null
+      offset += segment.text.length
+      return { key: key ?? `${offset}-${segment.text}`, segment }
+    })
+  }, [segments])
+
+  return (
+    <>
+      {keyedSegments.map(({ key, segment }) =>
+        segment.highlight ? (
+          <RNText key={key} style={getHighlightedTextSegmentStyle(segment.highlight.color)}>
+            {segment.text}
+          </RNText>
+        ) : (
+          <Fragment key={key}>{segment.text}</Fragment>
+        ),
+      )}
+    </>
+  )
+}

apps/mobile/web-app/html-renderer/src/App.tsx

@@ -1,6 +1,6 @@
 import { createStore, Provider, useAtomValue } from "jotai"
 
-import { entryAtom, noMediaAtom, readerRenderInlineStyleAtom } from "./atoms"
+import { entryAtom, noMediaAtom, readerRenderInlineStyleAtom, spotlightAtom } from "./atoms"
 import { HTML } from "./HTML"
 import { WebViewBridgeManager } from "./managers/webview-bridge"
 
@@ -14,10 +14,15 @@ export const App = () => {
   const entry = useAtomValue(entryAtom, { store })
   const readerRenderInlineStyle = useAtomValue(readerRenderInlineStyleAtom, { store })
   const noMedia = useAtomValue(noMediaAtom, { store })
+  const spotlightRules = useAtomValue(spotlightAtom, { store })
 
   return (
     <Provider store={store}>
-      <HTML renderInlineStyle={readerRenderInlineStyle} noMedia={noMedia}>
+      <HTML
+        renderInlineStyle={readerRenderInlineStyle}
+        noMedia={noMedia}
+        spotlightRules={spotlightRules}
+      >
         {entry?.content}
       </HTML>
     </Provider>

apps/mobile/web-app/html-renderer/src/HTML.tsx

@@ -1,4 +1,5 @@
 import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.js"
+import type { SpotlightRule } from "@follow/shared/spotlight"
 import { clsx } from "clsx"
 import katexStyle from "katex/dist/katex.min.css?raw"
 import * as React from "react"
@@ -14,6 +15,7 @@ export type HTMLProps<A extends keyof React.JSX.IntrinsicElements = "div"> = {
 
   accessory?: React.ReactNode
   noMedia?: boolean
+  spotlightRules?: SpotlightRule[]
 } & React.JSX.IntrinsicElements[A] &
   Partial<{
     renderInlineStyle: boolean
@@ -25,25 +27,29 @@ export const HTML = <A extends keyof React.JSX.IntrinsicElements = "div">(props:
     as = "article",
     accessory,
     noMedia,
+    spotlightRules,
 
     ...rest
   } = props
   const [remarkOptions, setRemarkOptions] = useState({
     renderInlineStyle,
     noMedia,
+    spotlightRules,
   })
   const [shouldForceReMountKey, setShouldForceReMountKey] = useState(0)
 
   useEffect(() => {
     setRemarkOptions((options) => {
-      if (JSON.stringify(options) === JSON.stringify({ renderInlineStyle, noMedia })) {
+      if (
+        JSON.stringify(options) === JSON.stringify({ renderInlineStyle, noMedia, spotlightRules })
+      ) {
         return options
       }
 
       setShouldForceReMountKey((key) => key + 1)
-      return { ...options, renderInlineStyle, noMedia }
+      return { ...options, renderInlineStyle, noMedia, spotlightRules }
     })
-  }, [renderInlineStyle, noMedia])
+  }, [renderInlineStyle, noMedia, spotlightRules])
 
   const [refElement, setRefElement] = useState<HTMLDivElement | null>(null)
 

apps/mobile/web-app/html-renderer/src/parser.tsx

@@ -1,5 +1,6 @@
 import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.jsx"
 import { Checkbox } from "@follow/components/ui/checkbox/index.jsx"
+import type { SpotlightRule } from "@follow/shared/spotlight"
 import { parseHtml as parseHtmlGeneral } from "@follow/utils/html"
 import type { Components } from "hast-util-to-jsx-runtime"
 import { createElement } from "react"
@@ -9,8 +10,9 @@ import { createHeadingRenderer, MarkdownLink, MarkdownP } from "./components"
 import { MarkdownImage } from "./components/image"
 import { Math } from "./components/math"
 import { ShikiHighLighter } from "./components/shiki"
+import { applySpotlightToHtmlRendererTree } from "./spotlight"
 
-const Style: Components["style"] = ({ node, ...props }) => {
+const renderStyleTag: Components["style"] = ({ node, ...props }) => {
   if (typeof props.children === "string") {
     return createElement(MemoedDangerousHTMLStyle, null, props.children)
   }
@@ -22,10 +24,16 @@ export const parseHtml = (
   options?: Partial<{
     renderInlineStyle: boolean
     noMedia?: boolean
+    spotlightRules?: SpotlightRule[]
   }>,
 ) => {
+  const spotlightRules = options?.spotlightRules ?? []
+
   return parseHtmlGeneral(content, {
     ...options,
+    hastTransform: (tree) => {
+      applySpotlightToHtmlRendererTree(tree, spotlightRules)
+    },
     components: {
       a: ({ node, ...props }) => {
         // Ignore link wrapper when child is an image to ensure image preview
@@ -62,7 +70,7 @@ export const parseHtml = (
       h6: (props) => {
         return createHeadingRenderer(6)(props)
       },
-      style: Style,
+      style: renderStyleTag,
       img: ({ node, ...props }) => {
         return createElement(MarkdownImage, props as any)
       },