open account data in same window instead of popup

src/app/components/text-viewer/TextViewer.css.ts

@@ -31,8 +31,11 @@ export const TextViewerContent = style([
 export const TextViewerPre = style([
   DefaultReset,
   {
-    padding: config.space.S600,
     whiteSpace: 'pre-wrap',
     wordBreak: 'break-word',
   },
 ]);
+
+export const TextViewerPrePadding = style({
+  padding: config.space.S600,
+});

src/app/components/text-viewer/TextViewer.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React, { Suspense, lazy } from 'react';
+import React, { ComponentProps, HTMLAttributes, Suspense, forwardRef, lazy } from 'react';
 import classNames from 'classnames';
 import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
 import { ErrorBoundary } from 'react-error-boundary';
@@ -8,6 +8,29 @@ import { copyToClipboard } from '../../utils/dom';
 
 const ReactPrism = lazy(() => import('../../plugins/react-prism/ReactPrism'));
 
+type TextViewerContentProps = {
+  text: string;
+  langName: string;
+  size?: ComponentProps<typeof Text>['size'];
+} & HTMLAttributes<HTMLPreElement>;
+export const TextViewerContent = forwardRef<HTMLPreElement, TextViewerContentProps>(
+  ({ text, langName, size, className, ...props }, ref) => (
+    <Text
+      as="pre"
+      size={size}
+      className={classNames(css.TextViewerPre, `language-${langName}`, className)}
+      {...props}
+      ref={ref}
+    >
+      <ErrorBoundary fallback={<code>{text}</code>}>
+        <Suspense fallback={<code>{text}</code>}>
+          <ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
+        </Suspense>
+      </ErrorBoundary>
+    </Text>
+  )
+);
+
 export type TextViewerProps = {
   name: string;
   text: string;
@@ -43,20 +66,19 @@ export const TextViewer = as<'div', TextViewerProps>(
             </Chip>
           </Box>
         </Header>
+
         <Box
           grow="Yes"
           className={css.TextViewerContent}
           justifyContent="Center"
           alignItems="Center"
         >
           <Scroll hideTrack variant="Background" visibility="Hover">
-            <Text as="pre" className={classNames(css.TextViewerPre, `language-${langName}`)}>
-              <ErrorBoundary fallback={<code>{text}</code>}>
-                <Suspense fallback={<code>{text}</code>}>
-                  <ReactPrism>{(codeRef) => <code ref={codeRef}>{text}</code>}</ReactPrism>
-                </Suspense>
-              </ErrorBoundary>
-            </Text>
+            <TextViewerContent
+              className={css.TextViewerPrePadding}
+              text={text}
+              langName={langName}
+            />
           </Scroll>
         </Box>
       </Box>

src/app/features/settings/developer-tools/AccountData.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useState } from 'react';
+import { Box, Text, Icon, Icons, Chip, Button } from 'folds';
+import { SequenceCard } from '../../../components/sequence-card';
+import { SequenceCardStyle } from '../styles.css';
+import { SettingTile } from '../../../components/setting-tile';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useAccountDataCallback } from '../../../hooks/useAccountDataCallback';
+
+type AccountDataProps = {
+  expand: boolean;
+  onExpandToggle: (expand: boolean) => void;
+  onSelect: (type: string | null) => void;
+};
+export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataProps) {
+  const mx = useMatrixClient();
+  const [accountData, setAccountData] = useState(() => Array.from(mx.store.accountData.values()));
+
+  useAccountDataCallback(
+    mx,
+    useCallback(
+      () => setAccountData(Array.from(mx.store.accountData.values())),
+      [mx, setAccountData]
+    )
+  );
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Account Data</Text>
+      <SequenceCard
+        className={SequenceCardStyle}
+        variant="SurfaceVariant"
+        direction="Column"
+        gap="400"
+      >
+        <SettingTile
+          title="Global"
+          description="Data stored in your global account data."
+          after={
+            <Button
+              onClick={() => onExpandToggle(!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 && (
+          <SettingTile>
+            <Box direction="Column" gap="200">
+              <Text size="L400">Types</Text>
+              <Box gap="200" wrap="Wrap">
+                <Chip
+                  variant="Secondary"
+                  fill="Soft"
+                  radii="Pill"
+                  before={<Icon size="50" src={Icons.Plus} />}
+                  onClick={() => onSelect(null)}
+                >
+                  <Text size="T200" truncate>
+                    Add New
+                  </Text>
+                </Chip>
+                {accountData.map((mEvent) => (
+                  <Chip
+                    key={mEvent.getType()}
+                    variant="Secondary"
+                    fill="Soft"
+                    radii="Pill"
+                    onClick={() => onSelect(mEvent.getType())}
+                  >
+                    <Text size="T200" truncate>
+                      {mEvent.getType()}
+                    </Text>
+                  </Chip>
+                ))}
+              </Box>
+            </Box>
+          </SettingTile>
+        )}
+      </SequenceCard>
+    </Box>
+  );
+}