trackslash
VAULT-78 P2

Import sheet: give the source picker a hero header

0
Sub-issue of VAULT-77 P2 Make the import flow look like the other backup screens

Description

Part of VAULT-77. This is the first screen of the import sheet: the root of BackupImportFlowView.

Now

  • The screen has an inline "Import" title and no headline.
  • It has two sections with grey headers, "Automatic Import" and "QR Code Import", and each holds a full-width ProminentActionButton ("Select PDF File" / "Start Scanning") with a footer.
  • It looks the same whether you came from Import Backup, Import & Merge or Import & Override, so nothing says what's about to happen to the vault.
  • Errors, such as a PDF that isn't a Vault backup, appear as a red PlaceholderView card above the buttons.

Change

  • Add a BackupHeroHeader at the top, chosen by BackupImportContext. Use the same symbol as the Restore page row that opened the sheet, so the two screens read as one step:
    • .toEmptyVault: square.and.arrow.down, in the accent colour.
    • .merge: square.and.arrow.down.on.square, in the accent colour.
    • .override: exclamationmark.triangle.fill, in red. This screen should say, briefly, that everything on the device will be replaced.
    • Keep each subtitle to about one line: what to pick, and that you'll need the backup's password.
  • Drop the "Automatic Import" / "QR Code Import" section headers. Either:
    • make the two sources rows with an icon, a title and a one-line explanation, like the successNote rows in BackupKeyChangeView; or
    • keep the two buttons in one section, without headers. Pick whichever reads better at xxLarge.
  • Show errors in the header instead: swap the symbol for a red exclamationmark.triangle.fill (a symbol replace effect), use the error's title and description, and play an error haptic. When the next attempt starts, go back to the normal header.
  • Keep the .snappy animations on importState / payloadState.

Done when

  • The screen has a hero header that matches the Restore page row that opened it, for all three contexts.
  • Errors appear in the header, with a haptic, and no card.
  • BackupImportFlowViewSnapshotTests covers the three contexts plus an error state, and has been re-recorded at xSmall, medium and xxLarge in light and dark.

Linked issues

0

GitHub

0

No branches or pull requests linked.

Comments

1
Bradley

Done in https://github.com/badbundle/vault-app/pull/694, merged as e022436d.

One change from the ticket: errors swap the header's symbol for a red xmark.octagon.fill, not exclamationmark.triangle.fill. Override's own header already shows the red triangle, so an error there wouldn't visibly change the symbol. The octagon is also what the app's other failure messages use.

The source rows are now a shared BackupOptionRow, in the Export page's style.