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.

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>