Skip to content

Improve relations display with icons, avatars, and visual hierarchy - #144

Open
addiinnocent wants to merge 4 commits into
mainfrom
feature/improve-relations-display
Open

Improve relations display with icons, avatars, and visual hierarchy#144
addiinnocent wants to merge 4 commits into
mainfrom
feature/improve-relations-display

Conversation

@addiinnocent

Copy link
Copy Markdown
Collaborator

Summary

  • Reliable relation loading: Fixed race condition with .once() + .on() pattern to ensure all existing relations are loaded
  • Better visual design: Removed card containers for cleaner flat layout with dividers separating relation groups
  • User avatars: ProfileBadge now displays actual user images (Gravatar or IPFS-hosted) alongside names
  • Semantic icons: Added Star icon for 'like' and Sparkles icon for 'teach' relations for improved visual distinction
  • Enhanced styling: Coloured text labels with proper spacing, dark mode support, and subtle hover effects

Technical

  • Updated relationProvider.ts: Changed listener pattern from .on() only to .once() + .on() for initial load
  • Streamlined component templates: Removed bordered card styling from ProfileRelations and SphereRelations
  • Added dividers: Horizontal lines separate relation type groups with conditional rendering
  • Enhanced Icon component: Added StarIcon and SparklesIcon for new relation types
  • Improved ProfileBadge: Now accepts optional image prop for user avatars

Testing

  • Relations load reliably (fixed initial loading issue)
  • Icons display correctly for all relation types
  • User avatars render with fallback to UserIcon
  • Dividers appear between relation groups
  • Dark mode styling verified
  • Responsive layout working

Breaking Changes

None

- Simplified server Gun config from 6+ conflicting options to minimal: Gun({ web: server })
- Fixed P2P message routing issue between browser windows
- Updated all composables to use versioned root node
- Removed debug logging added during troubleshooting
- Updated documentation with configuration details
- Add minimal Gun relay server (server/src/gun-minimal.ts)
- Configure client Gun to connect to relay via VITE_GUN_PEERS
- Expose root and gun to window object for browser console debugging
- Consolidate .env setup: single source of truth in .env.development
- Update Vite config to read from root .env directory
- Update documentation with P2P sync setup and testing guide
- Verified: data syncs in real-time between browser tabs through relay

P2P peers now connect and synchronise data via ws://localhost:3000/gun
- Replace initial relation loading bug with .once() + .on() pattern for reliable loading
- Add semantic icons: Star for 'like', Sparkles for 'teach' relations
- Enhance ProfileBadge with user avatars (Gravatar/IPFS-hosted)
- Redesign relation display: remove card containers, flat layout with dividers
- Improve visual hierarchy with coloured text labels and proper spacing
- Add subtle horizontal dividers between relation groups
- Better dark mode support throughout
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.

2 participants