refactor(mobile): remove horizontal scrolling checks from various components

- Updated multiple components to eliminate unnecessary horizontal scrolling checks before executing actions.
- Enhanced the ErrorBoundary component to apply a text style to error messages.
- Improved code readability and maintainability by streamlining the logic in EntryNormalItem, EntrySocialItem, and other related components.

Signed-off-by: Innei <tukon479@gmail.com>

apps/mobile/src/components/common/ErrorBoundary.tsx

@@ -34,7 +34,7 @@ export const ErrorBoundary = ({
 const defaultFallbackRender = ({ error }: { error: Error }) => {
   return (
     <View className="flex-1 items-center justify-center">
-      <Text>{error.message}</Text>
+      <Text className="text-label">{error.message}</Text>
     </View>
   )
 }

apps/mobile/src/components/layouts/header/NavigationHeader.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@follow/utils"
+import { EventBus } from "@follow/utils/src/event-bus"
 import type { FC, PropsWithChildren, ReactNode } from "react"
 import {
   createElement,
@@ -35,7 +36,6 @@ import {
   useScreenIsInSheetModal,
 } from "@/src/lib/navigation/hooks"
 import { ScreenItemContext } from "@/src/lib/navigation/ScreenItemContext"
-import { useHorizontalScrolling } from "@/src/modules/screen/atoms"
 
 import { ThemedBlurView } from "../../common/ThemedBlurView"
 import { PlatformActivityIndicator } from "../../ui/loading/PlatformActivityIndicator"
@@ -105,12 +105,11 @@ const useHideableBottom = (
     },
   )
 
-  const horizontalScrolling = useHorizontalScrolling()
   useEffect(() => {
-    if (horizontalScrolling) {
+    EventBus.subscribe("SELECT_TIMELINE", () => {
       largeHeaderHeight.value = withTiming(largeDefaultHeaderHeightRef.current)
-    }
-  }, [horizontalScrolling, largeHeaderHeight])
+    })
+  }, [largeHeaderHeight])
 
   const layoutHeightOnceRef = useRef(false)
   const onLayout = useCallback(

apps/mobile/src/modules/context-menu/entry.tsx

@@ -12,7 +12,6 @@ import {
 import { ContextMenu } from "@/src/components/ui/context-menu"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { toast } from "@/src/lib/toast"
-import { getHorizontalScrolling } from "@/src/modules/screen/atoms"
 import { EntryDetailScreen } from "@/src/screens/(stack)/entries/[entryId]/EntryDetailScreen"
 import { useIsEntryStarred } from "@/src/store/collection/hooks"
 import { collectionSyncService } from "@/src/store/collection/store"
@@ -31,8 +30,7 @@ export const EntryItemContextMenu = ({
 
   const navigation = useNavigation()
   const handlePressPreview = useCallback(() => {
-    const isHorizontalScrolling = getHorizontalScrolling()
-    if (entry && !isHorizontalScrolling) {
+    if (entry) {
       preloadWebViewEntry(entry)
       navigation.pushControllerView(EntryDetailScreen, {
         entryId: id,

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -17,7 +17,6 @@ import { PauseCuteFiIcon } from "@/src/icons/pause_cute_fi"
 import { PlayCuteFiIcon } from "@/src/icons/play_cute_fi"
 import { useNavigation } from "@/src/lib/navigation/hooks"
 import { getAttachmentState, player } from "@/src/lib/player"
-import { getHorizontalScrolling } from "@/src/modules/screen/atoms"
 import { EntryDetailScreen } from "@/src/screens/(stack)/entries/[entryId]/EntryDetailScreen"
 import { useEntry } from "@/src/store/entry/hooks"
 import { getInboxFrom } from "@/src/store/entry/utils"
@@ -36,8 +35,7 @@ export const EntryNormalItem = memo(
     const feed = useFeed(entry?.feedId as string)
     const navigation = useNavigation()
     const handlePress = useCallback(() => {
-      const isHorizontalScrolling = getHorizontalScrolling()
-      if (entry && !isHorizontalScrolling) {
+      if (entry) {
         preloadWebViewEntry(entry)
         tracker.navigateEntry({
           feedId: entry.feedId!,

apps/mobile/src/modules/entry-list/templates/EntrySocialItem.tsx

@@ -12,7 +12,6 @@ import { Image } from "@/src/components/ui/image/Image"
 import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { useNavigation } from "@/src/lib/navigation/hooks"
-import { getHorizontalScrolling } from "@/src/modules/screen/atoms"
 import { EntryDetailScreen } from "@/src/screens/(stack)/entries/[entryId]/EntryDetailScreen"
 import { FeedScreen } from "@/src/screens/(stack)/feeds/[feedId]/FeedScreen"
 import { useEntry } from "@/src/store/entry/hooks"
@@ -32,18 +31,15 @@ export const EntrySocialItem = memo(({ entryId }: { entryId: string }) => {
 
   const navigation = useNavigation()
   const handlePress = useCallback(() => {
-    const isHorizontalScrolling = getHorizontalScrolling()
-    if (!isHorizontalScrolling) {
-      unreadSyncService.markEntryAsRead(entryId)
-      tracker.navigateEntry({
-        feedId: entry?.feedId!,
-        entryId,
-      })
-      navigation.pushControllerView(EntryDetailScreen, {
-        entryId,
-        view: FeedViewType.SocialMedia,
-      })
-    }
+    unreadSyncService.markEntryAsRead(entryId)
+    tracker.navigateEntry({
+      feedId: entry?.feedId!,
+      entryId,
+    })
+    navigation.pushControllerView(EntryDetailScreen, {
+      entryId,
+      view: FeedViewType.SocialMedia,
+    })
   }, [entry?.feedId, entryId, navigation])
 
   const autoExpandLongSocialMedia = useGeneralSettingKey("autoExpandLongSocialMedia")

apps/mobile/src/modules/screen/PagerList.tsx

@@ -10,7 +10,6 @@ import { useSharedValue } from "react-native-reanimated"
 import { selectTimeline, useSelectedFeed } from "@/src/modules/screen/atoms"
 import { useViewWithSubscription } from "@/src/store/subscription/hooks"
 
-import { setHorizontalScrolling } from "./atoms"
 import { PagerListVisibleContext, PagerListWillVisibleContext } from "./PagerListContext"
 
 const AnimatedPagerView = Animated.createAnimatedComponent<typeof PagerView>(PagerView)
@@ -96,7 +95,6 @@ export function PagerList({
           setDragging(false)
         }
 
-        setHorizontalScrolling(pageScrollState !== "idle")
         if (pageScrollState === "settling") {
           Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
         }

apps/mobile/src/modules/screen/atoms.ts

@@ -184,16 +184,3 @@ export const useViewDefinition = (view?: FeedViewType) => {
   const viewDef = useMemo(() => views.find((v) => v.view === view), [view])
   return viewDef
 }
-
-// horizontal scrolling state
-
-const horizontalScrollingAtom = atom<boolean>(false)
-
-export const setHorizontalScrolling = (value: boolean) =>
-  jotaiStore.set(horizontalScrollingAtom, value)
-
-export const getHorizontalScrolling = () => jotaiStore.get(horizontalScrollingAtom)
-
-export const useHorizontalScrolling = () => {
-  return useAtomValue(horizontalScrollingAtom)
-}

apps/mobile/src/modules/subscription/CategoryGrouped.tsx

@@ -8,7 +8,7 @@ import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { RightCuteFiIcon } from "@/src/icons/right_cute_fi"
 import { useNavigation } from "@/src/lib/navigation/hooks"
-import { closeDrawer, getHorizontalScrolling, selectFeed } from "@/src/modules/screen/atoms"
+import { closeDrawer, selectFeed } from "@/src/modules/screen/atoms"
 import { FeedScreen } from "@/src/screens/(stack)/feeds/[feedId]/FeedScreen"
 import { useUnreadCounts } from "@/src/store/unread/hooks"
 import { useColor } from "@/src/theme/colors"
@@ -50,10 +50,6 @@ export const CategoryGrouped = memo(
             <ItemPressable
               itemStyle={ItemPressableStyle.Grouped}
               onPress={() => {
-                const isHorizontalScrolling = getHorizontalScrolling()
-                if (isHorizontalScrolling) {
-                  return
-                }
                 selectFeed({
                   type: "category",
                   categoryName: category,

apps/mobile/src/modules/subscription/SubscriptionLists.tsx

@@ -19,7 +19,7 @@ import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { StarCuteFiIcon } from "@/src/icons/star_cute_fi"
 import { useNavigation } from "@/src/lib/navigation/hooks"
-import { closeDrawer, getHorizontalScrolling, selectFeed } from "@/src/modules/screen/atoms"
+import { closeDrawer, selectFeed } from "@/src/modules/screen/atoms"
 import { TimelineSelectorList } from "@/src/modules/screen/TimelineSelectorList"
 import { FeedScreen } from "@/src/screens/(stack)/feeds/[feedId]/FeedScreen"
 import { FEED_COLLECTION_LIST } from "@/src/store/entry/utils"
@@ -236,10 +236,6 @@ const StarItem = () => {
       <ItemPressable
         itemStyle={ItemPressableStyle.Grouped}
         onPress={() => {
-          const isHorizontalScrolling = getHorizontalScrolling()
-          if (isHorizontalScrolling) {
-            return
-          }
           selectFeed({ type: "feed", feedId: FEED_COLLECTION_LIST })
           closeDrawer()
           navigation.pushControllerView(FeedScreen, {

apps/mobile/src/modules/subscription/items/InboxItem.tsx

@@ -9,7 +9,7 @@ import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { InboxCuteFiIcon } from "@/src/icons/inbox_cute_fi"
 import { useNavigation } from "@/src/lib/navigation/hooks"
-import { getHorizontalScrolling, selectFeed } from "@/src/modules/screen/atoms"
+import { selectFeed } from "@/src/modules/screen/atoms"
 import { FeedScreen } from "@/src/screens/(stack)/feeds/[feedId]/FeedScreen"
 import { useSubscription } from "@/src/store/subscription/hooks"
 import { getInboxStoreId } from "@/src/store/subscription/utils"
@@ -37,10 +37,6 @@ export const InboxItem = memo(({ id, isFirst, isLast }: SubscriptionItemBaseProp
         itemStyle={ItemPressableStyle.Grouped}
         className="h-12 flex-row items-center px-3"
         onPress={() => {
-          const isHorizontalScrolling = getHorizontalScrolling()
-          if (isHorizontalScrolling) {
-            return
-          }
           selectFeed({ type: "inbox", inboxId: id })
           navigation.pushControllerView(FeedScreen, {
             feedId: id,

apps/mobile/src/modules/subscription/items/ListSubscriptionItem.tsx

@@ -14,7 +14,7 @@ import { useList } from "@/src/store/list/hooks"
 import { useListUnreadCount } from "@/src/store/unread/hooks"
 
 import { SubscriptionListItemContextMenu } from "../../context-menu/lists"
-import { getHorizontalScrolling, selectFeed } from "../../screen/atoms"
+import { selectFeed } from "../../screen/atoms"
 import { ItemSeparator } from "../ItemSeparator"
 import type { SubscriptionItemBaseProps } from "./types"
 import { UnreadCount } from "./UnreadCount"
@@ -41,10 +41,6 @@ export const ListSubscriptionItem = memo(({ id, isFirst, isLast }: ListSubscript
             itemStyle={ItemPressableStyle.Grouped}
             className="h-12 flex-row items-center px-3"
             onPress={() => {
-              const isHorizontalScrolling = getHorizontalScrolling()
-              if (isHorizontalScrolling) {
-                return
-              }
               selectFeed({
                 type: "list",
                 listId: id,

apps/mobile/src/modules/subscription/items/SubscriptionItem.tsx

@@ -11,7 +11,7 @@ import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { WifiOffCuteReIcon } from "@/src/icons/wifi_off_cute_re"
 import { useNavigation } from "@/src/lib/navigation/hooks"
-import { closeDrawer, getHorizontalScrolling, selectFeed } from "@/src/modules/screen/atoms"
+import { closeDrawer, selectFeed } from "@/src/modules/screen/atoms"
 import { FeedScreen } from "@/src/screens/(stack)/feeds/[feedId]/FeedScreen"
 import { useFeed, usePrefetchFeed } from "@/src/store/feed/hooks"
 import { useSubscription } from "@/src/store/subscription/hooks"
@@ -63,10 +63,6 @@ export const SubscriptionItem = memo(
                 className,
               )}
               onPress={() => {
-                const isHorizontalScrolling = getHorizontalScrolling()
-                if (isHorizontalScrolling) {
-                  return
-                }
                 selectFeed({
                   type: "feed",
                   feedId: id,