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-command-palette.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { Search, Terminal, Settings2, LayoutGrid } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslations } from '@/components/locale-provider';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command';
+import {
+  OWNER_NAV_ENTRIES,
+  buildGuildSearchHref,
+  buildGuildSearchIndex,
+  type SearchIndexEntry,
+  type SearchItemKind
+} from '@/lib/dashboard-search-index';
+
+function kindIcon(kind: SearchItemKind) {
+  switch (kind) {
+    case 'command':
+      return Terminal;
+    case 'setting':
+      return Settings2;
+    default:
+      return LayoutGrid;
+  }
+}
+
+interface DashboardCommandPaletteProps {
+  guildId?: string;
+  mode?: 'guild' | 'owner';
+}
+
+export function DashboardCommandPalette({ guildId, mode = 'guild' }: DashboardCommandPaletteProps) {
+  const t = useTranslations();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+
+  const entries = useMemo(() => {
+    if (mode === 'owner') {
+      return OWNER_NAV_ENTRIES;
+    }
+    return buildGuildSearchIndex();
+  }, [mode]);
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+        event.preventDefault();
+        setOpen((prev) => !prev);
+      }
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, []);
+
+  const resolveLabel = useCallback(
+    (entry: SearchIndexEntry) => {
+      if (entry.labelOverride) {
+        return entry.labelOverride;
+      }
+      if (entry.labelKey) {
+        return t(entry.labelKey);
+      }
+      return entry.id;
+    },
+    [t]
+  );
+
+  function navigateTo(entry: SearchIndexEntry) {
+    setOpen(false);
+    if (mode === 'owner') {
+      router.push(entry.href);
+      return;
+    }
+    if (!guildId) {
+      return;
+    }
+    const href = buildGuildSearchHref(guildId, entry);
+    router.push(href);
+    if (entry.hash) {
+      window.setTimeout(() => {
+        document.getElementById(entry.hash!)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }, 250);
+    }
+  }
+
+  const pages = entries.filter((e) => e.kind === 'page');
+  const commands = entries.filter((e) => e.kind === 'command');
+  const settings = entries.filter((e) => e.kind === 'setting');
+
+  const isMac =
+    typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className="inline-flex h-9 w-full max-w-xs items-center gap-2 rounded-md border border-input bg-background/60 px-3 text-sm text-muted-foreground shadow-sm transition-colors hover:bg-accent/50 hover:text-foreground"
+      >
+        <Search className="size-4 shrink-0" />
+        <span className="flex-1 truncate text-left">{t('search.placeholder')}</span>
+        <kbd className="pointer-events-none hidden h-5 select-none items-center gap-1 rounded border border-border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground sm:inline-flex">
+          {isMac ? '⌘' : 'Ctrl'}K
+        </kbd>
+      </button>
+
+      <CommandDialog open={open} onOpenChange={setOpen} title={t('search.title')}>
+        <CommandInput placeholder={t('search.placeholder')} />
+        <CommandList>
+          <CommandEmpty>{t('search.empty')}</CommandEmpty>
+          {pages.length > 0 ? (
+            <CommandGroup heading={t('search.groups.pages')}>
+              {pages.map((entry) => {
+                const Icon = kindIcon(entry.kind);
+                const label = resolveLabel(entry);
+                return (
+                  <CommandItem
+                    key={entry.id}
+                    value={`${label} ${entry.keywords?.join(' ') ?? ''} ${entry.labelKey ?? ''}`}
+                    onSelect={() => navigateTo(entry)}
+                  >
+                    <Icon className="size-4 text-muted-foreground" />
+                    <span>{label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          ) : null}
+          {commands.length > 0 ? (
+            <CommandGroup heading={t('search.groups.commands')}>
+              {commands.map((entry) => {
+                const Icon = kindIcon(entry.kind);
+                const label = resolveLabel(entry);
+                return (
+                  <CommandItem
+                    key={entry.id}
+                    value={`${label} ${entry.keywords?.join(' ') ?? ''}`}
+                    onSelect={() => navigateTo(entry)}
+                  >
+                    <Icon className="size-4 text-muted-foreground" />
+                    <span>{label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          ) : null}
+          {settings.length > 0 ? (
+            <CommandGroup heading={t('search.groups.settings')}>
+              {settings.map((entry) => {
+                const Icon = kindIcon(entry.kind);
+                const label = resolveLabel(entry);
+                return (
+                  <CommandItem
+                    key={entry.id}
+                    value={`${label} ${entry.keywords?.join(' ') ?? ''} ${entry.labelKey ?? ''}`}
+                    onSelect={() => navigateTo(entry)}
+                  >
+                    <Icon className="size-4 text-muted-foreground" />
+                    <span>{label}</span>
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          ) : null}
+        </CommandList>
+      </CommandDialog>
+    </>
+  );
+}

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>

apps/webui/src/components/layout/field-anchor.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect, type ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+/** Stable scroll target for command-palette deep links (`#field-…`). */
+export function FieldAnchor({
+  id,
+  children,
+  className
+}: {
+  id: string;
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div id={id} className={cn('scroll-mt-24', className)}>
+      {children}
+    </div>
+  );
+}
+
+/** Scrolls to `location.hash` after navigation from the command palette. */
+export function HashScroll() {
+  useEffect(() => {
+    function scrollToHash() {
+      const hash = window.location.hash.replace(/^#/, '');
+      if (!hash) {
+        return;
+      }
+      const el = document.getElementById(hash);
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+
+    scrollToHash();
+    window.addEventListener('hashchange', scrollToHash);
+    const timer = window.setTimeout(scrollToHash, 120);
+    return () => {
+      window.removeEventListener('hashchange', scrollToHash);
+      window.clearTimeout(timer);
+    };
+  }, []);
+
+  return null;
+}

apps/webui/src/components/layout/sidebar.tsx

@@ -1,7 +1,35 @@
 'use client';
 
-import { DASHBOARD_MODULES, type DashboardModuleGroup } from '@nexumi/shared';
-import { LayoutGrid, Settings, ShieldCheck, SlidersHorizontal, Terminal } from 'lucide-react';
+import { DASHBOARD_MODULES, type DashboardModuleGroup, type DashboardModuleId } from '@nexumi/shared';
+import {
+  Archive,
+  BarChart3,
+  Cake,
+  CalendarClock,
+  Coins,
+  Gamepad2,
+  Gift,
+  Hash,
+  LayoutGrid,
+  MessageSquareQuote,
+  MessagesSquare,
+  PartyPopper,
+  Radio,
+  Rss,
+  Settings,
+  Shield,
+  ShieldAlert,
+  ShieldCheck,
+  SlidersHorizontal,
+  Sparkles,
+  Star,
+  Terminal,
+  Ticket,
+  UserCheck,
+  Volume2,
+  type LucideIcon
+} from 'lucide-react';
+import Image from 'next/image';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from '@/components/locale-provider';
@@ -15,19 +43,55 @@ const MODULE_GROUP_ORDER: DashboardModuleGroup[] = [
   'integrations'
 ];
 
-interface SidebarProps {
+const MODULE_ICONS: Record<DashboardModuleId, LucideIcon> = {
+  moderation: Shield,
+  automod: ShieldAlert,
+  logging: Hash,
+  welcome: PartyPopper,
+  verification: UserCheck,
+  leveling: Sparkles,
+  economy: Coins,
+  fun: Gamepad2,
+  giveaways: Gift,
+  tickets: Ticket,
+  selfroles: UserCheck,
+  tags: MessageSquareQuote,
+  starboard: Star,
+  suggestions: MessagesSquare,
+  birthdays: Cake,
+  tempvoice: Volume2,
+  stats: BarChart3,
+  feeds: Rss,
+  scheduler: CalendarClock,
+  guildbackup: Archive
+};
+
+interface SidebarNavProps {
   guildId: string;
+  onNavigate?: () => void;
+  className?: string;
 }
 
-function NavLink({ href, active, children }: { href: string; active: boolean; children: React.ReactNode }) {
+function NavLink({
+  href,
+  active,
+  onNavigate,
+  children
+}: {
+  href: string;
+  active: boolean;
+  onNavigate?: () => void;
+  children: React.ReactNode;
+}) {
   return (
     <Link
       href={href}
+      onClick={onNavigate}
       className={cn(
-        'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
+        'flex items-center gap-2.5 rounded-md px-2.5 py-2 text-sm font-medium transition-colors',
         active
-          ? 'bg-accent text-accent-foreground'
-          : 'text-muted-foreground hover:bg-accent/60 hover:text-foreground'
+          ? 'border-l-2 border-primary bg-primary/10 pl-2 text-foreground'
+          : 'border-l-2 border-transparent text-muted-foreground hover:bg-accent/60 hover:text-foreground'
       )}
     >
       {children}
@@ -35,7 +99,7 @@ function NavLink({ href, active, children }: { href: string; active: boolean; ch
   );
 }
 
-export function Sidebar({ guildId }: SidebarProps) {
+export function SidebarNav({ guildId, onNavigate, className }: SidebarNavProps) {
   const pathname = usePathname();
   const t = useTranslations();
   const base = `/dashboard/${guildId}`;
@@ -46,39 +110,50 @@ export function Sidebar({ guildId }: SidebarProps) {
   }));
 
   return (
-    <nav className="flex h-full w-60 flex-col gap-6 overflow-y-auto border-r border-border px-3 py-4">
-      <div className="flex flex-col gap-1">
-        <NavLink href={base} active={pathname === base}>
-          <LayoutGrid className="size-4" />
+    <nav className={cn('flex h-full flex-col gap-5 overflow-y-auto px-3 py-4', className)}>
+      <Link
+        href={base}
+        onClick={onNavigate}
+        className="mb-1 flex items-center gap-2.5 rounded-md px-2.5 py-1.5 transition-opacity hover:opacity-90"
+      >
+        <Image src="/nexumi-logo.svg" alt="" width={28} height={28} className="size-7" />
+        <span className="text-base font-semibold tracking-tight">Nexumi</span>
+      </Link>
+
+      <div className="flex flex-col gap-0.5">
+        <NavLink href={base} active={pathname === base} onNavigate={onNavigate}>
+          <LayoutGrid className="size-4 shrink-0" />
           {t('nav.overview')}
         </NavLink>
-        <NavLink href={`${base}/settings`} active={pathname === `${base}/settings`}>
-          <Settings className="size-4" />
+        <NavLink href={`${base}/settings`} active={pathname === `${base}/settings`} onNavigate={onNavigate}>
+          <Settings className="size-4 shrink-0" />
           {t('nav.settings')}
         </NavLink>
-        <NavLink href={`${base}/modules`} active={pathname === `${base}/modules`}>
-          <SlidersHorizontal className="size-4" />
+        <NavLink href={`${base}/modules`} active={pathname === `${base}/modules`} onNavigate={onNavigate}>
+          <SlidersHorizontal className="size-4 shrink-0" />
           {t('nav.modules')}
         </NavLink>
-        <NavLink href={`${base}/access`} active={pathname === `${base}/access`}>
-          <ShieldCheck className="size-4" />
+        <NavLink href={`${base}/access`} active={pathname === `${base}/access`} onNavigate={onNavigate}>
+          <ShieldCheck className="size-4 shrink-0" />
           {t('nav.access')}
         </NavLink>
-        <NavLink href={`${base}/commands`} active={pathname === `${base}/commands`}>
-          <Terminal className="size-4" />
+        <NavLink href={`${base}/commands`} active={pathname === `${base}/commands`} onNavigate={onNavigate}>
+          <Terminal className="size-4 shrink-0" />
           {t('nav.commands')}
         </NavLink>
       </div>
 
       {groups.map(({ group, modules }) => (
-        <div key={group} className="flex flex-col gap-1">
-          <p className="px-3 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+        <div key={group} className="flex flex-col gap-0.5">
+          <p className="mb-1 px-2.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/80">
             {t(`moduleGroups.${group}`)}
           </p>
           {modules.map((module) => {
             const href = `${base}/${module.href}`;
+            const Icon = MODULE_ICONS[module.id] ?? Radio;
             return (
-              <NavLink key={module.id} href={href} active={pathname === href}>
+              <NavLink key={module.id} href={href} active={pathname === href} onNavigate={onNavigate}>
+                <Icon className="size-4 shrink-0" />
                 {t(`modules.${module.id}.label`)}
               </NavLink>
             );
@@ -88,3 +163,12 @@ export function Sidebar({ guildId }: SidebarProps) {
     </nav>
   );
 }
+
+/** Desktop sidebar chrome. */
+export function Sidebar({ guildId }: { guildId: string }) {
+  return (
+    <aside className="hidden h-screen w-60 shrink-0 border-r border-border bg-card/40 lg:sticky lg:top-0 lg:block">
+      <SidebarNav guildId={guildId} />
+    </aside>
+  );
+}