[DESIGN EXPERIMENT] Visual Reach Selector

[aldertnl]

DESIGN EXPERIMENT: Visual Reach Selector

Warning

HIGHLY EXPERIMENTAL DEMO

This PR is purely a UI demo and design experiment.
It is not a production proposal and is not intended to be merged.

See the video below, or try it yourself using the preview link available on this PR.

What this experiment explores

• A concentric-circle selector for choosing who posts come from:
  • Me
  • Friends
  • Following
  • My Network
  • All
• Hover previews and selected-state treatments
• Reflecting the selected Reach in the first feed tab
• Compact dropdown controls for Sort, Layout, and Content
• Separating post Reach from WoT “Tagged as” curation
• Feed headings such as:

  Posts from friends tagged as ‘dev’ by my network

Questions for feedback

• Is the circular Reach selector understandable and discoverable?
• Do the hover and selected states make the hierarchy clear?
• Is the distinction between Posts from and Tagged as understandable?
• Do the compact dropdowns improve the sidebar?
• Does the active Reach tab provide enough context above the feed?

Demo limitations

This prototype intentionally fakes or reuses existing behavior where Nexus support is not available yet:

• Me loads the signed-in user’s profile posts.
• Tagged-as filtering uses the currently supported Nexus WoT behavior independently of the selected Reach.
• The implementation and API behavior should not be treated as production-ready.

Supporting UI fixes

The branch also includes supporting UI fixes that production at some point should reflect:

• minimal collapsed post composer with focus on expansion
• composer padding consistent with posts
• correct feed tab titles that reflect selected reach

Validation

• 696 test files passed
• 11,321 tests passed
• 2 tests skipped
• TypeScript, lint, and production build passed

Important

Please review this as a design artifact and interaction prototype—not as a request for code approval or merge readiness.

visualreach.mp4

[github-actions]

🚀 Preview Deployment

URL: https://pubky-app-pr-2261-fzxmjul7ya-oa.a.run.app

pubky-app-pr-2261 • da02026