Room header & details UI refresh (+ what's needed to remove from Labs)

[germain-gg]

Design: Figma document Trust & Decoration

Updated figma May 2024: https://www.figma.com/design/gpxHFDTNK796n84r1ZxYG2/Room-Header-%26-Details-(2024)?node-id=0-1

Designer: @americanrefugee
PM: @daniellekirkwood / @nadonomy
Developer: @germain-gg

Room header

Preview Give feedback

1. Create labs flag for room header UI vector-im/element-web#25887
   A-Room-View T-Task Z-Compound +3
   
2. Make DecoratedRoomAvatar work without room prop vector-im/element-web#25902
   T-Task Z-Compound +2
   
3. Integrate @vector-im/compound-web vector-im/element-web#25905
   T-Task +1
   
4. Deprecate feature_right_panel_default_open vector-im/element-web#25910
   T-Task Z-Compound +2
   
5. Compound icon clipping for notifications vector-im/element-web#26027
   O-Frequent S-Minor T-Enhancement Z-Compound +4
6. Create room header component vector-im/element-web#25892
   A-Room-View T-Enhancement Z-Compound Z-Labs +4
   
7. Add module API for adding extra icons into the room header #26028
   A-Timesheet-1 O-Occasional S-Minor T-Enhancement Z-Compound +5
8. Deprecate feature_state_counters vector-im/element-web#25884
   T-Task Z-Compound +2
   
9. https://github.com/vector-im/element-internal/issues/444
10. Change avatar to use Compound implementation matrix-org/matrix-react-sdk#11448
    T-Enhancement +1
11. Enable new room UI by default on develop.element.io vector-im/element-web#26089
    T-Task +1
12. Enable new room UI by default on nightly vector-im/element-desktop#1194
    T-Task +1
13. Emoji cause topics being cut off in new room header vector-im/element-web#26326
    A11y O-Occasional S-Major T-Defect Z-Compound Z-Labs +6
    
14. Order of buttons on the right should be Video Call, Voice Call, Threads, Facepile vector-im/element-web#26569
    A-Room-View Z-Labs +2
    
15. Change Video icon to Video Solid vector-im/element-web#26568
    A-Room-View O-Frequent S-Tolerable T-Defect Z-Labs +5
    
16. Public Room icon button missing background on hover vector-im/element-web#26570
    A-Room-View O-Frequent S-Tolerable T-Defect Z-Labs +5
    
17. Facepile collapses and Public/private room icon is truncated when room layout isn't wide enough vector-im/element-web#26571
    A-Room-View O-Occasional S-Tolerable Z-Labs +4
    
18. Video Room Chat Header Button Removed vector-im/element-web#26181
    A-Room-View A-Video-Rooms A-Widgets O-Frequent S-Major T-Defect X-Regression Z-Labs Z-Maximised-Widgets +9
    
19. Solid chat icon vector-im/compound#274
    A-Design-Tokens A-Icons +2
    
20. Track room header threads button click vector-im/element-web#26585
    Z-Labs +1
    
21. Enable new room header by default on develop vector-im/element-web#26630
    T-Task +1
22. Enable new room header by default on nightly element-desktop#1345
    T-Task +1
    
23. A11y: room header itself not reachable via keyboard vector-im/element-web#26656
    A-Room-View A11y O-Frequent S-Minor Z-Labs +5
    
24. A11y: disabled buttons not discoverable to screen reader users due to not being in tablist #26634
    A-Room-View A11y O-Occasional T-Defect Z-Compound Z-Labs +6
    
25. Hide the Call buttons in group rooms: https://github.com/element-hq/wat-internal/issues/157
26. Hide the Voice Call button: https://github.com/element-hq/wat-internal/issues/190

Room details

Preview Give feedback

1. X button is on the left in memberlist but on the right otherwise vector-im/element-web#26558
   A-Right-Panel O-Frequent S-Tolerable Z-Labs +4
   
2. Close button should have a hover state
3. Room Name: Add padding/margin on the right and left (16px)
4. Room details: room description #26595
   A-Room-View T-Enhancement Z-Labs +3
   
5. Room details: tab navigation #26597
   A-Room-View T-Enhancement Z-Labs +3
   
6. New room info menu options list missing (order, name, icons, section dividers, etc.)
7. Room details: threads view #26596
   A-Room-View T-Enhancement Z-Labs +3
   
8. Space member list title partially outside of browser viewport vector-im/element-web#26645
   A-Right-Panel O-Uncommon S-Minor T-Defect X-Regression +5
   

Open Questions

• @nadonomy to scrutinise whether we keep providing support for feature_right_panel_default_open
• @nadonomy what do we handle the notifications panel?
• @nadonomy @daniellekirkwood Resolve if we can deprecate feature_state_counters: Deprecate feature_state_counters #25884
• Opening room details requires clicking room header somewhere which is hardly discoverable
• Cannot click to enlarge avatar from header; opens details instead
• Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work
• Room details don't help mitigate scroll-on-hover concern on room topic

Time sheeting ⏱️

WEB: Room header & details

[daniellekirkwood]

pulling over from @t3chguy's comment in the now-closed issue:

#2401
#8667

are related and may need closing/dealing with as a part of this

[daniellekirkwood]

Also copying from the previous issue:

Is #25534 invalid as we're no longer providing a drop-down header?

@nadonomy or @americanrefugee this is a question for you :)

[americanrefugee]

Correct @daniellekirkwood - there is no longer a drop-down menu from the room header. Click to expand the right sidebar only.

[nadonomy]

pulling over from @t3chguy's comment in the now-closed issue:
#2401

Closed this as it's ambiguous. Tough to action. We can get fresh insights once the new implementation is testable

#8667

@americanrefugee for this I think we should stress test in Figma and propose the smallest width we think works.

@daniellekirkwood would you be able to pull some analytics insights on this pls? Knowing what resolutions are in use in the wild would help. We could also formalise this in the project README (with browser support etc) for posterity.

#25534

Commenting there - @americanrefugee your input is welcome too.

[nadonomy]

@germain-gg updated the issue tasklist to include https://github.com/vector-im/element-internal/issues/444 which details how we should solve notifications.

[nadonomy]

@germain-gg on feature_right_panel_default_open - I talked through this logic with others today and the sentiment was that's really difficult to work on simple stuff in Element Web today so let's simplify the flags where we can.

I checked analytics and there's little useful to discern on this one. So, I think let's remove it and monitor for any feedback we get on develop after we merge.

[Ai-rin]

I never liked defaults with no member list visible. Now when you removed feature_right_panel_default_open, i have no way to fix it. 👎👎👎

[daniellekirkwood]

@germain-gg & @janogarcia / @americanrefugee I don't have enough familiarity with screen widths to be able to read this chart... however, as asked for here's some data!

https://posthog.hss.element.io/insights/8oug6Lje

[germain-gg]

We need to accomodate this matrix-org/matrix-react-sdk#11475 in the new room header too

Looping @charlynguyen in as the developer who's been looking at the knocking feature

[daniellekirkwood]

Worth tracking these two issues:

• ToggleMenuItem violates a11y rules compound#290
• MenuItem violates a11y rules compound#291

Note: Compound was sold in order to improve accessibility throughout the product. We should ensure that we continue to drive that focus via these components.

[dbkr]

I've estimated a day for each of the bugs on the room details list here (not including adding the missing options) so let's say this is about a week's worth for the room details stuff.

Edit: actually, scratch that, there might be some compound work involved with at least some of the components, so make it two weeks.

[domestomas]

I'm not sure if this is the right place to mention it, but it would be nice if the items from right panel would also open in the right panel - at least these that could easily fit in. People, files and pinned are already there, so why not move also "Polls", "Export chat" and "Copy link" to the right panel? I am not sure about "Invite" (maybe could also?), and "Settings" would really not fit, but the theree mentioned should fit without problems.

[bblacher]

When using the new room header, the "Layout" option when inside an element call is missing. Because of this there is no option to increase the size of another screen share when sharing the screen yourself. (My own screen share gets put into spotlight and there is no way to switch to "Freedom Layout" because the button is missing in the new room header.)

I know I can maximize the other screen share but then element is in full screen, this is sub-optimal.
#27299

[daniellekirkwood]

feedback on the room header that the new height and moving icon makes it hard to use the window

[daniellekirkwood]

Opening room details requires clicking room header somewhere which is hardly discoverable

• We think that people will discover this easily.
• We want to be wary of adding more buttons to the header
• We have done studies with the new room header

Cannot click to enlarge avatar from header; opens details instead

• Yup, we're ok with this
• Opening up the details screen opens the details which enlarges the image

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

Room details don't help mitigate scroll-on-hover concern on room topic

[t3chguy]

Search is hard to access; need to open details (left side), click search button (right side), then enter search string (left side); CMD+F doesn't work

Cmd+F is opt-in on Electron, on Web it is the browser's search instead.

Room details don't help mitigate scroll-on-hover concern on room topic

Not sure what this is asking

[daniellekirkwood]

@t3chguy I believe you're working on and have completed the following item:

• New room info menu options list missing (order, name, icons, section dividers, etc.)

If you have not completed this work, feel free to create it as a task so it can be tracked and the AC written.

[daniellekirkwood]

Moving the issue into "Q3" on the web roadmap as it's not yet released to the public.

[t3chguy]

@daniellekirkwood sorry I am not sure what that task is. It doesn't have any detail to explain itself. If it is the RoomSummaryCard stuff then this is currently in review: matrix-org/matrix-react-sdk#12793

[daniellekirkwood]

that PR doesn't have enough detail in it for me to know what it is @t3chguy

[daniellekirkwood]

New room info menu options list missing (order, name, icons, section dividers, etc.)

The Room Info screen should match the design. We should have the correct order of items listed, the correct icons and the correct section dividers.

https://www.figma.com/design/gpxHFDTNK796n84r1ZxYG2/Room-Header-%26-Details-(2024)?node-id=0-1&t=NCusToRsR4Vju4OT-0

[t3chguy]

Sorry, draft PRs tend to lack reviewer detail like that. Indeed the Netlify for the aforementioned PR looks like your screenshot.

[daniellekirkwood]

We're nearly out of Labs on this topic. Once released, we can close this issue.

There will be a follow up issue to track the remaining iterations on this topic.

[opusforlife2]

Just encountered the refreshed sidebar in Element Desktop. Where is the close button in the top level view? There's just the 3 tabs: Info, People, Threads. There's a close button when you're inside a thread, or profile, or Files under Info, but it's gone from the overview.

Should I open a new bug?

[t3chguy]

@opusforlife2 no you should use the existing one: #27799

[opusforlife2]

Ah. Thanks. Kept searching for sidebar.

[kongo09]

I miss global search, how do I access this?

[daniellekirkwood]

@kongo09 you can see the message search bar in the screenshots above here

Global search has not moved and is well out of scope for this ticket - maybe you don't mean global search?

[t3chguy]

@daniellekirkwood All Rooms search has moved somewhat, the search field is now in the right panel

[daniellekirkwood]

All items have been answered or moved. The Labs flag is being removed from product. There are more iterations to be done, these are captured in another issue so this one can be closed when that PR lands I think @t3chguy ...