grain.social is a photo sharing platform built on atproto. grain.social
atproto photography appview
48
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: notification pagination on desktop and remove thumbnails

- Fix $effect resetting paginated state by only syncing from query once
- Increase notification fetch limit to 100 to match native
- Remove gallery/story thumbnail images from notification items

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

+5 -16
-13
app/lib/components/atoms/NotificationItem.svelte
··· 124 124 {/if} 125 125 </a> 126 126 </div> 127 - {#if !expanded && (notif.galleryThumb || notif.storyThumb)} 128 - <a href={contentHref}><img src={notif.galleryThumb ?? notif.storyThumb} alt="" class="notif-thumb" loading="lazy" /></a> 129 - {/if} 130 127 </div> 131 128 {:else} 132 129 <!-- Single notification --> ··· 159 156 <div class="notif-gallery-title">{notif.galleryTitle}</div> 160 157 {/if} 161 158 </a> 162 - {#if notif.galleryThumb || notif.storyThumb} 163 - <a href={contentHref}><img src={notif.galleryThumb ?? notif.storyThumb} alt="" class="notif-thumb" loading="lazy" /></a> 164 - {/if} 165 159 </div> 166 160 {/if} 167 161 ··· 257 251 color: var(--text-muted); 258 252 margin-top: 2px; 259 253 } 260 - .notif-thumb { 261 - width: 48px; 262 - border-radius: 0; 263 - object-fit: contain; 264 - flex-shrink: 0; 265 - } 266 - 267 254 /* Grouped notification styles */ 268 255 .grouped-avatars { 269 256 display: flex;
+1 -1
app/lib/queries.ts
··· 241 241 export const notificationsQuery = (viewer: string, f?: Fetch) => 242 242 queryOptions({ 243 243 queryKey: ["notifications", viewer], 244 - queryFn: () => callXrpc("social.grain.unspecced.getNotifications", { limit: 20 }, f), 244 + queryFn: () => callXrpc("social.grain.unspecced.getNotifications", { limit: 100 }, f), 245 245 staleTime: 60_000, 246 246 }); 247 247
+4 -2
app/routes/notifications/+page.svelte
··· 24 24 let allItems: any[] = $state([]) 25 25 let currentCursor: string | undefined = $state(undefined) 26 26 let hasMore = $state(true) 27 + let initialized = false 27 28 28 29 let grouped: GroupedNotification[] = $state([]) 29 30 30 31 $effect(() => { 31 32 const data = notifications.data 32 - if (data) { 33 + if (data && !initialized) { 34 + initialized = true 33 35 untrack(() => { 34 36 allItems = data.notifications ?? [] 35 37 grouped = groupNotifications(allItems) ··· 54 56 loadingMore = true 55 57 try { 56 58 const result = await callXrpc('social.grain.unspecced.getNotifications', { 57 - limit: 20, 59 + limit: 100, 58 60 cursor: currentCursor, 59 61 }) 60 62 allItems = [...allItems, ...result.notifications]