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

@@ -1,6 +1,7 @@
 'use client';
 
 import type { VerificationConfigDashboard } from '@nexumi/shared';
+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';
@@ -47,6 +48,7 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
             <CardDescription>{t('modulePages.verification.description')}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4">
+            <FieldAnchor id="field-verify-enabled">
             <div className="flex items-center justify-between rounded-md border border-border p-4">
               <Label>{t('modulePages.verification.enabledLabel')}</Label>
               <Switch
@@ -54,8 +56,10 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
                 onCheckedChange={(checked) => setValue((prev) => ({ ...prev, enabled: checked }))}
               />
             </div>
+            </FieldAnchor>
 
             <div className="grid gap-4 sm:grid-cols-2">
+              <FieldAnchor id="field-verify-mode">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.mode')}</Label>
                 <Select
@@ -73,6 +77,8 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
                   </SelectContent>
                 </Select>
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-verify-fail">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.failAction')}</Label>
                 <Select
@@ -91,9 +97,11 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
                   </SelectContent>
                 </Select>
               </div>
+              </FieldAnchor>
             </div>
 
             <div className="grid gap-4 sm:grid-cols-3">
+              <FieldAnchor id="field-verify-channel">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.channelId')}</Label>
                 <Input
@@ -102,6 +110,8 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
                   placeholder="123456789012345678"
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-verify-role">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.verifiedRoleId')}</Label>
                 <Input
@@ -110,6 +120,8 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
                   placeholder="123456789012345678"
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-verify-unverified">
               <div className="space-y-2">
                 <Label>{t('modulePages.verification.unverifiedRoleId')}</Label>
                 <Input
@@ -118,8 +130,10 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
                   placeholder="123456789012345678"
                 />
               </div>
+              </FieldAnchor>
             </div>
 
+            <FieldAnchor id="field-verify-age">
             <div className="space-y-2">
               <Label>{t('modulePages.verification.minAccountAgeDays')}</Label>
               <Input
@@ -132,6 +146,7 @@ export function VerificationForm({ guildId, initialValue }: VerificationFormProp
                 }
               />
             </div>
+            </FieldAnchor>
           </CardContent>
         </Card>
       )}