feat: network switcher, breadcrumbs, version badge, and table row hover effects#568
Merged
Wilfred007 merged 1 commit intoGildado:mainfrom Mar 30, 2026
Merged
Conversation
… hover effects Resolves four frontend UI enhancement issues: - feat(network-switcher): add Stellar network toggle (Testnet/Mainnet) to AppLayout and EmployerLayout headers; backed by a Zustand persist store (payd-network key) that defaults to PUBLIC_STELLAR_NETWORK env var. Footer dot and label now reflect the active network dynamically. - feat(breadcrumbs): add Breadcrumb component using react-router useLocation; renders a Home > Section > Page trail for all nested routes; excluded from /login and /auth-callback; integrated into AppLayout main area and EmployerLayout top-bar (replaces static "Employer dashboard" subtitle). - feat(footer-badge): add version badge (PUBLIC_APP_VERSION, fallback 0.0.1) and environment badge (import.meta.env.MODE -> production/staging/dev) to AppLayout footer; badges are colour-coded and accessible via aria-label. - feat(table-hover): add hover:bg-white/5 and transition-colors to employee table rows in EmployeeList for improved row-tracking UX. Tests: 22 new passing tests across Breadcrumb, NetworkSwitcher, AppLayoutFooter, and EmployeeListHover suites.
|
@davedumto Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR resolves four frontend UI enhancement issues:
Network Switcher (#170: Add 'Network Switcher' Support in UI #387) — A
NetworkSwitchercomponent (select dropdown) lets developers toggle between Testnet and Mainnet directly from the header in bothAppLayoutandEmployerLayout. Network preference is persisted via a Zustand store (payd-networklocalStorage key) and defaults to thePUBLIC_STELLAR_NETWORKenv var. The footer's network indicator (dot + label) is now dynamic and reflects the active selection.Breadcrumbs (#112: Implement Breadcrumbs for Nested Pages #370) — A
Breadcrumbcomponent usesuseLocationto build aHome > Section > Pagetrail for all nested routes. It is excluded from/loginand/auth-callback. Integrated intoAppLayout's main content area andEmployerLayout's top-bar (replacing the static "Employer dashboard" subtitle).Version Badge in Footer (#125: Add Version Badge to Footer #396) — The footer in
AppLayoutnow displays a version badge (PUBLIC_APP_VERSIONenv var, fallback0.0.1) and a colour-coded environment badge (import.meta.env.MODE→production/staging/dev). Both badges havearia-labelattributes for accessibility.Table Row Hover Effects (#113: Add Hover Effects to Table Rows #372) — Employee table rows in
EmployeeListnow havehover:bg-white/5andtransition-colorsfor clear row tracking on hover.New files
src/components/Breadcrumb.tsxsrc/components/NetworkSwitcher.tsxsrc/stores/networkStore.tssrc/components/__tests__/Breadcrumb.test.tsxsrc/components/__tests__/NetworkSwitcher.test.tsxsrc/components/__tests__/AppLayoutFooter.test.tsxsrc/components/__tests__/EmployeeListHover.test.tsx22 new passing tests added. No regressions introduced.
Test plan
npm testinfrontend/— all new tests pass, pre-existing suite unchanged/employer/payroll— breadcrumb showsHome > Employer > Payroll/settings— breadcrumb showsHome > Settingsv0.0.1) and environment badge (devin development)closes #387
closes #396
closes #372
closes #370