refactor: Extract UI component creation into new view files for lootdrop, trade, item wizard, and enrollment.

src/modules/economy/lootdrop.interaction.ts

@@ -1,6 +1,7 @@
-import { ActionRowBuilder, ButtonBuilder, ButtonInteraction, ButtonStyle } from "discord.js";
+import { ButtonInteraction } from "discord.js";
 import { lootdropService } from "./lootdrop.service";
-import { createErrorEmbed, createSuccessEmbed, createBaseEmbed } from "@/lib/embeds";
+import { createErrorEmbed } from "@/lib/embeds";
+import { getLootdropClaimedMessage } from "./lootdrop.view";
 
 export async function handleLootdropInteraction(interaction: ButtonInteraction) {
     if (interaction.customId === "lootdrop_claim") {
@@ -17,21 +18,14 @@ export async function handleLootdropInteraction(interaction: ButtonInteraction)
             const originalEmbed = interaction.message.embeds[0];
             if (!originalEmbed) return;
 
-            const newEmbed = createBaseEmbed(originalEmbed.title || "💰 LOOTDROP!", `✅ Claimed by <@${interaction.user.id}> for **${result.amount} ${result.currency}**!`, "#00FF00");
+            const { embeds, components } = getLootdropClaimedMessage(
+                originalEmbed.title || "💰 LOOTDROP!",
+                interaction.user.id,
+                result.amount || 0,
+                result.currency || "Coins"
+            );
 
-            // Disable button
-            // We reconstruct the button using builders for safety
-            const newRow = new ActionRowBuilder<ButtonBuilder>()
-                .addComponents(
-                    new ButtonBuilder()
-                        .setCustomId("lootdrop_claim_disabled")
-                        .setLabel("CLAIMED")
-                        .setStyle(ButtonStyle.Secondary)
-                        .setEmoji("✅")
-                        .setDisabled(true)
-                );
-
-            await interaction.message.edit({ embeds: [newEmbed], components: [newRow] });
+            await interaction.message.edit({ embeds, components });
 
         } else {
             await interaction.editReply({

src/modules/economy/lootdrop.service.ts

@@ -1,8 +1,9 @@
 
-import { Message, TextChannel, EmbedBuilder, ActionRowBuilder, ButtonBuilder, ButtonStyle, ComponentType } from "discord.js";
+import { Message, TextChannel } from "discord.js";
+import { getLootdropMessage } from "./lootdrop.view";
 import { config } from "@/lib/config";
 import { economyService } from "./economy.service";
-import { createBaseEmbed } from "@lib/embeds";
+
 
 import { lootdrops } from "@/db/schema";
 import { DrizzleClient } from "@/lib/DrizzleClient";
@@ -92,19 +93,10 @@ class LootdropService {
         const reward = Math.floor(Math.random() * (max - min + 1)) + min;
         const currency = config.lootdrop.reward.currency;
 
-        const embed = createBaseEmbed("💰 LOOTDROP!", `A lootdrop has appeared! Click the button below to claim **${reward} ${currency}**!`, "#FFD700");
-
-        const claimButton = new ButtonBuilder()
-            .setCustomId("lootdrop_claim")
-            .setLabel("CLAIM REWARD")
-            .setStyle(ButtonStyle.Success)
-            .setEmoji("💸");
-
-        const row = new ActionRowBuilder<ButtonBuilder>()
-            .addComponents(claimButton);
+        const { embeds, components } = getLootdropMessage(reward, currency);
 
         try {
-            const message = await channel.send({ embeds: [embed], components: [row] });
+            const message = await channel.send({ embeds, components });
 
             // Persist to DB
             await DrizzleClient.insert(lootdrops).values({

src/modules/economy/lootdrop.view.ts

@@ -0,0 +1,41 @@
+import { ActionRowBuilder, ButtonBuilder, ButtonStyle, EmbedBuilder } from "discord.js";
+import { createBaseEmbed } from "@lib/embeds";
+
+export function getLootdropMessage(reward: number, currency: string) {
+    const embed = createBaseEmbed(
+        "💰 LOOTDROP!",
+        `A lootdrop has appeared! Click the button below to claim **${reward} ${currency}**!`,
+        "#FFD700"
+    );
+
+    const claimButton = new ButtonBuilder()
+        .setCustomId("lootdrop_claim")
+        .setLabel("CLAIM REWARD")
+        .setStyle(ButtonStyle.Success)
+        .setEmoji("💸");
+
+    const row = new ActionRowBuilder<ButtonBuilder>()
+        .addComponents(claimButton);
+
+    return { embeds: [embed], components: [row] };
+}
+
+export function getLootdropClaimedMessage(originalTitle: string, userId: string, amount: number, currency: string) {
+    const newEmbed = createBaseEmbed(
+        originalTitle || "💰 LOOTDROP!",
+        `✅ Claimed by <@${userId}> for **${amount} ${currency}**!`,
+        "#00FF00"
+    );
+
+    const newRow = new ActionRowBuilder<ButtonBuilder>()
+        .addComponents(
+            new ButtonBuilder()
+                .setCustomId("lootdrop_claim_disabled")
+                .setLabel("CLAIMED")
+                .setStyle(ButtonStyle.Secondary)
+                .setEmoji("✅")
+                .setDisabled(true)
+        );
+
+    return { embeds: [newEmbed], components: [newRow] };
+}