trackslash
VAULT-77 P2

Make the import flow look like the other backup screens

0
All issues

Description

Problem

The import sheet (Backups → Restore → Import Backup / Import & Merge / Import & Override) doesn't match the rest of the app. The Restore page that opens it has a BackupHeroHeader, but every screen inside the sheet uses the older style: grey section headers, PlaceholderView cards, long footers and almost no animation or haptics.

The model to follow is the backup password screen (BackupKeyChangeView), and the App Lock Password screens that share its style:

  • A centred BackupHeroHeader with a large symbol, a title and a short subtitle. It sits in its own section, and the title stays inline.
  • The field or action that matters most comes straight after it.
  • Status and errors appear as a short label in the section footer, not as a card that replaces the screen.
  • Success replaces the form with a green hero header that bounces once (bouncesOnAppear), plus .sensoryFeedback(.success).
  • Changes between states use .snappy animations. Wrong passwords use wrongPasswordFeedback(trigger:) (a shake and an error haptic).

The screens in the flow, with their sub-issues:

  1. VAULT-78: the source picker, the root of BackupImportFlowView, with "Automatic Import" (PDF) and "QR Code Import".
  2. VAULT-79: Decrypt Backup (BackupKeyDecryptorView).
  3. VAULT-80: the QR code scanner (BackupImportCodeScannerView + BackupImportCodeStateVisualizerView).
  4. VAULT-81: Ready to Import, and the Imported confirmation: readyToImportView in BackupImportFlowView.

Plan

The sub-issues are in build order, and each is one PR. VAULT-78 comes first because it sets the pattern for the rest.

Keep the animations modest ("a bit"): a bounce or a symbol swap at the moments that matter, a haptic, and smooth changes between states. Don't add new scenes. Everything has to respect Reduce Motion, as EncryptedItemDetailView and wrongPasswordFeedback already do.

Done when

  • Every sub-issue is done.
  • Walking through a PDF import and a QR import on a device feels like the same app as setting a backup password.
  • The snapshot tests for the import screens are re-recorded, with the Dynamic Type sizes BackupKeyChangeViewSnapshotTests uses (xSmall, medium, xxLarge; light and dark).

Related: VAULT-1 and VAULT-5 (the backup password screen this copies), VAULT-20 (the Restore page header), VAULT-71 (the shield marks the backup password).

Sub-issues

4
VAULT-78 P2 Import sheet: give the source picker a hero header Done VAULT-79 P2 Decrypt Backup: hero header, progress while decrypting, and a wrong-password shake Done VAULT-80 P2 QR import: headline under the camera and animate each code as it's scanned Done VAULT-81 P2 Ready to Import and Imported: hero headers and a success moment Done

Linked issues

3
Relates to VAULT-5 P2 Backup password screen: emphasise password field, move details to dedicated pages Done
Relates to VAULT-20 P2 Add a header to the Restore page and lock it behind device authentication Done
Relates to VAULT-71 P2 App Lock Password setup doesn't look like the lock screen it unlocks (and audit similar surfaces) Done

GitHub

0

No branches or pull requests linked.

Comments

1
Bradley

All four sub-issues are done:

  • VAULT-78, #694: the source picker's hero header, with errors in the header.
  • VAULT-79, #691: Decrypt Backup, with the shield header, a focused field, progress, Cancel while decrypting and a wrong-password shake.
  • VAULT-80, #692: the QR scanner's headline, count and ticking tiles.
  • VAULT-81, #697: Ready to Import and Imported.

The import flow's snapshots are recorded at xSmall, medium and xxLarge, in light and dark.

Separately, #690 made every restore ask for the backup's password, so a restore now always goes through the Decrypt Backup screen.