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

assets/admin/pages/SettingsMenuPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { ChevronLeftIcon } from '@heroicons/react/24/outline';
-import { menuForRole } from '../components/layout/SettingsLayout';
+import { groupedMenuForRole } from '../components/layout/settingsMenu';
 import { useAuthStore } from '../stores/authStore';
 import { usePermissions } from '../hooks/usePermissions';
 
@@ -10,58 +10,72 @@ import { usePermissions } from '../hooks/usePermissions';
  * A full-width tappable list of the settings sections available to the current
  * role (mobile-first, matches the Figma mobile design). Each section links to
  * its route; on desktop the same sections render the shell via SettingsLayout.
+ *
+ * روی موبایل کل این فهرست بالای محتوا می‌نشیند، پس ۱۶ ردیفِ یکدست یعنی اسکرول
+ * طولانیِ بی‌نشانه. دسته‌ها همان دسته‌های سایدبار دسکتاپ‌اند (`settingsMenu.ts`).
  */
 export default function SettingsMenuPage() {
   const primaryRole = useAuthStore((s) => s.primaryRole);
   const scope = useAuthStore((s) => s.context?.scope);
   const { can } = usePermissions();
-  const items = menuForRole(primaryRole, can, scope);
+  const groups = groupedMenuForRole(primaryRole, can, scope);
 
   return (
     <div className="fade-in" style={{ maxWidth: 720, margin: '0 auto' }}>
       <h1 className="section-title" style={{ marginBottom: 16 }}>تنظیمات</h1>
 
-      <div style={{
-        background: 'var(--surface)', border: '1px solid var(--border)',
-        borderRadius: 'var(--r-lg)', overflow: 'hidden',
-      }}>
-        {items.map((item, idx) => {
-          const Icon = item.icon;
-          const disabled = !item.to;
-          const rowStyle: React.CSSProperties = {
-            display: 'flex', alignItems: 'center', gap: 12,
-            padding: '16px 18px', fontSize: 15, fontFamily: 'inherit',
-            borderTop: idx === 0 ? 'none' : '1px solid var(--border)',
-            color: disabled ? 'var(--text-3)' : 'var(--text)',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            background: 'transparent', width: '100%', textAlign: 'right',
-          };
-          const inner = (
-            <>
-              <Icon style={{ width: 20, height: 20, flexShrink: 0, color: disabled ? 'var(--text-3)' : 'var(--primary)' }} />
-              <span style={{ flex: 1, fontWeight: 600 }}>{item.label}</span>
-              {disabled
-                ? <span style={{ fontSize: 11, color: 'var(--text-3)' }}>به‌زودی</span>
-                : <ChevronLeftIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />}
-            </>
-          );
-          return disabled ? (
-            <button key={item.key} type="button" disabled style={{ ...rowStyle, border: 'none', borderTop: rowStyle.borderTop }}>
-              {inner}
-            </button>
-          ) : (
-            <Link
-              key={item.key}
-              to={item.to!}
-              style={rowStyle}
-              onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
-              onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
-            >
-              {inner}
-            </Link>
-          );
-        })}
-      </div>
+      {groups.map((group) => (
+        <section key={group.key} aria-label={group.label} style={{ marginBottom: 20 }}>
+          <h2 style={{
+            fontSize: 13, fontWeight: 700, color: 'var(--text-3)',
+            marginBottom: 8, paddingInlineStart: 4,
+          }}>
+            {group.label}
+          </h2>
+
+          <div style={{
+            background: 'var(--surface)', border: '1px solid var(--border)',
+            borderRadius: 'var(--r-lg)', overflow: 'hidden',
+          }}>
+            {group.items.map((item, idx) => {
+              const Icon = item.icon;
+              const disabled = !item.to;
+              const rowStyle: React.CSSProperties = {
+                display: 'flex', alignItems: 'center', gap: 12,
+                padding: '16px 18px', fontSize: 15, fontFamily: 'inherit',
+                borderTop: idx === 0 ? 'none' : '1px solid var(--border)',
+                color: disabled ? 'var(--text-3)' : 'var(--text)',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                background: 'transparent', width: '100%', textAlign: 'right',
+              };
+              const inner = (
+                <>
+                  <Icon style={{ width: 20, height: 20, flexShrink: 0, color: disabled ? 'var(--text-3)' : 'var(--primary)' }} />
+                  <span style={{ flex: 1, fontWeight: 600 }}>{item.label}</span>
+                  {disabled
+                    ? <span style={{ fontSize: 11, color: 'var(--text-3)' }}>به‌زودی</span>
+                    : <ChevronLeftIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />}
+                </>
+              );
+              return disabled ? (
+                <button key={item.key} type="button" disabled style={{ ...rowStyle, border: 'none', borderTop: rowStyle.borderTop }}>
+                  {inner}
+                </button>
+              ) : (
+                <Link
+                  key={item.key}
+                  to={item.to!}
+                  style={rowStyle}
+                  onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
+                  onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
+                >
+                  {inner}
+                </Link>
+              );
+            })}
+          </div>
+        </section>
+      ))}
     </div>
   );
 }