From d237ad1b9d18870af932baff6a9eda5bcabfd4eb Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 3 Apr 2025 21:20:44 +0800
Subject: [PATCH] feat(mobile): handle empty entry list

---
 .../src/modules/entry-list/EntryListEmpty.tsx | 25 ++++++++++++
 .../modules/screen/TimelineSelectorList.tsx   | 38 +++++++++++++------
 2 files changed, 51 insertions(+), 12 deletions(-)
 create mode 100644 apps/mobile/src/modules/entry-list/EntryListEmpty.tsx

diff --git a/apps/mobile/src/modules/entry-list/EntryListEmpty.tsx b/apps/mobile/src/modules/entry-list/EntryListEmpty.tsx
new file mode 100644
index 000000000..e854c587d
--- /dev/null
+++ b/apps/mobile/src/modules/entry-list/EntryListEmpty.tsx
@@ -0,0 +1,25 @@
+import { Text, View } from "react-native"
+
+import { useGeneralSettingKey } from "@/src/atoms/settings/general"
+import { CelebrateCuteReIcon } from "@/src/icons/celebrate_cute_re"
+import { useColor } from "@/src/theme/colors"
+
+export const EntryListEmpty = () => {
+  const unreadOnly = useGeneralSettingKey("unreadOnly")
+  const color = useColor("secondaryLabel")
+
+  return (
+    <View className="flex-1 items-center justify-center gap-2">
+      {unreadOnly ? (
+        <>
+          <CelebrateCuteReIcon height={30} width={30} color={color} />
+          <Text className="text-lg font-medium" style={{ color }}>
+            Zero Unread
+          </Text>
+        </>
+      ) : (
+        <Text style={{ color }}>No entries</Text>
+      )}
+    </View>
+  )
+}
diff --git a/apps/mobile/src/modules/screen/TimelineSelectorList.tsx b/apps/mobile/src/modules/screen/TimelineSelectorList.tsx
index bda416861..080573fc7 100644
--- a/apps/mobile/src/modules/screen/TimelineSelectorList.tsx
+++ b/apps/mobile/src/modules/screen/TimelineSelectorList.tsx
@@ -19,6 +19,8 @@ import { useHeaderHeight } from "@/src/modules/screen/hooks/useHeaderHeight"
 import { usePrefetchSubscription } from "@/src/store/subscription/hooks"
 import { usePrefetchUnread } from "@/src/store/unread/hooks"
 
+import { EntryListEmpty } from "../entry-list/EntryListEmpty"
+
 type Props = {
   onRefresh: () => void
   isRefetching: boolean
@@ -48,23 +50,31 @@ export const TimelineSelectorList = forwardRef<
 
   const systemFill = useColor("secondaryLabel")
 
+  const onLayout = useTypeScriptHappyCallback(
+    (e) => {
+      scrollViewHeight.value = e.nativeEvent.layout.height - headerHeight - tabBarHeight
+    },
+    [scrollViewHeight],
+  ) as FlashListProps<any>["onLayout"]
+
+  const onContentSizeChange = useTypeScriptHappyCallback(
+    (w, h) => {
+      scrollViewContentHeight.value = h
+    },
+    [scrollViewContentHeight],
+  ) as FlashListProps<any>["onContentSizeChange"]
+
+  if (props.data?.length === 0) {
+    return <EntryListEmpty />
+  }
+
   return (
     <FlashList
       automaticallyAdjustsScrollIndicatorInsets={false}
       automaticallyAdjustContentInsets={false}
       ref={ref}
-      onLayout={useTypeScriptHappyCallback(
-        (e) => {
-          scrollViewHeight.value = e.nativeEvent.layout.height - headerHeight - tabBarHeight
-        },
-        [scrollViewHeight],
-      )}
-      onContentSizeChange={useTypeScriptHappyCallback(
-        (w, h) => {
-          scrollViewContentHeight.value = h
-        },
-        [scrollViewContentHeight],
-      )}
+      onLayout={onLayout}
+      onContentSizeChange={onContentSizeChange}
       refreshControl={
         <RefreshControl
           progressViewOffset={headerHeight}
@@ -118,6 +128,10 @@ export const TimelineSelectorMasonryList = forwardRef<
 
   const systemFill = useColor("secondaryLabel")
 
+  if (props.data?.length === 0) {
+    return <EntryListEmpty />
+  }
+
   return (
     <MasonryFlashList
       ref={ref as RefObject<MasonryFlashListRef<any>>}