From 0227427d295cf8f7e8a5b04ff396929b3d18e052 Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Fri, 10 Jan 2025 22:48:54 +0800
Subject: [PATCH] feat(search): enhance search components with new styles and
 functionality

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../discover/search-tabs/SearchFeed.tsx       | 20 +++++++++++++++++--
 .../modules/discover/search-tabs/__base.tsx   | 15 ++++++++++----
 apps/mobile/src/modules/discover/search.tsx   |  2 +-
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/apps/mobile/src/modules/discover/search-tabs/SearchFeed.tsx b/apps/mobile/src/modules/discover/search-tabs/SearchFeed.tsx
index 64596fc084..6f9c430631 100644
--- a/apps/mobile/src/modules/discover/search-tabs/SearchFeed.tsx
+++ b/apps/mobile/src/modules/discover/search-tabs/SearchFeed.tsx
@@ -1,4 +1,5 @@
 import { FeedViewType } from "@follow/constants"
+import { withOpacity } from "@follow/utils"
 import { useQuery } from "@tanstack/react-query"
 import { Image } from "expo-image"
 import { router } from "expo-router"
@@ -11,8 +12,10 @@ import Animated, { FadeInUp } from "react-native-reanimated"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 import { LoadingIndicator } from "@/src/components/ui/loading"
 import { ItemPressable } from "@/src/components/ui/pressable/item-pressable"
+import { SadCuteReIcon } from "@/src/icons/sad_cute_re"
 import { apiClient } from "@/src/lib/api-fetch"
 import { useSubscriptionByFeedId } from "@/src/store/subscription/hooks"
+import { useColor } from "@/src/theme/colors"
 
 import { useSearchPageContext } from "../ctx"
 import { BaseSearchPageFlatList, BaseSearchPageRootView, BaseSearchPageScrollView } from "./__base"
@@ -36,10 +39,23 @@ export const SearchFeed = () => {
     enabled: !!searchValue,
   })
 
+  const textColor = useColor("text")
+
   if (isLoading) {
     return (
-      <BaseSearchPageRootView>
-        <LoadingIndicator color="#fff" size={32} />
+      <BaseSearchPageRootView className="items-center justify-center">
+        <View className="-mt-72" />
+        <LoadingIndicator color={withOpacity(textColor, 0.7)} size={32} />
+      </BaseSearchPageRootView>
+    )
+  }
+
+  if (data?.data.length === 0) {
+    return (
+      <BaseSearchPageRootView className="items-center justify-center">
+        <View className="-mt-72" />
+        <SadCuteReIcon height={32} width={32} color={withOpacity(textColor, 0.5)} />
+        <Text className="text-text/50 mt-2">No results found</Text>
       </BaseSearchPageRootView>
     )
   }
diff --git a/apps/mobile/src/modules/discover/search-tabs/__base.tsx b/apps/mobile/src/modules/discover/search-tabs/__base.tsx
index cf9a5d0baf..e1b9d52d86 100644
--- a/apps/mobile/src/modules/discover/search-tabs/__base.tsx
+++ b/apps/mobile/src/modules/discover/search-tabs/__base.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@follow/utils/src/utils"
 import { forwardRef } from "react"
 import type { ScrollViewProps } from "react-native"
 import { RefreshControl, ScrollView, useWindowDimensions, View } from "react-native"
@@ -29,13 +30,19 @@ export const BaseSearchPageScrollView = forwardRef<ScrollView, ScrollViewProps>(
   },
 )
 
-export const BaseSearchPageRootView = ({ children }: { children: React.ReactNode }) => {
+export const BaseSearchPageRootView = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode
+  className?: string
+}) => {
   const windowWidth = useWindowDimensions().width
-  const insets = useSafeAreaInsets()
+
   const searchBarHeight = useSearchBarHeight()
-  const offsetTop = searchBarHeight - insets.top
+  const offsetTop = searchBarHeight
   return (
-    <View className="flex-1" style={{ paddingTop: offsetTop, width: windowWidth }}>
+    <View className={cn("flex-1", className)} style={{ paddingTop: offsetTop, width: windowWidth }}>
       {children}
     </View>
   )
diff --git a/apps/mobile/src/modules/discover/search.tsx b/apps/mobile/src/modules/discover/search.tsx
index 6f13898ac0..2d29d0d127 100644
--- a/apps/mobile/src/modules/discover/search.tsx
+++ b/apps/mobile/src/modules/discover/search.tsx
@@ -38,7 +38,7 @@ export const SearchHeader: FC<{
       className="relative"
       onLayout={onLayout}
     >
-      <BlurEffect />
+      {/* <BlurEffect /> */}
       <View style={styles.header}>
         <ComposeSearchBar />
       </View>