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/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>