feat(mobile): optimize discover styles

RSSNext · Feb 26, 2025 · ee01f9a · ee01f9a
1 parent ec8f0a9
commit ee01f9a
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 43 deletions.
diff --git a/apps/mobile/src/components/ui/tabview/TabBar.tsx b/apps/mobile/src/components/ui/tabview/TabBar.tsx
@@ -147,12 +147,12 @@ export const TabBar = forwardRef<ScrollView, TabBarProps>(
       const { width, x } = event.nativeEvent.layout
       setTabWidths((prev) => {
         const newWidths = [...prev]
-        newWidths[index] = width
+        newWidths[index] = width - 16
         return newWidths
       })
       setTabPositions((prev) => {
         const newPositions = [...prev]
-        newPositions[index] = x
+        newPositions[index] = x + 12
         return newPositions
       })
     }, [])
@@ -197,17 +197,19 @@ export const TabBar = forwardRef<ScrollView, TabBarProps>(
         contentContainerStyle={styles.tabScroller}
         style={[styles.root, tabbarStyle]}
       >
-        {tabs.map((tab, index) => (
-          <TarBarItem
-            TabItem={TabItem}
-            key={tab.value}
-            index={index}
-            onTabItemPress={handleChangeTabIndex}
-            onLayout={handleTabItemLayout}
-            isSelected={currentTab === index}
-            tab={tab}
-          />
-        ))}
+        <View className="flex-row gap-x-3">
+          {tabs.map((tab, index) => (
+            <TarBarItem
+              TabItem={TabItem}
+              key={tab.value}
+              index={index}
+              onTabItemPress={handleChangeTabIndex}
+              onLayout={handleTabItemLayout}
+              isSelected={currentTab === index}
+              tab={tab}
+            />
+          ))}
+        </View>
 
         <Animated.View style={[styles.indicator, indicatorStyle]} />
       </ScrollView>
@@ -234,8 +236,11 @@ const styles = StyleSheet.create({
 const TabItemInner = ({ tab, isSelected }: { tab: Tab; isSelected: boolean }) => {
   const gray = useColor("gray")
   return (
-    <View className="p-2">
-      <Text style={{ color: isSelected ? accentColor : gray }} className="text-[15px] leading-none">
+    <View className="px-3 py-2">
+      <Text
+        style={{ color: isSelected ? accentColor : gray }}
+        className={cn("text-[15px] leading-none", isSelected ? "font-bold" : "font-medium")}
+      >
         {tab.name}
       </Text>
     </View>

diff --git a/apps/mobile/src/modules/discover/RecommendationListItem.tsx b/apps/mobile/src/modules/discover/RecommendationListItem.tsx
@@ -42,8 +42,23 @@ export const RecommendationListItem: FC<{
       <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>
+      <View className="ml-3 flex-1">
+        <View className="flex-row items-center justify-between gap-4">
+          <Text className="text-text text-lg font-medium">{data.name}</Text>
+          {/* 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"
+                key={c}
+              >
+                <Text className="text-text/60 text-xs" numberOfLines={1}>
+                  {RSSHubCategoryCopyMap[c as keyof typeof RSSHubCategoryCopyMap]}
+                </Text>
+              </View>
+            ))}
+          </View>
+        </View>
         {/* Maintainers */}
         <View className="mb-1 flex-row flex-wrap items-center">
           {maintainers.map((m) => (
@@ -91,23 +106,10 @@ export const RecommendationListItem: FC<{
             </ContextMenu.Root>
           ))}
         </View>
-        {/* Tags */}
-        <View className="mt-0.5 flex-row items-center">
-          {categories.map((c) => (
-            <View
-              className="bg-gray-5 mr-1 items-center justify-center overflow-hidden rounded-lg px-2 py-1"
-              key={c}
-            >
-              <Text className="text-text/60 text-sm leading-none">
-                {RSSHubCategoryCopyMap[c as keyof typeof RSSHubCategoryCopyMap]}
-              </Text>
-            </View>
-          ))}
-        </View>
 
         {/* Items */}
 
-        <Grid columns={2} gap={8} className="mt-2">
+        <Grid columns={2} gap={8} className="mt-1">
           {Object.keys(data.routes).map((route) => (
             <View className="relative" key={route}>
               <TouchableOpacity
@@ -121,10 +123,14 @@ export const RecommendationListItem: FC<{
                     },
                   })
                 }}
-                className="bg-gray-5 h-10 flex-row items-center justify-center overflow-hidden rounded px-2"
+                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">
+                <Text
+                  ellipsizeMode="middle"
+                  numberOfLines={1}
+                  className="text-text whitespace-pre font-medium"
+                >
                   {data.routes[route]!.name}
                 </Text>
               </View>

diff --git a/apps/mobile/src/modules/discover/Recommendations.tsx b/apps/mobile/src/modules/discover/Recommendations.tsx
@@ -225,8 +225,8 @@ const ItemRenderer = ({
   if (typeof item === "string") {
     // Rendering header
     return (
-      <View className="border-b-opaque-separator border-b-hairline mx-6 mb-1 mt-2 pb-1">
-        <Text className="text-secondary-label text-base">{item}</Text>
+      <View className="border-b-opaque-separator mx-6 mb-1 mt-6 pb-1">
+        <Text className="text-label text-xl font-semibold">{item}</Text>
       </View>
     )
   } else {

diff --git a/apps/mobile/src/modules/discover/search.tsx b/apps/mobile/src/modules/discover/search.tsx
@@ -14,7 +14,6 @@ import Animated, {
 } from "react-native-reanimated"
 import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context"
 
-import { BlurEffect } from "@/src/components/common/BlurEffect"
 import { TabBar } from "@/src/components/ui/tabview/TabBar"
 import { Search2CuteReIcon } from "@/src/icons/search_2_cute_re"
 import { accentColor, useColor } from "@/src/theme/colors"
@@ -39,7 +38,6 @@ export const SearchHeader: FC<{
       className="relative"
       onLayout={onLayout}
     >
-      <BlurEffect />
       <View style={styles.header}>
         <ComposeSearchBar />
       </View>
@@ -58,16 +56,16 @@ const DiscoverHeaderImpl = () => {
   const { animatedX, currentTabAtom, headerHeightAtom } = useContext(DiscoverContext)
   const setCurrentTab = useSetAtom(currentTabAtom)
   const setHeaderHeight = useSetAtom(headerHeightAtom)
+  const bgColor = useColor("systemBackground")
 
   return (
     <View
-      style={{ minHeight: headerHeight, paddingTop: insets.top }}
+      style={{ minHeight: headerHeight, paddingTop: insets.top, backgroundColor: bgColor }}
       className="relative"
       onLayout={(e) => {
         setHeaderHeight(e.nativeEvent.layout.height)
       }}
     >
-      <BlurEffect />
       <View style={[styles.header, styles.discoverHeader]}>
         <PlaceholerSearchBar />
 
@@ -86,6 +84,7 @@ const DiscoverHeaderImpl = () => {
         onTabItemPress={(index) => {
           setCurrentTab(index)
         }}
+        tabbarClassName="border-b border-b-quaternary-system-fill"
       />
     </View>
   )
@@ -133,7 +132,7 @@ const ComposeSearchBar = () => {
           }
         }}
       >
-        <Text className="ml-2 text-accent">Cancel</Text>
+        <Text className="ml-3 text-lg font-medium text-accent">Cancel</Text>
       </TouchableOpacity>
     </>
   )
@@ -251,9 +250,8 @@ const styles = StyleSheet.create({
   header: {
     flex: 1,
     alignItems: "center",
-    marginTop: -3,
     flexDirection: "row",
-    marginBottom: 6,
+    marginBottom: 14,
     marginHorizontal: 16,
     position: "relative",
   },
@@ -269,7 +267,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 50,
-    height: 32,
+    height: 40,
     position: "relative",
   },
   searchInput: {