From 956d9dfd1e2e662caf45b52aab661865d16438d7 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Mon, 24 Feb 2025 20:47:38 +0800
Subject: [PATCH] feat(mobile): add titles and improve navigation screen
 configurations

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/modules/entry-content/EntryTitle.tsx  |   2 +
 apps/mobile/src/modules/login/index.tsx       |   1 +
 .../screen/TimelineSelectorProvider.tsx       |  10 +-
 .../modules/settings/routes/ManageList.tsx    |   1 +
 .../src/modules/settings/routes/index.tsx     |   5 +-
 apps/mobile/src/screens/(headless)/2fa.tsx    |   1 +
 .../src/screens/(stack)/(tabs)/_layout.tsx    | 157 +++++++++---------
 apps/mobile/src/screens/_layout.tsx           |   9 +-
 .../html-renderer/src/components/image.tsx    |   2 +-
 9 files changed, 102 insertions(+), 86 deletions(-)

diff --git a/apps/mobile/src/modules/entry-content/EntryTitle.tsx b/apps/mobile/src/modules/entry-content/EntryTitle.tsx
index cca2082da..812a41357 100644
--- a/apps/mobile/src/modules/entry-content/EntryTitle.tsx
+++ b/apps/mobile/src/modules/entry-content/EntryTitle.tsx
@@ -46,6 +46,7 @@ export const EntryTitle = ({ title, entryId }: { title: string; entryId: string
     <>
       <NavigationBlurEffectHeader
         headerShown
+        title={title}
         headerRight={useCallback(
           () => (
             <EntryContentContext.Provider value={ctxValue}>
@@ -119,6 +120,7 @@ export const EntrySocialTitle = ({ entryId }: { entryId: string }) => {
   return (
     <>
       <NavigationBlurEffectHeader
+        title="Post"
         headerShown
         headerRight={useCallback(
           () => (
diff --git a/apps/mobile/src/modules/login/index.tsx b/apps/mobile/src/modules/login/index.tsx
index 35d246870..1990d92e2 100644
--- a/apps/mobile/src/modules/login/index.tsx
+++ b/apps/mobile/src/modules/login/index.tsx
@@ -27,6 +27,7 @@ export function Login() {
   const [isChecked, setIsChecked] = useState(false)
 
   const termsCheckBoxRef = useRef<{ shake: () => void }>(null)
+
   return (
     <LoginTermsCheckedContext.Provider value={isChecked}>
       <LoginTermsCheckGuardContext.Provider
diff --git a/apps/mobile/src/modules/screen/TimelineSelectorProvider.tsx b/apps/mobile/src/modules/screen/TimelineSelectorProvider.tsx
index 01b44df5c..e7f2b7d5f 100644
--- a/apps/mobile/src/modules/screen/TimelineSelectorProvider.tsx
+++ b/apps/mobile/src/modules/screen/TimelineSelectorProvider.tsx
@@ -41,16 +41,12 @@ export function TimelineSelectorProvider({ children }: { children: React.ReactNo
           [isTimeline],
         )}
         headerRight={useMemo(() => {
-          if (isTimeline)
-            return () => (
-              <HomeSharedRightAction>
-                {view === FeedViewType.Pictures && <HideNoMediaActionButton />}
-              </HomeSharedRightAction>
-            )
+          const extraActions = <>{view === FeedViewType.Pictures && <HideNoMediaActionButton />}</>
+          if (isTimeline) return () => <HomeSharedRightAction>{extraActions}</HomeSharedRightAction>
           if (isFeed)
             return () => (
               <View className="-mr-2 flex-row gap-2">
-                <HideNoMediaActionButton variant="secondary" />
+                {extraActions}
                 <FeedShareAction params={params} />
               </View>
             )
diff --git a/apps/mobile/src/modules/settings/routes/ManageList.tsx b/apps/mobile/src/modules/settings/routes/ManageList.tsx
index cc96dacca..8a4c4e698 100644
--- a/apps/mobile/src/modules/settings/routes/ManageList.tsx
+++ b/apps/mobile/src/modules/settings/routes/ManageList.tsx
@@ -35,6 +35,7 @@ import type { SettingsStackParamList } from "../types"
 const ManageListContext = createContext<{
   nextSelectedFeedIdRef: MutableRefObject<Set<string>>
 }>(null!)
+
 export const ManageListScreen = ({
   route,
 }: {
diff --git a/apps/mobile/src/modules/settings/routes/index.tsx b/apps/mobile/src/modules/settings/routes/index.tsx
index c72798ee0..57fca3c19 100644
--- a/apps/mobile/src/modules/settings/routes/index.tsx
+++ b/apps/mobile/src/modules/settings/routes/index.tsx
@@ -1,4 +1,4 @@
-import type { createNativeStackNavigator } from "@react-navigation/native-stack"
+import type { TypedNavigator } from "@react-navigation/native"
 
 import { AboutScreen } from "./About"
 import { AccountScreen } from "./Account"
@@ -14,7 +14,7 @@ import { NotificationsScreen } from "./Notifications"
 import { PrivacyScreen } from "./Privacy"
 import { ProfileScreen } from "./Profile"
 
-export const SettingRoutes = (Stack: ReturnType<typeof createNativeStackNavigator>) => {
+export const SettingRoutes = (Stack: TypedNavigator<any, any>) => {
   return [
     <Stack.Screen key="Profile" name="Profile" component={ProfileScreen} />,
     <Stack.Screen key="Achievement" name="Achievement" component={AchievementScreen} />,
@@ -28,6 +28,7 @@ export const SettingRoutes = (Stack: ReturnType<typeof createNativeStackNavigato
     <Stack.Screen key="Feeds" name="Feeds" component={FeedsScreen} />,
     <Stack.Screen key="Privacy" name="Privacy" component={PrivacyScreen} />,
     <Stack.Screen key="About" name="About" component={AboutScreen} />,
+    // @ts-expect-error
     <Stack.Screen key="ManageList" name="ManageList" component={ManageListScreen} />,
   ]
 }
diff --git a/apps/mobile/src/screens/(headless)/2fa.tsx b/apps/mobile/src/screens/(headless)/2fa.tsx
index 8a17b6e94..7fd74c8a7 100644
--- a/apps/mobile/src/screens/(headless)/2fa.tsx
+++ b/apps/mobile/src/screens/(headless)/2fa.tsx
@@ -58,6 +58,7 @@ export default function TwoFactorAuthScreen() {
           <NavigationBlurEffectHeader
             headerShown
             headerTitle=""
+            title="2FA"
             headerLeft={() => {
               return (
                 <TouchableOpacity onPress={() => router.back()}>
diff --git a/apps/mobile/src/screens/(stack)/(tabs)/_layout.tsx b/apps/mobile/src/screens/(stack)/(tabs)/_layout.tsx
index e4ab9e6e2..e393f35f6 100644
--- a/apps/mobile/src/screens/(stack)/(tabs)/_layout.tsx
+++ b/apps/mobile/src/screens/(stack)/(tabs)/_layout.tsx
@@ -1,4 +1,4 @@
-import { router, Tabs } from "expo-router"
+import { router, Stack, Tabs } from "expo-router"
 import { Easing, Pressable, View } from "react-native"
 import { Gesture, GestureDetector } from "react-native-gesture-handler"
 import { runOnJS } from "react-native-reanimated"
@@ -21,84 +21,93 @@ const fifthTap = Gesture.Tap()
 
 export default function TabLayout() {
   return (
-    <BottomTabs
-      screenOptions={{
-        animation: "fade",
-        transitionSpec: {
-          animation: "timing",
-          config: {
-            duration: 50,
-            easing: Easing.ease,
-          },
-        },
-      }}
-    >
-      <Tabs.Screen
-        name="index"
+    <>
+      {/* Set navigation screen title */}
+      <Stack.Screen
         options={{
-          title: "Home",
-          headerShown: false,
-          tabBarLabel: "Timeline",
-          tabBarIcon: ({ color, focused }) => {
-            const Icon = !focused ? Home5CuteReIcon : Home5CuteFiIcon
-            return <Icon color={color} width={24} height={24} />
-          },
-          tabBarButton(props) {
-            return <Pressable {...props} />
-          },
+          title: "Follow",
         }}
       />
-      <Tabs.Screen
-        name="subscriptions"
-        options={{
-          title: "Subscriptions",
-          headerShown: false,
-          tabBarIcon: ({ color, focused }) => {
-            const Icon = !focused ? BlackBoard2CuteReIcon : BlackBoard2CuteFiIcon
-            return <Icon color={color} width={24} height={24} />
+      <BottomTabs
+        screenOptions={{
+          title: "Follow",
+          animation: "fade",
+          transitionSpec: {
+            animation: "timing",
+            config: {
+              duration: 50,
+              easing: Easing.ease,
+            },
           },
-          tabBarLabel: "Subscriptions",
+        }}
+      >
+        <Tabs.Screen
+          name="index"
+          options={{
+            title: "Home",
+            headerShown: false,
+            tabBarLabel: "Timeline",
+            tabBarIcon: ({ color, focused }) => {
+              const Icon = !focused ? Home5CuteReIcon : Home5CuteFiIcon
+              return <Icon color={color} width={24} height={24} />
+            },
+            tabBarButton(props) {
+              return <Pressable {...props} />
+            },
+          }}
+        />
+        <Tabs.Screen
+          name="subscriptions"
+          options={{
+            title: "Subscriptions",
+            headerShown: false,
+            tabBarIcon: ({ color, focused }) => {
+              const Icon = !focused ? BlackBoard2CuteReIcon : BlackBoard2CuteFiIcon
+              return <Icon color={color} width={24} height={24} />
+            },
+            tabBarLabel: "Subscriptions",
 
-          tabBarButton(props) {
-            return <Pressable {...props} />
-          },
-        }}
-      />
-      <Tabs.Screen
-        name="discover"
-        options={{
-          title: "Discover",
-          headerShown: false,
-          tabBarIcon: ({ color, focused }) => {
-            const Icon = !focused ? Search3CuteReIcon : Search3CuteFiIcon
-            return <Icon color={color} width={24} height={24} />
-          },
-          tabBarButton(props) {
-            return <Pressable {...props} />
-          },
-        }}
-      />
+            tabBarButton(props) {
+              return <Pressable {...props} />
+            },
+          }}
+        />
+        <Tabs.Screen
+          name="discover"
+          options={{
+            title: "Discover",
+            headerShown: false,
+            tabBarIcon: ({ color, focused }) => {
+              const Icon = !focused ? Search3CuteReIcon : Search3CuteFiIcon
+              return <Icon color={color} width={24} height={24} />
+            },
+            tabBarButton(props) {
+              return <Pressable {...props} />
+            },
+          }}
+        />
 
-      <Tabs.Screen
-        name="settings"
-        options={{
-          title: "Settings",
-          headerShown: false,
-          tabBarButton(props) {
-            return (
-              <GestureDetector gesture={fifthTap}>
-                <View className="flex-1">
-                  <Pressable {...props} />
-                </View>
-              </GestureDetector>
-            )
-          },
-          tabBarIcon: ({ color, focused }) => {
-            const Icon = !focused ? Settings1CuteReIcon : Settings1CuteFiIcon
-            return <Icon color={color} width={24} height={24} />
-          },
-        }}
-      />
-    </BottomTabs>
+        <Tabs.Screen
+          name="settings"
+          options={{
+            title: "Settings",
+            headerShown: false,
+            tabBarButton(props) {
+              return (
+                <GestureDetector gesture={fifthTap}>
+                  <View className="flex-1">
+                    <Pressable {...props} />
+                  </View>
+                </GestureDetector>
+              )
+            },
+            tabBarIcon: ({ color, focused }) => {
+              const Icon = !focused ? Settings1CuteReIcon : Settings1CuteFiIcon
+              return <Icon color={color} width={24} height={24} />
+            },
+          }}
+        />
+      </BottomTabs>
+    </>
   )
 }
diff --git a/apps/mobile/src/screens/_layout.tsx b/apps/mobile/src/screens/_layout.tsx
index a4c0e81fc..8ffaf06be 100644
--- a/apps/mobile/src/screens/_layout.tsx
+++ b/apps/mobile/src/screens/_layout.tsx
@@ -36,15 +36,20 @@ function AnimatedStack() {
       <Stack.Screen
         name="(stack)"
         options={{
+          title: "Follow",
           headerShown: false,
           contentStyle: isScaling ? { borderRadius: 50, overflow: "hidden" } : {},
         }}
       />
-      <Stack.Screen name="(headless)" options={{ headerShown: false }} />
-      <Stack.Screen name="(modal)" options={{ headerShown: false, presentation: "modal" }} />
+      <Stack.Screen name="(headless)" options={{ headerShown: false, title: "Follow" }} />
+      <Stack.Screen
+        name="(modal)"
+        options={{ headerShown: false, presentation: "modal", title: "Modal" }}
+      />
       <Stack.Screen
         name="player"
         options={{
+          title: "Player",
           presentation: "transparentModal",
           headerShown: false,
           contentStyle: {
diff --git a/apps/mobile/web-app/html-renderer/src/components/image.tsx b/apps/mobile/web-app/html-renderer/src/components/image.tsx
index b8fad3172..b21090d7b 100644
--- a/apps/mobile/web-app/html-renderer/src/components/image.tsx
+++ b/apps/mobile/web-app/html-renderer/src/components/image.tsx
@@ -34,7 +34,7 @@ export const MarkdownImage = (props: HTMLProps<"img">) => {
         height: image?.height,
         max: {
           width: w,
-          height: window.innerHeight,
+          height: Infinity,
         },
       }),
     [image?.width, image?.height, w],