A personal media tracker built on the AT Protocol
opnshelf.xyz
fix: correct social feed data structure mapping in dashboard
+63
-77
+63
-77
apps/web/src/routes/dashboard.tsx
+63
-77
apps/web/src/routes/dashboard.tsx
···
403
403
</div>
404
404
) : feedData?.items && feedData.items.length > 0 ? (
405
405
<div className="card divide-y divide-[var(--border)]">
406
-
{feedData.items
407
-
.filter(
408
-
(item: FollowedActivityItemDto) => item.content != null,
409
-
)
410
-
.map((item: FollowedActivityItemDto) => (
411
-
<div
412
-
key={item.id}
413
-
className="flex items-start gap-3 p-4 first:pt-5 last:pb-5"
414
-
>
415
-
{/* User Avatar */}
416
-
<img
417
-
src={
418
-
item.actor.avatar ||
419
-
`https://i.pravatar.cc/150?u=${item.actor.did}`
420
-
}
421
-
alt={item.actor.displayName || item.actor.handle}
422
-
className="h-10 w-10 rounded-full object-cover"
423
-
/>
424
-
<div className="flex-1 min-w-0">
425
-
{/* Activity Header */}
426
-
<p className="text-sm">
427
-
<Link
428
-
to={`/profile/${item.actor.handle}`}
429
-
className="font-medium hover:text-[var(--accent)]"
430
-
>
431
-
{item.actor.displayName || item.actor.handle}
432
-
</Link>{" "}
433
-
{item.verb === "watch" && (
434
-
<span className="text-[var(--foreground-muted)]">
435
-
watched
436
-
</span>
437
-
)}
438
-
{item.verb === "follow" && (
439
-
<span className="text-[var(--foreground-muted)]">
440
-
followed
441
-
</span>
442
-
)}
443
-
{item.verb === "list_add" && (
406
+
{feedData.items.map((item: FollowedActivityItemDto) => (
407
+
<div
408
+
key={item.id}
409
+
className="flex items-start gap-3 p-4 first:pt-5 last:pb-5"
410
+
>
411
+
{/* User Avatar */}
412
+
<img
413
+
src={
414
+
item.actor.avatar ||
415
+
`https://i.pravatar.cc/150?u=${item.actor.did}`
416
+
}
417
+
alt={item.actor.displayName || item.actor.handle}
418
+
className="h-10 w-10 rounded-full object-cover"
419
+
/>
420
+
<div className="flex-1 min-w-0">
421
+
{/* Activity Header */}
422
+
<p className="text-sm">
423
+
<Link
424
+
to={`/profile/${item.actor.handle}`}
425
+
className="font-medium hover:text-[var(--accent)]"
426
+
>
427
+
{item.actor.displayName || item.actor.handle}
428
+
</Link>{" "}
429
+
<span className="text-[var(--foreground-muted)]">
430
+
{item.type === "movie"
431
+
? "watched"
432
+
: "watched episode"}
433
+
</span>
434
+
</p>
435
+
{/* Content Title */}
436
+
<p className="font-medium text-sm mt-0.5">
437
+
<Link
438
+
to={
439
+
item.type === "movie"
440
+
? `/movies/${item.movieId}`
441
+
: `/shows/${item.showId}/seasons/${item.seasonNumber}/episodes/${item.episodeNumber}`
442
+
}
443
+
className="hover:text-[var(--accent)]"
444
+
>
445
+
{item.title || item.showTitle}
446
+
{item.type === "episode" && (
444
447
<span className="text-[var(--foreground-muted)]">
445
-
added to list
448
+
{" "}
449
+
(S{item.seasonNumber}E{item.episodeNumber})
446
450
</span>
447
451
)}
448
-
</p>
449
-
{/* Content Title */}
450
-
<p className="font-medium text-sm mt-0.5">
451
-
<Link
452
-
to={`/${item.content.type}/${item.content.id}`}
453
-
className="hover:text-[var(--accent)]"
454
-
>
455
-
{item.content.title}
456
-
{item.content.type === "episode" &&
457
-
item.content.episodeTitle && (
458
-
<span className="text-[var(--foreground-muted)]">
459
-
{" "}
460
-
(S{item.content.seasonNumber}E
461
-
{item.content.episodeNumber})
462
-
</span>
463
-
)}
464
-
</Link>
465
-
</p>
466
-
{/* Timestamp & Actions */}
467
-
<div className="flex items-center gap-3 mt-1.5 text-xs text-[var(--foreground-muted)]">
468
-
<span>{formatRelativeTime(item.createdAt)}</span>
469
-
{item.verb === "watch" && (
470
-
<button
471
-
type="button"
472
-
className="flex items-center gap-1 hover:text-[var(--accent)]"
473
-
>
474
-
<Heart className="h-3 w-3" />
475
-
Like
476
-
</button>
477
-
)}
478
-
</div>
452
+
</Link>
453
+
</p>
454
+
{/* Timestamp & Actions */}
455
+
<div className="flex items-center gap-3 mt-1.5 text-xs text-[var(--foreground-muted)]">
456
+
<span>{formatRelativeTime(item.createdAt)}</span>
457
+
<button
458
+
type="button"
459
+
className="flex items-center gap-1 hover:text-[var(--accent)]"
460
+
>
461
+
<Heart className="h-3 w-3" />
462
+
Like
463
+
</button>
479
464
</div>
480
-
{/* Content Type Badge */}
481
-
<span
482
-
className={`badge ${item.content.type === "movie" ? "badge-subtle" : "badge-accent"}`}
483
-
>
484
-
{item.content.type === "movie" ? "Movie" : "TV"}
485
-
</span>
486
465
</div>
487
-
))}
466
+
{/* Content Type Badge */}
467
+
<span
468
+
className={`badge ${item.type === "movie" ? "badge-subtle" : "badge-accent"}`}
469
+
>
470
+
{item.type === "movie" ? "Movie" : "TV"}
471
+
</span>
472
+
</div>
473
+
))}
488
474
</div>
489
475
) : (
490
476
<div className="card p-8 text-center">