Threads design implementation review

[janogarcia]

Thread panel button


• When viewing a thread if you click on the threads panel icon on the room header the thread panel will navigate back to the thread list view. Clicking on the thread panel icon should always toggle on/off the thread panel, not navigate back.



Thread list

• The “Thread options” menu can’t be revealed, clicking on it takes you to the thread detail view.
• Dropdown: Button hover transition. Button text color. Menu secondary text color. Menu padding. Menu hover status.
  • What is the button hover transition?
• Limit the length of thread root message titles: line clamp (2 lines) and ellipsis.
• The thread tiles should be aligned to the top. Duplicate of Support ability to add events to both top and bottom of TimelinePanel #19393
• The thread tiles should be ordered from latest reply date, newest on the top. #19676
  • Not possible as we can't fetch and sort threads that way from Synapse
• The thread tile timestamp should match that of the latest reply. It means “last updated” rather than created.
• Show pointer cursor when hovering.
• The timestamp font size should be 12px.
• Spacing between the reply count and the avatar of the latest reply should be 12px, instead of 8px.
• The thread summary in the thread list should be separated by 8px from the the root message. 🔴 NOT FIXED YET It should be .mx_ThreadPanel_replies { margin-top: 8px; }
• The thread icon should be 18x18px.
• Don’t show the “(edited)” status/link for root messages in the thread list. #19683
• Empty state: Fix the broken layout for the case where the root message has been deleted. 🔴 NOT FIXED YET Please try creating a thread, then deleting the root message and check how it's rendered on the thread list.
• Clicking on the upper area between the avatar and timestamp doesn’t take you to the thread detail view. #19684
• Clicking anywhere on a thread tile should take you to the thread detail view (e.g. clicking on an avatar in the thread list should take you to the thread detail view, not the user profile view) https://www.figma.com/file/T309ztx0sNyOOK6NKVLHsK/Threads?node-id=1150%3A202556
• The dropdown popover should be dismissed if clicking outside of it. 🔴 NOT FIXED YET It's still not being automatically dismissed. The user is still being required to act on the dropdown toggle button to dismiss it.
• The thread tile hover background should be #F3F6FA. It's currently a mix of #F3F6FA on the top and #F6F7F8 on the bottom for some reason.
• The timestamp color should be #737D8C (secondary color fo light theme).
• No threads in room Empty state: Hide the relevance filter (the dropdown on the header) if there's no threads at all in room. Update the copy to the latest iteration, splitting the body copy into two paragraphs. https://www.figma.com/file/T309ztx0sNyOOK6NKVLHsK/Threads?node-id=2067%3A255125
• No threads in room Empty state: Fix the spacing between blocks (Icon ↔ 24px ↔ Title ↔ 20px ↔ Description). Figma
• No threads in room Empty state: Replace regular/straight quotes "" with typographical quotes “” for "Reply in thread" text. It should read “Reply in thread”.
• No threads in "My Threads" empty state: Update the body copy. https://www.figma.com/file/T309ztx0sNyOOK6NKVLHsK/Threads?node-id=2067%3A254213
• The options in the thread filter dropdown menu are reverse ordered. https://www.figma.com/file/T309ztx0sNyOOK6NKVLHsK/Threads?node-id=1150%3A188430
• Emotes and Rainbow emotes as the root message for a thread break the layout for thread tiles #20869
• Remove mentions decorations for root messages in the thread list #20870
• Fix the rendering of redacted root messages in the thread list #20871
• Place the encryption shield for thread tiles in the same place as regular message tiles #20874

Thread detail

• Empty state: Fix the broken layout for the case where the root message has been deleted.
• The overflow/3-dot icon mask CSS property is set to 18px, which effectively makes the icon to render at 18px, instead of 24px.
• There should be a 12px gap to both sides of content. https://cloudup.com/cH8LKHcO3RK
• The timestamp should be displayed below the avatar as in the room timeline, instead of taking up space on the right area. https://cloudup.com/cH8LKHcO3RK

Thread panel

• The top right corner in the main container (white) should be round, not square.
• Bottom padding should be 8px instead of 4px.
• Right padding should be 8px.
• The back button should read “All threads”, instead of “Back”.
 Figma
• Fix header right padding.
• The panel header should be always the same height, it currently differs depending if you're on the thread list or thread detail view.
• Header overflow button icon.
  • What is the issue here?
• persist the hover state of the message action bar for TileShape.ThreadPanel
• The persisted hover state when the Thread options menu is revealed is not being applied to the top of the thread tile
• Display e2ee shield under the user avatar, at the moment it's overlays the body
• The thread header should be vertically centered. https://cloudup.com/cINen7xTsZn
• Use the same background color for the pointing triangle in the filter popover in dark mode #20872

Thread summary

• Show right chevron on hover. Figma
• Thread icon should be 18x18px
• The thread summary container height should be 40px (as a result of adding 8px top and bottom padding to the 24px avatar)
• Separate the thread summary by an additional 8px distance from the reactions container (e.g. using the adjacent sibling combinator .mx_ReactionsRow + .mx_ThreadInfo { margin-top: 8px; })
• Apply the same line height of the reply excerpt to the reply count label, for better optical vertical alignment.
• Spacing between the reply count and the avatar of the latest reply should be 12px, instead of 8px.
• Implement the expected fluid width behavior. For example, by setting .mx_ThreadInfo { display: inline-flex; } rather than display: flex;.

Other

• Don’t show a “Show threads” action in the Room Info panel.
• The tooltip in the room timeline contextual actions should read “Reply in thread”, instead of just “Thread”

[germain-gg]

The thread tiles should be ordered from latest reply date, newest on the top.

The client can manage that state once Element is running. However for the initial state, Synapse will need to return a sorted list of threads.

@clokep is it possible to achieve that? My guess is no, because that means that the pagination token would not be idempotent anymore

[clokep]

The thread tiles should be ordered from latest reply date, newest on the top.

The client can manage that state once Element is running. However for the initial state, Synapse will need to return a sorted list of threads.

@clokep is it possible to achieve that? My guess is no, because that means that the pagination token would not be idempotent anymore

I believe for this you're planning to use the /messages endpoint which supports ordering.

[janogarcia]

@gsouquet Closing this one in favor of #21502 👍