@svadmin/ui 0.35.0 → 0.37.0

package/dist/components/ShowPage.svelte

@@ -38,10 +38,10 @@
   </PageHeader>
 
   {#if query.isLoading}
-    <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]">
-      <Card.Content class="space-y-3 p-4 sm:p-5">
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-0">
         {#each showFields.slice(0, 6) as _, i (i)}
-          <div class="flex flex-col rounded-2xl border border-border/50 bg-muted/20 px-4 py-3 sm:flex-row sm:py-4">
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
             <Skeleton class="h-4 w-1/2 sm:w-1/4" />
             <Skeleton class="h-4 w-3/4 sm:w-2/5 mt-1 sm:mt-0 sm:ml-auto" />
           </div>
@@ -49,14 +49,14 @@
       </Card.Content>
     </Card.Root>
   {:else if query.data?.data}
-    <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]">
-      <Card.Content class="space-y-3 p-4 sm:p-5">
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+      <Card.Content class="p-0">
         {#each showFields as field, i (i)}
           {@const value = ((query.data as { data: Record<string, unknown> }).data as Record<string, unknown>)[field.key]}
           {@const DisplayComponent = getDisplayComponent(field.type)}
-          <div class="flex flex-col rounded-2xl border border-border/55 bg-background/70 px-4 py-3 transition-colors hover:bg-muted/20 sm:flex-row sm:items-start sm:py-4 {i % 2 === 1 ? 'bg-muted/15' : ''}">
-            <div class="mb-1 text-[11px] font-semibold uppercase tracking-[0.12em] text-muted-foreground sm:mb-0 sm:w-1/3">{field.label}</div>
-            <div class="text-sm text-foreground sm:w-2/3">
+          <div class="flex flex-col sm:flex-row px-4 sm:px-6 py-3 sm:py-4 {i % 2 === 1 ? 'bg-muted/20' : ''}">
+            <div class="sm:w-1/3 text-xs sm:text-sm font-medium text-muted-foreground mb-1 sm:mb-0">{field.label}</div>
+            <div class="sm:w-2/3 text-sm text-foreground">
               {#if DisplayComponent && value != null}
                 <DisplayComponent
                   {value}
@@ -72,7 +72,7 @@
       </Card.Content>
     </Card.Root>
   {:else}
-    <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]">
+    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
       <Card.Content class="p-8 text-center">
         <p class="text-muted-foreground">{t('common.noData')}</p>
         {#if query.isError}

package/dist/components/Sidebar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-/* eslint-disable svelte/prefer-svelte-reactivity */
   import { getResources, canAccessAsync } from '@svadmin/core';
   import type { Identity, MenuItem } from '@svadmin/core';
   import { navigate } from '@svadmin/core/router';
@@ -12,14 +11,15 @@
   import SidebarItem from './SidebarItem.svelte';
 
   import { ScrollArea } from './ui/scroll-area/index.js';
+  import * as Collapsible from './ui/collapsible/index.js';
   import { Avatar } from './ui/avatar/index.js';
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
-    ChevronLeft, ChevronRight, LogOut, Sun, Moon, Palette,
+    ChevronLeft, ChevronRight, ChevronDown, LogOut, Sun, Moon, Palette,
     Image as ImageIcon, Layout, Folder, Type, Video,
     Download, ListTodo, TrendingUp, Sparkles, Images, Bot, Key, KeyRound, CreditCard, BookOpen, Wrench,
-    Repeat, ClipboardCheck, SlidersHorizontal, AlertTriangle, Bell, CalendarDays, Package, Shield,
-    Barcode, FolderTree, Building2, Warehouse
+    Repeat, ClipboardCheck, SlidersHorizontal, AlertTriangle, Mail, Send, ShoppingBag, Briefcase, Building2,
+    Calendar, Bell, Clock, Trash2, Shield
   } from '@lucide/svelte';
 
   let { collapsed, identity, title, onToggle, onLogout, menu, routeMode = 'auto' }: {
@@ -39,11 +39,10 @@
       : routeMode
   );
 
-  const _resources = getResources();
-
   const iconMap: Record<string, typeof LayoutDashboard> = {
     'dashboard': LayoutDashboard,
     'posts': FileText,
+    'file': FileText,
     'users': Users,
     'settings': Settings,
     'home': Home,
@@ -68,14 +67,16 @@
     'clipboard-check': ClipboardCheck,
     'sliders-horizontal': SlidersHorizontal,
     'alert-triangle': AlertTriangle,
+    'mail': Mail,
+    'send': Send,
+    'shopping-bag': ShoppingBag,
+    'briefcase': Briefcase,
+    'building': Building2,
+    'calendar': Calendar,
     'bell': Bell,
-    'calendar': CalendarDays,
-    'package': Package,
+    'clock': Clock,
+    'trash': Trash2,
     'shield': Shield,
-    'barcode': Barcode,
-    'folder-tree': FolderTree,
-    'building-2': Building2,
-    'warehouse': Warehouse,
   };
 
   interface NavItem {
@@ -83,7 +84,6 @@
     label: string;
     Icon: typeof LayoutDashboard;
     group?: string;
-    badge?: string;
   }
 
   interface NavGroup {
@@ -95,7 +95,7 @@
   let navItems = $state.raw<NavItem[]>([]);
 
   $effect(() => {
-    const _localeVal = getLocale();
+    getLocale();
     const currentResources = getResources();
     let cancelled = false;
 
@@ -116,7 +116,6 @@
             label: r.label,
             Icon: (typeof r.icon === 'string' ? iconMap[r.icon] : r.icon) ?? iconMap[r.name] ?? Settings,
             group: r.group,
-            badge: typeof r.meta?.badge === 'string' ? r.meta.badge : undefined,
           });
         }
       }
@@ -146,15 +145,6 @@
     return path === itemPath || path.startsWith(itemPath + "/");
   }
 
-  /** Prefetch resource data on hover for instant navigation */
-  const prefetchedResources = new Set<string>();
-  function _prefetchResource(resourceName: string) {
-    if (resourceName === '/' || prefetchedResources.has(resourceName)) return;
-    prefetchedResources.add(resourceName);
-    // Trigger a background fetch by navigating the browser cache
-    // The actual prefetch happens via the #key block re-creating useList in AdminApp
-  }
-
   // Group nav items by group field (null = ungrouped)
   const navGroups = $derived.by((): NavGroup[] => {
     const groups: NavGroup[] = [];
@@ -172,6 +162,8 @@
     return groups;
   });
 
+  // Track which groups are open
+  let openGroups = $state<Set<string>>(new Set());
   let colorPickerOpen = $state(false);
   let colorPickerRef = $state<HTMLDivElement | null>(null);
   let colorPickerOpenedAt = 0;
@@ -195,6 +187,7 @@
 
   const pyClass = $derived(density === 'compact' ? 'py-1.5' : 'py-2.5');
   const pyClassGroupItem = $derived(density === 'compact' ? 'py-1.5' : 'py-2');
+  const footerIconClass = 'h-9 w-9 rounded-lg text-sidebar-foreground/60 transition-all duration-200 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground';
 
   // Click-outside to close color picker
   $effect(() => {
@@ -217,42 +210,34 @@
 
 <aside
   aria-label="Sidebar navigation"
-  class="fixed inset-y-0 left-0 z-30 flex flex-col border-r border-border/70 bg-sidebar/95 shadow-sm shadow-slate-900/[0.03] backdrop-blur-xl transition-all duration-300"
-  class:w-72={!collapsed}
-  class:w-20={collapsed}
-  data-sidebar="sidebar"
+  class="fixed inset-y-0 left-0 z-30 flex flex-col backdrop-blur-xl transition-all duration-300"
+  style="background-color: var(--sidebar);"
+  class:w-64={!collapsed}
+  class:w-16={collapsed}
 >
   <!-- Logo -->
-  <div class="flex h-16 items-center justify-between border-b border-border/60 px-4">
+  <div class="flex h-16 items-center justify-between px-4">
     {#if !collapsed}
       <div class="flex items-center gap-3">
-        <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary text-sm font-bold text-primary-foreground shadow-sm shadow-primary/25">
-          {title.slice(0, 1).toUpperCase()}
-        </div>
-        <div class="min-w-0">
-          <span class="block truncate text-[0.95rem] font-semibold tracking-tight text-sidebar-foreground">{title}</span>
-          <span class="block truncate text-[11px] font-medium text-sidebar-foreground/50">{getLocale() === 'zh-CN' ? '管理控制台' : 'Admin Console'}</span>
-        </div>
+        <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
+        <span class="font-semibold text-lg tracking-tight text-sidebar-foreground">{title}</span>
       </div>
     {:else}
-      <div class="mx-auto flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-primary text-sm font-bold text-primary-foreground shadow-sm shadow-primary/25">
-        {title.slice(0, 1).toUpperCase()}
-      </div>
+      <div class="w-8 h-8 rounded-lg bg-gradient-to-tr from-primary to-purple-500 shrink-0 mx-auto" style="box-shadow: 0 4px 12px oklch(0.488 0.243 264.376 / 20%);"></div>
     {/if}
     {#if !collapsed}
-      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle} class="rounded-xl text-sidebar-foreground/55 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground">
+      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle}>
         <ChevronLeft class="h-4 w-4" />
       </TooltipButton>
     {:else}
-      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle} class="mx-auto mb-2 mt-2 block rounded-xl text-sidebar-foreground/55 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground">
+      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle} class="mx-auto mt-2 mb-2 block">
         <ChevronRight class="h-4 w-4" />
       </TooltipButton>
     {/if}
   </div>
 
-  <div class="flex min-h-0 flex-1">
-  <ScrollArea class="min-w-0 flex-1">
-  <nav aria-label="Main menu" class="space-y-5 px-3 py-5">
+  <ScrollArea class="flex-1">
+  <nav aria-label="Main menu" class="py-4 px-3 space-y-1">
     {#if menu && menu.length > 0}
       <!-- Custom multi-level menu -->
       {#each menu as item, _i (_i)}
@@ -262,41 +247,37 @@
     <!-- Auto-generated menu from resources (fallback) -->
     {#each navGroups as group, _i (_i)}
       {#if group.name && !collapsed}
-        <!-- Grouped section: expanded by default in desktop light sidebar mode -->
-        <div>
-          <div
-            class="flex w-full items-center justify-between px-2.5 py-1 text-[11px] font-semibold uppercase tracking-[0.16em] text-sidebar-foreground/45"
-            data-sidebar="group-label"
+        <!-- Grouped section with Collapsible -->
+        <Collapsible.Root open={openGroups.has(group.name)} onOpenChange={(isOpen) => {
+          const next = new Set(openGroups);
+          if (isOpen) next.add(group.name as string); else next.delete(group.name as string);
+          openGroups = next;
+        }}>
+          <Collapsible.Trigger
+            class="flex w-full items-center justify-between px-3 py-1.5 text-sm font-semibold tracking-wider text-sidebar-foreground/60 hover:text-sidebar-foreground transition-colors"
           >
             <span>{group.name}</span>
-          </div>
-          <div class="mt-1 space-y-1" data-sidebar="menu-sub">
+            <ChevronDown class="h-3 w-3 transition-transform {openGroups.has(group.name) ? 'rotate-180' : ''}" />
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div class="mt-1 space-y-1">
               {#each group.items as item, _i (_i)}
                 {@const active = isActive(item.path)}
                 <a
                   href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
                   onclick={(e) => { e.preventDefault(); navigate(item.path); }}
-                  class="group relative flex items-center gap-3 rounded-xl px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-200
+                  class="flex items-center gap-3 rounded-xl px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-300
                   {active
-                    ? 'bg-primary text-primary-foreground shadow-sm shadow-primary/20'
-                    : 'text-sidebar-foreground/68 hover:bg-background/85 hover:text-sidebar-foreground'}"
-                  data-sidebar="menu-sub-button"
-                  data-active={active ? "true" : "false"}
+                    ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20 translate-x-1'
+                    : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
                 >
-                  {#if active && !collapsed}
-                    <div class="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full bg-primary"></div>
-                  {/if}
-                  <span data-sidebar="menu-icon" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg {active ? 'bg-primary-foreground/15' : 'bg-muted/60 text-sidebar-foreground/55 group-hover:bg-primary/10 group-hover:text-primary'}">
-                    <item.Icon class="h-4 w-4 flex-shrink-0" />
-                  </span>
-                  <span class="min-w-0 flex-1 truncate">{item.label}</span>
-                  {#if item.badge}
-                    <span class="rounded-full {active ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-primary/10 text-primary'} px-2 py-0.5 text-[10px] font-semibold">{item.badge}</span>
-                  {/if}
+                  <item.Icon class="h-4 w-4 flex-shrink-0" />
+                  <span>{item.label}</span>
                 </a>
               {/each}
-          </div>
-        </div>
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
       {:else}
         <!-- Ungrouped items (flat) -->
         {#each group.items as item, _i (_i)}
@@ -309,12 +290,10 @@
                     {...props}
                     href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
                     onclick={(e) => { e.preventDefault(); navigate(item.path); }}
-                    class="flex items-center justify-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-200
+                    class="flex items-center justify-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-300
                     {active
-                      ? 'bg-primary/10 text-primary shadow-sm shadow-primary/10 ring-1 ring-primary/15'
-                      : 'text-sidebar-foreground/60 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
-                    data-sidebar="menu-button"
-                    data-active={active ? "true" : "false"}
+                      ? 'bg-sidebar-accent text-sidebar-accent-foreground shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20'
+                      : 'text-sidebar-foreground/60 hover:bg-sidebar-accent/40 hover:text-sidebar-foreground'}"
                   >
                     <item.Icon class="h-4 w-4 flex-shrink-0" />
                   </a>
@@ -328,23 +307,13 @@
             <a
               href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
               onclick={(e) => { e.preventDefault(); navigate(item.path); }}
-              class="group relative flex items-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-200
+              class="flex items-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-300
               {active
-                ? 'bg-primary text-primary-foreground shadow-sm shadow-primary/20'
-                : 'text-sidebar-foreground/68 hover:bg-background/85 hover:text-sidebar-foreground'}"
-              data-sidebar="menu-button"
-              data-active={active ? "true" : "false"}
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground sidebar-nav-active shadow-[0_2px_12px_rgb(0,0,0,0.08)] ring-1 ring-border/20 translate-x-1'
+                : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
             >
-              {#if active && !collapsed}
-                <div class="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full bg-primary"></div>
-              {/if}
-              <span data-sidebar="menu-icon" class="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg {active ? 'bg-primary-foreground/15' : 'bg-muted/60 text-sidebar-foreground/55 group-hover:bg-primary/10 group-hover:text-primary'}">
-                <item.Icon class="h-4 w-4 flex-shrink-0" />
-              </span>
-              <span class="min-w-0 flex-1 truncate">{item.label}</span>
-              {#if item.badge}
-                <span class="rounded-full {active ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-primary/10 text-primary'} px-2 py-0.5 text-[10px] font-semibold">{item.badge}</span>
-              {/if}
+              <item.Icon class="h-4 w-4 flex-shrink-0" />
+              <span>{item.label}</span>
             </a>
           {/if}
         {/each}
@@ -353,17 +322,16 @@
     {/if}
   </nav>
   </ScrollArea>
-  </div>
 
   <!-- Footer -->
-  <div class="border-t border-border/60 bg-sidebar/95">
+  <div>
     <!-- Color theme picker -->
     {#if !collapsed}
       <div class="px-3 pt-3 pb-1">
         <div class="relative" bind:this={colorPickerRef}>
           <Button
             variant="ghost"
-            class="flex h-auto w-full items-center justify-start gap-2 rounded-xl px-2 py-1.5 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-foreground"
+            class="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-sm text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-foreground transition-colors h-auto justify-start"
             onclick={() => { if (!colorPickerOpen) colorPickerOpenedAt = Date.now(); colorPickerOpen = !colorPickerOpen; }}
           >
             <Palette class="h-4 w-4" />
@@ -395,8 +363,8 @@
 
     <!-- User info -->
     {#if !collapsed && identity}
-      <div class="px-3 pb-3 pt-1">
-        <div class="flex items-center gap-3 rounded-2xl border border-border/50 bg-background/65 p-2 shadow-sm shadow-slate-900/[0.02] transition-colors hover:bg-sidebar-accent/50">
+      <div class="px-3 pb-3 pt-1 transition-all duration-200">
+        <div class="flex items-center gap-3 rounded-lg p-2 transition-colors hover:bg-sidebar-accent/50">
           <Avatar
             src={(identity as Record<string, unknown>).avatar as string | undefined}
             alt={identity.name ?? 'User'}
@@ -408,31 +376,31 @@
             <p class="truncate text-[10px] text-sidebar-foreground/50">{((identity as Record<string, unknown>).role || (identity as Record<string, unknown>).roleName) ?? 'User'}</p>
           </div>
         </div>
-        <div class="flex items-center justify-between px-1 mt-1">
-          <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+        <div class="mt-1 grid grid-cols-4 place-items-center gap-1 px-1">
+          <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon-sm" onclick={toggleLocale} class={footerIconClass}>
             <span class="text-xs font-bold">{localeLabel}</span>
           </TooltipButton>
-          <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+          <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon-sm" onclick={toggleTheme} class={footerIconClass}>
             {#if getResolvedTheme() === 'dark'}
               <Sun class="h-4 w-4" />
             {:else}
               <Moon class="h-4 w-4" />
             {/if}
           </TooltipButton>
-          <TooltipButton tooltip={t('settings.title')} variant="ghost" size="icon-sm" onclick={() => navigate('/settings')} class="text-sidebar-foreground/60 hover:text-sidebar-foreground">
+          <TooltipButton tooltip={t('settings.title')} variant="ghost" size="icon-sm" onclick={() => navigate('/settings')} class={footerIconClass}>
             <Settings class="h-4 w-4" />
           </TooltipButton>
-          <TooltipButton tooltip={t('common.logout')} variant="ghost" size="icon-sm" onclick={onLogout} class="text-sidebar-foreground/60 hover:text-destructive">
+          <TooltipButton tooltip={t('common.logout')} variant="ghost" size="icon-sm" onclick={onLogout} class="{footerIconClass} hover:text-destructive">
             <LogOut class="h-4 w-4" />
           </TooltipButton>
         </div>
       </div>
     {:else if collapsed}
-      <div class="px-1 py-3 space-y-1">
+      <div class="flex flex-col items-center gap-1 px-3 py-3 transition-all duration-200">
         <Tooltip.Root>
           <Tooltip.Trigger>
             {#snippet child({ props }: { props: Record<string, unknown> })}
-              <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
+              <Button {...props} variant="ghost" size="icon" onclick={toggleLocale} class={footerIconClass}>
                 <span class="text-xs font-bold">{localeLabel}</span>
               </Button>
             {/snippet}
@@ -442,7 +410,7 @@
         <Tooltip.Root>
           <Tooltip.Trigger>
             {#snippet child({ props }: { props: Record<string, unknown> })}
-              <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
+              <Button {...props} variant="ghost" size="icon" onclick={toggleTheme} class={footerIconClass}>
                 {#if getResolvedTheme() === 'dark'}
                   <Sun class="h-4 w-4" />
                 {:else}
@@ -456,17 +424,7 @@
         <Tooltip.Root>
           <Tooltip.Trigger>
             {#snippet child({ props }: { props: Record<string, unknown> })}
-              <Button {...props} variant="ghost" size="icon" onclick={() => navigate('/settings')} class="w-full text-sidebar-foreground/60 hover:text-sidebar-foreground">
-                <Settings class="h-4 w-4" />
-              </Button>
-            {/snippet}
-          </Tooltip.Trigger>
-          <Tooltip.Content side="right">{t('settings.title')}</Tooltip.Content>
-        </Tooltip.Root>
-        <Tooltip.Root>
-          <Tooltip.Trigger>
-            {#snippet child({ props }: { props: Record<string, unknown> })}
-              <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="w-full text-sidebar-foreground/60 hover:text-destructive">
+              <Button {...props} variant="ghost" size="icon" onclick={onLogout} class="{footerIconClass} hover:text-destructive">
                 <LogOut class="h-4 w-4" />
               </Button>
             {/snippet}
@@ -475,11 +433,11 @@
         </Tooltip.Root>
       </div>
     {:else}
-      <div class="flex gap-1 p-3">
-        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class="flex-1 text-sidebar-foreground/60 hover:text-sidebar-foreground">
+      <div class="flex justify-center gap-2 p-3 transition-all duration-200">
+        <TooltipButton tooltip={t('common.switchLanguage')} variant="ghost" size="icon" onclick={toggleLocale} class={footerIconClass}>
           <span class="text-xs font-bold">{localeLabel}</span>
         </TooltipButton>
-        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class="flex-1 text-sidebar-foreground/60 hover:text-sidebar-foreground">
+        <TooltipButton tooltip={t('common.toggleTheme')} variant="ghost" size="icon" onclick={toggleTheme} class={footerIconClass}>
           {#if getResolvedTheme() === 'dark'}
             <Sun class="h-4 w-4" />
           {:else}

package/dist/components/SidebarItem.svelte

@@ -6,8 +6,8 @@
   import {
     LayoutDashboard, FileText, Users, Settings, Home,
     ChevronDown, Folder, ExternalLink, Repeat, ClipboardCheck, SlidersHorizontal, AlertTriangle,
-    Barcode, FolderTree, Building2, Warehouse, BriefcaseBusiness, Handshake, UserRoundCheck,
-    CalendarCheck, KeyRound, MapPinned,
+    Mail, Send, ShoppingBag, Briefcase, Building2, Calendar, Bell, Clock, Trash2, Palette, Layout,
+    Download, ListTodo, TrendingUp, Sparkles, Images, Bot, Key, KeyRound, CreditCard, BookOpen, Wrench, Shield,
   } from '@lucide/svelte';
 
   import { formatLink } from '@svadmin/core/router';
@@ -22,6 +22,7 @@
   const iconMap: Record<string, typeof LayoutDashboard> = {
     dashboard: LayoutDashboard,
     posts: FileText,
+    file: FileText,
     users: Users,
     settings: Settings,
     home: Home,
@@ -30,21 +31,34 @@
     'clipboard-check': ClipboardCheck,
     'sliders-horizontal': SlidersHorizontal,
     'alert-triangle': AlertTriangle,
-    'barcode': Barcode,
-    'folder-tree': FolderTree,
-    'building-2': Building2,
-    'warehouse': Warehouse,
-    'briefcase-business': BriefcaseBusiness,
-    handshake: Handshake,
-    'user-round-check': UserRoundCheck,
-    'calendar-check': CalendarCheck,
+    mail: Mail,
+    send: Send,
+    'shopping-bag': ShoppingBag,
+    briefcase: Briefcase,
+    building: Building2,
+    calendar: Calendar,
+    bell: Bell,
+    clock: Clock,
+    trash: Trash2,
+    palette: Palette,
+    layout: Layout,
+    download: Download,
+    'list-todo': ListTodo,
+    'trending-up': TrendingUp,
+    sparkles: Sparkles,
+    images: Images,
+    bot: Bot,
+    key: Key,
     'key-round': KeyRound,
-    'map-pinned': MapPinned,
+    'credit-card': CreditCard,
+    'book-open': BookOpen,
+    wrench: Wrench,
+    shield: Shield,
   };
 
-  function getIcon(name?: string | typeof LayoutDashboard): typeof LayoutDashboard {
+  function getIcon(name?: unknown): typeof LayoutDashboard {
     if (!name) return depth === 0 ? Settings : Folder;
-    if (typeof name !== 'string') return name; // if it's already a component
+    if (typeof name !== 'string') return name as typeof LayoutDashboard;
     return iconMap[name] ?? Settings;
   }
 
@@ -85,13 +99,11 @@
   <!-- Parent node with children: render as collapsible group -->
   <Collapsible.Root bind:open={isOpen}>
     <Collapsible.Trigger
-      class="flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200
+      class="flex w-full items-center justify-between rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
       {childActive
-        ? 'bg-primary/10 text-primary ring-1 ring-primary/15'
-        : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
+        ? 'text-sidebar-foreground bg-sidebar-accent/30'
+        : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
       style="padding-left: {12 + depth * 12}px"
-      data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
-      data-active={childActive ? "true" : "false"}
     >
       <span class="flex items-center gap-3">
         <Icon class="h-4 w-4 flex-shrink-0" />
@@ -100,7 +112,7 @@
       <ChevronDown class="h-3.5 w-3.5 transition-transform duration-200 {isOpen ? 'rotate-180' : ''}" />
     </Collapsible.Trigger>
     <Collapsible.Content>
-      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px" data-sidebar="menu-sub">
+      <div class="mt-0.5 space-y-0.5" style="padding-left: {depth > 0 ? 0 : 0}px">
         {#each item.children as child, _i (_i)}
           <SidebarItem item={child} {currentPath} {collapsed} depth={depth + 1} />
         {/each}
@@ -117,12 +129,10 @@
           href={finalHref}
           target={isExternal ? '_blank' : undefined}
           rel={isExternal ? 'noopener noreferrer' : undefined}
-          class="flex items-center justify-center rounded-xl px-3 py-2.5 text-sm font-medium transition-all duration-200
+          class="flex items-center justify-center rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-200
           {active
-            ? 'bg-primary/10 text-primary shadow-sm shadow-primary/10 ring-1 ring-primary/15'
-            : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
-          data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
-          data-active={active ? "true" : "false"}
+            ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5'
+            : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
         >
           <Icon class="h-4 w-4 flex-shrink-0" />
         </a>
@@ -138,17 +148,12 @@
     href={finalHref}
     target={isExternal ? '_blank' : undefined}
     rel={isExternal ? 'noopener noreferrer' : undefined}
-    class="relative flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-200
+    class="flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-200
     {active
-      ? 'bg-primary/10 text-primary font-semibold shadow-sm shadow-primary/10 ring-1 ring-primary/15'
-      : 'text-sidebar-foreground/68 hover:bg-sidebar-accent/65 hover:text-sidebar-foreground'}"
+      ? 'bg-card text-sidebar-primary shadow-sm ring-1 ring-foreground/5 font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:bg-primary before:rounded-r-md overflow-hidden relative'
+      : 'text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground'}"
     style="padding-left: {12 + depth * 12}px"
-    data-sidebar={depth === 0 ? "menu-button" : "menu-sub-button"}
-    data-active={active ? "true" : "false"}
   >
-    {#if active && !collapsed}
-      <div class="absolute left-0 top-1/2 -translate-y-1/2 h-5 w-1 rounded-r-full bg-primary"></div>
-    {/if}
     <Icon class="h-4 w-4 flex-shrink-0" />
     <span class="flex-1">{label}</span>
     {#if isExternal}

package/dist/components/TwoFactorAuthPage.svelte

@@ -79,7 +79,7 @@
   }
 </script>
 
-<div class="flex min-h-[70vh] items-center justify-center p-4">
+<div class="flex min-h-[70vh] items-center justify-center p-4" data-svadmin-content-page="auth-2fa">
   <div class="w-full max-w-lg space-y-6">
     {#if currentStep === 'intro' && !is2faEnabled}
       <!-- Intro -->

package/dist/components/account/CompanyProfilePage.svelte

@@ -21,7 +21,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('account.companyProfile')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('account.companyProfileDescription')}</p>

package/dist/components/account/GetStartedPage.svelte

@@ -47,7 +47,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.getStarted')}</h2>

package/dist/components/account/ImportMembersPage.svelte

@@ -59,7 +59,7 @@
   }
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div>
     <h2 class="text-xl font-semibold text-foreground">{t('account.importMembers')}</h2>
     <p class="mt-1 text-sm text-muted-foreground">{t('account.importMembersDescription')}</p>

package/dist/components/account/MembersStarterPage.svelte

@@ -43,7 +43,7 @@
   const initials = (name: string) => name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
 </script>
 
-<div class="space-y-6">
+<div class="space-y-6" data-svadmin-content-page="account">
   <div class="flex items-start justify-between gap-4">
     <div>
       <h2 class="text-xl font-semibold text-foreground">{t('account.membersStarter')}</h2>