feat: implement RoleSelector and ChannelSelector in config forms

web/package.json

@@ -34,8 +34,7 @@
     "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/src/components/dashboard/config-editor.tsx

@@ -6,6 +6,7 @@ import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
+import { RoleSelector } from '@/components/ui/role-selector';
 import { GUILD_SELECTED_EVENT, SELECTED_GUILD_KEY } from '@/lib/guild-selection';
 import type { BotConfig, DeepPartial } from '@/types/config';
 import { SYSTEM_PROMPT_MAX_LENGTH } from '@/types/config';
@@ -27,7 +28,14 @@ const DEFAULT_ACTIVITY_BADGES = [
   { days: 0, label: '🌱 Newcomer' },
 ] as const;
 
-/** Parse a number input value, enforcing optional min/max constraints. Returns undefined if invalid. */
+/**
+ * Parse a numeric text input into a number, applying optional minimum/maximum bounds.
+ *
+ * @param raw - The input string to parse; an empty string yields `undefined`.
+ * @param min - Optional lower bound; if the parsed value is less than `min`, `min` is returned.
+ * @param max - Optional upper bound; if the parsed value is greater than `max`, `max` is returned.
+ * @returns `undefined` if `raw` is empty or cannot be parsed as a finite number, otherwise the parsed number (clamped to `min`/`max` when provided).
+ */
 function parseNumberInput(raw: string, min?: number, max?: number): number | undefined {
   if (raw === '') return undefined;
   const num = Number(raw);
@@ -37,32 +45,6 @@ function parseNumberInput(raw: string, min?: number, max?: number): number | und
   return num;
 }
 
-function parseRoleMenuOptions(raw: string) {
-  return raw
-    .split('\n')
-    .map((line) => line.trim())
-    .filter(Boolean)
-    .map((line) => {
-      const [label = '', roleId = '', ...descParts] = line.split('|');
-      const description = descParts.join('|').trim();
-      return {
-        label: label.trim(),
-        roleId: roleId.trim(),
-        ...(description ? { description } : {}),
-      };
-    })
-    .filter((opt) => opt.label && opt.roleId)
-    .slice(0, 25);
-}
-
-function stringifyRoleMenuOptions(
-  options: Array<{ label?: string; roleId?: string; description?: string }> = [],
-) {
-  return options
-    .map((opt) => [opt.label ?? '', opt.roleId ?? '', opt.description ?? ''].join('|'))
-    .join('\n');
-}
-
 /**
  * Type guard that checks whether a value is a guild configuration object returned by the API.
  *
@@ -110,11 +92,13 @@ function isGuildConfig(data: unknown): data is GuildConfig {
 }
 
 /**
- * Renders the configuration editor for a selected guild, allowing viewing and editing of AI, welcome, moderation, and triage settings.
+ * Edit a guild's bot configuration through a multi-section UI.
  *
- * The component loads the guild's authoritative config from the API, keeps a mutable draft for user edits, computes and applies patch updates per top-level section, warns on unsaved changes, and provides keyboard and UI controls for saving or discarding edits.
+ * Loads the authoritative config for the selected guild, maintains a mutable draft for user edits,
+ * computes and applies per-section patches to persist changes, and provides controls to save,
+ * discard, and validate edits (including an unsaved-changes warning and keyboard shortcut).
  *
- * @returns The editor UI as JSX when a guild is selected and the draft config is available; `null` while no draft is present (or when rendering is handled by loading/error/no-selection states).
+ * @returns The editor UI as JSX when a guild is selected and a draft config exists; `null` otherwise.
  */
 export function ConfigEditor() {
   const [guildId, setGuildId] = useState<string>('');
@@ -128,7 +112,6 @@ export function ConfigEditor() {
   const [draftConfig, setDraftConfig] = useState<GuildConfig | null>(null);
 
   /** Raw textarea strings — kept separate so partial input isn't stripped on every keystroke. */
-  const [roleMenuRaw, setRoleMenuRaw] = useState('');
   const [dmStepsRaw, setDmStepsRaw] = useState('');
 
   const abortRef = useRef<AbortController | null>(null);
@@ -197,9 +180,15 @@ 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));
-      setRoleMenuRaw(stringifyRoleMenuOptions(data.welcome?.roleMenu?.options ?? []));
       setDmStepsRaw((data.welcome?.dmSequence?.steps ?? []).join('\n'));
     } catch (err) {
       if ((err as Error).name === 'AbortError') return;
@@ -226,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]);
@@ -371,7 +366,6 @@ export function ConfigEditor() {
   const discardChanges = useCallback(() => {
     if (!savedConfig) return;
     setDraftConfig(structuredClone(savedConfig));
-    setRoleMenuRaw(stringifyRoleMenuOptions(savedConfig.welcome?.roleMenu?.options ?? []));
     setDmStepsRaw((savedConfig.welcome?.dmSequence?.steps ?? []).join('\n'));
     toast.success('Changes discarded.');
   }, [savedConfig]);
@@ -790,21 +784,80 @@ export function ConfigEditor() {
                 label="Role Menu"
               />
             </div>
-            <textarea
-              value={roleMenuRaw}
-              onChange={(e) => setRoleMenuRaw(e.target.value)}
-              onBlur={() => {
-                const parsed = parseRoleMenuOptions(roleMenuRaw);
-                updateWelcomeRoleMenu('options', parsed);
-                setRoleMenuRaw(stringifyRoleMenuOptions(parsed));
-              }}
-              rows={5}
-              disabled={saving}
-              className={inputClasses}
-              placeholder={
-                'Format: Label|RoleID|Description (optional)\nOne option per line (max 25).'
-              }
-            />
+            <div className="space-y-3">
+              {(draftConfig.welcome?.roleMenu?.options ?? []).map((opt, i) => (
+                <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"
+                      value={opt.label ?? ''}
+                      onChange={(e) => {
+                        const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])];
+                        opts[i] = { ...opts[i], label: e.target.value };
+                        updateWelcomeRoleMenu('options', opts);
+                      }}
+                      disabled={saving}
+                      className={`${inputClasses} flex-1`}
+                      placeholder="Label (shown in menu)"
+                    />
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])].filter(
+                          (o) => o.id !== opt.id,
+                        );
+                        updateWelcomeRoleMenu('options', opts);
+                      }}
+                      disabled={
+                        saving || (draftConfig.welcome?.roleMenu?.options ?? []).length <= 1
+                      }
+                      aria-label={`Remove role option ${opt.label || i + 1}`}
+                    >
+                      ✕
+                    </Button>
+                  </div>
+                  <RoleSelector
+                    guildId={guildId}
+                    selected={opt.roleId ? [opt.roleId] : []}
+                    onChange={(selected) => {
+                      const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])];
+                      opts[i] = { ...opts[i], roleId: selected[0] ?? '' };
+                      updateWelcomeRoleMenu('options', opts);
+                    }}
+                    placeholder="Select role"
+                    disabled={saving}
+                    maxSelections={1}
+                  />
+                  <input
+                    type="text"
+                    value={opt.description ?? ''}
+                    onChange={(e) => {
+                      const opts = [...(draftConfig.welcome?.roleMenu?.options ?? [])];
+                      opts[i] = { ...opts[i], description: e.target.value || undefined };
+                      updateWelcomeRoleMenu('options', opts);
+                    }}
+                    disabled={saving}
+                    className={inputClasses}
+                    placeholder="Description (optional)"
+                  />
+                </div>
+              ))}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  const opts = [
+                    ...(draftConfig.welcome?.roleMenu?.options ?? []),
+                    { id: crypto.randomUUID(), label: '', roleId: '' },
+                  ];
+                  updateWelcomeRoleMenu('options', opts);
+                }}
+                disabled={saving || (draftConfig.welcome?.roleMenu?.options ?? []).length >= 25}
+              >
+                + Add Role Option
+              </Button>
+            </div>
           </fieldset>
 
           <fieldset className="space-y-2 rounded-md border p-3">
@@ -1336,26 +1389,32 @@ export function ConfigEditor() {
         <CardContent className="space-y-4">
           <label className="space-y-2">
             <span className="text-sm font-medium">Admin Role ID</span>
-            <input
-              type="text"
-              value={draftConfig.permissions?.adminRoleId ?? ''}
-              onChange={(e) => updatePermissionsField('adminRoleId', e.target.value.trim() || null)}
+            <RoleSelector
+              guildId={guildId}
+              selected={
+                draftConfig.permissions?.adminRoleId ? [draftConfig.permissions.adminRoleId] : []
+              }
+              onChange={(selected) => updatePermissionsField('adminRoleId', selected[0] ?? null)}
+              placeholder="Select admin role"
               disabled={saving}
-              className={inputClasses}
-              placeholder="Discord role ID for admins"
+              maxSelections={1}
             />
           </label>
           <label className="space-y-2">
             <span className="text-sm font-medium">Moderator Role ID</span>
-            <input
-              type="text"
-              value={draftConfig.permissions?.moderatorRoleId ?? ''}
-              onChange={(e) =>
-                updatePermissionsField('moderatorRoleId', e.target.value.trim() || null)
+            <RoleSelector
+              guildId={guildId}
+              selected={
+                draftConfig.permissions?.moderatorRoleId
+                  ? [draftConfig.permissions.moderatorRoleId]
+                  : []
               }
+              onChange={(selected) =>
+                updatePermissionsField('moderatorRoleId', selected[0] ?? null)
+              }
+              placeholder="Select moderator role"
               disabled={saving}
-              className={inputClasses}
-              placeholder="Discord role ID for moderators"
+              maxSelections={1}
             />
           </label>
           <label className="space-y-2">

web/src/components/dashboard/config-sections/ModerationSection.tsx

@@ -1,9 +1,10 @@
 'use client';
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
+import { ChannelSelector } from '@/components/ui/channel-selector';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
+import { useGuildSelection } from '@/hooks/use-guild-selection';
 import type { GuildConfig } from '@/lib/config-utils';
 
 interface ModerationSectionProps {
@@ -15,6 +16,18 @@ interface ModerationSectionProps {
   onEscalationChange: (enabled: boolean) => void;
 }
 
+/**
+ * Render the Moderation settings section, including alert channel selection, auto-delete,
+ * DM notification toggles, and escalation controls.
+ *
+ * @param draftConfig - The current draft guild configuration containing moderation settings.
+ * @param saving - Whether a save operation is in progress; when true, interactive controls are disabled.
+ * @param onEnabledChange - Callback invoked with the new enabled state when moderation is toggled.
+ * @param onFieldChange - Generic field update callback, called with field name and new value (e.g., 'alertChannelId', 'autoDelete').
+ * @param onDmNotificationChange - Callback invoked with an action ('warn' | 'timeout' | 'kick' | 'ban') and boolean to toggle DM notifications for that action.
+ * @param onEscalationChange - Callback invoked with the new escalation enabled state.
+ * @returns The rendered moderation Card element, or `null` if `draftConfig.moderation` is not present.
+ */
 export function ModerationSection({
   draftConfig,
   saving,
@@ -23,8 +36,17 @@ export function ModerationSection({
   onDmNotificationChange,
   onEscalationChange,
 }: ModerationSectionProps) {
+  const guildId = useGuildSelection();
+
   if (!draftConfig.moderation) return null;
 
+  const alertChannelId = draftConfig.moderation?.alertChannelId ?? '';
+  const selectedChannels = alertChannelId ? [alertChannelId] : [];
+
+  const handleChannelChange = (channels: string[]) => {
+    onFieldChange('alertChannelId', channels[0] ?? '');
+  };
+
   return (
     <Card>
       <CardHeader>
@@ -45,15 +67,20 @@ export function ModerationSection({
       </CardHeader>
       <CardContent className="space-y-4">
         <div className="space-y-2">
-          <Label htmlFor="alert-channel">Alert Channel ID</Label>
-          <Input
-            id="alert-channel"
-            type="text"
-            value={draftConfig.moderation?.alertChannelId ?? ''}
-            onChange={(e) => onFieldChange('alertChannelId', e.target.value)}
-            disabled={saving}
-            placeholder="Channel ID for moderation alerts"
-          />
+          <Label>Alert Channel</Label>
+          {guildId ? (
+            <ChannelSelector
+              guildId={guildId}
+              selected={selectedChannels}
+              onChange={handleChannelChange}
+              placeholder="Select alert channel..."
+              disabled={saving}
+              maxSelections={1}
+              filter="text"
+            />
+          ) : (
+            <p className="text-muted-foreground text-sm">Select a server first</p>
+          )}
         </div>
         <div className="flex items-center justify-between">
           <Label htmlFor="auto-delete" className="text-sm font-medium">