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