refactor: make walkthrough data-driven and self-contained

Replace the index-driven interaction state machine with a single ordered
list of steps that colocate each step's selector, question, and embed
field. A generic engine seeds the data embed up front, records each
answer, then renders the next question or finalises and pins.

Fold the three selector components into src/ui/walkthrough.ts and drop
the now-unused generateQuestion helper.

Author: phorcys420

src/commands/util/walkthrough.ts

@@ -1,16 +1,11 @@
 import { config } from "@lib/config.js";
 
 import { isHelpPost as isHelpThread } from "@lib/discord/channels.js";
-import issueCategorySelector from "@components/issueCategorySelector.js";
+import { startWalkthrough } from "@ui/walkthrough.js";
 
 import {
   type ChatInputCommandInteraction,
   SlashCommandBuilder,
-  ActionRowBuilder,
-  type StringSelectMenuBuilder,
-  EmbedBuilder,
-  type Embed,
-  Colors,
   type PublicThreadChannel,
   type GuildTextBasedChannel,
   ButtonBuilder,
@@ -71,22 +66,6 @@ const resourcesMessage = {
   ],
 };
 
-export function generateQuestion(
-  question: string,
-  component: StringSelectMenuBuilder,
-  embeds: (EmbedBuilder | Embed)[] = [],
-) {
-  return {
-    embeds: [
-      ...embeds,
-      new EmbedBuilder().setColor(Colors.White).setDescription(question),
-    ],
-    components: [
-      new ActionRowBuilder<StringSelectMenuBuilder>().addComponents(component),
-    ],
-  };
-}
-
 export async function doWalkthrough(
   channel: GuildTextBasedChannel,
   interaction?: ChatInputCommandInteraction,
@@ -131,13 +110,8 @@ export async function doWalkthrough(
       await channel.send(resourcesMessage as MessageCreateOptions);
     }
 
-    // Generate the walkthrough message asking the user what they're creating this issue for
-    const message = generateQuestion(
-      "What are you creating this issue for?",
-      issueCategorySelector,
-    );
-
-    return channel.send(message);
+    // Send the walkthrough message asking what the user is creating this issue for
+    return channel.send(startWalkthrough(channel.id));
   }
 }
 

src/events/walkthrough.ts

@@ -1,96 +1,16 @@
-import { doWalkthrough, generateQuestion } from "@commands/util/walkthrough.js";
+import { doWalkthrough } from "@commands/util/walkthrough.js";
+import { handleSelection } from "@ui/walkthrough.js";
 
-import issueCategorySelector from "@components/issueCategorySelector.js";
-import productSelector from "@components/productSelector.js";
-import operatingSystemFamilySelector from "@components/operatingSystemFamilySelector.js";
+import { type Client, Events } from "discord.js";
 
-import {
-  type Client,
-  EmbedBuilder,
-  Events,
-  type InteractionUpdateOptions,
-} from "discord.js";
-
-// This has to follow the order of the walkthrough steps
-const selectors = [
-  issueCategorySelector,
-  productSelector,
-  operatingSystemFamilySelector,
-];
-
-function getLabelFromValue(value, selector: (typeof selectors)[number]) {
-  return selector.options.filter((option) => option.data.value === value)[0]
-    .data.label;
-}
-
-// TODO: make this readable
 export default function registerEvents(client: Client) {
-  // Do walkthrough whenever a thread is opened
+  // Run the walkthrough whenever a thread is opened.
   client.on(Events.ThreadCreate, async (channel) => doWalkthrough(channel));
 
-  // Register events for the actual walkthrough steps
+  // Advance the walkthrough as the user answers each select menu.
   client.on(Events.InteractionCreate, async (interaction) => {
     if (interaction.isStringSelectMenu()) {
-      let messageData: InteractionUpdateOptions;
-
-      const selector = selectors.filter(
-        (element) => element.data.custom_id === interaction.customId,
-      )[0];
-      const index = selectors.indexOf(selector);
-
-      const lastStep = index + 1 === selectors.length;
-
-      if (index === 0) {
-        const dataEmbed = new EmbedBuilder()
-          .setTitle(`<#${interaction.channelId}>`)
-          .addFields([
-            {
-              name: "Category",
-              value: getLabelFromValue(interaction.values[0], selector),
-              inline: true,
-            },
-            { name: "Product", value: "N/A", inline: true },
-            { name: "Platform", value: "N/A", inline: true },
-            {
-              name: "Logs",
-              value: "Please post any relevant logs/error messages.",
-            },
-          ]);
-
-        messageData = generateQuestion(
-          "What product are you using?",
-          productSelector,
-          [dataEmbed],
-        );
-      } else {
-        // Grab the embed from the last message and edit the corresponding field with the human-readable field (instead of the ID)
-        const dataEmbed = interaction.message.embeds[0];
-        dataEmbed.fields[index].value = getLabelFromValue(
-          interaction.values[0],
-          selector,
-        );
-
-        // TODO : make this part more generic once we have more questions
-        if (selector === productSelector) {
-          messageData = generateQuestion(
-            `What operating system are you running ${dataEmbed.fields[index].value} on?`,
-            selectors[index + 1], // next selector
-            [dataEmbed],
-          );
-        } else if (lastStep) {
-          // This is the last step of the walkthrough, so we generate an empty message with just the data embed
-          messageData = { components: [], embeds: [dataEmbed] };
-        } else {
-          throw new Error("No case matches this walkthrough step");
-        }
-      }
-
-      await interaction.update(messageData);
-
-      // If this is the last step of the walkthrough, we pin the message
-      if (lastStep) {
-        await interaction.message.pin();
-      }
+      await handleSelection(interaction);
     }
   });
 }