kasy-cli 1.37.0 → 1.38.0

package/templates/firebase/lib/features/settings/ui/components/admin/admin_page.dart

@@ -7,11 +7,12 @@ import 'package:go_router/go_router.dart';
 import 'package:kasy_kit/components/kasy_app_bar.dart';
 import 'package:kasy_kit/components/kasy_bottom_sheet.dart';
 import 'package:kasy_kit/components/kasy_button.dart';
+import 'package:kasy_kit/components/kasy_sidebar.dart';
 import 'package:kasy_kit/components/kasy_status_tag.dart';
-import 'package:kasy_kit/components/kasy_tabs.dart';
 import 'package:kasy_kit/components/kasy_text_field.dart';
 import 'package:kasy_kit/core/app_update/update_available_sheet.dart';
-import 'package:kasy_kit/core/config/features.dart';
+import 'package:kasy_kit/core/bottom_menu/sidebar_focus.dart';
+import 'package:kasy_kit/core/bottom_menu/web_content_wrapper.dart';
 import 'package:kasy_kit/core/data/models/user.dart';
 import 'package:kasy_kit/core/dev_inspector/dev_inspector.dart';
 import 'package:kasy_kit/core/rating/widgets/review_popup.dart';
@@ -19,46 +20,171 @@ import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
 import 'package:kasy_kit/core/toast/toast_service.dart';
 import 'package:kasy_kit/core/web_device_preview/web_device_preview.dart';
+import 'package:kasy_kit/core/widgets/responsive_layout.dart';
 import 'package:kasy_kit/core/widgets/update_bottom_sheet.dart';
 import 'package:kasy_kit/features/feedbacks/api/entities/feature_request_entity.dart';
 import 'package:kasy_kit/features/feedbacks/api/feature_request_api.dart';
+import 'package:kasy_kit/features/home/home_components_page.dart';
 import 'package:kasy_kit/features/notifications/api/local_notifier.dart';
 import 'package:kasy_kit/features/notifications/providers/models/notification.dart'
     as kasy_kit;
 import 'package:kasy_kit/features/settings/ui/components/admin/admin_routes.dart';
 import 'package:kasy_kit/features/settings/ui/components/admin/admin_users_tab.dart';
+import 'package:kasy_kit/features/settings/ui/components/admin/send_push_notification_page.dart';
+import 'package:kasy_kit/features/settings/ui/widgets/kasy_user_avatar.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
+import 'package:kasy_kit/features/subscriptions/ui/component/premium_page_factory.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
 import 'package:kasy_kit/router.dart';
 import 'package:package_info_plus/package_info_plus.dart';
-import 'package:shared_preferences/shared_preferences.dart';
 
-/// Full-screen developer admin console (debug only).
+// ─────────────────────────────────────────────────────────────────────────────
+// Admin sections — single source of truth shared by the router (URL branches)
+// and the sidebar (nav items), so the two can never drift out of sync.
+// ─────────────────────────────────────────────────────────────────────────────
+
+/// A navigable admin section. Each maps to a real URL branch in the router.
+///
+/// The first three are top-level rows under the "ADMIN" label; the rest live
+/// inside the sidebar's expandable "Ferramentas" submenu
+/// ([AdminSectionDef.inToolsGroup]). [components] and [debug] are developer-only
+/// (their branches register only in [kDebugMode]).
+enum AdminSection {
+  overview,
+  users,
+  requests,
+  sendPush,
+  paywalls,
+  components,
+  debug,
+}
+
+/// Descriptor for one admin section: its real URL [path], sidebar [icon] and the
+/// [build]er for its (body-only) view. [inToolsGroup] places the row inside the
+/// sidebar's "Ferramentas" submenu instead of the top-level list.
+class AdminSectionDef {
+  final AdminSection id;
+  final String path;
+  final IconData icon;
+  final Widget Function() build;
+  final bool inToolsGroup;
+  const AdminSectionDef({
+    required this.id,
+    required this.path,
+    required this.icon,
+    required this.build,
+    this.inToolsGroup = false,
+  });
+}
+
+/// Base URL of the admin console. Every section is this or a child of it, so the
+/// router's security guard can match the whole area with a single prefix.
+const String adminBasePath = '/admin';
+
+/// The admin sections, in sidebar/URL order. The four "Ferramentas" sub-screens
+/// are real sections too (own branch, own URL, persistent rail) — Send push and
+/// Paywalls ship in production; Components and Debug are developer-only and only
+/// appear in debug builds. The router (branches) and the sidebar (nav rows) both
+/// read this single list, so they can never drift.
+List<AdminSectionDef> adminSections() => [
+  AdminSectionDef(
+    id: AdminSection.overview,
+    path: adminBasePath,
+    icon: KasyIcons.dashboard,
+    build: () => const _OverviewTab(),
+  ),
+  AdminSectionDef(
+    id: AdminSection.users,
+    path: '$adminBasePath/users',
+    icon: KasyIcons.users,
+    build: () => const _UsersTab(),
+  ),
+  AdminSectionDef(
+    id: AdminSection.requests,
+    path: '$adminBasePath/requests',
+    icon: KasyIcons.idea,
+    build: () => const _RequestsTab(),
+  ),
+  // ── "Ferramentas" submenu ───────────────────────────────────────────────
+  AdminSectionDef(
+    id: AdminSection.sendPush,
+    path: adminRouteSendPush,
+    icon: KasyIcons.notificationActive,
+    build: () => const SendPushNotificationPage(),
+    inToolsGroup: true,
+  ),
+  AdminSectionDef(
+    id: AdminSection.paywalls,
+    path: adminRoutePaywalls,
+    icon: KasyIcons.payment,
+    build: () => const _PaywallsTab(),
+    inToolsGroup: true,
+  ),
+  if (kDebugMode) ...[
+    AdminSectionDef(
+      id: AdminSection.components,
+      path: adminRouteComponents,
+      icon: KasyIcons.widgets,
+      build: () => const _ComponentsTab(),
+      inToolsGroup: true,
+    ),
+    AdminSectionDef(
+      id: AdminSection.debug,
+      path: adminRouteDebug,
+      icon: KasyIcons.note,
+      build: () => const _DebugTab(),
+      inToolsGroup: true,
+    ),
+  ],
+];
+
+/// Localized sidebar / app-bar label for a section.
+String adminSectionLabel(AdminSection id) {
+  final tabs = t.admin_console.tabs;
+  return switch (id) {
+    AdminSection.overview => tabs.overview,
+    AdminSection.users => tabs.users,
+    AdminSection.requests => tabs.requests,
+    AdminSection.sendPush => t.home.features_page.send_push_title,
+    AdminSection.paywalls => t.settings.admin.paywalls,
+    AdminSection.components => t.home.dashboard.components_title,
+    AdminSection.debug => tabs.debug,
+  };
+}
+
+/// Persistent chrome for the admin console: the navigation rail (sidebar on
+/// desktop, drawer on mobile) wrapping the routed section content. Each section
+/// is a real, URL-addressable screen ([adminSections]); the rail reflects and
+/// drives [StatefulNavigationShell.currentIndex] so the browser URL, the back
+/// button and web state-restoration all behave like the rest of the app.
 ///
-/// Vercel-style layout: frosted "Admin" app bar + horizontally-scrollable
-/// underline tabs over a content column that is centred and width-capped so the
-/// console reads as a real dashboard on web/desktop instead of a stretched
-/// phone screen. Replaces the old admin bottom sheet — reached via the
-/// double-tap on the settings version label; popping returns to Settings.
+/// Reached by `context.push('/admin')` (double-tap on the settings version
+/// label); popping returns to the app. Built from the same design system as the
+/// real [KasySidebar]/[KasyAppBar] so it reads as native product chrome.
 ///
-/// TOP-LEVEL route (sibling of '/', outside the BottomMenu shell) so it never
-/// renders the web sidebar — the admin is a dev tool, not product chrome.
-class AdminPage extends ConsumerStatefulWidget {
-  const AdminPage({super.key});
+/// Access: the router redirects non-admins away from `/admin*` in production
+/// (see the guard in `router.dart`) — the real lock is at the routing layer, not
+/// just hidden UI. In debug anyone reaches it; server-backed sections still gate
+/// their data by role internally.
+class AdminShell extends ConsumerStatefulWidget {
+  final StatefulNavigationShell navigationShell;
+  const AdminShell({super.key, required this.navigationShell});
 
   @override
-  ConsumerState<AdminPage> createState() => _AdminPageState();
+  ConsumerState<AdminShell> createState() => _AdminShellState();
 }
 
-class _AdminPageState extends ConsumerState<AdminPage> {
-  int _tab = 0;
+class _AdminShellState extends ConsumerState<AdminShell> {
+  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
 
   @override
   Widget build(BuildContext context) {
     final bool isAdmin = ref.watch(userStateNotifierProvider).user.isAdmin;
     final ac = t.admin_console;
 
-    // The console itself opens for admins (even in release) or anyone in debug.
+    // Defense in depth: the router already redirects non-admins away from
+    // /admin* in production, so this only ever renders in the unexpected case
+    // the shell is reached without the role (never in a release build).
     if (!isAdmin && !kDebugMode) {
       return Scaffold(
         backgroundColor: context.colors.background,
@@ -68,7 +194,7 @@ class _AdminPageState extends ConsumerState<AdminPage> {
             const KasyAppBar(title: 'Admin'),
             Expanded(
               child: _EmptyState(
-                icon: Icons.lock_outline_rounded,
+                icon: KasyIcons.security,
                 title: ac.tabs.overview,
                 message: ac.requires_admin,
               ),
@@ -78,43 +204,159 @@ class _AdminPageState extends ConsumerState<AdminPage> {
       );
     }
 
-    // Server-data tabs always present (gated by role inside). Dev tabs (Kit,
-    // Tools) only in debug — they are developer conveniences, not admin data.
-    final List<({String label, Widget view})> entries = [
-      (label: ac.tabs.overview, view: const _OverviewTab()),
-      (label: ac.tabs.users, view: const _UsersTab()),
-      (label: ac.tabs.requests, view: const _RequestsTab()),
-      if (kDebugMode) (label: ac.tabs.kit, view: const _KitTab()),
-      if (kDebugMode) (label: ac.tabs.tools, view: const _ToolsTab()),
-    ];
-    final int tab = _tab.clamp(0, entries.length - 1);
+    final List<AdminSectionDef> sections = adminSections();
+    final int index = widget.navigationShell.currentIndex;
+    final double width = MediaQuery.sizeOf(context).width;
+    // Same breakpoints as the app shell (bottom_menu.dart +
+    // web_content_wrapper.dart): the sidebar shows from tablet up (collapsing to
+    // the icon rail on tablet), and the web header replaces the app bar only on
+    // desktop.
+    final bool hasSidebar = width >= DeviceType.medium.breakpoint;
+
+    void selectEntry(int i) {
+      // Re-tapping the active section resets its branch to the root, the
+      // standard StatefulShellRoute / tab-bar behaviour.
+      widget.navigationShell.goBranch(
+        i,
+        initialLocation: i == widget.navigationShell.currentIndex,
+      );
+      if (!hasSidebar) _scaffoldKey.currentState?.closeDrawer();
+    }
+
+    // Profile block in the rail, populated exactly like the app sidebar
+    // (bottom_menu.dart): the real name/email + the signed-in user's avatar.
+    final User user = ref.watch(userStateNotifierProvider).user;
+    final (String profileName, String profileEmail) = switch (user) {
+      final AuthenticatedUserData u => (
+        (u.name?.isNotEmpty ?? false) ? u.name! : u.email.split('@').first,
+        u.email,
+      ),
+      _ => (t.settings.my_account, ''),
+    };
+
+    // The app's real KasySidebar, driven by the admin sections (same component,
+    // same logo/dividers/collapse/tooltips/profile — no bespoke copy). The
+    // top-level sections are flat rows; the four Tools sub-screens live inside an
+    // expandable "Ferramentas" submenu (the same dropdown recipe as the app's
+    // Income menu), so each keeps the rail and its own URL.
+    KasySidebar buildRail({required bool isDrawer}) {
+      final List<KasySidebarItem> items = [
+        for (int i = 0; i < sections.length; i++)
+          if (!sections[i].inToolsGroup)
+            KasySidebarItem(
+              icon: sections[i].icon,
+              label: adminSectionLabel(sections[i].id),
+              selected: i == index,
+              onTap: () => selectEntry(i),
+            ),
+      ];
+      final List<KasySidebarSubItem> toolsChildren = [
+        for (int i = 0; i < sections.length; i++)
+          if (sections[i].inToolsGroup)
+            KasySidebarSubItem(
+              label: adminSectionLabel(sections[i].id),
+              selected: i == index,
+              onTap: () => selectEntry(i),
+            ),
+      ];
+      if (toolsChildren.isNotEmpty) {
+        items.add(
+          KasySidebarItem(
+            icon: KasyIcons.briefcase,
+            label: t.admin_console.tabs.tools,
+            children: toolsChildren,
+          ),
+        );
+      }
+      return KasySidebar(
+        isDrawer: isDrawer,
+        items: items,
+        sectionLabel: 'ADMIN',
+        footerItems: [
+          KasySidebarItem(
+            icon: KasyIcons.arrowBackIos,
+            label: ac.back_to_app,
+            onTap: () {
+              if (!hasSidebar) _scaffoldKey.currentState?.closeDrawer();
+              _backToApp(context);
+            },
+          ),
+        ],
+        profileName: profileName,
+        profileEmail: profileEmail,
+        profileAvatar: const KasyUserAvatar(),
+      );
+    }
+
+    final Widget content = widget.navigationShell;
+
+    // Tablet + desktop: the real KasySidebar persists and EVERY section gets the
+    // same chrome as the rest of the app (bottom_menu.dart): the web header on
+    // desktop / the rootTab app bar on tablet, both supplied here so the section
+    // bodies stay chrome-free. Keyboard order matches the app shell:
+    // OrderedTraversalPolicy flows Tab sidebar -> header -> content;
+    // KasyFocusableSidebar anchors the initial focus to the rail and hosts the
+    // skip-to-content link; WebContentWrapper carries the desktop web header +
+    // the content focus target (orders 2 and 3) exactly like every app page.
+    if (hasSidebar) {
+      final Widget right = WebContentWrapper(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            KasyAppBar(
+              title: adminSectionLabel(sections[index].id),
+              style: KasyAppBarStyle.rootTab,
+              onThemeToggle: () => ThemeProvider.of(context).toggle(),
+            ),
+            Expanded(child: content),
+          ],
+        ),
+      );
+      return Scaffold(
+        backgroundColor: context.colors.background,
+        body: FocusTraversalGroup(
+          policy: OrderedTraversalPolicy(),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              FocusTraversalOrder(
+                order: const NumericFocusOrder(1),
+                child: KasyFocusableSidebar(child: buildRail(isDrawer: false)),
+              ),
+              Expanded(child: right),
+            ],
+          ),
+        ),
+      );
+    }
 
+    // Phone: the page app bar (with a menu orb) over a drawer holding the same
+    // KasySidebar — the standard mobile pattern.
     return Scaffold(
+      key: _scaffoldKey,
       backgroundColor: context.colors.background,
+      // Square edge / flat / surface fill all come from the global DrawerThemeData
+      // (core/theme/universal_theme.dart); here we only size it to the rail.
+      drawer: Drawer(
+        width: kasySidebarWidth,
+        child: buildRail(isDrawer: true),
+      ),
       body: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          const KasyAppBar(title: 'Admin'),
-          const SizedBox(height: KasySpacing.sm),
-          _MaxWidth(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(
-                horizontal: KasySpacing.pageHorizontalGutter,
-              ),
-              child: KasyTabs(
-                tabs: [for (final e in entries) e.label],
-                selectedIndex: tab,
-                onTabSelected: (i) => setState(() => _tab = i),
-                variant: KasyTabsVariant.secondary,
+          KasyAppBar(
+            title: adminSectionLabel(sections[index].id),
+            leading: Builder(
+              builder: (ctx) => KasyChromeOrbIconButton(
+                icon: KasyIcons.menu,
+                iconSize: KasyIconSize.md,
+                foregroundColor: context.colors.onSurface,
+                onPressed: () => Scaffold.of(ctx).openDrawer(),
+                tooltip: MaterialLocalizations.of(ctx).openAppDrawerTooltip,
               ),
             ),
           ),
-          Expanded(
-            child: IndexedStack(
-              index: tab,
-              children: [for (final e in entries) e.view],
-            ),
-          ),
+          Expanded(child: content),
         ],
       ),
     );
@@ -296,110 +538,21 @@ class _StatCard extends StatelessWidget {
   }
 }
 
-/// Tappable action card: icon bubble + title/subtitle + chevron, with ripple.
-class _ActionCard extends StatelessWidget {
-  final IconData icon;
-  final String title;
-  final String? subtitle;
-  final VoidCallback onTap;
-  final Color? tone;
-  const _ActionCard({
-    required this.icon,
-    required this.title,
-    required this.onTap,
-    this.subtitle,
-    this.tone,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    final BorderRadius radius = BorderRadius.circular(_cardRadius);
-    final Color accent = tone ?? context.colors.primary;
-    return DecoratedBox(
-      decoration: BoxDecoration(
-        borderRadius: radius,
-        boxShadow: [KasyShadows.component(context)],
-      ),
-      child: Material(
-        color: context.colors.surface,
-        borderRadius: radius,
-        clipBehavior: Clip.antiAlias,
-        child: InkWell(
-          onTap: onTap,
-          child: Container(
-            decoration: BoxDecoration(
-              borderRadius: radius,
-              border: Border.all(
-                color: context.colors.outline.withValues(
-                  alpha: context.isDark ? 0.45 : 0.6,
-                ),
-              ),
-            ),
-            padding: const EdgeInsets.all(KasySpacing.md),
-            child: Row(
-              children: [
-                _IconBubble(icon: icon, tone: accent),
-                const SizedBox(width: KasySpacing.smd),
-                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    mainAxisSize: MainAxisSize.min,
-                    children: [
-                      Text(
-                        title,
-                        maxLines: 1,
-                        overflow: TextOverflow.ellipsis,
-                        style: context.textTheme.titleSmall?.copyWith(
-                          color: context.colors.onSurface,
-                          fontWeight: FontWeight.w700,
-                        ),
-                      ),
-                      if (subtitle != null) ...[
-                        const SizedBox(height: 2),
-                        Text(
-                          subtitle!,
-                          maxLines: 2,
-                          overflow: TextOverflow.ellipsis,
-                          style: context.textTheme.bodySmall?.copyWith(
-                            color: context.colors.muted,
-                            height: 1.3,
-                          ),
-                        ),
-                      ],
-                    ],
-                  ),
-                ),
-                const SizedBox(width: KasySpacing.sm),
-                Icon(
-                  KasyIcons.chevronRight,
-                  size: 18,
-                  color: context.colors.muted,
-                ),
-              ],
-            ),
-          ),
-        ),
-      ),
-    );
-  }
-}
-
 /// Lays children out in as many equal columns as fit [minItemWidth], capped at
-/// [maxCols]. Collapses to a single full-width column on narrow screens.
+/// four. Collapses to a single full-width column on narrow screens.
 class _ResponsiveGrid extends StatelessWidget {
   final List<Widget> children;
   final double minItemWidth;
-  final int maxCols;
   const _ResponsiveGrid({
     required this.children,
     this.minItemWidth = 240,
-    this.maxCols = 4,
   });
 
   @override
   Widget build(BuildContext context) {
     if (children.isEmpty) return const SizedBox.shrink();
     const double gap = KasySpacing.md;
+    const int maxCols = 4;
     return LayoutBuilder(
       builder: (context, constraints) {
         final double maxW = constraints.maxWidth;
@@ -420,10 +573,18 @@ class _ResponsiveGrid extends StatelessWidget {
   }
 }
 
-/// Pops the admin page back to Settings — used by actions that historically
-/// closed the bottom sheet so their result is visible over the app.
+/// Leaves the admin console entirely, back to the app. Pops the ROOT navigator
+/// so the whole admin shell is removed at once — even when a detail screen is
+/// open in a section's nested navigator (a plain pop would only close the
+/// detail). Falls back to going home when it can't pop (e.g. a web reload / deep
+/// link that landed directly on an /admin URL).
 void _backToApp(BuildContext context) {
-  if (context.canPop()) context.pop();
+  final NavigatorState root = Navigator.of(context, rootNavigator: true);
+  if (root.canPop()) {
+    root.pop();
+  } else {
+    context.go('/');
+  }
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
@@ -440,6 +601,8 @@ class _OverviewTab extends ConsumerWidget {
     final bool isAuth = user is AuthenticatedUserData;
     final bool isAdmin = user.isAdmin;
     final ov = t.admin_console.overview;
+    final admin = t.settings.admin;
+    final groups = t.admin_console.groups;
     final String account = isAuth ? user.email : ov.guest;
     final String uid = userState.user.idOrNull ?? '—';
 
@@ -450,7 +613,7 @@ class _OverviewTab extends ConsumerWidget {
           minItemWidth: 200,
           children: [
             _StatCard(
-              icon: Icons.cloud_done_rounded,
+              icon: KasyIcons.monitor,
               tone: context.colors.primary,
               value: 'Firebase',
               label: ov.backend,
@@ -458,7 +621,7 @@ class _OverviewTab extends ConsumerWidget {
             // Feature-request count reads the server — admins only.
             if (isAdmin)
               _StatCard(
-                icon: Icons.how_to_vote_rounded,
+                icon: KasyIcons.voteUp,
                 tone: context.colors.primary,
                 value: ref.watch(_adminRequestsProvider).maybeWhen(
                       data: (l) => '${l.length}',
@@ -509,6 +672,33 @@ class _OverviewTab extends ConsumerWidget {
             ],
           ),
         ),
+        // Dev preview tools are toggled by keyboard shortcut (no buttons). Shown
+        // only in debug — never in production.
+        if (kDebugMode) ...[
+          const SizedBox(height: KasySpacing.lg),
+          _GroupLabel(groups.preview),
+          _CardShell(
+            padding: const EdgeInsets.symmetric(
+              horizontal: KasySpacing.md,
+              vertical: KasySpacing.xs,
+            ),
+            child: Column(
+              children: [
+                _ShortcutRow(
+                  label: admin.inspector_fab_title,
+                  keys: devInspectorShortcutLabel(),
+                ),
+                if (kIsWeb) ...[
+                  const SettingsDivider(),
+                  _ShortcutRow(
+                    label: admin.device_preview_title,
+                    keys: webDevicePreviewShortcutLabel(),
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ],
         const SizedBox(height: KasySpacing.md),
         Text(
           ov.users_hint,
@@ -571,6 +761,39 @@ class _InfoRow extends StatelessWidget {
   }
 }
 
+/// A dev-tool name with its global keyboard shortcut on the right (read-only).
+class _ShortcutRow extends StatelessWidget {
+  final String label;
+  final String keys;
+  const _ShortcutRow({required this.label, required this.keys});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: KasySpacing.smd),
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              label,
+              style: context.textTheme.bodyMedium?.copyWith(
+                color: context.colors.onSurface,
+              ),
+            ),
+          ),
+          const SizedBox(width: KasySpacing.sm),
+          Text(
+            keys,
+            style: context.kasyTextTheme.rowValue.copyWith(
+              color: context.colors.muted,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 class _CopyButton extends StatelessWidget {
   final VoidCallback onTap;
   const _CopyButton({required this.onTap});
@@ -583,7 +806,7 @@ class _CopyButton extends StatelessWidget {
       child: Padding(
         padding: const EdgeInsets.all(6),
         child: Icon(
-          Icons.content_copy_rounded,
+          KasyIcons.copy,
           size: 16,
           color: context.colors.primary,
         ),
@@ -655,7 +878,7 @@ class _UsersTab extends ConsumerWidget {
     final u = t.admin_console.users;
     if (!isAdmin) {
       return _EmptyState(
-        icon: Icons.lock_outline_rounded,
+        icon: KasyIcons.security,
         title: u.title,
         message: t.admin_console.requires_admin,
       );
@@ -673,7 +896,7 @@ class _RequestsTab extends ConsumerWidget {
     final r = t.admin_console.requests;
     if (!isAdmin) {
       return _EmptyState(
-        icon: Icons.lock_outline_rounded,
+        icon: KasyIcons.security,
         title: r.title,
         message: t.admin_console.requires_admin,
       );
@@ -968,262 +1191,212 @@ class _RequestEditorSheetState extends ConsumerState<_RequestEditorSheet> {
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Kit — feature demos + the component gallery
+// Tools sub-screens — each is a real console section (body only; the admin
+// shell supplies the chrome), reached from the sidebar's "Ferramentas" submenu.
 // ─────────────────────────────────────────────────────────────────────────────
 
-class _KitTab extends ConsumerWidget {
-  const _KitTab();
-
-  @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    final page = t.home.features_page;
-    final dash = t.home.dashboard;
-    final groups = t.admin_console.groups;
+/// Settings-style card: rows separated by hairline dividers — the exact clean
+/// list pattern of the Settings screen (no busy card grid). Shared by the Tools
+/// sections.
+Widget _groupCard(List<Widget> rows) => _CardShell(
+  child: Column(
+    mainAxisSize: MainAxisSize.min,
+    children: [
+      for (int i = 0; i < rows.length; i++) ...[
+        if (i > 0) const SettingsDivider(),
+        rows[i],
+      ],
+    ],
+  ),
+);
 
-    final List<Widget> features = <Widget>[
-      if (withFeedback)
-        _ActionCard(
-          icon: KasyIcons.message,
-          title: page.feedback_title,
-          subtitle: page.feedback_description,
-          onTap: () => context.push('/feedback'),
-        ),
-      _ActionCard(
-        icon: KasyIcons.notification,
-        title: page.notification_title,
-        subtitle: page.notification_description,
-        onTap: () {
-          final settings = ref.read(notificationsSettingsProvider);
-          final localNotifier = ref.read(localNotifierProvider);
-          kasy_kit.Notification.withData(
-            id: 'fake-id',
-            title: page.notification_demo_title,
-            body: page.notification_demo_body,
-            createdAt: DateTime.now(),
-            notifier: localNotifier,
-            notifierSettings: settings,
-          ).show();
-        },
-      ),
-      _ActionCard(
-        icon: KasyIcons.notificationActive,
-        title: page.send_push_title,
-        subtitle: page.send_push_description,
-        onTap: () => context.push(adminRouteSendPush),
-      ),
-      if (withRevenuecat)
-        _ActionCard(
-          icon: KasyIcons.payment,
-          title: page.paywall_title,
-          subtitle: page.paywall_description,
-          onTap: () => context.push('/premium'),
-        ),
-    ];
+/// Paywalls panel — lists every paywall variant. Production section; the live
+/// preview route is debug-only, so a row previews only in debug builds.
+class _PaywallsTab extends StatelessWidget {
+  const _PaywallsTab();
 
+  @override
+  Widget build(BuildContext context) {
+    final admin = t.settings.admin;
     return _TabScroll(
       children: [
-        _GroupLabel(groups.features),
-        _ResponsiveGrid(minItemWidth: 280, maxCols: 2, children: features),
-        const SizedBox(height: KasySpacing.lg),
-        _GroupLabel(groups.showcase),
-        _ResponsiveGrid(
-          minItemWidth: 280,
-          maxCols: 2,
-          children: [
-            _ActionCard(
-              icon: KasyIcons.widgets,
-              title: dash.components_title,
-              subtitle: dash.components_subtitle,
-              tone: context.colors.success,
-              onTap: () => context.push('/components'),
+        _GroupLabel(admin.paywalls),
+        _groupCard([
+          for (final paywall in PaywallFactory.values)
+            SettingsTile(
+              icon: KasyIcons.payment,
+              title: paywall.name,
+              onTap: () => context.push(adminRoutePremiumPreview(paywall.name)),
             ),
-          ],
-        ),
+        ]),
       ],
     );
   }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Tools — every developer toggle/action migrated from the old admin sheet
-// ─────────────────────────────────────────────────────────────────────────────
+/// The UI-kit catalog as a console section (debug only). Width-capped + centered
+/// to the same [_contentMaxWidth] as every other section (Paywalls, Overview…),
+/// so the console reads as one consistent column instead of the catalog
+/// stretching edge-to-edge on desktop.
+class _ComponentsTab extends StatelessWidget {
+  const _ComponentsTab();
+
+  @override
+  Widget build(BuildContext context) =>
+      const _MaxWidth(child: HomeComponentsCatalog());
+}
 
-class _ToolsTab extends ConsumerWidget {
-  const _ToolsTab();
+/// Developer tooling (debug only): identity helpers, debug actions and a
+/// local-notification test — the leftovers that aren't worth a screen of their
+/// own, grouped as clean Settings-style lists.
+class _DebugTab extends ConsumerWidget {
+  const _DebugTab();
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final userState = ref.watch(userStateNotifierProvider);
+    final page = t.home.features_page;
     final admin = t.settings.admin;
     final groups = t.admin_console.groups;
-
-    final List<Widget> previews = <Widget>[
-      ValueListenableBuilder<bool>(
-        valueListenable: devInspectorEnabledNotifier,
-        builder: (context, enabled, _) {
-          return SettingsSwitchTile(
-            icon: KasyIcons.widgets,
-            title: admin.inspector_fab_title,
-            subtitle:
-                '${admin.inspector_fab_subtitle_prefix} ${devInspectorShortcutLabel()}',
-            value: enabled,
-            onChanged: (v) async {
-              final p = await SharedPreferences.getInstance();
-              await p.setBool(devInspectorEnabledPrefKey, v);
-              devInspectorEnabledNotifier.value = v;
-              if (v && context.mounted) _backToApp(context);
-            },
-          );
-        },
-      ),
-      if (kIsWeb)
-        ValueListenableBuilder<bool>(
-          valueListenable: webDevicePreviewEnabledNotifier,
-          builder: (context, enabled, _) {
-            return SettingsSwitchTile(
-              icon: KasyIcons.phoneAndroid,
-              title: admin.device_preview_title,
-              subtitle:
-                  '${admin.inspector_fab_subtitle_prefix} ${webDevicePreviewShortcutLabel()}',
-              value: enabled,
-              onChanged: (v) async {
-                final p = await SharedPreferences.getInstance();
-                await p.setBool(webDevicePreviewEnabledPrefKey, v);
-                webDevicePreviewEnabledNotifier.value = v;
-                if (v && context.mounted) _backToApp(context);
-              },
-            );
-          },
-        ),
-    ];
-
-    final List<Widget> tools = <Widget>[
-      _ActionCard(
-        icon: KasyIcons.note,
-        title: admin.update_bottom_sheet,
-        // Preview the sheet over the current screen; dismissing (tap-outside /
-        // Continue) just closes it and returns here, without navigating away.
-        onTap: () => showUpdateBottomSheet(
-          context: navigatorKey.currentContext!,
-          version: '0.0.0',
-        ),
-      ),
-      _ActionCard(
-        icon: KasyIcons.download,
-        title: admin.preview_update_available,
-        // Previews the optional (dismissible) sheet so the design can be
-        // reviewed without TestFlight or Remote Config. The forced variant is
-        // the same layout, blocking — test it via app_min_version.
-        onTap: () => showUpdateAvailableSheet(
-          navigatorKey.currentContext!,
-          forced: false,
-        ),
-      ),
-      _ActionCard(
-        icon: KasyIcons.payment,
-        title: admin.paywalls,
-        onTap: () => context.push(adminRoutePaywalls),
-      ),
-      _ActionCard(
-        icon: KasyIcons.check,
-        title: admin.test_onboarding,
-        onTap: () => ref.read(goRouterProvider).go('/onboarding'),
-      ),
-      _ActionCard(
-        icon: KasyIcons.notificationActive,
-        title: admin.send_push_title,
-        onTap: () => context.push(adminRouteSendPush),
-      ),
-      _ActionCard(
-        icon: KasyIcons.star,
-        title: admin.ask_review,
-        // Has a design (the review dialog), so it's previewable on web too —
-        // only the store action no-ops there.
-        onTap: () => showReviewDialog(context, ref, force: true),
-      ),
-      _ActionCard(
-        icon: KasyIcons.message,
-        title: admin.home_widgets_panel,
-        onTap: () => context.push(adminRouteHomeWidgets),
-      ),
-    ];
-
-    final List<Widget> identity = <Widget>[
-      _ActionCard(
-        icon: KasyIcons.person,
-        title: admin.copy_user_id,
-        onTap: () {
-          Clipboard.setData(
-            ClipboardData(text: userState.user.idOrNull ?? 'no-id (guest)'),
-          );
-          ref.read(toastProvider).alert(
-                title: t.common.copied,
-                text: admin.user_id_copied,
-              );
-        },
-      ),
-      _ActionCard(
-        icon: KasyIcons.notification,
-        title: admin.copy_fcm_token,
-        onTap: () async {
-          if (kIsWeb) {
-            ref.read(toastProvider).alert(
-                  title: t.common.native_only_title,
-                  text: admin.native_only,
-                );
-            return;
-          }
-          final token = await FirebaseMessaging.instance.getToken();
-          if (token == null) {
-            ref.read(toastProvider).alert(
-                  title: t.common.unavailable,
-                  text: admin.fcm_token_unavailable,
-                );
-            return;
-          }
-          await Clipboard.setData(ClipboardData(text: token));
-          ref.read(toastProvider).alert(
-                title: t.common.copied,
-                text: admin.fcm_token_copied,
-              );
-        },
-      ),
-      _ActionCard(
-        icon: KasyIcons.notificationActive,
-        title: admin.ask_notification,
-        onTap: () {
-          if (kIsWeb) {
-            ref.read(toastProvider).alert(
-                  title: t.common.native_only_title,
-                  text: admin.native_only,
-                );
-            return;
-          }
-          ref.read(notificationsSettingsProvider).askPermission();
-        },
-      ),
-    ];
+    final userState = ref.watch(userStateNotifierProvider);
 
     return _TabScroll(
       children: [
-        _GroupLabel(groups.preview),
-        _CardShell(
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              for (int i = 0; i < previews.length; i++) ...[
-                if (i > 0) const SettingsDivider(),
-                previews[i],
-              ],
-            ],
+        // ── Identity ────────────────────────────────────────────────────────
+        _GroupLabel(groups.identity),
+        _groupCard([
+          SettingsTile(
+            icon: KasyIcons.person,
+            title: admin.copy_user_id,
+            onTap: () {
+              Clipboard.setData(
+                ClipboardData(
+                  text: userState.user.idOrNull ?? 'no-id (guest)',
+                ),
+              );
+              ref.read(toastProvider).alert(
+                    title: t.common.copied,
+                    text: admin.user_id_copied,
+                  );
+            },
           ),
-        ),
+          SettingsTile(
+            icon: KasyIcons.notification,
+            title: admin.copy_fcm_token,
+            onTap: () async {
+              if (kIsWeb) {
+                ref.read(toastProvider).alert(
+                      title: t.common.native_only_title,
+                      text: admin.native_only,
+                    );
+                return;
+              }
+              final token = await FirebaseMessaging.instance.getToken();
+              if (token == null) {
+                ref.read(toastProvider).alert(
+                      title: t.common.unavailable,
+                      text: admin.fcm_token_unavailable,
+                    );
+                return;
+              }
+              await Clipboard.setData(ClipboardData(text: token));
+              ref.read(toastProvider).alert(
+                    title: t.common.copied,
+                    text: admin.fcm_token_copied,
+                  );
+            },
+          ),
+          SettingsTile(
+            icon: KasyIcons.notificationActive,
+            title: admin.ask_notification,
+            onTap: () {
+              if (kIsWeb) {
+                ref.read(toastProvider).alert(
+                      title: t.common.native_only_title,
+                      text: admin.native_only,
+                    );
+                return;
+              }
+              ref.read(notificationsSettingsProvider).askPermission();
+            },
+          ),
+        ]),
+
         const SizedBox(height: KasySpacing.lg),
+
+        // ── Debug actions ───────────────────────────────────────────────────
         _GroupLabel(groups.debug_actions),
-        _ResponsiveGrid(minItemWidth: 280, maxCols: 2, children: tools),
+        _groupCard([
+          SettingsTile(
+            icon: KasyIcons.note,
+            title: admin.update_bottom_sheet,
+            // Preview the sheet over the current screen; dismissing just closes
+            // it and returns here, without navigating away.
+            onTap: () => showUpdateBottomSheet(
+              context: navigatorKey.currentContext!,
+              version: '0.0.0',
+            ),
+          ),
+          SettingsTile(
+            icon: KasyIcons.download,
+            title: admin.preview_update_available,
+            // Previews the optional (dismissible) sheet. The forced variant is
+            // the same layout, blocking — test it via app_min_version.
+            onTap: () => showUpdateAvailableSheet(
+              navigatorKey.currentContext!,
+              forced: false,
+            ),
+          ),
+          SettingsTile(
+            icon: KasyIcons.check,
+            title: admin.test_onboarding,
+            onTap: () => ref.read(goRouterProvider).go('/onboarding'),
+          ),
+          SettingsTile(
+            icon: KasyIcons.star,
+            title: admin.ask_review,
+            // Has a design (the review dialog), previewable on web too — only
+            // the store action no-ops there.
+            onTap: () => showReviewDialog(context, ref, force: true),
+          ),
+          SettingsTile(
+            icon: KasyIcons.message,
+            title: admin.home_widgets_panel,
+            // Pushed full-screen (its own back button), a drill-down from here.
+            onTap: () => context.push(adminRouteHomeWidgets),
+          ),
+        ]),
+
         const SizedBox(height: KasySpacing.lg),
-        _GroupLabel(groups.identity),
-        _ResponsiveGrid(minItemWidth: 280, maxCols: 2, children: identity),
+
+        // ── Notification test ───────────────────────────────────────────────
+        _GroupLabel(groups.notification_test),
+        _groupCard([
+          SettingsTile(
+            icon: KasyIcons.notification,
+            title: page.notification_title,
+            onTap: () {
+              // Local notifications don't fire on web — tell the user instead
+              // of doing nothing when tapped.
+              if (kIsWeb) {
+                ref.read(toastProvider).alert(
+                      title: t.common.native_only_title,
+                      text: admin.native_only,
+                    );
+                return;
+              }
+              final settings = ref.read(notificationsSettingsProvider);
+              final localNotifier = ref.read(localNotifierProvider);
+              kasy_kit.Notification.withData(
+                id: 'fake-id',
+                title: page.notification_demo_title,
+                body: page.notification_demo_body,
+                createdAt: DateTime.now(),
+                notifier: localNotifier,
+                notifierSettings: settings,
+              ).show();
+            },
+          ),
+        ]),
       ],
     );
   }