Few list tweaks on web (#3062)

* share button only on native

* update gttablet to be 1300px

* improve web layout

* change re-layout to mobile breakpoint

* adjustable not found reason

* don't show the borders on mobile web

* slight padding for the spinner

src/alf/index.tsx

@@ -17,7 +17,7 @@ const breakpoints: {
   [key: string]: number
 } = {
   gtMobile: 800,
-  gtTablet: 1200,
+  gtTablet: 1300,
 }
 function getActiveBreakpoints({width}: {width: number}) {
   const active: (keyof typeof breakpoints)[] = Object.keys(breakpoints).filter(

src/components/Lists.tsx

@@ -9,6 +9,7 @@ import {Text} from '#/components/Typography'
 import {StackActions} from '@react-navigation/native'
 import {useNavigation} from '@react-navigation/core'
 import {NavigationProp} from 'lib/routes/types'
+import {router} from '#/routes'
 
 export function ListFooter({
   isFetching,
@@ -30,6 +31,7 @@ export function ListFooter({
         a.align_center,
         a.justify_center,
         a.border_t,
+        a.pb_lg,
         t.atoms.border_contrast_low,
         {height: 100},
       ]}>
@@ -128,6 +130,7 @@ export function ListMaybePlaceholder({
   isError,
   empty,
   error,
+  notFoundType = 'page',
   onRetry,
 }: {
   isLoading: boolean
@@ -135,10 +138,12 @@ export function ListMaybePlaceholder({
   isError: boolean
   empty?: string
   error?: string
+  notFoundType?: 'page' | 'results'
   onRetry?: () => Promise<unknown>
 }) {
   const navigation = useNavigation<NavigationProp>()
   const t = useTheme()
+  const {gtMobile} = useBreakpoints()
 
   const canGoBack = navigation.canGoBack()
   const onGoBack = React.useCallback(() => {
@@ -146,7 +151,14 @@ export function ListMaybePlaceholder({
       navigation.goBack()
     } else {
       navigation.navigate('HomeTab')
-      navigation.dispatch(StackActions.popToTop())
+
+      // Checking the state for routes ensures that web doesn't encounter errors while going back
+      if (navigation.getState()?.routes) {
+        navigation.dispatch(StackActions.push(...router.matchPath('/')))
+      } else {
+        navigation.navigate('HomeTab')
+        navigation.dispatch(StackActions.popToTop())
+      }
     }
   }, [navigation, canGoBack])
 
@@ -157,8 +169,7 @@ export function ListMaybePlaceholder({
       style={[
         a.flex_1,
         a.align_center,
-        a.border_t,
+        !gtMobile ? [a.justify_between, a.border_t] : a.gap_5xl,
-        a.justify_between,
         t.atoms.border_contrast_low,
         {paddingTop: 175, paddingBottom: 110},
       ]}>
@@ -173,7 +184,13 @@ export function ListMaybePlaceholder({
               {isError ? (
                 <Trans>Oops!</Trans>
               ) : isEmpty ? (
-                <Trans>Page not found</Trans>
+                <>
+                  {notFoundType === 'results' ? (
+                    <Trans>No results found</Trans>
+                  ) : (
+                    <Trans>Page not found</Trans>
+                  )}
+                </>
               ) : undefined}
             </Text>
 
@@ -195,7 +212,8 @@ export function ListMaybePlaceholder({
               </Text>
             ) : undefined}
           </View>
-          <View style={[a.w_full, a.px_lg, a.gap_md]}>
+          <View
+            style={[a.gap_md, !gtMobile ? [a.w_full, a.px_lg] : {width: 350}]}>
             {isError && onRetry && (
               <Button
                 variant="solid"

src/screens/Hashtag.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {ListRenderItemInfo, Pressable} from 'react-native'
-import {atoms as a} from '#/alf'
+import {atoms as a, useBreakpoints} from '#/alf'
 import {useFocusEffect} from '@react-navigation/native'
 import {useSetMinimalShellMode} from 'state/shell'
 import {ViewHeader} from 'view/com/util/ViewHeader'
@@ -23,6 +23,7 @@ import {CenteredView} from 'view/com/util/Views'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded} from '#/components/icons/ArrowOutOfBox'
 import {shareUrl} from 'lib/sharing'
 import {HITSLOP_10} from 'lib/constants'
+import {isNative} from 'platform/detection'
 
 const renderItem = ({item}: ListRenderItemInfo<PostView>) => {
   return <Post post={item} />
@@ -37,6 +38,7 @@ export default function HashtagScreen({
 }: NativeStackScreenProps<CommonNavigatorParams, 'Hashtag'>) {
   const {tag, author} = route.params
   const setMinimalShellMode = useSetMinimalShellMode()
+  const {gtMobile} = useBreakpoints()
   const {_} = useLingui()
   const [isPTR, setIsPTR] = React.useState(false)
 
@@ -101,28 +103,33 @@ export default function HashtagScreen({
   }, [isFetching, hasNextPage, error, fetchNextPage])
 
   return (
-    <CenteredView style={a.flex_1}>
+    <CenteredView style={a.flex_1} sideBorders={gtMobile}>
       <ViewHeader
         title={headerTitle}
         subtitle={author ? _(msg`From @${sanitizedAuthor}`) : undefined}
-        canGoBack={true}
+        canGoBack
-        renderButton={() => (
+        renderButton={
-          <Pressable
+          isNative
-            accessibilityRole="button"
+            ? () => (
-            onPress={onShare}
+                <Pressable
-            hitSlop={HITSLOP_10}>
+                  accessibilityRole="button"
-            <ArrowOutOfBox_Stroke2_Corner0_Rounded
+                  onPress={onShare}
-              size="lg"
+                  hitSlop={HITSLOP_10}>
-              onPress={onShare}
+                  <ArrowOutOfBox_Stroke2_Corner0_Rounded
-            />
+                    size="lg"
-          </Pressable>
+                    onPress={onShare}
-        )}
+                  />
+                </Pressable>
+              )
+            : undefined
+        }
       />
       <ListMaybePlaceholder
         isLoading={isLoading || isRefetching}
         isError={isError}
         isEmpty={posts.length < 1}
         onRetry={refetch}
+        notFoundType="results"
         empty={_(msg`We couldn't find any results for that hashtag.`)}
       />
       {!isLoading && posts.length > 0 && (