refactor(mobile): Improve UI components and form handling

- resolves FOL-1680
- Replace TouchableOpacity with Pressable in view selector
- Remove background color from SafeModalScrollView
- Adjust content container margins in modal scroll views
- Update form schema to coerce view to number
- Add loading state management in RSSHub form submission
- Enhance user interaction and form validation

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

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

@@ -17,7 +17,7 @@ export const SafeModalScrollView = (props: SafeModalScrollViewProps) => {
   const animatedY = useSharedValue(0)
   const animatedRef = useAnimatedRef<ScrollView>()
   return (
-    <View className="bg-yellow flex-1">
+    <View className="flex-1">
       <ModalScrollViewContext.Provider
         value={useMemo(() => ({ scrollViewRef: animatedRef, animatedY }), [animatedRef, animatedY])}
       >

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

@@ -25,7 +25,7 @@ import { subscriptionSyncService } from "@/src/store/subscription/store"
 import type { SubscriptionForm } from "@/src/store/subscription/types"
 
 const formSchema = z.object({
-  view: z.string(),
+  view: z.coerce.number(),
   category: z.string().nullable().optional(),
   isPrivate: z.boolean().optional(),
   title: z.string().optional(),
@@ -123,8 +123,8 @@ function FollowImpl(props: { feedId: string }) {
 
   return (
     <SafeModalScrollView
-      className="bg-system-grouped-background mt-2"
-      contentContainerClassName="gap-y-4"
+      className="bg-system-grouped-background"
+      contentContainerClassName="gap-y-4 mt-2"
       contentContainerStyle={{ paddingBottom: insets.bottom }}
     >
       <ModalHeader

apps/mobile/src/modules/feed/view-selector.tsx

@@ -1,5 +1,5 @@
 import type { FeedViewType } from "@follow/constants"
-import { Text, TouchableOpacity, View } from "react-native"
+import { Pressable, Text, View } from "react-native"
 
 import { Grid } from "@/src/components/ui/grid"
 import { views } from "@/src/constants/views"
@@ -20,7 +20,7 @@ export const FeedViewSelector = ({ value, onChange, className, readOnly }: Props
       {views.map((view) => {
         const isSelected = +value === +view.view
         return (
-          <TouchableOpacity
+          <Pressable
             key={view.name}
             onPress={() => onChange?.(view.view)}
             disabled={readOnly}
@@ -41,7 +41,7 @@ export const FeedViewSelector = ({ value, onChange, className, readOnly }: Props
                 {view.name}
               </Text>
             </View>
-          </TouchableOpacity>
+          </Pressable>
         )
       })}
     </Grid>

apps/mobile/src/modules/list/FollowList.tsx

@@ -117,8 +117,8 @@ const Impl = (props: { id: string }) => {
   }, [isDirty, navigation])
   return (
     <SafeModalScrollView
-      className="bg-system-grouped-background mt-2"
-      contentContainerClassName="gap-y-4"
+      className="bg-system-grouped-background"
+      contentContainerClassName="gap-y-4 mt-2"
     >
       <ModalHeader
         headerTitle={`${isSubscribed ? "Edit" : "Follow"} - ${list?.title}`}

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

@@ -283,6 +283,7 @@ const ModalHeaderSubmitButtonImpl = ({
   const [isLoading, setIsLoading] = useState(false)
 
   const submit = form.handleSubmit((_data) => {
+    setIsLoading(true)
     const data = Object.fromEntries(
       Object.entries(_data).filter(([key]) => !key.startsWith(routeParamsKeyPrefix)),
     )
@@ -308,8 +309,6 @@ const ModalHeaderSubmitButtonImpl = ({
       //   router.dismiss()
       // }
 
-      setIsLoading(true)
-
       feedSyncServices
         .fetchFeedById({ url: finalUrl })
         .then((feed) => {