fix: add POST handler for join requests API endpoint

Previously the endpoint only had a GET handler, causing a 405 error
when users tried to request approval for approval-only rooms.

Now users can POST to create join requests with optional displayName.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/api/arcade/rooms/[roomId]/join-requests/route.ts

@@ -1,6 +1,7 @@
 import { type NextRequest, NextResponse } from 'next/server'
+import { createJoinRequest, getPendingJoinRequests } from '@/lib/arcade/room-join-requests'
+import { getRoomById } from '@/lib/arcade/room-manager'
 import { getRoomMembers } from '@/lib/arcade/room-membership'
-import { getPendingJoinRequests } from '@/lib/arcade/room-join-requests'
 import { getViewerId } from '@/lib/viewer'
 
 type RouteContext = {
@@ -37,3 +38,58 @@ export async function GET(req: NextRequest, context: RouteContext) {
     return NextResponse.json({ error: 'Failed to get join requests' }, { status: 500 })
   }
 }
+
+/**
+ * POST /api/arcade/rooms/:roomId/join-requests
+ * Create a join request for an approval-only room
+ * Body:
+ *   - displayName?: string (optional, will generate from viewerId if not provided)
+ */
+export async function POST(req: NextRequest, context: RouteContext) {
+  try {
+    const { roomId } = await context.params
+    const viewerId = await getViewerId()
+    const body = await req.json().catch(() => ({}))
+
+    // Get room to verify it exists
+    const room = await getRoomById(roomId)
+    if (!room) {
+      return NextResponse.json({ error: 'Room not found' }, { status: 404 })
+    }
+
+    // Verify room is approval-only
+    if (room.accessMode !== 'approval-only') {
+      return NextResponse.json(
+        { error: 'This room does not require approval to join' },
+        { status: 400 }
+      )
+    }
+
+    // Get or generate display name
+    const displayName = body.displayName || `Guest ${viewerId.slice(-4)}`
+
+    // Validate display name length
+    if (displayName.length > 50) {
+      return NextResponse.json(
+        { error: 'Display name too long (max 50 characters)' },
+        { status: 400 }
+      )
+    }
+
+    // Create join request
+    const request = await createJoinRequest({
+      roomId,
+      userId: viewerId,
+      userName: displayName,
+    })
+
+    console.log(
+      `[Join Requests] Created request for user ${viewerId} (${displayName}) to join room ${roomId}`
+    )
+
+    return NextResponse.json({ request }, { status: 201 })
+  } catch (error: any) {
+    console.error('Failed to create join request:', error)
+    return NextResponse.json({ error: 'Failed to create join request' }, { status: 500 })
+  }
+}