From d42bcc6e3d58f4a14c3e8d60aba5905a05f58bdb Mon Sep 17 00:00:00 2001
From: Ginger <ginger@gingershaped.computer>
Date: Mon, 6 Oct 2025 12:21:01 -0400
Subject: [PATCH] Use a common CollapsibleCard element for collapsible settings
 cards

---
 src/app/components/AccountDataEditor.tsx      |  16 +-
 src/app/components/CollapsibleCard.tsx        |  54 +++
 .../developer-tools/DevelopTools.tsx          | 355 ++++++++----------
 .../common-settings/general/RoomAddress.tsx   |  91 ++---
 .../developer-tools/AccountDataList.tsx       | 118 +++---
 .../settings/developer-tools/DevelopTools.tsx |  31 +-
 .../features/settings/devices/LocalBackup.tsx |  47 +--
 7 files changed, 322 insertions(+), 390 deletions(-)
 create mode 100644 src/app/components/CollapsibleCard.tsx

diff --git a/src/app/components/AccountDataEditor.tsx b/src/app/components/AccountDataEditor.tsx
index 3be3911c..ef8d01a1 100644
--- a/src/app/components/AccountDataEditor.tsx
+++ b/src/app/components/AccountDataEditor.tsx
@@ -195,8 +195,8 @@ function AccountDataEdit({
 type AccountDataViewProps = {
   type: string;
   defaultContent: string;
-  onEdit: () => void;
   requestClose: () => void;
+  onEdit?: () => void;
   submitDelete?: AccountDataDeleteCallback;
 };
 function AccountDataView({ type, defaultContent, onEdit, requestClose, submitDelete }: AccountDataViewProps) {
@@ -231,9 +231,11 @@ function AccountDataView({ type, defaultContent, onEdit, requestClose, submitDel
             required
           />
         </Box>
-        <Button variant="Secondary" size="400" radii="300" onClick={onEdit}>
-          <Text size="B400">Edit</Text>
-        </Button>
+        {onEdit && (
+          <Button variant="Secondary" size="400" radii="300" onClick={onEdit}>
+            <Text size="B400">Edit</Text>
+          </Button>
+        )}
         {submitDelete && (
           <Button
             variant="Critical"
@@ -269,7 +271,7 @@ function AccountDataView({ type, defaultContent, onEdit, requestClose, submitDel
 export type AccountDataEditorProps = {
   type?: string;
   content?: unknown;
-  submitChange: AccountDataSubmitCallback;
+  submitChange?: AccountDataSubmitCallback;
   submitDelete?: AccountDataDeleteCallback;
   requestClose: () => void;
 };
@@ -328,7 +330,7 @@ export function AccountDataEditor({
         </Box>
       </PageHeader>
       <Box grow="Yes" direction="Column">
-        {edit ? (
+        {(edit && submitChange) ? (
           <AccountDataEdit
             type={data.type}
             defaultContent={contentJSONStr}
@@ -340,8 +342,8 @@ export function AccountDataEditor({
           <AccountDataView
             type={data.type}
             defaultContent={contentJSONStr}
-            onEdit={() => setEdit(true)}
             requestClose={requestClose}
+            onEdit={submitChange ? () => setEdit(true) : undefined}
             submitDelete={submitDelete}
           />
         )}
diff --git a/src/app/components/CollapsibleCard.tsx b/src/app/components/CollapsibleCard.tsx
new file mode 100644
index 00000000..95c02964
--- /dev/null
+++ b/src/app/components/CollapsibleCard.tsx
@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react';
+import { Button, Icon, Icons, Text } from 'folds';
+import { SequenceCard } from './sequence-card';
+import { SequenceCardStyle } from '../features/settings/styles.css';
+import { SettingTile } from './setting-tile';
+
+type CollapsibleCardProps = {
+  expand: boolean;
+  setExpand: (expand: boolean) => void;
+  title?: ReactNode;
+  description?: ReactNode;
+  before?: ReactNode;
+  children?: ReactNode;
+};
+
+export function CollapsibleCard({
+  expand,
+  setExpand,
+  title,
+  description,
+  before,
+  children,
+}: CollapsibleCardProps) {
+  return (
+    <SequenceCard
+      className={SequenceCardStyle}
+      variant="SurfaceVariant"
+      direction="Column"
+      gap="400"
+    >
+      <SettingTile
+        title={title}
+        description={description}
+        before={before}
+        after={
+          <Button
+            onClick={() => setExpand(!expand)}
+            variant="Secondary"
+            fill="Soft"
+            size="300"
+            radii="300"
+            outlined
+            before={
+              <Icon src={expand ? Icons.ChevronTop : Icons.ChevronBottom} size="100" filled />
+            }
+          >
+            <Text size="B300">{expand ? 'Collapse' : 'Expand'}</Text>
+          </Button>
+        }
+      />
+      {expand && children}
+    </SequenceCard>
+  );
+}
diff --git a/src/app/features/common-settings/developer-tools/DevelopTools.tsx b/src/app/features/common-settings/developer-tools/DevelopTools.tsx
index 29b6aa51..4125f6d2 100644
--- a/src/app/features/common-settings/developer-tools/DevelopTools.tsx
+++ b/src/app/features/common-settings/developer-tools/DevelopTools.tsx
@@ -30,6 +30,7 @@ import {
   AccountDataSubmitCallback,
 } from '../../../components/AccountDataEditor';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { CollapsibleCard } from '../../../components/CollapsibleCard';
 
 type DeveloperToolsProps = {
   requestClose: () => void;
@@ -175,216 +176,166 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
                       }
                     />
                   </SequenceCard>
-                  <SequenceCard
-                    className={SequenceCardStyle}
-                    variant="SurfaceVariant"
-                    direction="Column"
-                    gap="400"
+                  <CollapsibleCard
+                    expand={expandState}
+                    setExpand={setExpandState}
+                    title="Room State"
+                    description="State events of the room."
                   >
-                    <SettingTile
-                      title="Room State"
-                      description="State events of the room."
-                      after={
-                        <Button
-                          onClick={() => setExpandState(!expandState)}
-                          variant="Secondary"
-                          fill="Soft"
+                    <Box direction="Column" gap="100">
+                      <Box justifyContent="SpaceBetween">
+                        <Text size="L400">Events</Text>
+                        <Text size="L400">Total: {roomState.size}</Text>
+                      </Box>
+                      <CutoutCard>
+                        <MenuItem
+                          onClick={() => setComposeEvent({ stateKey: '' })}
+                          variant="Surface"
+                          fill="None"
                           size="300"
-                          radii="300"
-                          outlined
-                          before={
-                            <Icon
-                              src={expandState ? Icons.ChevronTop : Icons.ChevronBottom}
-                              size="100"
-                              filled
-                            />
-                          }
+                          radii="0"
+                          before={<Icon size="50" src={Icons.Plus} />}
                         >
-                          <Text size="B300">{expandState ? 'Collapse' : 'Expand'}</Text>
-                        </Button>
-                      }
-                    />
-                    {expandState && (
-                      <Box direction="Column" gap="100">
-                        <Box justifyContent="SpaceBetween">
-                          <Text size="L400">Events</Text>
-                          <Text size="L400">Total: {roomState.size}</Text>
-                        </Box>
-                        <CutoutCard>
-                          <MenuItem
-                            onClick={() => setComposeEvent({ stateKey: '' })}
-                            variant="Surface"
-                            fill="None"
-                            size="300"
-                            radii="0"
-                            before={<Icon size="50" src={Icons.Plus} />}
-                          >
-                            <Box grow="Yes">
-                              <Text size="T200" truncate>
-                                Add New
-                              </Text>
-                            </Box>
-                          </MenuItem>
-                          {Array.from(roomState.keys())
-                            .sort()
-                            .map((eventType) => {
-                              const expanded = eventType === expandStateType;
-                              const stateKeyToEvents = roomState.get(eventType);
-                              if (!stateKeyToEvents) return null;
+                          <Box grow="Yes">
+                            <Text size="T200" truncate>
+                              Add New
+                            </Text>
+                          </Box>
+                        </MenuItem>
+                        {Array.from(roomState.keys())
+                          .sort()
+                          .map((eventType) => {
+                            const expanded = eventType === expandStateType;
+                            const stateKeyToEvents = roomState.get(eventType);
+                            if (!stateKeyToEvents) return null;
 
-                              return (
-                                <Box id={eventType} key={eventType} direction="Column" gap="100">
-                                  <MenuItem
-                                    onClick={() =>
-                                      setExpandStateType(expanded ? undefined : eventType)
-                                    }
-                                    variant="Surface"
-                                    fill="None"
-                                    size="300"
-                                    radii="0"
-                                    before={
-                                      <Icon
-                                        size="50"
-                                        src={expanded ? Icons.ChevronBottom : Icons.ChevronRight}
-                                      />
-                                    }
-                                    after={<Text size="L400">{stateKeyToEvents.size}</Text>}
+                            return (
+                              <Box id={eventType} key={eventType} direction="Column" gap="100">
+                                <MenuItem
+                                  onClick={() =>
+                                    setExpandStateType(expanded ? undefined : eventType)
+                                  }
+                                  variant="Surface"
+                                  fill="None"
+                                  size="300"
+                                  radii="0"
+                                  before={
+                                    <Icon
+                                      size="50"
+                                      src={expanded ? Icons.ChevronBottom : Icons.ChevronRight}
+                                    />
+                                  }
+                                  after={<Text size="L400">{stateKeyToEvents.size}</Text>}
+                                >
+                                  <Box grow="Yes">
+                                    <Text size="T200" truncate>
+                                      {eventType}
+                                    </Text>
+                                  </Box>
+                                </MenuItem>
+                                {expanded && (
+                                  <div
+                                    style={{
+                                      marginLeft: config.space.S400,
+                                      borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                                    }}
                                   >
-                                    <Box grow="Yes">
-                                      <Text size="T200" truncate>
-                                        {eventType}
-                                      </Text>
-                                    </Box>
-                                  </MenuItem>
-                                  {expanded && (
-                                    <div
-                                      style={{
-                                        marginLeft: config.space.S400,
-                                        borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-                                      }}
+                                    <MenuItem
+                                      onClick={() =>
+                                        setComposeEvent({ type: eventType, stateKey: '' })
+                                      }
+                                      variant="Surface"
+                                      fill="None"
+                                      size="300"
+                                      radii="0"
+                                      before={<Icon size="50" src={Icons.Plus} />}
                                     >
-                                      <MenuItem
-                                        onClick={() =>
-                                          setComposeEvent({ type: eventType, stateKey: '' })
-                                        }
-                                        variant="Surface"
-                                        fill="None"
-                                        size="300"
-                                        radii="0"
-                                        before={<Icon size="50" src={Icons.Plus} />}
-                                      >
-                                        <Box grow="Yes">
-                                          <Text size="T200" truncate>
-                                            Add New
-                                          </Text>
-                                        </Box>
-                                      </MenuItem>
-                                      {Array.from(stateKeyToEvents.keys())
-                                        .sort()
-                                        .map((stateKey) => (
-                                          <MenuItem
-                                            onClick={() => {
-                                              setOpenStateEvent({
-                                                type: eventType,
-                                                stateKey,
-                                              });
-                                            }}
-                                            key={stateKey}
-                                            variant="Surface"
-                                            fill="None"
-                                            size="300"
-                                            radii="0"
-                                            after={<Icon size="50" src={Icons.ChevronRight} />}
-                                          >
-                                            <Box grow="Yes">
-                                              <Text size="T200" truncate>
-                                                {stateKey ? `"${stateKey}"` : 'Default'}
-                                              </Text>
-                                            </Box>
-                                          </MenuItem>
-                                        ))}
-                                    </div>
-                                  )}
-                                </Box>
-                              );
-                            })}
-                        </CutoutCard>
-                      </Box>
-                    )}
-                  </SequenceCard>
-                  <SequenceCard
-                    className={SequenceCardStyle}
-                    variant="SurfaceVariant"
-                    direction="Column"
-                    gap="400"
+                                      <Box grow="Yes">
+                                        <Text size="T200" truncate>
+                                          Add New
+                                        </Text>
+                                      </Box>
+                                    </MenuItem>
+                                    {Array.from(stateKeyToEvents.keys())
+                                      .sort()
+                                      .map((stateKey) => (
+                                        <MenuItem
+                                          onClick={() => {
+                                            setOpenStateEvent({
+                                              type: eventType,
+                                              stateKey,
+                                            });
+                                          }}
+                                          key={stateKey}
+                                          variant="Surface"
+                                          fill="None"
+                                          size="300"
+                                          radii="0"
+                                          after={<Icon size="50" src={Icons.ChevronRight} />}
+                                        >
+                                          <Box grow="Yes">
+                                            <Text size="T200" truncate>
+                                              {stateKey ? `"${stateKey}"` : 'Default'}
+                                            </Text>
+                                          </Box>
+                                        </MenuItem>
+                                      ))}
+                                  </div>
+                                )}
+                              </Box>
+                            );
+                          })}
+                      </CutoutCard>
+                    </Box>
+                  </CollapsibleCard>
+                  <CollapsibleCard
+                    expand={expandAccountData}
+                    setExpand={setExpandAccountData}
+                    title="Account Data"
+                    description="Private personalization data stored within room"
                   >
-                    <SettingTile
-                      title="Account Data"
-                      description="Private personalization data stored within room."
-                      after={
-                        <Button
-                          onClick={() => setExpandAccountData(!expandAccountData)}
-                          variant="Secondary"
-                          fill="Soft"
-                          size="300"
-                          radii="300"
-                          outlined
-                          before={
-                            <Icon
-                              src={expandAccountData ? Icons.ChevronTop : Icons.ChevronBottom}
-                              size="100"
-                              filled
-                            />
-                          }
-                        >
-                          <Text size="B300">{expandAccountData ? 'Collapse' : 'Expand'}</Text>
-                        </Button>
-                      }
-                    />
-                    {expandAccountData && (
-                      <Box direction="Column" gap="100">
-                        <Box justifyContent="SpaceBetween">
-                          <Text size="L400">Events</Text>
-                          <Text size="L400">Total: {accountData.size}</Text>
-                        </Box>
-                        <CutoutCard>
-                          <MenuItem
-                            variant="Surface"
-                            fill="None"
-                            size="300"
-                            radii="0"
-                            before={<Icon size="50" src={Icons.Plus} />}
-                            onClick={() => setAccountDataType(null)}
-                          >
-                            <Box grow="Yes">
-                              <Text size="T200" truncate>
-                                Add New
-                              </Text>
-                            </Box>
-                          </MenuItem>
-                          {Array.from(accountData.keys())
-                            .sort()
-                            .map((type) => (
-                              <MenuItem
-                                key={type}
-                                variant="Surface"
-                                fill="None"
-                                size="300"
-                                radii="0"
-                                after={<Icon size="50" src={Icons.ChevronRight} />}
-                                onClick={() => setAccountDataType(type)}
-                              >
-                                <Box grow="Yes">
-                                  <Text size="T200" truncate>
-                                    {type}
-                                  </Text>
-                                </Box>
-                              </MenuItem>
-                            ))}
-                        </CutoutCard>
+                    <Box direction="Column" gap="100">
+                      <Box justifyContent="SpaceBetween">
+                        <Text size="L400">Events</Text>
+                        <Text size="L400">Total: {accountData.size}</Text>
                       </Box>
-                    )}
-                  </SequenceCard>
+                      <CutoutCard>
+                        <MenuItem
+                          variant="Surface"
+                          fill="None"
+                          size="300"
+                          radii="0"
+                          before={<Icon size="50" src={Icons.Plus} />}
+                          onClick={() => setAccountDataType(null)}
+                        >
+                          <Box grow="Yes">
+                            <Text size="T200" truncate>
+                              Add New
+                            </Text>
+                          </Box>
+                        </MenuItem>
+                        {Array.from(accountData.keys())
+                          .sort()
+                          .map((type) => (
+                            <MenuItem
+                              key={type}
+                              variant="Surface"
+                              fill="None"
+                              size="300"
+                              radii="0"
+                              after={<Icon size="50" src={Icons.ChevronRight} />}
+                              onClick={() => setAccountDataType(type)}
+                            >
+                              <Box grow="Yes">
+                                <Text size="T200" truncate>
+                                  {type}
+                                </Text>
+                              </Box>
+                            </MenuItem>
+                          ))}
+                      </CutoutCard>
+                    </Box>
+                  </CollapsibleCard>
                 </Box>
               )}
             </Box>
diff --git a/src/app/features/common-settings/general/RoomAddress.tsx b/src/app/features/common-settings/general/RoomAddress.tsx
index 767a967e..1a618a68 100644
--- a/src/app/features/common-settings/general/RoomAddress.tsx
+++ b/src/app/features/common-settings/general/RoomAddress.tsx
@@ -7,8 +7,6 @@ import {
   Chip,
   color,
   config,
-  Icon,
-  Icons,
   Input,
   Spinner,
   Text,
@@ -33,6 +31,7 @@ import { useAlive } from '../../../hooks/useAlive';
 import { StateEvent } from '../../../../types/matrix/room';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 import { getMxIdServer } from '../../../utils/matrix';
+import { CollapsibleCard } from '../../../components/CollapsibleCard';
 
 type RoomPublishedAddressesProps = {
   permissions: RoomPermissionsAPI;
@@ -373,64 +372,40 @@ export function RoomLocalAddresses({ permissions }: { permissions: RoomPermissio
   const { localAliasesState, addLocalAlias, removeLocalAlias } = useLocalAliases(room.roomId);
 
   return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
+    <CollapsibleCard
+      expand={expand}
+      setExpand={setExpand}
+      title="Local Addresses"
+      description="Set local address so users can join through your homeserver."
     >
-      <SettingTile
-        title="Local Addresses"
-        description="Set local address so users can join through your homeserver."
-        after={
-          <Button
-            type="button"
-            onClick={() => setExpand(!expand)}
-            size="300"
-            variant="Secondary"
-            fill="Soft"
-            outlined
-            radii="300"
-            before={
-              <Icon size="100" src={expand ? Icons.ChevronTop : Icons.ChevronBottom} filled />
-            }
-          >
-            <Text as="span" size="B300" truncate>
-              {expand ? 'Collapse' : 'Expand'}
+      <CutoutCard variant="Surface" style={{ padding: config.space.S300 }}>
+        {localAliasesState.status === AsyncStatus.Loading && (
+          <Box gap="100">
+            <Spinner variant="Secondary" size="100" />
+            <Text size="T200">Loading...</Text>
+          </Box>
+        )}
+        {localAliasesState.status === AsyncStatus.Success &&
+          (localAliasesState.data.length === 0 ? (
+            <Box direction="Column" gap="100">
+              <Text size="L400">No Addresses</Text>
+            </Box>
+          ) : (
+            <LocalAddressesList
+              localAliases={localAliasesState.data}
+              removeLocalAlias={removeLocalAlias}
+              canEditCanonical={canEditCanonical}
+            />
+          ))}
+        {localAliasesState.status === AsyncStatus.Error && (
+          <Box gap="100">
+            <Text size="T200" style={{ color: color.Critical.Main }}>
+              {localAliasesState.error.message}
             </Text>
-          </Button>
-        }
-      />
-      {expand && (
-        <CutoutCard variant="Surface" style={{ padding: config.space.S300 }}>
-          {localAliasesState.status === AsyncStatus.Loading && (
-            <Box gap="100">
-              <Spinner variant="Secondary" size="100" />
-              <Text size="T200">Loading...</Text>
-            </Box>
-          )}
-          {localAliasesState.status === AsyncStatus.Success &&
-            (localAliasesState.data.length === 0 ? (
-              <Box direction="Column" gap="100">
-                <Text size="L400">No Addresses</Text>
-              </Box>
-            ) : (
-              <LocalAddressesList
-                localAliases={localAliasesState.data}
-                removeLocalAlias={removeLocalAlias}
-                canEditCanonical={canEditCanonical}
-              />
-            ))}
-          {localAliasesState.status === AsyncStatus.Error && (
-            <Box gap="100">
-              <Text size="T200" style={{ color: color.Critical.Main }}>
-                {localAliasesState.error.message}
-              </Text>
-            </Box>
-          )}
-        </CutoutCard>
-      )}
+          </Box>
+        )}
+      </CutoutCard>
       {expand && <LocalAddressInput addLocalAlias={addLocalAlias} />}
-    </SequenceCard>
+    </CollapsibleCard>
   );
 }
diff --git a/src/app/features/settings/developer-tools/AccountDataList.tsx b/src/app/features/settings/developer-tools/AccountDataList.tsx
index 71b1cf76..9c9cbe6a 100644
--- a/src/app/features/settings/developer-tools/AccountDataList.tsx
+++ b/src/app/features/settings/developer-tools/AccountDataList.tsx
@@ -1,86 +1,54 @@
 import React from 'react';
-import { Box, Text, Icon, Icons, Button, MenuItem } from 'folds';
-import { SequenceCard } from '../../../components/sequence-card';
-import { SequenceCardStyle } from '../styles.css';
-import { SettingTile } from '../../../components/setting-tile';
+import { Box, Text, Icon, Icons, MenuItem } from 'folds';
 import { CutoutCard } from '../../../components/cutout-card';
 
 type AccountDataListProps = {
-  title?: string;
-  description?: string;
-  expand: boolean;
-  setExpand: (expand: boolean) => void;
   types: string[];
   onSelect: (type: string | null) => void;
 };
-export function AccountDataList({ types, onSelect, expand, setExpand, title, description }: AccountDataListProps) {
+export function AccountDataList({
+  types,
+  onSelect,
+}: AccountDataListProps) {
   return (
-    <SequenceCard
-      className={SequenceCardStyle}
-      variant="SurfaceVariant"
-      direction="Column"
-      gap="400"
-    >
-      <SettingTile
-        title={title}
-        description={description}
-        after={
-          <Button
-            onClick={() => setExpand(!expand)}
-            variant="Secondary"
-            fill="Soft"
-            size="300"
-            radii="300"
-            outlined
-            before={
-              <Icon src={expand ? Icons.ChevronTop : Icons.ChevronBottom} size="100" filled />
-            }
-          >
-            <Text size="B300">{expand ? 'Collapse' : 'Expand'}</Text>
-          </Button>
-        }
-      />
-      {expand && (
-        <Box direction="Column" gap="100">
-          <Box justifyContent="SpaceBetween">
-            <Text size="L400">Fields</Text>
-            <Text size="L400">Total: {types.length}</Text>
+    <Box direction="Column" gap="100">
+      <Box justifyContent="SpaceBetween">
+        <Text size="L400">Fields</Text>
+        <Text size="L400">Total: {types.length}</Text>
+      </Box>
+      <CutoutCard>
+        <MenuItem
+          variant="Surface"
+          fill="None"
+          size="300"
+          radii="0"
+          before={<Icon size="50" src={Icons.Plus} />}
+          onClick={() => onSelect(null)}
+        >
+          <Box grow="Yes">
+            <Text size="T200" truncate>
+              Add New
+            </Text>
           </Box>
-          <CutoutCard>
-            <MenuItem
-              variant="Surface"
-              fill="None"
-              size="300"
-              radii="0"
-              before={<Icon size="50" src={Icons.Plus} />}
-              onClick={() => onSelect(null)}
-            >
-              <Box grow="Yes">
-                <Text size="T200" truncate>
-                  Add New
-                </Text>
-              </Box>
-            </MenuItem>
-            {types.sort().map((type) => (
-              <MenuItem
-                key={type}
-                variant="Surface"
-                fill="None"
-                size="300"
-                radii="0"
-                after={<Icon size="50" src={Icons.ChevronRight} />}
-                onClick={() => onSelect(type)}
-              >
-                <Box grow="Yes">
-                  <Text size="T200" truncate>
-                    {type}
-                  </Text>
-                </Box>
-              </MenuItem>
-            ))}
-          </CutoutCard>
-        </Box>
-      )}
-    </SequenceCard>
+        </MenuItem>
+        {types.sort().map((type) => (
+          <MenuItem
+            key={type}
+            variant="Surface"
+            fill="None"
+            size="300"
+            radii="0"
+            after={<Icon size="50" src={Icons.ChevronRight} />}
+            onClick={() => onSelect(type)}
+          >
+            <Box grow="Yes">
+              <Text size="T200" truncate>
+                {type}
+              </Text>
+            </Box>
+          </MenuItem>
+        ))}
+      </CutoutCard>
+    </Box>
   );
 }
diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx
index 5ee86820..4ac58f46 100644
--- a/src/app/features/settings/developer-tools/DevelopTools.tsx
+++ b/src/app/features/settings/developer-tools/DevelopTools.tsx
@@ -17,6 +17,7 @@ import { copyToClipboard } from '../../../utils/dom';
 import { AccountDataList } from './AccountDataList';
 import { useExtendedProfile } from '../../../hooks/useExtendedProfile';
 import { useAccountDataCallback } from '../../../hooks/useAccountDataCallback';
+import { CollapsibleCard } from '../../../components/CollapsibleCard';
 
 type DeveloperToolsPage =
   | { name: 'index' }
@@ -165,23 +166,29 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
                   {developerTools && (
                     <Box direction="Column" gap="100">
                       <Text size="L400">Account Data</Text>
-                      <AccountDataList
-                        title="Account"
-                        description="Private data stored in your account."
+                      <CollapsibleCard
                         expand={globalExpand}
                         setExpand={setGlobalExpand}
-                        types={accountDataTypes}
-                        onSelect={(type) => setPage({ name: 'account-data', type })}
-                      />
-                      {extendedProfile && (
+                        title="Account"
+                        description="Private data stored in your account."
+                      >
                         <AccountDataList
-                          title="Profile"
-                          description="Public data attached to your Matrix profile."
+                          types={accountDataTypes}
+                          onSelect={(type) => setPage({ name: 'account-data', type })}
+                        />
+                      </CollapsibleCard>
+                      {extendedProfile && (
+                        <CollapsibleCard
                           expand={profileExpand}
                           setExpand={setProfileExpand}
-                          types={Object.keys(extendedProfile)}
-                          onSelect={(type) => setPage({ name: 'profile-field', type })}
-                        />
+                          title="Profile"
+                          description="Public data attached to your Matrix profile."
+                        >
+                          <AccountDataList
+                            types={Object.keys(extendedProfile)}
+                            onSelect={(type) => setPage({ name: 'profile-field', type })}
+                          />
+                        </CollapsibleCard>
                       )}
                     </Box>
                   )}
diff --git a/src/app/features/settings/devices/LocalBackup.tsx b/src/app/features/settings/devices/LocalBackup.tsx
index 00128c8f..35baa9cb 100644
--- a/src/app/features/settings/devices/LocalBackup.tsx
+++ b/src/app/features/settings/devices/LocalBackup.tsx
@@ -11,6 +11,7 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { decryptMegolmKeyFile, encryptMegolmKeyFile } from '../../../../util/cryptE2ERoomKeys';
 import { useAlive } from '../../../hooks/useAlive';
 import { useFilePicker } from '../../../hooks/useFilePicker';
+import { CollapsibleCard } from '../../../components/CollapsibleCard';
 
 function ExportKeys() {
   const mx = useMatrixClient();
@@ -121,37 +122,18 @@ function ExportKeys() {
   );
 }
 
-function ExportKeysTile() {
+function ExportKeysCard() {
   const [expand, setExpand] = useState(false);
 
   return (
-    <>
-      <SettingTile
-        title="Export Messages Data"
-        description="Save password protected copy of encryption data on your device to decrypt messages later."
-        after={
-          <Box>
-            <Button
-              type="button"
-              onClick={() => setExpand(!expand)}
-              size="300"
-              variant="Secondary"
-              fill="Soft"
-              outlined
-              radii="300"
-              before={
-                <Icon size="100" src={expand ? Icons.ChevronTop : Icons.ChevronBottom} filled />
-              }
-            >
-              <Text as="span" size="B300" truncate>
-                {expand ? 'Collapse' : 'Expand'}
-              </Text>
-            </Button>
-          </Box>
-        }
-      />
-      {expand && <ExportKeys />}
-    </>
+    <CollapsibleCard
+      expand={expand}
+      setExpand={setExpand}
+      title="Export Messages Data"
+      description="Save password protected copy of encryption data on your device to decrypt messages later."
+    >
+      <ExportKeys />
+    </CollapsibleCard>
   );
 }
 
@@ -304,14 +286,7 @@ export function LocalBackup() {
   return (
     <Box direction="Column" gap="100">
       <Text size="L400">Local Backup</Text>
-      <SequenceCard
-        className={SequenceCardStyle}
-        variant="SurfaceVariant"
-        direction="Column"
-        gap="400"
-      >
-        <ExportKeysTile />
-      </SequenceCard>
+      <ExportKeysCard />
       <SequenceCard
         className={SequenceCardStyle}
         variant="SurfaceVariant"