grain.social is a photo sharing platform built on atproto.
grain.social
atproto
photography
appview
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
-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
+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
+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]