Skip to content

Design recent networks section for network switcher - #570

Open
afeezorobsco-cyber wants to merge 3 commits into
RevoraOrg:masterfrom
afeezorobsco-cyber:uiux/network-switcher-recent-list
Open

Design recent networks section for network switcher#570
afeezorobsco-cyber wants to merge 3 commits into
RevoraOrg:masterfrom
afeezorobsco-cyber:uiux/network-switcher-recent-list

Conversation

@afeezorobsco-cyber

Copy link
Copy Markdown

##close #506

Summary

This PR enhances the Network Switcher with a Recent Networks section that surfaces the last three networks used, making it faster for users who frequently switch between the same environments.

Changes

Recent Networks

Added a pinned Recent Networks section above the full network list that:

  • Displays the last three unique networks used
  • Orders networks by most recent usage
  • Prevents duplicate entries
  • Updates automatically whenever a network is selected

Persistence

Implemented per-user persistence for recent networks so the list is restored across sessions using the project's existing storage mechanism.

Empty State

Added an appropriate empty-state behavior for first-time users with no recent networks.

Popover Design

Documented and implemented:

  • Section heading
  • Divider between Recent Networks and All Networks
  • Active/current network styling
  • Hover and focus states
  • Responsive layout

Accessibility

Validated against WCAG 2.1 AA:

  • Keyboard navigation across sections
  • Logical focus order
  • Screen reader-friendly headings
  • Visible focus indicators
  • Contrast compliance

Testing

Executed:

npm run lint

Ran component and visual tests covering:

  • New user with no recent networks
  • Multiple network selections
  • Duplicate selection moves network to the top
  • Maximum of three recent entries
  • Persistence across sessions
  • Keyboard navigation
  • Responsive rendering
  • Dark mode (where supported)

Review Notes

  • Before/after screenshots included.
  • Accessibility (axe) validation included.
  • Implementation follows existing design patterns and design tokens.

Closes #

@drips-wave

drips-wave Bot commented Jul 31, 2026

Copy link
Copy Markdown

@afeezorobsco-cyber 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! 🚀

Learn more about application limits

@afeezorobsco-cyber

Copy link
Copy Markdown
Author

@thlpkee20-wq pls review and merge

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.

[UI/UX Design] Design a Network Switcher recent-networks quick list

1 participant