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]

"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

[jvsena42]

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

Fixed 408ec89

pin-dismiss.webm

[jvsena42]

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.

Done b11aeba

Very nice effect!

support-nav-color.webm

[pwltr]

LGTM, functionality/design ACK, did not review code

[ovitrif]

Review Pass 3

Retested all 27 commits since Pass 2 (CHANGES_REQUESTED). Phil already approved design/functionality.

Previous Change Requests — Verified

• BUG1 (PIN+BIO nav loop): Fixed — PIN auth gate removed from Reset & Restore. Back nav works normally with PIN+BIO and PIN-only.
• BUG2 (Mnemonic without PIN): Resolved — backup gating removed per Phil's feedback (not in Figma, inconsistent with other entry points). Acceptable.
• Trailing commas on modifier call sites: Fixed. Some stragglers remain — not a blocker.
• showSystemUi preview setup: Fixed.
• Language.kt resId: Fixed.
• AGENTS.md modifier rules: Updated and clear.

New Changes — Tested

• PIN auto-navigation: Enable/disable PIN auto-pops back to Security tab. Change PIN doesn't auto-pop (nit, not a blocker).
• Forgot PIN back button: Visible, dismisses sheet correctly.
• PIN dots alignment: Properly centered in Change PIN flow.
• Lightning Connections empty state: Onboarding UI shows correctly, "Get Started" navigates properly, channel list shows when channels exist.
• Support screen brand color: Orange diagonal covers full bottom area including nav bar inset. No visual glitches.
• Share icon: Correct (16x16, orange tint).
• Electrum host prefix: Clean display without protocol prefix.
• String/translation fixes: Capitalization correct, PIN error message updated.

Nits (non-blocking)

• Some trailing commas after modifier args still not cleaned up.
• Change PIN flow doesn't auto-navigate back after success (same as RN app behavior).
• PIN + BIO: tap Biometrics then "Use PIN Code" — PIN numpad doesn't show. Not a regression (RN app did the same). Ideally we'd hide the button or actually show the numpad.

Remarks (out of scope for this PR)

• Inconsistency: mnemonic screen is shown without auth, but Recovery mode requires it. I still believe we should gate mnemonic viewing with auth, but this is out of scope for this redesign.
• Recovery Screen requires PIN to wipe wallet — should align the approach or at least ack why it's inconsistent.
• Still need to test PIN (± BIO) (± QuickPay) for pay flows — separate from this PR, because I have an issue building bitkit-ios right now.

LGTM, code ACK.