Enable threads by default and mark it as a beta feature (#8081)

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;
     }
 }
@@ -147,20 +149,17 @@ limitations under the License.
 }
 
 .mx_RoomView_messageListWrapper {
-    min-height: 100%;
-
     display: flex;
-
     flex-direction: column;
-
     justify-content: flex-end;
+    position: relative;
 }
 
 .mx_RoomView_searchResultsPanel {
     .mx_RoomView_messageListWrapper {
         justify-content: flex-start;
 
-        > .mx_RoomView_MessageList > li > ol {
+        >.mx_RoomView_MessageList > li > ol {
             list-style-type: none;
         }
     }
@@ -295,3 +294,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 {

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,11 @@ limitations under the License.
     mask-image: url('$(res)/img/element-icons/message/thread.svg');
 }
 
+.mx_MessageActionBar_threadButton .mx_Indicator {
+    background: $links;
+    animation-iteration-count: infinite;
+}
+
 .mx_MessageActionBar_editButton::after {
     mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
 }

res/css/views/right_panel/_ThreadPanel.scss

@@ -17,6 +17,8 @@ limitations under the License.
 .mx_ThreadPanel {
     display: flex;
     flex-direction: column;
+    height: 100px;
+    overflow: visible;
 
     .mx_BaseCard_header {
         margin-bottom: 12px;
@@ -225,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: end;
+        gap: 4px;
+        position: relative;
+        top: 2px;
+
+        .mx_AccessibleButton_kind_link_inline {
+            color: $secondary-content;
+        }
+    }
 }
 
 .mx_ThreadPanel_replies {
@@ -269,10 +285,10 @@ limitations under the License.
     align-items: center;
     justify-content: center;
     position: absolute;
-    top: 48px;
-    bottom: 8px;
-    left: 8px;
-    right: 8px;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
     padding: 20px;
 
     h2 {

res/css/views/rooms/_EventTile.scss

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