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

@@ -2,6 +2,7 @@
 
 import type { WelcomeConfigDashboard } 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';
@@ -116,6 +117,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
               <CardDescription>{t('modulePages.welcome.welcomeDescription')}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
+              <FieldAnchor id="field-welcome-enabled">
               <div className="flex items-center justify-between rounded-md border border-border p-4">
                 <Label>{t('modulePages.welcome.welcomeEnabledLabel')}</Label>
                 <Switch
@@ -123,7 +125,9 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   onCheckedChange={(checked) => setValue((prev) => ({ ...prev, welcomeEnabled: checked }))}
                 />
               </div>
+              </FieldAnchor>
               <div className="grid gap-4 sm:grid-cols-2">
+                <FieldAnchor id="field-welcome-channel">
                 <div className="space-y-2">
                   <Label>{t('modulePages.welcome.welcomeChannelId')}</Label>
                   <Input
@@ -132,6 +136,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                     placeholder="123456789012345678"
                   />
                 </div>
+                </FieldAnchor>
+                <FieldAnchor id="field-welcome-type">
                 <div className="space-y-2">
                   <Label>{t('modulePages.welcome.welcomeType')}</Label>
                   <Select
@@ -150,7 +156,9 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                     </SelectContent>
                   </Select>
                 </div>
+                </FieldAnchor>
               </div>
+              <FieldAnchor id="field-welcome-content">
               <div className="space-y-2">
                 <Label>{t('modulePages.welcome.welcomeContent')}</Label>
                 <Textarea
@@ -160,6 +168,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                 />
                 <p className="text-xs text-muted-foreground">{t('modulePages.welcome.placeholdersHint')}</p>
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-welcome-embed">
               <div className="space-y-2">
                 <Label>{t('modulePages.welcome.welcomeEmbed')}</Label>
                 <Textarea
@@ -170,6 +180,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   placeholder='{ "title": "Welcome!", "color": 6591981 }'
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-welcome-dm">
               <div className="space-y-2">
                 <div className="flex items-center justify-between rounded-md border border-border p-4">
                   <Label>{t('modulePages.welcome.welcomeDmEnabled')}</Label>
@@ -184,6 +196,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   placeholder={t('modulePages.welcome.dmContentPlaceholder')}
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-welcome-user-autoroles">
               <div className="space-y-2">
                 <Label htmlFor={userAutorolesId}>{t('modulePages.welcome.userAutoroles')}</Label>
                 <Textarea
@@ -193,6 +207,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-welcome-bot-autoroles">
               <div className="space-y-2">
                 <Label htmlFor={botAutorolesId}>{t('modulePages.welcome.botAutoroles')}</Label>
                 <Textarea
@@ -202,7 +218,9 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   placeholder={t('modulePages.logging.idsPlaceholder')}
                 />
               </div>
+              </FieldAnchor>
               <div className="grid gap-4 sm:grid-cols-2">
+                <FieldAnchor id="field-welcome-image-title">
                 <div className="space-y-2">
                   <Label>{t('modulePages.welcome.imageTitle')}</Label>
                   <Input
@@ -210,6 +228,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                     onChange={(event) => setValue((prev) => ({ ...prev, imageTitle: event.target.value || null }))}
                   />
                 </div>
+                </FieldAnchor>
+                <FieldAnchor id="field-welcome-image-subtitle">
                 <div className="space-y-2">
                   <Label>{t('modulePages.welcome.imageSubtitle')}</Label>
                   <Input
@@ -217,6 +237,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                     onChange={(event) => setValue((prev) => ({ ...prev, imageSubtitle: event.target.value || null }))}
                   />
                 </div>
+                </FieldAnchor>
               </div>
             </CardContent>
           </Card>
@@ -227,6 +248,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
               <CardDescription>{t('modulePages.welcome.leaveDescription')}</CardDescription>
             </CardHeader>
             <CardContent className="space-y-4">
+              <FieldAnchor id="field-leave-enabled">
               <div className="flex items-center justify-between rounded-md border border-border p-4">
                 <Label>{t('modulePages.welcome.leaveEnabledLabel')}</Label>
                 <Switch
@@ -234,6 +256,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   onCheckedChange={(checked) => setValue((prev) => ({ ...prev, leaveEnabled: checked }))}
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-leave-channel">
               <div className="space-y-2">
                 <Label>{t('modulePages.welcome.leaveChannelId')}</Label>
                 <Input
@@ -242,6 +266,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   placeholder="123456789012345678"
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-leave-content">
               <div className="space-y-2">
                 <Label>{t('modulePages.welcome.leaveContent')}</Label>
                 <Textarea
@@ -250,6 +276,8 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   placeholder={t('modulePages.welcome.contentPlaceholder')}
                 />
               </div>
+              </FieldAnchor>
+              <FieldAnchor id="field-leave-embed">
               <div className="space-y-2">
                 <Label>{t('modulePages.welcome.leaveEmbed')}</Label>
                 <Textarea
@@ -260,6 +288,7 @@ export function WelcomeForm({ guildId, initialValue }: WelcomeFormProps) {
                   placeholder='{ "title": "Goodbye", "color": 15158332 }'
                 />
               </div>
+              </FieldAnchor>
             </CardContent>
           </Card>
         </div>