Convert addon rendering to plain component data

util/addons.ts was the last file building components with the discord.js
builder pattern — the thing this whole refactor started from. Its four render
functions now return plain data like everything else:

  createAddonComponent  -> ContainerComponentData
  createAddonSection    -> SectionComponentData
  createAddonList       -> [TextDisplayComponentData, ContainerComponentData]
  createNavigation      -> ActionRowData<MessageActionRowComponentData>

The `new ContainerBuilder().addSectionComponents(new SectionBuilder()...)`
chain that the original review used as the argument against builders is gone.
Two small local helpers (separator, thumbnail) plus the existing row /
container / text cover the rest.

Verified by rendering both versions of all four functions and diffing the API
JSON, normalising the camelCase/snake_case difference between the data
interfaces and the builders' output: a full addon page, the same page with a
support-server button, a section, a two-addon list, and the navigation menu
in both selected and disabled states are all identical, 6/6.

The only EmbedBuilder left in src/ is /about, which keeps it deliberately and
says why.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015hDX4g1EjTN7424A5wnptE

Author: claude

src/util/addons.ts

@@ -1,4 +1,10 @@
-import {ActionRowBuilder, ButtonBuilder, ButtonStyle, ChatInputCommandInteraction, ContainerBuilder, MessageFlags, SectionBuilder, SeparatorBuilder, SeparatorSpacingSize, StringSelectMenuBuilder, StringSelectMenuInteraction, StringSelectMenuOptionBuilder, TextDisplayBuilder, ThumbnailBuilder} from "discord.js";
+import {
+    ButtonStyle, ChatInputCommandInteraction, ComponentType, MessageFlags, SeparatorSpacingSize,
+    StringSelectMenuInteraction,
+    type ActionRowData, type ComponentInContainerData, type ContainerComponentData,
+    type MessageActionRowComponentData, type SectionComponentData, type TextDisplayComponentData
+} from "discord.js";
+import {container, row, text} from "../framework";
 import type {BdWebAddon} from "../types";
 
 import Web from "../util/web";
@@ -72,86 +78,91 @@ export function sortAddons(addons: BdWebAddon[], sortBy: "likes" | "downloads" |
 }
 
 
-export function createAddonComponent(addon: BdWebAddon) {
+const separator = (spacing: SeparatorSpacingSize, divider: boolean): ComponentInContainerData =>
+    ({type: ComponentType.Separator, spacing, divider});
 
-    const buttons = new ActionRowBuilder<ButtonBuilder>()
-        .addComponents(
-            new ButtonBuilder()
-                .setStyle(ButtonStyle.Link)
-                .setLabel("View Online")
-                .setURL(Web.pages[addon.type](addon.name)),
-            new ButtonBuilder()
-                .setStyle(ButtonStyle.Link)
-                .setLabel("Download Now")
-                .setURL(Web.redirects.download(addon.id.toString())),
-        );
+const thumbnail = (url: string) => ({type: ComponentType.Thumbnail as const, media: {url}});
+
+/** The link buttons every addon carries, plus a support server when there is one. */
+function addonLinks(addon: BdWebAddon): MessageActionRowComponentData[] {
+    const buttons: MessageActionRowComponentData[] = [
+        {type: ComponentType.Button, style: ButtonStyle.Link, label: "View Online", url: Web.pages[addon.type](addon.name)},
+        {type: ComponentType.Button, style: ButtonStyle.Link, label: "Download Now", url: Web.redirects.download(addon.id.toString())}
+    ];
 
     if (addon.author.guild?.invite_link) {
-        buttons.addComponents(
-            new ButtonBuilder()
-                .setStyle(ButtonStyle.Link)
-                .setLabel("Support Server")
-                .setURL(addon.author.guild.invite_link),
-        );
+        buttons.push({type: ComponentType.Button, style: ButtonStyle.Link, label: "Support Server", url: addon.author.guild.invite_link});
     }
 
-    const page = new ContainerBuilder()
-        .addSectionComponents(
-            new SectionBuilder()
-                .setThumbnailAccessory(
-                    new ThumbnailBuilder().setURL(Web.resources.thumbnail(addon.thumbnail_url))
-                )
-                .addTextDisplayComponents(
-                    new TextDisplayBuilder().setContent(`# ${addon.name} v${addon.version}`),
-                    new TextDisplayBuilder().setContent(addon.description ?? "No description provided."),
-                    new TextDisplayBuilder().setContent(addon.tags.map(tag => `\`${tag}\``).join(" ")),
-                ),
-        )
-        .addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Small).setDivider(false))
-        .addTextDisplayComponents(new TextDisplayBuilder().setContent(`👍  ${addon.likes.toLocaleString()} Likes         ⬇️  ${addon.downloads.toLocaleString()} Downloads`))
-        .addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Large).setDivider(true))
-        .addActionRowComponents(buttons)
-        .addTextDisplayComponents(new TextDisplayBuilder().setContent(`-# Updated ${new Date(addon.latest_release_date).toLocaleDateString()} • Released ${new Date(addon.initial_release_date).toLocaleDateString()}`));
-
-    return page;
+    return buttons;
 }
 
-export function createAddonSection(addon: BdWebAddon) {
 
+/** One addon rendered in full, as its own page. */
+export function createAddonComponent(addon: BdWebAddon): ContainerComponentData {
+    const details: TextDisplayComponentData[] = [
+        {type: ComponentType.TextDisplay, content: `# ${addon.name} v${addon.version}`},
+        {type: ComponentType.TextDisplay, content: addon.description ?? "No description provided."},
+        {type: ComponentType.TextDisplay, content: addon.tags.map(tag => `\`${tag}\``).join(" ")}
+    ];
+
+    return container([
+        {
+            type: ComponentType.Section,
+            components: details,
+            accessory: thumbnail(Web.resources.thumbnail(addon.thumbnail_url))
+        },
+        separator(SeparatorSpacingSize.Small, false),
+        text(`👍  ${addon.likes.toLocaleString()} Likes         ⬇️  ${addon.downloads.toLocaleString()} Downloads`),
+        separator(SeparatorSpacingSize.Large, true),
+        row(...addonLinks(addon)),
+        text(`-# Updated ${new Date(addon.latest_release_date).toLocaleDateString()} • Released ${new Date(addon.initial_release_date).toLocaleDateString()}`)
+    ]);
+}
+
+
+/** One addon as a compact row within a list. */
+export function createAddonSection(addon: BdWebAddon): SectionComponentData {
     const links = [
         `[View Online](${Web.pages[addon.type](addon.name)})`,
         `[Download Now](${Web.redirects.download(addon.id.toString())})`,
-        addon.author.guild?.invite_link && `[Support Server](${addon.author.guild?.invite_link})`
+        addon.author.guild?.invite_link && `[Support Server](${addon.author.guild.invite_link})`
     ].filter(Boolean).join("  •  ");
 
-    const section = new SectionBuilder()
-        .setThumbnailAccessory(new ThumbnailBuilder().setURL(Web.resources.thumbnail(addon.thumbnail_url)))
-        .addTextDisplayComponents(
-            new TextDisplayBuilder().setContent(`### ${addon.name}`),
-            new TextDisplayBuilder().setContent(addon.description ?? "No description provided."),
-            new TextDisplayBuilder().setContent(links),
-        );
-
-    return section;
+    return {
+        type: ComponentType.Section,
+        components: [
+            {type: ComponentType.TextDisplay, content: `### ${addon.name}`},
+            {type: ComponentType.TextDisplay, content: addon.description ?? "No description provided."},
+            {type: ComponentType.TextDisplay, content: links}
+        ],
+        accessory: thumbnail(Web.resources.thumbnail(addon.thumbnail_url))
+    };
 }
 
-export function createAddonList(title: string, addons: BdWebAddon[]) {
-    const page = new ContainerBuilder();
+
+export function createAddonList(title: string, addons: BdWebAddon[]): [TextDisplayComponentData, ContainerComponentData] {
+    const body: ComponentInContainerData[] = [];
     for (const [index, addon] of addons.entries()) {
-        page.addSectionComponents(createAddonSection(addon));
-        if (index < addons.length - 1) page.addSeparatorComponents(new SeparatorBuilder().setSpacing(SeparatorSpacingSize.Large).setDivider(true));
+        body.push(createAddonSection(addon));
+        if (index < addons.length - 1) body.push(separator(SeparatorSpacingSize.Large, true));
     }
-    return [new TextDisplayBuilder().setContent(`## ${title}`), page];
+
+    return [{type: ComponentType.TextDisplay, content: `## ${title}`}, container(body)];
 }
 
-export function createNavigation(addons: BdWebAddon[], selectedIndex = 0, disabled = false) {
-    const navigation = new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(
-        new StringSelectMenuBuilder().setCustomId(`addons-navigation`).addOptions(
-            ...addons.map((addon, index) => new StringSelectMenuOptionBuilder().setLabel(`${index + 1}. ${addon.name}`).setValue(addon.name).setDefault(index === selectedIndex))
-        )
-            .setDisabled(disabled)
-    );
-    return navigation;
+
+export function createNavigation(addons: BdWebAddon[], selectedIndex = 0, disabled = false): ActionRowData<MessageActionRowComponentData> {
+    return row({
+        type: ComponentType.StringSelect,
+        customId: "addons-navigation",
+        disabled,
+        options: addons.map((addon, index) => ({
+            "label": `${index + 1}. ${addon.name}`,
+            "value": addon.name,
+            "default": index === selectedIndex
+        }))
+    });
 }