Improve Device Detection For Better Responsiveness (#1512)

* Refactor `useOnMainScroll` function to use responsive device detection

- Replace static `isDesktopWeb` with `useWebMediaQueries` hook to enable dynamic device type detection.
- Create `useDeviceLimits` hook to dynamically determine `DY_LIMIT_UP` and `DY_LIMIT_DOWN` based on device type.
- Update dependency arrays for the `useCallback` hooks to include new dynamic variables.

* Refactor styles to be responsive to device type

- Create `useStyles` hook that generates styles object based on device type detected from `useWebMediaQueries`.
- Replace static styles object with dynamic styles object generated from `useStyles` hook in components.
- This allows `paddingLeft` values for 'ul' and 'ol' styles to adapt to device type dynamically.
- This allows `maxWidth` values for 'metaItem'' styles to adapt to device type dynamically.

* Remove `isDesktopWeb` in favor of `useWebMediaQueries().isDesktop`

* Refactor `SplashScreen` component for responsive design

* Revision based on review results

* Fix isNative check

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 92 insertions, 88 deletions

diff --git a/src/view/com/post-thread/PostThreadItem.tsx b/src/view/com/post-thread/PostThreadItem.tsx
index 788ce96ad..75d756d61 100644
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@@ -34,7 +34,6 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {formatCount} from '../util/numeric/format'
 import {TimeElapsed} from 'view/com/util/TimeElapsed'
 import {makeProfileLink} from 'lib/routes/links'
-import {isDesktopWeb} from 'platform/detection'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 export const PostThreadItem = observer(function PostThreadItem({
@@ -51,6 +50,7 @@ export const PostThreadItem = observer(function PostThreadItem({
   const pal = usePalette('default')
   const store = useStores()
   const [deleted, setDeleted] = React.useState(false)
+  const styles = useStyles()
   const record = item.postRecord
   const hasEngagement = item.post.likeCount || item.post.repostCount
 
@@ -568,6 +568,7 @@ function PostOuterWrapper({
 }>) {
   const {isMobile} = useWebMediaQueries()
   const pal = usePalette('default')
+  const styles = useStyles()
   if (treeView && item._depth > 1) {
     return (
       <View
@@ -636,90 +637,93 @@ function ExpandedPostDetails({
   )
 }
 
-const styles = StyleSheet.create({
-  outer: {
-    borderTopWidth: 1,
-    paddingLeft: 8,
-  },
-  outerHighlighted: {
-    paddingTop: 16,
-    paddingLeft: 8,
-    paddingRight: 8,
-  },
-  noTopBorder: {
-    borderTopWidth: 0,
-  },
-  layout: {
-    flexDirection: 'row',
-    gap: 10,
-    paddingLeft: 8,
-  },
-  layoutAvi: {},
-  layoutContent: {
-    flex: 1,
-    paddingRight: 10,
-  },
-  meta: {
-    flexDirection: 'row',
-    paddingTop: 2,
-    paddingBottom: 2,
-  },
-  metaExpandedLine1: {
-    paddingTop: 5,
-    paddingBottom: 0,
-  },
-  metaItem: {
-    paddingRight: 5,
-    maxWidth: isDesktopWeb ? 380 : 220,
-  },
-  alert: {
-    marginBottom: 6,
-  },
-  postTextContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    paddingBottom: 4,
-    paddingRight: 10,
-  },
-  postTextLargeContainer: {
-    paddingHorizontal: 0,
-    paddingBottom: 10,
-  },
-  translateLink: {
-    marginBottom: 6,
-  },
-  contentHider: {
-    marginBottom: 6,
-  },
-  contentHiderChild: {
-    marginTop: 6,
-  },
-  expandedInfo: {
-    flexDirection: 'row',
-    padding: 10,
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
-    marginTop: 5,
-    marginBottom: 15,
-  },
-  expandedInfoItem: {
-    marginRight: 10,
-  },
-  loadMore: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    gap: 4,
-    paddingHorizontal: 20,
-  },
-  replyLine: {
-    width: 2,
-    marginLeft: 'auto',
-    marginRight: 'auto',
-  },
-  cursor: {
-    // @ts-ignore web only
-    cursor: 'pointer',
-  },
-})
+const useStyles = () => {
+  const {isDesktop} = useWebMediaQueries()
+  return StyleSheet.create({
+    outer: {
+      borderTopWidth: 1,
+      paddingLeft: 8,
+    },
+    outerHighlighted: {
+      paddingTop: 16,
+      paddingLeft: 8,
+      paddingRight: 8,
+    },
+    noTopBorder: {
+      borderTopWidth: 0,
+    },
+    layout: {
+      flexDirection: 'row',
+      gap: 10,
+      paddingLeft: 8,
+    },
+    layoutAvi: {},
+    layoutContent: {
+      flex: 1,
+      paddingRight: 10,
+    },
+    meta: {
+      flexDirection: 'row',
+      paddingTop: 2,
+      paddingBottom: 2,
+    },
+    metaExpandedLine1: {
+      paddingTop: 5,
+      paddingBottom: 0,
+    },
+    metaItem: {
+      paddingRight: 5,
+      maxWidth: isDesktop ? 380 : 220,
+    },
+    alert: {
+      marginBottom: 6,
+    },
+    postTextContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      paddingBottom: 4,
+      paddingRight: 10,
+    },
+    postTextLargeContainer: {
+      paddingHorizontal: 0,
+      paddingBottom: 10,
+    },
+    translateLink: {
+      marginBottom: 6,
+    },
+    contentHider: {
+      marginBottom: 6,
+    },
+    contentHiderChild: {
+      marginTop: 6,
+    },
+    expandedInfo: {
+      flexDirection: 'row',
+      padding: 10,
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      marginTop: 5,
+      marginBottom: 15,
+    },
+    expandedInfoItem: {
+      marginRight: 10,
+    },
+    loadMore: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: 4,
+      paddingHorizontal: 20,
+    },
+    replyLine: {
+      width: 2,
+      marginLeft: 'auto',
+      marginRight: 'auto',
+    },
+    cursor: {
+      // @ts-ignore web only
+      cursor: 'pointer',
+    },
+  })
+}