Migrate server auth to IdentityServer

DorkNet.Server/site/src/components/PhotoCard.tsx

@@ -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>

DorkNet.Server/site/src/lib/types.ts

@@ -20,6 +20,17 @@ export interface SitePlayerDetail extends SitePlayerCard {
   xp: number;
   createdAt: string;
   photoCount: number;
+  photosTakenCount: number;
+  photosOfPlayerCount: number;
+  friendCount: number;
+  publicRoomCount: number;
+}
+
+export interface SitePhotoPlayer {
+  id: number;
+  username: string;
+  displayName: string;
+  profileImageName: string | null;
 }
 
 export interface SitePhoto {
@@ -33,6 +44,7 @@ export interface SitePhoto {
   caption: string;
   roomId: number;
   roomName: string;
+  taggedPlayers: SitePhotoPlayer[];
   isPublic: boolean;
   cheerCount: number;
   viewCount: number;