refactor(rsshub-form): enhance ScreenOptions component and improve header title rendering

- Introduced new props for the ScreenOptions component to pass route and routePrefix.
- Updated header title rendering to utilize HeaderTitleExtra for better display of route information.
- Removed unused PreviewUrl component to streamline the form layout.

These changes improve the clarity and functionality of the RSSHub form screen.

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

apps/mobile/src/components/common/HeaderTitleExtra.tsx

@@ -0,0 +1,61 @@
+import { cn } from "@follow/utils"
+import { useTheme } from "@react-navigation/native"
+import type { StyleProp, TextProps, TextStyle } from "react-native"
+import { Animated, Platform, StyleSheet, Text, View } from "react-native"
+
+type Props = Omit<TextProps, "style"> & {
+  tintColor?: string
+  children?: string
+  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>
+  subText?: string
+  subTextStyle?: StyleProp<TextStyle>
+  subTextClassName?: string
+}
+
+export function HeaderTitleExtra({
+  tintColor,
+  style,
+  subText,
+  subTextStyle,
+  subTextClassName,
+  ...rest
+}: Props) {
+  const { colors, fonts } = useTheme()
+
+  return (
+    <View>
+      <Animated.Text
+        accessibilityRole="header"
+        aria-level="1"
+        numberOfLines={1}
+        {...rest}
+        style={[
+          { color: tintColor === undefined ? colors.text : tintColor },
+          Platform.select({ ios: fonts.bold, default: fonts.medium }),
+          styles.title,
+          style,
+        ]}
+      />
+      <Text
+        className={cn("text-text/50 text-center text-xs", subTextClassName)}
+        style={subTextStyle}
+      >
+        {subText}
+      </Text>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  title: Platform.select({
+    ios: {
+      fontSize: 17,
+    },
+    android: {
+      fontSize: 20,
+    },
+    default: {
+      fontSize: 18,
+    },
+  }),
+})

apps/mobile/src/screens/(modal)/rsshub-form.tsx

@@ -9,6 +9,7 @@ import { Linking, Text, TouchableOpacity, View } from "react-native"
 import { KeyboardAwareScrollView } from "react-native-keyboard-controller"
 import { z } from "zod"
 
+import { HeaderTitleExtra } from "@/src/components/common/HeaderTitleExtra"
 import { ModalHeaderCloseButton } from "@/src/components/common/ModalSharedComponents"
 import { FormProvider, useFormContext } from "@/src/components/ui/form/FormProvider"
 import { FormLabel } from "@/src/components/ui/form/Label"
@@ -16,7 +17,6 @@ import { Select } from "@/src/components/ui/form/Select"
 import { TextField } from "@/src/components/ui/form/TextField"
 import MarkdownWeb from "@/src/components/ui/typography/MarkdownWeb"
 import { CheckLineIcon } from "@/src/icons/check_line"
-import { PreviewUrl } from "@/src/modules/rsshub/preview-url"
 import { useColor } from "@/src/theme/colors"
 
 interface RsshubFormParams {
@@ -105,18 +105,15 @@ function FormImpl({ route, routePrefix, name }: RsshubFormParams) {
 
   return (
     <FormProvider form={form}>
-      <ScreenOptions name={name} routeName={routeName} />
+      <ScreenOptions
+        name={name}
+        routeName={routeName}
+        route={route.path}
+        routePrefix={routePrefix}
+      />
 
       <PortalProvider>
         <KeyboardAwareScrollView className="bg-system-grouped-background">
-          <PreviewUrl
-            className="m-2 mb-6"
-            watch={form.watch}
-            path={route.path}
-            routePrefix={routePrefix}
-          />
-          {/* Form */}
-
           <View className="bg-system-grouped-background-2 mx-2 gap-4 rounded-lg px-3 py-6">
             {keys.map((keyItem) => {
               const parameters = normalizeRSSHubParameters(route.parameters[keyItem.name])
@@ -211,7 +208,13 @@ const normalizeRSSHubParameters = (parameters: RSSHubParameter): RSSHubParameter
       : parameters
     : null
 
-const ScreenOptions = memo(({ name, routeName }: { name: string; routeName: string }) => {
+type ScreenOptionsProps = {
+  name: string
+  routeName: string
+  route: string
+  routePrefix: string
+}
+const ScreenOptions = memo(({ name, routeName, route, routePrefix }: ScreenOptionsProps) => {
   const form = useFormContext()
 
   return (
@@ -223,12 +226,23 @@ const ScreenOptions = memo(({ name, routeName }: { name: string; routeName: stri
             <ModalHeaderSubmitButton />
           </FormProvider>
         ),
-        headerTitle: `${name} - ${routeName}`,
+
+        headerTitle: () => (
+          <Title name={name} routeName={routeName} route={route} routePrefix={routePrefix} />
+        ),
       }}
     />
   )
 })
 
+const Title = ({ name, routeName, route, routePrefix }: ScreenOptionsProps) => {
+  return (
+    <HeaderTitleExtra subText={`rsshub://${routePrefix}${route}`}>
+      {`${name} - ${routeName}`}
+    </HeaderTitleExtra>
+  )
+}
+
 const ModalHeaderSubmitButton = () => {
   return <ModalHeaderSubmitButtonImpl />
 }