Hide reset x-signing flow on account view under a collapsible heading

Author: t3chguy

frontend/locales/en.json

@@ -24,7 +24,8 @@
     "next": "Next",
     "previous": "Previous",
     "saved": "Saved",
-    "saving": "Saving…"
+    "saving": "Saving…",
+    "e2ee": "End-to-end encryption"
   },
   "frontend": {
     "account": {

frontend/package-lock.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@fontsource/inconsolata": "^5.0.18",
     "@fontsource/inter": "^5.0.20",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@tanstack/react-router": "^1.46.4",
     "@urql/core": "^5.0.5",

frontend/package.json

@@ -0,0 +1,32 @@
+/* Copyright 2024 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.
+ */
+
+.trigger {
+    display: flex;
+    width: 100%;
+}
+
+.trigger-title {
+    flex-grow: 1;
+    text-align: start;
+}
+
+[data-state="closed"] .trigger-icon {
+    transform: rotate(180deg);
+}
+
+.content {
+    margin-top: var(--cpd-space-2x);
+}

frontend/src/components/Collapsible/Collapsible.module.css

@@ -0,0 +1,50 @@
+// Copyright 2024 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.
+
+import * as Collapsible from "@radix-ui/react-collapsible";
+import IconChevronUp from "@vector-im/compound-design-tokens/assets/web/icons/chevron-up";
+import classNames from "classnames";
+
+import styles from "./Collapsible.module.css";
+
+export const Trigger: React.FC<
+  React.ComponentProps<typeof Collapsible.Trigger>
+> = ({ children, className, ...props }) => {
+  return (
+    <Collapsible.Trigger
+      {...props}
+      className={classNames(styles.trigger, className)}
+    >
+      <div className={styles.triggerTitle}>{children}</div>
+      <IconChevronUp
+        className={styles.triggerIcon}
+        height="24px"
+        width="24px"
+      />
+    </Collapsible.Trigger>
+  );
+};
+
+export const Content: React.FC<
+  React.ComponentProps<typeof Collapsible.Content>
+> = ({ className, ...props }) => {
+  return (
+    <Collapsible.Content
+      {...props}
+      className={classNames(styles.content, className)}
+    />
+  );
+};
+
+export const Root = Collapsible.Root;

frontend/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,15 @@
+// Copyright 2024 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.
+
+export * from "./Collapsible";

frontend/src/components/Collapsible/index.ts

@@ -17,15 +17,15 @@ import {
   notFound,
   useNavigate,
 } from "@tanstack/react-router";
-import IconKey from "@vector-im/compound-design-tokens/assets/web/icons/key";
-import { Alert, Separator } from "@vector-im/compound-web";
+import { Alert, Heading, Separator, Text } from "@vector-im/compound-web";
 import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "urql";
 
 import AccountManagementPasswordPreview from "../components/AccountManagementPasswordPreview";
-import BlockList from "../components/BlockList/BlockList";
+import BlockList from "../components/BlockList";
 import { ButtonLink } from "../components/ButtonLink";
+import * as Collapsible from "../components/Collapsible";
 import LoadingSpinner from "../components/LoadingSpinner";
 import UserEmail from "../components/UserEmail";
 import AddEmailForm from "../components/UserProfile/AddEmailForm";
@@ -78,23 +78,28 @@ function Index(): React.ReactElement {
             <AddEmailForm userId={user.id} onAdd={onAdd} />
           )}
         </div>
-
         <Separator />
-
         {siteConfig.passwordLoginEnabled && (
           <AccountManagementPasswordPreview siteConfig={siteConfig} />
         )}
-
         <Separator />
-
-        <ButtonLink
-          to="/reset-cross-signing"
-          kind="tertiary"
-          destructive
-          Icon={IconKey}
-        >
-          {t("frontend.reset_cross_signing.heading")}
-        </ButtonLink>
+        <Collapsible.Root>
+          <Collapsible.Trigger>
+            <Heading size="sm" weight="semibold">
+              {t("common.e2ee")}
+            </Heading>
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <BlockList>
+              <Text className="text-secondary" size="md">
+                {t("frontend.reset_cross_signing.description")}
+              </Text>
+              <ButtonLink to="/reset-cross-signing" kind="primary" destructive>
+                {t("frontend.reset_cross_signing.button")}
+              </ButtonLink>
+            </BlockList>
+          </Collapsible.Content>
+        </Collapsible.Root>
       </BlockList>
     </>
   );