Recovery phrase page setup

[lmuntaner]

Motivation

Users can gain access to their identity using the recovery phrase.

In this PR, setup the page that will start the recovery flow.

In other PRs, refactor the recovery phrase component so it can be reused in the dashboard.

Changes

• New route /recovery-phrase with page and layout.

Tests

Tested locally. See video and screenshot.

[lmuntaner]

New UX:

Screen.Recording.2025-10-29.at.12.33.43.mov

[sea-snake]

1. Does the focus jump to the next input on tab/space/enter?
2. Are they jumping in order (left to right, not top to bottom)
3. Is the input font size 16px or larger? (anything smaller and iOS zooms in on the page...)
4. What happens with the software keyboard on iOS? Does page content with inputs show and fit above it or are responsive adjustments needed?

See <div class="h-[var(--keyboard-inset-height)]"></div> in Dialog for a reference on how to handle mobile keyboards, it's a headache.

[sea-snake]

I'm surprised this works, in a JS function you wouldn't be able to map it and instead need to write Array.from( { length: 24 }).

[sea-snake]

refactor the recovery phrase component so it can be reused in the dashboard.

This probably isn't needed since the recovery phrase is not an input on the dashboard.

But making the 24 inputs a separate component that checks for typos etc as specified in the design probably makes sense, then you could have value and onChange props that takes/returns the whole phrase.

[lmuntaner]

Thanks for the review!

I wasn't planning on doing so much in this PR, but why not...

Here is a video of moving with the keyboard:

Screen.Recording.2025-10-30.at.09.59.18.mov

I deployed it to beta, and it's super nice the behavior with the keyboard once I added your piece of code!

Yes, the input has size 16px.