From ed2ea23e87eedca147abdf35e38695ef520fc5ee Mon Sep 17 00:00:00 2001
From: TheOnlyMace <0815cracky@gmail.com>
Date: Wed, 22 Jul 2026 21:23:57 +0200
Subject: [PATCH] Refactor channel and role selection in various forms to use
 Discord components

- Replaced standard input fields with DiscordChannelSelect and DiscordRoleSelect components in the BirthdaysForm, FeedsManager, GiveawaysManager, LevelingForm, LoggingForm, SchedulerManager, SelfRolesManager, StatsForm, SuggestionsConfigForm, TagsManager, TempVoiceForm, TicketConfigForm, and StarboardForm for improved user experience and consistency.
- Updated state management to accommodate new component structures, enhancing data handling for channel and role selections across the application.
---
 .../app/dashboard/[guildId]/commands/page.tsx |   8 +-
 .../src/components/modules/birthdays-form.tsx |  20 ++-
 .../components/modules/commands-manager.tsx   |  20 +--
 .../src/components/modules/feeds-manager.tsx  |  13 +-
 .../components/modules/giveaways-manager.tsx  |  13 +-
 .../src/components/modules/leveling-form.tsx  |  56 ++----
 .../src/components/modules/logging-form.tsx   |  61 +++----
 .../components/modules/scheduler-manager.tsx  |  13 +-
 .../components/modules/selfroles-manager.tsx  |  16 +-
 .../src/components/modules/starboard-form.tsx |  64 +++----
 .../src/components/modules/stats-form.tsx     |  31 +++-
 .../modules/suggestions-config-form.tsx       |  32 ++--
 .../src/components/modules/tags-manager.tsx   |  63 ++++---
 .../src/components/modules/tempvoice-form.tsx |  21 ++-
 .../modules/ticket-categories-manager.tsx     |  36 ++--
 .../components/modules/ticket-config-form.tsx |  22 ++-
 .../components/modules/verification-form.tsx  |  20 ++-
 .../src/components/modules/welcome-form.tsx   |  62 +++----
 .../components/settings/access-rules-form.tsx |  24 +--
 .../components/ui/discord-channel-select.tsx  | 161 ++++++++++++++++++
 .../src/components/ui/discord-role-select.tsx | 144 ++++++++++++++++
 apps/webui/src/hooks/use-guild-channels.ts    |  56 ++++++
 apps/webui/src/hooks/use-guild-roles.ts       |  56 ++++++
 apps/webui/src/lib/discord-guild-resources.ts |  31 +++-
 apps/webui/src/messages/de.json               |   3 +-
 apps/webui/src/messages/en.json               |   3 +-
 docs/PHASE-TRACKING.md                        |  22 +++
 27 files changed, 749 insertions(+), 322 deletions(-)
 create mode 100644 apps/webui/src/components/ui/discord-channel-select.tsx
 create mode 100644 apps/webui/src/components/ui/discord-role-select.tsx
 create mode 100644 apps/webui/src/hooks/use-guild-channels.ts
 create mode 100644 apps/webui/src/hooks/use-guild-roles.ts

diff --git a/apps/webui/src/app/dashboard/[guildId]/commands/page.tsx b/apps/webui/src/app/dashboard/[guildId]/commands/page.tsx
index 01ac972..68d7f21 100644
--- a/apps/webui/src/app/dashboard/[guildId]/commands/page.tsx
+++ b/apps/webui/src/app/dashboard/[guildId]/commands/page.tsx
@@ -1,6 +1,6 @@
 import { Suspense } from 'react';
 import { CommandsManager } from '@/components/modules/commands-manager';
-import { listGuildChannelsForDashboard, listGuildRolesForDashboard } from '@/lib/discord-guild-resources';
+import { listGuildChannelsForDashboard } from '@/lib/discord-guild-resources';
 import { getLocale, t } from '@/lib/i18n';
 import { getCommandGlobalRules } from '@/lib/module-configs/command-global-rules';
 import { listCommandOverridesDashboard } from '@/lib/module-configs/commands';
@@ -11,12 +11,11 @@ interface CommandsPageProps {
 
 export default async function CommandsPage({ params }: CommandsPageProps) {
   const { guildId } = await params;
-  const [locale, commands, globalRules, channels, roles] = await Promise.all([
+  const [locale, commands, globalRules, channels] = await Promise.all([
     getLocale(),
     listCommandOverridesDashboard(guildId),
     getCommandGlobalRules(guildId),
-    listGuildChannelsForDashboard(guildId).catch(() => []),
-    listGuildRolesForDashboard(guildId).catch(() => [])
+    listGuildChannelsForDashboard(guildId).catch(() => [])
   ]);
 
   return (
@@ -31,7 +30,6 @@ export default async function CommandsPage({ params }: CommandsPageProps) {
           initialCommands={commands}
           initialGlobalRules={globalRules}
           channels={channels}
-          roles={roles}
         />
       </Suspense>
     </div>
diff --git a/apps/webui/src/components/modules/birthdays-form.tsx b/apps/webui/src/components/modules/birthdays-form.tsx
index c1f3dde..cccadb4 100644
--- a/apps/webui/src/components/modules/birthdays-form.tsx
+++ b/apps/webui/src/components/modules/birthdays-form.tsx
@@ -5,6 +5,8 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -36,8 +38,6 @@ interface BirthdaysFormProps {
 
 export function BirthdaysForm({ guildId, initialValue }: BirthdaysFormProps) {
   const t = useTranslations();
-  const channelId = useId();
-  const roleId = useId();
   const timezoneId = useId();
 
   return (
@@ -58,14 +58,22 @@ export function BirthdaysForm({ guildId, initialValue }: BirthdaysFormProps) {
             <div className="grid gap-4 sm:grid-cols-3">
               <FieldAnchor id="field-birthdays-channel">
               <div className="space-y-2">
-                <Label htmlFor={channelId}>{t('modulePages.birthdays.channelId')}</Label>
-                <Input id={channelId} value={value.channelId} onChange={(event) => setValue((prev) => ({ ...prev, channelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.birthdays.channelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.channelId}
+                  onChange={(channelId) => setValue((prev) => ({ ...prev, channelId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-birthdays-role">
               <div className="space-y-2">
-                <Label htmlFor={roleId}>{t('modulePages.birthdays.roleId')}</Label>
-                <Input id={roleId} value={value.roleId} onChange={(event) => setValue((prev) => ({ ...prev, roleId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.birthdays.roleId')}</Label>
+                <DiscordRoleSelect
+                  guildId={guildId}
+                  value={value.roleId}
+                  onChange={(roleId) => setValue((prev) => ({ ...prev, roleId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-birthdays-timezone">
diff --git a/apps/webui/src/components/modules/commands-manager.tsx b/apps/webui/src/components/modules/commands-manager.tsx
index b9f4866..8d45084 100644
--- a/apps/webui/src/components/modules/commands-manager.tsx
+++ b/apps/webui/src/components/modules/commands-manager.tsx
@@ -3,8 +3,7 @@
 import type {
   CommandGlobalRules,
   CommandOverrideDashboard,
-  DiscordChannelOption,
-  DiscordRoleOption
+  DiscordChannelOption
 } from '@nexumi/shared';
 import { RotateCcw } from 'lucide-react';
 import { useSearchParams } from 'next/navigation';
@@ -14,6 +13,7 @@ import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { DiscordResourceMultiSelect } from '@/components/ui/discord-resource-multi-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 
@@ -26,15 +26,13 @@ interface CommandsManagerProps {
   initialCommands: CommandOverrideDashboard[];
   initialGlobalRules: CommandGlobalRules;
   channels: DiscordChannelOption[];
-  roles: DiscordRoleOption[];
 }
 
 export function CommandsManager({
   guildId,
   initialCommands,
   initialGlobalRules,
-  channels,
-  roles
+  channels
 }: CommandsManagerProps) {
   const t = useTranslations();
   const searchParams = useSearchParams();
@@ -48,10 +46,6 @@ export function CommandsManager({
     () => channels.map((channel) => ({ id: channel.id, name: channel.name, prefix: '#' })),
     [channels]
   );
-  const roleOptions = useMemo(
-    () => roles.map((role) => ({ id: role.id, name: role.name, prefix: '@' })),
-    [roles]
-  );
 
   useEffect(() => {
     const q = searchParams.get('q');
@@ -250,8 +244,8 @@ export function CommandsManager({
                   </div>
                   <div className="space-y-1 sm:col-span-2">
                     <p className="text-xs text-muted-foreground">{t('modulePages.commands.allowedRoleIds')}</p>
-                    <DiscordResourceMultiSelect
-                      options={roleOptions}
+                    <DiscordRoleMultiSelect
+                      guildId={guildId}
                       value={entry.allowedRoleIds}
                       onChange={(allowedRoleIds) => patchLocal(entry.commandName, { allowedRoleIds })}
                       placeholder={t('modulePages.commands.roleSearchPlaceholder')}
@@ -260,8 +254,8 @@ export function CommandsManager({
                   </div>
                   <div className="space-y-1 sm:col-span-2">
                     <p className="text-xs text-muted-foreground">{t('modulePages.commands.deniedRoleIds')}</p>
-                    <DiscordResourceMultiSelect
-                      options={roleOptions}
+                    <DiscordRoleMultiSelect
+                      guildId={guildId}
                       value={entry.deniedRoleIds}
                       onChange={(deniedRoleIds) => patchLocal(entry.commandName, { deniedRoleIds })}
                       placeholder={t('modulePages.commands.roleSearchPlaceholder')}
diff --git a/apps/webui/src/components/modules/feeds-manager.tsx b/apps/webui/src/components/modules/feeds-manager.tsx
index b4a55bd..a8ba0d0 100644
--- a/apps/webui/src/components/modules/feeds-manager.tsx
+++ b/apps/webui/src/components/modules/feeds-manager.tsx
@@ -8,6 +8,8 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -182,17 +184,18 @@ export function FeedsManager({ guildId, initialFeeds }: FeedsManagerProps) {
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.feeds.channelId')}</Label>
-              <Input
+              <DiscordChannelSelect
+                guildId={guildId}
                 value={draft.channelId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))}
-                placeholder="123456789012345678"
+                onChange={(channelId) => setDraft((prev) => ({ ...prev, channelId }))}
               />
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.feeds.rolePingId')}</Label>
-              <Input
+              <DiscordRoleSelect
+                guildId={guildId}
                 value={draft.rolePingId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, rolePingId: event.target.value }))}
+                onChange={(rolePingId) => setDraft((prev) => ({ ...prev, rolePingId }))}
                 placeholder={t('common.optional')}
               />
             </div>
diff --git a/apps/webui/src/components/modules/giveaways-manager.tsx b/apps/webui/src/components/modules/giveaways-manager.tsx
index 788418b..2d285b5 100644
--- a/apps/webui/src/components/modules/giveaways-manager.tsx
+++ b/apps/webui/src/components/modules/giveaways-manager.tsx
@@ -9,6 +9,8 @@ import { useTranslations } from '@/components/locale-provider';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
@@ -127,10 +129,10 @@ export function GiveawaysManager({ guildId, initialGiveaways }: GiveawaysManager
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.giveaways.channelId')}</Label>
-              <Input
+              <DiscordChannelSelect
+                guildId={guildId}
                 value={draft.channelId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))}
-                placeholder="123456789012345678"
+                onChange={(channelId) => setDraft((prev) => ({ ...prev, channelId }))}
               />
             </div>
             <div className="space-y-2">
@@ -156,9 +158,10 @@ export function GiveawaysManager({ guildId, initialGiveaways }: GiveawaysManager
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.giveaways.requiredRoleId')}</Label>
-              <Input
+              <DiscordRoleSelect
+                guildId={guildId}
                 value={draft.requiredRoleId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, requiredRoleId: event.target.value }))}
+                onChange={(requiredRoleId) => setDraft((prev) => ({ ...prev, requiredRoleId }))}
                 placeholder={t('common.optional')}
               />
             </div>
diff --git a/apps/webui/src/components/modules/leveling-form.tsx b/apps/webui/src/components/modules/leveling-form.tsx
index e537e3c..3aab9a2 100644
--- a/apps/webui/src/components/modules/leveling-form.tsx
+++ b/apps/webui/src/components/modules/leveling-form.tsx
@@ -1,10 +1,11 @@
 'use client';
 
 import type { LevelingConfigDashboard } from '@nexumi/shared';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelMultiSelect, DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -14,24 +15,11 @@ import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
 interface LocalLevelingValue
-  extends Omit<LevelingConfigDashboard, 'noXpChannelIds' | 'noXpRoleIds' | 'roleMultipliers' | 'channelMultipliers'> {
-  noXpChannelIdsText: string;
-  noXpRoleIdsText: string;
+  extends Omit<LevelingConfigDashboard, 'roleMultipliers' | 'channelMultipliers'> {
   roleMultipliersText: string;
   channelMultipliersText: string;
 }
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-
-function fromCsv(text: string): string[] {
-  return text
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0);
-}
-
 function toMultiplierText(map: Record<string, number>): string {
   return Object.entries(map)
     .map(([id, multiplier]) => `${id}:${multiplier}`)
@@ -58,11 +46,9 @@ function fromMultiplierText(text: string): { value: Record<string, number>; erro
 }
 
 function toLocal(config: LevelingConfigDashboard): LocalLevelingValue {
-  const { noXpChannelIds, noXpRoleIds, roleMultipliers, channelMultipliers, ...rest } = config;
+  const { roleMultipliers, channelMultipliers, ...rest } = config;
   return {
     ...rest,
-    noXpChannelIdsText: toCsv(noXpChannelIds),
-    noXpRoleIdsText: toCsv(noXpRoleIds),
     roleMultipliersText: toMultiplierText(roleMultipliers),
     channelMultipliersText: toMultiplierText(channelMultipliers)
   };
@@ -78,12 +64,10 @@ async function saveLeveling(guildId: string, value: LocalLevelingValue): Promise
     return { ok: false, error: channelMultipliers.error };
   }
 
-  const { noXpChannelIdsText, noXpRoleIdsText, roleMultipliersText: _roleMultipliersText, channelMultipliersText: _channelMultipliersText, ...rest } = value;
+  const { roleMultipliersText: _roleMultipliersText, channelMultipliersText: _channelMultipliersText, ...rest } = value;
 
   const payload: LevelingConfigDashboard = {
     ...rest,
-    noXpChannelIds: fromCsv(noXpChannelIdsText),
-    noXpRoleIds: fromCsv(noXpRoleIdsText),
     roleMultipliers: roleMultipliers.value,
     channelMultipliers: channelMultipliers.value
   };
@@ -111,8 +95,6 @@ interface LevelingFormProps {
 
 export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
   const t = useTranslations();
-  const noXpChannelsId = useId();
-  const noXpRolesId = useId();
 
   return (
     <SettingsForm<LocalLevelingValue>
@@ -192,23 +174,21 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
 
               <FieldAnchor id="field-leveling-no-xp-channels">
               <div className="space-y-2">
-                <Label htmlFor={noXpChannelsId}>{t('modulePages.leveling.noXpChannels')}</Label>
-                <Textarea
-                  id={noXpChannelsId}
-                  value={value.noXpChannelIdsText}
-                  onChange={(event) => setValue((prev) => ({ ...prev, noXpChannelIdsText: event.target.value }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
+                <Label>{t('modulePages.leveling.noXpChannels')}</Label>
+                <DiscordChannelMultiSelect
+                  guildId={guildId}
+                  value={value.noXpChannelIds}
+                  onChange={(noXpChannelIds) => setValue((prev) => ({ ...prev, noXpChannelIds }))}
                 />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-leveling-no-xp-roles">
               <div className="space-y-2">
-                <Label htmlFor={noXpRolesId}>{t('modulePages.leveling.noXpRoles')}</Label>
-                <Textarea
-                  id={noXpRolesId}
-                  value={value.noXpRoleIdsText}
-                  onChange={(event) => setValue((prev) => ({ ...prev, noXpRoleIdsText: event.target.value }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
+                <Label>{t('modulePages.leveling.noXpRoles')}</Label>
+                <DiscordRoleMultiSelect
+                  guildId={guildId}
+                  value={value.noXpRoleIds}
+                  onChange={(noXpRoleIds) => setValue((prev) => ({ ...prev, noXpRoleIds }))}
                 />
               </div>
               </FieldAnchor>
@@ -271,10 +251,10 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                 </div>
                 <div className="space-y-2">
                   <Label>{t('modulePages.leveling.levelUpChannelId')}</Label>
-                  <Input
+                  <DiscordChannelSelect
+                    guildId={guildId}
                     value={value.levelUpChannelId}
-                    onChange={(event) => setValue((prev) => ({ ...prev, levelUpChannelId: event.target.value.trim() }))}
-                    placeholder="123456789012345678"
+                    onChange={(levelUpChannelId) => setValue((prev) => ({ ...prev, levelUpChannelId }))}
                   />
                 </div>
               </div>
diff --git a/apps/webui/src/components/modules/logging-form.tsx b/apps/webui/src/components/modules/logging-form.tsx
index aa93e16..9d66051 100644
--- a/apps/webui/src/components/modules/logging-form.tsx
+++ b/apps/webui/src/components/modules/logging-form.tsx
@@ -2,16 +2,16 @@
 
 import type { LogChannelMapping, LogEventTypeDashboard, LoggingConfigDashboard } from '@nexumi/shared';
 import { Plus, Trash2 } from 'lucide-react';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelMultiSelect, DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
@@ -51,29 +51,18 @@ interface LocalLogChannel extends LogChannelMapping {
 interface LocalLoggingValue {
   enabled: boolean;
   ignoreBots: boolean;
-  ignoredChannelIdsText: string;
-  ignoredRoleIdsText: string;
+  ignoredChannelIds: string[];
+  ignoredRoleIds: string[];
   retentionDays: number;
   logChannels: LocalLogChannel[];
 }
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-
-function fromCsv(text: string): string[] {
-  return text
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0);
-}
-
 function toLocal(config: LoggingConfigDashboard): LocalLoggingValue {
   return {
     enabled: config.enabled,
     ignoreBots: config.ignoreBots,
-    ignoredChannelIdsText: toCsv(config.ignoredChannelIds),
-    ignoredRoleIdsText: toCsv(config.ignoredRoleIds),
+    ignoredChannelIds: config.ignoredChannelIds,
+    ignoredRoleIds: config.ignoredRoleIds,
     retentionDays: config.retentionDays,
     logChannels: config.logChannels.map((mapping, index) => ({ ...mapping, clientKey: `${mapping.eventType}-${index}` }))
   };
@@ -83,8 +72,8 @@ function toRemote(value: LocalLoggingValue): LoggingConfigDashboard {
   return {
     enabled: value.enabled,
     ignoreBots: value.ignoreBots,
-    ignoredChannelIds: fromCsv(value.ignoredChannelIdsText),
-    ignoredRoleIds: fromCsv(value.ignoredRoleIdsText),
+    ignoredChannelIds: value.ignoredChannelIds,
+    ignoredRoleIds: value.ignoredRoleIds,
     retentionDays: value.retentionDays,
     logChannels: value.logChannels.map(({ clientKey: _clientKey, ...rest }) => rest)
   };
@@ -114,8 +103,6 @@ interface LoggingFormProps {
 
 export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
   const t = useTranslations();
-  const ignoredChannelsId = useId();
-  const ignoredRolesId = useId();
 
   return (
     <SettingsForm<LocalLoggingValue>
@@ -150,26 +137,22 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
               </FieldAnchor>
               <FieldAnchor id="field-logging-ignored-channels">
               <div className="space-y-2">
-                <Label htmlFor={ignoredChannelsId}>{t('modulePages.logging.ignoredChannelsLabel')}</Label>
-                <Textarea
-                  id={ignoredChannelsId}
-                  value={value.ignoredChannelIdsText}
-                  onChange={(event) => setValue((prev) => ({ ...prev, ignoredChannelIdsText: event.target.value }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
+                <Label>{t('modulePages.logging.ignoredChannelsLabel')}</Label>
+                <DiscordChannelMultiSelect
+                  guildId={guildId}
+                  value={value.ignoredChannelIds}
+                  onChange={(ignoredChannelIds) => setValue((prev) => ({ ...prev, ignoredChannelIds }))}
                 />
-                <p className="text-xs text-muted-foreground">{t('modulePages.logging.idsHint')}</p>
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-logging-ignored-roles">
               <div className="space-y-2">
-                <Label htmlFor={ignoredRolesId}>{t('modulePages.logging.ignoredRolesLabel')}</Label>
-                <Textarea
-                  id={ignoredRolesId}
-                  value={value.ignoredRoleIdsText}
-                  onChange={(event) => setValue((prev) => ({ ...prev, ignoredRoleIdsText: event.target.value }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
+                <Label>{t('modulePages.logging.ignoredRolesLabel')}</Label>
+                <DiscordRoleMultiSelect
+                  guildId={guildId}
+                  value={value.ignoredRoleIds}
+                  onChange={(ignoredRoleIds) => setValue((prev) => ({ ...prev, ignoredRoleIds }))}
                 />
-                <p className="text-xs text-muted-foreground">{t('modulePages.logging.idsHint')}</p>
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-logging-retention">
@@ -233,17 +216,17 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                   </div>
                   <div className="flex-1 space-y-2">
                     <Label>{t('modulePages.logging.channelId')}</Label>
-                    <Input
+                    <DiscordChannelSelect
+                      guildId={guildId}
                       value={mapping.channelId}
-                      onChange={(event) =>
+                      onChange={(channelId) =>
                         setValue((prev) => ({
                           ...prev,
                           logChannels: prev.logChannels.map((entry) =>
-                            entry.clientKey === mapping.clientKey ? { ...entry, channelId: event.target.value.trim() } : entry
+                            entry.clientKey === mapping.clientKey ? { ...entry, channelId } : entry
                           )
                         }))
                       }
-                      placeholder="123456789012345678"
                     />
                   </div>
                   <Button
diff --git a/apps/webui/src/components/modules/scheduler-manager.tsx b/apps/webui/src/components/modules/scheduler-manager.tsx
index be3af32..c84507e 100644
--- a/apps/webui/src/components/modules/scheduler-manager.tsx
+++ b/apps/webui/src/components/modules/scheduler-manager.tsx
@@ -8,6 +8,8 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
@@ -108,17 +110,18 @@ export function SchedulerManager({ guildId, initialSchedules }: SchedulerManager
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.scheduler.channelId')}</Label>
-              <Input
+              <DiscordChannelSelect
+                guildId={guildId}
                 value={draft.channelId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))}
-                placeholder="123456789012345678"
+                onChange={(channelId) => setDraft((prev) => ({ ...prev, channelId }))}
               />
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.scheduler.rolePingId')}</Label>
-              <Input
+              <DiscordRoleSelect
+                guildId={guildId}
                 value={draft.rolePingId}
-                onChange={(event) => setDraft((prev) => ({ ...prev, rolePingId: event.target.value }))}
+                onChange={(rolePingId) => setDraft((prev) => ({ ...prev, rolePingId }))}
                 placeholder={t('common.optional')}
               />
             </div>
diff --git a/apps/webui/src/components/modules/selfroles-manager.tsx b/apps/webui/src/components/modules/selfroles-manager.tsx
index c7f47f8..a01da92 100644
--- a/apps/webui/src/components/modules/selfroles-manager.tsx
+++ b/apps/webui/src/components/modules/selfroles-manager.tsx
@@ -8,6 +8,7 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -164,7 +165,11 @@ export function SelfRolesManager({ guildId, initialPanels }: SelfRolesManagerPro
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.selfroles.channelId')}</Label>
-              <Input value={draft.channelId} onChange={(event) => setDraft((prev) => ({ ...prev, channelId: event.target.value }))} placeholder="123456789012345678" />
+              <DiscordChannelSelect
+                guildId={guildId}
+                value={draft.channelId}
+                onChange={(channelId) => setDraft((prev) => ({ ...prev, channelId }))}
+              />
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.selfroles.panelTitle')}</Label>
@@ -237,10 +242,13 @@ export function SelfRolesManager({ guildId, initialPanels }: SelfRolesManagerPro
               <div className="grid gap-3 sm:grid-cols-2">
                 <div className="space-y-2">
                   <Label>{t('modulePages.selfroles.channelId')}</Label>
-                  <Input
+                  <DiscordChannelSelect
+                    guildId={guildId}
                     value={panel.channelId}
-                    onChange={(event) =>
-                      setPanels((prev) => prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, channelId: event.target.value } : entry)))
+                    onChange={(channelId) =>
+                      setPanels((prev) =>
+                        prev.map((entry) => (entry.clientKey === panel.clientKey ? { ...entry, channelId } : entry))
+                      )
                     }
                   />
                 </div>
diff --git a/apps/webui/src/components/modules/starboard-form.tsx b/apps/webui/src/components/modules/starboard-form.tsx
index e0e2580..f764f66 100644
--- a/apps/webui/src/components/modules/starboard-form.tsx
+++ b/apps/webui/src/components/modules/starboard-form.tsx
@@ -5,53 +5,19 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelMultiSelect, DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
-import { Textarea } from '@/components/ui/textarea';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
-interface LocalValue {
-  enabled: boolean;
-  channelId: string;
-  emoji: string;
-  threshold: number;
-  allowSelfStar: boolean;
-  ignoredChannelIdsText: string;
-}
-
-function toLocal(config: StarboardConfigDashboard): LocalValue {
-  return {
-    enabled: config.enabled,
-    channelId: config.channelId,
-    emoji: config.emoji,
-    threshold: config.threshold,
-    allowSelfStar: config.allowSelfStar,
-    ignoredChannelIdsText: config.ignoredChannelIds.join(', ')
-  };
-}
-
-function toRemote(value: LocalValue): StarboardConfigDashboard {
-  return {
-    enabled: value.enabled,
-    channelId: value.channelId,
-    emoji: value.emoji,
-    threshold: value.threshold,
-    allowSelfStar: value.allowSelfStar,
-    ignoredChannelIds: value.ignoredChannelIdsText
-      .split(',')
-      .map((entry) => entry.trim())
-      .filter(Boolean)
-  };
-}
-
-async function saveStarboard(guildId: string, value: LocalValue): Promise<SettingsSaveResult> {
+async function saveStarboard(guildId: string, value: StarboardConfigDashboard): Promise<SettingsSaveResult> {
   try {
     const response = await fetch(`/api/guilds/${guildId}/starboard`, {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(toRemote(value))
+      body: JSON.stringify(value)
     });
     if (!response.ok) {
       const body = (await response.json().catch(() => null)) as { error?: string } | null;
@@ -70,13 +36,14 @@ interface StarboardFormProps {
 
 export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
   const t = useTranslations();
-  const channelId = useId();
   const emojiId = useId();
   const thresholdId = useId();
-  const ignoredId = useId();
 
   return (
-    <SettingsForm<LocalValue> initialValue={toLocal(initialValue)} onSave={(value) => saveStarboard(guildId, value)}>
+    <SettingsForm<StarboardConfigDashboard>
+      initialValue={initialValue}
+      onSave={(value) => saveStarboard(guildId, value)}
+    >
       {({ value, setValue }) => (
         <Card>
           <CardHeader>
@@ -93,8 +60,12 @@ export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
             <div className="grid gap-4 sm:grid-cols-3">
               <FieldAnchor id="field-starboard-channel">
               <div className="space-y-2">
-                <Label htmlFor={channelId}>{t('modulePages.starboard.channelId')}</Label>
-                <Input id={channelId} value={value.channelId} onChange={(event) => setValue((prev) => ({ ...prev, channelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.starboard.channelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.channelId}
+                  onChange={(channelId) => setValue((prev) => ({ ...prev, channelId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-starboard-emoji">
@@ -118,9 +89,12 @@ export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
             </FieldAnchor>
             <FieldAnchor id="field-starboard-ignored">
             <div className="space-y-2">
-              <Label htmlFor={ignoredId}>{t('modulePages.starboard.ignoredChannelIds')}</Label>
-              <Textarea id={ignoredId} value={value.ignoredChannelIdsText} onChange={(event) => setValue((prev) => ({ ...prev, ignoredChannelIdsText: event.target.value }))} />
-              <p className="text-xs text-muted-foreground">{t('modulePages.starboard.idsHint')}</p>
+              <Label>{t('modulePages.starboard.ignoredChannelIds')}</Label>
+              <DiscordChannelMultiSelect
+                guildId={guildId}
+                value={value.ignoredChannelIds}
+                onChange={(ignoredChannelIds) => setValue((prev) => ({ ...prev, ignoredChannelIds }))}
+              />
             </div>
             </FieldAnchor>
           </CardContent>
diff --git a/apps/webui/src/components/modules/stats-form.tsx b/apps/webui/src/components/modules/stats-form.tsx
index c68eac6..9483cce 100644
--- a/apps/webui/src/components/modules/stats-form.tsx
+++ b/apps/webui/src/components/modules/stats-form.tsx
@@ -5,6 +5,7 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -35,9 +36,6 @@ interface StatsFormProps {
 
 export function StatsForm({ guildId, initialValue }: StatsFormProps) {
   const t = useTranslations();
-  const membersId = useId();
-  const onlineId = useId();
-  const boostsId = useId();
   const membersTemplateId = useId();
   const onlineTemplateId = useId();
   const boostsTemplateId = useId();
@@ -60,8 +58,13 @@ export function StatsForm({ guildId, initialValue }: StatsFormProps) {
             <div className="grid gap-4 sm:grid-cols-2">
               <FieldAnchor id="field-stats-members">
               <div className="space-y-2">
-                <Label htmlFor={membersId}>{t('modulePages.stats.membersChannelId')}</Label>
-                <Input id={membersId} value={value.membersChannelId} onChange={(event) => setValue((prev) => ({ ...prev, membersChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.stats.membersChannelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['voice']}
+                  value={value.membersChannelId}
+                  onChange={(membersChannelId) => setValue((prev) => ({ ...prev, membersChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <div className="space-y-2">
@@ -70,8 +73,13 @@ export function StatsForm({ guildId, initialValue }: StatsFormProps) {
               </div>
               <FieldAnchor id="field-stats-online">
               <div className="space-y-2">
-                <Label htmlFor={onlineId}>{t('modulePages.stats.onlineChannelId')}</Label>
-                <Input id={onlineId} value={value.onlineChannelId} onChange={(event) => setValue((prev) => ({ ...prev, onlineChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.stats.onlineChannelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['voice']}
+                  value={value.onlineChannelId}
+                  onChange={(onlineChannelId) => setValue((prev) => ({ ...prev, onlineChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <div className="space-y-2">
@@ -80,8 +88,13 @@ export function StatsForm({ guildId, initialValue }: StatsFormProps) {
               </div>
               <FieldAnchor id="field-stats-boosts">
               <div className="space-y-2">
-                <Label htmlFor={boostsId}>{t('modulePages.stats.boostsChannelId')}</Label>
-                <Input id={boostsId} value={value.boostsChannelId} onChange={(event) => setValue((prev) => ({ ...prev, boostsChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.stats.boostsChannelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['voice']}
+                  value={value.boostsChannelId}
+                  onChange={(boostsChannelId) => setValue((prev) => ({ ...prev, boostsChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <div className="space-y-2">
diff --git a/apps/webui/src/components/modules/suggestions-config-form.tsx b/apps/webui/src/components/modules/suggestions-config-form.tsx
index e366604..e1ec4e9 100644
--- a/apps/webui/src/components/modules/suggestions-config-form.tsx
+++ b/apps/webui/src/components/modules/suggestions-config-form.tsx
@@ -1,11 +1,10 @@
 'use client';
 
 import type { SuggestionConfigDashboard } from '@nexumi/shared';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
@@ -38,9 +37,6 @@ interface SuggestionsConfigFormProps {
 
 export function SuggestionsConfigForm({ guildId, initialValue }: SuggestionsConfigFormProps) {
   const t = useTranslations();
-  const openId = useId();
-  const approvedId = useId();
-  const deniedId = useId();
 
   return (
     <SettingsForm<SuggestionConfigDashboard>
@@ -63,20 +59,34 @@ export function SuggestionsConfigForm({ guildId, initialValue }: SuggestionsConf
             <div className="grid gap-4 sm:grid-cols-3">
               <FieldAnchor id="field-suggestions-open">
               <div className="space-y-2">
-                <Label htmlFor={openId}>{t('modulePages.suggestions.openChannelId')}</Label>
-                <Input id={openId} value={value.openChannelId} onChange={(event) => setValue((prev) => ({ ...prev, openChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.suggestions.openChannelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.openChannelId}
+                  onChange={(openChannelId) => setValue((prev) => ({ ...prev, openChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-suggestions-approved">
               <div className="space-y-2">
-                <Label htmlFor={approvedId}>{t('modulePages.suggestions.approvedChannelId')}</Label>
-                <Input id={approvedId} value={value.approvedChannelId} onChange={(event) => setValue((prev) => ({ ...prev, approvedChannelId: event.target.value.trim() }))} placeholder={t('common.optional')} />
+                <Label>{t('modulePages.suggestions.approvedChannelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.approvedChannelId}
+                  onChange={(approvedChannelId) => setValue((prev) => ({ ...prev, approvedChannelId }))}
+                  placeholder={t('common.optional')}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-suggestions-denied">
               <div className="space-y-2">
-                <Label htmlFor={deniedId}>{t('modulePages.suggestions.deniedChannelId')}</Label>
-                <Input id={deniedId} value={value.deniedChannelId} onChange={(event) => setValue((prev) => ({ ...prev, deniedChannelId: event.target.value.trim() }))} placeholder={t('common.optional')} />
+                <Label>{t('modulePages.suggestions.deniedChannelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  value={value.deniedChannelId}
+                  onChange={(deniedChannelId) => setValue((prev) => ({ ...prev, deniedChannelId }))}
+                  placeholder={t('common.optional')}
+                />
               </div>
               </FieldAnchor>
             </div>
diff --git a/apps/webui/src/components/modules/tags-manager.tsx b/apps/webui/src/components/modules/tags-manager.tsx
index a127672..b051443 100644
--- a/apps/webui/src/components/modules/tags-manager.tsx
+++ b/apps/webui/src/components/modules/tags-manager.tsx
@@ -8,6 +8,8 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelMultiSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -15,17 +17,8 @@ import { Textarea } from '@/components/ui/textarea';
 
 const RESPONSE_TYPES: TagResponseType[] = ['TEXT', 'EMBED'];
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-function fromCsv(text: string): string[] {
-  return text.split(',').map((entry) => entry.trim()).filter(Boolean);
-}
-
 interface LocalTag extends TagDashboard {
   clientKey: string;
-  allowedRoleIdsText: string;
-  allowedChannelIdsText: string;
   saving?: boolean;
 }
 
@@ -34,8 +27,8 @@ const EMPTY_DRAFT = {
   content: '',
   responseType: 'TEXT' as TagResponseType,
   triggerWord: '',
-  allowedRoleIdsText: '',
-  allowedChannelIdsText: ''
+  allowedRoleIds: [] as string[],
+  allowedChannelIds: [] as string[]
 };
 
 interface TagsManagerProps {
@@ -48,9 +41,7 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
   const [tags, setTags] = useState<LocalTag[]>(
     initialTags.map((tag, index) => ({
       ...tag,
-      clientKey: tag.id ?? `existing-${index}`,
-      allowedRoleIdsText: toCsv(tag.allowedRoleIds),
-      allowedChannelIdsText: toCsv(tag.allowedChannelIds)
+      clientKey: tag.id ?? `existing-${index}`
     }))
   );
   const [draft, setDraft] = useState(EMPTY_DRAFT);
@@ -71,8 +62,8 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
           content: draft.content.trim() || null,
           responseType: draft.responseType,
           triggerWord: draft.triggerWord.trim() || null,
-          allowedRoleIds: fromCsv(draft.allowedRoleIdsText),
-          allowedChannelIds: fromCsv(draft.allowedChannelIdsText)
+          allowedRoleIds: draft.allowedRoleIds,
+          allowedChannelIds: draft.allowedChannelIds
         })
       });
       const body = (await response.json().catch(() => null)) as (TagDashboard & { error?: string }) | null;
@@ -83,9 +74,7 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
       setTags((prev) => [
         {
           ...body,
-          clientKey: body.id ?? `new-${Date.now()}`,
-          allowedRoleIdsText: toCsv(body.allowedRoleIds),
-          allowedChannelIdsText: toCsv(body.allowedChannelIds)
+          clientKey: body.id ?? `new-${Date.now()}`
         },
         ...prev
       ]);
@@ -109,8 +98,8 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
           content: tag.content,
           responseType: tag.responseType,
           triggerWord: tag.triggerWord,
-          allowedRoleIds: fromCsv(tag.allowedRoleIdsText),
-          allowedChannelIds: fromCsv(tag.allowedChannelIdsText)
+          allowedRoleIds: tag.allowedRoleIds,
+          allowedChannelIds: tag.allowedChannelIds
         })
       });
       const body = (await response.json().catch(() => null)) as (TagDashboard & { error?: string }) | null;
@@ -184,11 +173,19 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.tags.allowedRoleIds')}</Label>
-              <Input value={draft.allowedRoleIdsText} onChange={(event) => setDraft((prev) => ({ ...prev, allowedRoleIdsText: event.target.value }))} placeholder={t('modulePages.tags.idsPlaceholder')} />
+              <DiscordRoleMultiSelect
+                guildId={guildId}
+                value={draft.allowedRoleIds}
+                onChange={(allowedRoleIds) => setDraft((prev) => ({ ...prev, allowedRoleIds }))}
+              />
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.tags.allowedChannelIds')}</Label>
-              <Input value={draft.allowedChannelIdsText} onChange={(event) => setDraft((prev) => ({ ...prev, allowedChannelIdsText: event.target.value }))} placeholder={t('modulePages.tags.idsPlaceholder')} />
+              <DiscordChannelMultiSelect
+                guildId={guildId}
+                value={draft.allowedChannelIds}
+                onChange={(allowedChannelIds) => setDraft((prev) => ({ ...prev, allowedChannelIds }))}
+              />
             </div>
           </div>
           <Button type="button" onClick={handleCreate} disabled={creating}>
@@ -242,11 +239,27 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
               <div className="grid gap-3 sm:grid-cols-2">
                 <div className="space-y-2">
                   <Label>{t('modulePages.tags.allowedRoleIds')}</Label>
-                  <Input value={tag.allowedRoleIdsText} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedRoleIdsText: event.target.value } : entry)))} />
+                  <DiscordRoleMultiSelect
+                    guildId={guildId}
+                    value={tag.allowedRoleIds}
+                    onChange={(allowedRoleIds) =>
+                      setTags((prev) =>
+                        prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedRoleIds } : entry))
+                      )
+                    }
+                  />
                 </div>
                 <div className="space-y-2">
                   <Label>{t('modulePages.tags.allowedChannelIds')}</Label>
-                  <Input value={tag.allowedChannelIdsText} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedChannelIdsText: event.target.value } : entry)))} />
+                  <DiscordChannelMultiSelect
+                    guildId={guildId}
+                    value={tag.allowedChannelIds}
+                    onChange={(allowedChannelIds) =>
+                      setTags((prev) =>
+                        prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, allowedChannelIds } : entry))
+                      )
+                    }
+                  />
                 </div>
               </div>
               <div className="flex justify-end gap-2">
diff --git a/apps/webui/src/components/modules/tempvoice-form.tsx b/apps/webui/src/components/modules/tempvoice-form.tsx
index 6c0e0e4..6d09d2b 100644
--- a/apps/webui/src/components/modules/tempvoice-form.tsx
+++ b/apps/webui/src/components/modules/tempvoice-form.tsx
@@ -5,6 +5,7 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Switch } from '@/components/ui/switch';
@@ -35,8 +36,6 @@ interface TempVoiceFormProps {
 
 export function TempVoiceForm({ guildId, initialValue }: TempVoiceFormProps) {
   const t = useTranslations();
-  const hubId = useId();
-  const categoryId = useId();
   const nameId = useId();
   const limitId = useId();
 
@@ -58,14 +57,24 @@ export function TempVoiceForm({ guildId, initialValue }: TempVoiceFormProps) {
             <div className="grid gap-4 sm:grid-cols-2">
               <FieldAnchor id="field-tempvoice-hub">
               <div className="space-y-2">
-                <Label htmlFor={hubId}>{t('modulePages.tempvoice.hubChannelId')}</Label>
-                <Input id={hubId} value={value.hubChannelId} onChange={(event) => setValue((prev) => ({ ...prev, hubChannelId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.tempvoice.hubChannelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['voice']}
+                  value={value.hubChannelId}
+                  onChange={(hubChannelId) => setValue((prev) => ({ ...prev, hubChannelId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-tempvoice-category">
               <div className="space-y-2">
-                <Label htmlFor={categoryId}>{t('modulePages.tempvoice.categoryId')}</Label>
-                <Input id={categoryId} value={value.categoryId} onChange={(event) => setValue((prev) => ({ ...prev, categoryId: event.target.value.trim() }))} placeholder="123456789012345678" />
+                <Label>{t('modulePages.tempvoice.categoryId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['category']}
+                  value={value.categoryId}
+                  onChange={(categoryId) => setValue((prev) => ({ ...prev, categoryId }))}
+                />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-tempvoice-name">
diff --git a/apps/webui/src/components/modules/ticket-categories-manager.tsx b/apps/webui/src/components/modules/ticket-categories-manager.tsx
index 60f6432..9f66474 100644
--- a/apps/webui/src/components/modules/ticket-categories-manager.tsx
+++ b/apps/webui/src/components/modules/ticket-categories-manager.tsx
@@ -8,6 +8,7 @@ import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
@@ -16,18 +17,7 @@ interface LocalCategory extends TicketCategoryDashboard {
   saving?: boolean;
 }
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-
-function fromCsv(text: string): string[] {
-  return text
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0);
-}
-
-const EMPTY_DRAFT = { name: '', description: '', emoji: '', supportRoleIdsText: '' };
+const EMPTY_DRAFT = { name: '', description: '', emoji: '', supportRoleIds: [] as string[] };
 
 interface TicketCategoriesManagerProps {
   guildId: string;
@@ -56,7 +46,7 @@ export function TicketCategoriesManager({ guildId, initialCategories }: TicketCa
           name: draft.name.trim(),
           description: draft.description.trim() || null,
           emoji: draft.emoji.trim() || null,
-          supportRoleIds: fromCsv(draft.supportRoleIdsText)
+          supportRoleIds: draft.supportRoleIds
         })
       });
       const body = (await response.json().catch(() => null)) as (TicketCategoryDashboard & { error?: string }) | null;
@@ -178,18 +168,16 @@ export function TicketCategoriesManager({ guildId, initialCategories }: TicketCa
             </div>
             <div className="space-y-2">
               <Label>{t('modulePages.tickets.supportRoleIds')}</Label>
-              <Input
-                value={toCsv(category.supportRoleIds)}
-                onChange={(event) =>
+              <DiscordRoleMultiSelect
+                guildId={guildId}
+                value={category.supportRoleIds}
+                onChange={(supportRoleIds) =>
                   setCategories((prev) =>
                     prev.map((entry) =>
-                      entry.clientKey === category.clientKey
-                        ? { ...entry, supportRoleIds: fromCsv(event.target.value) }
-                        : entry
+                      entry.clientKey === category.clientKey ? { ...entry, supportRoleIds } : entry
                     )
                   )
                 }
-                placeholder={t('modulePages.tickets.idsPlaceholder')}
               />
             </div>
             <div className="flex justify-end gap-2">
@@ -224,10 +212,10 @@ export function TicketCategoriesManager({ guildId, initialCategories }: TicketCa
           </div>
           <div className="space-y-2">
             <Label>{t('modulePages.tickets.supportRoleIds')}</Label>
-            <Input
-              value={draft.supportRoleIdsText}
-              onChange={(event) => setDraft((prev) => ({ ...prev, supportRoleIdsText: event.target.value }))}
-              placeholder={t('modulePages.tickets.idsPlaceholder')}
+            <DiscordRoleMultiSelect
+              guildId={guildId}
+              value={draft.supportRoleIds}
+              onChange={(supportRoleIds) => setDraft((prev) => ({ ...prev, supportRoleIds }))}
             />
           </div>
           <Button type="button" variant="outline" onClick={handleCreate} disabled={creating}>
diff --git a/apps/webui/src/components/modules/ticket-config-form.tsx b/apps/webui/src/components/modules/ticket-config-form.tsx
index 01221a9..c7beafd 100644
--- a/apps/webui/src/components/modules/ticket-config-form.tsx
+++ b/apps/webui/src/components/modules/ticket-config-form.tsx
@@ -5,6 +5,7 @@ import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -36,8 +37,6 @@ interface TicketConfigFormProps {
 
 export function TicketConfigForm({ guildId, initialValue }: TicketConfigFormProps) {
   const t = useTranslations();
-  const categoryId = useId();
-  const logChannelId = useId();
   const inactivityId = useId();
 
   return (
@@ -80,24 +79,23 @@ export function TicketConfigForm({ guildId, initialValue }: TicketConfigFormProp
 
               <FieldAnchor id="field-tickets-category">
               <div className="space-y-2">
-                <Label htmlFor={categoryId}>{t('modulePages.tickets.categoryId')}</Label>
-                <Input
-                  id={categoryId}
+                <Label>{t('modulePages.tickets.categoryId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
+                  kinds={['category']}
                   value={value.categoryId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, categoryId: event.target.value.trim() }))}
-                  placeholder="123456789012345678"
+                  onChange={(categoryId) => setValue((prev) => ({ ...prev, categoryId }))}
                 />
               </div>
               </FieldAnchor>
 
               <FieldAnchor id="field-tickets-log">
               <div className="space-y-2">
-                <Label htmlFor={logChannelId}>{t('modulePages.tickets.logChannelId')}</Label>
-                <Input
-                  id={logChannelId}
+                <Label>{t('modulePages.tickets.logChannelId')}</Label>
+                <DiscordChannelSelect
+                  guildId={guildId}
                   value={value.logChannelId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, logChannelId: event.target.value.trim() }))}
-                  placeholder="123456789012345678"
+                  onChange={(logChannelId) => setValue((prev) => ({ ...prev, logChannelId }))}
                 />
               </div>
               </FieldAnchor>
diff --git a/apps/webui/src/components/modules/verification-form.tsx b/apps/webui/src/components/modules/verification-form.tsx
index 1124493..8daf284 100644
--- a/apps/webui/src/components/modules/verification-form.tsx
+++ b/apps/webui/src/components/modules/verification-form.tsx
@@ -4,6 +4,8 @@ import type { VerificationConfigDashboard } from '@nexumi/shared';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -104,30 +106,30 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
               <FieldAnchor id="field-verify-channel">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.channelId')}</Label>
-                <Input
+                <DiscordChannelSelect
+                  guildId={guildId}
                   value={value.channelId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, channelId: event.target.value.trim() }))}
-                  placeholder="123456789012345678"
+                  onChange={(channelId) => setValue((prev) => ({ ...prev, channelId }))}
                 />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-verify-role">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.verifiedRoleId')}</Label>
-                <Input
+                <DiscordRoleSelect
+                  guildId={guildId}
                   value={value.verifiedRoleId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, verifiedRoleId: event.target.value.trim() }))}
-                  placeholder="123456789012345678"
+                  onChange={(verifiedRoleId) => setValue((prev) => ({ ...prev, verifiedRoleId }))}
                 />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-verify-unverified">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.unverifiedRoleId')}</Label>
-                <Input
+                <DiscordRoleSelect
+                  guildId={guildId}
                   value={value.unverifiedRoleId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, unverifiedRoleId: event.target.value.trim() }))}
-                  placeholder="123456789012345678"
+                  onChange={(unverifiedRoleId) => setValue((prev) => ({ ...prev, unverifiedRoleId }))}
                 />
               </div>
               </FieldAnchor>
diff --git a/apps/webui/src/components/modules/welcome-form.tsx b/apps/webui/src/components/modules/welcome-form.tsx
index 114ab29..0ab1ce9 100644
--- a/apps/webui/src/components/modules/welcome-form.tsx
+++ b/apps/webui/src/components/modules/welcome-form.tsx
@@ -1,10 +1,11 @@
 'use client';
 
 import type { WelcomeConfigDashboard } from '@nexumi/shared';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
@@ -13,34 +14,19 @@ import { Textarea } from '@/components/ui/textarea';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
-interface LocalWelcomeValue extends Omit<WelcomeConfigDashboard, 'userAutoroleIds' | 'botAutoroleIds' | 'welcomeEmbed' | 'leaveEmbed'> {
-  userAutoroleIdsText: string;
-  botAutoroleIdsText: string;
+interface LocalWelcomeValue extends Omit<WelcomeConfigDashboard, 'welcomeEmbed' | 'leaveEmbed'> {
   welcomeEmbedText: string;
   leaveEmbedText: string;
 }
 
-function toCsv(ids: string[]): string {
-  return ids.join(', ');
-}
-
-function fromCsv(text: string): string[] {
-  return text
-    .split(',')
-    .map((entry) => entry.trim())
-    .filter((entry) => entry.length > 0);
-}
-
 function toJsonText(value: Record<string, unknown> | null | undefined): string {
   return value ? JSON.stringify(value, null, 2) : '';
 }
 
 function toLocal(config: WelcomeConfigDashboard): LocalWelcomeValue {
-  const { userAutoroleIds, botAutoroleIds, welcomeEmbed, leaveEmbed, ...rest } = config;
+  const { welcomeEmbed, leaveEmbed, ...rest } = config;
   return {
     ...rest,
-    userAutoroleIdsText: toCsv(userAutoroleIds),
-    botAutoroleIdsText: toCsv(botAutoroleIds),
     welcomeEmbedText: toJsonText(welcomeEmbed),
     leaveEmbedText: toJsonText(leaveEmbed)
   };
@@ -71,12 +57,10 @@ async function saveWelcome(guildId: string, value: LocalWelcomeValue): Promise<S
     return { ok: false, error: leaveEmbed.error };
   }
 
-  const { userAutoroleIdsText, botAutoroleIdsText, welcomeEmbedText: _welcomeEmbedText, leaveEmbedText: _leaveEmbedText, ...rest } = value;
+  const { welcomeEmbedText: _welcomeEmbedText, leaveEmbedText: _leaveEmbedText, ...rest } = value;
 
   const payload: WelcomeConfigDashboard = {
     ...rest,
-    userAutoroleIds: fromCsv(userAutoroleIdsText),
-    botAutoroleIds: fromCsv(botAutoroleIdsText),
     welcomeEmbed: welcomeEmbed.value,
     leaveEmbed: leaveEmbed.value
   };
@@ -104,8 +88,6 @@ interface WelcomeFormProps {
 
 export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
   const t = useTranslations();
-  const userAutorolesId = useId();
-  const botAutorolesId = useId();
 
   return (
     <SettingsForm<LocalWelcomeValue> initialValue={toLocal(initialValue)} onSave={(value) => saveWelcome(guildId, value)}>
@@ -130,10 +112,10 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                 <FieldAnchor id="field-welcome-channel">
                 <div className="space-y-2">
                   <Label>{t('modulePages.welcome.welcomeChannelId')}</Label>
-                  <Input
+                  <DiscordChannelSelect
+                    guildId={guildId}
                     value={value.welcomeChannelId}
-                    onChange={(event) => setValue((prev) => ({ ...prev, welcomeChannelId: event.target.value.trim() }))}
-                    placeholder="123456789012345678"
+                    onChange={(welcomeChannelId) => setValue((prev) => ({ ...prev, welcomeChannelId }))}
                   />
                 </div>
                 </FieldAnchor>
@@ -199,23 +181,21 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
               </FieldAnchor>
               <FieldAnchor id="field-welcome-user-autoroles">
               <div className="space-y-2">
-                <Label htmlFor={userAutorolesId}>{t('modulePages.welcome.userAutoroles')}</Label>
-                <Textarea
-                  id={userAutorolesId}
-                  value={value.userAutoroleIdsText}
-                  onChange={(event) => setValue((prev) => ({ ...prev, userAutoroleIdsText: event.target.value }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
+                <Label>{t('modulePages.welcome.userAutoroles')}</Label>
+                <DiscordRoleMultiSelect
+                  guildId={guildId}
+                  value={value.userAutoroleIds}
+                  onChange={(userAutoroleIds) => setValue((prev) => ({ ...prev, userAutoroleIds }))}
                 />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-welcome-bot-autoroles">
               <div className="space-y-2">
-                <Label htmlFor={botAutorolesId}>{t('modulePages.welcome.botAutoroles')}</Label>
-                <Textarea
-                  id={botAutorolesId}
-                  value={value.botAutoroleIdsText}
-                  onChange={(event) => setValue((prev) => ({ ...prev, botAutoroleIdsText: event.target.value }))}
-                  placeholder={t('modulePages.logging.idsPlaceholder')}
+                <Label>{t('modulePages.welcome.botAutoroles')}</Label>
+                <DiscordRoleMultiSelect
+                  guildId={guildId}
+                  value={value.botAutoroleIds}
+                  onChange={(botAutoroleIds) => setValue((prev) => ({ ...prev, botAutoroleIds }))}
                 />
               </div>
               </FieldAnchor>
@@ -260,10 +240,10 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
               <FieldAnchor id="field-leave-channel">
               <div className="space-y-2">
                 <Label>{t('modulePages.welcome.leaveChannelId')}</Label>
-                <Input
+                <DiscordChannelSelect
+                  guildId={guildId}
                   value={value.leaveChannelId}
-                  onChange={(event) => setValue((prev) => ({ ...prev, leaveChannelId: event.target.value.trim() }))}
-                  placeholder="123456789012345678"
+                  onChange={(leaveChannelId) => setValue((prev) => ({ ...prev, leaveChannelId }))}
                 />
               </div>
               </FieldAnchor>
diff --git a/apps/webui/src/components/settings/access-rules-form.tsx b/apps/webui/src/components/settings/access-rules-form.tsx
index f5fcd4a..66ad037 100644
--- a/apps/webui/src/components/settings/access-rules-form.tsx
+++ b/apps/webui/src/components/settings/access-rules-form.tsx
@@ -2,12 +2,11 @@
 
 import { DASHBOARD_MODULES, type DashboardAccessRule, type DashboardModuleId } from '@nexumi/shared';
 import { Plus, Trash2 } from 'lucide-react';
-import { useId } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
+import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import type { SettingsSaveResult } from './settings-form';
@@ -54,18 +53,19 @@ async function saveAccessRules(guildId: string, rules: LocalRule[]): Promise<Set
 }
 
 function AccessRuleRow({
+  guildId,
   rule,
   onChange,
   onRemove,
   anchorIds
 }: {
+  guildId: string;
   rule: LocalRule;
   onChange: (rule: LocalRule) => void;
   onRemove: () => void;
   anchorIds?: boolean;
 }) {
   const t = useTranslations();
-  const roleInputId = useId();
 
   function toggleModule(moduleId: DashboardModuleId, checked: boolean) {
     const next = checked
@@ -77,14 +77,15 @@ function AccessRuleRow({
   const roleBlock = (
     <div className="flex items-start justify-between gap-4">
       <div className="flex-1 space-y-2">
-        <Label htmlFor={roleInputId}>{t('access.roleIdLabel')}</Label>
-        <Input
-          id={roleInputId}
-          value={rule.roleId}
-          onChange={(event) => onChange({ ...rule, roleId: event.target.value.trim() })}
-          placeholder={t('access.roleIdPlaceholder')}
-          className="max-w-xs"
-        />
+        <Label>{t('access.roleIdLabel')}</Label>
+        <div className="max-w-xs">
+          <DiscordRoleSelect
+            guildId={guildId}
+            value={rule.roleId}
+            onChange={(roleId) => onChange({ ...rule, roleId })}
+            placeholder={t('access.roleIdPlaceholder')}
+          />
+        </div>
         <p className="text-xs text-muted-foreground">{t('access.roleIdHint')}</p>
       </div>
       <Button type="button" variant="ghost" size="icon" onClick={onRemove} aria-label={t('access.removeRule')}>
@@ -169,6 +170,7 @@ export function AccessRulesForm({ guildId, initialRules }: AccessRulesFormProps)
             {value.map((rule, index) => (
               <AccessRuleRow
                 key={rule.clientKey}
+                guildId={guildId}
                 rule={rule}
                 anchorIds={index === 0}
                 onChange={(updated) =>
diff --git a/apps/webui/src/components/ui/discord-channel-select.tsx b/apps/webui/src/components/ui/discord-channel-select.tsx
new file mode 100644
index 0000000..9c87776
--- /dev/null
+++ b/apps/webui/src/components/ui/discord-channel-select.tsx
@@ -0,0 +1,161 @@
+'use client';
+
+import type { DiscordChannelOption } from '@nexumi/shared';
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useTranslations } from '@/components/locale-provider';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { DiscordResourceMultiSelect } from '@/components/ui/discord-resource-multi-select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useGuildChannels } from '@/hooks/use-guild-channels';
+import { CHANNEL_TYPES, channelPrefix } from '@/lib/discord-guild-resources';
+import { cn } from '@/lib/utils';
+
+type ChannelKind = keyof typeof CHANNEL_TYPES;
+
+function filterChannels(
+  channels: DiscordChannelOption[],
+  kinds: ChannelKind[] | undefined
+): DiscordChannelOption[] {
+  if (!kinds || kinds.length === 0) {
+    return channels;
+  }
+  const allowed = new Set<number>(kinds.flatMap((kind) => [...CHANNEL_TYPES[kind]]));
+  return channels.filter((channel) => allowed.has(channel.type));
+}
+
+function toOptions(channels: DiscordChannelOption[]) {
+  return channels.map((channel) => ({
+    id: channel.id,
+    name: channel.name,
+    prefix: channelPrefix(channel.type)
+  }));
+}
+
+interface ChannelSelectBaseProps {
+  guildId: string;
+  kinds?: ChannelKind[];
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+interface DiscordChannelSelectProps extends ChannelSelectBaseProps {
+  value: string;
+  onChange: (next: string) => void;
+  allowClear?: boolean;
+}
+
+/** Single channel picker (searchable). Empty string = cleared. */
+export function DiscordChannelSelect({
+  guildId,
+  value,
+  onChange,
+  kinds = ['messageable'],
+  disabled = false,
+  placeholder,
+  allowClear = true
+}: DiscordChannelSelectProps) {
+  const t = useTranslations();
+  const { channels, loading } = useGuildChannels(guildId);
+  const [open, setOpen] = useState(false);
+
+  const options = useMemo(() => toOptions(filterChannels(channels, kinds)), [channels, kinds]);
+  const selected = options.find((option) => option.id === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled || loading}
+          className="h-9 w-full justify-between px-3 font-normal"
+        >
+          <span className={cn('truncate', !selected && 'text-muted-foreground')}>
+            {selected
+              ? `${selected.prefix}${selected.name}`
+              : (placeholder ?? t('modulePages.commands.channelSearchPlaceholder'))}
+          </span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command>
+          <CommandInput placeholder={placeholder ?? t('modulePages.commands.channelSearchPlaceholder')} />
+          <CommandList>
+            <CommandEmpty>{t('common.noResults')}</CommandEmpty>
+            <CommandGroup>
+              {allowClear && value ? (
+                <CommandItem
+                  value="__clear__"
+                  onSelect={() => {
+                    onChange('');
+                    setOpen(false);
+                  }}
+                >
+                  <X className="size-4 opacity-60" />
+                  <span className="text-muted-foreground">{t('common.clearSelection')}</span>
+                </CommandItem>
+              ) : null}
+              {options.map((option) => (
+                <CommandItem
+                  key={option.id}
+                  value={`${option.prefix}${option.name} ${option.id}`}
+                  onSelect={() => {
+                    onChange(option.id);
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={cn('size-4', value === option.id ? 'opacity-100' : 'opacity-0')} />
+                  <span className="truncate">
+                    {option.prefix}
+                    {option.name}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DiscordChannelMultiSelectProps extends ChannelSelectBaseProps {
+  value: string[];
+  onChange: (next: string[]) => void;
+}
+
+/** Multi channel picker (searchable), same UX as Commands. */
+export function DiscordChannelMultiSelect({
+  guildId,
+  value,
+  onChange,
+  kinds = ['messageable'],
+  disabled = false,
+  placeholder
+}: DiscordChannelMultiSelectProps) {
+  const t = useTranslations();
+  const { channels, loading } = useGuildChannels(guildId);
+  const options = useMemo(() => toOptions(filterChannels(channels, kinds)), [channels, kinds]);
+
+  return (
+    <DiscordResourceMultiSelect
+      options={options}
+      value={value}
+      onChange={onChange}
+      disabled={disabled || loading}
+      placeholder={placeholder ?? t('modulePages.commands.channelSearchPlaceholder')}
+    />
+  );
+}
diff --git a/apps/webui/src/components/ui/discord-role-select.tsx b/apps/webui/src/components/ui/discord-role-select.tsx
new file mode 100644
index 0000000..1a56242
--- /dev/null
+++ b/apps/webui/src/components/ui/discord-role-select.tsx
@@ -0,0 +1,144 @@
+'use client';
+
+import type { DiscordRoleOption } from '@nexumi/shared';
+import { Check, ChevronsUpDown, X } from 'lucide-react';
+import { useMemo, useState } from 'react';
+import { useTranslations } from '@/components/locale-provider';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import { DiscordResourceMultiSelect } from '@/components/ui/discord-resource-multi-select';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useGuildRoles } from '@/hooks/use-guild-roles';
+import { cn } from '@/lib/utils';
+
+function toOptions(roles: DiscordRoleOption[]) {
+  return roles.map((role) => ({
+    id: role.id,
+    name: role.name,
+    prefix: '@'
+  }));
+}
+
+interface RoleSelectBaseProps {
+  guildId: string;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+interface DiscordRoleSelectProps extends RoleSelectBaseProps {
+  value: string;
+  onChange: (next: string) => void;
+  allowClear?: boolean;
+}
+
+/** Single role picker (searchable). Empty string = cleared. */
+export function DiscordRoleSelect({
+  guildId,
+  value,
+  onChange,
+  disabled = false,
+  placeholder,
+  allowClear = true
+}: DiscordRoleSelectProps) {
+  const t = useTranslations();
+  const { roles, loading } = useGuildRoles(guildId);
+  const [open, setOpen] = useState(false);
+
+  const options = useMemo(() => toOptions(roles), [roles]);
+  const selected = options.find((option) => option.id === value);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled || loading}
+          className="h-9 w-full justify-between px-3 font-normal"
+        >
+          <span className={cn('truncate', !selected && 'text-muted-foreground')}>
+            {selected
+              ? `${selected.prefix}${selected.name}`
+              : (placeholder ?? t('modulePages.commands.roleSearchPlaceholder'))}
+          </span>
+          <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0" align="start">
+        <Command>
+          <CommandInput placeholder={placeholder ?? t('modulePages.commands.roleSearchPlaceholder')} />
+          <CommandList>
+            <CommandEmpty>{t('common.noResults')}</CommandEmpty>
+            <CommandGroup>
+              {allowClear && value ? (
+                <CommandItem
+                  value="__clear__"
+                  onSelect={() => {
+                    onChange('');
+                    setOpen(false);
+                  }}
+                >
+                  <X className="size-4 opacity-60" />
+                  <span className="text-muted-foreground">{t('common.clearSelection')}</span>
+                </CommandItem>
+              ) : null}
+              {options.map((option) => (
+                <CommandItem
+                  key={option.id}
+                  value={`${option.prefix}${option.name} ${option.id}`}
+                  onSelect={() => {
+                    onChange(option.id);
+                    setOpen(false);
+                  }}
+                >
+                  <Check className={cn('size-4', value === option.id ? 'opacity-100' : 'opacity-0')} />
+                  <span className="truncate">
+                    {option.prefix}
+                    {option.name}
+                  </span>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+interface DiscordRoleMultiSelectProps extends RoleSelectBaseProps {
+  value: string[];
+  onChange: (next: string[]) => void;
+}
+
+/** Multi role picker (searchable). */
+export function DiscordRoleMultiSelect({
+  guildId,
+  value,
+  onChange,
+  disabled = false,
+  placeholder
+}: DiscordRoleMultiSelectProps) {
+  const t = useTranslations();
+  const { roles, loading } = useGuildRoles(guildId);
+  const options = useMemo(() => toOptions(roles), [roles]);
+
+  return (
+    <DiscordResourceMultiSelect
+      options={options}
+      value={value}
+      onChange={onChange}
+      disabled={disabled || loading}
+      placeholder={placeholder ?? t('modulePages.commands.roleSearchPlaceholder')}
+    />
+  );
+}
diff --git a/apps/webui/src/hooks/use-guild-channels.ts b/apps/webui/src/hooks/use-guild-channels.ts
new file mode 100644
index 0000000..45e6a93
--- /dev/null
+++ b/apps/webui/src/hooks/use-guild-channels.ts
@@ -0,0 +1,56 @@
+'use client';
+
+import type { DiscordChannelOption } from '@nexumi/shared';
+import { useEffect, useState } from 'react';
+
+const cache = new Map<string, DiscordChannelOption[]>();
+
+export function useGuildChannels(guildId: string): {
+  channels: DiscordChannelOption[];
+  loading: boolean;
+} {
+  const [channels, setChannels] = useState<DiscordChannelOption[]>(() => cache.get(guildId) ?? []);
+  const [loading, setLoading] = useState(!cache.has(guildId));
+
+  useEffect(() => {
+    let cancelled = false;
+    const cached = cache.get(guildId);
+    if (cached) {
+      setChannels(cached);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    void fetch(`/api/guilds/${guildId}/channels`)
+      .then(async (response) => {
+        if (!response.ok) {
+          return [] as DiscordChannelOption[];
+        }
+        return (await response.json()) as DiscordChannelOption[];
+      })
+      .then((data) => {
+        if (cancelled) {
+          return;
+        }
+        cache.set(guildId, data);
+        setChannels(data);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setChannels([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [guildId]);
+
+  return { channels, loading };
+}
diff --git a/apps/webui/src/hooks/use-guild-roles.ts b/apps/webui/src/hooks/use-guild-roles.ts
new file mode 100644
index 0000000..2b77c28
--- /dev/null
+++ b/apps/webui/src/hooks/use-guild-roles.ts
@@ -0,0 +1,56 @@
+'use client';
+
+import type { DiscordRoleOption } from '@nexumi/shared';
+import { useEffect, useState } from 'react';
+
+const cache = new Map<string, DiscordRoleOption[]>();
+
+export function useGuildRoles(guildId: string): {
+  roles: DiscordRoleOption[];
+  loading: boolean;
+} {
+  const [roles, setRoles] = useState<DiscordRoleOption[]>(() => cache.get(guildId) ?? []);
+  const [loading, setLoading] = useState(!cache.has(guildId));
+
+  useEffect(() => {
+    let cancelled = false;
+    const cached = cache.get(guildId);
+    if (cached) {
+      setRoles(cached);
+      setLoading(false);
+      return;
+    }
+
+    setLoading(true);
+    void fetch(`/api/guilds/${guildId}/roles`)
+      .then(async (response) => {
+        if (!response.ok) {
+          return [] as DiscordRoleOption[];
+        }
+        return (await response.json()) as DiscordRoleOption[];
+      })
+      .then((data) => {
+        if (cancelled) {
+          return;
+        }
+        cache.set(guildId, data);
+        setRoles(data);
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setRoles([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [guildId]);
+
+  return { roles, loading };
+}
diff --git a/apps/webui/src/lib/discord-guild-resources.ts b/apps/webui/src/lib/discord-guild-resources.ts
index 12cff54..01346d0 100644
--- a/apps/webui/src/lib/discord-guild-resources.ts
+++ b/apps/webui/src/lib/discord-guild-resources.ts
@@ -5,17 +5,24 @@ import { redis } from './redis';
 const DISCORD_API_BASE = 'https://discord.com/api/v10';
 const CACHE_TTL_SECONDS = 60;
 
-/** Discord channel types usable for slash commands. */
-const COMMAND_CHANNEL_TYPES = new Set([
+/** Channel types useful in the dashboard (text, voice, category, forum, …). */
+const DASHBOARD_CHANNEL_TYPES = new Set([
   0, // GUILD_TEXT
+  2, // GUILD_VOICE
+  4, // GUILD_CATEGORY
   5, // GUILD_ANNOUNCEMENT
-  10, // ANNOUNCEMENT_THREAD
-  11, // PUBLIC_THREAD
-  12, // PRIVATE_THREAD
+  13, // GUILD_STAGE_VOICE
   15, // GUILD_FORUM
   16 // GUILD_MEDIA
 ]);
 
+export const CHANNEL_TYPES = {
+  text: [0, 5, 15, 16],
+  voice: [2, 13],
+  category: [4],
+  messageable: [0, 5, 15, 16]
+} as const;
+
 async function discordBotFetch<T>(path: string): Promise<T> {
   const response = await fetch(`${DISCORD_API_BASE}${path}`, {
     headers: { Authorization: `Bot ${env.BOT_TOKEN}` },
@@ -44,7 +51,7 @@ interface DiscordRoleRest {
 }
 
 export async function listGuildChannelsForDashboard(guildId: string): Promise<DiscordChannelOption[]> {
-  const cacheKey = `dashboard:guild:${guildId}:channels`;
+  const cacheKey = `dashboard:guild:${guildId}:channels:v2`;
   const cached = await redis.get(cacheKey);
   if (cached) {
     return JSON.parse(cached) as DiscordChannelOption[];
@@ -52,7 +59,7 @@ export async function listGuildChannelsForDashboard(guildId: string): Promise<Di
 
   const channels = await discordBotFetch<DiscordChannelRest[]>(`/guilds/${guildId}/channels`);
   const options = channels
-    .filter((channel) => COMMAND_CHANNEL_TYPES.has(channel.type))
+    .filter((channel) => DASHBOARD_CHANNEL_TYPES.has(channel.type))
     .map((channel) => ({
       id: channel.id,
       name: channel.name,
@@ -86,3 +93,13 @@ export async function listGuildRolesForDashboard(guildId: string): Promise<Disco
   await redis.set(cacheKey, JSON.stringify(options), 'EX', CACHE_TTL_SECONDS);
   return options;
 }
+
+export function channelPrefix(type: number): string {
+  if (type === 2 || type === 13) {
+    return '🔊 ';
+  }
+  if (type === 4) {
+    return '📁 ';
+  }
+  return '#';
+}
diff --git a/apps/webui/src/messages/de.json b/apps/webui/src/messages/de.json
index 37e86ce..2970244 100644
--- a/apps/webui/src/messages/de.json
+++ b/apps/webui/src/messages/de.json
@@ -20,7 +20,8 @@
     "comingSoon": "Demnächst verfügbar",
     "close": "Schließen",
     "searchSelect": "Suchen und auswählen…",
-    "noResults": "Keine Treffer"
+    "noResults": "Keine Treffer",
+    "clearSelection": "Auswahl löschen"
   },
   "nav": {
     "dashboard": "Dashboard",
diff --git a/apps/webui/src/messages/en.json b/apps/webui/src/messages/en.json
index a805f52..afaff41 100644
--- a/apps/webui/src/messages/en.json
+++ b/apps/webui/src/messages/en.json
@@ -20,7 +20,8 @@
     "close": "Close",
     "optional": "Optional",
     "searchSelect": "Search and select…",
-    "noResults": "No results"
+    "noResults": "No results",
+    "clearSelection": "Clear selection"
   },
   "nav": {
     "dashboard": "Dashboard",
diff --git a/docs/PHASE-TRACKING.md b/docs/PHASE-TRACKING.md
index 7584cdb..9d32a58 100644
--- a/docs/PHASE-TRACKING.md
+++ b/docs/PHASE-TRACKING.md
@@ -88,6 +88,28 @@
 - Musik- und KI-Modul (nur auf Zuruf)
 - Premium-Zahlungsanbindung
 
+## Post-Phase – Channel-Picker überall (Status: implementiert)
+
+### Abgeschlossen (Code)
+
+- `DiscordChannelSelect` / `DiscordChannelMultiSelect` + `useGuildChannels`
+- Alle Modul-Forms: Kanal-ID-Texteingaben durch durchsuchbare Channel-Auswahl ersetzt
+- Voice-/Category-Filter für TempVoice/Stats/Tickets
+
+## Post-Phase – Role-Picker überall (Status: implementiert)
+
+### Abgeschlossen (Code)
+
+- `DiscordRoleSelect` / `DiscordRoleMultiSelect` + `useGuildRoles`
+- Modul-Forms/Manager: Rollen-ID-Texteingaben durch durchsuchbare Role-Auswahl ersetzt (Welcome, Verification, Leveling, Logging, Birthdays, Giveaways, Tags, Tickets, Access Rules, Feeds, Scheduler, Commands)
+- Selfroles-Textarea (`roleId | label | emoji`) bewusst unverändert
+
+### Manuell testen
+
+- [ ] Rollen in den Modul-Settings per Dropdown setzen und speichern
+- [ ] Multi-Select (Autoroles, No-XP-Roles, Support-Roles, …) speichert string[] korrekt
+- [ ] Access-Rules: Rolle wählen und Module zuweisen
+
 ## Post-Phase – Command-Global-Rules + Channel-Picker (Status: implementiert)
 
 ### Abgeschlossen (Code)