A personal media tracker built on the AT Protocol opnshelf.xyz
0
fork

Configure Feed

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

fix: correct social feed data structure mapping in dashboard

+63 -77
+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">