fix: address CodeRabbit review comments

- Add Zustand discord-entities store for caching channels/roles
- Update ChannelSelector and RoleSelector to use store caching
- Add stable UUIDs for role menu options
- Add validation for empty role option label/roleId
- Add aria-label to remove button for accessibility

Author: Pip Build

pnpm-lock.yaml

@@ -25,15 +25,16 @@
     "lucide-react": "^0.525.0",
     "next": "^16.1.6",
     "next-auth": "^4.24.13",
+    "next-themes": "^0.4.6",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-hook-form": "^7.56.4",
     "recharts": "^3.7.0",
     "server-only": "^0.0.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
-    "next-themes": "^0.4.6",
-    "react-hook-form": "^7.56.4"
+    "zustand": "^5.0.11"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.1",

web/package.json

@@ -180,6 +180,13 @@ export function ConfigEditor() {
         throw new Error('Invalid config response');
       }
 
+      // Ensure role menu options have stable IDs
+      if (data.welcome?.roleMenu?.options) {
+        data.welcome.roleMenu.options = data.welcome.roleMenu.options.map((opt) => ({
+          ...opt,
+          id: opt.id || crypto.randomUUID(),
+        }));
+      }
       setSavedConfig(data);
       setDraftConfig(structuredClone(data));
       setDmStepsRaw((data.welcome?.dmSequence?.steps ?? []).join('\n'));
@@ -208,6 +215,12 @@ export function ConfigEditor() {
   // Currently only validates system prompt length; extend with additional checks as needed.
   const hasValidationErrors = useMemo(() => {
     if (!draftConfig) return false;
+    // Role menu validation: all options must have non-empty label and roleId
+    const roleMenuOptions = draftConfig.welcome?.roleMenu?.options ?? [];
+    const hasRoleMenuErrors = roleMenuOptions.some(
+      (opt) => !opt.label?.trim() || !opt.roleId?.trim(),
+    );
+    if (hasRoleMenuErrors) return true;
     const promptLength = draftConfig.ai?.systemPrompt?.length ?? 0;
     return promptLength > SYSTEM_PROMPT_MAX_LENGTH;
   }, [draftConfig]);
@@ -773,7 +786,7 @@ export function ConfigEditor() {
             </div>
             <div className="space-y-3">
               {(draftConfig.welcome?.roleMenu?.options ?? []).map((opt, i) => (
-                <div key={i} className="flex flex-col gap-2 rounded-md border p-2">
+                <div key={opt.id} className="flex flex-col gap-2 rounded-md border p-2">
                   <div className="flex items-center gap-2">
                     <input
                       type="text"
@@ -791,10 +804,15 @@ export function ConfigEditor() {
                       variant="ghost"
                       size="sm"
                       onClick={() => {
-                        const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])].filter((_, idx) => idx !== i);
+                        const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])].filter(
+                          (o) => o.id !== opt.id,
+                        );
                         updateWelcomeRoleMenu('options', opts);
                       }}
-                      disabled={saving || (draftConfig.welcome?.roleMenu?.options ?? []).length <= 1}
+                      disabled={
+                        saving || (draftConfig.welcome?.roleMenu?.options ?? []).length <= 1
+                      }
+                      aria-label={`Remove role option ${opt.label || i + 1}`}
                     >
                       ✕
                     </Button>
@@ -829,7 +847,10 @@ export function ConfigEditor() {
                 variant="outline"
                 size="sm"
                 onClick={() => {
-                  const opts = [...(draftConfig.welcome?.roleMenu?.options ?? []), { label: '', roleId: '' }];
+                  const opts = [
+                    ...(draftConfig.welcome?.roleMenu?.options ?? []),
+                    { id: crypto.randomUUID(), label: '', roleId: '' },
+                  ];
                   updateWelcomeRoleMenu('options', opts);
                 }}
                 disabled={saving || (draftConfig.welcome?.roleMenu?.options ?? []).length >= 25}
@@ -1370,7 +1391,9 @@ export function ConfigEditor() {
             <span className="text-sm font-medium">Admin Role ID</span>
             <RoleSelector
               guildId={guildId}
-              selected={draftConfig.permissions?.adminRoleId ? [draftConfig.permissions.adminRoleId] : []}
+              selected={
+                draftConfig.permissions?.adminRoleId ? [draftConfig.permissions.adminRoleId] : []
+              }
               onChange={(selected) => updatePermissionsField('adminRoleId', selected[0] ?? null)}
               placeholder="Select admin role"
               disabled={saving}
@@ -1381,8 +1404,14 @@ export function ConfigEditor() {
             <span className="text-sm font-medium">Moderator Role ID</span>
             <RoleSelector
               guildId={guildId}
-              selected={draftConfig.permissions?.moderatorRoleId ? [draftConfig.permissions.moderatorRoleId] : []}
-              onChange={(selected) => updatePermissionsField('moderatorRoleId', selected[0] ?? null)}
+              selected={
+                draftConfig.permissions?.moderatorRoleId
+                  ? [draftConfig.permissions.moderatorRoleId]
+                  : []
+              }
+              onChange={(selected) =>
+                updatePermissionsField('moderatorRoleId', selected[0] ?? null)
+              }
               placeholder="Select moderator role"
               disabled={saving}
               maxSelections={1}

web/src/components/dashboard/config-editor.tsx

@@ -0,0 +1,69 @@
+/**
+ * Zustand store for caching Discord entities (channels and roles) per guild.
+ * Reduces redundant API calls when reopening selectors and shares data across instances.
+ */
+import { create } from 'zustand';
+
+export interface DiscordChannel {
+  id: string;
+  name: string;
+  type: number;
+}
+
+export interface DiscordRole {
+  id: string;
+  name: string;
+  color: number;
+}
+
+interface DiscordEntitiesState {
+  // Channels cache: guildId -> channels
+  channelsByGuild: Record<string, DiscordChannel[]>;
+  // Roles cache: guildId -> roles
+  rolesByGuild: Record<string, DiscordRole[]>;
+
+  // Get cached channels for a guild
+  getChannels: (guildId: string) => DiscordChannel[] | undefined;
+  // Set channels for a guild
+  setChannels: (guildId: string, channels: DiscordChannel[]) => void;
+  // Clear channels for a guild (optional invalidation)
+  clearChannels: (guildId: string) => void;
+
+  // Get cached roles for a guild
+  getRoles: (guildId: string) => DiscordRole[] | undefined;
+  // Set roles for a guild
+  setRoles: (guildId: string, roles: DiscordRole[]) => void;
+  // Clear roles for a guild (optional invalidation)
+  clearRoles: (guildId: string) => void;
+}
+
+export const useDiscordEntitiesStore = create<DiscordEntitiesState>((set, get) => ({
+  channelsByGuild: {},
+  rolesByGuild: {},
+
+  getChannels: (guildId: string) => get().channelsByGuild[guildId],
+
+  setChannels: (guildId: string, channels: DiscordChannel[]) =>
+    set((state) => ({
+      channelsByGuild: { ...state.channelsByGuild, [guildId]: channels },
+    })),
+
+  clearChannels: (guildId: string) =>
+    set((state) => {
+      const { [guildId]: _, ...rest } = state.channelsByGuild;
+      return { channelsByGuild: rest };
+    }),
+
+  getRoles: (guildId: string) => get().rolesByGuild[guildId],
+
+  setRoles: (guildId: string, roles: DiscordRole[]) =>
+    set((state) => ({
+      rolesByGuild: { ...state.rolesByGuild, [guildId]: roles },
+    })),
+
+  clearRoles: (guildId: string) =>
+    set((state) => {
+      const { [guildId]: _, ...rest } = state.rolesByGuild;
+      return { rolesByGuild: rest };
+    }),
+}));

web/src/stores/discord-entities.ts

@@ -27,6 +27,7 @@ export interface WelcomeDynamic {
 
 /** Self-assignable role menu option. */
 export interface WelcomeRoleOption {
+  id: string;
   label: string;
   roleId: string;
   description?: string;