refactor(mobile): enhance header components and layout

- Introduced `NavigationBlurEffectHeaderView` for improved header rendering in various settings screens.
- Updated `SafeNavigationScrollView` to accept a `Header` prop for better layout flexibility.
- Refactored existing screens to utilize the new header component, enhancing consistency across the app.
- Adjusted styles for header text to improve visual hierarchy.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/src/components/layouts/header/HeaderElements.tsx

@@ -90,7 +90,7 @@ export const HeaderSubmitTextButton = ({
       )}
       <Text
         className={cn(
-          "text-accent text-base font-semibold",
+          "text-accent text-base font-bold",
           !isValid && "text-secondary-label",
           isLoading && "opacity-0",
         )}

apps/mobile/src/components/layouts/views/SafeNavigationScrollView.tsx

@@ -43,6 +43,8 @@ type SafeNavigationScrollViewProps = Omit<ScrollViewProps, "onScroll"> & {
 
   contentViewStyle?: StyleProp<ViewStyle>
   contentViewClassName?: string
+
+  Header?: React.ReactNode
 } & PropsWithChildren
 
 export const SafeNavigationScrollView = forwardRef<ScrollView, SafeNavigationScrollViewProps>(
@@ -55,6 +57,7 @@ export const SafeNavigationScrollView = forwardRef<ScrollView, SafeNavigationScr
       reanimatedScrollY,
       contentViewClassName,
       contentViewStyle,
+      Header,
       ...props
     },
     forwardedRef,
@@ -95,6 +98,7 @@ export const SafeNavigationScrollView = forwardRef<ScrollView, SafeNavigationScr
     return (
       <NavigationHeaderHeightContext.Provider value={headerHeight}>
         <SetNavigationHeaderHeightContext.Provider value={setHeaderHeight}>
+          {Header}
           <ReAnimatedScrollView
             ref={ref}
             onScroll={scrollHandler}
@@ -131,6 +135,35 @@ export const SafeNavigationScrollView = forwardRef<ScrollView, SafeNavigationScr
   },
 )
 
+export const NavigationBlurEffectHeaderView = ({
+  headerHideableBottom,
+  headerHideableBottomHeight,
+  headerTitleAbsolute,
+  ...props
+}: InternalNavigationHeaderProps & {
+  blurThreshold?: number
+  headerHideableBottom?: () => React.ReactNode
+  headerHideableBottomHeight?: number
+  headerTitleAbsolute?: boolean
+}) => {
+  const hideableBottom = headerHideableBottom?.()
+  return (
+    <View className="absolute inset-x-0 top-0 z-[99]">
+      <InternalNavigationHeader
+        title={props.title}
+        headerRight={props.headerRight}
+        headerLeft={props.headerLeft}
+        hideableBottom={hideableBottom}
+        hideableBottomHeight={headerHideableBottomHeight}
+        headerTitleAbsolute={headerTitleAbsolute}
+        headerTitle={props.headerTitle}
+        promptBeforeLeave={props.promptBeforeLeave}
+        isLoading={props.isLoading}
+      />
+    </View>
+  )
+}
+
 export const NavigationBlurEffectHeader = ({
   headerHideableBottom,
   headerHideableBottomHeight,

apps/mobile/src/lib/navigation/WrappedScreenItem.tsx

@@ -2,7 +2,7 @@ import { isUndefined } from "es-toolkit/compat"
 import type { PrimitiveAtom } from "jotai"
 import { atom, useAtomValue, useSetAtom } from "jotai"
 import type { FC, ReactNode } from "react"
-import { memo, useCallback, useContext, useMemo } from "react"
+import { memo, useCallback, useContext, useMemo, useRef } from "react"
 import type { NativeSyntheticEvent } from "react-native"
 import { StyleSheet, View } from "react-native"
 import { useSharedValue } from "react-native-reanimated"
@@ -124,6 +124,9 @@ export const WrappedScreenItem: FC<
       },
       [navigation, screenId],
     )
+
+    const ref = useRef<View>(null)
+
     return (
       <ScreenItemContext.Provider value={ctxValue}>
         <ScreenOptionsContext.Provider value={screenOptionsCtxValue}>
@@ -133,8 +136,10 @@ export const WrappedScreenItem: FC<
               ...defaultHeaderConfig,
               ...headerConfig,
             }}
+            nativeID=""
             key={screenId}
             screenId={screenId}
+            ref={ref}
             stackPresentation={stackPresentation}
             style={[
               StyleSheet.absoluteFill,

apps/mobile/src/modules/feed/FollowFeed.tsx

@@ -128,19 +128,20 @@ function FollowImpl(props: { feedId: string }) {
       className="bg-system-grouped-background"
       contentViewClassName="gap-y-4 mt-2"
       contentContainerStyle={{ paddingBottom: insets.bottom }}
+      Header={
+        <NavigationBlurEffectHeader
+          title={`${isSubscribed ? "Edit" : "Follow"} - ${feed?.title}`}
+          headerRight={
+            <HeaderSubmitTextButton
+              isValid={isValid}
+              onPress={form.handleSubmit(submit)}
+              isLoading={isLoading}
+              label={isSubscribed ? "Save" : "Follow"}
+            />
+          }
+        />
+      }
     >
-      <NavigationBlurEffectHeader
-        title={`${isSubscribed ? "Edit" : "Follow"} - ${feed?.title}`}
-        headerRight={
-          <HeaderSubmitTextButton
-            isValid={isValid}
-            onPress={form.handleSubmit(submit)}
-            isLoading={isLoading}
-            label={isSubscribed ? "Save" : "Follow"}
-          />
-        }
-      />
-
       {/* Group 1 */}
       <GroupedInsetListCard className="px-5 py-4">
         <View className="flex flex-row gap-4">

apps/mobile/src/modules/settings/routes/2FASetting.tsx

@@ -5,7 +5,7 @@ import type { OtpInputRef } from "react-native-otp-entry"
 import { OtpInput } from "react-native-otp-entry"
 
 import {
-  NavigationBlurEffectHeader,
+  NavigationBlurEffectHeaderView,
   SafeNavigationScrollView,
 } from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { QRCode } from "@/src/components/ui/qrcode/QRCode"
@@ -45,9 +45,7 @@ export const TwoFASetting: NavigationControllerView<{ totpURI: string }> = ({ to
 
   return (
     <KeyboardAvoidingView behavior="padding">
-      <SafeNavigationScrollView>
-        <NavigationBlurEffectHeader title="Setting 2FA" />
-
+      <SafeNavigationScrollView Header={<NavigationBlurEffectHeaderView title="Setting 2FA" />}>
         <View className="my-8 items-center justify-center">
           <QRCode
             data={totpURI}

apps/mobile/src/modules/settings/routes/About.tsx

@@ -4,7 +4,7 @@ import { Linking, Text, View } from "react-native"
 
 import { Link } from "@/src/components/common/Link"
 import {
-  NavigationBlurEffectHeader,
+  NavigationBlurEffectHeaderView,
   SafeNavigationScrollView,
 } from "@/src/components/layouts/views/SafeNavigationScrollView"
 import {
@@ -49,9 +49,11 @@ export const AboutScreen = () => {
   const appVersion = nativeApplicationVersion
 
   return (
-    <SafeNavigationScrollView className="bg-system-grouped-background" contentViewClassName="pt-6">
-      <NavigationBlurEffectHeader title={t("titles.about")} />
-
+    <SafeNavigationScrollView
+      Header={<NavigationBlurEffectHeaderView title={t("titles.about")} />}
+      className="bg-system-grouped-background"
+      contentViewClassName="pt-6"
+    >
       <GroupedInsetListCard>
         <GroupedInsetListBaseCell className="flex-col py-6">
           <View className="flex-1 items-center justify-center">

apps/mobile/src/modules/settings/routes/Account.tsx

@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next"
 import { Alert, Text, View } from "react-native"
 
 import {
-  NavigationBlurEffectHeader,
+  NavigationBlurEffectHeaderView,
   SafeNavigationScrollView,
 } from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { GroupedInsetListCardItemStyle } from "@/src/components/ui/grouped/GroupedInsetListCardItemStyle"
@@ -70,9 +70,10 @@ const useAccount = () => {
 export const AccountScreen = () => {
   const { t } = useTranslation("settings")
   return (
-    <SafeNavigationScrollView className="bg-system-grouped-background">
-      <NavigationBlurEffectHeader title={t("titles.account")} />
-
+    <SafeNavigationScrollView
+      className="bg-system-grouped-background"
+      Header={<NavigationBlurEffectHeaderView title={t("titles.account")} />}
+    >
       <AuthenticationSection />
 
       <SecuritySection />

apps/mobile/src/modules/settings/routes/Actions.tsx

@@ -8,7 +8,7 @@ import { useColors } from "react-native-uikit-colors"
 import { SwipeableGroupProvider, SwipeableItem } from "@/src/components/common/SwipeableItem"
 import { HeaderSubmitTextButton } from "@/src/components/layouts/header/HeaderElements"
 import {
-  NavigationBlurEffectHeader,
+  NavigationBlurEffectHeaderView,
   SafeNavigationScrollView,
 } from "@/src/components/layouts/views/SafeNavigationScrollView"
 import {
@@ -39,18 +39,22 @@ export const ActionsScreen = () => {
   const isDirty = useIsActionDataDirty()
 
   return (
-    <SafeNavigationScrollView nestedScrollEnabled className="bg-system-grouped-background">
-      <NavigationBlurEffectHeader
-        title={t("titles.actions")}
-        headerRight={useCallback(
-          () => (
-            <SaveRuleButton disabled={!isDirty} />
-          ),
-          [isDirty],
-        )}
-        promptBeforeLeave={isDirty}
-      />
-
+    <SafeNavigationScrollView
+      Header={
+        <NavigationBlurEffectHeaderView
+          title={t("titles.actions")}
+          headerRight={useCallback(
+            () => (
+              <SaveRuleButton disabled={!isDirty} />
+            ),
+            [isDirty],
+          )}
+          promptBeforeLeave={isDirty}
+        />
+      }
+      nestedScrollEnabled
+      className="bg-system-grouped-background"
+    >
       <View className="mt-6">
         <GroupedInsetListCard>
           <GroupedInformationCell

apps/mobile/src/modules/settings/routes/Appearance.tsx

@@ -4,7 +4,7 @@ import { useColorScheme, View } from "react-native"
 
 import { setUISetting, useUISettingKey } from "@/src/atoms/settings/ui"
 import {
-  NavigationBlurEffectHeader,
+  NavigationBlurEffectHeaderView,
   SafeNavigationScrollView,
 } from "@/src/components/layouts/views/SafeNavigationScrollView"
 import { Select } from "@/src/components/ui/form/Select"
@@ -29,10 +29,11 @@ export const AppearanceScreen = () => {
   const hideRecentReader = useUISettingKey("hideRecentReader")
 
   return (
-    <SafeNavigationScrollView className="bg-system-grouped-background">
-      <NavigationBlurEffectHeader title={t("appearance.title")} />
-
-      <GroupedInsetListSectionHeader label={t("appearance.subscriptions")} />
+    <SafeNavigationScrollView
+      className="bg-system-grouped-background"
+      Header={<NavigationBlurEffectHeaderView title={t("appearance.title")} />}
+    >
+      <GroupedInsetListSectionHeader label={t("appearance.subscriptions")} marginSize="small" />
       <GroupedInsetListCard>
         <GroupedInsetListCell
           label={t("appearance.show_unread_count.label")}

apps/mobile/src/modules/settings/routes/Data.tsx

@@ -4,7 +4,7 @@ import { Alert } from "react-native"
 
 import { setDataSetting, useDataSettingKey } from "@/src/atoms/settings/data"
 import {
-  NavigationBlurEffectHeader,
+  NavigationBlurEffectHeaderView,
   SafeNavigationScrollView,
 } from "@/src/components/layouts/views/SafeNavigationScrollView"
 import {
@@ -23,10 +23,11 @@ export const DataScreen = () => {
   const { t } = useTranslation("settings")
   const sendAnonymousData = useDataSettingKey("sendAnonymousData")
   return (
-    <SafeNavigationScrollView className="bg-system-grouped-background">
-      <NavigationBlurEffectHeader title={t("titles.data_control")} />
-
-      <GroupedInsetListSectionHeader label={t("general.privacy")} />
+    <SafeNavigationScrollView
+      className="bg-system-grouped-background"
+      Header={<NavigationBlurEffectHeaderView title={t("titles.data_control")} />}
+    >
+      <GroupedInsetListSectionHeader label={t("general.privacy")} marginSize="small" />
 
       <GroupedInsetListCard>
         <GroupedInsetListCell