feat: settings design updates v60

[jvsena42]

Implements v60 design for settings, matching iOS PR #490.

Description

This PR:

1. Replaces the flat settings category list with a single tabbed screen (General / Security / Advanced) with swipe support via HorizontalPager
2. Adds icons to all settings rows (16dp inside 32dp circular container with Brand tint)
3. Displays selected values on the right side of rows for at-a-glance scanning (currency, unit, speed, channel count, node ID, electrum status, etc.)
4. Reorganizes settings into sections with headers (Interface, Payments, Safety, Privacy, Back up or reset, Networks, Debug)
5. Moves Backup and Reset into the Security tab
6. Creates a unified PIN management screen (enable / disable / change in one place) with sheet-based PIN flows
7. Moves Support from Settings into the main drawer menu
8. Merges About screen content into the redesigned Support screen (Legal, Share, Version with dev mode easter egg, Bitkit logo, social links, copyright, brand endorsement)
9. Adds diagonal orange background to Support footer matching Figma design
10. Updates Widgets settings with Display and Reset sections (Reset Widgets + Reset Suggestions Cards)
11. Simplifies social links component with data-driven approach
12. Extracts shared SettingsIcon composable for consistent icon rendering across settings screens

Figma:

• https://www.figma.com/design/ltqvnKiejWj0JQiqtDf2JJ/Bitkit-Wallet?node-id=37586-106580
• https://www.figma.com/design/ltqvnKiejWj0JQiqtDf2JJ/Bitkit-Wallet?node-id=37586-107885
• https://www.figma.com/design/ltqvnKiejWj0JQiqtDf2JJ/Bitkit-Wallet?node-id=37591-198355
• https://www.figma.com/design/ltqvnKiejWj0JQiqtDf2JJ/Bitkit-Wallet?node-id=37655-243559

Preview

Tab Navigation	Support Screen
tab-navigation.webm	support.webm
General Tab	Advanced Tab
general-tab.mp4	advanced-tab.webm
Security Sheet
security-sheet.webm

QA Notes

1. Tab navigation

• Open Settings and verify 3 tabs: General, Security, Advanced
• Swipe left/right between tabs and confirm content and tab indicator update together
• Tap tabs directly and verify navigation works
• Verify scroll state is independent per tab

2. General tab

• Verify Interface section: Language (value), Local Currency "USD ($)" format, Unit "Bitcoin", Widgets "On"/"Off", Tags with count
• Verify Payments section: Transaction Speed with dynamic icon (fast/normal/slow), QuickPay "On"/"Off", Background Payments "On"/"Off"
• All icons should render as 16dp inside 32dp black circles with Brand (#FF4400) tint
• Tap each item and confirm navigation to correct sub-screen

3. Security tab

• Verify "Back up or reset" section: Back up wallet (opens sheet), Data backups, Reset wallet (with PIN check if enabled)
• Verify Safety section: PIN Code (Enabled/Disabled), conditional items (PIN for payments, biometrics)
• Verify Privacy section: Swipe balance, Hide on open (always visible), Clipboard
• Test backup wallet opens backup sheet
• Test reset wallet navigates to reset flow

4. Advanced tab

• Verify Payments section: Address Type with selected value, Coin Selection, Address Viewer
• Verify Networks section: Lightning Connections with channel count, Lightning Node with truncated ID ("34sdx..."), Electrum Server "Auto"/"Custom", RGS
• Enable dev mode (tap Version 5x in Support screen) and verify Debug section appears with Dev Settings entry

5. PIN management

• With PIN disabled: verify single "Enable PIN" button and shield icon
• With PIN enabled: verify "Change PIN Code" and "Disable PIN" buttons with shield_check icon
• Test the full enable → change → disable cycle via sheet flows

6. Support screen & drawer

• Open drawer menu and verify Support appears between Shop and Settings
• Verify Support screen has: Report Issue, Help Center, App Status, Legal, Share, Version (no chevron, value on right)
• Tap Version 5 times to toggle dev mode with haptic feedback
• Verify Bitkit logo with diagonal orange background crossing through it
• Verify social links with Brand tint on transparent background
• Verify copyright text and Synonym + Tether brand endorsement row

7. Widgets settings

• Navigate to Widgets from General tab
• Verify Display section with Show Widgets and Show Widget Titles toggles
• Verify Reset section with "Reset Widgets" (resets widget config and refreshes) and "Reset Suggestions Cards" buttons
• Both reset buttons should show confirmation dialogs

8. Sub-screens

• Default Unit screen: icons use SettingsIcon (circular container)
• Widgets reset buttons: icons use SettingsIcon (circular container)

[jvsena42]

after PIN setup/change/disable, imo we can navigate back for the user

Fixed

pin-pop-navigation.webm

[jvsena42]

there is a new empty state for this screen (check Figma)

Fixed

connections-empty-state.webm

[jvsena42]

is it possible to have the orange background cover the bottom safe area as well?

Fixed

support-bg-alignment.webm

[piotr-iohk]

Noticed this and it is actually the same as on iOS (may be good opportunity to fix, or address separately):

• "Forgot your PIN?" is clickable on launching the wallet and change PIN flow (when submitting wrong PIN), but the flow informs "Reset (Requires Recovery Phrase)" but in fact the wallet is just resetted.

Screen.Recording.2026-03-27.at.15.11.58.mov

• also wanted to point out this PIN should be required on app restart + resume #724 - in case it is easy fix.

I guess both may be addressed separately, but wanted to point them out.

[jvsena42]

"Forgot your PIN?" is clickable on launching the wallet and change PIN flow (when submitting wrong PIN), but the flow informs "Reset (Requires Recovery Phrase)" but in fact the wallet is just resetted.

Agree, this UX could be improved. Probably requires more sheets for setting the mnemonic + passphrase

[jvsena42]

There are still some small changes from design v60 changelog. I'll implement them in other PR

[pwltr]

Review Pass 2

Aside from the code issue that I added as inline comment, and the issues already described in comments, I noticed regressions when PIN/BIO is ON:

BUG1: PIN+BIO ON → Reset Wallet back nav blocked

If I enable PIN and BIO then I go to Reset Wallet, I am asked to auth, but then I can't navigate back as I am always asked to use biometrics.
A fix is to guard with PIN/BIO the actions inside the screen, not the screen itself:

1. Guard actual reset action, when user taps "Yes, Reset" on the confirm dialog that appears after tapping "Reset Wallet" button. (ie. ask for PIN/BIO after confirm dialog positive button is tapped)
2. Guard action of showing the mnemonic sheet after user taps "Back Up First". (ie. ask for PIN/BIO after button is tapped).

See video:
bugwipebio_1.5x.mp4
If only PIN is ON (no BIO): When I back-nav from the screen, I see the PIN screen, but I can back-nav from it to settings. It should definitely NOT be shown on back-nav, regardless of the final fix.

BUG2: Issues with PIN enabled

I can see mnemonic without entering the PIN (via Settings > Security TAB > Back up your wallet), but I cannot see the "Reset Wallet" screen.
bugpin_1.5x.mp4

Fixed

guard-backup-with-pin.webm

This change is inconsistent in that it requires a PIN when navigating to "Back up your wallet" from settings but tapping the suggestion card or the backup prompt does not.

As mention in iOS PR, this flow is not specified to be gated by auth. If you think this makes sense please leave a comment in Figma so we can take the time to think it through properly with design team instead of appending UX changes on your own. Sticking to this process also helps keeping the two implementation at par.

[jvsena42]

Removed backup gating in 02f9d5b

Screen_recording_20260330_070222.webm

[pwltr]

is it possible to have the orange background cover the bottom safe area as well?

Fixed

support-bg-alignment.webm

What I meant is the bottom bar where the home bar or in your case the back/home/apps button lives. In SwiftUI and react-native it is called the safe area. I think it would look nicer if it would also have the brand color on this screen. Just a nice to have though.

[pwltr]

Back button here does nothing. IMO it should either be hidden or close the sheet. Same on the next screen.