Threads Beta — Design implementation review

Root message avatar: Make .mx_EventTile_avatar render a 36px image (instead of 24px)
❌ Apr. 1 Now it’s measuring 32px instead of 36px.
Root message avatar: Change .mx_EventTile_avatar top position to 0 (instead of top: -4px)
Vertical alignment for elements in the thread summary should behave the same way as thread summaries in the main timeline (the ones that Michael (t3chguy) recently fixed).
Align thread list to the top (latest activity on the top, screenshot).
✋ Blocked by BACAT scrolling
❌ May. 26 It’s been suggested to treat this enhancement separately from the Threads project. https://github.com/vector-im/element-web/issues/21502#issuecomment-1138637261
Make the right gutter 40px (screenshot: currently set to 32px).
❌ Apr. 1 Now it’s measuring 46px instead of 40px.
Unread indicator: set dot size to 10px and center it. (screenshot)
→ Figma
🐛 Apr. 1 Barely visible, the dot is almost completely cut off (macOS Chrome).
Unread indicator: use Compound’s secondary color for the gray color (instead of #61708b)

~~Fix split background colors. (screenshot)~~
Tracked by https://github.com/vector-im/element-web/issues/21759
Remove left green border for own root messages.
Make the border radius 8px (instead of 4px).
~~Extend background color on all sides to add expected padding.~~
Tracked by https://github.com/vector-im/element-web/issues/21759

Refer to mockups.

Fix the margins for the contents (screenshot).
Add missing line: Tip: Use “Reply in thread” when hovering over a message..
→ Figma
🐛 Apr. 1 When visiting a room it suddenly changes to the previous version (the one without the tip) when it attempts to load the thread list for the first time.
Set Show all threads font size to 15px.
Filter popover menu: Do not reverse caret direction when control is active.
→ Figma
Filter popover menu: Set a gap of 2px between popover menu and the control.
→ Figma
❌ Apr. 1 The gap is now bigger, get it 2px closer.

Make the left gutter 60px (screenshot: currently set to 48px)
❌ Apr. 1 It was 48px, now 52px, still not 60px.
The user name and message body should align to the same vertical line. (screenshot)
Vertical spacing between message titles: Apply the same spacing as in the main timeline (screenshot).
❌ Apr. 1 Set padding-top: 14px for .mx_ThreadView .mx_EventTile.
~~Align timeline to the top of the timeline container.~~
→ Figma
✋ Blocked by BACAT scrolling
❌ May. 26 We’re dropping this requirement for the thread timeline.
View in room action is missing in the root message contextual actions.

Fix layout for “From a thread” footer: align left edge and add missing gap between icon and label (just change margin-left: 8px; for .mx_ThreadSummaryIcon::before to be margin-right: 8px;), reduce top margin (make margin-top: 8px for mx_ThreadSummaryIcon).
→ Figma
❌ Apr. 1 “From a thread” text should use secondary color. Also, .mx_ThreadSummaryIcon is now an inline element, and thus the 8px vertical margin is having no effect.
Make the thread reply footer mx_ThreadSummaryIcon clickable, behaving the same way as its related mx_EventTile_line.

Root messages in search results should display the thread summary in the footer. (“From a thread” it’s only for thread replies)
→ Figma
Tracked by https://github.com/vector-im/element-web/issues/21450

Refer to the annotations on how the flow should work for “Keyword match in root message”:

Clicking on the root message shows it in the room timeline.
Clicking on the thread summary opens the thread panel for the matching room. It will only exit the search result screen if keyword match is from a different room.