TheSunIsLeaking/DorkNet
3
0
Fork 0
mirror of https://github.com/DorkSquadRR/DorkNet.git synced 2026-10-26 07:28:45 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance player and photo functionalities with tagging, room details, and improved search

Browse Source
This commit is contained in:
Alexa
2026-06-07 10:58:10 +03:00
parent feccd439d4
commit 64746cdaa2
8 changed files with 220 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DorkNet.Server/site/src/components/PhotoCard.tsx
+29 -5
View File
@@ -10,6 +10,8 @@ import { num, relativeTime } from '../lib/format';
// inner anchor preserves that even on touch devices where iOS
// occasionally fires both handlers.
export function PhotoCard({ photo }: { photo: SitePhoto }) {
const tagged = photo.taggedPlayers ?? [];
return (
<Link
to={`/photo/${photo.id}`}
@@ -42,12 +44,34 @@ export function PhotoCard({ photo }: { photo: SitePhoto }) {
{photo.caption && (
<p className="mt-2 text-xs text-ink-300 line-clamp-2">{photo.caption}</p>
)}
<div className="mt-2 flex items-center justify-between text-[11px] text-ink-400">
{tagged.length > 0 && (
<div className="mt-2 flex items-center gap-1.5 text-[11px] text-ink-400">
<span className="shrink-0 text-ink-500">With</span>
<div className="min-w-0 flex flex-wrap items-center gap-1">
{tagged.slice(0, 3).map(p => (
<Link
key={p.id}
to={`/players/${p.id}`}
onClick={e => e.stopPropagation()}
className="inline-flex max-w-[8rem] items-center gap-1 rounded-md bg-ink-800/70 px-1.5 py-0.5 text-ink-200 hover:text-ink-50"
>
<PlayerAvatar name={p.profileImageName} displayName={p.displayName || p.username} size={16} />
<span className="truncate">{p.displayName || p.username}</span>
</Link>
))}
{tagged.length > 3 && <span className="text-ink-500">+{tagged.length - 3}</span>}
</div>
</div>
)}
<div className="mt-2 flex items-center justify-between gap-2 text-[11px] text-ink-400">
<span title="cheers">♥ {num(photo.cheerCount)}</span>
{photo.roomName
? <span className="font-mono truncate ml-2" title={`Room: ${photo.roomName}`}>^{photo.roomName}</span>
: <span>{relativeTime(photo.createdAt)}</span>
}
<span className="min-w-0 truncate text-right">
{photo.roomName && (
<span className="font-mono text-ink-300" title={`Room: ${photo.roomName}`}>^{photo.roomName}</span>
)}
{photo.roomName && <span className="text-ink-600"> · </span>}
<span>{relativeTime(photo.createdAt)}</span>
</span>
</div>
</div>
</Link>