feat(reaction-roles): editable form, emoji picker, formatting, media, export/import

packages/backend/src/errors/AppError.ts

@@ -32,6 +32,10 @@ export class AppError extends Error {
         return new AppError(415, message)
     }
 
+    static badGateway(message = 'Bad gateway'): AppError {
+        return new AppError(502, message)
+    }
+
     static serviceUnavailable(message = 'Service unavailable'): AppError {
         return new AppError(503, message)
     }

packages/backend/src/routes/guilds.ts

@@ -140,4 +140,16 @@ export function setupGuildRoutes(app: Express): void {
             res.json({ roles })
         }),
     )
+
+    app.get(
+        '/api/guilds/:guildId/emojis',
+        requireAuth,
+        validateParams(guildIdParam),
+        requireGuildModuleAccess('overview'),
+        asyncHandler(async (req: AuthenticatedRequest, res: Response) => {
+            const guildId = getGuildId(req)
+            const emojis = await guildService.getGuildEmojis(guildId)
+            res.json({ emojis })
+        }),
+    )
 }

packages/backend/src/routes/roles.ts

@@ -1,4 +1,4 @@
-import type { Express, Response } from 'express'
+import type { Express, Response, NextFunction } from 'express'
 import { requireAuth, type AuthenticatedRequest } from '../middleware/auth'
 import { requireGuildModuleAccess } from '../middleware/guildAccess'
 import { validateParams, validateBody } from '../middleware/validate'
@@ -11,11 +11,88 @@ import {
     roleManagementService,
 } from '@lucky/shared/services'
 import { guildService } from '../services/GuildService'
+import multer from 'multer'
 
 function p(val: string | string[]): string {
     return typeof val === 'string' ? val : val[0]
 }
 
+// File upload middleware for reaction roles images
+const imageUpload = multer({
+    storage: multer.memoryStorage(),
+    // Bound every multipart dimension, not just the file, so a malformed/hostile
+    // request can't exhaust memory (DoS): one 8MB image + the small JSON payload.
+    limits: {
+        fileSize: 8 * 1024 * 1024, // 8MB per file
+        files: 1,
+        fields: 20,
+        fieldSize: 256 * 1024, // the `payload` JSON field
+        parts: 25,
+    },
+    fileFilter: (req, file, cb) => {
+        const validMimetypes = [
+            'image/png',
+            'image/jpeg',
+            'image/gif',
+            'image/webp',
+        ]
+        if (validMimetypes.includes(file.mimetype)) {
+            cb(null, true)
+        } else {
+            cb(
+                new Error(
+                    'Invalid image file type. Only PNG, JPEG, GIF, and WebP are allowed',
+                ),
+            )
+        }
+    },
+})
+
+// Wrapper to handle multer errors
+const handleImageUpload = imageUpload.single('image')
+const imageUploadHandler = (
+    req: AuthenticatedRequest,
+    res: Response,
+    next: NextFunction,
+) => {
+    handleImageUpload(req, res, (err: unknown) => {
+        if (err instanceof multer.MulterError) {
+            if (err.code === 'LIMIT_FILE_SIZE') {
+                return next(
+                    AppError.payloadTooLarge('File size exceeds 8MB limit'),
+                )
+            }
+            return next(AppError.badRequest(err.message))
+        } else if (err) {
+            return next(
+                AppError.badRequest(
+                    err instanceof Error ? err.message : 'Image upload failed',
+                ),
+            )
+        }
+        next()
+    })
+}
+
+// Parse the reaction-role payload from either a JSON body or the `payload`
+// field of a multipart (file-upload) request.
+function parseReactionRolePayload(req: AuthenticatedRequest): unknown {
+    if (req.is('multipart/form-data')) {
+        const raw = (req.body as Record<string, unknown>).payload
+        if (typeof raw !== 'string') {
+            throw AppError.badRequest(
+                'Missing payload field in multipart request',
+            )
+        }
+        try {
+            return JSON.parse(raw) as unknown
+        } catch {
+            throw AppError.badRequest('Invalid JSON in payload field')
+        }
+    }
+    return req.body
+}
+
 export function setupRolesRoutes(app: Express): void {
     app.get(
         '/api/guilds/:guildId/reaction-roles',
@@ -35,32 +112,117 @@ export function setupRolesRoutes(app: Express): void {
         requireAuth,
         requireGuildModuleAccess('overview', 'manage'),
         validateParams(s.guildIdParam),
-        validateBody(s.createReactionRoleBody),
+        imageUploadHandler,
         asyncHandler(async (req: AuthenticatedRequest, res: Response) => {
             const guildId = p(req.params.guildId)
             const botToken = process.env.DISCORD_TOKEN?.trim()
             if (!botToken) {
                 throw AppError.serviceUnavailable('Bot token not configured')
             }
-            const { channelId, title, description, roles } = req.body as {
-                channelId: string
-                title: string
-                description: string
-                roles: Array<{
-                    roleId: string
-                    label: string
-                    emoji?: string
-                    style?: 'Primary' | 'Secondary' | 'Success' | 'Danger'
-                }>
+
+            const payload = parseReactionRolePayload(req)
+
+            // Validate parsed payload with schema
+            const validationResult = s.createReactionRoleBody.safeParse(payload)
+            if (!validationResult.success) {
+                const errors = validationResult.error.flatten()
+                throw AppError.badRequest(
+                    `Validation failed: ${JSON.stringify(errors)}`,
+                )
             }
+
+            const { channelId, title, description, imageUrl, roles } =
+                validationResult.data
+
+            const imageFile = req.file
+                ? {
+                      buffer: req.file.buffer,
+                      filename: req.file.originalname,
+                      contentType: req.file.mimetype,
+                  }
+                : undefined
+
             const result =
                 await reactionRolesService.createReactionRoleMessageFromDashboard(
-                    { guildId, channelId, title, description, botToken, roles },
+                    {
+                        guildId,
+                        channelId,
+                        title,
+                        description,
+                        imageUrl,
+                        imageFile,
+                        botToken,
+                        roles,
+                    },
                 )
             res.status(201).json(result)
         }),
     )
 
+    app.put(
+        '/api/guilds/:guildId/reaction-roles/:messageId',
+        requireAuth,
+        writeLimiter,
+        requireGuildModuleAccess('overview', 'manage'),
+        validateParams(s.messageIdParam),
+        imageUploadHandler,
+        asyncHandler(async (req: AuthenticatedRequest, res: Response) => {
+            const guildId = p(req.params.guildId)
+            const messageId = p(req.params.messageId)
+            const botToken = process.env.DISCORD_TOKEN?.trim()
+            if (!botToken) {
+                throw AppError.serviceUnavailable('Bot token not configured')
+            }
+
+            const payload = parseReactionRolePayload(req)
+
+            // Validate parsed payload with schema
+            const validationResult = s.updateReactionRoleBody.safeParse(payload)
+            if (!validationResult.success) {
+                const errors = validationResult.error.flatten()
+                throw AppError.badRequest(
+                    `Validation failed: ${JSON.stringify(errors)}`,
+                )
+            }
+
+            const { title, description, imageUrl, roles } =
+                validationResult.data
+
+            const imageFile = req.file
+                ? {
+                      buffer: req.file.buffer,
+                      filename: req.file.originalname,
+                      contentType: req.file.mimetype,
+                  }
+                : undefined
+
+            try {
+                const result =
+                    await reactionRolesService.updateReactionRoleMessage({
+                        guildId,
+                        messageId,
+                        title,
+                        description,
+                        imageUrl,
+                        imageFile,
+                        botToken,
+                        roles,
+                    })
+                res.json(result)
+            } catch (error) {
+                const message =
+                    error instanceof Error ? error.message : 'Unknown error'
+                if (message === 'Reaction role message not found') {
+                    throw AppError.notFound('Reaction role message not found')
+                }
+                if (message.startsWith('Discord API error')) {
+                    throw AppError.badGateway(message)
+                }
+                throw AppError.badRequest(message)
+            }
+        }),
+    )
+
     app.delete(
         '/api/guilds/:guildId/reaction-roles/:messageId',
         requireAuth,
@@ -125,6 +287,12 @@ export function setupRolesRoutes(app: Express): void {
                     error instanceof Error
                         ? error.message
                         : 'Failed to create role'
+                if (
+                    message.startsWith('Discord API error') ||
+                    message === 'No bot token available'
+                ) {
+                    throw AppError.badGateway(message)
+                }
                 throw AppError.badRequest(message)
             }
         }),
@@ -157,6 +325,12 @@ export function setupRolesRoutes(app: Express): void {
                 if (message === 'Role not found') {
                     throw AppError.notFound('Role not found')
                 }
+                if (
+                    message.startsWith('Discord API error') ||
+                    message === 'No bot token available'
+                ) {
+                    throw AppError.badGateway(message)
+                }
                 throw AppError.badRequest(message)
             }
         }),
@@ -183,6 +357,12 @@ export function setupRolesRoutes(app: Express): void {
                 if (message === 'Role not found') {
                     throw AppError.notFound(message)
                 }
+                if (
+                    message.startsWith('Discord API error') ||
+                    message === 'No bot token available'
+                ) {
+                    throw AppError.badGateway(message)
+                }
                 throw AppError.badRequest(message)
             }
         }),

packages/backend/src/schemas/management.ts

@@ -111,6 +111,24 @@ const createReactionRoleBody = z
         channelId: z.string().regex(/^\d{17,20}$/, 'Invalid channel ID'),
         title: z.string().min(1).max(256),
         description: z.string().min(1).max(4096),
+        imageUrl: z.string().url().max(2048).optional(),
+        roles: z.array(reactionRoleEntrySchema).min(1).max(25),
+    })
+    .strict()
+    .refine(
+        (data) =>
+            new Set(data.roles.map((r) => r.roleId)).size === data.roles.length,
+        {
+            message: 'Duplicate roleId entries are not allowed',
+            path: ['roles'],
+        },
+    )
+
+const updateReactionRoleBody = z
+    .object({
+        title: z.string().min(1).max(256),
+        description: z.string().min(1).max(4096),
+        imageUrl: z.string().url().max(2048).optional(),
         roles: z.array(reactionRoleEntrySchema).min(1).max(25),
     })
     .strict()
@@ -143,5 +161,6 @@ export const managementSchemas = {
     roleUpsertBody,
     bulkDeleteBody,
     createReactionRoleBody,
+    updateReactionRoleBody,
     messageIdParam,
 }