UX improvement on User Square + Avatar

[bitkarrot]

• Instead of having all the buttons on the avatar show up, hide them and only show up on mouse over with a sliding screen.
• Move the lightning zap button into the same area, where it is only visible on mouse over or tap to show (on mobile)
• Rationale: this would enable a cleaner look on mobile where the screen is small.

See example where the CSS would need to be modified.

Current UX

• See this code section for where these audio/msg/send etc buttons start : https://github.com/HiveTalk/hivetalksfu/blob/37dd491c7dd7262dc0307fa6180b0adea44aa9ea/public/js/RoomClient.js#L2477

• nostr Icon is hidden at the moment. Lightning icon shown. see https://github.com/HiveTalk/hivetalksfu/blob/37dd491c7dd7262dc0307fa6180b0adea44aa9ea/public/js/RoomClient.js#L2547)

Target UX

- HIDE ALL FRONT FACING BUTTONS (including lightning zap and Nostr Icon - which is currrently not visible) to Overlay Slide, unless requested ON DEMAND: as illustrated in this example:

https://github.com/user-attachments/assets/bda142dd-e8c3-468d-a8b2-b0e38acaa080

https://www.youtube.com/watch?v=yfg9ChTmuKM

This would prevent visual overload on mobile and a much cleaner look if the buttons on avatar squares are not shown unless on demand.

Prefer this view shown at all times, with no buttons on avatar, unless user clicks or taps on a specific avatar square. The side navigation bar can be shown, that is ok.

We want the overlays slide to show the buttons on demand, instead of this current view which is too busy and overwhelming :

[bitkarrot]

• Take note for video on, there are 6 function buttons, + 2 for nostr+ln, for a total of 8 buttons that need to fit on the square for a very small screen.

[bitkarrot]

Full screen example from clubhouse, we will need it for the nostr profile information on a small screen.

https://video.nostr.build/76c37d28aacfe0cf713b3431bc51d2f5d83fce265e720f0cc98c9b034ccdd550.mp4

[Yeghro]

@bitkarrot How does this look to you?

https://github.com/user-attachments/assets/a6db51a1-fae8-4b49-b2fe-33c902c830d3

[bitkarrot]

@Yeghro its a good start for the mobile; might be good to show which user the current pull up is referring to, at a minimum username.

I can do a mockup for the layout if that would be helpful, a grid might be better than than just vertically listing the icons. the clubhouse layout is too busy looking but there are spacing elements we can certainly borrow from there.

lmk at anytime if you have questions.

[bitkarrot]

@Yeghro some mockups, hope this helps. let me know if anything unclear

This also might be useful https://nostrdesign.org/docs/design-principles/ui-tips/

https://grtcalculator.com/

[Yeghro]

I've made some progress, let me know what you think:

https://github.com/user-attachments/assets/94dcebdd-544c-41f7-873d-76e5619be236