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

@@ -2,6 +2,7 @@
 
 import type { LevelingConfigDashboard } 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';
@@ -126,6 +127,7 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
               <CardDescription>{t('modulePages.leveling.description')}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
+              <FieldAnchor id="field-leveling-enabled">
               <div className="flex items-center justify-between rounded-md border border-border p-4">
                 <Label>{t('modulePages.leveling.enabledLabel')}</Label>
                 <Switch
@@ -133,8 +135,10 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   onCheckedChange={(checked) => setValue((prev) => ({ ...prev, enabled: checked }))}
                 />
               </div>
+              </FieldAnchor>
 
               <div className="grid gap-4 sm:grid-cols-3">
+                <FieldAnchor id="field-leveling-text-min">
                 <div className="space-y-2">
                   <Label>{t('modulePages.leveling.textXpMin')}</Label>
                   <Input
@@ -144,6 +148,8 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                     onChange={(event) => setValue((prev) => ({ ...prev, textXpMin: Number(event.target.value) || 1 }))}
                   />
                 </div>
+                </FieldAnchor>
+                <FieldAnchor id="field-leveling-text-max">
                 <div className="space-y-2">
                   <Label>{t('modulePages.leveling.textXpMax')}</Label>
                   <Input
@@ -153,6 +159,8 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                     onChange={(event) => setValue((prev) => ({ ...prev, textXpMax: Number(event.target.value) || 1 }))}
                   />
                 </div>
+                </FieldAnchor>
+                <FieldAnchor id="field-leveling-cooldown">
                 <div className="space-y-2">
                   <Label>{t('modulePages.leveling.textCooldownSeconds')}</Label>
                   <Input
@@ -164,8 +172,10 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                     }
                   />
                 </div>
+                </FieldAnchor>
               </div>
 
+              <FieldAnchor id="field-leveling-voice">
               <div className="space-y-2">
                 <Label>{t('modulePages.leveling.voiceXpPerMinute')}</Label>
                 <Input
@@ -178,7 +188,9 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   }
                 />
               </div>
+              </FieldAnchor>
 
+              <FieldAnchor id="field-leveling-no-xp-channels">
               <div className="space-y-2">
                 <Label htmlFor={noXpChannelsId}>{t('modulePages.leveling.noXpChannels')}</Label>
                 <Textarea
@@ -188,6 +200,8 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-leveling-no-xp-roles">
               <div className="space-y-2">
                 <Label htmlFor={noXpRolesId}>{t('modulePages.leveling.noXpRoles')}</Label>
                 <Textarea
@@ -197,8 +211,10 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
               </div>
+              </FieldAnchor>
 
               <div className="grid gap-4 sm:grid-cols-2">
+                <FieldAnchor id="field-leveling-role-multipliers">
                 <div className="space-y-2">
                   <Label>{t('modulePages.leveling.roleMultipliers')}</Label>
                   <Textarea
@@ -210,6 +226,8 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   />
                   <p className="text-xs text-muted-foreground">{t('modulePages.leveling.multiplierHint')}</p>
                 </div>
+                </FieldAnchor>
+                <FieldAnchor id="field-leveling-channel-multipliers">
                 <div className="space-y-2">
                   <Label>{t('modulePages.leveling.channelMultipliers')}</Label>
                   <Textarea
@@ -221,10 +239,12 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   />
                   <p className="text-xs text-muted-foreground">{t('modulePages.leveling.multiplierHint')}</p>
                 </div>
+                </FieldAnchor>
               </div>
             </CardContent>
           </Card>
 
+          <FieldAnchor id="field-leveling-levelup">
           <Card>
             <CardHeader>
               <CardTitle>{t('modulePages.leveling.levelUpTitle')}</CardTitle>
@@ -266,6 +286,7 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   placeholder="Congrats {user}, you reached level {level}!"
                 />
               </div>
+              <FieldAnchor id="field-leveling-stack">
               <div className="flex items-center justify-between rounded-md border border-border p-4">
                 <Label>{t('modulePages.leveling.stackRewards')}</Label>
                 <Switch
@@ -273,9 +294,12 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
                   onCheckedChange={(checked) => setValue((prev) => ({ ...prev, stackRewards: checked }))}
                 />
               </div>
+              </FieldAnchor>
             </CardContent>
           </Card>
+          </FieldAnchor>
 
+          <FieldAnchor id="field-leveling-rank-card">
           <Card>
             <CardHeader>
               <CardTitle>{t('modulePages.leveling.rankCardTitle')}</CardTitle>
@@ -313,6 +337,7 @@ export function LevelingForm({ guildId, initialValue }: LevelingFormProps) {
               </div>
             </CardContent>
           </Card>
+          </FieldAnchor>
         </div>
       )}
     </SettingsForm>