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