kasy-cli 1.31.14 → 1.32.0

package/templates/firebase/lib/features/settings/settings_page.dart

@@ -13,10 +13,10 @@ import 'package:kasy_kit/core/security/biometric_ui_bundle.dart';
 import 'package:kasy_kit/core/states/logout_action.dart';
 import 'package:kasy_kit/core/states/user_state_notifier.dart';
 import 'package:kasy_kit/core/theme/theme.dart';
-import 'package:kasy_kit/core/widgets/kasy_focus_ring.dart';
 import 'package:kasy_kit/core/widgets/kasy_hover.dart';
 import 'package:kasy_kit/features/settings/ui/components/avatar_component.dart';
 import 'package:kasy_kit/features/settings/ui/components/delete_user_component.dart';
+import 'package:kasy_kit/features/settings/ui/components/edit_name_sheet.dart';
 import 'package:kasy_kit/features/settings/ui/components/language_switcher.dart';
 import 'package:kasy_kit/features/settings/ui/widgets/settings_tile.dart';
 import 'package:kasy_kit/i18n/translations.g.dart';
@@ -31,6 +31,7 @@ class SettingsPage extends ConsumerWidget {
     final tr = context.t.settings;
     final user = ref.watch(userStateNotifierProvider).user;
     final isAuthenticated = user is AuthenticatedUserData;
+    final String? userId = user.idOrNull;
     final (displayName, displayEmail) = switch (user) {
       final AuthenticatedUserData u => (
         (u.name?.isNotEmpty ?? false) ? u.name! : u.email.split('@').first,
@@ -38,41 +39,43 @@ class SettingsPage extends ConsumerWidget {
       ),
       _ => (tr.my_account, ''),
     };
+    // The real stored name (may be empty) — what the editor seeds with, as
+    // opposed to the email-prefix fallback shown for display.
+    final String editableName = switch (user) {
+      final AuthenticatedUserData u => u.name ?? '',
+      _ => '',
+    };
+
+    final double width = MediaQuery.sizeOf(context).width;
+    // Two-pane master/detail (Vercel/Stripe/Claude) spans the whole desktop
+    // range and only collapses to a single column on tablet/phone.
+    final bool wide = width >= 1024;
+    // The "hide bars on scroll" toggle only makes sense on phones — tablet and
+    // desktop use the sidebar, which never hides.
+    final bool isPhone = width < 768;
 
     return KasyOverlayScaffold(
       title: tr.title,
       appBarStyle: KasyAppBarStyle.rootTab,
       hideAppBarOnScroll: true,
-      trailing: Builder(
-        builder: (ctx) => KasyChromeOrbIconButton(
-          icon: KasyIcons.logout,
-          iconSize: 20,
-          foregroundColor: ctx.colors.error,
-          onPressed: () => confirmLogout(ctx, ref),
-        ),
-      ),
       slivers: [
         SliverToBoxAdapter(
           child: Builder(
             builder: (context) {
-              // Breakpoint by viewport width — the industry standard and the
-              // project's own `large` cutoff (1024px ≈ Tailwind lg). Two-pane
-              // spans the whole desktop range and only collapses to a single
-              // column when entering tablet territory (the layout phones and
-              // tablets already use), instead of switching while still wide.
-              final bool wide = MediaQuery.sizeOf(context).width >= 1024;
-
               if (!wide) {
                 return Column(
                   crossAxisAlignment: CrossAxisAlignment.stretch,
                   children: [
-                    ProfileTile(
-                      title: displayName,
-                      subtitle: displayEmail,
+                    const _AccountAvatarHeader(),
+                    const SizedBox(height: KasySpacing.md),
+                    ..._accountFields(
+                      context,
+                      userId: userId,
+                      name: displayName,
+                      editableName: editableName,
+                      email: displayEmail,
                       isAuthenticated: isAuthenticated,
-                      onTap: isAuthenticated
-                          ? null
-                          : () => context.push('/signup'),
+                      onRegister: () => context.push('/signup'),
                     ),
                     const SizedBox(height: KasySpacing.xl),
                     ..._sections(
@@ -80,19 +83,21 @@ class SettingsPage extends ConsumerWidget {
                       ref,
                       isAuthenticated: isAuthenticated,
                       isAdmin: user.isAdmin,
+                      isPhone: isPhone,
                     ),
                     const SizedBox(height: KasySpacing.xl),
                   ],
                 );
               }
 
-              // Desktop: a SaaS-style master/detail (Vercel/Stripe/Claude) —
-              // a section nav on the left, the selected section on the right.
               return _SettingsDesktopView(
+                userId: userId,
                 name: displayName,
+                editableName: editableName,
                 email: displayEmail,
                 isAuthenticated: isAuthenticated,
                 isAdmin: user.isAdmin,
+                isPhone: isPhone,
               );
             },
           ),
@@ -101,95 +106,40 @@ class SettingsPage extends ConsumerWidget {
     );
   }
 
-  /// The settings sections (everything except the profile header), shared
-  /// between the single-column (mobile/tablet) and two-pane (desktop) layouts.
+  /// The settings sections below the account block — shared by the single
+  /// column (mobile/tablet) layout. Ends with sign-out, delete and version.
   List<Widget> _sections(
     BuildContext context,
     WidgetRef ref, {
     required bool isAuthenticated,
     required bool isAdmin,
+    required bool isPhone,
   }) {
     final tr = context.t.settings;
     return [
       _SectionLabel(tr.section_preferences_label),
       const SizedBox(height: KasySpacing.xs),
-      SettingsContainer(
-        child: Wrap(
-          children: [
-            const ThemeSwitcher(),
-            const SettingsDivider(),
-            const HapticFeedbackSwitcher(),
-            const SettingsDivider(),
-            if (kShowHideChromeOnScrollSetting) ...[
-              const HideChromeOnScrollSwitcher(),
-              const SettingsDivider(),
-            ],
-            const LanguageSwitcher(),
-            if (withLocalReminders) ...[
-              const SettingsDivider(),
-              SettingsTile(
-                icon: KasyIcons.notification,
-                title: tr.reminders,
-                onTap: () => context.push('/reminder'),
-              ),
-            ],
-            if (withFeedback) ...[
-              const SettingsDivider(),
-              SettingsTile(
-                icon: KasyIcons.message,
-                title: tr.feedback,
-                onTap: () => context.push('/feedback'),
-              ),
-            ],
-            if (withRevenuecat) ...[
-              const SettingsDivider(),
-              SettingsTile(
-                icon: KasyIcons.payment,
-                title: tr.premium,
-                onTap: () => context.push('/premium'),
-              ),
-            ],
-          ],
-        ),
-      ),
+      _settingsGroup(_preferenceRows(context, isPhone: isPhone)),
       if (isAuthenticated && !kIsWeb) ...[
         const SizedBox(height: KasySpacing.xl),
         _SectionLabel(tr.section_security_label),
         const SizedBox(height: KasySpacing.xs),
-        const SettingsContainer(
-          child: BiometricSwitcher(),
-        ),
+        const SettingsContainer(child: BiometricSwitcher()),
       ],
       const SizedBox(height: KasySpacing.xl),
       _SectionLabel(tr.section_support_label),
       const SizedBox(height: KasySpacing.xs),
-      SettingsContainer(
-        child: Wrap(
-          children: [
-            SettingsTile(
-              icon: KasyIcons.privacy,
-              title: tr.privacy,
-              onTap: () => launchUrl(Uri.parse('https://kasy.dev/privacy/')),
-            ),
-            const SettingsDivider(),
-            SettingsTile(
-              icon: KasyIcons.help,
-              title: tr.support,
-              onTap: () => launchUrl(Uri.parse('https://kasy.dev/')),
-            ),
-          ],
-        ),
-      ),
+      _settingsGroup(_supportRows(context)),
       // Admin entry — only for administrators or in development mode.
       if (isAdmin || kDebugMode) ...[
         const SizedBox(height: KasySpacing.xl),
-        SettingsContainer(
-          child: SettingsTile(
+        _settingsGroup([
+          SettingsTile(
             icon: Icons.admin_panel_settings_outlined,
             title: t.admin_console.settings_entry.title,
             onTap: () => context.push('/admin'),
           ),
-        ),
+        ]),
         const SizedBox(height: KasySpacing.sm),
         Padding(
           padding: const EdgeInsets.only(left: KasySpacing.xs),
@@ -202,6 +152,10 @@ class SettingsPage extends ConsumerWidget {
         ),
       ],
       const SizedBox(height: KasySpacing.xxl),
+      if (isAuthenticated) ...[
+        _settingsGroup([_LogoutRow(onTap: () => confirmLogout(context, ref))]),
+        const SizedBox(height: KasySpacing.xl),
+      ],
       const DeleteUserButton(),
       const SizedBox(height: KasySpacing.xl),
       const _VersionLabel(),
@@ -209,24 +163,132 @@ class SettingsPage extends ConsumerWidget {
   }
 }
 
+// ─── Shared building blocks ────────────────────────────────────────────────
+
+/// Wraps a list of settings rows in a refined card, inserting hairline
+/// dividers between them. The card matches the design-system elevated surface
+/// (soft shadow + hairline border) instead of the old flat block.
+Widget _settingsGroup(List<Widget> rows) {
+  return SettingsContainer(
+    child: Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        for (int i = 0; i < rows.length; i++) ...[
+          if (i > 0) const SettingsDivider(),
+          rows[i],
+        ],
+      ],
+    ),
+  );
+}
+
+/// The Preferences rows, shared between the mobile and desktop layouts.
+/// Platform-aware: haptics only on native, hide-on-scroll only on phones.
+List<Widget> _preferenceRows(BuildContext context, {required bool isPhone}) {
+  final tr = context.t.settings;
+  return [
+    const ThemeSwitcher(),
+    if (!kIsWeb) const HapticFeedbackSwitcher(),
+    if (kShowHideChromeOnScrollSetting && isPhone)
+      const HideChromeOnScrollSwitcher(),
+    const LanguageSwitcher(),
+    if (withLocalReminders)
+      SettingsTile(
+        icon: KasyIcons.notification,
+        title: tr.reminders,
+        onTap: () => context.push('/reminder'),
+      ),
+    if (withFeedback)
+      SettingsTile(
+        icon: KasyIcons.message,
+        title: tr.feedback,
+        onTap: () => context.push('/feedback'),
+      ),
+    if (withRevenuecat)
+      SettingsTile(
+        icon: KasyIcons.payment,
+        title: tr.premium,
+        onTap: () => context.push('/premium'),
+      ),
+  ];
+}
+
+/// The Support rows, shared between the mobile and desktop layouts.
+List<Widget> _supportRows(BuildContext context) {
+  final tr = context.t.settings;
+  return [
+    SettingsTile(
+      icon: KasyIcons.privacy,
+      title: tr.privacy,
+      onTap: () => launchUrl(Uri.parse('https://kasy.dev/privacy/')),
+    ),
+    SettingsTile(
+      icon: KasyIcons.help,
+      title: tr.support,
+      onTap: () => launchUrl(Uri.parse('https://kasy.dev/')),
+    ),
+  ];
+}
+
+/// The account identity fields, shared between the mobile and desktop layouts.
+/// Signed-in users get an editable Name row and a read-only Email row; guests
+/// get a single Register call to action.
+List<Widget> _accountFields(
+  BuildContext context, {
+  required String? userId,
+  required String name,
+  required String editableName,
+  required String email,
+  required bool isAuthenticated,
+  required VoidCallback onRegister,
+}) {
+  final tr = context.t.settings;
+  if (!isAuthenticated) {
+    return [
+      KasyButton(label: tr.register, expand: true, onPressed: onRegister),
+    ];
+  }
+  return [
+    _settingsGroup([
+      _FieldRow(
+        label: tr.name_label,
+        value: name,
+        onTap: userId == null
+            ? null
+            : () => showEditNameSheet(
+                  context,
+                  userId: userId,
+                  email: email,
+                  currentName: editableName,
+                ),
+      ),
+      _FieldRow(label: tr.email_label, value: email),
+    ]),
+  ];
+}
+
 class _SectionLabel extends StatelessWidget {
   final String label;
   const _SectionLabel(this.label);
 
   @override
   Widget build(BuildContext context) {
-    return Text(
-      label,
-      style: context.textTheme.labelMedium?.copyWith(
-        fontSize: 13,
-        color: context.colors.muted,
-        letterSpacing: 1.2,
-        fontWeight: FontWeight.w600,
+    // Quieter than before and aligned with the sidebar's section labels: small,
+    // gently tracked, muted — so it never out-shouts the content it heads.
+    return Padding(
+      padding: const EdgeInsets.only(left: KasySpacing.xs),
+      child: Text(
+        label,
+        style: KasyTextTheme.sectionLabel.copyWith(
+          color: context.colors.muted,
+        ),
       ),
     );
   }
 }
 
+/// Grouped surface for settings rows — the design-system elevated card with a
+/// settings-density radius.
 class SettingsContainer extends StatelessWidget {
   final Widget child;
 
@@ -234,121 +296,86 @@ class SettingsContainer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return KasyCard(
+      borderRadius: BorderRadius.circular(KasyRadius.lg),
       padding: const EdgeInsets.symmetric(
-        vertical: KasySpacing.smd,
         horizontal: KasySpacing.md,
-      ),
-      decoration: BoxDecoration(
-        borderRadius: KasyRadius.smBorderRadius,
-        color: context.colors.surface,
+        vertical: KasySpacing.xs,
       ),
       child: child,
     );
   }
 }
 
-class ProfileTile extends StatelessWidget {
-  final String title;
-  final String subtitle;
-  final bool isAuthenticated;
+/// A label + value row used in the Account section. With [onTap] it is an
+/// editable field (trailing chevron, keyboard-focusable); without it the value
+/// is read-only (e.g. the email).
+class _FieldRow extends StatelessWidget {
+  final String label;
+  final String value;
   final VoidCallback? onTap;
 
-  const ProfileTile({
-    super.key,
-    required this.title,
-    required this.subtitle,
-    required this.isAuthenticated,
-    this.onTap,
-  });
+  const _FieldRow({required this.label, required this.value, this.onTap});
 
   @override
   Widget build(BuildContext context) {
-    final Widget content = Padding(
-      padding: const EdgeInsets.symmetric(
-        vertical: KasySpacing.smd,
-        horizontal: KasySpacing.md,
-      ),
-      child: Row(
-        children: [
-          const EditableUserAvatar(
-            diameter: 70,
+    final Widget row = Row(
+      children: [
+        Text(
+          label,
+          style: context.textTheme.titleSmall?.copyWith(
+            color: context.colors.onSurface,
           ),
-          const SizedBox(width: KasySpacing.sm),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.center,
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                Text(
-                  title,
-                  textHeightBehavior: const TextHeightBehavior(
-                    applyHeightToFirstAscent: false,
-                    applyHeightToLastDescent: false,
-                  ),
-                  style: context.textTheme.titleMedium!.copyWith(
-                    color: context.colors.onSurface,
-                    fontWeight: FontWeight.w600,
-                    height: 1.12,
-                  ),
-                ),
-                if (subtitle.isNotEmpty) ...[
-                  Text(
-                    subtitle,
-                    textHeightBehavior: const TextHeightBehavior(
-                      applyHeightToFirstAscent: false,
-                      applyHeightToLastDescent: false,
-                    ),
-                    style: context.textTheme.bodySmall!.copyWith(
-                      color: context.colors.muted,
-                      height: 1.15,
-                    ),
-                  ),
-                ],
-                if (!isAuthenticated) ...[
-                  Text(
-                    context.t.settings.register,
-                    textHeightBehavior: const TextHeightBehavior(
-                      applyHeightToFirstAscent: false,
-                      applyHeightToLastDescent: false,
-                    ),
-                    style: context.textTheme.bodyLarge!.copyWith(
-                      color: context.colors.muted,
-                      fontWeight: FontWeight.w500,
-                      height: 1.15,
-                    ),
-                  ),
-                ],
-              ],
+        ),
+        const SizedBox(width: KasySpacing.md),
+        Expanded(
+          child: Text(
+            value,
+            textAlign: TextAlign.right,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+            style: context.textTheme.bodyMedium?.copyWith(
+              color: context.colors.muted,
             ),
           ),
-          if (onTap != null) const SettingsListChevron(),
+        ),
+        if (onTap != null) ...[
+          const SizedBox(width: KasySpacing.xs),
+          const SettingsListChevron(),
         ],
-      ),
+      ],
+    );
+    if (onTap == null) {
+      return Padding(
+        padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+        child: row,
+      );
+    }
+    return KasyHover(
+      onTap: onTap!,
+      hoverEnabled: false,
+      pressEnabled: false,
+      focusable: true,
+      borderRadius: KasyRadius.smBorderRadius,
+      semanticLabel: label,
+      padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
+      child: row,
     );
+  }
+}
 
-    return Container(
-      decoration: BoxDecoration(
-        borderRadius: KasyRadius.smBorderRadius,
-        color: context.colors.surface,
-      ),
-      child: ClipRRect(
-        borderRadius: KasyRadius.smBorderRadius,
-        child: onTap != null
-            ? KasyFocusRing(
-                onActivate: onTap,
-                borderRadius: KasyRadius.smBorderRadius,
-                gapColor: context.colors.surface,
-                // The InkWell keeps its tap ripple but yields focus to the ring,
-                // so the keyboard outline matches every other Kasy control.
-                child: InkWell(
-                  canRequestFocus: false,
-                  onTap: onTap,
-                  child: content,
-                ),
-              )
-            : content,
+/// The avatar header shown at the top of the Account block on the single-column
+/// (mobile/tablet) layout. Tapping the avatar changes the photo; identity text
+/// lives in the editable fields below, so nothing is shown twice.
+class _AccountAvatarHeader extends StatelessWidget {
+  const _AccountAvatarHeader();
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(
+      child: Padding(
+        padding: EdgeInsets.only(top: KasySpacing.sm),
+        child: EditableUserAvatar(diameter: 64),
       ),
     );
   }
@@ -391,16 +418,22 @@ String _titleCase(String s) =>
 }
 
 class _SettingsDesktopView extends ConsumerStatefulWidget {
+  final String? userId;
   final String name;
+  final String editableName;
   final String email;
   final bool isAuthenticated;
   final bool isAdmin;
+  final bool isPhone;
 
   const _SettingsDesktopView({
+    required this.userId,
     required this.name,
+    required this.editableName,
     required this.email,
     required this.isAuthenticated,
     required this.isAdmin,
+    required this.isPhone,
   });
 
   @override
@@ -450,12 +483,15 @@ class _SettingsDesktopViewState extends ConsumerState<_SettingsDesktopView> {
                 child: Align(
                   alignment: Alignment.topLeft,
                   child: ConstrainedBox(
-                    constraints: const BoxConstraints(maxWidth: 720),
+                    constraints: const BoxConstraints(maxWidth: 600),
                     child: _DesktopDetail(
                       section: _selected,
+                      userId: widget.userId,
                       name: widget.name,
+                      editableName: widget.editableName,
                       email: widget.email,
                       isAuthenticated: widget.isAuthenticated,
+                      isPhone: widget.isPhone,
                     ),
                   ),
                 ),
@@ -579,7 +615,7 @@ class _NavTile extends StatelessWidget {
         ),
         child: Row(
           children: [
-            Icon(icon, size: 20, color: fg),
+            Icon(icon, size: KasyIconSize.rowLeading, color: fg),
             const SizedBox(width: KasySpacing.sm),
             Text(
               label,
@@ -597,15 +633,21 @@ class _NavTile extends StatelessWidget {
 
 class _DesktopDetail extends ConsumerWidget {
   final _DesktopSection section;
+  final String? userId;
   final String name;
+  final String editableName;
   final String email;
   final bool isAuthenticated;
+  final bool isPhone;
 
   const _DesktopDetail({
     required this.section,
+    required this.userId,
     required this.name,
+    required this.editableName,
     required this.email,
     required this.isAuthenticated,
+    required this.isPhone,
   });
 
   @override
@@ -622,9 +664,8 @@ class _DesktopDetail extends ConsumerWidget {
           ),
           child: Text(
             title,
-            style: context.textTheme.headlineSmall?.copyWith(
+            style: KasyTextTheme.sectionTitle.copyWith(
               color: context.colors.onSurface,
-              fontWeight: FontWeight.w700,
             ),
           ),
         ),
@@ -634,86 +675,26 @@ class _DesktopDetail extends ConsumerWidget {
   }
 
   List<Widget> _content(BuildContext context, WidgetRef ref) {
-    final tr = context.t.settings;
     switch (section) {
       case _DesktopSection.account:
         return _accountContent(context, ref);
       case _DesktopSection.preferences:
-        return [
-          SettingsContainer(
-            child: Wrap(
-              children: [
-                const ThemeSwitcher(),
-                const SettingsDivider(),
-                const HapticFeedbackSwitcher(),
-                const SettingsDivider(),
-                if (kShowHideChromeOnScrollSetting) ...[
-                  const HideChromeOnScrollSwitcher(),
-                  const SettingsDivider(),
-                ],
-                const LanguageSwitcher(),
-                if (withLocalReminders) ...[
-                  const SettingsDivider(),
-                  SettingsTile(
-                    icon: KasyIcons.notification,
-                    title: tr.reminders,
-                    onTap: () => context.push('/reminder'),
-                  ),
-                ],
-                if (withFeedback) ...[
-                  const SettingsDivider(),
-                  SettingsTile(
-                    icon: KasyIcons.message,
-                    title: tr.feedback,
-                    onTap: () => context.push('/feedback'),
-                  ),
-                ],
-                if (withRevenuecat) ...[
-                  const SettingsDivider(),
-                  SettingsTile(
-                    icon: KasyIcons.payment,
-                    title: tr.premium,
-                    onTap: () => context.push('/premium'),
-                  ),
-                ],
-              ],
-            ),
-          ),
-        ];
+        return [_settingsGroup(_preferenceRows(context, isPhone: isPhone))];
       case _DesktopSection.security:
         return const [
           SettingsContainer(child: BiometricSwitcher()),
         ];
       case _DesktopSection.support:
-        return [
-          SettingsContainer(
-            child: Wrap(
-              children: [
-                SettingsTile(
-                  icon: KasyIcons.privacy,
-                  title: tr.privacy,
-                  onTap: () =>
-                      launchUrl(Uri.parse('https://kasy.dev/privacy/')),
-                ),
-                const SettingsDivider(),
-                SettingsTile(
-                  icon: KasyIcons.help,
-                  title: tr.support,
-                  onTap: () => launchUrl(Uri.parse('https://kasy.dev/')),
-                ),
-              ],
-            ),
-          ),
-        ];
+        return [_settingsGroup(_supportRows(context))];
       case _DesktopSection.admin:
         return [
-          SettingsContainer(
-            child: SettingsTile(
+          _settingsGroup([
+            SettingsTile(
               icon: Icons.admin_panel_settings_outlined,
               title: t.admin_console.settings_entry.title,
               onTap: () => context.push('/admin'),
             ),
-          ),
+          ]),
           const SizedBox(height: KasySpacing.sm),
           Padding(
             padding: const EdgeInsets.only(left: KasySpacing.xs),
@@ -729,51 +710,19 @@ class _DesktopDetail extends ConsumerWidget {
   }
 
   List<Widget> _accountContent(BuildContext context, WidgetRef ref) {
-    final tr = context.t.settings;
     return [
-      SettingsContainer(
-        child: Padding(
-          padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
-          child: Row(
-            children: [
-              const EditableUserAvatar(diameter: 56),
-              const SizedBox(width: KasySpacing.md),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Text(
-                      name,
-                      style: context.textTheme.titleMedium?.copyWith(
-                        color: context.colors.onSurface,
-                        fontWeight: FontWeight.w600,
-                      ),
-                    ),
-                    if (email.isNotEmpty)
-                      Text(
-                        email,
-                        style: context.textTheme.bodySmall?.copyWith(
-                          color: context.colors.muted,
-                        ),
-                      ),
-                  ],
-                ),
-              ),
-              if (!isAuthenticated)
-                KasyButton(
-                  label: tr.register,
-                  onPressed: () => context.push('/signup'),
-                ),
-            ],
-          ),
-        ),
+      ..._accountFields(
+        context,
+        userId: userId,
+        name: name,
+        editableName: editableName,
+        email: email,
+        isAuthenticated: isAuthenticated,
+        onRegister: () => context.push('/signup'),
       ),
       if (isAuthenticated) ...[
         const SizedBox(height: KasySpacing.xl),
-        SettingsContainer(
-          child: _LogoutRow(onTap: () => confirmLogout(context, ref)),
-        ),
+        _settingsGroup([_LogoutRow(onTap: () => confirmLogout(context, ref))]),
       ],
       const SizedBox(height: KasySpacing.xl),
       const DeleteUserButton(),
@@ -783,7 +732,7 @@ class _DesktopDetail extends ConsumerWidget {
   }
 }
 
-/// A danger-tinted "Sign out" row used in the desktop Account section.
+/// A danger-tinted "Sign out" row used in the Account section.
 class _LogoutRow extends StatelessWidget {
   final VoidCallback onTap;
 
@@ -801,11 +750,15 @@ class _LogoutRow extends StatelessWidget {
         padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
         child: Row(
           children: [
-            Icon(KasyIcons.logout, size: 21, color: context.colors.error),
+            Icon(
+              KasyIcons.logout,
+              size: KasyIconSize.rowLeading,
+              color: context.colors.error,
+            ),
             const SizedBox(width: KasySpacing.sm),
             Text(
               context.t.settings.logout,
-              style: context.textTheme.titleMedium?.copyWith(
+              style: context.textTheme.titleSmall?.copyWith(
                 color: context.colors.error,
               ),
             ),
@@ -874,7 +827,7 @@ class BiometricSwitcher extends ConsumerWidget {
         ),
         Padding(
           padding: const EdgeInsets.only(
-            left: 21 + KasySpacing.sm,
+            left: KasyIconSize.rowLeading + KasySpacing.sm,
             bottom: KasySpacing.xs,
           ),
           child: Text(
@@ -1011,12 +964,16 @@ class ThemeSwitcher extends StatelessWidget {
       padding: const EdgeInsets.symmetric(vertical: KasySpacing.sm),
       child: Row(
         children: [
-          Icon(KasyIcons.palette, size: 21, color: context.colors.onSurface),
+          Icon(
+            KasyIcons.palette,
+            size: KasyIconSize.rowLeading,
+            color: context.colors.onSurface,
+          ),
           const SizedBox(width: KasySpacing.sm),
           Expanded(
             child: Text(
               tr.theme_title,
-              style: context.textTheme.titleMedium?.copyWith(
+              style: context.textTheme.titleSmall?.copyWith(
                 color: context.colors.onSurface,
               ),
             ),