From 8cfb149a188bcca5ed6af1e108dd818917bcb151 Mon Sep 17 00:00:00 2001
From: TheOnlyMace <0815cracky@gmail.com>
Date: Wed, 22 Jul 2026 22:07:08 +0200
Subject: [PATCH] Implement PlaceholderHelp component across various forms for
 enhanced user guidance

- Integrated PlaceholderHelp component into multiple forms including WelcomeForm, TagsManager, and StatsForm to provide contextual hints for available placeholders.
- Updated DiscordEmbedBuilder to support placeholder presets, improving user experience when creating embeds.
- Enhanced localization files to include new placeholder descriptions, ensuring clarity in both English and German.
- Refactored related components to maintain consistency in placeholder handling across the application.
---
 apps/bot/src/modules/scheduler/service.ts     |   8 +-
 apps/bot/src/modules/welcome/events.ts        |   4 +-
 .../src/components/modules/birthdays-form.tsx |   2 +
 .../src/components/modules/feeds-manager.tsx  |   2 +
 .../src/components/modules/leveling-form.tsx  |   2 +
 .../src/components/modules/logging-form.tsx   | 178 ++++++++++++------
 .../components/modules/scheduler-manager.tsx  |   8 +-
 .../src/components/modules/stats-form.tsx     |   3 +-
 .../src/components/modules/tags-manager.tsx   |  72 +++++--
 .../src/components/modules/tempvoice-form.tsx |   2 +
 .../src/components/modules/welcome-form.tsx   |   8 +-
 .../components/ui/discord-embed-builder.tsx   |  12 +-
 .../ui/discord-resource-multi-select.tsx      |  13 +-
 .../src/components/ui/placeholder-help.tsx    |  96 ++++++++++
 apps/webui/src/lib/placeholder-presets.ts     |  80 ++++++++
 apps/webui/src/messages/de.json               |  69 ++++++-
 apps/webui/src/messages/en.json               |  69 ++++++-
 docs/PHASE-TRACKING.md                        |  27 +++
 packages/shared/src/phase2.test.ts            |  10 +
 packages/shared/src/phase2.ts                 |  11 +-
 packages/shared/src/phase4.ts                 |   5 +-
 21 files changed, 583 insertions(+), 98 deletions(-)
 create mode 100644 apps/webui/src/components/ui/placeholder-help.tsx
 create mode 100644 apps/webui/src/lib/placeholder-presets.ts

diff --git a/apps/bot/src/modules/scheduler/service.ts b/apps/bot/src/modules/scheduler/service.ts
index 6c835bc..9ed8d00 100644
--- a/apps/bot/src/modules/scheduler/service.ts
+++ b/apps/bot/src/modules/scheduler/service.ts
@@ -5,7 +5,7 @@ import {
   type MessageCreateOptions,
   type TextChannel
 } from 'discord.js';
-import { WelcomeEmbedSchema, t, tf } from '@nexumi/shared';
+import { WelcomeEmbedSchema, expandBracketChannelMentions, t, tf } from '@nexumi/shared';
 import type { ScheduledMessage } from '@prisma/client';
 import { ensureGuild } from '../../guild.js';
 import { logger } from '../../logger.js';
@@ -99,15 +99,15 @@ export function buildAnnouncementPayload(schedule: {
   if (embedData) {
     const embed = new EmbedBuilder().setColor(embedData.color ?? 0x6366f1);
     if (embedData.title) {
-      embed.setTitle(embedData.title);
+      embed.setTitle(expandBracketChannelMentions(embedData.title));
     }
     if (embedData.description) {
-      embed.setDescription(embedData.description);
+      embed.setDescription(expandBracketChannelMentions(embedData.description));
     }
     embeds.push(embed);
   }
 
-  const baseContent = schedule.content?.trim() ?? '';
+  const baseContent = expandBracketChannelMentions(schedule.content?.trim() ?? '');
   const roleMention = schedule.rolePingId ? `<@&${schedule.rolePingId}>` : '';
   const content = [roleMention, baseContent].filter(Boolean).join(' ').trim();
 
diff --git a/apps/bot/src/modules/welcome/events.ts b/apps/bot/src/modules/welcome/events.ts
index c4d04e2..a62ecb6 100644
--- a/apps/bot/src/modules/welcome/events.ts
+++ b/apps/bot/src/modules/welcome/events.ts
@@ -1,6 +1,6 @@
 import { PermissionFlagsBits, type GuildMember } from 'discord.js';
 import type { BotContext } from '../../types.js';
-import { getWelcomeConfig, resolveWelcomePayload } from './service.js';
+import { getWelcomeConfig, resolveWelcomePayload, renderWelcomeText } from './service.js';
 import { sendLeaveMessage, sendWelcomeMessage } from './renderer.js';
 import { logger } from '../../logger.js';
 
@@ -41,7 +41,7 @@ export async function handleMemberWelcome(context: BotContext, member: GuildMemb
 
   if (config.welcomeDmEnabled && config.welcomeDmContent && !member.user.bot) {
     await member
-      .send({ content: config.welcomeDmContent.replace('{user}', `<@${member.id}>`) })
+      .send({ content: renderWelcomeText(config.welcomeDmContent, member, member.guild) })
       .catch(() => undefined);
   }
 }
diff --git a/apps/webui/src/components/modules/birthdays-form.tsx b/apps/webui/src/components/modules/birthdays-form.tsx
index cccadb4..9d43985 100644
--- a/apps/webui/src/components/modules/birthdays-form.tsx
+++ b/apps/webui/src/components/modules/birthdays-form.tsx
@@ -9,6 +9,7 @@ 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 { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
@@ -87,6 +88,7 @@ export function BirthdaysForm({ guildId, initialValue }: BirthdaysFormProps) {
             <div className="space-y-2">
               <Label>{t('modulePages.birthdays.message')}</Label>
               <Textarea value={value.message ?? ''} onChange={(event) => setValue((prev) => ({ ...prev, message: event.target.value || null }))} placeholder={t('modulePages.birthdays.messagePlaceholder')} />
+              <PlaceholderHelp preset="birthdays" />
             </div>
             </FieldAnchor>
           </CardContent>
diff --git a/apps/webui/src/components/modules/feeds-manager.tsx b/apps/webui/src/components/modules/feeds-manager.tsx
index a8ba0d0..cb8bad0 100644
--- a/apps/webui/src/components/modules/feeds-manager.tsx
+++ b/apps/webui/src/components/modules/feeds-manager.tsx
@@ -12,6 +12,7 @@ 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 { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 
@@ -206,6 +207,7 @@ export function FeedsManager({ guildId, initialFeeds }: FeedsManagerProps) {
                 onChange={(event) => setDraft((prev) => ({ ...prev, template: event.target.value }))}
                 placeholder={t('modulePages.feeds.templatePlaceholder')}
               />
+              <PlaceholderHelp preset="feeds" />
             </div>
           </div>
           <Button type="button" variant="outline" onClick={handleCreate} disabled={creating}>
diff --git a/apps/webui/src/components/modules/leveling-form.tsx b/apps/webui/src/components/modules/leveling-form.tsx
index 885f4e0..31c6e23 100644
--- a/apps/webui/src/components/modules/leveling-form.tsx
+++ b/apps/webui/src/components/modules/leveling-form.tsx
@@ -14,6 +14,7 @@ import {
 import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
@@ -250,6 +251,7 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   onChange={(event) => setValue((prev) => ({ ...prev, levelUpMessage: event.target.value || null }))}
                   placeholder="Congrats {user}, you reached level {level}!"
                 />
+                <PlaceholderHelp preset="leveling" />
               </div>
               <FieldAnchor id="field-leveling-stack">
               <div className="flex items-center justify-between rounded-md border border-border p-4">
diff --git a/apps/webui/src/components/modules/logging-form.tsx b/apps/webui/src/components/modules/logging-form.tsx
index 9d66051..d41742e 100644
--- a/apps/webui/src/components/modules/logging-form.tsx
+++ b/apps/webui/src/components/modules/logging-form.tsx
@@ -2,15 +2,16 @@
 
 import type { LogChannelMapping, LogEventTypeDashboard, LoggingConfigDashboard } from '@nexumi/shared';
 import { Plus, Trash2 } from 'lucide-react';
+import { useMemo } from 'react';
 import { FieldAnchor } from '@/components/layout/field-anchor';
 import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { DiscordChannelMultiSelect, DiscordChannelSelect } from '@/components/ui/discord-channel-select';
+import { DiscordResourceMultiSelect } from '@/components/ui/discord-resource-multi-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';
 import { Switch } from '@/components/ui/switch';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
@@ -44,8 +45,10 @@ const LOG_EVENT_TYPES: LogEventTypeDashboard[] = [
   'MOD_ACTION'
 ];
 
-interface LocalLogChannel extends LogChannelMapping {
+interface LocalLogChannelGroup {
   clientKey: string;
+  channelId: string;
+  eventTypes: LogEventTypeDashboard[];
 }
 
 interface LocalLoggingValue {
@@ -54,37 +57,78 @@ interface LocalLoggingValue {
   ignoredChannelIds: string[];
   ignoredRoleIds: string[];
   retentionDays: number;
-  logChannels: LocalLogChannel[];
+  logChannels: LocalLogChannelGroup[];
 }
 
 function toLocal(config: LoggingConfigDashboard): LocalLoggingValue {
+  const byChannel = new Map<string, LogEventTypeDashboard[]>();
+  for (const mapping of config.logChannels) {
+    const existing = byChannel.get(mapping.channelId) ?? [];
+    existing.push(mapping.eventType);
+    byChannel.set(mapping.channelId, existing);
+  }
+
+  const logChannels: LocalLogChannelGroup[] = [...byChannel.entries()].map(([channelId, eventTypes], index) => ({
+    clientKey: `${channelId}-${index}`,
+    channelId,
+    eventTypes: [...new Set(eventTypes)]
+  }));
+
   return {
     enabled: config.enabled,
     ignoreBots: config.ignoreBots,
     ignoredChannelIds: config.ignoredChannelIds,
     ignoredRoleIds: config.ignoredRoleIds,
     retentionDays: config.retentionDays,
-    logChannels: config.logChannels.map((mapping, index) => ({ ...mapping, clientKey: `${mapping.eventType}-${index}` }))
+    logChannels
   };
 }
 
-function toRemote(value: LocalLoggingValue): LoggingConfigDashboard {
+function toRemote(value: LocalLoggingValue): { ok: true; value: LoggingConfigDashboard } | { ok: false; error: string } {
+  const mappings: LogChannelMapping[] = [];
+  const seenEventTypes = new Set<LogEventTypeDashboard>();
+
+  for (const group of value.logChannels) {
+    if (!group.channelId.trim() || group.eventTypes.length === 0) {
+      continue;
+    }
+    for (const eventType of group.eventTypes) {
+      if (seenEventTypes.has(eventType)) {
+        return { ok: false, error: 'duplicateEventType' };
+      }
+      seenEventTypes.add(eventType);
+      mappings.push({ eventType, channelId: group.channelId });
+    }
+  }
+
   return {
-    enabled: value.enabled,
-    ignoreBots: value.ignoreBots,
-    ignoredChannelIds: value.ignoredChannelIds,
-    ignoredRoleIds: value.ignoredRoleIds,
-    retentionDays: value.retentionDays,
-    logChannels: value.logChannels.map(({ clientKey: _clientKey, ...rest }) => rest)
+    ok: true,
+    value: {
+      enabled: value.enabled,
+      ignoreBots: value.ignoreBots,
+      ignoredChannelIds: value.ignoredChannelIds,
+      ignoredRoleIds: value.ignoredRoleIds,
+      retentionDays: value.retentionDays,
+      logChannels: mappings
+    }
   };
 }
 
-async function saveLogging(guildId: string, value: LocalLoggingValue): Promise<SettingsSaveResult> {
+async function saveLogging(
+  guildId: string,
+  value: LocalLoggingValue,
+  t: (key: string) => string
+): Promise<SettingsSaveResult> {
+  const remote = toRemote(value);
+  if (!remote.ok) {
+    return { ok: false, error: t(`modulePages.logging.errors.${remote.error}`) };
+  }
+
   try {
     const response = await fetch(`/api/guilds/${guildId}/logging`, {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify(toRemote(value))
+      body: JSON.stringify(remote.value)
     });
     if (!response.ok) {
       const body = (await response.json().catch(() => null)) as { error?: string } | null;
@@ -104,10 +148,19 @@ interface LoggingFormProps {
 export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
   const t = useTranslations();
 
+  const eventOptions = useMemo(
+    () =>
+      LOG_EVENT_TYPES.map((eventType) => ({
+        id: eventType,
+        name: t(`modulePages.logging.eventTypes.${eventType}`)
+      })),
+    [t]
+  );
+
   return (
     <SettingsForm<LocalLoggingValue>
       initialValue={toLocal(initialValue)}
-      onSave={(value) => saveLogging(guildId, value)}
+      onSave={(value) => saveLogging(guildId, value, t)}
     >
       {({ value, setValue }) => (
         <div className="space-y-6">
@@ -186,63 +239,63 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                 <p className="text-sm text-muted-foreground">{t('modulePages.logging.channelsEmpty')}</p>
               )}
               {value.logChannels.map((mapping) => (
-                <div key={mapping.clientKey} className="flex flex-wrap items-end gap-3 rounded-md border border-border p-3">
-                  <div className="space-y-2">
-                    <Label>{t('modulePages.logging.eventType')}</Label>
-                    <Select
-                      value={mapping.eventType}
-                      onValueChange={(eventType) =>
+                <div key={mapping.clientKey} className="space-y-3 rounded-md border border-border p-3">
+                  <div className="flex flex-wrap items-end gap-3">
+                    <div className="min-w-[14rem] flex-1 space-y-2">
+                      <Label>{t('modulePages.logging.channelId')}</Label>
+                      <DiscordChannelSelect
+                        guildId={guildId}
+                        value={mapping.channelId}
+                        onChange={(channelId) =>
+                          setValue((prev) => ({
+                            ...prev,
+                            logChannels: prev.logChannels.map((entry) =>
+                              entry.clientKey === mapping.clientKey ? { ...entry, channelId } : entry
+                            )
+                          }))
+                        }
+                      />
+                    </div>
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      aria-label={t('common.remove')}
+                      onClick={() =>
                         setValue((prev) => ({
                           ...prev,
-                          logChannels: prev.logChannels.map((entry) =>
-                            entry.clientKey === mapping.clientKey
-                              ? { ...entry, eventType: eventType as LogEventTypeDashboard }
-                              : entry
-                          )
+                          logChannels: prev.logChannels.filter((entry) => entry.clientKey !== mapping.clientKey)
                         }))
                       }
                     >
-                      <SelectTrigger className="w-56">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {LOG_EVENT_TYPES.map((eventType) => (
-                          <SelectItem key={eventType} value={eventType}>
-                            {eventType}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
+                      <Trash2 className="size-4" />
+                    </Button>
                   </div>
-                  <div className="flex-1 space-y-2">
-                    <Label>{t('modulePages.logging.channelId')}</Label>
-                    <DiscordChannelSelect
-                      guildId={guildId}
-                      value={mapping.channelId}
-                      onChange={(channelId) =>
+                  <div className="space-y-2">
+                    <Label>{t('modulePages.logging.eventTypesLabel')}</Label>
+                    <DiscordResourceMultiSelect
+                      options={eventOptions}
+                      value={mapping.eventTypes}
+                      showIdHint={false}
+                      placeholder={t('modulePages.logging.eventTypesPlaceholder')}
+                      onChange={(nextIds) => {
+                        const eventTypes = nextIds as LogEventTypeDashboard[];
                         setValue((prev) => ({
                           ...prev,
-                          logChannels: prev.logChannels.map((entry) =>
-                            entry.clientKey === mapping.clientKey ? { ...entry, channelId } : entry
-                          )
-                        }))
-                      }
+                          logChannels: prev.logChannels.map((entry) => {
+                            if (entry.clientKey === mapping.clientKey) {
+                              return { ...entry, eventTypes };
+                            }
+                            // Each event type can only map to one channel (DB unique).
+                            return {
+                              ...entry,
+                              eventTypes: entry.eventTypes.filter((eventType) => !eventTypes.includes(eventType))
+                            };
+                          })
+                        }));
+                      }}
                     />
                   </div>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="icon"
-                    aria-label={t('common.remove')}
-                    onClick={() =>
-                      setValue((prev) => ({
-                        ...prev,
-                        logChannels: prev.logChannels.filter((entry) => entry.clientKey !== mapping.clientKey)
-                      }))
-                    }
-                  >
-                    <Trash2 className="size-4" />
-                  </Button>
                 </div>
               ))}
               <Button
@@ -253,7 +306,7 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                     ...prev,
                     logChannels: [
                       ...prev.logChannels,
-                      { clientKey: `new-${Date.now()}`, eventType: 'MOD_ACTION', channelId: '' }
+                      { clientKey: `new-${Date.now()}`, channelId: '', eventTypes: [] }
                     ]
                   }))
                 }
@@ -261,6 +314,7 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                 <Plus className="size-4" />
                 {t('modulePages.logging.addMapping')}
               </Button>
+              <p className="text-xs text-muted-foreground">{t('modulePages.logging.channelsHint')}</p>
             </CardContent>
           </Card>
           </FieldAnchor>
diff --git a/apps/webui/src/components/modules/scheduler-manager.tsx b/apps/webui/src/components/modules/scheduler-manager.tsx
index db83aa2..a0e2ce7 100644
--- a/apps/webui/src/components/modules/scheduler-manager.tsx
+++ b/apps/webui/src/components/modules/scheduler-manager.tsx
@@ -13,6 +13,7 @@ import { DiscordEmbedBuilder, normalizeEmbed } from '@/components/ui/discord-emb
 import { DiscordRoleSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Textarea } from '@/components/ui/textarea';
 
 const EMPTY_DRAFT = {
@@ -168,10 +169,15 @@ export function SchedulerManager({ guildId, initialSchedules }: SchedulerManager
               onChange={(event) => setDraft((prev) => ({ ...prev, content: event.target.value }))}
               rows={3}
             />
+            <PlaceholderHelp preset="scheduler" />
           </div>
           <div className="space-y-2">
             <Label>{t('modulePages.scheduler.embed')}</Label>
-            <DiscordEmbedBuilder value={draft.embed} onChange={(embed) => setDraft((prev) => ({ ...prev, embed }))} />
+            <DiscordEmbedBuilder
+              value={draft.embed}
+              onChange={(embed) => setDraft((prev) => ({ ...prev, embed }))}
+              placeholderPreset="scheduler"
+            />
           </div>
           <p className="text-xs text-muted-foreground">{t('modulePages.scheduler.cronHint')}</p>
           <Button type="button" onClick={handleCreate} disabled={creating}>
diff --git a/apps/webui/src/components/modules/stats-form.tsx b/apps/webui/src/components/modules/stats-form.tsx
index 9483cce..015c838 100644
--- a/apps/webui/src/components/modules/stats-form.tsx
+++ b/apps/webui/src/components/modules/stats-form.tsx
@@ -8,6 +8,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Switch } from '@/components/ui/switch';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
@@ -102,7 +103,7 @@ export function StatsForm({ guildId, initialValue }: StatsFormProps) {
                 <Input id={boostsTemplateId} value={value.boostsTemplate} onChange={(event) => setValue((prev) => ({ ...prev, boostsTemplate: event.target.value }))} />
               </div>
             </div>
-            <p className="text-xs text-muted-foreground">{t('modulePages.stats.templateHint')}</p>
+            <PlaceholderHelp preset="stats" />
           </CardContent>
         </Card>
       )}
diff --git a/apps/webui/src/components/modules/tags-manager.tsx b/apps/webui/src/components/modules/tags-manager.tsx
index b051443..3ac9077 100644
--- a/apps/webui/src/components/modules/tags-manager.tsx
+++ b/apps/webui/src/components/modules/tags-manager.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { TagDashboard, TagResponseType } from '@nexumi/shared';
+import type { TagDashboard, TagResponseType, WelcomeEmbed } from '@nexumi/shared';
 import { Plus, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
@@ -9,9 +9,11 @@ import { useTranslations } from '@/components/locale-provider';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { DiscordChannelMultiSelect } from '@/components/ui/discord-channel-select';
+import { DiscordEmbedBuilder, normalizeEmbed } from '@/components/ui/discord-embed-builder';
 import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Textarea } from '@/components/ui/textarea';
 
@@ -25,6 +27,7 @@ interface LocalTag extends TagDashboard {
 const EMPTY_DRAFT = {
   name: '',
   content: '',
+  embed: null as WelcomeEmbed | null,
   responseType: 'TEXT' as TagResponseType,
   triggerWord: '',
   allowedRoleIds: [] as string[],
@@ -41,6 +44,7 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
   const [tags, setTags] = useState<LocalTag[]>(
     initialTags.map((tag, index) => ({
       ...tag,
+      embed: tag.embed ?? null,
       clientKey: tag.id ?? `existing-${index}`
     }))
   );
@@ -52,6 +56,11 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
       toast.error(t('modulePages.tags.nameRequired'));
       return;
     }
+    const embed = draft.responseType === 'EMBED' ? normalizeEmbed(draft.embed) : null;
+    if (draft.responseType === 'EMBED' && !embed?.title && !embed?.description) {
+      toast.error(t('modulePages.tags.embedRequired'));
+      return;
+    }
     setCreating(true);
     try {
       const response = await fetch(`/api/guilds/${guildId}/tags`, {
@@ -60,6 +69,7 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
         body: JSON.stringify({
           name: draft.name.trim(),
           content: draft.content.trim() || null,
+          embed,
           responseType: draft.responseType,
           triggerWord: draft.triggerWord.trim() || null,
           allowedRoleIds: draft.allowedRoleIds,
@@ -88,6 +98,11 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
   }
 
   async function handleSave(tag: LocalTag) {
+    const embed = tag.responseType === 'EMBED' ? normalizeEmbed(tag.embed ?? null) : null;
+    if (tag.responseType === 'EMBED' && !embed?.title && !embed?.description) {
+      toast.error(t('modulePages.tags.embedRequired'));
+      return;
+    }
     setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, saving: true } : entry)));
     try {
       const response = await fetch(`/api/guilds/${guildId}/tags/${tag.id}`, {
@@ -96,6 +111,7 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
         body: JSON.stringify({
           name: tag.name,
           content: tag.content,
+          embed,
           responseType: tag.responseType,
           triggerWord: tag.triggerWord,
           allowedRoleIds: tag.allowedRoleIds,
@@ -105,12 +121,19 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
       const body = (await response.json().catch(() => null)) as (TagDashboard & { error?: string }) | null;
       if (!response.ok || !body) {
         toast.error(body?.error ?? t('common.saveError'));
+        setTags((prev) =>
+          prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, saving: false } : entry))
+        );
         return;
       }
+      setTags((prev) =>
+        prev.map((entry) =>
+          entry.clientKey === tag.clientKey ? { ...entry, ...body, clientKey: entry.clientKey, saving: false } : entry
+        )
+      );
       toast.success(t('common.saveSuccess'));
     } catch {
       toast.error(t('common.saveError'));
-    } finally {
       setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, saving: false } : entry)));
     }
   }
@@ -166,10 +189,22 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
               <Input value={draft.triggerWord} onChange={(event) => setDraft((prev) => ({ ...prev, triggerWord: event.target.value }))} placeholder={t('common.optional')} />
             </div>
           </div>
-          <div className="space-y-2">
-            <Label>{t('modulePages.tags.content')}</Label>
-            <Textarea rows={3} value={draft.content} onChange={(event) => setDraft((prev) => ({ ...prev, content: event.target.value }))} />
-          </div>
+          {draft.responseType === 'TEXT' ? (
+            <div className="space-y-2">
+              <Label>{t('modulePages.tags.content')}</Label>
+              <Textarea rows={3} value={draft.content} onChange={(event) => setDraft((prev) => ({ ...prev, content: event.target.value }))} />
+              <PlaceholderHelp preset="tags" />
+            </div>
+          ) : (
+            <div className="space-y-2">
+              <Label>{t('modulePages.tags.embed')}</Label>
+              <DiscordEmbedBuilder
+                value={draft.embed}
+                onChange={(embed) => setDraft((prev) => ({ ...prev, embed }))}
+                placeholderPreset="tags"
+              />
+            </div>
+          )}
           <div className="grid gap-4 sm:grid-cols-2">
             <div className="space-y-2">
               <Label>{t('modulePages.tags.allowedRoleIds')}</Label>
@@ -197,7 +232,6 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
       </FieldAnchor>
 
       <FieldAnchor id="field-tags-list">
-
       <Card>
         <CardHeader>
           <CardTitle>{t('modulePages.tags.listTitle')}</CardTitle>
@@ -232,10 +266,26 @@ export function TagsManager({ guildId, initialTags }: TagsManagerProps) {
                   <Input value={tag.triggerWord ?? ''} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, triggerWord: event.target.value || null } : entry)))} />
                 </div>
               </div>
-              <div className="space-y-2">
-                <Label>{t('modulePages.tags.content')}</Label>
-                <Textarea rows={3} value={tag.content ?? ''} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, content: event.target.value } : entry)))} />
-              </div>
+              {tag.responseType === 'TEXT' ? (
+                <div className="space-y-2">
+                  <Label>{t('modulePages.tags.content')}</Label>
+                  <Textarea rows={3} value={tag.content ?? ''} onChange={(event) => setTags((prev) => prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, content: event.target.value } : entry)))} />
+                  <PlaceholderHelp preset="tags" />
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  <Label>{t('modulePages.tags.embed')}</Label>
+                  <DiscordEmbedBuilder
+                    value={tag.embed ?? null}
+                    onChange={(embed) =>
+                      setTags((prev) =>
+                        prev.map((entry) => (entry.clientKey === tag.clientKey ? { ...entry, embed } : entry))
+                      )
+                    }
+                    placeholderPreset="tags"
+                  />
+                </div>
+              )}
               <div className="grid gap-3 sm:grid-cols-2">
                 <div className="space-y-2">
                   <Label>{t('modulePages.tags.allowedRoleIds')}</Label>
diff --git a/apps/webui/src/components/modules/tempvoice-form.tsx b/apps/webui/src/components/modules/tempvoice-form.tsx
index 6d09d2b..d705f7a 100644
--- a/apps/webui/src/components/modules/tempvoice-form.tsx
+++ b/apps/webui/src/components/modules/tempvoice-form.tsx
@@ -8,6 +8,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { DiscordChannelSelect } from '@/components/ui/discord-channel-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Switch } from '@/components/ui/switch';
 import type { SettingsSaveResult } from '@/components/settings/settings-form';
 import { SettingsForm } from '@/components/settings/settings-form';
@@ -81,6 +82,7 @@ export function TempVoiceForm({ guildId, initialValue }: TempVoiceFormProps) {
               <div className="space-y-2">
                 <Label htmlFor={nameId}>{t('modulePages.tempvoice.defaultName')}</Label>
                 <Input id={nameId} value={value.defaultName} onChange={(event) => setValue((prev) => ({ ...prev, defaultName: event.target.value }))} placeholder="{user}'s Channel" />
+                <PlaceholderHelp preset="tempvoice" />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-tempvoice-limit">
diff --git a/apps/webui/src/components/modules/welcome-form.tsx b/apps/webui/src/components/modules/welcome-form.tsx
index 0f921db..f758a5c 100644
--- a/apps/webui/src/components/modules/welcome-form.tsx
+++ b/apps/webui/src/components/modules/welcome-form.tsx
@@ -13,6 +13,7 @@ import {
 import { DiscordRoleMultiSelect } from '@/components/ui/discord-role-select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
@@ -131,7 +132,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   onChange={(event) => setValue((prev) => ({ ...prev, welcomeContent: event.target.value || null }))}
                   placeholder={t('modulePages.welcome.contentPlaceholder')}
                 />
-                <p className="text-xs text-muted-foreground">{t('modulePages.welcome.placeholdersHint')}</p>
+                <PlaceholderHelp preset="welcome" />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-welcome-embed">
@@ -141,6 +142,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   value={value.welcomeEmbed}
                   onChange={(welcomeEmbed) => setValue((prev) => ({ ...prev, welcomeEmbed }))}
                   previewVars={WELCOME_PREVIEW_VARS}
+                  placeholderPreset="welcome"
                 />
               </div>
               </FieldAnchor>
@@ -158,6 +160,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   onChange={(event) => setValue((prev) => ({ ...prev, welcomeDmContent: event.target.value || null }))}
                   placeholder={t('modulePages.welcome.dmContentPlaceholder')}
                 />
+                <PlaceholderHelp preset="welcomeDm" />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-welcome-user-autoroles">
@@ -200,6 +203,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                 </div>
                 </FieldAnchor>
               </div>
+              <PlaceholderHelp preset="welcome" />
             </CardContent>
           </Card>
 
@@ -236,6 +240,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   onChange={(event) => setValue((prev) => ({ ...prev, leaveContent: event.target.value || null }))}
                   placeholder={t('modulePages.welcome.contentPlaceholder')}
                 />
+                <PlaceholderHelp preset="welcome" />
               </div>
               </FieldAnchor>
               <FieldAnchor id="field-leave-embed">
@@ -245,6 +250,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   value={value.leaveEmbed}
                   onChange={(leaveEmbed) => setValue((prev) => ({ ...prev, leaveEmbed }))}
                   previewVars={WELCOME_PREVIEW_VARS}
+                  placeholderPreset="welcome"
                 />
               </div>
               </FieldAnchor>
diff --git a/apps/webui/src/components/ui/discord-embed-builder.tsx b/apps/webui/src/components/ui/discord-embed-builder.tsx
index 370c830..d897916 100644
--- a/apps/webui/src/components/ui/discord-embed-builder.tsx
+++ b/apps/webui/src/components/ui/discord-embed-builder.tsx
@@ -4,7 +4,9 @@ import type { WelcomeEmbed } from '@nexumi/shared';
 import { useTranslations } from '@/components/locale-provider';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { PlaceholderHelp } from '@/components/ui/placeholder-help';
 import { Textarea } from '@/components/ui/textarea';
+import type { PlaceholderPresetId } from '@/lib/placeholder-presets';
 import { cn } from '@/lib/utils';
 
 export const DEFAULT_EMBED_COLOR = 0x6366f1;
@@ -54,10 +56,12 @@ function hexToColor(hex: string): number {
 }
 
 function applyPreviewVars(template: string, vars: Record<string, string>): string {
-  return Object.entries(vars).reduce(
+  const withVars = Object.entries(vars).reduce(
     (acc, [key, value]) => acc.replaceAll(`{${key}}`, value),
     template
   );
+  // Show bracket channel mentions as #id in the dashboard preview.
+  return withVars.replace(/\["(\d{17,20})"\]/g, '#$1').replace(/<#(\d{17,20})>/g, '#$1');
 }
 
 interface DiscordEmbedBuilderProps {
@@ -67,6 +71,8 @@ interface DiscordEmbedBuilderProps {
   /** Sample values for preview placeholder substitution (e.g. user → @Alex). */
   previewVars?: Record<string, string>;
   showClearHint?: boolean;
+  /** Which placeholders apply to this embed context. */
+  placeholderPreset?: PlaceholderPresetId;
 }
 
 export function DiscordEmbedBuilder({
@@ -74,7 +80,8 @@ export function DiscordEmbedBuilder({
   onChange,
   className,
   previewVars,
-  showClearHint = true
+  showClearHint = true,
+  placeholderPreset = 'welcome'
 }: DiscordEmbedBuilderProps) {
   const t = useTranslations();
   const draft = value ?? emptyEmbed();
@@ -146,6 +153,7 @@ export function DiscordEmbedBuilder({
         {showClearHint ? (
           <p className="text-xs text-muted-foreground">{t('embedBuilder.clearHint')}</p>
         ) : null}
+        <PlaceholderHelp preset={placeholderPreset} />
         <button
           type="button"
           className="text-xs text-muted-foreground underline-offset-2 hover:underline"
diff --git a/apps/webui/src/components/ui/discord-resource-multi-select.tsx b/apps/webui/src/components/ui/discord-resource-multi-select.tsx
index f980846..7a61c38 100644
--- a/apps/webui/src/components/ui/discord-resource-multi-select.tsx
+++ b/apps/webui/src/components/ui/discord-resource-multi-select.tsx
@@ -29,6 +29,8 @@ interface DiscordResourceMultiSelectProps {
   placeholder?: string;
   disabled?: boolean;
   emptyLabel?: string;
+  /** Show a truncated id hint in the dropdown (useful for Discord snowflakes). */
+  showIdHint?: boolean;
 }
 
 export function DiscordResourceMultiSelect({
@@ -37,7 +39,8 @@ export function DiscordResourceMultiSelect({
   onChange,
   placeholder,
   disabled = false,
-  emptyLabel
+  emptyLabel,
+  showIdHint = true
 }: DiscordResourceMultiSelectProps) {
   const t = useTranslations();
   const [open, setOpen] = useState(false);
@@ -96,9 +99,11 @@ export function DiscordResourceMultiSelect({
                         {option.prefix ?? ''}
                         {option.name}
                       </span>
-                      <span className="ml-auto font-mono text-[10px] text-muted-foreground">
-                        {option.id.slice(-6)}
-                      </span>
+                      {showIdHint ? (
+                        <span className="ml-auto font-mono text-[10px] text-muted-foreground">
+                          {option.id.slice(-6)}
+                        </span>
+                      ) : null}
                     </CommandItem>
                   );
                 })}
diff --git a/apps/webui/src/components/ui/placeholder-help.tsx b/apps/webui/src/components/ui/placeholder-help.tsx
new file mode 100644
index 0000000..8e3ef97
--- /dev/null
+++ b/apps/webui/src/components/ui/placeholder-help.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { Check, ChevronDown, Copy } from 'lucide-react';
+import { useId, useState } from 'react';
+import { toast } from 'sonner';
+import { useTranslations } from '@/components/locale-provider';
+import { Button } from '@/components/ui/button';
+import {
+  PLACEHOLDER_PRESETS,
+  type PlaceholderDefinition,
+  type PlaceholderPresetId
+} from '@/lib/placeholder-presets';
+import { cn } from '@/lib/utils';
+
+interface PlaceholderHelpProps {
+  preset: PlaceholderPresetId;
+  /** Optional extra tokens for one-off fields. */
+  extra?: PlaceholderDefinition[];
+  className?: string;
+  /** Start expanded (default: collapsed). */
+  defaultOpen?: boolean;
+}
+
+export function PlaceholderHelp({
+  preset,
+  extra = [],
+  className,
+  defaultOpen = false
+}: PlaceholderHelpProps) {
+  const t = useTranslations();
+  const panelId = useId();
+  const [open, setOpen] = useState(defaultOpen);
+  const [copiedToken, setCopiedToken] = useState<string | null>(null);
+
+  const items = [...PLACEHOLDER_PRESETS[preset], ...extra];
+  if (items.length === 0) {
+    return null;
+  }
+
+  async function copyToken(token: string) {
+    try {
+      await navigator.clipboard.writeText(token);
+      setCopiedToken(token);
+      toast.success(t('placeholders.copied'));
+      window.setTimeout(() => setCopiedToken((current) => (current === token ? null : current)), 1500);
+    } catch {
+      toast.error(t('placeholders.copyFailed'));
+    }
+  }
+
+  return (
+    <div className={cn('rounded-md border border-border bg-muted/30', className)}>
+      <button
+        type="button"
+        className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-xs font-medium text-muted-foreground hover:text-foreground"
+        aria-expanded={open}
+        aria-controls={panelId}
+        onClick={() => setOpen((prev) => !prev)}
+      >
+        <span>{t('placeholders.toggle')}</span>
+        <ChevronDown className={cn('size-4 shrink-0 transition-transform', open && 'rotate-180')} />
+      </button>
+      {open ? (
+        <div id={panelId} className="space-y-2 border-t border-border px-3 py-2">
+          <p className="text-xs text-muted-foreground">{t('placeholders.hint')}</p>
+          <ul className="space-y-1.5">
+            {items.map((item) => {
+              const isCopied = copiedToken === item.token;
+              return (
+                <li
+                  key={item.token}
+                  className="flex items-start gap-2 rounded-md border border-transparent px-1 py-0.5 hover:border-border hover:bg-background/60"
+                >
+                  <div className="min-w-0 flex-1">
+                    <code className="break-all font-mono text-xs text-foreground">{item.token}</code>
+                    <p className="text-[11px] leading-snug text-muted-foreground">{t(item.descriptionKey)}</p>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="icon"
+                    className="size-7 shrink-0"
+                    aria-label={t('placeholders.copy')}
+                    onClick={() => void copyToken(item.token)}
+                  >
+                    {isCopied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+                  </Button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/apps/webui/src/lib/placeholder-presets.ts b/apps/webui/src/lib/placeholder-presets.ts
new file mode 100644
index 0000000..4868f46
--- /dev/null
+++ b/apps/webui/src/lib/placeholder-presets.ts
@@ -0,0 +1,80 @@
+export type PlaceholderPresetId =
+  | 'welcome'
+  | 'welcomeDm'
+  | 'tags'
+  | 'birthdays'
+  | 'leveling'
+  | 'tempvoice'
+  | 'stats'
+  | 'feeds'
+  | 'scheduler'
+  | 'channelMention';
+
+export interface PlaceholderDefinition {
+  /** Exact token to insert/copy, e.g. `{user}` or `["123…"]`. */
+  token: string;
+  /** i18n key under `placeholders.desc.*`. */
+  descriptionKey: string;
+}
+
+const CHANNEL_MENTIONS: PlaceholderDefinition[] = [
+  {
+    token: '["123456789012345678"]',
+    descriptionKey: 'placeholders.desc.channelBracket'
+  },
+  {
+    token: '<#123456789012345678>',
+    descriptionKey: 'placeholders.desc.channelNative'
+  }
+];
+
+const USER_SERVER: PlaceholderDefinition[] = [
+  { token: '{user}', descriptionKey: 'placeholders.desc.userMention' },
+  { token: '{user.name}', descriptionKey: 'placeholders.desc.userName' },
+  { token: '{user.tag}', descriptionKey: 'placeholders.desc.userTag' },
+  { token: '{user.id}', descriptionKey: 'placeholders.desc.userId' },
+  { token: '{server}', descriptionKey: 'placeholders.desc.server' },
+  { token: '{memberCount}', descriptionKey: 'placeholders.desc.memberCount' }
+];
+
+/**
+ * Placeholders that actually work in each dashboard field context.
+ * Keep this list in sync with the bot renderers.
+ */
+export const PLACEHOLDER_PRESETS: Record<PlaceholderPresetId, PlaceholderDefinition[]> = {
+  welcome: [...USER_SERVER, ...CHANNEL_MENTIONS],
+  welcomeDm: [...USER_SERVER, ...CHANNEL_MENTIONS],
+  tags: [
+    { token: '{user}', descriptionKey: 'placeholders.desc.userMention' },
+    { token: '{user.name}', descriptionKey: 'placeholders.desc.userName' },
+    { token: '{user.tag}', descriptionKey: 'placeholders.desc.userTag' },
+    { token: '{user.id}', descriptionKey: 'placeholders.desc.userId' },
+    { token: '{server}', descriptionKey: 'placeholders.desc.server' },
+    { token: '{args}', descriptionKey: 'placeholders.desc.args' },
+    { token: '{random:a|b|c}', descriptionKey: 'placeholders.desc.random' },
+    ...CHANNEL_MENTIONS
+  ],
+  birthdays: [
+    { token: '{user}', descriptionKey: 'placeholders.desc.userMention' },
+    { token: '{user.name}', descriptionKey: 'placeholders.desc.userName' },
+    { token: '{user.tag}', descriptionKey: 'placeholders.desc.userTag' },
+    { token: '{age}', descriptionKey: 'placeholders.desc.age' }
+  ],
+  leveling: [
+    { token: '{user}', descriptionKey: 'placeholders.desc.userMention' },
+    { token: '{username}', descriptionKey: 'placeholders.desc.username' },
+    { token: '{level}', descriptionKey: 'placeholders.desc.level' }
+  ],
+  tempvoice: [
+    { token: '{user}', descriptionKey: 'placeholders.desc.userDisplayName' },
+    { token: '{user.name}', descriptionKey: 'placeholders.desc.userName' },
+    { token: '{user.tag}', descriptionKey: 'placeholders.desc.userTagPlain' }
+  ],
+  stats: [{ token: '{count}', descriptionKey: 'placeholders.desc.count' }],
+  feeds: [
+    { token: '{title}', descriptionKey: 'placeholders.desc.feedTitle' },
+    { token: '{url}', descriptionKey: 'placeholders.desc.feedUrl' }
+  ],
+  scheduler: [...CHANNEL_MENTIONS],
+  channelMention: [...CHANNEL_MENTIONS]
+};
diff --git a/apps/webui/src/messages/de.json b/apps/webui/src/messages/de.json
index 9d25d4d..4f66e20 100644
--- a/apps/webui/src/messages/de.json
+++ b/apps/webui/src/messages/de.json
@@ -35,6 +35,33 @@
     "clear": "Embed leeren",
     "clearHint": "Leere Felder speichern kein Embed."
   },
+  "placeholders": {
+    "toggle": "Verfügbare Platzhalter anzeigen",
+    "hint": "Zum Einfügen auf Kopieren tippen. Nur die hier gelisteten Platzhalter funktionieren in diesem Feld.",
+    "copy": "Platzhalter kopieren",
+    "copied": "Platzhalter kopiert",
+    "copyFailed": "Kopieren fehlgeschlagen",
+    "desc": {
+      "userMention": "Erwähnung des Mitglieds",
+      "userName": "Anzeigename des Mitglieds",
+      "userTag": "Benutzername/Tag des Mitglieds",
+      "userId": "Discord-ID des Mitglieds",
+      "userDisplayName": "Anzeigename (ohne Erwähnung)",
+      "userTagPlain": "Benutzername ohne Erwähnung",
+      "username": "Anzeigename des Mitglieds",
+      "server": "Servername",
+      "memberCount": "Aktuelle Mitgliederzahl",
+      "args": "Argumente nach dem Tag-Befehl",
+      "random": "Zufällige Wahl aus Optionen (mit | getrennt)",
+      "age": "Alter in Jahren (nur wenn Geburtsjahr gesetzt)",
+      "level": "Erreichtes Level",
+      "count": "Aktueller Statistik-Wert",
+      "feedTitle": "Titel des Feed-Eintrags",
+      "feedUrl": "URL des Feed-Eintrags",
+      "channelBracket": "Kanal-Erwähnung (Dashboard-Schreibweise, ID ersetzen)",
+      "channelNative": "Kanal-Erwähnung (Discord-Syntax, ID ersetzen)"
+    }
+  },
   "nav": {
     "dashboard": "Dashboard",
     "overview": "Übersicht",
@@ -268,11 +295,45 @@
       "retentionLabel": "Aufbewahrung (Tage)",
       "retentionHint": "Cases und Dashboard-Audit älter als X Tage löschen. 0 = unbegrenzt.",
       "channelsTitle": "Event-Kanal-Zuordnung",
-      "channelsDescription": "Lege für jeden Event-Typ einen eigenen Log-Kanal fest.",
+      "channelsDescription": "Wähle einen Log-Kanal und ordne ihm einen oder mehrere Event-Typen zu.",
       "channelsEmpty": "Keine Event-Kanal-Zuordnungen konfiguriert.",
+      "channelsHint": "Jeder Event-Typ kann nur einem Kanal zugeordnet werden. Eine neue Auswahl entfernt ihn automatisch von anderen Zeilen.",
       "eventType": "Event-Typ",
-      "channelId": "Kanal-ID",
-      "addMapping": "Zuordnung hinzufügen"
+      "eventTypesLabel": "Event-Typen",
+      "eventTypesPlaceholder": "Event-Typen suchen…",
+      "channelId": "Log-Kanal",
+      "addMapping": "Zuordnung hinzufügen",
+      "errors": {
+        "duplicateEventType": "Ein Event-Typ ist mehrfach zugeordnet. Bitte prüfe die Auswahl."
+      },
+      "eventTypes": {
+        "MESSAGE_EDIT": "Nachricht bearbeitet",
+        "MESSAGE_DELETE": "Nachricht gelöscht",
+        "MESSAGE_BULK_DELETE": "Nachrichten massenhaft gelöscht",
+        "MEMBER_JOIN": "Mitglied beigetreten",
+        "MEMBER_LEAVE": "Mitglied verlassen",
+        "MEMBER_BAN": "Mitglied gebannt",
+        "MEMBER_UNBAN": "Mitglied entbannt",
+        "MEMBER_UPDATE": "Mitglied aktualisiert",
+        "CHANNEL_CREATE": "Kanal erstellt",
+        "CHANNEL_DELETE": "Kanal gelöscht",
+        "CHANNEL_UPDATE": "Kanal aktualisiert",
+        "VOICE_JOIN": "Voice beigetreten",
+        "VOICE_LEAVE": "Voice verlassen",
+        "VOICE_MOVE": "Voice verschoben",
+        "INVITE_CREATE": "Invite erstellt",
+        "EMOJI_CREATE": "Emoji erstellt",
+        "EMOJI_UPDATE": "Emoji aktualisiert",
+        "EMOJI_DELETE": "Emoji gelöscht",
+        "STICKER_CREATE": "Sticker erstellt",
+        "STICKER_UPDATE": "Sticker aktualisiert",
+        "STICKER_DELETE": "Sticker gelöscht",
+        "THREAD_CREATE": "Thread erstellt",
+        "THREAD_UPDATE": "Thread aktualisiert",
+        "THREAD_DELETE": "Thread gelöscht",
+        "GUILD_UPDATE": "Server aktualisiert",
+        "MOD_ACTION": "Moderations-Aktion"
+      }
     },
     "welcome": {
       "welcomeTitle": "Willkommen",
@@ -287,7 +348,7 @@
       },
       "welcomeContent": "Nachrichtentext",
       "contentPlaceholder": "Willkommen {user} auf {server}!",
-      "placeholdersHint": "Verfügbare Platzhalter: {user}, {user.name}, {user.tag}, {user.id}, {server}, {memberCount}",
+      "placeholdersHint": "Verfügbare Platzhalter: siehe Liste unten.",
       "welcomeEmbed": "Embed",
       "welcomeDmEnabled": "Willkommens-DM aktiviert",
       "dmContentPlaceholder": "Optionale private Nachricht an neue Mitglieder",
diff --git a/apps/webui/src/messages/en.json b/apps/webui/src/messages/en.json
index 81cb9ac..896a3a3 100644
--- a/apps/webui/src/messages/en.json
+++ b/apps/webui/src/messages/en.json
@@ -35,6 +35,33 @@
     "clear": "Clear embed",
     "clearHint": "Empty fields do not save an embed."
   },
+  "placeholders": {
+    "toggle": "Show available placeholders",
+    "hint": "Tap copy to insert. Only the placeholders listed here work in this field.",
+    "copy": "Copy placeholder",
+    "copied": "Placeholder copied",
+    "copyFailed": "Could not copy",
+    "desc": {
+      "userMention": "Mention of the member",
+      "userName": "Member display name",
+      "userTag": "Member username/tag",
+      "userId": "Member Discord ID",
+      "userDisplayName": "Display name (no mention)",
+      "userTagPlain": "Username without mention",
+      "username": "Member display name",
+      "server": "Server name",
+      "memberCount": "Current member count",
+      "args": "Arguments after the tag command",
+      "random": "Random choice from options (separated by |)",
+      "age": "Age in years (only if birth year is set)",
+      "level": "Reached level",
+      "count": "Current stats value",
+      "feedTitle": "Feed item title",
+      "feedUrl": "Feed item URL",
+      "channelBracket": "Channel mention (dashboard syntax — replace the ID)",
+      "channelNative": "Channel mention (Discord syntax — replace the ID)"
+    }
+  },
   "nav": {
     "dashboard": "Dashboard",
     "overview": "Overview",
@@ -268,11 +295,45 @@
       "retentionLabel": "Retention (days)",
       "retentionHint": "Delete cases and dashboard audit older than X days. 0 = keep forever.",
       "channelsTitle": "Event-channel mapping",
-      "channelsDescription": "Assign a dedicated log channel for each event type.",
+      "channelsDescription": "Pick a log channel and assign one or more event types to it.",
       "channelsEmpty": "No event-channel mappings configured.",
+      "channelsHint": "Each event type can only map to one channel. Selecting it here removes it from other rows.",
       "eventType": "Event type",
-      "channelId": "Channel ID",
-      "addMapping": "Add mapping"
+      "eventTypesLabel": "Event types",
+      "eventTypesPlaceholder": "Search event types…",
+      "channelId": "Log channel",
+      "addMapping": "Add mapping",
+      "errors": {
+        "duplicateEventType": "An event type is assigned more than once. Please check your selection."
+      },
+      "eventTypes": {
+        "MESSAGE_EDIT": "Message edited",
+        "MESSAGE_DELETE": "Message deleted",
+        "MESSAGE_BULK_DELETE": "Messages bulk deleted",
+        "MEMBER_JOIN": "Member joined",
+        "MEMBER_LEAVE": "Member left",
+        "MEMBER_BAN": "Member banned",
+        "MEMBER_UNBAN": "Member unbanned",
+        "MEMBER_UPDATE": "Member updated",
+        "CHANNEL_CREATE": "Channel created",
+        "CHANNEL_DELETE": "Channel deleted",
+        "CHANNEL_UPDATE": "Channel updated",
+        "VOICE_JOIN": "Voice joined",
+        "VOICE_LEAVE": "Voice left",
+        "VOICE_MOVE": "Voice moved",
+        "INVITE_CREATE": "Invite created",
+        "EMOJI_CREATE": "Emoji created",
+        "EMOJI_UPDATE": "Emoji updated",
+        "EMOJI_DELETE": "Emoji deleted",
+        "STICKER_CREATE": "Sticker created",
+        "STICKER_UPDATE": "Sticker updated",
+        "STICKER_DELETE": "Sticker deleted",
+        "THREAD_CREATE": "Thread created",
+        "THREAD_UPDATE": "Thread updated",
+        "THREAD_DELETE": "Thread deleted",
+        "GUILD_UPDATE": "Server updated",
+        "MOD_ACTION": "Moderation action"
+      }
     },
     "welcome": {
       "welcomeTitle": "Welcome",
@@ -287,7 +348,7 @@
       },
       "welcomeContent": "Message content",
       "contentPlaceholder": "Welcome {user} to {server}!",
-      "placeholdersHint": "Available placeholders: {user}, {user.name}, {user.tag}, {user.id}, {server}, {memberCount}",
+      "placeholdersHint": "Available placeholders: see the list below.",
       "welcomeEmbed": "Embed",
       "welcomeDmEnabled": "Welcome DM enabled",
       "dmContentPlaceholder": "Optional private message to new members",
diff --git a/docs/PHASE-TRACKING.md b/docs/PHASE-TRACKING.md
index 7439fe8..8075e45 100644
--- a/docs/PHASE-TRACKING.md
+++ b/docs/PHASE-TRACKING.md
@@ -141,6 +141,33 @@
 - [ ] Tag mit Antworttyp Embed erstellen/bearbeiten
 - [ ] Geplante Nachricht mit Embed (optional mit Text) anlegen
 
+## Post-Phase – Logging Multi-Event pro Kanal (Status: implementiert)
+
+### Abgeschlossen (Code)
+
+- Logging-UI: pro Log-Kanal mehrere Event-Typen per Multi-Select
+- Bestehende 1:1-Mappings werden beim Laden nach Kanal gruppiert; Speichern expandiert wieder auf `LogChannel`-Zeilen
+- Event-Typen sind exklusiv (DB `@@unique([guildId, eventType])`) – Auswahl in einer Zeile entfernt sie aus anderen
+
+### Manuell testen
+
+- [ ] Mehrere Events einem Kanal zuweisen und speichern
+- [ ] Event von Kanal A nach Kanal B umhängen (verschwindet bei A)
+- [ ] Bot schreibt Logs der gewählten Events in den richtigen Kanal
+
+## Post-Phase – Platzhalter-Hilfe (Status: implementiert)
+
+### Abgeschlossen (Code)
+
+- Aufklappbare `PlaceholderHelp`-Komponente mit Kopieren pro Token
+- Kontextspezifische Presets (Welcome, Tags, Birthdays, Leveling, TempVoice, Stats, Feeds, Scheduler)
+- Welcome-DM nutzt jetzt dieselben Platzhalter wie Welcome-Text (nicht nur `{user}`)
+
+### Manuell testen
+
+- [ ] Welcome: Liste aufklappen, Platzhalter kopieren, in Embed/Text einfügen
+- [ ] Tags/Birthdays/Leveling/Stats/Feeds/Scheduler: nur die jeweiligen Tokens sichtbar
+
 ## Nächster geplanter Schritt
 
 - Deploy auf Traefik-Server manuell verifizieren; danach ggf. `deploy` → `main` mergen (nur auf Freigabe).
diff --git a/packages/shared/src/phase2.test.ts b/packages/shared/src/phase2.test.ts
index f820795..b56577b 100644
--- a/packages/shared/src/phase2.test.ts
+++ b/packages/shared/src/phase2.test.ts
@@ -17,6 +17,16 @@ describe('phase2 helpers', () => {
     expect(result).toBe('Hello <@1> on Nexumi');
   });
 
+  it('expands bracket channel mentions', () => {
+    const result = applyWelcomePlaceholders('Join ["123456789012345678"] please', {});
+    expect(result).toBe('Join <#123456789012345678> please');
+  });
+
+  it('keeps native discord channel mentions', () => {
+    const result = applyWelcomePlaceholders('Join <#123456789012345678> please', {});
+    expect(result).toBe('Join <#123456789012345678> please');
+  });
+
   it('detects discord invites', () => {
     expect(isDiscordInvite('join https://discord.gg/test')).toBe(true);
     expect(isDiscordInvite('hello world')).toBe(false);
diff --git a/packages/shared/src/phase2.ts b/packages/shared/src/phase2.ts
index 852c3bb..ee67642 100644
--- a/packages/shared/src/phase2.ts
+++ b/packages/shared/src/phase2.ts
@@ -162,14 +162,23 @@ export const WELCOME_PLACEHOLDERS = [
   '{memberCount}'
 ] as const;
 
+/**
+ * Expands dashboard-friendly channel mentions `["123…"]` into Discord's
+ * native `<#123…>` mention format. Raw `<#id>` mentions are left untouched.
+ */
+export function expandBracketChannelMentions(template: string): string {
+  return template.replace(/\["(\d{17,20})"\]/g, '<#$1>');
+}
+
 export function applyWelcomePlaceholders(
   template: string,
   vars: Record<string, string | number>
 ): string {
-  return Object.entries(vars).reduce(
+  const withVars = Object.entries(vars).reduce(
     (acc, [name, value]) => acc.replaceAll(`{${name}}`, String(value)),
     template
   );
+  return expandBracketChannelMentions(withVars);
 }
 
 export function countEmojis(content: string): number {
diff --git a/packages/shared/src/phase4.ts b/packages/shared/src/phase4.ts
index 0b8b9b3..bf9ef8d 100644
--- a/packages/shared/src/phase4.ts
+++ b/packages/shared/src/phase4.ts
@@ -38,14 +38,17 @@ export const SuggestionStatusSchema = z.enum([
 ]);
 export type SuggestionStatus = z.infer<typeof SuggestionStatusSchema>;
 
+import { expandBracketChannelMentions } from './phase2.js';
+
 export function applyTagPlaceholders(
   template: string,
   vars: Record<string, string>
 ): string {
-  return Object.entries(vars).reduce(
+  const withVars = Object.entries(vars).reduce(
     (acc, [key, value]) => acc.replaceAll(`{${key}}`, value),
     template
   );
+  return expandBracketChannelMentions(withVars);
 }
 
 export function pickRandomWinners<T>(items: T[], count: number): T[] {