From 2d7d37f38247e8b5e3cc7d1fef3138abfdc77585 Mon Sep 17 00:00:00 2001 From: Devin Zuczek Date: Mon, 21 Sep 2026 23:17:00 -0400 Subject: [PATCH] [www] add mod delete room Co-authored-by: Jake Vice --- apps/rooms/src/rooms.app.ts | 7 +- apps/www/src/client/App.tsx | 426 +++++++++++++++++++++++++++++---- apps/www/src/client/api.ts | 2 +- apps/www/src/client/styles.css | 34 ++- 4 files changed, 410 insertions(+), 59 deletions(-) diff --git a/apps/rooms/src/rooms.app.ts b/apps/rooms/src/rooms.app.ts index cd41a3e..8fb09c5 100644 --- a/apps/rooms/src/rooms.app.ts +++ b/apps/rooms/src/rooms.app.ts @@ -1858,7 +1858,8 @@ const app = new Hono() Error: 'This room does not exist!', }) } - if (room.CreatorAccountId !== accountId) { + const isOwner = room.CreatorAccountId === accountId + if (!isOwner && !(await isStaff(c))) { return roomResult(c, { Success: false, ErrorId: 'Rooms.NotOwner', @@ -2063,7 +2064,7 @@ const app = new Hono() } ) - // Delete a room. Auth-gated (401) and owner-only (the room's CreatorAccountId). + // Delete a room. Auth-gated (401); owners and staff (developers/moderators) may delete. // Removes the room record (and per-player interactions with it) and the room's // image object from the shared CDN bucket. Images players *took* in the room are // left alone — they live in the api/img world and outlast the room. @@ -2073,7 +2074,7 @@ const app = new Hono() tags: ['Room settings'], summary: 'Delete a room', description: [ - 'Owner-only. Removes the room record, the per-player interactions with it, and the', + 'Owner or staff. Removes the room record, the per-player interactions with it, and the', 'room’s image object from the shared CDN bucket. Photos players TOOK in the room are', 'left alone — those live in the api/img world and outlive the room.', ].join(' '), diff --git a/apps/www/src/client/App.tsx b/apps/www/src/client/App.tsx index e4ab1a6..af8273b 100644 --- a/apps/www/src/client/App.tsx +++ b/apps/www/src/client/App.tsx @@ -23,6 +23,7 @@ import { setHosts, setToken, useAction, + usernamesFor, where, } from './api' import { ModerationPage } from './Moderation' @@ -113,6 +114,8 @@ interface OwnedRoom { RoomId: number Name: string Description: string + /** Who made it — the account the public page links to, and whom the owner view is for. */ + CreatorAccountId: number /** A key on the `img` worker; a room with no image of its own gets the fallback. */ ImageName: string /** The `Accessibility` ordinal, NOT the enum name — see ACCESSIBILITY_LABEL. */ @@ -819,7 +822,9 @@ interface PublicRoom { /** Prefix-search accounts by username — backs the header search bar. */ async function searchPlayers(query: string): Promise { if (query.trim() === '') return [] - return call(`${where().accounts}/account/search?name=${encodeURIComponent(query.trim())}`) + return call( + `${where().accounts}/account/search?name=${encodeURIComponent(query.trim())}` + ) } const fetchPublicAccount = (username: string): Promise => @@ -833,15 +838,54 @@ const fetchPublicPhotos = (accountId: number): Promise => const fetchPublicRooms = (accountId: number): Promise => call(`${where().rooms}/rooms/ownedby/${accountId}`) +/** + * One room by id, through the public lookup. `{}` (not a 404) when there's no such room — + * the client reads an empty object as "no room", and so does this: null. + */ +async function fetchPublicRoom(roomId: number): Promise { + const room = await call>(`${where().rooms}/rooms?id=${roomId}`) + return 'RoomId' in room ? (room as OwnedRoom) : null +} + +/** + * The public photos taken in a room. The feed serves the raw `SavedImage` record (`Id`, + * not `SavedImageId` — see the api worker's note on why the two lists differ), so it's + * narrowed here to the shape the photo grid draws. + */ +const fetchRoomPhotos = (roomId: number): Promise => + call>( + `${where().api}/api/images/v4/room/${roomId}` + ).then((images) => + images.map((i) => ({ + SavedImageId: i.Id, + ImageName: i.ImageName, + CreatedAt: i.CreatedAt, + CheerCount: i.CheerCount, + })) + ) + +/** + * Delete a room outright — the staff takedown. `rooms` lets the owner or a developer / + * moderator through and refuses everyone else; it answers a refusal as a 200 carrying + * `Success: false` (the game's envelope), so the check is on the body, not the status. + */ +async function deleteRoom(roomId: number): Promise { + const result = await call<{ Success: boolean; Error: string | null }>( + `${where().rooms}/rooms/${roomId}`, + { method: 'DELETE', authed: true } + ) + if (!result.Success) throw new Error(result.Error || 'The room couldn’t be deleted.') +} + /** The `/u/` 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 nav's player search. `/u/:name` profiles stay reachable by URL either way; this only +// decides whether the search bar that leads to them is shown. +const SHOW_PLAYER_SEARCH: boolean = true /** * The header search bar — a rec.net-style bubble dropdown of matching players as you @@ -902,8 +946,16 @@ function PlayerSearch({ navigate }: { navigate: Navigate }) { {open && results.length > 0 && (
{results.map((r) => ( - ))}
{/* 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 && ( - setOpen(null)} onClick={() => setOpen(null)}> + setOpen(null)} + onClick={() => setOpen(null)} + > )} @@ -962,13 +1029,26 @@ function PhotoGrid({ photos }: { photos: PublicPhoto[] }) { * "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 }) { +function PlayerPage({ + username, + config, + navigate, +}: { + username: string + config: SiteConfig | undefined + navigate: Navigate +}) { const [account, setAccount] = useState(undefined) const [rooms, setRooms] = useState(null) const [photos, setPhotos] = useState(null) const [error, setError] = useState('') useEffect(() => { + // Waits for the config, not the session: this page is public, but every fetch on it + // goes through `where()`, which has no hostnames until `/api/config` lands. On a cold + // load of `/u/` the effect would otherwise fire first and the page would be + // stuck on "Still starting up". + if (config === undefined) return setAccount(undefined) setRooms(null) setPhotos(null) @@ -976,12 +1056,16 @@ function PlayerPage({ username, navigate }: { username: string; navigate: Naviga .then((a) => { setAccount(a) if (a) { - void fetchPublicRooms(a.accountId).then(setRooms).catch(() => setRooms([])) - void fetchPublicPhotos(a.accountId).then(setPhotos).catch(() => setPhotos([])) + 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]) + }, [username, config]) if (error) { return ( @@ -1011,10 +1095,18 @@ function PlayerPage({ username, navigate }: { username: string; navigate: Naviga
{account.bannerImage && ( - + )}
- +

{account.displayName || account.username}

@@ -1036,7 +1128,12 @@ function PlayerPage({ username, navigate }: { username: string; navigate: Naviga {rooms.map((room) => (

  • - +
    ^{room.Name}

    {room.Stats.VisitCount.toLocaleString()} visits

    @@ -1146,9 +1243,9 @@ export function App() { // entry already sends to the Worker. ) : lookupUsername !== null ? ( - + ) : roomId !== null ? ( - + ) : ( )} @@ -1604,74 +1701,305 @@ function AccountPage({ */ function RoomPage({ account, + config, roomId, navigate, }: { account: SelfAccount | null | undefined + config: SiteConfig | undefined roomId: number navigate: Navigate }) { - const [rooms, setRooms] = useState(null) + // undefined = not fetched yet; null = no such room. + const [room, setRoom] = useState(undefined) + // The signed-in player's own rooms, or null while unknown. Decides which view this is: + // a room in this list gets the owner's editable page, anything else the public one. + const [mine, setMine] = useState(null) + // Set by the staff takedown. The room is gone by then, so the page says so rather than + // re-fetching and answering with the "private or missing" line, which would be a lie. + const [takenDown, setTakenDown] = useState(null) const [error, setError] = useState('') const accountId = account?.accountId useEffect(() => { - if (account === null) navigate('/login') - }, [account, navigate]) + // Waits for the config (`where()` has no hostnames before it), not the session — + // the lookup is public, and a signed-out visitor is this page's main reader. + if (config === undefined) return + setRoom(undefined) + void fetchPublicRoom(roomId) + .then(setRoom) + .catch((e) => setError(e instanceof Error ? e.message : String(e))) + }, [roomId, config]) useEffect(() => { - // Waits for the session: the list is auth-gated, and `account === undefined` only - // means the stored token hasn't been checked yet. + // `account === undefined` only means the stored token hasn't been checked yet. if (accountId === undefined) return void fetchMyRooms() - .then(setRooms) - .catch((e) => setError(e instanceof Error ? e.message : String(e))) + .then(setMine) + // The owner's list failing to load must not hide a public room — it just reads + // as somebody else's. + .catch(() => setMine([])) }, [accountId]) - if (!account) { + // Whose page this is isn't known until both the room and (for a signed-in player) the + // owner's list are in. Choosing early would flash the public view at an owner. + const owned = mine?.find((r) => r.RoomId === roomId) + const settled = + room !== undefined && (account === null || (account !== undefined && mine !== null)) + + if (takenDown !== null) { return ( -
    -

    {account === undefined ? 'Loading…' : 'Redirecting…'}

    +
    +

    ^{takenDown} was deleted.

    +

    + + ← Home + +

    +
    + ) + } + if (error) { + return ( +
    +

    {error}

    +
    + ) + } + if (!settled) { + return ( +
    +

    Loading…

    ) } - const room = rooms?.find((r) => r.RoomId === roomId) - - return ( -
    -

    - - ← My rooms - -

    - {error ? ( -

    {error}

    - ) : rooms === null ? ( -

    Loading…

    - ) : room === undefined ? ( - // Covers both "no such room" and "someone else's" — deliberately the same - // sentence, since telling a stranger which of the two it is answers a question - // they have no business asking. -

    That isn't one of your rooms.

    - ) : ( + if (owned) { + return ( +
    +

    + + ← My rooms + +

    - setRooms((current) => + setMine((current) => (current ?? []).map((r) => (r.RoomId === updated.RoomId ? updated : r)) ) } /> +
    + ) + } + + // Unlisted rooms are reachable by link, which is what a URL is. Everything else that + // isn't Public is somebody's private space, and gets the same sentence a missing room + // does: which of the two it is answers a question a stranger has no business asking. + const visible = + room !== null && + (room.Accessibility === Accessibility.Public || room.Accessibility === Accessibility.Unlisted) + + return ( +
    + {visible ? ( + setTakenDown(room.Name)} + /> + ) : ( +

    + There's no room here — it's private, or it doesn't exist. +

    )}
    ) } +/** + * A room as anyone sees it: the same hero the owner's page draws, with the creator linked + * to their profile in place of the upload control, then the room's public facts, the + * photos players took in it, and its subrooms — read-only, since nothing here is the + * viewer's to change. + */ +function PublicRoomView({ + room, + navigate, + onTakenDown, +}: { + room: OwnedRoom + navigate: Navigate + onTakenDown: () => void +}) { + const [creator, setCreator] = useState<{ username: string; displayName: string } | null>(null) + const [photos, setPhotos] = useState(null) + const created = new Date(room.CreatedAt) + const subRooms = room.SubRooms ?? [] + + useEffect(() => { + setCreator(null) + setPhotos(null) + void usernamesFor([room.CreatorAccountId]).then((names) => + setCreator(names.get(room.CreatorAccountId) ?? null) + ) + void fetchRoomPhotos(room.RoomId) + .then(setPhotos) + .catch(() => setPhotos([])) + }, [room.RoomId, room.CreatorAccountId]) + + return ( + <> +
    + +
    +
    +

    ^{room.Name}

    + +
    + {creator && ( +

    + by{' '} + + {creator.displayName || creator.username} + +

    + )} + {room.Description ? ( +

    {room.Description}

    + ) : ( +

    No description.

    + )} +

    + {room.Stats.VisitCount.toLocaleString()} visit + {room.Stats.VisitCount === 1 ? '' : 's'} · {room.Stats.FavoriteCount.toLocaleString()}{' '} + favourite + {room.Stats.FavoriteCount === 1 ? '' : 's'} · {room.Stats.CheerCount.toLocaleString()}{' '} + cheer{room.Stats.CheerCount === 1 ? '' : 's'} +

    +
    +
    + +
    +

    About this room

    +
    +
    Max players
    +
    {room.MaxPlayers}
    +
    Cloning
    +
    {room.CloningAllowed ? 'Anyone may clone this room' : 'Not allowed'}
    +
    Tags
    +
    {room.Tags?.length ? room.Tags.map((t) => `#${t.Tag}`).join(' ') : 'None'}
    +
    Created
    +
    {Number.isNaN(created.getTime()) ? room.CreatedAt : created.toLocaleDateString()}
    +
    +
    + +
    +

    Photos taken here

    + {photos === null ? ( +

    Loading…

    + ) : photos.length === 0 ? ( +

    Nobody has taken a photo here yet.

    + ) : ( + + )} +
    + +
    +

    Subrooms

    + {subRooms.length === 0 ? ( +

    This room has no subrooms.

    + ) : ( +
      + {subRooms.map((sub) => ( +
    • +
      + {sub.Name} + +
      +

      + Up to {sub.MaxPlayers} player{sub.MaxPlayers === 1 ? '' : 's'} + {sub.IsSandbox ? ' · sandbox' : ''} +

      +
      • + ))} +
    + )} +
    + + {/* Staff only, and cosmetic: hidden for everyone else, but `rooms` checks the token's + role itself on the DELETE. */} + {isAdmin() && } + + ) +} + +/** + * The staff takedown, at the foot of a public room's page: the room is already on screen, + * so there's nothing to look up and nothing to confirm but the deletion itself. Two + * steps — a plain card, then the same accent-bordered confirm the ban form uses — since + * this is the one thing on the site that can't be undone. + */ +function StaffTakedown({ room, onTakenDown }: { room: OwnedRoom; onTakenDown: () => void }) { + const [confirming, setConfirming] = useState(false) + const { pending, error, run } = useAction() + + if (!confirming) { + return ( +
    +

    Staff

    +

    + Deleting a room removes it for everyone: the room, its subrooms and their saves, and its + picture. Photos players took in it stay on their profiles. +

    + +
    + ) + } + + return ( +
    +

    Delete ^{room.Name}?

    +
    { + e.preventDefault() + void run(async () => { + await deleteRoom(room.RoomId) + onTakenDown() + return '' + }) + }} + > +

    + This deletes the room for everyone, including its creator, and can't be undone. +

    + {error &&

    {error}

    } +
    + + +
    +
    +
    + ) +} + /** The platforms a room says it supports, named the way the game names them. */ function platformList(room: OwnedRoom): string[] { const on: string[] = [] diff --git a/apps/www/src/client/api.ts b/apps/www/src/client/api.ts index 4c97b36..9219ae6 100644 --- a/apps/www/src/client/api.ts +++ b/apps/www/src/client/api.ts @@ -121,7 +121,7 @@ function errorMessage(data: Record, status: number): string { } interface CallOptions { - method?: 'GET' | 'POST' | 'PUT' + method?: 'GET' | 'POST' | 'PUT' | 'DELETE' /** Form fields — auth and accounts read their input with Hono's `parseBody()`. */ form?: Record /** A JSON body — what notify's internal endpoints take instead. */ diff --git a/apps/www/src/client/styles.css b/apps/www/src/client/styles.css index bf9002e..0702243 100644 --- a/apps/www/src/client/styles.css +++ b/apps/www/src/client/styles.css @@ -135,6 +135,9 @@ body { font-size: 0.95rem; color: var(--muted); text-decoration: none; + /* A link is one or two words; with the search bar in the row it has to give up space + by wrapping the ROW (see the nav rule under player search), not by breaking mid-link. */ + white-space: nowrap; } .linkish { @@ -736,6 +739,13 @@ h2 { /* ---- One room's page ---------------------------------------------------- */ +/* The staff card at the foot of a public room's page. Plain until it's asked to do + something; the confirm step borrows the moderation panel's accent border (`.mod-dialog`) + so it reads as the same kind of thing as a ban form: waiting on you, and consequential. */ +.takedown-confirm p { + margin: 8px 0 14px; +} + /* The way back out, above the page's own heading. */ .backlink { margin: 0 0 16px; @@ -846,6 +856,23 @@ h2 { overflow-wrap: anywhere; } +/* Who made it, on the public page — the one link in the hero, so it's the one thing there + in the accent. */ +.room-hero-by { + margin: 4px 0 0; + font-size: 0.9rem; + color: var(--muted); +} + +.room-hero-by a { + color: var(--accent); + text-decoration: none; +} + +.room-hero-by a:hover { + text-decoration: underline; +} + /* Label/value pairs. A two-column grid rather than a list of "Label: value" lines, so the values line up and the page can be read down one column. */ .facts { @@ -1724,7 +1751,6 @@ button[type='submit']:disabled { 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. */ @@ -1754,11 +1780,7 @@ button[type='submit']:disabled { color-mix(in srgb, var(--accent) 24%, transparent), transparent 45% ), - linear-gradient( - 135deg, - var(--surface-hi), - var(--surface) - ); + linear-gradient(135deg, var(--surface-hi), var(--surface)); } .player-hero-body {