Add Recovery section in the new user settings Encryption tab

res/css/_common.pcss

@@ -596,7 +596,9 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
+    ),
 .mx_Dialog input[type="submit"],
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton),
 .mx_Dialog_buttons input[type="submit"] {
@@ -616,16 +618,18 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(
-        .mx_ShareDialog button
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
     ):last-child {
     margin-right: 0px;
 }
 
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):focus,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
+    ):focus,
 .mx_Dialog input[type="submit"]:focus,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):focus,
 .mx_Dialog_buttons input[type="submit"]:focus {
@@ -637,7 +641,9 @@ legend {
 .mx_Dialog_buttons
     button.mx_Dialog_primary:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
+    ),
 .mx_Dialog_buttons input[type="submit"].mx_Dialog_primary {
     color: var(--cpd-color-text-on-solid-primary);
     background-color: var(--cpd-color-bg-action-primary-rest);
@@ -650,7 +656,7 @@ legend {
 .mx_Dialog_buttons
     button.danger:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):not(.mx_UserProfileSettings button):not(
         .mx_ThemeChoicePanel_CustomTheme button
-    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button),
+    ):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(.mx_EncryptionUserSettingsTab button),
 .mx_Dialog_buttons input[type="submit"].danger {
     background-color: var(--cpd-color-bg-critical-primary);
     border: solid 1px var(--cpd-color-bg-critical-primary);
@@ -666,7 +672,9 @@ legend {
 .mx_Dialog
     button:not(.mx_Dialog_nonDialogButton):not([class|="maplibregl"]):not(.mx_AccessibleButton):not(
         .mx_UserProfileSettings button
-    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):disabled,
+    ):not(.mx_ThemeChoicePanel_CustomTheme button):not(.mx_UnpinAllDialog button):not(.mx_ShareDialog button):not(
+        .mx_EncryptionUserSettingsTab button
+    ):disabled,
 .mx_Dialog input[type="submit"]:disabled,
 .mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton):not(.mx_AccessibleButton):disabled,
 .mx_Dialog_buttons input[type="submit"]:disabled {

res/css/_components.pcss

@@ -346,10 +346,14 @@
 @import "./views/settings/_SetIdServer.pcss";
 @import "./views/settings/_SetIntegrationManager.pcss";
 @import "./views/settings/_SettingsFieldset.pcss";
+@import "./views/settings/_SettingsHeader.pcss";
+@import "./views/settings/_SettingsSubheader.pcss";
 @import "./views/settings/_SpellCheckLanguages.pcss";
 @import "./views/settings/_ThemeChoicePanel.pcss";
 @import "./views/settings/_UpdateCheckButton.pcss";
 @import "./views/settings/_UserProfileSettings.pcss";
+@import "./views/settings/encryption/_ChangeRecoveryKey.pcss";
+@import "./views/settings/encryption/_EncryptionCard.pcss";
 @import "./views/settings/tabs/_SettingsBanner.pcss";
 @import "./views/settings/tabs/_SettingsIndent.pcss";
 @import "./views/settings/tabs/_SettingsSection.pcss";

res/css/views/settings/_SettingsHeader.pcss

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_SettingsHeader {
+    display: flex;
+    align-items: center;
+    gap: var(--cpd-space-2x);
+    /* Override margin from common.pcss */
+    margin: 0;
+
+    > span {
+        font: var(--cpd-font-body-sm-medium);
+        color: var(--cpd-color-text-action-accent);
+    }
+}

res/css/views/settings/_SettingsSubheader.pcss

@@ -0,0 +1,27 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_SettingsSubheader {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-2x);
+
+    > span {
+        display: flex;
+        align-items: center;
+        gap: var(--cpd-space-2x);
+        font: var(--cpd-font-body-sm-medium);
+    }
+
+    .mx_SettingsSubheader_success {
+        color: var(--cpd-color-text-success-primary);
+    }
+
+    .mx_SettingsSubheader_error {
+        color: var(--cpd-color-text-critical-primary);
+    }
+}

res/css/views/settings/encryption/_ChangeRecoveryKey.pcss

@@ -0,0 +1,73 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_ChangeRecoveryKey {
+    .mx_InformationPanel_description {
+        text-align: center;
+    }
+
+    .mx_ChangeRecoveryKey_Form {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-8x);
+
+        .mx_ChangeRecoveryKey_footer {
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-4x);
+            justify-content: center;
+        }
+    }
+
+    .mx_KeyPanel {
+        display: grid;
+        grid-template:
+            "header button" auto
+            "content button" auto;
+
+        column-gap: var(--cpd-space-3x);
+        row-gap: var(--cpd-space-1x);
+        align-items: center;
+
+        > span {
+            grid-area: header;
+        }
+
+        > div {
+            grid-area: content;
+            display: flex;
+            flex-direction: column;
+            gap: var(--cpd-space-2x);
+            color: var(--cpd-color-text-secondary);
+
+            .mx_KeyPanel_key {
+                border-radius: var(--cpd-space-2x);
+                padding: var(--cpd-space-3x) var(--cpd-space-4x);
+                background-color: var(--cpd-color-bg-subtle-secondary);
+            }
+        }
+
+        > button {
+            margin: 0 var(--cpd-space-1x);
+            grid-area: button;
+            color: var(--cpd-color-icon-secondary-alpha);
+        }
+    }
+
+    .mx_KeyForm {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-8x);
+    }
+
+    .mx_ChangeRecoveryKey_footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        justify-content: center;
+    }
+}

res/css/views/settings/encryption/_EncryptionCard.pcss

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.mx_EncryptionCard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--cpd-space-8x);
+    padding: var(--cpd-space-10x);
+    border-radius: var(--cpd-space-4x);
+    /* From figma */
+    box-shadow: 0 1.2px 2.4px 0 rgba(27, 29, 34, 0.15);
+    border: 1px solid var(--cpd-color-gray-400);
+
+    .mx_EncryptionCard_header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-4x);
+        align-items: center;
+
+        > h2 {
+            margin: 0;
+        }
+
+        > span {
+            color: var(--cpd-color-text-secondary);
+            text-align: center;
+        }
+    }
+}

res/css/views/settings/tabs/_SettingsSection.pcss

@@ -15,6 +15,20 @@ Please see LICENSE files in the repository root for full details.
     a {
         color: $links;
     }
+
+    &.mx_SettingsSection_newUi {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-6x);
+        align-items: start;
+    }
+
+    .mx_SettingsSection_header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--cpd-space-3x);
+        color: var(--cpd-color-text-secondary);
+    }
 }
 
 .mx_SettingsSection_subSections {

res/css/views/settings/tabs/_SettingsTab.pcss

@@ -14,7 +14,7 @@ Please see LICENSE files in the repository root for full details.
         color: $links;
     }
 
-    form {
+    form:not(.mx_EncryptionUserSettingsTab form) {
         display: flex;
         flex-direction: column;
         gap: $spacing-8;

src/components/views/dialogs/UserSettingsDialog.tsx

@@ -15,6 +15,7 @@ import VisibilityOnIcon from "@vector-im/compound-design-tokens/assets/web/icons
 import NotificationsIcon from "@vector-im/compound-design-tokens/assets/web/icons/notifications";
 import PreferencesIcon from "@vector-im/compound-design-tokens/assets/web/icons/preferences";
 import KeyboardIcon from "@vector-im/compound-design-tokens/assets/web/icons/keyboard";
+import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key";
 import SidebarIcon from "@vector-im/compound-design-tokens/assets/web/icons/sidebar";
 import MicOnIcon from "@vector-im/compound-design-tokens/assets/web/icons/mic-on";
 import LockIcon from "@vector-im/compound-design-tokens/assets/web/icons/lock";
@@ -44,6 +45,7 @@ import { NonEmptyArray } from "../../../@types/common";
 import { SDKContext, SdkContextClass } from "../../../contexts/SDKContext";
 import { useSettingValue } from "../../../hooks/useSettings";
 import { ToastContext, useActiveToast } from "../../../contexts/ToastContext";
+import { EncryptionUserSettingsTab } from "../settings/tabs/user/EncryptionUserSettingsTab";
 
 interface IProps {
     initialTabId?: UserTab;
@@ -75,6 +77,8 @@ function titleForTabID(tabId: UserTab): React.ReactNode {
             return _t("settings|voip|dialog_title", undefined, subs);
         case UserTab.Security:
             return _t("settings|security|dialog_title", undefined, subs);
+        case UserTab.Encryption:
+            return _t("settings|encryption|dialog_title", undefined, subs);
         case UserTab.Labs:
             return _t("settings|labs|dialog_title", undefined, subs);
         case UserTab.Mjolnir:
@@ -179,6 +183,10 @@ export default function UserSettingsDialog(props: IProps): JSX.Element {
             ),
         );
 
+        tabs.push(
+            new Tab(UserTab.Encryption, _td("settings|encryption|title"), <KeyIcon />, <EncryptionUserSettingsTab />),
+        );
+
         if (showLabsFlags() || SettingsStore.getFeatureSettingNames().some((k) => SettingsStore.getBetaInfo(k))) {
             tabs.push(
                 new Tab(UserTab.Labs, _td("common|labs"), <LabsIcon />, <LabsUserSettingsTab />, "UserSettingsLabs"),

src/components/views/dialogs/UserTab.ts

@@ -15,6 +15,7 @@ export enum UserTab {
     Sidebar = "USER_SIDEBAR_TAB",
     Voice = "USER_VOICE_TAB",
     Security = "USER_SECURITY_TAB",
+    Encryption = "USER_ENCRYPTION_TAB",
     Labs = "USER_LABS_TAB",
     Mjolnir = "USER_MJOLNIR_TAB",
     Help = "USER_HELP_TAB",

src/components/views/settings/SettingsHeader.tsx

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { JSX } from "react";
+import { Heading } from "@vector-im/compound-web";
+
+import { _t } from "../../../languageHandler";
+
+/**
+ * The heading for a settings section.
+ */
+interface SettingsHeaderProps {
+    /**
+     * Whether the user has a recommended tag.
+     */
+    hasRecommendedTag?: boolean;
+    /**
+     * The label for the header.
+     */
+    label: string;
+}
+
+export function SettingsHeader({ hasRecommendedTag = false, label }: SettingsHeaderProps): JSX.Element {
+    return (
+        <Heading className="mx_SettingsHeader" as="h2" size="sm" weight="semibold">
+            {label} {hasRecommendedTag && <span>{_t("common|recommended")}</span>}
+        </Heading>
+    );
+}

src/components/views/settings/SettingsSubheader.tsx

@@ -0,0 +1,50 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { JSX } from "react";
+import CheckCircleIcon from "@vector-im/compound-design-tokens/assets/web/icons/check-circle-solid";
+import ErrorIcon from "@vector-im/compound-design-tokens/assets/web/icons/error";
+import classNames from "classnames";
+
+interface SettingsSubheaderProps {
+    /**
+     * The subheader text.
+     */
+    label?: string;
+    /**
+     * The state of the subheader.
+     */
+    state: "success" | "error";
+    /**
+     * The message to display next to the state icon.
+     */
+    stateMessage: string;
+}
+
+/**
+ * A styled subheader for settings.
+ */
+export function SettingsSubheader({ label, state, stateMessage }: SettingsSubheaderProps): JSX.Element {
+    return (
+        <div className="mx_SettingsSubheader">
+            {label}
+            <span
+                className={classNames({
+                    mx_SettingsSubheader_success: state === "success",
+                    mx_SettingsSubheader_error: state === "error",
+                })}
+            >
+                {state === "success" ? (
+                    <CheckCircleIcon width="20" height="20" />
+                ) : (
+                    <ErrorIcon width="20" height="20" />
+                )}
+                {stateMessage}
+            </span>
+        </div>
+    );
+}