feat(mobile): smaller trending feed card

DIYgod · DIYgod · commit 05a427596ad6 · 2025-05-16T11:43:03.000+08:00
diff --git a/apps/mobile/src/icons/filter_cute_re.tsx b/apps/mobile/src/icons/filter_cute_re.tsx
@@ -0,0 +1,24 @@
+import * as React from "react"
+import Svg, { Path } from "react-native-svg"
+
+interface FilterCuteReIconProps {
+  width?: number
+  height?: number
+  color?: string
+}
+
+export const FilterCuteReIcon = ({
+  width = 24,
+  height = 24,
+  color = "#10161F",
+}: FilterCuteReIconProps) => {
+  return (
+    <Svg width={width} height={height} fill="none" viewBox="0 0 24 24">
+      <Path
+        d="M4.767 3.043c-.498.065-.847.23-1.17.554-.253.253-.405.52-.508.894-.102.37-.1 2.172.002 2.549.168.615.428 1.012 1.418 2.165.79.919 1.894 2.047 2.763 2.825 1.323 1.182 1.557 1.405 1.632 1.558.071.143.077.305.098 2.652.021 2.398.025 2.51.105 2.749.247.734.616 1.028 2.241 1.79.399.187.881.385 1.073.44.414.12.891.135 1.22.037.435-.129.853-.49 1.057-.911.264-.544.299-1.013.301-4.03 0-1.37.017-2.39.041-2.516a.969.969 0 0 1 .142-.345c.056-.074.582-.563 1.17-1.088 1.953-1.744 3.906-3.885 4.347-4.765.248-.496.28-.703.28-1.841 0-.841-.012-1.064-.068-1.269-.196-.712-.664-1.186-1.38-1.401-.215-.064-.728-.069-7.371-.075-3.927-.003-7.254.009-7.393.028M18.992 5.64c.016.807-.008.989-.157 1.216-.228.343-1.373 1.645-2.093 2.379-.67.682-1.128 1.111-2.43 2.273-.556.496-.816.811-1.018 1.233-.264.552-.263.541-.29 3.666-.013 1.554-.037 2.839-.053 2.855-.045.045-.327-.076-1.165-.497l-.766-.385-.024-2.4c-.026-2.653-.03-2.696-.29-3.239-.226-.472-.473-.748-1.403-1.571-1.77-1.567-4.063-4.008-4.247-4.523-.055-.155-.081-1.569-.029-1.62.015-.015 3.16-.023 6.99-.017l6.963.01.012.62"
+        fill={color}
+        fillRule="evenodd"
+      />
+    </Svg>
+  )
+}
diff --git a/apps/mobile/src/modules/discover/DiscoverContent.tsx b/apps/mobile/src/modules/discover/DiscoverContent.tsx
@@ -6,6 +6,10 @@ import { useTranslation } from "react-i18next"
 import { Pressable, StyleSheet, Text, View } from "react-native"
 
 import { Grid } from "@/src/components/ui/grid"
+import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
+import { FilterCuteReIcon } from "@/src/icons/filter_cute_re"
+import { Grid2CuteReIcon } from "@/src/icons/grid_2_cute_re"
+import { TrendingUpCuteReIcon } from "@/src/icons/trending_up_cute_re"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { Recommendations } from "@/src/modules/discover/Recommendations"
 import { Trending } from "@/src/modules/discover/Trending"
@@ -14,14 +18,26 @@ import { RecommendationCategoryScreen } from "@/src/screens/(stack)/recommendati
 export function DiscoverContent() {
   return (
     <View>
-      <View className="flex-row items-center gap-1 px-6 pb-1 pt-4">
-        <Text className="text-label text-2xl font-bold leading-[1.1]">Trending</Text>
+      <View className="flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
+        <View className="flex-row items-center gap-2">
+          <TrendingUpCuteReIcon width={24} height={24} />
+          <Text className="text-label text-2xl font-bold leading-[1.1]">Trending</Text>
+        </View>
+        <ItemPressable className="rounded-lg p-1">
+          <FilterCuteReIcon width={20} height={20} />
+        </ItemPressable>
       </View>
 
       <Trending />
 
-      <View className="mt-4 flex-row items-center gap-1 px-6 pb-1 pt-4">
-        <Text className="text-label text-2xl font-bold leading-[1.1]">Categories</Text>
+      <View className="mt-4 flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
+        <View className="flex-row items-center gap-2">
+          <Grid2CuteReIcon width={24} height={24} />
+          <Text className="text-label text-2xl font-bold leading-[1.1]">Categories</Text>
+        </View>
+        <ItemPressable className="rounded-lg p-1">
+          <FilterCuteReIcon width={20} height={20} />
+        </ItemPressable>
       </View>
 
       <DiscoverGrid />
diff --git a/apps/mobile/src/modules/discover/Trending.tsx b/apps/mobile/src/modules/discover/Trending.tsx
@@ -5,7 +5,7 @@ import { Text, View } from "react-native"
 import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
 
 import { fetchFeedTrending } from "./api"
-import { TrendingFeedCard } from "./TrendingFeedCard"
+import { FeedSummary } from "./FeedSummary"
 
 export const Trending = () => {
   const { data, isLoading } = useQuery({
@@ -24,25 +24,25 @@ export const Trending = () => {
         </View>
       ) : (
         data?.map((item, index) => (
-          <View key={item.feed?.id} className="relative">
-            <TrendingFeedCard item={item} />
-            <View className="pointer-events-none absolute inset-0 left-2 overflow-hidden rounded-xl">
-              <Text
-                className={cn(
-                  "center absolute -left-5 -top-6 size-12 rounded-br-2xl pl-[26] pt-7 text-xs",
-                  index < 3
-                    ? cn(
-                        "bg-accent text-white",
-                        index === 0 && "bg-accent",
-                        index === 1 && "bg-accent/90",
-                        index === 2 && "bg-accent/80",
-                      )
-                    : "bg-gray-5/60",
-                )}
-              >
+          <View key={item.feed?.id} className="flex flex-row items-center px-6 py-3">
+            <View
+              className={cn(
+                "flex size-6 items-center justify-center rounded-full",
+                index < 3
+                  ? cn(
+                      "bg-accent text-white",
+                      index === 0 && "bg-accent",
+                      index === 1 && "bg-accent/90",
+                      index === 2 && "bg-accent/80",
+                    )
+                  : "bg-gray-5/60",
+              )}
+            >
+              <Text className={cn("text-xs font-medium", index < 3 && "text-white")}>
                 {index + 1}
               </Text>
             </View>
+            <FeedSummary item={item} className="flex-1 pl-4" simple />
           </View>
         ))
       )}
diff --git a/apps/mobile/src/modules/discover/TrendingFeedCard.tsx b/apps/mobile/src/modules/discover/TrendingFeedCard.tsx
diff --git a/icons/mgc/filter_cute_re.svg b/icons/mgc/filter_cute_re.svg
@@ -0,0 +1 @@
+<svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M4.767 3.043c-.498.065-.847.23-1.17.554-.253.253-.405.52-.508.894-.102.37-.1 2.172.002 2.549.168.615.428 1.012 1.418 2.165.79.919 1.894 2.047 2.763 2.825 1.323 1.182 1.557 1.405 1.632 1.558.071.143.077.305.098 2.652.021 2.398.025 2.51.105 2.749.247.734.616 1.028 2.241 1.79.399.187.881.385 1.073.44.414.12.891.135 1.22.037.435-.129.853-.49 1.057-.911.264-.544.299-1.013.301-4.03 0-1.37.017-2.39.041-2.516a.969.969 0 0 1 .142-.345c.056-.074.582-.563 1.17-1.088 1.953-1.744 3.906-3.885 4.347-4.765.248-.496.28-.703.28-1.841 0-.841-.012-1.064-.068-1.269-.196-.712-.664-1.186-1.38-1.401-.215-.064-.728-.069-7.371-.075-3.927-.003-7.254.009-7.393.028M18.992 5.64c.016.807-.008.989-.157 1.216-.228.343-1.373 1.645-2.093 2.379-.67.682-1.128 1.111-2.43 2.273-.556.496-.816.811-1.018 1.233-.264.552-.263.541-.29 3.666-.013 1.554-.037 2.839-.053 2.855-.045.045-.327-.076-1.165-.497l-.766-.385-.024-2.4c-.026-2.653-.03-2.696-.29-3.239-.226-.472-.473-.748-1.403-1.571-1.77-1.567-4.063-4.008-4.247-4.523-.055-.155-.081-1.569-.029-1.62.015-.015 3.16-.023 6.99-.017l6.963.01.012.62" fill="#10161F" fill-rule="evenodd"/></svg>
