[www] add photos to account page, WIP player profile page/search (#104)

* Add player search and public profiles

* just hide player search for now

---------

Co-authored-by: Devin Zuczek <devin.zuczek@gmail.com>

apps/www/src/client/App.tsx

@@ -761,6 +761,278 @@ function roomIdFromPath(path: string): number | null {
 	return match ? Number.parseInt(match[1], 10) : null
 }
 
+/** Public account shape, from `GET /account/:id` or `/account/search`. */
+interface PublicAccount {
+	accountId: number
+	username: string
+	displayName: string
+	profileImage: string
+	bannerImage: string
+	createdAt: string
+}
+
+/** A player's public photo, from the `ImagesPlayer` projection. */
+interface PublicPhoto {
+	SavedImageId: number
+	ImageName: string
+	CreatedAt: string
+	CheerCount: number
+}
+
+/** A player's public room — the narrow shape `/rooms/createdby/:id` serves. */
+interface PublicRoom {
+	RoomId: number
+	Name: string
+	ImageName: string
+	Stats: { VisitCount: number; CheerCount: number; FavoriteCount: number }
+}
+
+/** Prefix-search accounts by username — backs the header search bar. */
+async function searchPlayers(query: string): Promise<PublicAccount[]> {
+	if (query.trim() === '') return []
+	return call<PublicAccount[]>(`${where().accounts}/account/search?name=${encodeURIComponent(query.trim())}`)
+}
+
+const fetchPublicAccount = (username: string): Promise<PublicAccount | null> =>
+	searchPlayers(username).then(
+		(matches) => matches.find((m) => m.username.toLowerCase() === username.toLowerCase()) ?? null
+	)
+
+const fetchPublicPhotos = (accountId: number): Promise<PublicPhoto[]> =>
+	call<PublicPhoto[]>(`${where().api}/api/images/v4/player/${accountId}`)
+
+const fetchPublicRooms = (accountId: number): Promise<PublicRoom[]> =>
+	call<PublicRoom[]>(`${where().rooms}/rooms/ownedby/${accountId}`)
+
+/** The `/u/<username>` path, or null for any other path. */
+function usernameFromPath(path: string): string | null {
+	const match = /^\/u\/([^/]+)$/.exec(path)
+	return match ? decodeURIComponent(match[1]) : null
+}
+
+// Off for now, not gone: the search bar is hidden from the nav while `/u/:name` profiles
+// stay reachable by URL. Flip this to put it back — nothing else was removed.
+const SHOW_PLAYER_SEARCH: boolean = false
+
+/**
+ * The header search bar — a rec.net-style bubble dropdown of matching players as you
+ * type. Debounced so it doesn't fire a search per keystroke; closes on selecting a
+ * result, on Escape, or on clicking outside it.
+ */
+function PlayerSearch({ navigate }: { navigate: Navigate }) {
+	const [query, setQuery] = useState('')
+	const [results, setResults] = useState<PublicAccount[]>([])
+	const [open, setOpen] = useState(false)
+	const containerRef = useRef<HTMLDivElement>(null)
+
+	useEffect(() => {
+		if (query.trim() === '') {
+			setResults([])
+			return
+		}
+		const timeout = setTimeout(() => {
+			void searchPlayers(query)
+				.then((r) => setResults(r.slice(0, 6)))
+				.catch(() => setResults([]))
+		}, 250)
+		return () => clearTimeout(timeout)
+	}, [query])
+
+	useEffect(() => {
+		const onClickOutside = (e: MouseEvent) => {
+			if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+				setOpen(false)
+			}
+		}
+		document.addEventListener('mousedown', onClickOutside)
+		return () => document.removeEventListener('mousedown', onClickOutside)
+	}, [])
+
+	const go = (username: string) => {
+		setOpen(false)
+		setQuery('')
+		navigate(`/u/${encodeURIComponent(username)}`)
+	}
+
+	return (
+		<div className="player-search" ref={containerRef}>
+			<input
+				type="text"
+				placeholder="Search players…"
+				value={query}
+				onChange={(e) => {
+					setQuery(e.target.value)
+					setOpen(true)
+				}}
+				onFocus={() => setOpen(true)}
+				onKeyDown={(e) => {
+					if (e.key === 'Escape') setOpen(false)
+					if (e.key === 'Enter' && results[0]) go(results[0].username)
+				}}
+			/>
+			{open && results.length > 0 && (
+				<div className="player-search-bubble">
+					{results.map((r) => (
+						<button key={r.accountId} className="player-search-result" onClick={() => go(r.username)}>
+							<img className="player-search-avatar" src={`${where().img}/${r.profileImage}?width=64`} alt="" />
+							<span>
+								<span className="player-search-name">{r.displayName || r.username}</span>
+								<span className="player-search-handle">@{r.username}</span>
+							</span>
+						</button>
+					))}
+				</div>
+			)}
+		</div>
+	)
+}
+
+/**
+ * A grid of photo thumbnails; clicking one opens it full size.
+ *
+ * The thumbnail is the img worker's cached 256px variant; the popup asks for the same key
+ * with NO transform, which is the original upload. The popup is a native `<dialog>` opened
+ * with `showModal()`, so Escape, the backdrop, and keeping focus inside it are the
+ * browser's work rather than ours — all that's added is closing on a click anywhere, since
+ * there is nothing in it to interact with but the photo.
+ *
+ * Safe to call `where()` in render: a caller only has photos to pass once a fetch that
+ * went through it has resolved (see MyRooms).
+ */
+function PhotoGrid({ photos }: { photos: PublicPhoto[] }) {
+	const [open, setOpen] = useState<PublicPhoto | null>(null)
+	const dialogRef = useRef<HTMLDialogElement>(null)
+
+	useEffect(() => {
+		if (open) dialogRef.current?.showModal()
+	}, [open])
+
+	return (
+		<>
+			<div className="photo-grid">
+				{photos.map((p) => (
+					<button key={p.SavedImageId} className="photo-button" onClick={() => setOpen(p)} aria-label="View photo">
+						<img className="photo-thumb" src={`${where().img}/${p.ImageName}?width=256`} alt="" loading="lazy" />
+					</button>
+				))}
+			</div>
+			{/* Mounted only while open, so the full-size image isn't fetched until asked for.
+			    `onClose` covers Escape, which closes the dialog without going through us. */}
+			{open && (
+				<dialog ref={dialogRef} className="photo-modal" onClose={() => setOpen(null)} onClick={() => setOpen(null)}>
+					<img src={`${where().img}/${open.ImageName}`} alt="" />
+				</dialog>
+			)}
+		</>
+	)
+}
+
+/**
+ * A player's public profile page (`/u/<username>`) — banner, avatar, bio-adjacent
+ * info, their public rooms, and their public photos. Read-only: this is the
+ * "rec.net-style profile" other players browse to, not the owner's own dashboard
+ * (that stays on `/account`).
+ */
+function PlayerPage({ username, navigate }: { username: string; navigate: Navigate }) {
+	const [account, setAccount] = useState<PublicAccount | null | undefined>(undefined)
+	const [rooms, setRooms] = useState<PublicRoom[] | null>(null)
+	const [photos, setPhotos] = useState<PublicPhoto[] | null>(null)
+	const [error, setError] = useState('')
+
+	useEffect(() => {
+		setAccount(undefined)
+		setRooms(null)
+		setPhotos(null)
+		void fetchPublicAccount(username)
+			.then((a) => {
+				setAccount(a)
+				if (a) {
+					void fetchPublicRooms(a.accountId).then(setRooms).catch(() => setRooms([]))
+					void fetchPublicPhotos(a.accountId).then(setPhotos).catch(() => setPhotos([]))
+				}
+			})
+			.catch((e) => setError(e instanceof Error ? e.message : String(e)))
+	}, [username])
+
+	if (error) {
+		return (
+			<main className="shell">
+				<p className="error">{error}</p>
+			</main>
+		)
+	}
+	if (account === undefined) {
+		return (
+			<main className="shell">
+				<p className="muted">Loading…</p>
+			</main>
+		)
+	}
+	if (account === null) {
+		return (
+			<main className="shell">
+				<p className="muted">There&apos;s no player called @{username}.</p>
+			</main>
+		)
+	}
+
+	const created = new Date(account.createdAt)
+
+	return (
+		<main className="shell wide">
+			<section className="card player-hero">
+				{account.bannerImage && (
+					<img className="player-banner" src={`${where().img}/${account.bannerImage}?width=1024`} alt="" />
+				)}
+				<div className="player-hero-body">
+					<img className="player-avatar" src={`${where().img}/${account.profileImage}?width=256`} alt="" />
+					<div>
+						<h1>{account.displayName || account.username}</h1>
+						<p className="handle">
+							@{account.username}
+							{!Number.isNaN(created.getTime()) && ` · joined ${created.toLocaleDateString()}`}
+						</p>
+					</div>
+				</div>
+			</section>
+
+			<section className="card">
+				<h2>Rooms</h2>
+				{rooms === null ? (
+					<p className="muted">Loading…</p>
+				) : rooms.length === 0 ? (
+					<p className="muted">No public rooms.</p>
+				) : (
+					<ul className="rooms">
+						{rooms.map((room) => (
+							<li className="room" key={room.RoomId}>
+								<Link to={`/rooms/${room.RoomId}`} navigate={navigate} className="room-link">
+									<img className="room-thumb" src={`${where().img}/${room.ImageName}?width=256`} alt="" loading="lazy" />
+									<div className="room-body">
+										<span className="room-name">^{room.Name}</span>
+										<p className="room-stats">{room.Stats.VisitCount.toLocaleString()} visits</p>
+									</div>
+								</Link>
+							</li>
+						))}
+					</ul>
+				)}
+			</section>
+
+			<section className="card">
+				<h2>Photos</h2>
+				{photos === null ? (
+					<p className="muted">Loading…</p>
+				) : photos.length === 0 ? (
+					<p className="muted">No public photos.</p>
+				) : (
+					<PhotoGrid photos={photos} />
+				)}
+			</section>
+		</main>
+	)
+}
+
 export function App() {
 	// undefined = still checking the session; null = signed out.
 	const [account, setAccount] = useState<SelfAccount | null | undefined>(undefined)
@@ -769,6 +1041,7 @@ export function App() {
 	const [config, setConfig] = useState<SiteConfig | undefined>(undefined)
 	const { path, search, navigate } = useRouter()
 	const roomId = roomIdFromPath(path)
+	const lookupUsername = usernameFromPath(path)
 
 	useEffect(() => {
 		// Config first, and everything else after it: it carries the hostnames every other
@@ -843,6 +1116,8 @@ export function App() {
 				// its data comes from `/api/stats/online`, which the existing `/api/*` allowlist
 				// entry already sends to the Worker.
 				<StatsPage search={search} navigate={navigate} />
+			) : lookupUsername !== null ? (
+				<PlayerPage username={lookupUsername} navigate={navigate} />
 			) : roomId !== null ? (
 				<RoomPage account={account} roomId={roomId} navigate={navigate} />
 			) : (
@@ -896,6 +1171,7 @@ function NavBar({
 				RecFlare
 			</Link>
 			<nav className="nav-links">
+				{SHOW_PLAYER_SEARCH && <PlayerSearch navigate={navigate} />}
 				<a href={DISCORD_INVITE} target="_blank" rel="noreferrer">
 					Discord
 				</a>
@@ -2083,6 +2359,7 @@ function Dashboard({
 		// First, so a player who just signed in lands on what they made rather than on a
 		// settings form they opened the page to avoid.
 		{ id: 'rooms', label: 'My rooms', render: () => <MyRooms navigate={navigate} /> },
+		{ id: 'photos', label: 'My photos', render: () => <MyPhotos accountId={account.accountId} /> },
 		{
 			id: 'username',
 			label: 'Username',
@@ -2191,6 +2468,42 @@ function MyRooms({ navigate }: { navigate: Navigate }) {
 	)
 }
 
+/**
+ * The photos the signed-in player has taken — the same grid their public profile shows.
+ *
+ * Public photos only, because it reads the same list the profile does
+ * (`/api/images/v4/player/:id`, which serves nothing private). Unlike "My rooms" there is
+ * no owner's view behind it yet: a photo kept private in game doesn't appear here.
+ */
+function MyPhotos({ accountId }: { accountId: number }) {
+	const [photos, setPhotos] = useState<PublicPhoto[] | null>(null)
+	const [error, setError] = useState('')
+
+	useEffect(() => {
+		void fetchPublicPhotos(accountId)
+			.then(setPhotos)
+			.catch((e) => setError(e instanceof Error ? e.message : String(e)))
+	}, [accountId])
+
+	return (
+		<section className="card">
+			<h2>My photos</h2>
+			<p className="muted">The public photos you&apos;ve taken in game, newest first.</p>
+			{error ? (
+				<p className="error">{error}</p>
+			) : photos === null ? (
+				<p className="muted">Loading…</p>
+			) : photos.length === 0 ? (
+				<p className="muted">
+					No public photos yet. Photos you take in game and share publicly show up here.
+				</p>
+			) : (
+				<PhotoGrid photos={photos} />
+			)}
+		</section>
+	)
+}
+
 /**
  * One room in the list: its thumbnail, what it's called in game (`^Name`), and how it's
  * doing. The whole row links to the room's own page.

apps/www/src/client/styles.css

@@ -1584,3 +1584,271 @@ button[type='submit']:disabled {
 		flex-basis: 100%;
 	}
 }
+
+/* ---- Player search ------------------------------------------------------ */
+
+.player-search {
+	position: relative;
+	width: min(280px, 100%);
+}
+
+.player-search input {
+	margin: 0;
+	height: 40px;
+	padding: 8px 12px;
+	border-radius: 999px;
+	background: var(--surface);
+	border-color: var(--line);
+	transition:
+		border-color 0.15s ease,
+		background 0.15s ease,
+		box-shadow 0.15s ease;
+}
+
+.player-search input:focus {
+	border-color: var(--accent);
+	background: var(--surface-hi);
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
+	outline: none;
+}
+
+.player-search-bubble {
+	position: absolute;
+	z-index: 20;
+	top: calc(100% + 8px);
+	left: 0;
+	right: 0;
+	padding: 6px;
+	background: var(--surface);
+	border: 1px solid var(--line);
+	border-radius: 12px;
+	box-shadow: 0 12px 30px rgb(0 0 0 / 28%);
+}
+
+.player-search-result {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	gap: 10px;
+	padding: 8px;
+	border: 0;
+	border-radius: 8px;
+	background: transparent;
+	color: var(--text);
+	text-align: left;
+	cursor: pointer;
+	font-family: var(--body);
+}
+
+.player-search-result:hover,
+.player-search-result:focus-visible {
+	background: var(--surface-hi);
+}
+
+.player-search-avatar {
+	width: 36px;
+	height: 36px;
+	flex: none;
+	object-fit: cover;
+	border-radius: 50%;
+	border: 1px solid var(--line);
+	background: var(--surface-hi);
+}
+
+.player-search-name {
+	display: block;
+	overflow: hidden;
+	font-weight: 600;
+	line-height: 1.25;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.player-search-handle {
+	display: block;
+	margin-top: 2px;
+	color: var(--muted);
+	font-size: 0.78rem;
+	line-height: 1.2;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+
+/* The search bar is a third thing in a row built for two, so the nav wraps when it runs
+   out of room rather than overflowing. No breakpoint: wrapping only happens when the row
+   doesn't fit, so wide screens are untouched. */
+.nav {
+	flex-wrap: wrap;
+}
+
+/* ---- Public player profiles -------------------------------------------- */
+
+.player-hero {
+	position: relative;
+	overflow: hidden;
+	padding: 0;
+	margin-bottom: 16px;
+	background: var(--surface);
+}
+
+.player-banner {
+	display: block;
+	width: 100%;
+	height: 220px;
+	object-fit: cover;
+	border-bottom: 1px solid var(--line);
+	background:
+		radial-gradient(
+			circle at 80% 20%,
+			color-mix(in srgb, var(--accent) 24%, transparent),
+			transparent 45%
+		),
+		linear-gradient(
+			135deg,
+			var(--surface-hi),
+			var(--surface)
+		);
+}
+
+.player-hero-body {
+	display: flex;
+	align-items: flex-end;
+	gap: 18px;
+	padding: 0 24px 24px;
+	min-height: 112px;
+}
+
+.player-hero:not(:has(.player-banner)) .player-hero-body {
+	align-items: center;
+	padding-top: 24px;
+}
+
+.player-avatar {
+	width: 112px;
+	height: 112px;
+	flex: none;
+	object-fit: cover;
+	margin-top: -56px;
+	border: 4px solid var(--surface);
+	border-radius: 50%;
+	background: var(--surface-hi);
+	box-shadow: 0 5px 20px rgb(0 0 0 / 30%);
+}
+
+/* The negative margin hangs the avatar over the banner's bottom edge. With no banner
+   there is nothing to hang over, and the card's `overflow: hidden` clips the top off. */
+.player-hero:not(:has(.player-banner)) .player-avatar {
+	margin-top: 0;
+}
+
+.player-hero-body h1 {
+	margin: 0;
+	font-size: clamp(1.5rem, 4vw, 2.1rem);
+	line-height: 1.05;
+	overflow-wrap: anywhere;
+}
+
+.player-hero-body .handle {
+	margin: 6px 0 0;
+	color: var(--muted);
+	font-size: 0.9rem;
+}
+
+.player-hero + .card {
+	margin-top: 16px;
+}
+
+.photo-grid {
+	display: grid;
+	grid-template-columns: repeat(3, minmax(0, 1fr));
+	gap: 10px;
+	margin-top: 16px;
+}
+
+/* The thumbnail's click target: a real button, for the keyboard, with none of its looks. */
+.photo-button {
+	display: block;
+	padding: 0;
+	border: 0;
+	border-radius: 9px;
+	background: none;
+	cursor: zoom-in;
+}
+
+.photo-thumb {
+	display: block;
+	width: 100%;
+	aspect-ratio: 1 / 1;
+	object-fit: cover;
+	border: 1px solid var(--line);
+	border-radius: 9px;
+	background: var(--surface-hi);
+	transition:
+		transform 0.15s ease,
+		border-color 0.15s ease,
+		box-shadow 0.15s ease;
+}
+
+.photo-thumb:hover {
+	transform: translateY(-2px);
+	border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
+	box-shadow: 0 6px 18px rgb(0 0 0 / 22%);
+}
+
+/* The full-size popup. The dialog itself is invisible — just the photo, fitted to the
+   viewport, over the dimmed page. */
+.photo-modal {
+	max-width: 94vw;
+	max-height: 94vh;
+	padding: 0;
+	border: 0;
+	background: none;
+	overflow: visible;
+	cursor: zoom-out;
+}
+
+.photo-modal::backdrop {
+	background: rgb(0 0 0 / 80%);
+}
+
+.photo-modal img {
+	display: block;
+	max-width: 94vw;
+	max-height: 94vh;
+	border-radius: 9px;
+	box-shadow: 0 10px 40px rgb(0 0 0 / 50%);
+}
+
+@media (max-width: 620px) {
+	.player-banner {
+		height: 160px;
+	}
+
+	.player-hero-body {
+		align-items: flex-start;
+		flex-direction: column;
+		gap: 10px;
+		padding: 0 18px 20px;
+	}
+
+	.player-hero:not(:has(.player-banner)) .player-hero-body {
+		align-items: flex-start;
+	}
+
+	.player-avatar {
+		width: 92px;
+		height: 92px;
+		margin-top: -46px;
+		border-width: 3px;
+	}
+
+	.player-hero-body h1 {
+		font-size: 1.5rem;
+	}
+
+	.photo-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+}