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

@@ -3,6 +3,7 @@
 import type { LogChannelMapping, LogEventTypeDashboard, LoggingConfigDashboard } from '@nexumi/shared';
 import { Plus, Trash2 } from 'lucide-react';
 import { useId } 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';
@@ -129,6 +130,7 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
               <CardDescription>{t('modulePages.logging.description')}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
+              <FieldAnchor id="field-logging-enabled">
               <div className="flex items-center justify-between rounded-md border border-border p-4">
                 <Label>{t('modulePages.logging.enabledLabel')}</Label>
                 <Switch
@@ -136,6 +138,8 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                   onCheckedChange={(checked) => setValue((prev) => ({ ...prev, enabled: checked }))}
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-logging-ignore-bots">
               <div className="flex items-center justify-between rounded-md border border-border p-4">
                 <Label>{t('modulePages.logging.ignoreBotsLabel')}</Label>
                 <Switch
@@ -143,6 +147,8 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                   onCheckedChange={(checked) => setValue((prev) => ({ ...prev, ignoreBots: checked }))}
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-logging-ignored-channels">
               <div className="space-y-2">
                 <Label htmlFor={ignoredChannelsId}>{t('modulePages.logging.ignoredChannelsLabel')}</Label>
                 <Textarea
@@ -153,6 +159,8 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                 />
                 <p className="text-xs text-muted-foreground">{t('modulePages.logging.idsHint')}</p>
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-logging-ignored-roles">
               <div className="space-y-2">
                 <Label htmlFor={ignoredRolesId}>{t('modulePages.logging.ignoredRolesLabel')}</Label>
                 <Textarea
@@ -163,6 +171,8 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                 />
                 <p className="text-xs text-muted-foreground">{t('modulePages.logging.idsHint')}</p>
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-logging-retention">
               <div className="space-y-2">
                 <Label htmlFor="logging-retention">{t('modulePages.logging.retentionLabel')}</Label>
                 <Input
@@ -178,9 +188,11 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
                 />
                 <p className="text-xs text-muted-foreground">{t('modulePages.logging.retentionHint')}</p>
               </div>
+              </FieldAnchor>
             </CardContent>
           </Card>
 
+          <FieldAnchor id="field-logging-channels">
           <Card>
             <CardHeader>
               <CardTitle>{t('modulePages.logging.channelsTitle')}</CardTitle>
@@ -268,6 +280,7 @@ export function LoggingForm({ guildId, initialValue }: LoggingFormProps) {
               </Button>
             </CardContent>
           </Card>
+          </FieldAnchor>
         </div>
       )}
     </SettingsForm>