feat(mobile): handle empty entry list

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>
+  )
+}

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>>}