Add new features and enhancements to the WebUI and dashboard components

- Updated package.json to include new dependencies: `@radix-ui/react-dialog` and `cmdk`.
- Enhanced global styles in globals.css for improved visual depth in dark mode.
- Refactored dashboard page components to improve layout and accessibility, including new icons and responsive design adjustments.
- Implemented suspense handling in commands page for better loading states.
- Improved sidebar navigation with new icons and mobile responsiveness.
- Added FieldAnchor components across various forms for better accessibility and structure.
- Enhanced commands manager with search parameter handling for improved user experience.
- Updated multiple module forms to include FieldAnchor for consistent layout and accessibility.

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

@@ -2,6 +2,7 @@
 
 import type { BirthdayConfigDashboard } from '@nexumi/shared';
 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 { Input } from '@/components/ui/input';
@@ -48,28 +49,38 @@ export function BirthdaysForm({ guildId, initialValue }: BirthdaysFormProps) {
             <CardDescription>{t('modulePages.birthdays.description')}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
+            <FieldAnchor id="field-birthdays-enabled">
             <div className="flex items-center justify-between rounded-md border border-border p-4">
               <Label>{t('modulePages.birthdays.enabledLabel')}</Label>
               <Switch checked={value.enabled} onCheckedChange={(enabled) => setValue((prev) => ({ ...prev, enabled }))} />
             </div>
+            </FieldAnchor>
             <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" />
               </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" />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-birthdays-timezone">
               <div className="space-y-2">
                 <Label htmlFor={timezoneId}>{t('modulePages.birthdays.timezone')}</Label>
                 <Input id={timezoneId} value={value.timezone} onChange={(event) => setValue((prev) => ({ ...prev, timezone: event.target.value }))} placeholder="Europe/Berlin" />
               </div>
+              </FieldAnchor>
             </div>
+            <FieldAnchor id="field-birthdays-message">
             <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')} />
             </div>
+            </FieldAnchor>
           </CardContent>
         </Card>
       )}