remove use of sticky topBorder, add border to feed footer (#8121)

2 files changed, 23 insertions, 12 deletions

diff --git a/src/screens/Search/Explore.tsx b/src/screens/Search/Explore.tsx
index e74a6f1e2..26e8b36eb 100644
--- a/src/screens/Search/Explore.tsx
+++ b/src/screens/Search/Explore.tsx
@@ -766,6 +766,9 @@ export function Explore({
           )
         }
         // feed previews
+        case 'preview:spacer': {
+          return <View style={[a.w_full, a.pt_4xl]} />
+        }
         case 'preview:empty': {
           return null // what should we do here?
         }
@@ -799,7 +802,16 @@ export function Explore({
           )
         }
         case 'preview:footer': {
-          return <View style={[a.w_full, a.pt_2xl]} />
+          return (
+            <View
+              style={[
+                a.border_t,
+                t.atoms.border_contrast_low,
+                a.w_full,
+                a.pt_4xl,
+              ]}
+            />
+          )
         }
         case 'preview:sliceItem': {
           const slice = item.slice
diff --git a/src/state/queries/explore-feed-previews.tsx b/src/state/queries/explore-feed-previews.tsx
index 77511b5cd..4a13723e3 100644
--- a/src/state/queries/explore-feed-previews.tsx
+++ b/src/state/queries/explore-feed-previews.tsx
@@ -37,7 +37,7 @@ const LIMIT = 8 // sliced to 6, overfetch to account for moderation
 
 export type FeedPreviewItem =
   | {
-      type: 'topBorder'
+      type: 'preview:spacer'
       key: string
     }
   | {
@@ -131,6 +131,11 @@ export function useFeedPreviews(
 
       if (!enabled) return items
 
+      items.push({
+        type: 'preview:spacer',
+        key: 'spacer',
+      })
+
       const isEmpty =
         !isPending && !data?.pages?.some(page => page.posts.length)
 
@@ -240,23 +245,17 @@ export function useFeedPreviews(
             }
 
             if (slices.length > 0) {
-              if (pageIndex > 0) {
-                items.push({
-                  type: 'topBorder',
-                  key: `topBorder-${page.feed.uri}`,
-                })
-              }
               items.push(
                 {
-                  type: 'preview:footer',
-                  key: `footer-${page.feed.uri}`,
-                },
-                {
                   type: 'preview:header',
                   key: `header-${page.feed.uri}`,
                   feed: page.feed,
                 },
                 ...slices,
+                {
+                  type: 'preview:footer',
+                  key: `footer-${page.feed.uri}`,
+                },
               )
             }
           }