refactor(settings): unify settings sidebar across all pages

SettingsLayout rendered its own role-gated aside while the subscription page
rendered PurchaseSubscriptionSidebar, so /admin/subscription and other settings
pages (sms-wallet, ...) showed two different settings menus. Make SettingsLayout
render the shared PurchaseSubscriptionSidebar and have SubscriptionPage use
SettingsLayout too, so every settings page shows one identical menu. menuForRole
/ SETTINGS_MENU are kept for the mobile settings list (SettingsMenuPage).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/admin/pages/SubscriptionPage.tsx

@@ -9,7 +9,7 @@ import type { SubscriptionPlan, MySubscriptionData, SubscriptionPeriod } from '.
 import { usePaymentConfig } from '../hooks/usePaymentConfig';
 import { formatRial, formatNumber } from '../lib/utils';
 import Modal from '../components/ui/Modal';
-import PurchaseSubscriptionSidebar from '../components/layout/PurchaseSubscriptionSidebar';
+import SettingsLayout from '../components/layout/SettingsLayout';
 import {
   SparkleIcon, PlanCardPerson, CloseCircleFilled, GiftIcon, InfoCircleRedFilled,
 } from './subscriptionIcons';
@@ -116,10 +116,8 @@ export default function SubscriptionPage() {
   };
 
   return (
-    <div className="fade-in" dir="rtl" style={{ width: '100%' }}>
-      <div className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5">
-        <PurchaseSubscriptionSidebar active="subscription" />
-
+    <>
+      <SettingsLayout active="subscription">
         <div
           style={{ background: 'var(--surface)', minWidth: 0 }}
           className="px-4 py-4 md:px-6 md:py-6 rounded-[var(--r-lg)]"
@@ -166,7 +164,7 @@ export default function SubscriptionPage() {
             )}
           </div>
         </div>
-      </div>
+      </SettingsLayout>
 
       {/* ── Payment modal (gateway selection) ── */}
       <Modal
@@ -264,7 +262,7 @@ export default function SubscriptionPage() {
           </div>
         )}
       </Modal>
-    </div>
+    </>
   );
 }