Hosted rooms phase 2: moderators, bans, privacy, invites, images, favorites, ratings, recent rooms, occupancy watch

Moderators (up to 20 IMVU accounts, set by ID or name) and the owner account boot
and ban over realtime (room.boot); bans are listed and lifted over REST. Private
rooms are unlisted and joined by the owner, moderators and holders of an accepted
invite (room.invite / room.invited / room.invite_reply / room.invite_answer).
Room images (PNG/JPEG by magic bytes, up to 512 KB) are stored in the database
and served with cache headers. Per-person favorites, ratings and recent rooms.
room.watch pushes room.occupancy; participants carry their IMVU name, and
GET .../participants lists them. Contract in docs/hosted-rooms.md, "Phase 2".

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/app/rooms/[n]/edit/page.tsx

@@ -6,7 +6,9 @@ import { PageHeader } from "@/components/status";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { FieldGroup } from "@/components/ui/field";
 import { api, getMe, unwrap } from "@/lib/api";
-import { closeRoom, saveRoom } from "../../actions";
+import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { closeRoom, removeImage, saveImage, saveRoom } from "../../actions";
 import { RoomFields } from "../../room-fields";
 
 export const metadata: Metadata = { title: "Edit room" };
@@ -40,7 +42,7 @@ export default async function EditRoom({ params }: { params: Promise<{ n: string
         <CardContent>
           <ActionForm action={saveRoom} fields={{ n: room.n }}>
             <FieldGroup>
-              <RoomFields room={room} canAdult={links.some((l) => l.adult)} />
+              <RoomFields room={room} canAdult={links.some((l) => l.adult)} moderators />
               <div>
                 <SubmitButton pendingLabel="Saving…">Save</SubmitButton>
               </div>
@@ -49,6 +51,36 @@ export default async function EditRoom({ params }: { params: Promise<{ n: string
         </CardContent>
       </Card>
 
+      <Card>
+        <CardHeader>
+          <CardTitle>Image</CardTitle>
+          <CardDescription>Shown in room lists.</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {room.image && (
+            // The room's image, from the hub.
+            <img src={room.image} alt="" className="aspect-[332/281] w-full max-w-xs rounded-md bg-muted object-cover" />
+          )}
+          <ActionForm action={saveImage} fields={{ n: room.n }}>
+            <Field>
+              <FieldLabel htmlFor="image">{room.image ? "Replace" : "Upload"}</FieldLabel>
+              <Input id="image" name="image" type="file" accept="image/png,image/jpeg" required className="max-w-md" />
+              <FieldDescription>PNG or JPEG, up to 512 KB.</FieldDescription>
+            </Field>
+            <div>
+              <SubmitButton pendingLabel="Uploading…">Save image</SubmitButton>
+            </div>
+          </ActionForm>
+          {room.image && (
+            <ActionForm action={removeImage} fields={{ n: room.n }}>
+              <SubmitButton variant="outline" pendingLabel="Removing…">
+                Remove image
+              </SubmitButton>
+            </ActionForm>
+          )}
+        </CardContent>
+      </Card>
+
       <Card>
         <CardHeader>
           <CardTitle>Close room</CardTitle>