From 257fc6da4055e153e4cc57ef65ffe34db5b10e09 Mon Sep 17 00:00:00 2001
From: Bretton <bretton@Brettons-MacBook-Pro.local>
Date: Sun, 22 Feb 2026 13:47:33 -0800
Subject: [PATCH] feat(feed): fix pagination, auth error handling, and empty
 states

Thread loadFeed callback through PostListShell and VirtualFeed to
restore infinite scroll pagination on home and community pages. Add
auth error detection (401/403) that shows session-expired message
with login button. Improve feed robustness with null-safe responses,
cursor-based hasMore logic, and proper error re-throwing.

Changes:
- Add loadFeed prop to PostListShell and pass to VirtualFeed
- Create loadFeed functions in home and community page loaders
- Detect XrpcError 401/403 and show login prompt instead of retry
- Move loading=false to finally block in VirtualFeed
- Guard against null feed responses with ?? []
- Add empty state placeholder on home page
- Fix /communities link to /explore/communities
- Update empty feed description copy

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/lib/app/i18n/en.json                     |  2 +-
 src/lib/feature/feeds/feed.svelte.ts         |  1 +
 src/lib/feature/post/feed/VirtualFeed.svelte | 48 +++++++++++++-------
 src/lib/ui/layout/pages/PostListShell.svelte |  6 ++-
 src/routes/+page.svelte                      | 27 ++++++++++-
 src/routes/+page.ts                          | 39 ++++++++--------
 src/routes/c/[handle]/+page.svelte           |  1 +
 src/routes/c/[handle]/+page.ts               | 10 +++-
 8 files changed, 94 insertions(+), 40 deletions(-)

diff --git a/src/lib/app/i18n/en.json b/src/lib/app/i18n/en.json
index eb749b12..0b01a517 100644
--- a/src/lib/app/i18n/en.json
+++ b/src/lib/app/i18n/en.json
@@ -236,7 +236,7 @@
             "endFeed": "You have reached the end of {{community_name; undefined:the feed.; default:{{community_name}}.}}",
             "empty": {
                 "title": "No posts",
-                "description": "There are no posts that match this filter."
+                "description": "There are no posts in this feed."
             }
         },
         "modlog": {
diff --git a/src/lib/feature/feeds/feed.svelte.ts b/src/lib/feature/feeds/feed.svelte.ts
index 0e718422..692918eb 100644
--- a/src/lib/feature/feeds/feed.svelte.ts
+++ b/src/lib/feature/feeds/feed.svelte.ts
@@ -46,6 +46,7 @@ export class Feed<Params, Response> {
       } catch (err) {
         console.error('[Feed] fetch failed:', err)
         this.error = err
+        throw err
       }
     }
 
diff --git a/src/lib/feature/post/feed/VirtualFeed.svelte b/src/lib/feature/post/feed/VirtualFeed.svelte
index fae46f22..e5b80b23 100644
--- a/src/lib/feature/post/feed/VirtualFeed.svelte
+++ b/src/lib/feature/post/feed/VirtualFeed.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { browser } from '$app/environment'
+  import { XrpcError } from '$lib/api/coves/xrpc'
   import type { FeedViewPost, FeedPaginationParams } from '$lib/api/coves/types'
   import { errorMessage } from '$lib/app/error'
   import { t } from '$lib/app/i18n'
@@ -49,11 +50,17 @@
     scrollToIndex: (index: number, window?: boolean) => void
   }>()
 
-  let error = $state()
+  let error = $state<unknown>()
+  let isAuthError = $derived(
+    error instanceof XrpcError &&
+      (error.status === 401 || error.status === 403),
+  )
   let loading = $state(false)
-  let hasMore = $state(true)
+  let hasMore = $state(!!loadFeed)
 
-  let seenUris = new SvelteSet<string>(posts.map((fp) => fp.post.uri as string))
+  let seenUris = new SvelteSet<string>(
+    (posts ?? []).map((fp) => fp.post.uri as string),
+  )
 
   async function loadMore(): Promise<void> {
     if (!hasMore || loading || !loadFeed) return
@@ -65,7 +72,7 @@
 
       error = null
 
-      hasMore = response.feed.length !== 0
+      hasMore = response.feed.length !== 0 && !!response.cursor
 
       if (response.cursor) {
         params = { ...params, cursor: response.cursor }
@@ -79,11 +86,10 @@
           return true
         }),
       )
-
-      loading = false
     } catch (e) {
       console.error('Failed to load more posts:', e)
       error = e
+    } finally {
       loading = false
     }
   }
@@ -160,7 +166,7 @@
           description={$t('routes.frontpage.empty.description')}
         >
           <Button
-            href="/communities"
+            href="/explore/communities"
             rounding="pill"
             color="primary"
             icon={ArrowTopRightOnSquare}
@@ -216,16 +222,26 @@
             micro
             class="inline-block rounded-lg clear-both float-left mr-2"
           />
-          {errorMessage(error)}
+          {#if isAuthError}
+            {$t('toast.sessionExpired')}
+          {:else}
+            {errorMessage(error)}
+          {/if}
         </div>
-        <Button
-          color="primary"
-          {loading}
-          disabled={loading}
-          onclick={() => loadMore()}
-        >
-          {$t('message.retry')}
-        </Button>
+        {#if isAuthError}
+          <Button color="primary" href="/login">
+            {$t('account.login')}
+          </Button>
+        {:else}
+          <Button
+            color="primary"
+            {loading}
+            disabled={loading}
+            onclick={() => loadMore()}
+          >
+            {$t('message.retry')}
+          </Button>
+        {/if}
       </Material>
     {:else if hasMore}
       <div class="w-full h-32 grid place-items-center">
diff --git a/src/lib/ui/layout/pages/PostListShell.svelte b/src/lib/ui/layout/pages/PostListShell.svelte
index 5b419e0d..6c6a2912 100644
--- a/src/lib/ui/layout/pages/PostListShell.svelte
+++ b/src/lib/ui/layout/pages/PostListShell.svelte
@@ -22,6 +22,9 @@
     extended?: Snippet
     getParams: FeedPaginationParams | Record<string, unknown>
     header?: boolean
+    loadFeed?: (
+      params: FeedPaginationParams,
+    ) => Promise<{ feed: FeedViewPost[]; cursor?: string }>
   }
 
   let {
@@ -32,6 +35,7 @@
     extended: passedExtended,
     getParams,
     header = true,
+    loadFeed,
   }: Props = $props()
 
   $effect(() => {
@@ -84,7 +88,7 @@
     </Header>
   {/if}
 
-  <FeedComponent bind:posts bind:params={getParams} />
+  <FeedComponent bind:posts bind:params={getParams} {loadFeed} />
   <svelte:element
     this={settings.infiniteScroll && !settings.posts.noVirtualize
       ? 'noscript'
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c056fff6..2002eba0 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,9 +10,11 @@
   import ViewSelect from '$lib/feature/filter/ViewSelect.svelte'
   import PostFeed from '$lib/feature/post/feed/PostFeed.svelte'
   import VirtualFeed from '$lib/feature/post/feed/VirtualFeed.svelte'
+  import Placeholder from '$lib/ui/info/Placeholder.svelte'
   import Skeleton from '$lib/ui/generic/Skeleton.svelte'
   import { Header, Pageination } from '$lib/ui/layout'
   import { Button } from 'mono-svelte'
+  import { ArchiveBox, ArrowTopRightOnSquare } from 'svelte-hero-icons/dist'
 
   let { data = $bindable() } = $props()
 
@@ -55,7 +57,7 @@
 
 {#await data.feed.value}
   <div class="space-y-4">
-    {#each new Array(5) as _, index}{_}
+    {#each new Array(5) as _, index}
       <div
         class="animate-pop-in"
         style="animation-delay: {index * 50}ms; opacity: 0; width: {(1 /
@@ -68,7 +70,11 @@
   </div>
 {:then feed}
   {#if feed}
-    <FeedComponent bind:posts={feed.feed} bind:params={feed.params} />
+    <FeedComponent
+      bind:posts={feed.feed}
+      bind:params={feed.params}
+      loadFeed={data.loadFeed}
+    />
     <svelte:element
       this={settings.infiniteScroll && !settings.posts.noVirtualize
         ? 'noscript'
@@ -81,6 +87,23 @@
         back={false}
       />
     </svelte:element>
+  {:else}
+    <div class="h-full grid place-items-center my-8">
+      <Placeholder
+        icon={ArchiveBox}
+        title={$t('routes.frontpage.empty.title')}
+        description={$t('routes.frontpage.empty.description')}
+      >
+        <Button
+          href="/explore/communities"
+          rounding="pill"
+          color="primary"
+          icon={ArrowTopRightOnSquare}
+        >
+          {$t('nav.communities')}
+        </Button>
+      </Placeholder>
+    </div>
   {/if}
 {:catch error}
   <div class="flex flex-col items-center gap-4 py-8 text-center">
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
index 03c09a53..9c001781 100644
--- a/src/routes/+page.ts
+++ b/src/routes/+page.ts
@@ -1,3 +1,4 @@
+import type { FeedPaginationParams } from '$lib/api/coves/types'
 import { coves } from '$lib/api/client.svelte'
 import { profile } from '$lib/app/auth.svelte'
 import { t } from '$lib/app/i18n'
@@ -18,23 +19,14 @@ export async function load({ url, fetch, route }) {
   const listing = mapListing(listingType, profile.isAuthenticated)
 
   const feedData = feed(route.id, async (params) => {
-    const isTimeline = params.listing === 'timeline'
+    const { listing, ...rest } = params
+    const isTimeline = listing === 'timeline'
     const response = isTimeline
-      ? await coves({ func: fetch }).getTimeline({
-          sort: params.sort,
-          timeframe: params.timeframe,
-          limit: params.limit,
-          cursor: params.cursor,
-        })
-      : await coves({ func: fetch }).getDiscover({
-          sort: params.sort,
-          timeframe: params.timeframe,
-          limit: params.limit,
-          cursor: params.cursor,
-        })
+      ? await coves({ func: fetch }).getTimeline(rest)
+      : await coves({ func: fetch }).getDiscover(rest)
 
     return {
-      feed: response.feed,
+      feed: response.feed ?? [],
       cursor: response.cursor,
       params: { ...params, cursor: response.cursor },
     }
@@ -46,13 +38,22 @@ export async function load({ url, fetch, route }) {
     limit: 20,
   })
 
+  const filters = new ReactiveState({
+    sort: mapped.sort,
+    timeframe: mapped.timeframe,
+    type_: listing,
+  })
+
   return {
     feed: new ReactiveState((await awaitIfServer(feedData)).data),
-    filters: new ReactiveState({
-      sort: mapped.sort,
-      timeframe: mapped.timeframe,
-      type_: listing,
-    }),
+    filters,
+    loadFeed: async (params: FeedPaginationParams) => {
+      const isTimeline = filters.value.type_ === 'timeline'
+      const response = isTimeline
+        ? await coves({ func: fetch }).getTimeline(params)
+        : await coves({ func: fetch }).getDiscover(params)
+      return { feed: response.feed ?? [], cursor: response.cursor }
+    },
     contextual: {
       actions: [
         {
diff --git a/src/routes/c/[handle]/+page.svelte b/src/routes/c/[handle]/+page.svelte
index 710123e3..2ef56a03 100644
--- a/src/routes/c/[handle]/+page.svelte
+++ b/src/routes/c/[handle]/+page.svelte
@@ -53,6 +53,7 @@
     params={{
       sort: data.params.sort,
     }}
+    loadFeed={data.loadFeed}
   >
     {#snippet extended()}
       {#if data.community}
diff --git a/src/routes/c/[handle]/+page.ts b/src/routes/c/[handle]/+page.ts
index e0649b5c..19d809d7 100644
--- a/src/routes/c/[handle]/+page.ts
+++ b/src/routes/c/[handle]/+page.ts
@@ -1,3 +1,4 @@
+import type { FeedPaginationParams } from '$lib/api/coves/types'
 import { coves } from '$lib/api/client.svelte'
 import { settings } from '$lib/app/settings.svelte'
 import { mapSort } from '$lib/app/sort'
@@ -30,7 +31,7 @@ export async function load({ params, fetch, url, route }) {
     ])
 
     return {
-      feed: feedResponse.feed,
+      feed: feedResponse.feed ?? [],
       community: communityData,
       cursor: feedResponse.cursor,
       params: { ...p, cursor: feedResponse.cursor },
@@ -45,6 +46,13 @@ export async function load({ params, fetch, url, route }) {
 
   return {
     ...feedData,
+    loadFeed: async (params: FeedPaginationParams) => {
+      const response = await coves({ func: fetch }).getCommunityFeed({
+        ...params,
+        community: communityHandle,
+      })
+      return { feed: response.feed ?? [], cursor: response.cursor }
+    },
     slots: {
       sidebar: {
         component: CommunityCard,
-- 
2.51.2