fix: Starboard

apps/webui/src/components/modules/starboard-form.tsx

@@ -12,7 +12,18 @@ import { Switch } from '@/components/ui/switch';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
 
-async function saveStarboard(guildId: string, value: StarboardConfigDashboard): Promise<SettingsSaveResult> {
+async function saveStarboard(
+  guildId: string,
+  value: StarboardConfigDashboard,
+  t: (key: string) => string
+): Promise<SettingsSaveResult> {
+  if (value.enabled && !value.channelId) {
+    return { ok: false, error: t('modulePages.starboard.errors.channelRequired') };
+  }
+  if (value.threshold < 1 || value.threshold > 100) {
+    return { ok: false, error: t('modulePages.starboard.errors.thresholdRange') };
+  }
+
   try {
     const response = await fetch(`/api/guilds/${guildId}/starboard`, {
       method: 'PATCH',
@@ -42,7 +53,7 @@ export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
   return (
     <SettingsForm<StarboardConfigDashboard>
       initialValue={initialValue}
-      onSave={(value) => saveStarboard(guildId, value)}
+      onSave={(value) => saveStarboard(guildId, value, t)}
     >
       {({ value, setValue }) => (
         <Card>
@@ -52,50 +63,85 @@ export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
           </CardHeader>
           <CardContent className="space-y-4">
             <FieldAnchor id="field-starboard-enabled">
-            <div className="flex items-center justify-between rounded-md border border-border p-4">
-              <Label>{t('modulePages.starboard.enabledLabel')}</Label>
-              <Switch checked={value.enabled} onCheckedChange={(enabled) => setValue((prev) => ({ ...prev, enabled }))} />
-            </div>
+              <div className="flex items-center justify-between rounded-md border border-border p-4">
+                <div className="space-y-0.5 pr-4">
+                  <Label>{t('modulePages.starboard.enabledLabel')}</Label>
+                  <p className="text-xs text-muted-foreground">{t('modulePages.starboard.enabledHint')}</p>
+                </div>
+                <Switch
+                  checked={value.enabled}
+                  onCheckedChange={(enabled) => setValue((prev) => ({ ...prev, enabled }))}
+                />
+              </div>
             </FieldAnchor>
             <div className="grid gap-4 sm:grid-cols-3">
               <FieldAnchor id="field-starboard-channel">
-              <div className="space-y-2">
-                <Label>{t('modulePages.starboard.channelId')}</Label>
-                <DiscordChannelSelect
-                  guildId={guildId}
-                  value={value.channelId}
-                  onChange={(channelId) => setValue((prev) => ({ ...prev, channelId }))}
-                />
-              </div>
+                <div className="space-y-2">
+                  <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">
-              <div className="space-y-2">
-                <Label htmlFor={emojiId}>{t('modulePages.starboard.emoji')}</Label>
-                <Input id={emojiId} value={value.emoji} onChange={(event) => setValue((prev) => ({ ...prev, emoji: event.target.value }))} />
-              </div>
+                <div className="space-y-2">
+                  <Label htmlFor={emojiId}>{t('modulePages.starboard.emoji')}</Label>
+                  <Input
+                    id={emojiId}
+                    value={value.emoji}
+                    maxLength={80}
+                    onChange={(event) =>
+                      setValue((prev) => ({ ...prev, emoji: event.target.value }))
+                    }
+                    placeholder="⭐ or <:name:id>"
+                  />
+                  <p className="text-xs text-muted-foreground">{t('modulePages.starboard.emojiHint')}</p>
+                </div>
               </FieldAnchor>
               <FieldAnchor id="field-starboard-threshold">
-              <div className="space-y-2">
-                <Label htmlFor={thresholdId}>{t('modulePages.starboard.threshold')}</Label>
-                <Input id={thresholdId} type="number" min={1} value={value.threshold} onChange={(event) => setValue((prev) => ({ ...prev, threshold: Number(event.target.value) || 1 }))} />
-              </div>
+                <div className="space-y-2">
+                  <Label htmlFor={thresholdId}>{t('modulePages.starboard.threshold')}</Label>
+                  <Input
+                    id={thresholdId}
+                    type="number"
+                    min={1}
+                    max={100}
+                    value={value.threshold}
+                    onChange={(event) =>
+                      setValue((prev) => ({
+                        ...prev,
+                        threshold: Number(event.target.value) || 1
+                      }))
+                    }
+                  />
+                </div>
               </FieldAnchor>
             </div>
             <FieldAnchor id="field-starboard-self">
-            <div className="flex items-center justify-between rounded-md border border-border p-4">
-              <Label>{t('modulePages.starboard.allowSelfStar')}</Label>
-              <Switch checked={value.allowSelfStar} onCheckedChange={(allowSelfStar) => setValue((prev) => ({ ...prev, allowSelfStar }))} />
-            </div>
+              <div className="flex items-center justify-between rounded-md border border-border p-4">
+                <Label>{t('modulePages.starboard.allowSelfStar')}</Label>
+                <Switch
+                  checked={value.allowSelfStar}
+                  onCheckedChange={(allowSelfStar) =>
+                    setValue((prev) => ({ ...prev, allowSelfStar }))
+                  }
+                />
+              </div>
             </FieldAnchor>
             <FieldAnchor id="field-starboard-ignored">
-            <div className="space-y-2">
-              <Label>{t('modulePages.starboard.ignoredChannelIds')}</Label>
-              <DiscordChannelMultiSelect
-                guildId={guildId}
-                value={value.ignoredChannelIds}
-                onChange={(ignoredChannelIds) => setValue((prev) => ({ ...prev, ignoredChannelIds }))}
-              />
-            </div>
+              <div className="space-y-2">
+                <Label>{t('modulePages.starboard.ignoredChannelIds')}</Label>
+                <DiscordChannelMultiSelect
+                  guildId={guildId}
+                  value={value.ignoredChannelIds}
+                  onChange={(ignoredChannelIds) =>
+                    setValue((prev) => ({ ...prev, ignoredChannelIds }))
+                  }
+                />
+                <p className="text-xs text-muted-foreground">{t('modulePages.starboard.nsfwHint')}</p>
+              </div>
             </FieldAnchor>
           </CardContent>
         </Card>

apps/webui/src/messages/de.json

@@ -768,12 +768,18 @@
       "title": "Starboard",
       "description": "Beliebte Nachrichten in einem eigenen Kanal hervorheben.",
       "enabledLabel": "Starboard aktiviert",
-      "channelId": "Starboard-Kanal-ID",
+      "enabledHint": "Ohne Zielkanal kann Starboard nicht aktiviert werden.",
+      "channelId": "Starboard-Kanal",
       "emoji": "Auslöse-Emoji",
+      "emojiHint": "Unicode (⭐) oder Custom-Emoji als <:name:id> / <a:name:id>.",
       "threshold": "Stern-Schwellenwert",
       "allowSelfStar": "Eigene Nachrichten dürfen selbst markiert werden",
-      "ignoredChannelIds": "Ignorierte Kanal-IDs",
-      "idsHint": "Kommagetrennte Liste von Kanal-IDs, die vom Starboard ausgeschlossen werden."
+      "ignoredChannelIds": "Ignorierte Kanäle",
+      "nsfwHint": "NSFW-Kanäle werden immer ausgeschlossen.",
+      "errors": {
+        "channelRequired": "Bitte einen Starboard-Kanal wählen, bevor du aktivierst.",
+        "thresholdRange": "Der Schwellenwert muss zwischen 1 und 100 liegen."
+      }
     },
     "suggestions": {
       "configTitle": "Vorschläge-Einstellungen",

apps/webui/src/messages/en.json

@@ -768,12 +768,18 @@
       "title": "Starboard",
       "description": "Highlight popular messages in a dedicated channel.",
       "enabledLabel": "Starboard enabled",
-      "channelId": "Starboard channel ID",
+      "enabledHint": "A target channel is required before enabling starboard.",
+      "channelId": "Starboard channel",
       "emoji": "Trigger emoji",
+      "emojiHint": "Unicode (⭐) or custom emoji as <:name:id> / <a:name:id>.",
       "threshold": "Star threshold",
       "allowSelfStar": "Allow starring your own messages",
-      "ignoredChannelIds": "Ignored channel IDs",
-      "idsHint": "Comma-separated list of channel IDs to exclude from the starboard."
+      "ignoredChannelIds": "Ignored channels",
+      "nsfwHint": "NSFW channels are always excluded.",
+      "errors": {
+        "channelRequired": "Pick a starboard channel before enabling.",
+        "thresholdRange": "Threshold must be between 1 and 100."
+      }
     },
     "suggestions": {
       "configTitle": "Suggestions settings",