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/layout/dashboard-shell.tsx

@@ -1,8 +1,16 @@
+'use client';
+
 import type { DashboardGuild, SessionUser } from '@nexumi/shared';
-import type { ReactNode } from 'react';
-import { ServerSwitcher } from './server-switcher';
-import { Sidebar } from './sidebar';
-import { UserMenu } from './user-menu';
+import { Menu } from 'lucide-react';
+import { useState, type ReactNode } from 'react';
+import { DashboardCommandPalette } from '@/components/layout/dashboard-command-palette';
+import { HashScroll } from '@/components/layout/field-anchor';
+import { ServerSwitcher } from '@/components/layout/server-switcher';
+import { Sidebar, SidebarNav } from '@/components/layout/sidebar';
+import { UserMenu } from '@/components/layout/user-menu';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { useTranslations } from '@/components/locale-provider';
 
 interface DashboardShellProps {
   guildId: string;
@@ -21,15 +29,36 @@ export function DashboardShell({
   showOwnerLink = false,
   children
 }: DashboardShellProps) {
+  const t = useTranslations();
+  const [mobileOpen, setMobileOpen] = useState(false);
+
   return (
-    <div className="flex min-h-screen">
+    <div className="flex min-h-screen bg-background">
+      <HashScroll />
       <Sidebar guildId={guildId} />
-      <div className="flex flex-1 flex-col">
-        <header className="flex h-14 items-center justify-between border-b border-border px-6">
+      <div className="flex min-w-0 flex-1 flex-col">
+        <header className="sticky top-0 z-40 flex h-14 items-center gap-3 border-b border-border bg-background/80 px-4 backdrop-blur-md supports-[backdrop-filter]:bg-background/70 sm:px-6">
+          <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
+            <SheetTrigger asChild>
+              <Button variant="ghost" size="icon" className="lg:hidden" aria-label={t('search.openNav')}>
+                <Menu className="size-5" />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side="left" className="p-0">
+              <SheetTitle className="sr-only">{t('nav.dashboard')}</SheetTitle>
+              <SidebarNav guildId={guildId} onNavigate={() => setMobileOpen(false)} />
+            </SheetContent>
+          </Sheet>
+
           <ServerSwitcher currentGuild={currentGuild} otherGuilds={otherGuilds} />
-          <UserMenu user={user} showOwnerLink={showOwnerLink} />
+          <div className="ml-auto flex min-w-0 items-center gap-3">
+            <div className="min-w-0 flex-1 sm:flex-initial">
+              <DashboardCommandPalette guildId={guildId} />
+            </div>
+            <UserMenu user={user} showOwnerLink={showOwnerLink} />
+          </div>
         </header>
-        <main className="flex-1 px-6 py-8">
+        <main className="flex-1 px-4 py-6 sm:px-6 sm:py-8">
           <div className="mx-auto w-full max-w-[1200px]">{children}</div>
         </main>
       </div>