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