Skip to content

feat(settings): add DevTools-style config tabs with autosave#304

Merged
AugustoL merged 10 commits intoopenscan-explorer:mainfrom
josealoha666:fix/issue-292-config-tabs
Mar 12, 2026
Merged

feat(settings): add DevTools-style config tabs with autosave#304
AugustoL merged 10 commits intoopenscan-explorer:mainfrom
josealoha666:fix/issue-292-config-tabs

Conversation

@josealoha666
Copy link
Collaborator

Summary

  • reorganize the Config page into DevTools-style tabs for Network, Providers, Display, and Advanced
  • add deep-linkable tab state via query/hash and persist the last active tab in localStorage
  • replace the manual save flow with debounced auto-save plus inline save status to address the config save behavior
  • keep the tab shell stable across switches and add a mobile-friendly selector layout

Validation

  • npm run typecheck
  • npm run test:run
  • npm run build

Closes #292
Closes #297

@josealoha666
Copy link
Collaborator Author

@MatiasOS pushed the config UI update for this:

  • DevTools-style tabs: Network, Providers, Display, Advanced
  • deep-linkable/persisted active tab
  • mobile-friendly tab selector
  • debounced auto-save + inline save status to address save behavior
  • reduced layout jump when switching tabs

Validation passed: typecheck, tests, and build.

@github-actions
Copy link

github-actions bot commented Mar 12, 2026

🚀 Preview: https://pr-304--openscan.netlify.app
📝 Commit: e1c029fb639a2697fb281954e2110657fb782588

@AugustoL
Copy link
Collaborator

@josealoha666 on https://pr-304--openscan.netlify.app/#/settings?tab=providers#providers providers tag if I start editing the input fields it stays in a auto-save loop, for this tab lets have a save button instead of autosave.

@josealoha666
Copy link
Collaborator Author

@MatiasOS fixed the Providers tab save-loop follow-up in 93c9d57.

  • Providers now stays in explicit-save mode while typing
  • the providers status pill no longer flips into a misleading autosave/saving state
  • Save stays available for pending provider edits until the manual save is actually pressed

Validation passed: npm run typecheck, npm run test:run, and npm run build.

@MatiasOS
Copy link
Member

@josealoha666 Please, take a look on:

  1. Navigation between tabs, adds an extra # to the url. Url already contains tab=display. Is this expected or bug?
    URL Example: https://pr-304--openscan.netlify.app/#/settings?tab=display#display
  2. Split API KEY section in 2. Keep Alchemy and Infure in a section named RPC API Keys and move Etherescan to a new section called Verifications API Keys

@josealoha666
Copy link
Collaborator Author

@MatiasOS fixed in 2b7ade3.

  • removed the duplicate tab-state hash so Settings now uses a single source of truth: ?tab=... (no more #/settings?tab=display#display)
  • split the provider key area into RPC API Keys (Alchemy + Infura) and Verifications API Keys (Etherscan)

Validation passed locally: npm run typecheck, npm run test:run, and npm run build.

@josealoha666
Copy link
Collaborator Author

@MatiasOS fixed both follow-ups on this PR:\n\n- settings tab navigation now normalizes to ?tab=... without appending the extra hash fragment\n- Providers now splits API keys into RPC API Keys (Infura + Alchemy) and Verifications API Keys (Etherscan)\n\nValidation passed: npm run typecheck and npm run build.\n\nLatest commit: e1c029f

@AugustoL AugustoL merged commit bfbd36a into openscan-explorer:main Mar 12, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix(settings): Inconsistent save behavior confuses users into thinking changes are auto-saved feat: Update config UI

3 participants