RSSNext
diff --git a/‎apps/mobile/src/components/ui/grouped/GroupedList.tsx
Copy file name to clipboard
+8-3Lines changed: 8 additions & 3 deletions b/‎apps/mobile/src/components/ui/grouped/GroupedList.tsx
Copy file name to clipboard
+8-3Lines changed: 8 additions & 3 deletions
diff --git a/‎apps/mobile/src/components/ui/icon/feed-icon.tsx
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎apps/mobile/src/components/ui/icon/feed-icon.tsx
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/mobile/src/lib/image.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎apps/mobile/src/lib/image.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/mobile/src/modules/discover/RecommendationListItem.tsx
Copy file name to clipboard
+43-94Lines changed: 43 additions & 94 deletions b/‎apps/mobile/src/modules/discover/RecommendationListItem.tsx
Copy file name to clipboard
+43-94Lines changed: 43 additions & 94 deletions
@@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from "react"
 import * as React from "react"
 import { Fragment } from "react"
 import type { PressableProps, ViewProps } from "react-native"
-import { Pressable, StyleSheet, Text, View } from "react-native"
+import { Pressable, StyleSheet, Text, TouchableOpacity, View } from "react-native"
 import Animated, { FadeIn, FadeOut } from "react-native-reanimated"
 import type { SFSymbol } from "sf-symbols-typescript"
 
@@ -195,10 +195,15 @@ export const GroupedInsetListCell: FC<
     description?: string
     children?: React.ReactNode
     icon?: SFSymbol
+    onPress?: () => void
   } & BaseCellClassNames
-> = ({ label, description, children, leftClassName, rightClassName, icon }) => {
+> = ({ label, description, children, leftClassName, rightClassName, icon, onPress }) => {
   return (
-    <GroupedInsetListBaseCell className="bg-secondary-system-grouped-background flex-1">
+    <GroupedInsetListBaseCell
+      className="bg-secondary-system-grouped-background flex-1"
+      as={onPress ? TouchableOpacity : undefined}
+      {...(onPress ? { onPress } : {})}
+    >
       <View className={cn("flex-1 gap-1", leftClassName)}>
         <View className="flex-row items-center gap-2">
           {!!icon && <SymbolView name={icon} size={20} tintColor="black" />}
 
@@ -35,7 +35,7 @@ export function FeedIcon({
   fallbackUrl,
   className,
   size = 20,
-  fallback = true,
+  fallback,
   fallbackElement,
   siteUrl,
   ...props
 
@@ -8,7 +8,7 @@ import type { FeedIconFeed } from "../components/ui/icon/feed-icon"
 export const getFeedIconSource = (
   feed?: FeedIconFeed,
   siteUrl?: string,
-  fallback = true,
+  fallback = false,
 ): string | undefined => {
   switch (true) {
     case !feed && !!siteUrl: {
 
@@ -3,141 +3,90 @@ import type { RSSHubRouteDeclaration } from "@follow/models/rsshub"
 import type { FC } from "react"
 import { memo, useMemo } from "react"
 import { useTranslation } from "react-i18next"
-import { Clipboard, Text, TouchableOpacity, View } from "react-native"
-import WebView from "react-native-webview"
-import * as ContextMenu from "zeego/context-menu"
+import { Text, View } from "react-native"
 
-import { Grid } from "@/src/components/ui/grid"
+import { GroupedInsetListCard, GroupedInsetListCell } from "@/src/components/ui/grouped/GroupedList"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
-import { openLink } from "@/src/lib/native"
+import { FireCuteReIcon } from "@/src/icons/fire_cute_re"
 import { useNavigation } from "@/src/lib/navigation/hooks"
-import { toast } from "@/src/lib/toast"
 import { RsshubFormScreen } from "@/src/screens/(modal)/RsshubFormScreen"
 
 export const RecommendationListItem: FC<{
   data: RSSHubRouteDeclaration
   routePrefix: string
 }> = memo(({ data, routePrefix }) => {
   const { t } = useTranslation("common")
-  const { maintainers, categories } = useMemo(() => {
-    const maintainers = new Set<string>()
+  const { categories } = useMemo(() => {
     const categories = new Set<string>()
     for (const route in data.routes) {
       const routeData = data.routes[route]!
-      if (routeData.maintainers) {
-        routeData.maintainers.forEach((m) => maintainers.add(m))
-      }
       if (routeData.categories) {
         routeData.categories.forEach((c) => categories.add(c))
       }
     }
     categories.delete("popular")
     return {
-      maintainers: Array.from(maintainers),
       categories: Array.from(categories) as unknown as typeof RSSHubCategories,
     }
   }, [data])
 
   const navigation = useNavigation()
 
   return (
-    <View className="flex-row items-center p-4 px-6">
-      <View className="mt-1.5 flex-row self-start overflow-hidden rounded-lg">
-        <FeedIcon siteUrl={`https://${data.url}`} size={28} />
-      </View>
-      <View className="ml-3 flex-1">
-        <View className="flex-row items-center justify-between gap-4">
+    <View className="py-4">
+      <View className="mt-1.5 flex-row justify-between overflow-hidden px-6">
+        <View className="flex-row items-center gap-3">
+          <FeedIcon siteUrl={`https://${data.url}`} size={24} />
           <Text className="text-text text-lg font-medium">{data.name}</Text>
+        </View>
+        <View className="flex-row items-center justify-between gap-4">
           {/* Tags */}
           <View className="shrink flex-row items-center">
             {categories.map((c) => (
               <View
-                className="bg-gray-6 mr-1 items-center justify-center overflow-hidden rounded-full px-3 py-1"
+                className="bg-system-fill mr-1 items-center justify-center overflow-hidden rounded-full px-3 py-1"
                 key={c}
               >
-                <Text className="text-text/60 text-xs" numberOfLines={1}>
+                <Text className="text-text/70 text-xs" numberOfLines={1}>
                   {t(`discover.category.${c}`)}
                 </Text>
               </View>
             ))}
           </View>
         </View>
-        {/* Maintainers */}
-        <View className="mb-1 flex-row flex-wrap items-center">
-          {maintainers.map((m) => (
-            <ContextMenu.Root key={m}>
-              <ContextMenu.Trigger asChild>
-                <View className="bg-system-background mr-1 rounded-full">
-                  <Text className="text-secondary-label text-sm">@{m}</Text>
-                </View>
-              </ContextMenu.Trigger>
-
-              <ContextMenu.Content>
-                <ContextMenu.Preview size="STRETCH">
-                  {() => <WebView source={{ uri: `https://github.com/${m}` }} />}
-                </ContextMenu.Preview>
-
-                <ContextMenu.Item
-                  key="copyMaintainerName"
-                  onSelect={() => {
-                    Clipboard.setString(m)
-                    toast.success("Name copied to clipboard")
-                  }}
-                >
-                  <ContextMenu.ItemTitle>Copy Maintainer Name</ContextMenu.ItemTitle>
-                  <ContextMenu.ItemIcon
-                    ios={{
-                      name: "doc.on.doc",
-                    }}
-                  />
-                </ContextMenu.Item>
-
-                <ContextMenu.Item
-                  key="openMaintainerProfile"
-                  onSelect={() => {
-                    openLink(`https://github.com/${m}`)
-                  }}
-                >
-                  <ContextMenu.ItemTitle>Open Maintainer's Profile</ContextMenu.ItemTitle>
-                  <ContextMenu.ItemIcon
-                    ios={{
-                      name: "link",
-                    }}
-                  />
-                </ContextMenu.Item>
-              </ContextMenu.Content>
-            </ContextMenu.Root>
-          ))}
-        </View>
-
-        {/* Items */}
-
-        <Grid columns={2} gap={8} className="mt-1">
-          {Object.keys(data.routes).map((route) => (
-            <View className="relative" key={route}>
-              <TouchableOpacity
-                onPress={() => {
-                  navigation.presentControllerView(RsshubFormScreen, {
-                    routePrefix,
-                    route: data.routes[route]!,
-                    name: data.name,
-                  })
-                }}
-                className="bg-gray-6 h-10 flex-row items-center justify-center overflow-hidden rounded-xl px-2"
-              />
-              <View className="absolute inset-2 items-center justify-center" pointerEvents="none">
-                <Text
-                  ellipsizeMode="middle"
-                  numberOfLines={1}
-                  className="text-text whitespace-pre font-medium"
-                >
-                  {data.routes[route]!.name}
-                </Text>
+      </View>
+      <GroupedInsetListCard className="mt-5">
+        {Object.keys(data.routes)
+          .sort((a, b) => (data.routes[b]!.heat || 0) - (data.routes[a]!.heat || 0))
+          .map((route) => (
+            <GroupedInsetListCell
+              key={route}
+              label={data.routes[route]!.name}
+              onPress={() => {
+                navigation.presentControllerView(RsshubFormScreen, {
+                  routePrefix,
+                  route: data.routes[route]!,
+                  name: data.name,
+                })
+              }}
+            >
+              <View className="flex-row items-center gap-1">
+                {data.routes[route]!.heat && (
+                  <>
+                    <FireCuteReIcon width={12} height={12} />
+                    <Text
+                      ellipsizeMode="middle"
+                      numberOfLines={1}
+                      className="text-text/70 whitespace-pre text-sm"
+                    >
+                      {data.routes[route]!.heat}
+                    </Text>
+                  </>
+                )}
               </View>
-            </View>
+            </GroupedInsetListCell>
           ))}
-        </Grid>
-      </View>
+      </GroupedInsetListCard>
     </View>
   )
 })