Discord Embed Utilities
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
Discord Embed Utilities in TrackerBot provide a standardized way to generate visual "card" interfaces for bot interactions. By centralizing the creation of EmbedBuilder objects, the project ensures a consistent aesthetic and simplified error reporting across various modules, including administrative commands, ticket systems, and FAQ responses.
The primary utility, createCardEmbed, abstracts the discord.js Embed API to allow developers to quickly generate rich content with consistent timestamps, specific color coding for status types (success, error, info, warning), and structured fields.
Sources: src/utils/cardEmbed.js:1-25, src/interactions/slashHandlers.js:7-11
Core Architecture
The cardEmbed Utility
The system is built around a single factory function that wraps the EmbedBuilder class from discord.js. It enforces a default theme color (0x7f8cff) but allows for dynamic overrides based on the context of the interaction.
The diagram above shows the relationship between the central utility and the various consumer modules in the application.
Sources: src/utils/cardEmbed.js:3-5, src/interactions/slashHandlers.js:3, src/interactions/buttonHandlers.js:3
Parameters and Structure
The createCardEmbed function accepts a configuration object that maps directly to Discord embed properties:
| Parameter | Type | Description | Default |
|---|---|---|---|
title | String | The bold header of the embed card. | N/A |
description | String | The main body text of the card. | N/A |
color | Number | Hexadecimal color code (e.g., 0x4ade80). | 0x7f8cff |
footer | String | Small text displayed at the bottom of the card. | N/A |
fields | Array | Structured key-value pairs for organized data display. | [] |
Sources: src/utils/cardEmbed.js:7-25
Usage and Implementation
Standardized Status Colors
While the utility allows any hex color, TrackerBot modules typically use a standardized color palette to indicate the outcome of an operation.
| Status Type | Hex Code | Usage Scenario |
|---|---|---|
| Success | 0x4ade80 | Role assignment complete, channel archived, nuke finished. |
| Error | 0xff6b81 | Permission denied, missing categories, API failures. |
| Info | 0x7f8cff | FAQ responses, ticket creation notices, role toggle updates. |
| Warning | 0xffb347 | Confirmation prompts for destructive actions (/wipe, /nuke). |
Sources: src/interactions/slashHandlers.js:7-11, src/commands/wipeCommand.js:10-15, src/commands/nukeCommand.js:11-16
Interaction Flow
The following sequence diagram illustrates how a slash command interaction utilizes the embed utility to provide feedback to the user.
Multi-Step Embed Updates
In administrative commands like /wipe and /nuke, embeds are used dynamically. They first present a "Warning" card with buttons, then update the same message with a "Success" or "Error" card based on user input or execution results.
- Warning Stage: Uses
colors.warningand includes confirmation buttons. - Result Stage: Uses
interaction.editReplyorinteraction.updateto replace the warning with a final status card.
Sources: src/commands/wipeCommand.js:46-105, src/commands/nukeCommand.js:68-155
Code Example: Integration
The following snippet demonstrates how createCardEmbed is integrated within a handler to process a ticket creation request.
// From src/interactions/buttonHandlers.js
await interaction.reply({
embeds: [
createCardEmbed({
title: "Ticket ready",
description: `Your ticket has been created: ${ticketChannel}.`,
color: colors.success
})
],
flags: MessageFlags.Ephemeral
});
Sources: src/interactions/buttonHandlers.js:108-117
Conclusion
Discord Embed Utilities serve as the visual backbone of TrackerBot's user interface. By enforcing a strict structure through src/utils/cardEmbed.js, the bot maintains a professional and consistent appearance while reducing boilerplate code in command handlers. This centralized approach allows for easy updates to the bot's visual theme across all features, from simple FAQ notices to complex channel management operations.