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/starboard-form.tsx

@@ -2,6 +2,7 @@
 
 import type { StarboardConfigDashboard } 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';
@@ -83,33 +84,45 @@ export function StarboardForm({ guildId, initialValue }: StarboardFormProps) {
             <CardDescription>{t('modulePages.starboard.description')}</CardDescription>
           </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>
+            </FieldAnchor>
             <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" />
               </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>
+              </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>
+              </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>
+            </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>
             </div>
+            </FieldAnchor>
           </CardContent>
         </Card>
       )}