feat(bot): custom static emoji for thread ticketing

.devcontainer/docker-compose.yaml → .devcontainer/compose.yaml

@@ -44,12 +44,16 @@ services:
     environment:
       NODE_ENV: "development"
       NEXT_TELEMETRY_DISABLED: 1
+      DB_HOST: "ticketer-development-database"
+      DB_DATABASE: "Ticketer"
+      DB_USER: "dev_container"
+      DB_PASSWORD: "12345678"
+      DB_PORT: 3307
     networks:
       - ticketer_development_database_network
 
 volumes:
   ticketer_development_database_data:
 
-# Important to make connections from the bot to the database work!
 networks:
   ticketer_development_database_network:

.devcontainer/devcontainer.json

@@ -5,7 +5,7 @@
 
 	// Update the 'dockerComposeFile' list if you have more compose files or use different names.
 	// The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
-	"dockerComposeFile": ["docker-compose.yaml"],
+	"dockerComposeFile": ["compose.yaml"],
 
 	// The 'service' property is the name of the service for the container that VS Code should
 	// use. Update this value and .devcontainer/docker-compose.yml to the real service name.

apps/bot/biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
 	"extends": "//",
 	"files": {
 		"includes": ["!src/i18n/i18n-*.ts", "!src/i18n/formatters.ts"]

apps/bot/package.json

@@ -4,11 +4,11 @@
 	"main": "./src/index.ts",
 	"type": "module",
 	"scripts": {
-		"dev": "tsx watch --env-file=.env.bot.development.local --env-file=.env.database.development.local .",
-		"debug": "tsx watch --inspect-wait --env-file=.env.bot.development.local --env-file=.env.database.development.local .",
+		"dev": "tsx watch --env-file=.env.bot.development.local .",
+		"debug": "tsx watch --inspect-wait --env-file=.env.bot.development.local .",
 		"start": "tsx .",
 		"check": "biome check --write",
-		"commands:deploy:development": "tsx --env-file=.env.bot.development.local --env-file=.env.database.development.local ./src/deploy.ts",
+		"commands:deploy:development": "tsx --env-file=.env.bot.development.local ./src/deploy.ts",
 		"commands:deploy:production": "tsx ./src/deploy.ts",
 		"i18n": "typesafe-i18n"
 	},
@@ -20,9 +20,9 @@
 		"discord.js": "^14.25.1",
 		"tsx": "^4.21.0",
 		"typesafe-i18n": "^5.26.2",
-		"zod": "^4.3.4"
+		"zod": "^4.3.5"
 	},
 	"devDependencies": {
-		"@types/node": "^25.0.3"
+		"@types/node": "^25.0.6"
 	}
 }

apps/bot/src/commands/staff/configuration-ticket-threads/helpers.ts

@@ -179,8 +179,7 @@ export async function categoryFieldsModal(
 				.setCustomId(customId('emoji'))
 				.setRequired(false)
 				.setMinLength(1)
-				// 8 because of unicode.
-				.setMaxLength(8)
+				.setMaxLength(21)
 				.setStyle(TextInputStyle.Short),
 		);
 	const titleInput = new LabelBuilder()

apps/bot/src/commands/staff/configuration-ticket-threads/modal.ts

@@ -15,9 +15,9 @@ import {
 	userEmbed,
 	userEmbedError,
 } from '@ticketer/djs-framework';
-import { inlineCode } from 'discord.js';
+import { formatEmoji, inlineCode, MessageFlags } from 'discord.js';
 import { prettifyError } from 'zod';
-import { extractEmoji } from '@/utils';
+import { discordEmojiFromId, extractDiscordEmoji } from '@/utils';
 import { configurationMenu, HasGlobalConfiguration } from './helpers';
 
 const MAXIMUM_CATEGORY_AMOUNT = 10;
@@ -31,13 +31,6 @@ export default class extends Modal.Interaction {
 	@HasGlobalConfiguration
 	public async execute({ interaction }: Modal.Context) {
 		const { customId, fields, guildId } = interaction;
-		const { dynamicValue } = extractCustomId(customId);
-
-		await (dynamicValue ? interaction.deferUpdate() : interaction.deferReply());
-
-		const emoji = fields.getTextInputValue('emoji');
-		const categoryEmoji = extractEmoji(emoji);
-
 		const {
 			data: values,
 			error,
@@ -48,13 +41,37 @@ export default class extends Modal.Interaction {
 		});
 
 		if (!success) {
-			return interaction.editReply({
+			return interaction.reply({
 				embeds: [
 					userEmbedError({ client: interaction.client, description: prettifyError(error), member: interaction.member }),
 				],
+				flags: [MessageFlags.Ephemeral],
 			});
 		}
 
+		const { dynamicValue } = extractCustomId(customId);
+		await (dynamicValue ? interaction.deferUpdate() : interaction.deferReply());
+
+		let { emoji: categoryEmoji, isSnowflake } = extractDiscordEmoji(fields.getTextInputValue('emoji'));
+
+		if (isSnowflake) {
+			const fetchedEmoji = await discordEmojiFromId(interaction, categoryEmoji);
+
+			if (!fetchedEmoji?.id || !fetchedEmoji.botInGuild || fetchedEmoji.animated) {
+				return interaction.editReply({
+					embeds: [
+						userEmbedError({
+							client: interaction.client,
+							description: 'The emoji ID is invalid, animated, or from a server the bot is not in.',
+							member: interaction.member,
+						}),
+					],
+				});
+			}
+
+			categoryEmoji = fetchedEmoji.id;
+		}
+
 		const { categoryDescription, categoryTitle } = values;
 		let categoryId = 0;
 
@@ -114,7 +131,8 @@ export default class extends Modal.Interaction {
 			.setFields(
 				{
 					name: 'Emoji',
-					value: categoryEmoji ?? 'None.',
+					// biome-ignore lint/style/noNonNullAssertion: It is defined if isSnowflake is true.
+					value: isSnowflake ? formatEmoji(categoryEmoji!, false) : (categoryEmoji ?? 'None'),
 					inline: true,
 				},
 				{
@@ -131,7 +149,10 @@ export default class extends Modal.Interaction {
 		interaction.editReply({ components: [], embeds: [embed] });
 
 		if (categoryId) {
-			return interaction.followUp({ components: configurationMenu(categoryId), embeds: interaction.message?.embeds });
+			return interaction.followUp({
+				components: configurationMenu(categoryId),
+				embeds: interaction.message?.embeds,
+			});
 		}
 	}
 }

apps/bot/src/commands/thread-ticketing/edit-tickets/component.ts

@@ -55,7 +55,7 @@ export default class extends Component.Interaction {
 						.setDescription(
 							`${interaction.member} pruned ${categories.at(0)?.count.toString() ?? 'Unknown'} ` +
 								`ticket(s) with the state ${inlineCode(ThreadTicketing.ticketState(state))} in the following categories:
-							${categories.map((category) => inlineCode(ThreadTicketing.titleAndEmoji(category.categoryTitle, category.categoryEmoji))).join(', ')}.`,
+							${categories.map((category) => ThreadTicketing.titleAndEmoji(category.categoryTitle, category.categoryEmoji)).join(', ')}.`,
 						),
 				],
 			});
@@ -100,7 +100,7 @@ export default class extends Component.Interaction {
 						.setTitle('Purged Inactive Thread Tickets')
 						.setDescription(
 							`${interaction.member} purged ${categories.at(0)?.count.toString() ?? 'Unknown'} inactive ticket(s) in the following categories:
-							${categories.map((category) => inlineCode(ThreadTicketing.titleAndEmoji(category.categoryTitle, category.categoryEmoji))).join(', ')}.`,
+							${categories.map((category) => ThreadTicketing.titleAndEmoji(category.categoryTitle, category.categoryEmoji)).join(', ')}.`,
 						),
 				],
 			});

apps/bot/src/commands/thread-ticketing/panel.ts

@@ -1,4 +1,4 @@
-import { Command, container, customId, DeferReply, Modal, userEmbed, userEmbedError } from '@ticketer/djs-framework';
+import { Command, container, customId, Modal, userEmbed, userEmbedError } from '@ticketer/djs-framework';
 import {
 	ButtonBuilder,
 	ButtonStyle,
@@ -16,7 +16,7 @@ import {
 	TextInputStyle,
 } from 'discord.js';
 import { prettifyError, z } from 'zod';
-import { extractEmoji } from '@/utils';
+import { discordEmojiFromId, extractDiscordEmoji } from '@/utils';
 
 export default class extends Command.Interaction {
 	public readonly data = super.SlashBuilder.setName('panel')
@@ -58,13 +58,13 @@ export default class extends Command.Interaction {
 			);
 		const buttonEmojiInput = new LabelBuilder()
 			.setLabel('Buttom Emoji')
-			.setDescription('Write an emoji for the button used to create a ticket.')
+			.setDescription("Write an emoji for the button used to create a ticket. For your server's emoji, write its ID!")
 			.setTextInputComponent(
 				new TextInputBuilder()
 					.setCustomId(customId('button_emoji'))
 					.setRequired(false)
 					.setMinLength(1)
-					.setMaxLength(8)
+					.setMaxLength(21)
 					.setStyle(TextInputStyle.Short),
 			);
 		const buttonLabelInput = new LabelBuilder()
@@ -91,12 +91,21 @@ export default class extends Command.Interaction {
 export class ModalInteraction extends Modal.Interaction {
 	public readonly customIds = [customId('ticket_threads_categories_create_panel')];
 
-	@DeferReply()
 	public async execute({ interaction }: Modal.Context) {
-		const { fields, guild } = interaction;
+		const channel = interaction.fields.getSelectedChannels('channel', true).at(0);
 
-		const rawButtonEmoji = fields.getTextInputValue('button_emoji');
-		const buttonEmoji = extractEmoji(rawButtonEmoji) ?? '🎫';
+		if (!channel?.isTextBased()) {
+			return interaction.reply({
+				embeds: [
+					userEmbedError({
+						client: interaction.client,
+						description: 'The specified channel is not text based.',
+						member: interaction.member,
+					}),
+				],
+				flags: [MessageFlags.Ephemeral],
+			});
+		}
 
 		const { success, data, error } = z
 			.object({
@@ -105,13 +114,13 @@ export class ModalInteraction extends Modal.Interaction {
 				buttonLabel: z.string().min(1).max(80),
 			})
 			.safeParse({
-				title: fields.getTextInputValue('title'),
-				description: fields.getTextInputValue('description'),
-				buttonLabel: fields.getTextInputValue('button_label'),
+				title: interaction.fields.getTextInputValue('title'),
+				description: interaction.fields.getTextInputValue('description'),
+				buttonLabel: interaction.fields.getTextInputValue('button_label'),
 			});
 
 		if (!success) {
-			return interaction.editReply({
+			return interaction.reply({
 				embeds: [
 					userEmbedError({
 						client: interaction.client,
@@ -120,24 +129,33 @@ export class ModalInteraction extends Modal.Interaction {
 						title: 'One or multiple of the modal fields are invalid.',
 					}),
 				],
+				flags: [MessageFlags.Ephemeral],
 			});
 		}
 
-		const channel = fields.getSelectedChannels('channel', true).at(0);
-
-		if (!channel?.isTextBased()) {
-			return interaction.editReply({
-				embeds: [
-					userEmbedError({
-						client: interaction.client,
-						description: 'The specified channel is not text based.',
-						member: interaction.member,
-					}),
-				],
-			});
+		let { emoji, isSnowflake } = extractDiscordEmoji(interaction.fields.getTextInputValue('button_emoji'));
+		await interaction.deferReply();
+
+		if (isSnowflake) {
+			const fetchedEmoji = await discordEmojiFromId(interaction, emoji);
+
+			if (!fetchedEmoji?.id) {
+				return interaction.editReply({
+					embeds: [
+						userEmbedError({
+							client: interaction.client,
+							description: 'The emoji ID is invalid.',
+							member: interaction.member,
+						}),
+					],
+				});
+			}
+
+			emoji = fetchedEmoji.id;
 		}
 
-		const me = await guild.members.fetchMe();
+		emoji ||= '🎫';
+		const me = await interaction.guild.members.fetchMe();
 
 		if (!channel.permissionsFor(me).has([PermissionFlagsBits.ViewChannel, PermissionFlagsBits.SendMessages])) {
 			return interaction.editReply({
@@ -162,7 +180,7 @@ export class ModalInteraction extends Modal.Interaction {
 							.setButtonAccessory(
 								new ButtonBuilder()
 									.setCustomId(customId('ticket_threads_categories_create_list_panel'))
-									.setEmoji(buttonEmoji)
+									.setEmoji(emoji)
 									.setLabel(data.buttonLabel)
 									.setStyle(ButtonStyle.Primary),
 							),
@@ -177,7 +195,7 @@ export class ModalInteraction extends Modal.Interaction {
 				userEmbed(interaction)
 					.setTitle('Sent the Ticket Panel')
 					.setDescription(
-						`The thread ticket panel has successfully been sent in ${channel}. View the message at ${message.url}!`,
+						`The thread ticket panel has been sent successfully in ${channel}. View the message at ${message.url}!`,
 					),
 			],
 		});

apps/bot/src/i18n/en-GB/threads.ts

@@ -10,7 +10,7 @@ export default {
 			},
 		},
 		categoryList: {
-			placeholder: 'Select a category to create a ticket within.',
+			placeholder: 'Select a category to create a ticket in.',
 		},
 		createModal: {
 			errors: {

apps/bot/src/i18n/i18n-types.ts

@@ -1417,7 +1417,7 @@ type RootTranslation = {
 				}
 				categoryList: {
 					/**
-					 * S​e​l​e​c​t​ ​a​ ​c​a​t​e​g​o​r​y​ ​t​o​ ​c​r​e​a​t​e​ ​a​ ​t​i​c​k​e​t​ ​w​i​t​h​i​n​.
+					 * S​e​l​e​c​t​ ​a​ ​c​a​t​e​g​o​r​y​ ​t​o​ ​c​r​e​a​t​e​ ​a​ ​t​i​c​k​e​t​ ​i​n​.
 					 */
 					placeholder: string
 				}
@@ -3496,7 +3496,7 @@ export type TranslationFunctions = {
 				}
 				categoryList: {
 					/**
-					 * Select a category to create a ticket within.
+					 * Select a category to create a ticket in.
 					 */
 					placeholder: () => LocalizedString
 				}

apps/bot/src/utils/thread-ticketing/titleAndEmoji.ts

@@ -1,6 +1,11 @@
 import type { ticketThreadsCategories } from '@ticketer/database';
+import { formatEmoji } from 'discord.js';
+import { extractDiscordEmoji } from '../utility';
 
 type Table = typeof ticketThreadsCategories.$inferSelect;
 
+/**
+ * Only static/non-animated emojis are allowed.
+ */
 export const titleAndEmoji = (title: Table['categoryTitle'], emoji?: Table['categoryEmoji']) =>
-	emoji ? `${emoji} ${title}` : title;
+	emoji ? `${extractDiscordEmoji(emoji).isSnowflake ? formatEmoji(emoji, false) : emoji} ${title}` : title;