Load more styling

src/view/screens/Search/Search.tsx

@@ -57,6 +57,7 @@ import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
 import {Link} from '#/view/com/util/Link'
 import {List} from '#/view/com/util/List'
 import {Text} from '#/view/com/util/text/Text'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {CenteredView, ScrollView} from '#/view/com/util/Views'
 import {KNOWN_AUTHED_ONLY_FEEDS} from '#/view/screens/Feeds'
 import {SearchLinkCard, SearchProfileCard} from '#/view/shell/desktop/Search'
@@ -66,12 +67,11 @@ import {
   ProfileCardFeedLoadingPlaceholder,
 } from 'view/com/util/LoadingPlaceholder'
 import {atoms as a, useTheme as useThemeNew} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Button} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
-import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {Loader as LoaderIcon} from '#/components/Loader'
-import {Text as TextNew} from '#/components/Typography'
+import {Text as TextNewText} from '#/components/Typography'
 
 function Loader() {
   const pal = usePalette('default')
@@ -193,6 +193,7 @@ type ExploreScreenItems =
       key: string
       isLoadingMore: boolean
       onLoadMore: () => void
+      items: ExploreScreenItems[]
     }
   | {
       type: 'profilePlaceholder'
@@ -214,6 +215,7 @@ function ExploreScreen() {
   const t = useThemeNew()
   const {hasSession} = useSession()
   const {data: preferences, error: preferencesError} = usePreferencesQuery()
+  const moderationOpts = useModerationOpts()
   const {
     data: profiles,
     hasNextPage: hasNextProfilesPage,
@@ -294,6 +296,7 @@ function ExploreScreen() {
         key: 'loadMoreProfiles',
         isLoadingMore: isLoadingMoreProfiles,
         onLoadMore: onLoadMoreProfiles,
+        items: i.filter(item => item.type === 'profile').slice(-3),
       })
     } else {
       if (profilesError) {
@@ -368,6 +371,7 @@ function ExploreScreen() {
           key: 'loadMoreFeeds',
           isLoadingMore: isLoadingMoreFeeds,
           onLoadMore: onLoadMoreFeeds,
+          items: i.filter(item => item.type === 'feed').slice(-3),
         })
       }
     } else {
@@ -433,29 +437,84 @@ function ExploreScreen() {
         }
         case 'loadMore': {
           return (
-            <View
+            <View style={[a.pb_2xl, a.border_t, t.atoms.border_contrast_low]}>
-              style={[
-                a.px_md,
-                a.py_md,
-                a.pb_5xl,
-                a.flex_row,
-                a.justify_center,
-                a.border_t,
-                t.atoms.border_contrast_low,
-              ]}>
               <Button
                 label={_(msg`Load more`)}
-                size="small"
+                onPress={item.onLoadMore}
-                variant="solid"
+                style={[a.relative, a.w_full]}>
-                color="secondary"
+                {({hovered}) => (
-                onPress={item.onLoadMore}>
+                  <View
-                <ButtonText>
+                    style={[
-                  <Trans>Load more</Trans>
+                      a.flex_1,
-                </ButtonText>
+                      a.flex_row,
-                <ButtonIcon
+                      a.align_center,
-                  icon={item.isLoadingMore ? LoaderIcon : Plus}
+                      a.px_md,
-                  position="right"
+                      a.py_md,
-                />
+                      hovered && t.atoms.bg_contrast_25,
+                    ]}>
+                    <View
+                      style={[
+                        a.relative,
+                        {
+                          height: 32,
+                          width: 52,
+                        },
+                      ]}>
+                      {item.items.map((_item, i) => {
+                        return (
+                          <View
+                            key={_item.key}
+                            style={[
+                              a.border,
+                              t.atoms.bg_contrast_25,
+                              a.absolute,
+                              {
+                                width: 30,
+                                height: 30,
+                                left: i * 10,
+                                borderColor: t.atoms.bg.backgroundColor,
+                                borderRadius:
+                                  _item.type === 'profile' ? 999 : 4,
+                              },
+                            ]}>
+                            {moderationOpts && (
+                              <>
+                                {_item.type === 'profile' ? (
+                                  <UserAvatar
+                                    size={28}
+                                    avatar={_item.profile.avatar}
+                                    moderation={moderateProfile(
+                                      _item.profile,
+                                      moderationOpts!,
+                                    ).ui('avatar')}
+                                  />
+                                ) : _item.type === 'feed' ? (
+                                  <UserAvatar
+                                    size={28}
+                                    avatar={_item.feed.avatar}
+                                    type="algo"
+                                  />
+                                ) : null}
+                              </>
+                            )}
+                          </View>
+                        )
+                      })}
+                    </View>
+
+                    <TextNewText
+                      style={[
+                        a.pl_sm,
+                        hovered ? t.atoms.text : t.atoms.text_contrast_medium,
+                      ]}>
+                      <Trans>Load more suggestions like these</Trans>
+                    </TextNewText>
+
+                    <View style={[a.flex_1, a.align_end]}>
+                      {item.isLoadingMore && <LoaderIcon size="lg" />}
+                    </View>
+                  </View>
+                )}
               </Button>
             </View>
           )
@@ -485,17 +544,17 @@ function ExploreScreen() {
                 ]}>
                 <CircleInfo size="md" fill={t.palette.negative_400} />
                 <View style={[a.flex_1, a.gap_sm]}>
-                  <TextNew style={[a.font_bold, a.leading_snug]}>
+                  <TextNewText style={[a.font_bold, a.leading_snug]}>
                     {item.message}
-                  </TextNew>
+                  </TextNewText>
-                  <TextNew
+                  <TextNewText
                     style={[
                       a.italic,
                       a.leading_snug,
                       t.atoms.text_contrast_medium,
                     ]}>
                     {item.error}
-                  </TextNew>
+                  </TextNewText>
                 </View>
               </View>
             </View>
@@ -503,7 +562,7 @@ function ExploreScreen() {
         }
       }
     },
-    [_, t, hasSession],
+    [_, t, hasSession, moderationOpts],
   )
 
   return (