feat(backup): redesign backup settings screen with posture hero

The screen listed every backup action at equal weight, so the one that
mattered was the reader's problem to find. It now answers the same
question the reminder does, in three parts: the status rows state the
facts, one hero names the single most useful action, and the menu holds
everything else.

The hero is urgent when nothing is backed up (and replaces the Start
Backup row), asks a vault-only wallet for a physical backup, asks for a
test once the physical one is over a year old, and is absent when the
backup is fresh — no empty card, no heading over nothing. It derives its
posture from the same domain code the reminder uses, so the two surfaces
cannot disagree, but it reads the real tested dates rather than the
snooze-aware verdict: the screen keeps saying "last tested 14 months ago"
while the popup is quiet. It stays silent until the first load resolves,
because every wallet looks unprotected before then.

Rename the Recoverbull menu row to "Encrypted vault settings" to match
the status row's vocabulary. The key is deleted and re-added rather than
renamed: all 26 non-EN values still said "Recoverbull", and falling back
to English reads better than a translation of retired vocabulary.

Compose the three sections as separate builders so the fork can add its
metadata backup status row and menu row without touching hero logic.

Author: FrancisPouliot

lib/features/backup_settings/ui/screens/backup_settings_screen.dart

@@ -1,12 +1,16 @@
 import 'package:bb_mobile/core/themes/app_theme.dart';
 import 'package:bb_mobile/core/utils/build_context_x.dart';
+import 'package:bb_mobile/core/widgets/buttons/button.dart';
 import 'package:bb_mobile/core/widgets/navbar/top_bar.dart';
 import 'package:bb_mobile/core/widgets/settings_entry_item.dart';
+import 'package:bb_mobile/core/widgets/text/text.dart';
+import 'package:bb_mobile/features/backup_settings/domain/backup_health_reminder.dart';
 import 'package:bb_mobile/features/backup_settings/presentation/backup_settings_failure_l10n.dart';
 import 'package:bb_mobile/features/backup_settings/presentation/cubit/backup_settings_cubit.dart';
 import 'package:bb_mobile/features/backup_settings/ui/backup_settings_router.dart';
 import 'package:bb_mobile/features/backup_settings/ui/widgets/view_vault_key_warning_bottom_sheet.dart';
 import 'package:bb_mobile/features/labels/labels_facade.dart';
+import 'package:bb_mobile/features/test_wallet_backup/public/test_wallet_backup_routes.dart';
 import 'package:bb_mobile/features/transactions/ui/transactions_router.dart';
 import 'package:bb_mobile/features/recoverbull/presentation/bloc.dart';
 import 'package:bb_mobile/features/recoverbull/router.dart';
@@ -16,6 +20,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
+import 'package:timeago/timeago.dart' as timeago;
 
 class BackupSettingsScreen extends StatefulWidget {
   const BackupSettingsScreen({super.key});
@@ -34,6 +39,12 @@ class _BackupSettingsScreenState extends State<BackupSettingsScreen> {
   }
 }
 
+/// Answers one question, top to bottom: if this phone vanished right now,
+/// could you get your money back?
+///
+/// The status rows state the facts, the hero names the single most useful
+/// action, and the menu holds everything else. Each section is built by its
+/// own function so a row can be added to one without disturbing the others.
 class _Screen extends StatelessWidget {
   const _Screen();
 
@@ -49,6 +60,7 @@ class _Screen extends StatelessWidget {
       },
       child: BlocBuilder<BackupSettingsCubit, BackupSettingsState>(
         builder: (context, state) {
+          final hero = _hero(state);
           return Scaffold(
             appBar: AppBar(
               forceMaterialTransparency: true,
@@ -65,20 +77,16 @@ class _Screen extends StatelessWidget {
                   child: Column(
                     crossAxisAlignment: .start,
                     children: [
-                      const Padding(
-                        padding: EdgeInsets.symmetric(horizontal: 16),
-                        child: _BackupTestStatusWidget(),
+                      Padding(
+                        padding: const EdgeInsets.symmetric(horizontal: 16),
+                        child: Column(
+                          crossAxisAlignment: .start,
+                          children: _statusRows(context, state),
+                        ),
                       ),
-                      const Gap(40),
-                      const _StartBackupButton(),
-                      if (state.lastEncryptedBackup != null)
-                        const _ViewVaultKeyButton(),
-                      if (state.lastEncryptedBackup != null ||
-                          state.lastPhysicalBackup != null)
-                        const _TestBackupButton(),
-                      const _RecoverBullSettingsButton(),
-                      const _Bip329LabelsButton(),
-                      const _TransactionHistoryButton(),
+                      if (hero != null) ...[const Gap(32), hero],
+                      const Gap(24),
+                      ..._menuRows(state),
                     ],
                   ),
                 ),
@@ -89,89 +97,243 @@ class _Screen extends StatelessWidget {
       ),
     );
   }
+
+  /// The glanceable facts. Insertion point for the fork's metadata backup
+  /// status row: append one [_StatusRow] here.
+  List<Widget> _statusRows(BuildContext context, BackupSettingsState state) => [
+    _StatusRow(
+      label: context.loc.backupSettingsPhysicalBackup,
+      isTested: state.isDefaultPhysicalBackupTested,
+      lastTestedAt: state.lastPhysicalBackup,
+    ),
+    const Gap(15),
+    _StatusRow(
+      label: context.loc.backupSettingsEncryptedVault,
+      isTested: state.isDefaultEncryptedBackupTested,
+    ),
+  ];
+
+  /// The single most important action right now, or nothing at all when the
+  /// status rows already say everything worth saying.
+  Widget? _hero(BackupSettingsState state) {
+    // Every wallet looks unprotected until the first load resolves; an urgent
+    // card must never flash on the way in.
+    if (state.status != BackupSettingsStatus.success) return null;
+
+    final posture = BackupHealthPosture.of(
+      isEncryptedVaultTested: state.isDefaultEncryptedBackupTested,
+      isPhysicalBackupTested: state.isDefaultPhysicalBackupTested,
+    );
+    switch (posture) {
+      case null:
+        return const _ZeroBackupHero();
+      case BackupHealthPosture.recoverbullOnly:
+        return const _AddPhysicalBackupHero();
+      case BackupHealthPosture.physicalOnly:
+      case BackupHealthPosture.both:
+        final lastTestedAt = state.lastPhysicalBackup;
+        final isDue = isBackupReminderDue(
+          anchor: lastTestedAt,
+          now: DateTime.now(),
+          interval: posture.reminderInterval,
+        );
+        return isDue ? _TestBackupHero(lastTestedAt: lastTestedAt) : null;
+    }
+  }
+
+  /// The settings rows. Insertion point for the fork's metadata backup menu
+  /// row: add one [SettingsEntryItem] to this list.
+  List<Widget> _menuRows(BackupSettingsState state) => [
+    if (state.lastEncryptedBackup != null) const _ViewVaultKeyButton(),
+    if (state.lastEncryptedBackup != null || state.lastPhysicalBackup != null)
+      const _TestBackupButton(),
+    const _EncryptedVaultSettingsButton(),
+    const _Bip329LabelsButton(),
+    const _TransactionHistoryButton(),
+  ];
 }
 
-class _BackupTestStatusWidget extends StatelessWidget {
-  const _BackupTestStatusWidget();
+class _StatusRow extends StatelessWidget {
+  final String label;
+  final bool isTested;
+  final DateTime? lastTestedAt;
+
+  const _StatusRow({
+    required this.label,
+    required this.isTested,
+    this.lastTestedAt,
+  });
 
   @override
   Widget build(BuildContext context) {
-    return BlocBuilder<BackupSettingsCubit, BackupSettingsState>(
-      builder: (context, state) {
-        return Column(
-          crossAxisAlignment: .start,
+    final testedAt = lastTestedAt;
+    return Column(
+      crossAxisAlignment: .start,
+      children: [
+        Row(
           children: [
-            _StatusRow(
-              label: context.loc.backupSettingsPhysicalBackup,
-              isTested: state.isDefaultPhysicalBackupTested,
-            ),
-            const Gap(15),
-            _StatusRow(
-              label: context.loc.backupSettingsEncryptedVault,
-              isTested: state.isDefaultEncryptedBackupTested,
+            Text(label, style: context.font.bodyMedium),
+            const Spacer(),
+            Text(
+              isTested
+                  ? context.loc.backupSettingsTested
+                  : context.loc.backupSettingsNotTested,
+              style: context.font.bodyMedium?.copyWith(
+                color: isTested
+                    ? context.appColors.success
+                    : context.appColors.error,
+              ),
             ),
           ],
-        );
-      },
+        ),
+        if (isTested && testedAt != null)
+          Text(
+            context.loc.backupHealthLastTested(timeago.format(testedAt)),
+            style: context.font.bodySmall?.copyWith(
+              color: context.appColors.textMuted,
+            ),
+          ),
+      ],
     );
   }
 }
 
-class _StatusRow extends StatelessWidget {
-  final String label;
-  final bool isTested;
+/// One card, one verb. Shared by every hero so the screen can only ever ask
+/// for one thing at a time.
+class _HeroCard extends StatelessWidget {
+  final String title;
+  final String body;
+  final String? footnote;
+  final String actionLabel;
+  final VoidCallback onAction;
+  final bool isUrgent;
 
-  const _StatusRow({required this.label, required this.isTested});
+  const _HeroCard({
+    required this.title,
+    required this.body,
+    required this.actionLabel,
+    required this.onAction,
+    this.footnote,
+    this.isUrgent = false,
+  });
 
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        Text(label, style: context.font.bodyMedium),
-        const Spacer(),
-        Text(
-          isTested
-              ? context.loc.backupSettingsTested
-              : context.loc.backupSettingsNotTested,
-          style: context.font.bodyMedium?.copyWith(
-            color: isTested
-                ? context.appColors.success
-                : context.appColors.error,
+    final accent = isUrgent
+        ? context.appColors.error
+        : context.appColors.onSurface;
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: context.appColors.surfaceContainer,
+        border: Border.all(color: accent, width: isUrgent ? 2 : 1),
+        borderRadius: BorderRadius.circular(2),
+      ),
+      child: Column(
+        crossAxisAlignment: .start,
+        children: [
+          BBText(
+            title,
+            style: context.font.titleMedium?.copyWith(fontWeight: .bold),
+            color: accent,
           ),
-        ),
-      ],
+          const Gap(8),
+          BBText(
+            body,
+            style: context.font.bodyMedium,
+            color: context.appColors.onSurface,
+          ),
+          if (footnote != null) ...[
+            const Gap(4),
+            BBText(
+              footnote!,
+              style: context.font.bodySmall,
+              color: context.appColors.textMuted,
+            ),
+          ],
+          const Gap(16),
+          BBButton.big(
+            label: actionLabel,
+            onPressed: onAction,
+            bgColor: accent,
+            textColor: context.appColors.surface,
+          ),
+        ],
+      ),
     );
   }
 }
 
-class _TestBackupButton extends StatelessWidget {
-  const _TestBackupButton();
+class _ZeroBackupHero extends StatelessWidget {
+  const _ZeroBackupHero();
 
   @override
   Widget build(BuildContext context) {
-    return SettingsEntryItem(
-      icon: Icons.verified,
-      title: context.loc.backupSettingsTestBackup,
-      onTap: () => context.pushNamed(
+    return _HeroCard(
+      isUrgent: true,
+      title: context.loc.backupSettingsHeroBackUpTitle,
+      body: context.loc.backupSettingsHeroBackUpBody,
+      actionLabel: context.loc.backupSettingsStartBackupAction,
+      onAction: () => context.pushNamed(
         BackupSettingsSubroute.backupOptions.name,
-        extra: BackupSettingsFlow.test,
+        extra: BackupSettingsFlow.backup,
       ),
     );
   }
 }
 
-class _StartBackupButton extends StatelessWidget {
-  const _StartBackupButton();
+class _AddPhysicalBackupHero extends StatelessWidget {
+  const _AddPhysicalBackupHero();
+
+  @override
+  Widget build(BuildContext context) {
+    return _HeroCard(
+      title: context.loc.backupHealthReminderTitle,
+      body: context.loc.backupHealthRecoverbullOnlyBody,
+      actionLabel: context.loc.backupHealthAddPhysicalBackupAction,
+      onAction: () => context.pushNamed(
+        TestWalletBackupRoute.testPhysicalBackupFlow.name,
+        extra: TestPhysicalBackupFlow.backup,
+      ),
+    );
+  }
+}
+
+class _TestBackupHero extends StatelessWidget {
+  final DateTime? lastTestedAt;
+
+  const _TestBackupHero({required this.lastTestedAt});
+
+  @override
+  Widget build(BuildContext context) {
+    final testedAt = lastTestedAt;
+    return _HeroCard(
+      title: context.loc.backupHealthReminderTitle,
+      body: context.loc.backupHealthTestBackupBody,
+      footnote: testedAt == null
+          ? null
+          : context.loc.backupHealthLastTested(timeago.format(testedAt)),
+      actionLabel: context.loc.backupHealthTestBackupAction,
+      onAction: () => context.pushNamed(
+        TestWalletBackupRoute.testPhysicalBackupFlow.name,
+        extra: TestPhysicalBackupFlow.verify,
+      ),
+    );
+  }
+}
+
+class _TestBackupButton extends StatelessWidget {
+  const _TestBackupButton();
 
   @override
   Widget build(BuildContext context) {
     return SettingsEntryItem(
-      icon: Icons.save_as,
-      iconColor: context.appColors.primary,
-      title: context.loc.backupSettingsStartBackup,
+      icon: Icons.verified,
+      title: context.loc.backupSettingsTestBackup,
       onTap: () => context.pushNamed(
         BackupSettingsSubroute.backupOptions.name,
-        extra: BackupSettingsFlow.backup,
+        extra: BackupSettingsFlow.test,
       ),
     );
   }
@@ -228,16 +390,16 @@ class _Bip329LabelsButton extends StatelessWidget {
   }
 }
 
-class _RecoverBullSettingsButton extends StatelessWidget {
-  const _RecoverBullSettingsButton();
+class _EncryptedVaultSettingsButton extends StatelessWidget {
+  const _EncryptedVaultSettingsButton();
 
   @override
   Widget build(BuildContext context) {
     return SettingsEntryItem(
       icon: Icons.cloud_circle,
       iconColor: context.appColors.secondary,
       textColor: context.appColors.secondary,
-      title: context.loc.backupSettingsRecoverBullSettings,
+      title: context.loc.backupSettingsEncryptedVaultSettings,
       onTap: () {
         context.pushNamed(
           RecoverBullRoute.recoverbullFlows.name,