feat(settings): implement grouped menu structure and update related components

assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router';
 import { SearchHeaderP } from '../../pages/subscriptionIcons';
 import { useAuthStore } from '../../stores/authStore';
 import { usePermissions } from '../../hooks/usePermissions';
-import { menuForRole, type SettingsMenuItem } from './settingsMenu';
+import { groupMenu, menuForRole, type SettingsMenuItem } from './settingsMenu';
 
 /**
  * سایدبار تنظیمات — همان فهرستی که `SettingsMenuPage` روی موبایل نشان می‌دهد
@@ -21,6 +21,7 @@ const SECURITY_ITEM: SettingsMenuItem = {
   key: 'security',
   label: 'تنظیمات',
   icon: () => null,
+  group: 'account',
   alwaysOpen: true,
   disabled: true,
 };
@@ -30,13 +31,18 @@ export default function PurchaseSubscriptionSidebar({ active }: { active: string
   const primaryRole = useAuthStore((s) => s.primaryRole);
   const scope = useAuthStore((s) => s.context?.scope);
   const { can } = usePermissions();
-  const items = useMemo(
-    () => [
-      ...menuForRole(primaryRole, can, scope).filter((i) => !HIDDEN_KEYS.has(i.key)),
-      SECURITY_ITEM,
-    ].filter((i) => i.label.includes(query.trim())),
+  // گروه‌ها بعد از فیلترِ جستجو ساخته می‌شوند تا تیترِ دسته‌ای که هیچ نتیجه‌ای ندارد
+  // بالای فضای خالی نماند.
+  const groups = useMemo(
+    () => groupMenu(
+      [
+        ...menuForRole(primaryRole, can, scope).filter((i) => !HIDDEN_KEYS.has(i.key)),
+        SECURITY_ITEM,
+      ].filter((i) => i.label.includes(query.trim())),
+    ),
     [query, primaryRole, scope, can],
   );
+  const itemCount = groups.reduce((sum, g) => sum + g.items.length, 0);
 
   return (
     <aside
@@ -74,36 +80,46 @@ export default function PurchaseSubscriptionSidebar({ active }: { active: string
       </div>
 
       <nav>
-        {items.map((item) => {
-          const isActive = item.key === active;
-          const rowStyle: React.CSSProperties = {
-            borderRadius: 12, height: 44, marginBottom: 8,
-            display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
-            padding: '0 14px', fontSize: 16, fontWeight: isActive ? 700 : 500,
-            lineHeight: 1, textAlign: 'right',
-            background: isActive ? 'var(--accent)' : 'transparent',
-            color: isActive ? 'var(--on-primary)' : 'var(--text-2)',
-            cursor: item.to ? 'pointer' : 'not-allowed',
-            transition: 'background .14s',
-          };
-          const inner = <span style={{ flex: 1 }}>{item.label}</span>;
-          if (!item.to || item.disabled) {
-            return <div key={item.key} style={{ ...rowStyle, opacity: 0.55 }}>{inner}</div>;
-          }
-          return (
-            <Link
-              key={item.key}
-              to={item.to}
-              aria-current={isActive ? 'page' : undefined}
-              style={rowStyle}
-              onMouseEnter={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
-              onMouseLeave={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
-            >
-              {inner}
-            </Link>
-          );
-        })}
-        {items.length === 0 && (
+        {groups.map((group, groupIdx) => (
+          <section key={group.key} aria-label={group.label}>
+            <div style={{
+              fontSize: 12, fontWeight: 700, color: 'var(--text-3)', textAlign: 'right',
+              padding: '0 14px', marginTop: groupIdx === 0 ? 0 : 14, marginBottom: 6,
+            }}>
+              {group.label}
+            </div>
+            {group.items.map((item) => {
+              const isActive = item.key === active;
+              const rowStyle: React.CSSProperties = {
+                borderRadius: 12, height: 44, marginBottom: 8,
+                display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
+                padding: '0 14px', fontSize: 16, fontWeight: isActive ? 700 : 500,
+                lineHeight: 1, textAlign: 'right',
+                background: isActive ? 'var(--accent)' : 'transparent',
+                color: isActive ? 'var(--on-primary)' : 'var(--text-2)',
+                cursor: item.to ? 'pointer' : 'not-allowed',
+                transition: 'background .14s',
+              };
+              const inner = <span style={{ flex: 1 }}>{item.label}</span>;
+              if (!item.to || item.disabled) {
+                return <div key={item.key} style={{ ...rowStyle, opacity: 0.55 }}>{inner}</div>;
+              }
+              return (
+                <Link
+                  key={item.key}
+                  to={item.to}
+                  aria-current={isActive ? 'page' : undefined}
+                  style={rowStyle}
+                  onMouseEnter={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
+                  onMouseLeave={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
+                >
+                  {inner}
+                </Link>
+              );
+            })}
+          </section>
+        ))}
+        {itemCount === 0 && (
           <div style={{ padding: '12px 4px', fontSize: 13, color: 'var(--text-3)', textAlign: 'center' }}>
             موردی یافت نشد
           </div>