@svadmin/ui 0.34.10 → 0.35.0

package/dist/components/SettingsPage.svelte

@@ -1,66 +1,123 @@
 <script lang="ts">
-  import { t } from '@svadmin/core/i18n';
-  import { navigate } from '@svadmin/core/router';
-  import { User, Palette, Info, Shield, FileSearch } from '@lucide/svelte';
-  import ProfilePage from './ProfilePage.svelte';
-  import AppearanceSettings from './AppearanceSettings.svelte';
-  import AboutSettings from './AboutSettings.svelte';
-  import RolesSettings from './RolesSettings.svelte';
-  import AuditLogViewer from './AuditLogViewer.svelte';
-  import { getAuthProvider } from '@svadmin/core';
+  import type { Component, Snippet } from "svelte";
+  import { t } from "@svadmin/core/i18n";
+  import { navigate } from "@svadmin/core/router";
+  import { User, Palette, Info, Shield, FileSearch, Lock, Puzzle, Bell, Key } from "@lucide/svelte";
+  import ProfilePage from "./ProfilePage.svelte";
+  import AppearanceSettings from "./AppearanceSettings.svelte";
+  import AboutSettings from "./AboutSettings.svelte";
+  import RolesSettings from "./RolesSettings.svelte";
+  import AuditLogViewer from "./AuditLogViewer.svelte";
+  import SecuritySettings from "./SecuritySettings.svelte";
+  import IntegrationsSettings from "./IntegrationsSettings.svelte";
+  import NotificationsSettings from "./NotificationsSettings.svelte";
+  import ApiSettings from "./ApiSettings.svelte";
+  import { getAuthProvider } from "@svadmin/core";
 
   const authProvider = getAuthProvider({ optional: true });
 
-  const sections = [
+  interface SettingsItem {
+    key: string;
+    path: string;
+    icon: Component;
+    label: string;
+  }
+
+  interface SettingsSection {
+    group: string;
+    items: SettingsItem[];
+  }
+
+  interface Props {
+    customSections?: SettingsSection[];
+    profile?: Snippet;
+    appearance?: Snippet;
+    roles?: Snippet;
+    security?: Snippet;
+    integrations?: Snippet;
+    notifications?: Snippet;
+    api?: Snippet;
+    audit?: Snippet;
+    about?: Snippet;
+    content?: Snippet<[string]>;
+  }
+
+  let {
+    customSections,
+    profile,
+    appearance,
+    roles,
+    security,
+    integrations,
+    notifications,
+    api,
+    audit,
+    about,
+    content,
+  }: Props = $props();
+
+  const defaultSections = [
     {
-      group: 'settings.general',
+      group: "settings.general",
       items: [
-        { key: 'profile', path: '/settings/profile', icon: User, label: 'settings.profile' },
-        { key: 'appearance', path: '/settings/appearance', icon: Palette, label: 'settings.appearance' },
+        { key: "profile", path: "/settings/profile", icon: User, label: "settings.profile" },
+        { key: "appearance", path: "/settings/appearance", icon: Palette, label: "settings.appearance" },
+        { key: "notifications", path: "/settings/notifications", icon: Bell, label: "settings.notifications" },
       ],
     },
     {
-      group: 'settings.system',
+      group: "settings.workspace",
       items: [
+        { key: "security", path: "/settings/security", icon: Lock, label: "settings.security" },
         ...(authProvider ? [
-          { key: 'roles', path: '/settings/roles', icon: Shield, label: 'settings.rolesAndPermissions' },
-          { key: 'audit', path: '/settings/audit', icon: FileSearch, label: 'settings.auditLogs' },
+          { key: "roles", path: "/settings/roles", icon: Shield, label: "settings.rolesAndPermissions" },
         ] : []),
-        { key: 'about', path: '/settings/about', icon: Info, label: 'settings.about' },
+        { key: "integrations", path: "/settings/integrations", icon: Puzzle, label: "settings.integrations" },
+      ],
+    },
+    {
+      group: "settings.developer",
+      items: [
+        { key: "api", path: "/settings/api", icon: Key, label: "settings.api" },
+        ...(authProvider ? [
+          { key: "audit", path: "/settings/audit", icon: FileSearch, label: "settings.auditLogs" },
+        ] : []),
+        { key: "about", path: "/settings/about", icon: Info, label: "settings.about" },
       ],
     },
   ];
 
-  import { getParams, getRoute } from '../router-state.svelte.js';
+  const resolvedSections = $derived(customSections ?? defaultSections);
+  const sectionKeys = $derived(new Set(resolvedSections.flatMap((section) => section.items.map((item) => item.key))));
+
+  import { getParams, getRoute } from "../router-state.svelte.js";
 
   let activeKey = $derived.by(() => {
     const tab = getParams().tab;
-    if (tab === 'appearance') return 'appearance';
-    if (tab === 'roles') return 'roles';
-    if (tab === 'audit') return 'audit';
-    if (tab === 'about') return 'about';
-    return 'profile';
+    if (!tab) return "profile";
+    if (sectionKeys.has(tab)) return tab;
+    return content ? tab : "profile";
   });
 
   // Default redirect to profile
   $effect(() => {
-    if (getRoute() === '/settings') {
-      navigate('/settings/profile');
+    if (getRoute() === "/settings") {
+      navigate("/settings/profile");
     }
   });
 </script>
 
-<div class="flex flex-col lg:flex-row gap-0 min-h-full">
+<div class="flex min-h-full flex-col overflow-hidden rounded-3xl border border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03] backdrop-blur lg:flex-row">
   <!-- Left sidebar navigation -->
-  <nav class="w-full lg:w-56 shrink-0 bg-muted/10 shadow-[inset_0_-1px_0_rgba(0,0,0,0.05)] lg:shadow-[inset_-1px_0_0_rgba(0,0,0,0.05)] dark:shadow-[inset_-1px_0_0_rgba(255,255,255,0.05)]">
+  <nav class="w-full shrink-0 border-b border-border/70 bg-muted/20 lg:w-64 lg:border-b-0 lg:border-r">
     <!-- Mobile: horizontal scroll tabs -->
-    <div class="flex lg:hidden overflow-x-auto px-4 py-2 gap-1">
-      {#each sections as section, _i (_i)}
-        {#each section.items as item, _i (_i)}
+    <div class="flex gap-2 overflow-x-auto px-4 py-3 lg:hidden">
+      {#each resolvedSections as section, _i (_i)}
+        {#each section.items as item, _j (_j)}
           {@const active = activeKey === item.key}
           <button
-            class="flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap transition-colors
-              {active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground hover:bg-background/50'}"
+            class="flex items-center gap-2 whitespace-nowrap rounded-xl px-3 py-2 text-sm font-medium transition-colors
+              {active ? 'bg-primary/10 text-primary ring-1 ring-primary/15' : 'text-muted-foreground hover:bg-background/70 hover:text-foreground'}"
             onclick={() => navigate(item.path)}
           >
             <item.icon class="h-4 w-4" />
@@ -71,24 +128,24 @@
     </div>
 
     <!-- Desktop: vertical nav with groups -->
-    <div class="hidden lg:block py-6 px-3 space-y-6">
-      <div class="px-3">
-        <h2 class="text-lg font-semibold text-foreground">{t('settings.title')}</h2>
-        <p class="text-xs text-muted-foreground mt-1">{t('settings.settingsDescription')}</p>
+    <div class="hidden space-y-6 px-4 py-6 lg:block">
+      <div class="rounded-2xl border border-border/60 bg-background/70 p-4">
+        <h2 class="text-lg font-semibold tracking-tight text-foreground">{t("settings.title")}</h2>
+        <p class="text-xs text-muted-foreground mt-1">{t("settings.settingsDescription")}</p>
       </div>
-      {#each sections as section, _i (_i)}
+      {#each resolvedSections as section, _i (_i)}
         <div>
-          <h3 class="px-3 mb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">
+          <h3 class="mb-2 px-3 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/60">
             {t(section.group)}
           </h3>
-          <div class="space-y-0.5">
-            {#each section.items as item, _i (_i)}
+          <div class="space-y-1">
+            {#each section.items as item, _j (_j)}
               {@const active = activeKey === item.key}
               <button
-                class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm transition-all
+                class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition-all
                   {active
-                    ? 'bg-primary/10 text-primary font-medium'
-                    : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'}"
+                    ? 'bg-primary/10 text-primary font-medium ring-1 ring-primary/15 shadow-sm shadow-primary/10'
+                    : 'text-muted-foreground hover:bg-background/75 hover:text-foreground'}"
                 onclick={() => navigate(item.path)}
               >
                 <item.icon class="h-4 w-4 shrink-0" />
@@ -102,17 +159,27 @@
   </nav>
 
   <!-- Right content area -->
-  <div class="flex-1 p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' ? 'max-w-6xl' : 'max-w-3xl'}">
-    {#if activeKey === 'profile'}
-      <ProfilePage />
-    {:else if activeKey === 'appearance'}
-      <AppearanceSettings />
-    {:else if activeKey === 'roles'}
-      <RolesSettings />
-    {:else if activeKey === 'audit'}
-      <AuditLogViewer />
-    {:else if activeKey === 'about'}
-      <AboutSettings />
+  <div class="flex-1 bg-background/60 p-5 sm:p-6 lg:p-8 {activeKey === 'roles' || activeKey === 'audit' || activeKey === 'integrations' || activeKey === 'api' ? 'max-w-6xl' : 'max-w-3xl'}">
+    {#if activeKey === "profile"}
+      {#if profile}{@render profile()}{:else}<ProfilePage />{/if}
+    {:else if activeKey === "appearance"}
+      {#if appearance}{@render appearance()}{:else}<AppearanceSettings />{/if}
+    {:else if activeKey === "roles"}
+      {#if roles}{@render roles()}{:else}<RolesSettings />{/if}
+    {:else if activeKey === "security"}
+      {#if security}{@render security()}{:else}<SecuritySettings />{/if}
+    {:else if activeKey === "integrations"}
+      {#if integrations}{@render integrations()}{:else}<IntegrationsSettings />{/if}
+    {:else if activeKey === "notifications"}
+      {#if notifications}{@render notifications()}{:else}<NotificationsSettings />{/if}
+    {:else if activeKey === "api"}
+      {#if api}{@render api()}{:else}<ApiSettings />{/if}
+    {:else if activeKey === "audit"}
+      {#if audit}{@render audit()}{:else}<AuditLogViewer />{/if}
+    {:else if activeKey === "about"}
+      {#if about}{@render about()}{:else}<AboutSettings />{/if}
+    {:else if content}
+      {@render content(activeKey)}
     {/if}
   </div>
 </div>

package/dist/components/SettingsPage.svelte.d.ts

@@ -1,3 +1,27 @@
-declare const SettingsPage: import("svelte").Component<Record<string, never>, {}, "">;
+import type { Component, Snippet } from "svelte";
+interface SettingsItem {
+    key: string;
+    path: string;
+    icon: Component;
+    label: string;
+}
+interface SettingsSection {
+    group: string;
+    items: SettingsItem[];
+}
+interface Props {
+    customSections?: SettingsSection[];
+    profile?: Snippet;
+    appearance?: Snippet;
+    roles?: Snippet;
+    security?: Snippet;
+    integrations?: Snippet;
+    notifications?: Snippet;
+    api?: Snippet;
+    audit?: Snippet;
+    about?: Snippet;
+    content?: Snippet<[string]>;
+}
+declare const SettingsPage: Component<Props, {}, "">;
 type SettingsPage = ReturnType<typeof SettingsPage>;
 export default SettingsPage;

package/dist/components/ShowPage.svelte

@@ -38,10 +38,10 @@
   </PageHeader>
 
   {#if query.isLoading}
-    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
-      <Card.Content class="p-0">
+    <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">
         {#each showFields.slice(0, 6) as _, i (i)}
-          <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="flex flex-col rounded-2xl border border-border/50 bg-muted/20 px-4 py-3 sm:flex-row sm:py-4">
             <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 border-border/40 shadow-sm">
-      <Card.Content class="p-0">
+    <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">
         {#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 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">
+          <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">
               {#if DisplayComponent && value != null}
                 <DisplayComponent
                   {value}
@@ -72,7 +72,7 @@
       </Card.Content>
     </Card.Root>
   {:else}
-    <Card.Root class="overflow-hidden border-border/40 shadow-sm">
+    <Card.Root class="overflow-hidden rounded-3xl border-border/70 bg-card/95 shadow-sm shadow-slate-900/[0.03]">
       <Card.Content class="p-8 text-center">
         <p class="text-muted-foreground">{t('common.noData')}</p>
         {#if query.isError}

package/dist/components/Sidebar.svelte

@@ -12,13 +12,14 @@
   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, ChevronDown, LogOut, Sun, Moon, Palette,
+    ChevronLeft, ChevronRight, LogOut, Sun, Moon, Palette,
     Image as ImageIcon, Layout, Folder, Type, Video,
-    Download, ListTodo, TrendingUp, Sparkles, Images, Bot, Key, KeyRound, CreditCard, BookOpen, Wrench
+    Download, ListTodo, TrendingUp, Sparkles, Images, Bot, Key, KeyRound, CreditCard, BookOpen, Wrench,
+    Repeat, ClipboardCheck, SlidersHorizontal, AlertTriangle, Bell, CalendarDays, Package, Shield,
+    Barcode, FolderTree, Building2, Warehouse
   } from '@lucide/svelte';
 
   let { collapsed, identity, title, onToggle, onLogout, menu, routeMode = 'auto' }: {
@@ -63,6 +64,18 @@
     'credit-card': CreditCard,
     'book-open': BookOpen,
     'wrench': Wrench,
+    'repeat': Repeat,
+    'clipboard-check': ClipboardCheck,
+    'sliders-horizontal': SlidersHorizontal,
+    'alert-triangle': AlertTriangle,
+    'bell': Bell,
+    'calendar': CalendarDays,
+    'package': Package,
+    'shield': Shield,
+    'barcode': Barcode,
+    'folder-tree': FolderTree,
+    'building-2': Building2,
+    'warehouse': Warehouse,
   };
 
   interface NavItem {
@@ -70,6 +83,7 @@
     label: string;
     Icon: typeof LayoutDashboard;
     group?: string;
+    badge?: string;
   }
 
   interface NavGroup {
@@ -102,6 +116,7 @@
             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,
           });
         }
       }
@@ -157,8 +172,6 @@
     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;
@@ -204,34 +217,42 @@
 
 <aside
   aria-label="Sidebar navigation"
-  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}
+  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"
 >
   <!-- Logo -->
-  <div class="flex h-16 items-center justify-between px-4">
+  <div class="flex h-16 items-center justify-between border-b border-border/60 px-4">
     {#if !collapsed}
       <div class="flex items-center gap-3">
-        <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 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>
     {:else}
-      <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>
+      <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>
     {/if}
     {#if !collapsed}
-      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle}>
+      <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">
         <ChevronLeft class="h-4 w-4" />
       </TooltipButton>
     {:else}
-      <TooltipButton tooltip={t('common.toggleSidebar')} variant="ghost" size="icon-sm" onclick={onToggle} class="mx-auto mt-2 mb-2 block">
+      <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">
         <ChevronRight class="h-4 w-4" />
       </TooltipButton>
     {/if}
   </div>
 
-  <ScrollArea class="flex-1">
-  <nav aria-label="Main menu" class="py-4 px-3 space-y-1">
+  <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">
     {#if menu && menu.length > 0}
       <!-- Custom multi-level menu -->
       {#each menu as item, _i (_i)}
@@ -241,37 +262,41 @@
     <!-- Auto-generated menu from resources (fallback) -->
     {#each navGroups as group, _i (_i)}
       {#if group.name && !collapsed}
-        <!-- 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"
+        <!-- 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"
           >
             <span>{group.name}</span>
-            <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">
+          </div>
+          <div class="mt-1 space-y-1" data-sidebar="menu-sub">
               {#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="flex items-center gap-3 rounded-xl px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-300
+                  class="group relative flex items-center gap-3 rounded-xl px-3 {pyClassGroupItem} text-sm font-medium transition-all duration-200
                   {active
-                    ? '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'}"
+                    ? '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"}
                 >
-                  <item.Icon class="h-4 w-4 flex-shrink-0" />
-                  <span>{item.label}</span>
+                  {#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}
                 </a>
               {/each}
-            </div>
-          </Collapsible.Content>
-        </Collapsible.Root>
+          </div>
+        </div>
       {:else}
         <!-- Ungrouped items (flat) -->
         {#each group.items as item, _i (_i)}
@@ -284,10 +309,12 @@
                     {...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-300
+                    class="flex items-center justify-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-200
                     {active
-                      ? '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'}"
+                      ? '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"}
                   >
                     <item.Icon class="h-4 w-4 flex-shrink-0" />
                   </a>
@@ -301,13 +328,23 @@
             <a
               href={effectiveRouteMode === 'hash' ? `#${item.path}` : item.path}
               onclick={(e) => { e.preventDefault(); navigate(item.path); }}
-              class="flex items-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-300
+              class="group relative flex items-center gap-3 rounded-xl px-3 {pyClass} text-sm font-medium transition-all duration-200
               {active
-                ? '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'}"
+                ? '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"}
             >
-              <item.Icon class="h-4 w-4 flex-shrink-0" />
-              <span>{item.label}</span>
+              {#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}
             </a>
           {/if}
         {/each}
@@ -316,16 +353,17 @@
     {/if}
   </nav>
   </ScrollArea>
+  </div>
 
   <!-- Footer -->
-  <div>
+  <div class="border-t border-border/60 bg-sidebar/95">
     <!-- Color theme picker -->
     {#if !collapsed}
       <div class="px-3 pt-3 pb-1">
         <div class="relative" bind:this={colorPickerRef}>
           <Button
             variant="ghost"
-            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"
+            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"
             onclick={() => { if (!colorPickerOpen) colorPickerOpenedAt = Date.now(); colorPickerOpen = !colorPickerOpen; }}
           >
             <Palette class="h-4 w-4" />
@@ -358,7 +396,7 @@
     <!-- User info -->
     {#if !collapsed && identity}
       <div class="px-3 pb-3 pt-1">
-        <div class="flex items-center gap-3 rounded-lg p-2 hover:bg-sidebar-accent/50 transition-colors">
+        <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">
           <Avatar
             src={(identity as Record<string, unknown>).avatar as string | undefined}
             alt={identity.name ?? 'User'}
@@ -415,6 +453,16 @@
           </Tooltip.Trigger>
           <Tooltip.Content side="right">{t('common.toggleTheme')}</Tooltip.Content>
         </Tooltip.Root>
+        <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> })}