Release threads as a beta feature

res/css/structures/_RightPanel.scss

@@ -103,6 +103,7 @@ $pulse-color: $alert;
         mask-position: center;
     }
 }
+
 .mx_RightPanel_headerButton_unreadIndicator_bg {
     position: absolute;
     right: $dot-offset;
@@ -121,14 +122,6 @@ $pulse-color: $alert;
     right: $dot-offset;
     top: $dot-offset;
     margin: 4px;
-    width: $dot-size;
-    height: $dot-size;
-    border-radius: 50%;
-    transform: scale(1);
-    background: rgba($pulse-color, 1);
-    box-shadow: 0 0 0 0 rgba($pulse-color, 1);
-    animation: mx_RightPanel_indicator_pulse 2s infinite;
-    animation-iteration-count: 1;
 
     &.mx_Indicator_red {
         background: rgba($alert, 1);
@@ -144,22 +137,6 @@ $pulse-color: $alert;
         background: rgba($primary-content, 1);
         box-shadow: rgba($primary-content, 1);
     }
-
-    &::after {
-        content: "";
-        position: absolute;
-        width: inherit;
-        height: inherit;
-        top: 0;
-        left: 0;
-        transform: scale(1);
-        transform-origin: center center;
-        animation-name: mx_RightPanel_indicator_pulse_shadow;
-        animation-duration: inherit;
-        animation-iteration-count: inherit;
-        border-radius: 50%;
-        background: inherit;
-    }
 }
 
 .mx_RightPanel_timelineCardButton {
@@ -250,7 +227,8 @@ $pulse-color: $alert;
         margin: 16px 0;
     }
 
-    h2, p {
+    h2,
+    p {
         font-size: $font-14px;
     }
 

res/css/structures/_RoomView.scss

@@ -105,7 +105,9 @@ limitations under the License.
     flex: 1;
     min-width: 0;
 
-    .mx_RoomView_messagePanel, .mx_RoomView_messagePanelSpinner, .mx_RoomView_messagePanelSearchSpinner {
+    .mx_RoomView_messagePanel,
+    .mx_RoomView_messagePanelSpinner,
+    .mx_RoomView_messagePanelSearchSpinner {
         order: 2;
     }
 }
@@ -160,7 +162,7 @@ limitations under the License.
     .mx_RoomView_messageListWrapper {
         justify-content: flex-start;
 
-        > .mx_RoomView_MessageList > li > ol {
+        >.mx_RoomView_MessageList > li > ol {
             list-style-type: none;
         }
     }
@@ -289,3 +291,62 @@ hr.mx_RoomView_myReadMarker {
         min-height: 42px;
     }
 }
+
+@keyframes mx_Indicator_pulse {
+    0% {
+        transform: scale(0.95);
+    }
+
+    70% {
+        transform: scale(1);
+    }
+
+    100% {
+        transform: scale(0.95);
+    }
+}
+
+@keyframes mx_Indicator_pulse_shadow {
+    0% {
+        opacity: 0.7;
+    }
+
+    70% {
+        transform: scale(2.2);
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.mx_Indicator {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: $dot-size;
+    height: $dot-size;
+    border-radius: 50%;
+    transform: scale(1);
+    background: rgba($pulse-color, 1);
+    box-shadow: 0 0 0 0 rgba($pulse-color, 1);
+    animation: mx_Indicator_pulse 2s infinite;
+    animation-iteration-count: 1;
+
+    &::after {
+        content: "";
+        position: absolute;
+        width: inherit;
+        height: inherit;
+        top: 0;
+        left: 0;
+        transform: scale(1);
+        transform-origin: center center;
+        animation-name: mx_Indicator_pulse_shadow;
+        animation-duration: inherit;
+        animation-iteration-count: inherit;
+        border-radius: 50%;
+        background: inherit;
+    }
+}

res/css/views/elements/_Tooltip.scss

@@ -16,13 +16,23 @@ limitations under the License.
 */
 
 @keyframes mx_fadein {
-    from { opacity: 0; }
-    to { opacity: 1; }
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes mx_fadeout {
-    from { opacity: 1; }
-    to { opacity: 0; }
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+    }
 }
 
 .mx_Tooltip_chevron {
@@ -79,6 +89,10 @@ limitations under the License.
     &.mx_Tooltip_invisible {
         animation: mx_fadeout 0.1s forwards;
     }
+
+    small {
+        color: $secondary-content;
+    }
 }
 
 // These tooltips use an older style with a chevron

res/css/views/messages/_MessageActionBar.scss

@@ -48,7 +48,7 @@ limitations under the License.
         cursor: initial;
     }
 
-    > * {
+    >* {
         white-space: nowrap;
         display: inline-block;
         position: relative;
@@ -102,6 +102,10 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/message/thread.svg');
 }
 
+.mx_MessageActionBar_threadButton .mx_Indicator {
+    background: $links;
+}
+
 .mx_MessageActionBar_editButton::after {
     mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
 }

res/css/views/right_panel/_ThreadPanel.scss

@@ -17,17 +17,21 @@ limitations under the License.
 .mx_ThreadPanel {
     display: flex;
     flex-direction: column;
+    overflow: visible;
 
     .mx_BaseCard_header {
         margin-bottom: 12px;
+
         .mx_BaseCard_close,
         .mx_BaseCard_back {
             width: 24px;
             height: 24px;
         }
+
         .mx_BaseCard_back {
             left: -4px;
         }
+
         .mx_BaseCard_close {
             right: -4px;
         }
@@ -66,6 +70,7 @@ limitations under the License.
             --size: 24px;
             width: var(--size);
             height: var(--size);
+
             &::after {
                 mask-size: var(--size);
                 mask-image: url("$(res)/img/element-icons/message/overflow-large.svg");
@@ -125,13 +130,15 @@ limitations under the License.
         padding-right: 0;
     }
 
-    .mx_EventTile, .mx_GenericEventListSummary {
+    .mx_EventTile,
+    .mx_GenericEventListSummary {
         // Account for scrollbar when hovering
         padding-top: 0;
 
         .mx_ThreadInfo {
             position: relative;
             padding-right: 11px;
+
             &::after {
                 content: '';
                 display: block;
@@ -220,6 +227,20 @@ limitations under the License.
             display: none; // hide the hidden event expand button, not enough space, view source can still be used
         }
     }
+
+    .mx_BaseCard_footer {
+        text-align: left;
+        font-size: $font-12px;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        position: relative;
+        top: 2px;
+
+        .mx_AccessibleButton_kind_link_inline {
+            color: $secondary-content;
+        }
+    }
 }
 
 .mx_ThreadPanel_replies {
@@ -317,6 +338,7 @@ limitations under the License.
 .mx_ContextualMenu_wrapper.mx_ThreadPanel__header {
     .mx_ContextualMenu {
         position: initial;
+
         span:first-of-type {
             font-weight: $font-semi-bold;
             font-size: inherit;
@@ -336,6 +358,7 @@ limitations under the License.
         left: auto;
         right: 22px;
         border-bottom-color: $quinary-content;
+
         &::after {
             content: "";
             border: inherit;
@@ -357,10 +380,12 @@ limitations under the License.
         &:hover {
             background-color: $event-selected-color;
         }
+
         &[aria-checked="true"] {
             :first-child {
                 margin-left: -20px;
             }
+
             :first-child::before {
                 content: "";
                 width: 12px;

res/css/views/rooms/_EventTile.scss

@@ -905,6 +905,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
 .mx_ThreadView {
     display: flex;
     flex-direction: column;
+    max-height: 100%;
 
     .mx_ThreadView_List {
         flex: 1;

res/themes/light/css/_light.scss

@@ -8,9 +8,22 @@
 /* Noto Color Emoji contains digits, in fixed-width, therefore causing
    digits in flowed text to stand out.
    TODO: Consider putting all emoji fonts to the end rather than the front. */
-$font-family: 'Inter', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial', 'Helvetica', sans-serif, 'Noto Color Emoji';
-
-$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
+$font-family: 'Inter',
+'Twemoji',
+'Apple Color Emoji',
+'Segoe UI Emoji',
+'Arial',
+'Helvetica',
+sans-serif,
+'Noto Color Emoji';
+
+$monospace-font-family: 'Inconsolata',
+'Twemoji',
+'Apple Color Emoji',
+'Segoe UI Emoji',
+'Courier',
+monospace,
+'Noto Color Emoji';
 
 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A120
 // ********************
@@ -57,7 +70,7 @@ $icon-button-color: $quaternary-content;
 // Colors that aren't in Figma and are theme specific - we need to get rid of these
 // ********************
 $selection-fg-color: $background;
-$yellow-background:  #fff8e3;
+$yellow-background: #fff8e3;
 $secondary-accent-color: #f2f5f8;
 $button-fg-color: $background;
 $neutral-badge-color: #dbdbdb;
@@ -79,7 +92,8 @@ $event-selected-color: #f6f7f8;
 $topleftmenu-color: #212121;
 $roomtopic-color: #9e9e9e;
 $spacePanel-bg-color: rgba(232, 232, 232, 0.77);
-$panel-gradient: rgba(242, 245, 248, 0), rgba(242, 245, 248, 1);
+$panel-gradient: rgba(242, 245, 248, 0),
+rgba(242, 245, 248, 1);
 $h3-color: #3d3b39;
 $event-highlight-bg-color: $yellow-background;
 $header-panel-text-primary-color: #91A1C0;
@@ -296,6 +310,7 @@ $focus-brightness: 105%;
 :root {
     --lp-background-blur: 40px;
 }
+
 // ********************
 
 // Icon URLs
@@ -330,8 +345,7 @@ $location-live-secondary-color: #deddfd;
     outline: none;
 }
 
-@define-mixin mx_DialogButton_hover {
-}
+@define-mixin mx_DialogButton_hover {}
 
 @define-mixin mx_DialogButton_danger {
     background-color: $accent;
@@ -355,6 +369,7 @@ $location-live-secondary-color: #deddfd;
     color: $accent;
     text-decoration: none;
 }
+
 // ********************
 
 // diff highlight colors
@@ -366,4 +381,5 @@ $location-live-secondary-color: #deddfd;
 .hljs-deletion {
     background: #fdd;
 }
+
 // ********************