Refactor code structure for improved readability and maintainability

assets/admin/components/layout/AdminLayout.tsx

@@ -1,22 +1,37 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
 import Sidebar from './Sidebar';
 import Topbar from './Topbar';
 import { useUiStore } from '../../stores/uiStore';
 
 export default function AdminLayout() {
-  const darkMode = useUiStore((s) => s.darkMode);
+  const darkMode      = useUiStore((s) => s.darkMode);
+  const density       = useUiStore((s) => s.density);
+  const brandHue      = useUiStore((s) => s.brandHue);
+  const sidebarOpen   = useUiStore((s) => s.sidebarOpen);
+  const setSidebarOpen = useUiStore((s) => s.setSidebarOpen);
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   useEffect(() => {
-    document.documentElement.classList.toggle('dark', darkMode);
-  }, [darkMode]);
+    const root = document.documentElement;
+    root.classList.toggle('dark', darkMode);
+    root.setAttribute('data-theme', darkMode ? 'dark' : 'light');
+    root.setAttribute('data-density', density);
+    root.style.setProperty('--brand-h', String(brandHue.h));
+    root.style.setProperty('--brand-c', String(brandHue.c));
+  }, [darkMode, density, brandHue]);
 
   return (
-    <div className="flex h-screen overflow-hidden bg-slate-100 dark:bg-gray-950 transition-colors duration-200">
-      <Sidebar />
-      <div className="flex flex-col flex-1 overflow-hidden min-w-0">
-        <Topbar />
-        <main className="flex-1 overflow-y-auto p-5 lg:p-6">
+    <div
+      className="app"
+      data-collapsed={!sidebarOpen ? 'true' : 'false'}
+      data-mobile-open={mobileOpen ? 'true' : 'false'}
+    >
+      <div className="scrim" onClick={() => setMobileOpen(false)} />
+      <Sidebar mobileOpen={mobileOpen} onMobileClose={() => setMobileOpen(false)} />
+      <div className="main">
+        <Topbar onMobileMenuOpen={() => setMobileOpen(true)} />
+        <main className="content">
           <Outlet />
         </main>
       </div>

assets/admin/components/layout/Sidebar.tsx

@@ -1,21 +1,10 @@
 import React from 'react';
 import { NavLink, useNavigate } from 'react-router-dom';
 import {
-  ChartBarIcon,
-  UserGroupIcon,
-  HeartIcon,
-  BuildingOffice2Icon,
-  CalendarDaysIcon,
-  CreditCardIcon,
-  BanknotesIcon,
-  UsersIcon,
-  ChatBubbleLeftEllipsisIcon,
-  StarIcon,
-  DevicePhoneMobileIcon,
-  TagIcon,
-  DocumentTextIcon,
-  KeyIcon,
-  Bars3Icon,
+  ChartBarIcon, UserGroupIcon, HeartIcon, BuildingOffice2Icon,
+  CalendarDaysIcon, CreditCardIcon, BanknotesIcon,
+  ChatBubbleLeftEllipsisIcon, StarIcon, DevicePhoneMobileIcon,
+  TagIcon, DocumentTextIcon, UsersIcon, KeyIcon,
   ArrowLeftOnRectangleIcon,
 } from '@heroicons/react/24/outline';
 import { useUiStore } from '../../stores/uiStore';
@@ -25,144 +14,111 @@ const sections = [
   {
     label: 'عمومی',
     items: [
-      { to: '/admin/dashboard', icon: ChartBarIcon, label: 'داشبورد' },
-      { to: '/admin/users', icon: UserGroupIcon, label: 'کاربران' },
-      { to: '/admin/doctors', icon: HeartIcon, label: 'پزشکان' },
-      { to: '/admin/clinics', icon: BuildingOffice2Icon, label: 'کلینیک‌ها' },
+      { to: '/admin/dashboard',       icon: ChartBarIcon,                 label: 'داشبورد' },
+      { to: '/admin/users',            icon: UserGroupIcon,                 label: 'کاربران' },
+      { to: '/admin/doctors',          icon: HeartIcon,                     label: 'پزشکان' },
+      { to: '/admin/clinics',          icon: BuildingOffice2Icon,           label: 'کلینیک‌ها' },
     ],
   },
   {
     label: 'مدیریت',
     items: [
-      { to: '/admin/appointments', icon: CalendarDaysIcon, label: 'نوبت‌ها' },
-      { to: '/admin/payments', icon: CreditCardIcon, label: 'پرداخت‌ها' },
-      { to: '/admin/settlements', icon: BanknotesIcon, label: 'تسویه‌حساب' },
+      { to: '/admin/appointments',    icon: CalendarDaysIcon,              label: 'نوبت‌ها' },
+      { to: '/admin/payments',        icon: CreditCardIcon,                label: 'پرداخت‌ها' },
+      { to: '/admin/settlements',     icon: BanknotesIcon,                 label: 'تسویه‌حساب' },
     ],
   },
   {
     label: 'محتوا',
     items: [
-      { to: '/admin/comments', icon: ChatBubbleLeftEllipsisIcon, label: 'نظرات' },
-      { to: '/admin/ratings', icon: StarIcon, label: 'امتیازها' },
-      { to: '/admin/blogs', icon: DocumentTextIcon, label: 'بلاگ' },
-      { to: '/admin/sms', icon: DevicePhoneMobileIcon, label: 'پیامک' },
+      { to: '/admin/comments',        icon: ChatBubbleLeftEllipsisIcon,    label: 'نظرات' },
+      { to: '/admin/ratings',         icon: StarIcon,                      label: 'امتیازها' },
+      { to: '/admin/blogs',           icon: DocumentTextIcon,              label: 'بلاگ' },
+      { to: '/admin/sms',             icon: DevicePhoneMobileIcon,         label: 'پیامک' },
     ],
   },
   {
     label: 'سیستم',
     items: [
-      { to: '/admin/categories', icon: TagIcon, label: 'دسته‌بندی‌ها' },
-      { to: '/admin/representations', icon: UsersIcon, label: 'نمایندگان' },
-      { to: '/admin/secretaries', icon: KeyIcon, label: 'منشی‌ها' },
+      { to: '/admin/categories',      icon: TagIcon,                       label: 'دسته‌بندی‌ها' },
+      { to: '/admin/representations', icon: UsersIcon,                     label: 'نمایندگان' },
+      { to: '/admin/secretaries',     icon: KeyIcon,                       label: 'منشی‌ها' },
     ],
   },
 ];
 
-export default function Sidebar() {
-  const open = useUiStore((s) => s.sidebarOpen);
-  const toggle = useUiStore((s) => s.toggleSidebar);
+interface Props {
+  mobileOpen?: boolean;
+  onMobileClose?: () => void;
+}
+
+export default function Sidebar({ mobileOpen: _mobileOpen, onMobileClose: _onMobileClose }: Props) {
+  const sidebarOpen = useUiStore((s) => s.sidebarOpen);
+  const toggleSidebar = useUiStore((s) => s.toggleSidebar);
   const logout = useAuthStore((s) => s.logout);
   const navigate = useNavigate();
 
   return (
-    <aside
-      className={`
-        ${open ? 'w-64' : 'w-[70px]'}
-        shrink-0 flex flex-col h-screen overflow-hidden
-        transition-[width] duration-300 ease-in-out
-        bg-[#100c22] dark:bg-gray-950
-        border-l border-white/5
-      `}
-    >
-      {/* ── Header ─────────────────────────────── */}
-      <div className={`flex items-center h-16 px-3 shrink-0 border-b border-white/[0.06] ${open ? 'gap-3' : 'justify-center'}`}>
-        {open && (
-          <div className="flex items-center gap-2.5 flex-1 min-w-0">
-            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-900/40 shrink-0">
-              <HeartIcon className="w-4 h-4 text-white" />
-            </div>
-            <div className="min-w-0">
-              <p className="text-white font-bold text-sm leading-none truncate">ClinicPro</p>
-              <p className="text-slate-500 text-[10px] leading-none mt-0.5">پنل مدیریت</p>
-            </div>
-          </div>
-        )}
+    <aside className="sidebar">
+      {/* Brand */}
+      <div className="sidebar-brand">
+        <div className="brand-logo">
+          <HeartIcon style={{ width: 20, height: 20 }} />
+        </div>
+        <div className="brand-text">
+          <b>ClinicPro</b>
+          <span>پنل مدیریت</span>
+        </div>
         <button
-          onClick={toggle}
-          className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-white/8 transition-colors shrink-0"
-          title={open ? 'بستن منو' : 'باز کردن منو'}
+          onClick={toggleSidebar}
+          className="icon-btn"
+          style={{ marginInlineStart: 'auto', width: 32, height: 32, flexShrink: 0 }}
+          title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}
         >
-          <Bars3Icon className="w-5 h-5" />
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+            <line x1="3" y1="6" x2="21" y2="6" />
+            <line x1="3" y1="12" x2="21" y2="12" />
+            <line x1="3" y1="18" x2="21" y2="18" />
+          </svg>
         </button>
       </div>
 
-      {/* ── Navigation ─────────────────────────── */}
-      <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
-        {sections.map((section, si) => (
-          <div key={section.label} className={si > 0 ? 'mt-4' : ''}>
-            {open ? (
-              <p className="text-[10px] font-semibold text-slate-600 uppercase tracking-widest px-3 py-1.5 mb-0.5">
-                {section.label}
-              </p>
-            ) : (
-              <div className="border-t border-white/[0.06] mx-1 my-2" />
-            )}
+      {/* Navigation */}
+      <nav className="nav">
+        {sections.map((section) => (
+          <div className="nav-group" key={section.label}>
+            <span className="nav-label">{section.label}</span>
             {section.items.map(({ to, icon: Icon, label }) => (
               <NavLink
                 key={to}
                 to={to}
-                title={!open ? label : undefined}
-                className={({ isActive }) => `
-                  relative flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm
-                  transition-all duration-150 group
-                  ${isActive
-                    ? 'bg-violet-500/15 text-violet-300 font-semibold'
-                    : 'text-slate-500 hover:text-slate-200 hover:bg-white/[0.06]'}
-                `}
+                title={!sidebarOpen ? label : undefined}
+                className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}
               >
-                {({ isActive }) => (
-                  <>
-                    {isActive && (
-                      <span className="absolute right-0 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-violet-400 rounded-l-full" />
-                    )}
-                    <Icon className={`w-5 h-5 shrink-0 transition-transform duration-150 group-hover:scale-105 ${isActive ? 'text-violet-400' : ''}`} />
-                    {open && <span className="truncate">{label}</span>}
-                  </>
-                )}
+                <Icon style={{ width: 19, height: 19, flexShrink: 0 }} />
+                <span>{label}</span>
               </NavLink>
             ))}
           </div>
         ))}
       </nav>
 
-      {/* ── User footer ────────────────────────── */}
-      <div className="shrink-0 border-t border-white/[0.06] p-2.5">
-        {open ? (
-          <div className="flex items-center gap-3 rounded-xl px-3 py-2.5 hover:bg-white/[0.06] transition-colors group">
-            <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-xs font-bold shrink-0 shadow-md shadow-violet-900/30">
-              A
-            </div>
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-slate-300 truncate leading-none">Admin</p>
-              <p className="text-[11px] text-slate-600 truncate mt-0.5">مدیر سیستم</p>
-            </div>
-            <button
-              onClick={() => { logout(); navigate('/admin/login'); }}
-              className="text-slate-600 hover:text-red-400 transition-colors p-1 rounded-lg hover:bg-red-400/10 opacity-0 group-hover:opacity-100"
-              title="خروج"
-            >
-              <ArrowLeftOnRectangleIcon className="w-4 h-4" />
-            </button>
+      {/* User footer */}
+      <div className="sidebar-foot">
+        <div
+          className="user-chip"
+          onClick={() => { logout(); navigate('/admin/login'); }}
+          title="خروج از سیستم"
+        >
+          <div className="cp-avatar">A</div>
+          <div className="user-meta">
+            <b>Admin</b>
+            <span>مدیر سیستم</span>
           </div>
-        ) : (
-          <button
-            onClick={() => { logout(); navigate('/admin/login'); }}
-            className="w-full flex justify-center py-2.5 text-slate-600 hover:text-red-400 transition-colors rounded-xl hover:bg-red-400/10"
-            title="خروج"
-          >
-            <ArrowLeftOnRectangleIcon className="w-5 h-5" />
-          </button>
-        )}
+          <ArrowLeftOnRectangleIcon
+            style={{ width: 16, height: 16, flexShrink: 0, color: 'var(--text-3)' }}
+          />
+        </div>
       </div>
     </aside>
   );

assets/admin/components/layout/Topbar.tsx

@@ -1,57 +1,221 @@
 import React from 'react';
-import { BellIcon, SunIcon, MoonIcon, Bars3Icon } from '@heroicons/react/24/outline';
-import { useUiStore } from '../../stores/uiStore';
+import { useLocation } from 'react-router-dom';
+import {
+  BellIcon, SunIcon, MoonIcon, Bars3Icon, Cog6ToothIcon,
+  MagnifyingGlassIcon, XMarkIcon, CheckIcon,
+} from '@heroicons/react/24/outline';
+import { ChevronLeftIcon } from '@heroicons/react/24/outline';
+import { useUiStore, HUES, type BrandHue } from '../../stores/uiStore';
 
-export default function Topbar() {
-  const toggleSidebar = useUiStore((s) => s.toggleSidebar);
-  const darkMode = useUiStore((s) => s.darkMode);
-  const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
+const CRUMBS: Record<string, string[]> = {
+  '/admin/dashboard':       ['داشبورد'],
+  '/admin/users':           ['کاربران'],
+  '/admin/doctors':         ['پزشکان'],
+  '/admin/clinics':         ['کلینیک‌ها'],
+  '/admin/appointments':    ['مدیریت', 'نوبت‌ها'],
+  '/admin/payments':        ['مدیریت', 'پرداخت‌ها'],
+  '/admin/settlements':     ['مدیریت', 'تسویه‌حساب'],
+  '/admin/comments':        ['محتوا', 'نظرات'],
+  '/admin/ratings':         ['محتوا', 'امتیازها'],
+  '/admin/blogs':           ['محتوا', 'بلاگ'],
+  '/admin/sms':             ['محتوا', 'پیامک'],
+  '/admin/categories':      ['سیستم', 'دسته‌بندی‌ها'],
+  '/admin/representations': ['سیستم', 'نمایندگان'],
+  '/admin/secretaries':     ['سیستم', 'منشی‌ها'],
+};
+
+function getCrumbs(pathname: string): string[] {
+  if (CRUMBS[pathname]) return CRUMBS[pathname];
+  const entry = Object.entries(CRUMBS).find(([k]) => pathname.startsWith(k + '/'));
+  return entry ? entry[1] : ['داشبورد'];
+}
+
+interface Props {
+  onMobileMenuOpen?: () => void;
+}
+
+export default function Topbar({ onMobileMenuOpen }: Props) {
+  const location           = useLocation();
+  const toggleSidebar      = useUiStore((s) => s.toggleSidebar);
+  const darkMode           = useUiStore((s) => s.darkMode);
+  const toggleDarkMode     = useUiStore((s) => s.toggleDarkMode);
+  const density            = useUiStore((s) => s.density);
+  const setDensity         = useUiStore((s) => s.setDensity);
+  const brandHue           = useUiStore((s) => s.brandHue);
+  const setBrandHue        = useUiStore((s) => s.setBrandHue);
+  const sidebarOpen        = useUiStore((s) => s.sidebarOpen);
+  const settingsPanelOpen  = useUiStore((s) => s.settingsPanelOpen);
+  const toggleSettingsPanel = useUiStore((s) => s.toggleSettingsPanel);
+
+  const crumbs = getCrumbs(location.pathname);
 
   return (
-    <header className="h-14 bg-white dark:bg-gray-900 border-b border-slate-200 dark:border-gray-700/50 flex items-center justify-between px-4 lg:px-6 shrink-0 transition-colors duration-200">
-      {/* Left side (RTL: right side visually) */}
-      <button
-        onClick={toggleSidebar}
-        className="lg:hidden w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
-      >
-        <Bars3Icon className="w-5 h-5" />
-      </button>
+    <>
+      <header className="topbar">
+        {/* Sidebar toggle — desktop only */}
+        <button className="icon-btn hidden lg:grid" onClick={toggleSidebar}
+          title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}>
+          <Bars3Icon style={{ width: 20, height: 20 }} />
+        </button>
 
-      <div className="flex-1" />
+        {/* Mobile menu open — mobile only */}
+        <button className="icon-btn grid lg:hidden" onClick={onMobileMenuOpen} title="منو">
+          <Bars3Icon style={{ width: 20, height: 20 }} />
+        </button>
 
-      {/* Right side actions */}
-      <div className="flex items-center gap-1">
-        {/* Dark mode toggle */}
-        <button
-          onClick={toggleDarkMode}
-          className="w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
-          title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
-        >
+        {/* Search bar */}
+        <div className="topbar-search">
+          <MagnifyingGlassIcon style={{ width: 18, height: 18, flexShrink: 0 }} />
+          <input placeholder="جستجوی بیمار، پزشک، نوبت..." readOnly />
+          <kbd>⌘K</kbd>
+        </div>
+
+        <div style={{ flex: 1 }} />
+
+        {/* Breadcrumbs */}
+        <nav className="topbar-crumbs">
+          {crumbs.map((crumb, i) => (
+            <React.Fragment key={i}>
+              {i > 0 && <ChevronLeftIcon style={{ width: 13, height: 13 }} />}
+              {i === crumbs.length - 1 ? <b>{crumb}</b> : <span>{crumb}</span>}
+            </React.Fragment>
+          ))}
+        </nav>
+
+        <div style={{ width: 1, height: 24, background: 'var(--border)' }} />
+
+        {/* Settings */}
+        <button className="icon-btn" onClick={toggleSettingsPanel} title="شخصی‌سازی">
+          <Cog6ToothIcon style={{ width: 19, height: 19 }} />
+        </button>
+
+        {/* Dark mode */}
+        <button className="icon-btn" onClick={toggleDarkMode} title={darkMode ? 'حالت روشن' : 'حالت تاریک'}>
           {darkMode
-            ? <SunIcon className="w-5 h-5 text-amber-400" />
-            : <MoonIcon className="w-5 h-5" />}
+            ? <SunIcon  style={{ width: 19, height: 19, color: '#f59e0b' }} />
+            : <MoonIcon style={{ width: 19, height: 19 }} />}
         </button>
 
-        {/* Notifications */}
-        <button className="relative w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
-          <BellIcon className="w-5 h-5" />
-          <span className="absolute top-2 right-2 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-gray-900" />
+        {/* Bell */}
+        <button className="icon-btn" title="اعلان‌ها">
+          <BellIcon style={{ width: 19, height: 19 }} />
+          <span className="dot" />
         </button>
 
-        {/* Divider */}
-        <div className="w-px h-6 bg-slate-200 dark:bg-gray-700 mx-1" />
-
         {/* Avatar */}
-        <div className="flex items-center gap-2.5 cursor-pointer pl-1">
-          <div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-sm font-bold shadow-sm">
-            A
-          </div>
-          <div className="hidden sm:block">
-            <p className="text-sm font-semibold text-slate-700 dark:text-slate-200 leading-none">Admin</p>
-            <p className="text-[11px] text-slate-400 dark:text-slate-500 leading-none mt-0.5">مدیر سیستم</p>
+        <div className="cp-avatar" style={{ cursor: 'pointer' }}>A</div>
+      </header>
+
+      {/* Settings Panel */}
+      {settingsPanelOpen && (
+        <div
+          className="overlay"
+          style={{ placeItems: 'stretch', justifyContent: 'flex-start' }}
+          onClick={toggleSettingsPanel}
+        >
+          <div
+            className="modal settings-panel"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="modal-head">
+              <h2>شخصی‌سازی</h2>
+              <button className="mini-btn" onClick={toggleSettingsPanel}>
+                <XMarkIcon style={{ width: 18, height: 18 }} />
+              </button>
+            </div>
+            <div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
+
+              {/* Theme */}
+              <div className="form-row">
+                <label>حالت نمایش</label>
+                <div className="seg" style={{ width: '100%' }}>
+                  <button
+                    className={!darkMode ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => { if (darkMode) toggleDarkMode(); }}
+                  >
+                    <SunIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
+                    روشن
+                  </button>
+                  <button
+                    className={darkMode ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => { if (!darkMode) toggleDarkMode(); }}
+                  >
+                    <MoonIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
+                    تیره
+                  </button>
+                </div>
+              </div>
+
+              {/* Brand color */}
+              <div className="form-row">
+                <label>رنگ اصلی</label>
+                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
+                  {HUES.map((hue) => (
+                    <button
+                      key={hue.h}
+                      onClick={() => setBrandHue(hue as BrandHue)}
+                      title={hue.name}
+                      style={{
+                        width: 42, height: 42, borderRadius: 12,
+                        background: `oklch(0.55 ${hue.c} ${hue.h})`,
+                        border: brandHue.h === hue.h ? '3px solid var(--text)' : '3px solid transparent',
+                        boxShadow: 'var(--shadow-sm)',
+                        display: 'grid', placeItems: 'center', color: '#fff', cursor: 'pointer',
+                      }}
+                    >
+                      {brandHue.h === hue.h && <CheckIcon style={{ width: 18, height: 18 }} />}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              {/* Density */}
+              <div className="form-row">
+                <label>تراکم اطلاعات</label>
+                <div className="seg" style={{ width: '100%' }}>
+                  <button
+                    className={density === 'comfortable' ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => setDensity('comfortable')}
+                  >جادار</button>
+                  <button
+                    className={density === 'compact' ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => setDensity('compact')}
+                  >فشرده</button>
+                </div>
+              </div>
+
+              {/* Sidebar */}
+              <div className="form-row">
+                <label>سایدبار</label>
+                <div className="seg" style={{ width: '100%' }}>
+                  <button
+                    className={sidebarOpen ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => { if (!sidebarOpen) toggleSidebar(); }}
+                  >کامل</button>
+                  <button
+                    className={!sidebarOpen ? 'on' : ''}
+                    style={{ flex: 1 }}
+                    onClick={() => { if (sidebarOpen) toggleSidebar(); }}
+                  >جمع‌شده</button>
+                </div>
+              </div>
+
+              <div style={{
+                padding: 14, background: 'var(--surface-2)', borderRadius: 'var(--r)',
+                fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.9, marginTop: 8,
+              }}>
+                <Cog6ToothIcon style={{ width: 15, height: 15, verticalAlign: 'middle', marginInlineEnd: 6 }} />
+                تنظیمات شما به‌صورت خودکار ذخیره می‌شود و در بازدید بعدی حفظ می‌ماند.
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-    </header>
+      )}
+    </>
   );
 }