Merge branch 'develop' into UserInfo

res/css/_components.scss

@@ -4,6 +4,7 @@
 @import "./_font-sizes.scss";
 @import "./_font-weights.scss";
 @import "./_spacing.scss";
+@import "./components/views/beacon/_BeaconStatus.scss";
 @import "./components/views/beacon/_LeftPanelLiveShareWarning.scss";
 @import "./components/views/beacon/_LiveTimeRemaining.scss";
 @import "./components/views/beacon/_RoomLiveShareWarning.scss";

res/css/components/views/beacon/_BeaconStatus.scss

@@ -0,0 +1,60 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_BeaconStatus {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+
+    box-sizing: border-box;
+    padding: $spacing-8;
+
+    color: var(--color);
+    font-size: $font-12px;
+}
+
+.mx_BeaconStatus_Loading,
+.mx_BeaconStatus_Stopped {
+    --color: $tertiary-content;
+}
+
+.mx_BeaconStatus_Active,
+.mx_BeaconStatus_Error {
+    --color: $primary-content;
+}
+
+.mx_BeaconStatus_icon {
+    height: 32px;
+    width: 32px;
+
+    flex: 0 0 32px;
+    margin-right: $spacing-8;
+}
+
+.mx_BeaconStatus_activeDescription {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    line-height: $font-14px;
+}
+
+.mx_BeaconStatus_stopButton {
+    // override button link_inline styles
+    color: $alert !important;
+    font-weight: $font-semi-bold !important;
+    text-transform: uppercase;
+}

res/css/components/views/beacon/_RoomLiveShareWarning.scss

@@ -48,6 +48,10 @@ limitations under the License.
     margin-left: $spacing-16;
 }
 
+.mx_RoomLiveShareWarning_stopButton {
+    margin-left: $spacing-16;
+}
+
 .mx_RoomLiveShareWarning_closeButtonIcon {
     height: $font-18px;
     padding: $spacing-4;

res/css/components/views/beacon/_StyledLiveBeaconIcon.scss

@@ -33,3 +33,8 @@ limitations under the License.
     background-color: $alert;
     border-color: $alert;
 }
+
+.mx_StyledLiveBeaconIcon.mx_StyledLiveBeaconIcon_idle {
+    background-color: $quaternary-content;
+    border-color: $quaternary-content;
+}

res/css/components/views/messages/_MBeaconBody.scss

@@ -48,6 +48,13 @@ limitations under the License.
     color: $quaternary-content;
 }
 
+.mx_MBeaconBody_chin {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    background-color: $overlay-background;
+}
+
 .mx_EventTile[data-layout="bubble"] .mx_EventTile_line .mx_MBeaconBody {
     max-width: 100%;
     width: 450px;

res/css/views/right_panel/_ThreadPanel.scss

@@ -165,6 +165,10 @@ limitations under the License.
         }
     }
 
+    .mx_GenericEventListSummary > .mx_EventTile_line {
+        padding-left: 30px !important; // Override main timeline styling - align summary text with message text
+    }
+
     .mx_EventTile:not([data-layout=bubble]) {
         .mx_EventTile_e2eIcon {
             left: 8px;
@@ -212,19 +216,21 @@ limitations under the License.
     }
 
     // handling for hidden events (e.g reactions) in the thread view
-    &.mx_ThreadView .mx_GenericEventListSummary_unstyledList .mx_EventTile_info {
+    &.mx_ThreadView .mx_EventTile_info {
+        padding-top: 0 !important; // override main timeline padding
+
         .mx_EventTile_line {
             padding-left: 0 !important; // override main timeline padding
 
             .mx_EventTile_content {
-                margin-left: 54px; // align with text
-                width: calc(100% - 54px - 8px); // match width of parent
+                margin-left: 48px; // align with text
+                width: calc(100% - 48px - 8px); // match width of parent
             }
         }
 
         .mx_EventTile_avatar {
             position: absolute;
-            left: 36px !important; // override main timeline positioning
+            left: 30px !important; // override main timeline positioning
             z-index: 9; // position above the hover styling
         }
 
@@ -237,7 +243,7 @@ limitations under the License.
         text-align: left;
         font-size: $font-12px;
         align-items: center;
-        justify-content: end;
+        justify-content: flex-end;
         gap: 4px;
         position: relative;
         top: 2px;

res/css/views/right_panel/_TimelineCard.scss

@@ -39,6 +39,7 @@ limitations under the License.
         overflow: hidden;
         position: relative; // offset parent for jump to bottom button
         flex: 1;
+        border-radius: 8px;
     }
 
     .mx_AutoHideScrollbar {
@@ -124,4 +125,12 @@ limitations under the License.
     .mx_WhoIsTypingTile_avatars {
         flex-basis: 48px; // 12 (padding on message list) + 36 (padding on event lines)
     }
+
+    &.mx_BaseCard {
+        // For a chat timeline on the right panel when the widget is maximised
+        // TODO: rename ThreadPanel
+        &.mx_ThreadPanel {
+            padding-right: 8px; // .mx_RightPanel padding
+        }
+    }
 }

res/css/views/rooms/_EventTile.scss

@@ -762,7 +762,8 @@ $left-gutter: 64px;
         bottom: 0;
         width: 60px;
         box-sizing: border-box;
-        background: linear-gradient(270deg, $system 52.6%, transparent 100%);
+        // XXX: We use `$system-transparent` instead of `transparent` to work around a Safari <15.4 bug
+        background: linear-gradient(270deg, $system 50%, $system-transparent 100%);
 
         opacity: 0;
         transform: translateX(60px);

res/themes/dark/css/_dark.scss

@@ -7,7 +7,9 @@ $quaternary-content: #6F7882;
 $quinary-content: #394049;
 
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: #15191E;
+$overlay-background: rgba($background, 0.85);
 
 $panel-base: #8D97A5; // This color is not intended for use in the app
 $panels: rgba($system, 0.9);

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -1,5 +1,6 @@
 // Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 
 // unified palette
 // try to use these colors when possible
@@ -97,7 +98,10 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #21262C;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: $primary-bg-color;
+$overlay-background: rgba($background, 0.85);
+
 $panels: rgba($system, 0.9);
 $panel-base: #8D97A5; // This color is not intended for use in the app
 $panel-selected: rgba($panel-base, 0.3);

res/themes/legacy-light/css/_legacy-light.scss

@@ -150,7 +150,10 @@ $tertiary-content: $tertiary-fg-color;
 $quaternary-content: #6F7882;
 $quinary-content: $quaternary-content;
 $system: #F4F6FA;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: $primary-bg-color;
+$overlay-background: rgba($background, 0.85);
+
 $panels: rgba($system, 0.9);
 $panel-base: #8D97A5; // This color is not intended for use in the app
 $panel-selected: rgba($tertiary-content, 0.3);

res/themes/light-custom/css/_custom.scss

@@ -26,6 +26,8 @@ $secondary-content: var(--secondary-content, $secondary-content);
 $tertiary-content: var(--tertiary-content, $tertiary-content);
 $quaternary-content: var(--quaternary-content, $quaternary-content);
 $quinary-content: var(--quinary-content, $quinary-content);
+// XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670
+$system-transparent: var(--system-transparent, rgba($system, 0.0));
 $system: var(--system, $system);
 $background: var(--background, $background);
 $panels: rgba($system, 0.9);

res/themes/light/css/_light.scss

@@ -34,7 +34,9 @@ $quaternary-content: #c1c6cd;
 $quinary-content: #E3E8F0;
 
 $system: #F4F6FA;
+$system-transparent: rgba($system, 0.0); // XXX: workaround for Safari 15.3 linear-gradient bug
 $background: #ffffff;
+$overlay-background: rgba($background, 0.85);
 
 $panels: rgba($system, 0.9);
 $panel-selected: rgba($tertiary-content, 0.3);

src/Lifecycle.ts

@@ -875,8 +875,9 @@ async function clearStorage(opts?: { deleteEverything?: boolean }): Promise<void
     Analytics.disable();
 
     if (window.localStorage) {
-        // try to save any 3pid invites from being obliterated
+        // try to save any 3pid invites from being obliterated and registration time
         const pendingInvites = ThreepidInviteStore.instance.getWireInvites();
+        const registrationTime = window.localStorage.getItem("mx_registration_time");
 
         window.localStorage.clear();
 
@@ -886,13 +887,17 @@ async function clearStorage(opts?: { deleteEverything?: boolean }): Promise<void
             logger.error("idbDelete failed for account:mx_access_token", e);
         }
 
-        // now restore those invites
+        // now restore those invites and registration time
         if (!opts?.deleteEverything) {
             pendingInvites.forEach(i => {
                 const roomId = i.roomId;
                 delete i.roomId; // delete to avoid confusing the store
                 ThreepidInviteStore.instance.storeInvite(roomId, i);
             });
+
+            if (registrationTime) {
+                window.localStorage.setItem("mx_registration_time", registrationTime);
+            }
         }
     }
 

src/MatrixClientPeg.ts

@@ -117,7 +117,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
     };
 
     private matrixClient: MatrixClient = null;
-    private justRegisteredUserId: string;
+    private justRegisteredUserId: string | null = null;
 
     // the credentials used to init the current client object.
     // used if we tear it down & recreate it with a different store
@@ -136,7 +136,7 @@ class MatrixClientPegClass implements IMatrixClientPeg {
         MatrixActionCreators.stop();
     }
 
-    public setJustRegisteredUserId(uid: string): void {
+    public setJustRegisteredUserId(uid: string | null): void {
         this.justRegisteredUserId = uid;
         if (uid) {
             window.localStorage.setItem("mx_registration_time", String(new Date().getTime()));
@@ -151,9 +151,14 @@ class MatrixClientPegClass implements IMatrixClientPeg {
     }
 
     public userRegisteredWithinLastHours(hours: number): boolean {
+        if (hours <= 0) {
+            return false;
+        }
+
         try {
-            const date = new Date(window.localStorage.getItem("mx_registration_time"));
-            return ((new Date().getTime() - date.getTime()) / 36e5) <= hours;
+            const registrationTime = parseInt(window.localStorage.getItem("mx_registration_time"));
+            const diff = Date.now() - registrationTime;
+            return (diff / 36e5) <= hours;
         } catch (e) {
             return false;
         }

src/components/structures/RoomView.tsx

@@ -1395,15 +1395,17 @@ export class RoomView extends React.Component<IRoomProps, IRoomState> {
                 return b.length - a.length;
             });
 
-            // Process all thread roots returned in this batch of search results
-            // XXX: This won't work for results coming from Seshat which won't include the bundled relationship
-            for (const result of results.results) {
-                for (const event of result.context.getTimeline()) {
-                    const bundledRelationship = event
-                        .getServerAggregatedRelation<IThreadBundledRelationship>(THREAD_RELATION_TYPE.name);
-                    if (!bundledRelationship || event.getThread()) continue;
-                    const room = this.context.getRoom(event.getRoomId());
-                    event.setThread(room.findThreadForEvent(event) ?? room.createThread(event, [], true));
+            if (this.context.supportsExperimentalThreads()) {
+                // Process all thread roots returned in this batch of search results
+                // XXX: This won't work for results coming from Seshat which won't include the bundled relationship
+                for (const result of results.results) {
+                    for (const event of result.context.getTimeline()) {
+                        const bundledRelationship = event
+                            .getServerAggregatedRelation<IThreadBundledRelationship>(THREAD_RELATION_TYPE.name);
+                        if (!bundledRelationship || event.getThread()) continue;
+                        const room = this.context.getRoom(event.getRoomId());
+                        event.setThread(room.findThreadForEvent(event) ?? room.createThread(event, [], true));
+                    }
                 }
             }