init rsshub form

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

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

@@ -0,0 +1,18 @@
+import { router } from "expo-router"
+import { TouchableOpacity } from "react-native"
+
+import { CloseCuteReIcon } from "@/src/icons/close_cute_re"
+import { useColor } from "@/src/theme/colors"
+
+export const ModalHeaderCloseButton = () => {
+  return <ModalHeaderCloseButtonImpl />
+}
+
+const ModalHeaderCloseButtonImpl = () => {
+  const label = useColor("label")
+  return (
+    <TouchableOpacity onPress={() => router.dismiss()}>
+      <CloseCuteReIcon color={label} />
+    </TouchableOpacity>
+  )
+}

apps/mobile/src/components/ui/tabview/index.tsx

@@ -66,7 +66,6 @@ export const TabView: FC<TabViewProps> = ({
 
   lazyOnce,
   lazyTab,
-  // indicator
 }) => {
   const tabRef = useRef<ScrollView>(null)
 
@@ -86,9 +85,6 @@ export const TabView: FC<TabViewProps> = ({
     }
   }, [pagerOffsetX, sharedPagerOffsetX])
 
-  // const indicatorX = useAnimatedValue(0)
-  // const indicatorWidth = useAnimatedValue(0)
-
   const indicatorPosition = useSharedValue(0)
   const { width: windowWidth } = useWindowDimensions()
 
@@ -131,20 +127,6 @@ export const TabView: FC<TabViewProps> = ({
       backgroundColor: tabs[currentTab].activeColor || accentColor,
     }
   })
-  // useEffect(() => {
-  //   RnAnimated.spring(indicatorWidth, {
-  //     toValue: tabWidths[currentTab],
-  //     useNativeDriver: false,
-  //     damping: 10,
-  //     stiffness: 100,
-  //   }).start()
-  //   RnAnimated.spring(indicatorX, {
-  //     toValue: tabPositions[currentTab],
-  //     useNativeDriver: true,
-  //     damping: 10,
-  //     stiffness: 100,
-  //   })
-  // }, [currentTab, indicatorWidth, indicatorX, tabPositions, tabWidths])
 
   useEffect(() => {
     const listener = pagerOffsetX.addListener(({ value }) => {
@@ -218,22 +200,7 @@ export const TabView: FC<TabViewProps> = ({
             <TabItemInner tab={tab} isSelected={index === currentTab} />
           </TabItem>
         ))}
-        {/* <RnAnimated.View
-          style={[
-            styles.indicator,
-            {
-              transform: [{ translateX: indicatorX }],
-            },
-          ]}
-        >
-          <RnAnimated.View
-            className={"h-full"}
-            style={{
-              width: indicatorWidth,
-              backgroundColor: accentColor,
-            }}
-          />
-        </RnAnimated.View> */}
+
         <Animated.View style={[styles.indicator, indicatorStyle]} />
       </ScrollView>
 
@@ -252,7 +219,7 @@ export const TabView: FC<TabViewProps> = ({
         nestedScrollEnabled
       >
         {tabs.map((tab, index) => (
-          <View style={{ width: windowWidth }} key={tab.value}>
+          <View className="flex-1" style={{ width: windowWidth }} key={tab.value}>
             {shouldRenderCurrentTab(index) && <Tab isSelected={currentTab === index} tab={tab} />}
           </View>
         ))}

apps/mobile/src/modules/discover/recommendation-card.tsx → apps/mobile/src/modules/discover/recommendation-item.tsx

@@ -1,7 +1,8 @@
 import type { RSSHubCategories } from "@follow/constants"
 import type { RSSHubRouteDeclaration } from "@follow/models/src/rsshub"
+import { router } from "expo-router"
 import type { FC } from "react"
-import { useMemo } from "react"
+import { memo, useMemo } from "react"
 import { Clipboard, Linking, Text, TouchableOpacity, View } from "react-native"
 
 import { ContextMenu } from "@/src/components/ui/context-menu"
@@ -10,9 +11,9 @@ import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 
 import { RSSHubCategoryCopyMap } from "./copy"
 
-export const RecommendationCard: FC<{
+export const RecommendationListItem: FC<{
   data: RSSHubRouteDeclaration
-}> = ({ data }) => {
+}> = memo(({ data }) => {
   const { maintainers, categories } = useMemo(() => {
     const maintainers = new Set<string>()
     const categories = new Set<string>()
@@ -34,13 +35,13 @@ export const RecommendationCard: FC<{
 
   return (
     <View className="flex-row items-center p-4 px-6">
-      <View className="overflow-hidden rounded-lg">
+      <View className="mt-1.5 flex-row self-start overflow-hidden rounded-lg">
         <FeedIcon siteUrl={`https://${data.url}`} size={28} />
       </View>
       <View className="ml-2 flex-1">
         <Text className="text-text text-base font-medium">{data.name}</Text>
         {/* Maintainers */}
-        <View className="flex-row items-center">
+        <View className="flex-row flex-wrap items-center">
           {maintainers.map((m) => (
             <ContextMenu
               key={m}
@@ -90,6 +91,15 @@ export const RecommendationCard: FC<{
         <Grid columns={2} gap={8} className="mt-2">
           {Object.keys(data.routes).map((route) => (
             <TouchableOpacity
+              onPress={() => {
+                router.push({
+                  pathname: "/rsshub-form",
+                  params: {
+                    url: data.url,
+                    route,
+                  },
+                })
+              }}
               key={route}
               className="bg-gray-5 h-10 flex-row items-center justify-center overflow-hidden rounded px-2"
             >
@@ -102,4 +112,4 @@ export const RecommendationCard: FC<{
       </View>
     </View>
   )
-}
+})

apps/mobile/src/modules/discover/recommendations.tsx

@@ -16,19 +16,17 @@ import { TabView } from "@/src/components/ui/tabview"
 import { apiClient } from "@/src/lib/api-fetch"
 
 import { RSSHubCategoryCopyMap } from "./copy"
-import { RecommendationCard } from "./recommendation-card"
+import { RecommendationListItem } from "./recommendation-item"
 
 export const Recommendations = () => {
   const headerHeight = useHeaderHeight()
-  const tabHeight = useBottomTabBarHeight()
 
   return (
     <TabView
       lazyOnce
       lazyTab
       Tab={Tab}
       tabbarStyle={{ paddingTop: headerHeight }}
-      scrollerContainerStyle={{ paddingBottom: tabHeight }}
       tabs={RSSHubCategories.map((category) => ({
         name: RSSHubCategoryCopyMap[category],
         value: category,
@@ -66,6 +64,8 @@ const fetchRsshubPopular = (category: DiscoverCategories, lang: Language) => {
 }
 
 const Tab: TabComponent = ({ tab }) => {
+  const tabHeight = useBottomTabBarHeight()
+
   const { data, isLoading } = useQuery({
     queryKey: ["rsshub-popular", tab.value],
     queryFn: () => fetchRsshubPopular(tab.value, "all").then((res) => res.data),
@@ -157,6 +157,8 @@ const Tab: TabComponent = ({ tab }) => {
         keyExtractor={keyExtractor}
         getItemType={getItemType}
         renderItem={ItemRenderer}
+        contentContainerStyle={{ paddingBottom: tabHeight }}
+        removeClippedSubviews
       />
 
       {/* Right Sidebar */}
@@ -180,8 +182,8 @@ const ItemRenderer = ({
   } else {
     // Render item
     return (
-      <View className="mr-6">
-        <RecommendationCard data={item.data} />
+      <View className="mr-4">
+        <RecommendationListItem data={item.data} />
       </View>
     )
   }

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

@@ -7,7 +7,7 @@ import { router } from "expo-router"
 import { useAtom } from "jotai"
 import { useColorScheme } from "nativewind"
 import type { FC } from "react"
-import { createContext, memo, useContext, useEffect, useRef } from "react"
+import { createContext, memo, useContext, useEffect, useMemo, useRef } from "react"
 import {
   Animated,
   Easing,
@@ -107,7 +107,10 @@ const RecycleList = ({ view }: { view: FeedViewType }) => {
   const sortOrder = useFeedListSortOrder()
   const sortedGrouped = useSortedGroupedSubscription(grouped, sortBy, sortOrder)
   const sortedUnGrouped = useSortedUngroupedSubscription(unGrouped, sortBy, sortOrder)
-  const data = [...sortedGrouped, ...sortedUnGrouped]
+  const data = useMemo(
+    () => [...sortedGrouped, ...sortedUnGrouped],
+    [sortedGrouped, sortedUnGrouped],
+  )
 
   return (
     <FlashList

apps/mobile/src/screens/(modal)/_layout.tsx

@@ -0,0 +1,20 @@
+import { Stack } from "expo-router"
+
+export default function ModalLayout() {
+  return (
+    <Stack>
+      <Stack.Screen
+        name="add"
+        options={{
+          title: "Add Subscription",
+        }}
+      />
+      <Stack.Screen
+        name="rsshub-form"
+        options={{
+          title: "RSSHub Form",
+        }}
+      />
+    </Stack>
+  )
+}

apps/mobile/src/screens/(stack)/add.tsx → apps/mobile/src/screens/(modal)/add.tsx

@@ -1,8 +1,8 @@
-import { router, Stack } from "expo-router"
+import { Stack } from "expo-router"
 import { useState } from "react"
 import { Text, TextInput, TouchableOpacity, View } from "react-native"
 
-import { CloseCuteReIcon } from "@/src/icons/close_cute_re"
+import { ModalHeaderCloseButton } from "@/src/components/common/ModalSharedComponents"
 import { Search2CuteReIcon } from "@/src/icons/search_2_cute_re"
 import { useColor } from "@/src/theme/colors"
 
@@ -16,11 +16,8 @@ export default function Add() {
       <Stack.Screen
         options={{
           gestureEnabled: !url,
-          headerLeft: () => (
-            <TouchableOpacity onPress={() => router.dismiss()}>
-              <CloseCuteReIcon color={label} />
-            </TouchableOpacity>
-          ),
+          headerLeft: ModalHeaderCloseButton,
+          presentation: "modal",
           headerRight: () => (
             <TouchableOpacity
               onPress={() => {

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

@@ -0,0 +1,12 @@
+import { Stack } from "expo-router"
+import { View } from "react-native"
+
+import { ModalHeaderCloseButton } from "@/src/components/common/ModalSharedComponents"
+
+export default function RsshubForm() {
+  return (
+    <View>
+      <Stack.Screen options={{ headerLeft: ModalHeaderCloseButton }} />
+    </View>
+  )
+}

apps/mobile/src/screens/(stack)/_layout.tsx

@@ -6,15 +6,6 @@ export default function AppRootLayout() {
       screenOptions={{
         headerShown: false,
       }}
-    >
-      <Stack.Screen
-        name="add"
-        options={{
-          headerShown: true,
-          presentation: "modal",
-          title: "Add Subscription",
-        }}
-      />
-    </Stack>
+    />
   )
 }

apps/mobile/src/screens/_layout.tsx

@@ -24,6 +24,7 @@ export default function RootLayout() {
       >
         <Stack.Screen name="(stack)" options={{ headerShown: false }} />
         <Stack.Screen name="(headless)" options={{ headerShown: false }} />
+        <Stack.Screen name="(modal)" options={{ headerShown: false, presentation: "modal" }} />
       </Stack>
 
       {/* {__DEV__ && <DebugButton />} */}