Merge 'upstream/dev'

.github/workflows/build-pull-request.yml

@@ -12,7 +12,7 @@ jobs:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.6
+        uses: actions/checkout@v4.1.5
       - name: Setup node
         uses: actions/setup-node@v4.0.2
         with:

.github/workflows/docker-pr.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.6
+        uses: actions/checkout@v4.1.5
       - name: Build Docker image
         uses: docker/build-push-action@v5.3.0
         with:

.github/workflows/lockfile.yml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.1.6
+        uses: actions/checkout@v4.1.5
       - name: NPM Lockfile Changes
         uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
         with:

.github/workflows/netlify-dev.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.6
+        uses: actions/checkout@v4.1.5
       - name: Setup node
         uses: actions/setup-node@v4.0.2
         with:

.github/workflows/prod-deploy.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.6
+        uses: actions/checkout@v4.1.5
       - name: Setup node
         uses: actions/setup-node@v4.0.2
         with:
@@ -66,18 +66,18 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.1.6
+        uses: actions/checkout@v4.1.5
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3.0.0
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3.3.0
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.2.0
+        uses: docker/login-action@v3.1.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Login to the Container registry
-        uses: docker/login-action@v3.2.0
+        uses: docker/login-action@v3.1.0
         with:
           registry: ghcr.io
           username: ${{ github.actor }}

.gitignore

@@ -4,4 +4,3 @@ node_modules
 devAssets
 
 .DS_Store
-.idea

Dockerfile

@@ -11,7 +11,7 @@ RUN npm run build
 
 
 ## App
-FROM nginx:1.27.0-alpine
+FROM nginx:1.26.0-alpine
 
 COPY --from=builder /src/dist /app
 

config.json

@@ -10,26 +10,6 @@
   ],
   "allowCustomHomeservers": true,
 
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [
-      "#cinny-space:matrix.org",
-      "#community:matrix.org",
-      "#space:envs.net",
-      "#science-space:matrix.org",
-      "#libregaming-games:tchncs.de",
-      "#mathematics-on:matrix.org"
-    ],
-    "rooms": [
-      "#cinny:matrix.org",
-      "#foundation-office:matrix.org",
-      "#thisweekinmatrix:matrix.org",
-      "#matrix-dev:matrix.org",
-      "#matrix:matrix.org"
-    ],
-    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
-  },
-
   "hashRouter": {
     "enabled": false,
     "basename": "/"

netlify.toml

@@ -9,10 +9,9 @@
   status = 200
   
 [[redirects]]
-  from = "*/olm.wasm"
+  from = "/olm.wasm"
   to = "/olm.wasm"
   status = 200
-  force = true
   
 [[redirects]]
   from = "/pdf.worker.min.js"
@@ -32,5 +31,4 @@
 [[redirects]]
   from = "/*"
   to = "/index.html"
-  status = 200
-  force = true
+  status = 200

package.json

@@ -20,15 +20,10 @@
   "author": "Ajay Bura",
   "license": "AGPL-3.0-only",
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
     "@khanacademy/simple-markdown": "0.8.6",
     "@matrix-org/olm": "3.2.14",
-    "@tanstack/react-query": "5.24.1",
-    "@tanstack/react-query-devtools": "5.24.1",
-    "@tanstack/react-virtual": "3.2.0",
+    "@tanstack/react-virtual": "3.0.0-beta.54",
     "@tippyjs/react": "4.2.6",
     "@vanilla-extract/css": "1.9.3",
     "@vanilla-extract/recipes": "0.3.0",
@@ -45,7 +40,7 @@
     "file-saver": "2.0.5",
     "flux": "4.0.3",
     "focus-trap-react": "10.0.2",
-    "folds": "2.0.0",
+    "folds": "1.5.1",
     "formik": "2.2.9",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
@@ -78,7 +73,6 @@
     "slate-history": "0.93.0",
     "slate-react": "0.98.4",
     "tippy.js": "6.3.7",
-    "twemoji": "14.0.2",
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {

src/app/atoms/divider/Divider.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './Divider.scss';
-
-import Text from '../text/Text';
-
-function Divider({ text, variant, align }) {
-  const dividerClass = ` divider--${variant} divider--${align}`;
-  return (
-    <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
-    </div>
-  );
-}
-
-Divider.defaultProps = {
-  text: null,
-  variant: 'surface',
-  align: 'center',
-};
-
-Divider.propTypes = {
-  text: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-};
-
-export default Divider;

src/app/atoms/math/Math.jsx

@@ -1,33 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './Math.scss';
-
-import katex from 'katex';
-import 'katex/dist/katex.min.css';
-
-import 'katex/dist/contrib/copy-tex';
-
-const Math = React.memo(({
-  content, throwOnError, errorColor, displayMode,
-}) => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
-  }, [content, throwOnError, errorColor, displayMode]);
-
-  return <span ref={ref} />;
-});
-Math.defaultProps = {
-  throwOnError: null,
-  errorColor: null,
-  displayMode: null,
-};
-Math.propTypes = {
-  content: PropTypes.string.isRequired,
-  throwOnError: PropTypes.bool,
-  errorColor: PropTypes.string,
-  displayMode: PropTypes.bool,
-};
-
-export default Math;

src/app/components/CapabilitiesAndMediaConfigLoader.tsx

@@ -1,36 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { Capabilities } from 'matrix-js-sdk';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { MediaConfig } from '../hooks/useMediaConfig';
-import { promiseFulfilledResult } from '../utils/common';
-
-type CapabilitiesAndMediaConfigLoaderProps = {
-  children: (capabilities?: Capabilities, mediaConfig?: MediaConfig) => ReactNode;
-};
-export function CapabilitiesAndMediaConfigLoader({
-  children,
-}: CapabilitiesAndMediaConfigLoaderProps) {
-  const mx = useMatrixClient();
-
-  const [state, load] = useAsyncCallback<
-    [Capabilities | undefined, MediaConfig | undefined],
-    unknown,
-    []
-  >(
-    useCallback(async () => {
-      const result = await Promise.allSettled([mx.getCapabilities(true), mx.getMediaConfig()]);
-      const capabilities = promiseFulfilledResult(result[0]);
-      const mediaConfig = promiseFulfilledResult(result[1]);
-      return [capabilities, mediaConfig];
-    }, [mx])
-  );
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  const [capabilities, mediaConfig] =
-    state.status === AsyncStatus.Success ? state.data : [undefined, undefined];
-  return children(capabilities, mediaConfig);
-}

src/app/components/CapabilitiesLoader.tsx

@@ -1,19 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { Capabilities } from 'matrix-js-sdk';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-
-type CapabilitiesLoaderProps = {
-  children: (capabilities: Capabilities | undefined) => ReactNode;
-};
-export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
-  const mx = useMatrixClient();
-
-  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(true), [mx]));
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  return children(state.status === AsyncStatus.Success ? state.data : undefined);
-}

src/app/components/MediaConfigLoader.tsx

@@ -1,19 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { MediaConfig } from '../hooks/useMediaConfig';
-
-type MediaConfigLoaderProps = {
-  children: (mediaConfig: MediaConfig | undefined) => ReactNode;
-};
-export function MediaConfigLoader({ children }: MediaConfigLoaderProps) {
-  const mx = useMatrixClient();
-
-  const [state, load] = useAsyncCallback(useCallback(() => mx.getMediaConfig(), [mx]));
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  return children(state.status === AsyncStatus.Success ? state.data : undefined);
-}

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
+import React, { FormEventHandler, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
 import {
   Box,
@@ -13,7 +13,6 @@ import {
   Input,
   Menu,
   PopOut,
-  RectCords,
   Scroll,
   Spinner,
   Text,
@@ -49,7 +48,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
     const isError =
       pdfJSState.status === AsyncStatus.Error || docState.status === AsyncStatus.Error;
     const [pageNo, setPageNo] = useState(1);
-    const [jumpAnchor, setJumpAnchor] = useState<RectCords>();
+    const [openJump, setOpenJump] = useState(false);
 
     useEffect(() => {
       loadPdfJS();
@@ -87,7 +86,7 @@ export const PdfViewer = as<'div', PdfViewerProps>(
       if (!jumpInput) return;
       const jumpTo = parseInt(jumpInput.value, 10);
       setPageNo(Math.max(1, Math.min(docState.data.numPages, jumpTo)));
-      setJumpAnchor(undefined);
+      setOpenJump(false);
     };
 
     const handlePrevPage = () => {
@@ -99,10 +98,6 @@ export const PdfViewer = as<'div', PdfViewerProps>(
       setPageNo((n) => Math.min(n + 1, docState.data.numPages));
     };
 
-    const handleOpenJump: MouseEventHandler<HTMLButtonElement> = (evt) => {
-      setJumpAnchor(evt.currentTarget.getBoundingClientRect());
-    };
-
     return (
       <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
         <Header className={css.PdfViewerHeader} size="400">
@@ -192,14 +187,14 @@ export const PdfViewer = as<'div', PdfViewerProps>(
             </Chip>
             <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
               <PopOut
-                anchor={jumpAnchor}
+                open={openJump}
                 align="Center"
                 position="Top"
                 content={
                   <FocusTrap
                     focusTrapOptions={{
                       initialFocus: false,
-                      onDeactivate: () => setJumpAnchor(undefined),
+                      onDeactivate: () => setOpenJump(false),
                       clickOutsideDeactivates: true,
                     }}
                   >
@@ -232,14 +227,17 @@ export const PdfViewer = as<'div', PdfViewerProps>(
                   </FocusTrap>
                 }
               >
-                <Chip
-                  onClick={handleOpenJump}
-                  variant="SurfaceVariant"
-                  radii="300"
-                  aria-pressed={jumpAnchor !== undefined}
-                >
-                  <Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
-                </Chip>
+                {(anchorRef) => (
+                  <Chip
+                    onClick={() => setOpenJump(!openJump)}
+                    ref={anchorRef}
+                    variant="SurfaceVariant"
+                    radii="300"
+                    aria-pressed={openJump}
+                  >
+                    <Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
+                  </Chip>
+                )}
               </PopOut>
             </Box>
             <Chip

src/app/components/RenderMessageContent.tsx

@@ -1,245 +0,0 @@
-import React from 'react';
-import { MsgType } from 'matrix-js-sdk';
-import { HTMLReactParserOptions } from 'html-react-parser';
-import {
-  AudioContent,
-  DownloadFile,
-  FileContent,
-  ImageContent,
-  MAudio,
-  MBadEncrypted,
-  MEmote,
-  MFile,
-  MImage,
-  MLocation,
-  MNotice,
-  MText,
-  MVideo,
-  ReadPdfFile,
-  ReadTextFile,
-  RenderBody,
-  ThumbnailContent,
-  UnsupportedContent,
-  VideoContent,
-} from './message';
-import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
-import { Image, MediaControl, Video } from './media';
-import { ImageViewer } from './image-viewer';
-import { PdfViewer } from './Pdf-viewer';
-import { TextViewer } from './text-viewer';
-
-type RenderMessageContentProps = {
-  displayName: string;
-  msgType: string;
-  ts: number;
-  edited?: boolean;
-  getContent: <T>() => T;
-  mediaAutoLoad?: boolean;
-  urlPreview?: boolean;
-  highlightRegex?: RegExp;
-  htmlReactParserOptions: HTMLReactParserOptions;
-  outlineAttachment?: boolean;
-};
-export function RenderMessageContent({
-  displayName,
-  msgType,
-  ts,
-  edited,
-  getContent,
-  mediaAutoLoad,
-  urlPreview,
-  highlightRegex,
-  htmlReactParserOptions,
-  outlineAttachment,
-}: RenderMessageContentProps) {
-  const renderFile = () => (
-    <MFile
-      content={getContent()}
-      renderFileContent={({ body, mimeType, info, encInfo, url }) => (
-        <FileContent
-          body={body}
-          mimeType={mimeType}
-          renderAsPdfFile={() => (
-            <ReadPdfFile
-              body={body}
-              mimeType={mimeType}
-              url={url}
-              encInfo={encInfo}
-              renderViewer={(p) => <PdfViewer {...p} />}
-            />
-          )}
-          renderAsTextFile={() => (
-            <ReadTextFile
-              body={body}
-              mimeType={mimeType}
-              url={url}
-              encInfo={encInfo}
-              renderViewer={(p) => <TextViewer {...p} />}
-            />
-          )}
-        >
-          <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
-        </FileContent>
-      )}
-      outlined={outlineAttachment}
-    />
-  );
-
-  if (msgType === MsgType.Text) {
-    return (
-      <MText
-        edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-          />
-        )}
-        renderUrlsPreview={
-          urlPreview
-            ? (urls) => (
-                <UrlPreviewHolder>
-                  {urls.map((url) => (
-                    <UrlPreviewCard key={url} url={url} ts={ts} />
-                  ))}
-                </UrlPreviewHolder>
-              )
-            : undefined
-        }
-      />
-    );
-  }
-
-  if (msgType === MsgType.Emote) {
-    return (
-      <MEmote
-        displayName={displayName}
-        edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-          />
-        )}
-        renderUrlsPreview={
-          urlPreview
-            ? (urls) => (
-                <UrlPreviewHolder>
-                  {urls.map((url) => (
-                    <UrlPreviewCard key={url} url={url} ts={ts} />
-                  ))}
-                </UrlPreviewHolder>
-              )
-            : undefined
-        }
-      />
-    );
-  }
-
-  if (msgType === MsgType.Notice) {
-    return (
-      <MNotice
-        edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-          />
-        )}
-        renderUrlsPreview={
-          urlPreview
-            ? (urls) => (
-                <UrlPreviewHolder>
-                  {urls.map((url) => (
-                    <UrlPreviewCard key={url} url={url} ts={ts} />
-                  ))}
-                </UrlPreviewHolder>
-              )
-            : undefined
-        }
-      />
-    );
-  }
-
-  if (msgType === MsgType.Image) {
-    return (
-      <MImage
-        content={getContent()}
-        renderImageContent={(props) => (
-          <ImageContent
-            {...props}
-            autoPlay={mediaAutoLoad}
-            renderImage={(p) => <Image {...p} loading="lazy" />}
-            renderViewer={(p) => <ImageViewer {...p} />}
-          />
-        )}
-        outlined={outlineAttachment}
-      />
-    );
-  }
-
-  if (msgType === MsgType.Video) {
-    return (
-      <MVideo
-        content={getContent()}
-        renderAsFile={renderFile}
-        renderVideoContent={({ body, info, mimeType, url, encInfo }) => (
-          <VideoContent
-            body={body}
-            info={info}
-            mimeType={mimeType}
-            url={url}
-            encInfo={encInfo}
-            renderThumbnail={
-              mediaAutoLoad
-                ? () => (
-                    <ThumbnailContent
-                      info={info}
-                      renderImage={(src) => (
-                        <Image alt={body} title={body} src={src} loading="lazy" />
-                      )}
-                    />
-                  )
-                : undefined
-            }
-            renderVideo={(p) => <Video {...p} />}
-          />
-        )}
-        outlined={outlineAttachment}
-      />
-    );
-  }
-
-  if (msgType === MsgType.Audio) {
-    return (
-      <MAudio
-        content={getContent()}
-        renderAsFile={renderFile}
-        renderAudioContent={(props) => (
-          <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
-        )}
-        outlined={outlineAttachment}
-      />
-    );
-  }
-
-  if (msgType === MsgType.File) {
-    return renderFile();
-  }
-
-  if (msgType === MsgType.Location) {
-    return <MLocation content={getContent()} />;
-  }
-
-  if (msgType === 'm.bad.encrypted') {
-    return <MBadEncrypted />;
-  }
-
-  return <UnsupportedContent />;
-}

src/app/components/RoomSummaryLoader.tsx

@@ -1,90 +0,0 @@
-import { ReactNode, useCallback, useState } from 'react';
-import { MatrixClient, Room } from 'matrix-js-sdk';
-import { useQuery } from '@tanstack/react-query';
-import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { LocalRoomSummary, useLocalRoomSummary } from '../hooks/useLocalRoomSummary';
-import { AsyncState, AsyncStatus } from '../hooks/useAsyncCallback';
-
-export type IRoomSummary = Awaited<ReturnType<MatrixClient['getRoomSummary']>>;
-
-type RoomSummaryLoaderProps = {
-  roomIdOrAlias: string;
-  children: (roomSummary?: IRoomSummary) => ReactNode;
-};
-
-export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoaderProps) {
-  const mx = useMatrixClient();
-
-  const fetchSummary = useCallback(() => mx.getRoomSummary(roomIdOrAlias), [mx, roomIdOrAlias]);
-
-  const { data } = useQuery({
-    queryKey: [roomIdOrAlias, `summary`],
-    queryFn: fetchSummary,
-  });
-
-  return children(data);
-}
-
-export function LocalRoomSummaryLoader({
-  room,
-  children,
-}: {
-  room: Room;
-  children: (roomSummary: LocalRoomSummary) => ReactNode;
-}) {
-  const summary = useLocalRoomSummary(room);
-
-  return children(summary);
-}
-
-export function HierarchyRoomSummaryLoader({
-  roomId,
-  children,
-}: {
-  roomId: string;
-  children: (state: AsyncState<IHierarchyRoom, Error>) => ReactNode;
-}) {
-  const mx = useMatrixClient();
-
-  const fetchSummary = useCallback(() => mx.getRoomHierarchy(roomId, 1, 1), [mx, roomId]);
-  const [errorMemo, setError] = useState<Error>();
-
-  const { data, error } = useQuery({
-    queryKey: [roomId, `hierarchy`],
-    queryFn: fetchSummary,
-    retryOnMount: false,
-    refetchOnWindowFocus: false,
-    retry: (failureCount, err) => {
-      setError(err);
-      if (failureCount > 3) return false;
-      return true;
-    },
-  });
-
-  let state: AsyncState<IHierarchyRoom, Error> = {
-    status: AsyncStatus.Loading,
-  };
-  if (error) {
-    state = {
-      status: AsyncStatus.Error,
-      error,
-    };
-  }
-  if (errorMemo) {
-    state = {
-      status: AsyncStatus.Error,
-      error: errorMemo,
-    };
-  }
-
-  const summary = data?.rooms[0] ?? undefined;
-  if (summary) {
-    state = {
-      status: AsyncStatus.Success,
-      data: summary,
-    };
-  }
-
-  return children(state);
-}

src/app/components/RoomUnreadProvider.tsx

@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-import { Unread } from '../../types/matrix/room';
-import { useRoomUnread, useRoomsUnread } from '../state/hooks/unread';
-import { roomToUnreadAtom } from '../state/room/roomToUnread';
-
-type RoomUnreadProviderProps = {
-  roomId: string;
-  children: (unread?: Unread) => ReactElement;
-};
-export function RoomUnreadProvider({ roomId, children }: RoomUnreadProviderProps) {
-  const unread = useRoomUnread(roomId, roomToUnreadAtom);
-
-  return children(unread);
-}
-
-type RoomsUnreadProviderProps = {
-  rooms: string[];
-  children: (unread?: Unread) => ReactElement;
-};
-export function RoomsUnreadProvider({ rooms, children }: RoomsUnreadProviderProps) {
-  const unread = useRoomsUnread(rooms, roomToUnreadAtom);
-
-  return children(unread);
-}

src/app/components/SpaceChildDirectsProvider.tsx

@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-import { RoomToParents } from '../../types/matrix/room';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { allRoomsAtom } from '../state/room-list/roomList';
-import { useChildDirectScopeFactory, useSpaceChildren } from '../state/hooks/roomList';
-
-type SpaceChildDirectsProviderProps = {
-  spaceId: string;
-  mDirects: Set<string>;
-  roomToParents: RoomToParents;
-  children: (rooms: string[]) => ReactNode;
-};
-export function SpaceChildDirectsProvider({
-  spaceId,
-  roomToParents,
-  mDirects,
-  children,
-}: SpaceChildDirectsProviderProps) {
-  const mx = useMatrixClient();
-
-  const childDirects = useSpaceChildren(
-    allRoomsAtom,
-    spaceId,
-    useChildDirectScopeFactory(mx, mDirects, roomToParents)
-  );
-
-  return children(childDirects);
-}

src/app/components/SpaceChildRoomsProvider.tsx

@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-import { RoomToParents } from '../../types/matrix/room';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { allRoomsAtom } from '../state/room-list/roomList';
-import { useChildRoomScopeFactory, useSpaceChildren } from '../state/hooks/roomList';
-
-type SpaceChildRoomsProviderProps = {
-  spaceId: string;
-  mDirects: Set<string>;
-  roomToParents: RoomToParents;
-  children: (rooms: string[]) => ReactNode;
-};
-export function SpaceChildRoomsProvider({
-  spaceId,
-  roomToParents,
-  mDirects,
-  children,
-}: SpaceChildRoomsProviderProps) {
-  const mx = useMatrixClient();
-
-  const childRooms = useSpaceChildren(
-    allRoomsAtom,
-    spaceId,
-    useChildRoomScopeFactory(mx, mDirects, roomToParents)
-  );
-
-  return children(childRooms);
-}

src/app/components/SpecVersionsLoader.tsx

@@ -1,25 +1,20 @@
-import { ReactNode, useCallback, useEffect, useState } from 'react';
+import { ReactNode, useCallback, useEffect } from 'react';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { SpecVersions, specVersions } from '../cs-api';
+import { useAutoDiscoveryInfo } from '../hooks/useAutoDiscoveryInfo';
 
 type SpecVersionsLoaderProps = {
-  baseUrl: string;
   fallback?: () => ReactNode;
-  error?: (err: unknown, retry: () => void, ignore: () => void) => ReactNode;
+  error?: (err: unknown) => ReactNode;
   children: (versions: SpecVersions) => ReactNode;
 };
-export function SpecVersionsLoader({
-  baseUrl,
-  fallback,
-  error,
-  children,
-}: SpecVersionsLoaderProps) {
+export function SpecVersionsLoader({ fallback, error, children }: SpecVersionsLoaderProps) {
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
+  const baseUrl = autoDiscoveryInfo['m.homeserver'].base_url;
+
   const [state, load] = useAsyncCallback(
     useCallback(() => specVersions(fetch, baseUrl), [baseUrl])
   );
-  const [ignoreError, setIgnoreError] = useState(false);
-
-  const ignoreCallback = useCallback(() => setIgnoreError(true), []);
 
   useEffect(() => {
     load();
@@ -29,15 +24,9 @@ export function SpecVersionsLoader({
     return fallback?.();
   }
 
-  if (!ignoreError && state.status === AsyncStatus.Error) {
-    return error?.(state.error, load, ignoreCallback);
+  if (state.status === AsyncStatus.Error) {
+    return error?.(state.error);
   }
 
-  return children(
-    state.status === AsyncStatus.Success
-      ? state.data
-      : {
-          versions: [],
-        }
-  );
+  return children(state.data);
 }

src/app/components/editor/Editor.preview.tsx

@@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import {
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-} from 'folds';
-
-import { CustomEditor, useEditor } from './Editor';
-import { Toolbar } from './Toolbar';
-
-export function EditorPreview() {
-  const [open, setOpen] = useState(false);
-  const editor = useEditor();
-  const [toolbar, setToolbar] = useState(false);
-
-  return (
-    <>
-      <IconButton variant="SurfaceVariant" onClick={() => setOpen(!open)}>
-        <Icon src={Icons.BlockQuote} />
-      </IconButton>
-      <Overlay open={open} backdrop={<OverlayBackdrop />}>
-        <OverlayCenter>
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: () => setOpen(false),
-              clickOutsideDeactivates: true,
-            }}
-          >
-            <Modal size="500">
-              <div style={{ padding: config.space.S400 }}>
-                <CustomEditor
-                  editor={editor}
-                  placeholder="Send a message..."
-                  before={
-                    <IconButton variant="SurfaceVariant" size="300" radii="300">
-                      <Icon src={Icons.PlusCircle} />
-                    </IconButton>
-                  }
-                  after={
-                    <>
-                      <IconButton
-                        variant="SurfaceVariant"
-                        size="300"
-                        radii="300"
-                        onClick={() => setToolbar(!toolbar)}
-                        aria-pressed={toolbar}
-                      >
-                        <Icon src={toolbar ? Icons.AlphabetUnderline : Icons.Alphabet} />
-                      </IconButton>
-                      <IconButton variant="SurfaceVariant" size="300" radii="300">
-                        <Icon src={Icons.Smile} />
-                      </IconButton>
-                      <IconButton variant="SurfaceVariant" size="300" radii="300">
-                        <Icon src={Icons.Send} />
-                      </IconButton>
-                    </>
-                  }
-                  bottom={
-                    toolbar && (
-                      <div>
-                        <Line variant="SurfaceVariant" size="300" />
-                        <Toolbar />
-                      </div>
-                    )
-                  }
-                />
-              </div>
-            </Modal>
-          </FocusTrap>
-        </OverlayCenter>
-      </Overlay>
-    </>
-  );
-}

src/app/components/editor/Toolbar.tsx

@@ -10,14 +10,13 @@ import {
   Line,
   Menu,
   PopOut,
-  RectCords,
   Scroll,
   Text,
   Tooltip,
   TooltipProvider,
   toRem,
 } from 'folds';
-import React, { MouseEventHandler, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { ReactEditor, useSlate } from 'slate-react';
 import {
   headingLevel,
@@ -120,33 +119,26 @@ export function BlockButton({ format, icon, tooltip }: BlockButtonProps) {
 export function HeadingBlockButton() {
   const editor = useSlate();
   const level = headingLevel(editor);
-  const [anchor, setAnchor] = useState<RectCords>();
+  const [open, setOpen] = useState(false);
   const isActive = isBlockActive(editor, BlockType.Heading);
   const modKey = isMacOS() ? KeySymbol.Command : 'Ctrl';
 
   const handleMenuSelect = (selectedLevel: HeadingLevel) => {
-    setAnchor(undefined);
+    setOpen(false);
     toggleBlock(editor, BlockType.Heading, { level: selectedLevel });
     ReactEditor.focus(editor);
   };
 
-  const handleMenuOpen: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    if (isActive) {
-      toggleBlock(editor, BlockType.Heading);
-      return;
-    }
-    setAnchor(evt.currentTarget.getBoundingClientRect());
-  };
   return (
     <PopOut
-      anchor={anchor}
+      open={open}
       offset={5}
       position="Top"
       content={
         <FocusTrap
           focusTrapOptions={{
             initialFocus: false,
-            onDeactivate: () => setAnchor(undefined),
+            onDeactivate: () => setOpen(false),
             clickOutsideDeactivates: true,
             isKeyForward: (evt: KeyboardEvent) =>
               evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
@@ -205,17 +197,20 @@ export function HeadingBlockButton() {
         </FocusTrap>
       }
     >
-      <IconButton
-        style={{ width: 'unset' }}
-        variant="SurfaceVariant"
-        onClick={handleMenuOpen}
-        aria-pressed={isActive}
-        size="400"
-        radii="300"
-      >
-        <Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} />
-        <Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
-      </IconButton>
+      {(ref) => (
+        <IconButton
+          style={{ width: 'unset' }}
+          ref={ref}
+          variant="SurfaceVariant"
+          onClick={() => (isActive ? toggleBlock(editor, BlockType.Heading) : setOpen(!open))}
+          aria-pressed={isActive}
+          size="400"
+          radii="300"
+        >
+          <Icon size="200" src={level ? Icons[`Heading${level}`] : Icons.Heading1} />
+          <Icon size="200" src={isActive ? Icons.Cross : Icons.ChevronBottom} />
+        </IconButton>
+      )}
     </PopOut>
   );
 }

src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx

@@ -1,11 +1,12 @@
-import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
+import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo } from 'react';
 import { Editor } from 'slate';
-import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
-import { JoinRule, MatrixClient } from 'matrix-js-sdk';
-import { useAtomValue } from 'jotai';
+import { Avatar, AvatarFallback, AvatarImage, Icon, Icons, MenuItem, Text, color } from 'folds';
+import { MatrixClient } from 'matrix-js-sdk';
 
 import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
-import { getDirectRoomAvatarUrl } from '../../../utils/room';
+import { getRoomAvatarUrl, joinRuleToIconSrc } from '../../../utils/room';
+import { roomIdByActivity } from '../../../../util/sort';
+import initMatrix from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AutocompleteQuery } from './autocompleteQuery';
 import { AutocompleteMenu } from './AutocompleteMenu';
@@ -13,10 +14,6 @@ import { getMxIdServer, validMxId } from '../../../utils/matrix';
 import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
 import { onTabPress } from '../../../utils/keyboard';
 import { useKeyDown } from '../../../hooks/useKeyDown';
-import { mDirectAtom } from '../../../state/mDirectList';
-import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { factoryRoomIdByActivity } from '../../../utils/sort';
-import { RoomAvatar, RoomIcon } from '../../room-avatar';
 
 type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
 
@@ -77,12 +74,15 @@ export function RoomMentionAutocomplete({
   requestClose,
 }: RoomMentionAutocompleteProps) {
   const mx = useMatrixClient();
-  const mDirects = useAtomValue(mDirectAtom);
+  const dms: Set<string> = initMatrix.roomList?.directs ?? new Set();
 
-  const allRooms = useAtomValue(allRoomsAtom).sort(factoryRoomIdByActivity(mx));
+  const allRoomId: string[] = useMemo(() => {
+    const { spaces = [], rooms = [], directs = [] } = initMatrix.roomList ?? {};
+    return [...spaces, ...rooms, ...directs].sort(roomIdByActivity);
+  }, []);
 
   const [result, search, resetSearch] = useAsyncSearch(
-    allRooms,
+    allRoomId,
     useCallback(
       (rId) => {
         const r = mx.getRoom(rId);
@@ -96,7 +96,7 @@ export function RoomMentionAutocomplete({
     SEARCH_OPTIONS
   );
 
-  const autoCompleteRoomIds = result ? result.items : allRooms.slice(0, 20);
+  const autoCompleteRoomIds = result ? result.items : allRoomId.slice(0, 20);
 
   useEffect(() => {
     if (query.text) search(query.text);
@@ -136,7 +136,9 @@ export function RoomMentionAutocomplete({
         autoCompleteRoomIds.map((rId) => {
           const room = mx.getRoom(rId);
           if (!room) return null;
-          const dm = mDirects.has(room.roomId);
+          const dm = dms.has(room.roomId);
+          const avatarUrl = getRoomAvatarUrl(mx, room);
+          const iconSrc = !dm && joinRuleToIconSrc(Icons, room.getJoinRule(), room.isSpaceRoom());
 
           const handleSelect = () => handleAutocomplete(room.getCanonicalAlias() ?? rId, room.name);
 
@@ -156,21 +158,17 @@ export function RoomMentionAutocomplete({
               }
               before={
                 <Avatar size="200">
-                  {dm ? (
-                    <RoomAvatar
-                      roomId={room.roomId}
-                      src={getDirectRoomAvatarUrl(mx, room)}
-                      alt={room.name}
-                      renderFallback={() => (
-                        <RoomIcon
-                          size="50"
-                          joinRule={room.getJoinRule() ?? JoinRule.Restricted}
-                          filled
-                        />
-                      )}
-                    />
-                  ) : (
-                    <RoomIcon size="100" joinRule={room.getJoinRule()} space={room.isSpaceRoom()} />
+                  {iconSrc && <Icon src={iconSrc} size="100" />}
+                  {avatarUrl && !iconSrc && <AvatarImage src={avatarUrl} alt={room.name} />}
+                  {!avatarUrl && !iconSrc && (
+                    <AvatarFallback
+                      style={{
+                        backgroundColor: color.Secondary.Container,
+                        color: color.Secondary.OnContainer,
+                      }}
+                    >
+                      <Text size="H6">{room.name[0]}</Text>
+                    </AvatarFallback>
                   )}
                 </Avatar>
               }

src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { Editor } from 'slate';
-import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
+import { Avatar, AvatarFallback, AvatarImage, MenuItem, Text, color } from 'folds';
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 
 import { AutocompleteQuery } from './autocompleteQuery';
@@ -17,7 +17,6 @@ import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { getMxIdLocalPart, getMxIdServer, validMxId } from '../../../utils/matrix';
 import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
-import { UserAvatar } from '../../user-avatar';
 
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
@@ -27,10 +26,12 @@ const userIdFromQueryText = (mx: MatrixClient, text: string) =>
     : `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
 
 function UnknownMentionItem({
+  query,
   userId,
   name,
   handleAutocomplete,
 }: {
+  query: AutocompleteQuery<string>;
   userId: string;
   name: string;
   handleAutocomplete: MentionAutoCompleteHandler;
@@ -45,10 +46,14 @@ function UnknownMentionItem({
       onClick={() => handleAutocomplete(userId, name)}
       before={
         <Avatar size="200">
-          <UserAvatar
-            userId={userId}
-            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-          />
+          <AvatarFallback
+            style={{
+              backgroundColor: color.Secondary.Container,
+              color: color.Secondary.OnContainer,
+            }}
+          >
+            <Text size="H6">{query.text[0]}</Text>
+          </AvatarFallback>
         </Avatar>
       }
     >
@@ -130,6 +135,7 @@ export function UserMentionAutocomplete({
     <AutocompleteMenu headerContent={<Text size="L400">Mentions</Text>} requestClose={requestClose}>
       {query.text === 'room' && (
         <UnknownMentionItem
+          query={query}
           userId={roomAliasOrId}
           name="@room"
           handleAutocomplete={handleAutocomplete}
@@ -137,6 +143,7 @@ export function UserMentionAutocomplete({
       )}
       {autoCompleteMembers.length === 0 ? (
         <UnknownMentionItem
+          query={query}
           userId={userIdFromQueryText(mx, query.text)}
           name={userIdFromQueryText(mx, query.text)}
           handleAutocomplete={handleAutocomplete}
@@ -160,12 +167,18 @@ export function UserMentionAutocomplete({
               }
               before={
                 <Avatar size="200">
-                  <UserAvatar
-                    userId={roomMember.userId}
-                    src={avatarUrl ?? undefined}
-                    alt={getName(roomMember)}
-                    renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                  />
+                  {avatarUrl ? (
+                    <AvatarImage src={avatarUrl} alt={getName(roomMember)} />
+                  ) : (
+                    <AvatarFallback
+                      style={{
+                        backgroundColor: color.Secondary.Container,
+                        color: color.Secondary.OnContainer,
+                      }}
+                    >
+                      <Text size="H6">{getName(roomMember)[0]}</Text>
+                    </AvatarFallback>
+                  )}
                 </Avatar>
               }
             >

src/app/components/event-readers/EventReaders.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import {
   Avatar,
+  AvatarFallback,
+  AvatarImage,
   Box,
   Header,
   Icon,
@@ -19,8 +21,8 @@ import { getMemberDisplayName } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import * as css from './EventReaders.css';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import colorMXID from '../../../util/colorMXID';
 import { openProfileViewer } from '../../../client/action/navigation';
-import { UserAvatar } from '../user-avatar';
 
 export type EventReadersProps = {
   room: Room;
@@ -70,12 +72,18 @@ export const EventReaders = as<'div', EventReadersProps>(
                     }}
                     before={
                       <Avatar size="200">
-                        <UserAvatar
-                          userId={readerId}
-                          src={avatarUrl ?? undefined}
-                          alt={name}
-                          renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                        />
+                        {avatarUrl ? (
+                          <AvatarImage src={avatarUrl} />
+                        ) : (
+                          <AvatarFallback
+                            style={{
+                              background: colorMXID(readerId),
+                              color: 'white',
+                            }}
+                          >
+                            <Text size="H6">{name[0]}</Text>
+                          </AvatarFallback>
+                        )}
                       </Avatar>
                     }
                   >

src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx

@@ -1,106 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import FocusTrap from 'focus-trap-react';
-import {
-  Dialog,
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-} from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-
-type LeaveRoomPromptProps = {
-  roomId: string;
-  onDone: () => void;
-  onCancel: () => void;
-};
-export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptProps) {
-  const mx = useMatrixClient();
-
-  const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
-    useCallback(async () => {
-      mx.leave(roomId);
-    }, [mx, roomId])
-  );
-
-  const handleLeave = () => {
-    leaveRoom();
-  };
-
-  useEffect(() => {
-    if (leaveState.status === AsyncStatus.Success) {
-      onDone();
-    }
-  }, [leaveState, onDone]);
-
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: onCancel,
-            clickOutsideDeactivates: true,
-          }}
-        >
-          <Dialog variant="Surface">
-            <Header
-              style={{
-                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-                borderBottomWidth: config.borderWidth.B300,
-              }}
-              variant="Surface"
-              size="500"
-            >
-              <Box grow="Yes">
-                <Text size="H4">Leave Room</Text>
-              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
-                <Icon src={Icons.Cross} />
-              </IconButton>
-            </Header>
-            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-              <Box direction="Column" gap="200">
-                <Text priority="400">Are you sure you want to leave this room?</Text>
-                {leaveState.status === AsyncStatus.Error && (
-                  <Text style={{ color: color.Critical.Main }} size="T300">
-                    Failed to leave room! {leaveState.error.message}
-                  </Text>
-                )}
-              </Box>
-              <Button
-                type="submit"
-                variant="Critical"
-                onClick={handleLeave}
-                before={
-                  leaveState.status === AsyncStatus.Loading ? (
-                    <Spinner fill="Solid" variant="Critical" size="200" />
-                  ) : undefined
-                }
-                aria-disabled={
-                  leaveState.status === AsyncStatus.Loading ||
-                  leaveState.status === AsyncStatus.Success
-                }
-              >
-                <Text size="B400">
-                  {leaveState.status === AsyncStatus.Loading ? 'Leaving...' : 'Leave'}
-                </Text>
-              </Button>
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}

src/app/components/leave-room-prompt/index.ts

@@ -1 +0,0 @@
-export * from './LeaveRoomPrompt';

src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx

@@ -1,106 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import FocusTrap from 'focus-trap-react';
-import {
-  Dialog,
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-} from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-
-type LeaveSpacePromptProps = {
-  roomId: string;
-  onDone: () => void;
-  onCancel: () => void;
-};
-export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptProps) {
-  const mx = useMatrixClient();
-
-  const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
-    useCallback(async () => {
-      mx.leave(roomId);
-    }, [mx, roomId])
-  );
-
-  const handleLeave = () => {
-    leaveRoom();
-  };
-
-  useEffect(() => {
-    if (leaveState.status === AsyncStatus.Success) {
-      onDone();
-    }
-  }, [leaveState, onDone]);
-
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: onCancel,
-            clickOutsideDeactivates: true,
-          }}
-        >
-          <Dialog variant="Surface">
-            <Header
-              style={{
-                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-                borderBottomWidth: config.borderWidth.B300,
-              }}
-              variant="Surface"
-              size="500"
-            >
-              <Box grow="Yes">
-                <Text size="H4">Leave Space</Text>
-              </Box>
-              <IconButton size="300" onClick={onCancel} radii="300">
-                <Icon src={Icons.Cross} />
-              </IconButton>
-            </Header>
-            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-              <Box direction="Column" gap="200">
-                <Text priority="400">Are you sure you want to leave this space?</Text>
-                {leaveState.status === AsyncStatus.Error && (
-                  <Text style={{ color: color.Critical.Main }} size="T300">
-                    Failed to leave space! {leaveState.error.message}
-                  </Text>
-                )}
-              </Box>
-              <Button
-                type="submit"
-                variant="Critical"
-                onClick={handleLeave}
-                before={
-                  leaveState.status === AsyncStatus.Loading ? (
-                    <Spinner fill="Solid" variant="Critical" size="200" />
-                  ) : undefined
-                }
-                aria-disabled={
-                  leaveState.status === AsyncStatus.Loading ||
-                  leaveState.status === AsyncStatus.Success
-                }
-              >
-                <Text size="B400">
-                  {leaveState.status === AsyncStatus.Loading ? 'Leaving...' : 'Leave'}
-                </Text>
-              </Button>
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}

src/app/components/leave-space-prompt/index.ts

@@ -1 +0,0 @@
-export * from './LeaveSpacePrompt';

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,398 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
-import { IContent } from 'matrix-js-sdk';
-import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
-import { trimReplyFromBody } from '../../utils/room';
-import { MessageTextBody } from './layout';
-import {
-  MessageBadEncryptedContent,
-  MessageBrokenContent,
-  MessageDeletedContent,
-  MessageEditedContent,
-  MessageUnsupportedContent,
-} from './content';
-import {
-  IAudioContent,
-  IAudioInfo,
-  IEncryptedFile,
-  IFileContent,
-  IFileInfo,
-  IImageContent,
-  IImageInfo,
-  IThumbnailContent,
-  IVideoContent,
-  IVideoInfo,
-} from '../../../types/matrix/common';
-import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
-import { parseGeoUri, scaleYDimension } from '../../utils/common';
-import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
-import { FileHeader } from './FileHeader';
-
-export function MBadEncrypted() {
-  return (
-    <Text>
-      <MessageBadEncryptedContent />
-    </Text>
-  );
-}
-
-type RedactedContentProps = {
-  reason?: string;
-};
-export function RedactedContent({ reason }: RedactedContentProps) {
-  return (
-    <Text>
-      <MessageDeletedContent reason={reason} />
-    </Text>
-  );
-}
-
-export function UnsupportedContent() {
-  return (
-    <Text>
-      <MessageUnsupportedContent />
-    </Text>
-  );
-}
-
-export function BrokenContent() {
-  return (
-    <Text>
-      <MessageBrokenContent />
-    </Text>
-  );
-}
-
-type RenderBodyProps = {
-  body: string;
-  customBody?: string;
-};
-type MTextProps = {
-  edited?: boolean;
-  content: Record<string, unknown>;
-  renderBody: (props: RenderBodyProps) => ReactNode;
-  renderUrlsPreview?: (urls: string[]) => ReactNode;
-};
-export function MText({ edited, content, renderBody, renderUrlsPreview }: MTextProps) {
-  const { body, formatted_body: customBody } = content;
-
-  if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
-
-  return (
-    <>
-      <MessageTextBody
-        preWrap={typeof customBody !== 'string'}
-        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
-      >
-        {renderBody({
-          body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
-        })}
-        {edited && <MessageEditedContent />}
-      </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
-    </>
-  );
-}
-
-type MEmoteProps = {
-  displayName: string;
-  edited?: boolean;
-  content: Record<string, unknown>;
-  renderBody: (props: RenderBodyProps) => ReactNode;
-  renderUrlsPreview?: (urls: string[]) => ReactNode;
-};
-export function MEmote({
-  displayName,
-  edited,
-  content,
-  renderBody,
-  renderUrlsPreview,
-}: MEmoteProps) {
-  const { body, formatted_body: customBody } = content;
-
-  if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
-
-  return (
-    <>
-      <MessageTextBody
-        emote
-        preWrap={typeof customBody !== 'string'}
-        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
-      >
-        <b>{`${displayName} `}</b>
-        {renderBody({
-          body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
-        })}
-        {edited && <MessageEditedContent />}
-      </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
-    </>
-  );
-}
-
-type MNoticeProps = {
-  edited?: boolean;
-  content: Record<string, unknown>;
-  renderBody: (props: RenderBodyProps) => ReactNode;
-  renderUrlsPreview?: (urls: string[]) => ReactNode;
-};
-export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNoticeProps) {
-  const { body, formatted_body: customBody } = content;
-
-  if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
-
-  return (
-    <>
-      <MessageTextBody
-        notice
-        preWrap={typeof customBody !== 'string'}
-        jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
-      >
-        {renderBody({
-          body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
-        })}
-        {edited && <MessageEditedContent />}
-      </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
-    </>
-  );
-}
-
-type RenderImageContentProps = {
-  body: string;
-  info?: IImageInfo & IThumbnailContent;
-  mimeType?: string;
-  url: string;
-  encInfo?: IEncryptedFile;
-};
-type MImageProps = {
-  content: IImageContent;
-  renderImageContent: (props: RenderImageContentProps) => ReactNode;
-  outlined?: boolean;
-};
-export function MImage({ content, renderImageContent, outlined }: MImageProps) {
-  const imgInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
-  if (typeof mxcUrl !== 'string') {
-    return <BrokenContent />;
-  }
-  const height = scaleYDimension(imgInfo?.w || 400, 400, imgInfo?.h || 400);
-
-  return (
-    <Attachment outlined={outlined}>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
-        {renderImageContent({
-          body: content.body || 'Image',
-          info: imgInfo,
-          mimeType: imgInfo?.mimetype,
-          url: mxcUrl,
-          encInfo: content.file,
-        })}
-      </AttachmentBox>
-    </Attachment>
-  );
-}
-
-type RenderVideoContentProps = {
-  body: string;
-  info: IVideoInfo & IThumbnailContent;
-  mimeType: string;
-  url: string;
-  encInfo?: IEncryptedFile;
-};
-type MVideoProps = {
-  content: IVideoContent;
-  renderAsFile: () => ReactNode;
-  renderVideoContent: (props: RenderVideoContentProps) => ReactNode;
-  outlined?: boolean;
-};
-export function MVideo({ content, renderAsFile, renderVideoContent, outlined }: MVideoProps) {
-  const videoInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
-  const safeMimeType = getBlobSafeMimeType(videoInfo?.mimetype ?? '');
-
-  if (!videoInfo || !safeMimeType.startsWith('video') || typeof mxcUrl !== 'string') {
-    if (mxcUrl) {
-      return renderAsFile();
-    }
-    return <BrokenContent />;
-  }
-
-  const height = scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400);
-
-  return (
-    <Attachment outlined={outlined}>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
-        {renderVideoContent({
-          body: content.body || 'Video',
-          info: videoInfo,
-          mimeType: safeMimeType,
-          url: mxcUrl,
-          encInfo: content.file,
-        })}
-      </AttachmentBox>
-    </Attachment>
-  );
-}
-
-type RenderAudioContentProps = {
-  info: IAudioInfo;
-  mimeType: string;
-  url: string;
-  encInfo?: IEncryptedFile;
-};
-type MAudioProps = {
-  content: IAudioContent;
-  renderAsFile: () => ReactNode;
-  renderAudioContent: (props: RenderAudioContentProps) => ReactNode;
-  outlined?: boolean;
-};
-export function MAudio({ content, renderAsFile, renderAudioContent, outlined }: MAudioProps) {
-  const audioInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
-  const safeMimeType = getBlobSafeMimeType(audioInfo?.mimetype ?? '');
-
-  if (!audioInfo || !safeMimeType.startsWith('audio') || typeof mxcUrl !== 'string') {
-    if (mxcUrl) {
-      return renderAsFile();
-    }
-    return <BrokenContent />;
-  }
-
-  return (
-    <Attachment outlined={outlined}>
-      <AttachmentHeader>
-        <FileHeader body={content.body ?? 'Audio'} mimeType={safeMimeType} />
-      </AttachmentHeader>
-      <AttachmentBox>
-        <AttachmentContent>
-          {renderAudioContent({
-            info: audioInfo,
-            mimeType: safeMimeType,
-            url: mxcUrl,
-            encInfo: content.file,
-          })}
-        </AttachmentContent>
-      </AttachmentBox>
-    </Attachment>
-  );
-}
-
-type RenderFileContentProps = {
-  body: string;
-  info: IFileInfo & IThumbnailContent;
-  mimeType: string;
-  url: string;
-  encInfo?: IEncryptedFile;
-};
-type MFileProps = {
-  content: IFileContent;
-  renderFileContent: (props: RenderFileContentProps) => ReactNode;
-  outlined?: boolean;
-};
-export function MFile({ content, renderFileContent, outlined }: MFileProps) {
-  const fileInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
-
-  if (typeof mxcUrl !== 'string') {
-    return <BrokenContent />;
-  }
-
-  return (
-    <Attachment outlined={outlined}>
-      <AttachmentHeader>
-        <FileHeader
-          body={content.body ?? 'Unnamed File'}
-          mimeType={fileInfo?.mimetype ?? FALLBACK_MIMETYPE}
-        />
-      </AttachmentHeader>
-      <AttachmentBox>
-        <AttachmentContent>
-          {renderFileContent({
-            body: content.body ?? 'File',
-            info: fileInfo ?? {},
-            mimeType: fileInfo?.mimetype ?? FALLBACK_MIMETYPE,
-            url: mxcUrl,
-            encInfo: content.file,
-          })}
-        </AttachmentContent>
-      </AttachmentBox>
-    </Attachment>
-  );
-}
-
-type MLocationProps = {
-  content: IContent;
-};
-export function MLocation({ content }: MLocationProps) {
-  const geoUri = content.geo_uri;
-  if (typeof geoUri !== 'string') return <BrokenContent />;
-  const location = parseGeoUri(geoUri);
-  return (
-    <Box direction="Column" alignItems="Start" gap="100">
-      <Text size="T400">{geoUri}</Text>
-      <Chip
-        as="a"
-        size="400"
-        href={`https://www.openstreetmap.org/?mlat=${location.latitude}&mlon=${location.longitude}#map=16/${location.latitude}/${location.longitude}`}
-        target="_blank"
-        rel="noreferrer noopener"
-        variant="Primary"
-        radii="Pill"
-        before={<Icon src={Icons.External} size="50" />}
-      >
-        <Text size="B300">Open Location</Text>
-      </Chip>
-    </Box>
-  );
-}
-
-type MStickerProps = {
-  content: IImageContent;
-  renderImageContent: (props: RenderImageContentProps) => ReactNode;
-};
-export function MSticker({ content, renderImageContent }: MStickerProps) {
-  const imgInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
-  if (typeof mxcUrl !== 'string') {
-    return <MessageBrokenContent />;
-  }
-  const height = scaleYDimension(imgInfo?.w || 152, 152, imgInfo?.h || 152);
-
-  return (
-    <AttachmentBox
-      style={{
-        height: toRem(height < 48 ? 48 : height),
-        width: toRem(152),
-      }}
-    >
-      {renderImageContent({
-        body: content.body || 'Sticker',
-        info: imgInfo,
-        mimeType: imgInfo?.mimetype,
-        url: mxcUrl,
-        encInfo: content.file,
-      })}
-    </AttachmentBox>
-  );
-}

src/app/components/message/RenderBody.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import parse, { HTMLReactParserOptions } from 'html-react-parser';
-import Linkify from 'linkify-react';
-import { MessageEmptyContent } from './content';
-import { sanitizeCustomHtml } from '../../utils/sanitize';
-import {
-  LINKIFY_OPTS,
-  highlightText,
-  scaleSystemEmoji,
-} from '../../plugins/react-custom-html-parser';
-
-type RenderBodyProps = {
-  body: string;
-  customBody?: string;
-
-  highlightRegex?: RegExp;
-  htmlReactParserOptions: HTMLReactParserOptions;
-};
-export function RenderBody({
-  body,
-  customBody,
-  highlightRegex,
-  htmlReactParserOptions,
-}: RenderBodyProps) {
-  if (body === '') <MessageEmptyContent />;
-  if (customBody) {
-    if (customBody === '') <MessageEmptyContent />;
-    return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions);
-  }
-  return (
-    <Linkify options={LINKIFY_OPTS}>
-      {highlightRegex
-        ? highlightText(highlightRegex, scaleSystemEmoji(body))
-        : scaleSystemEmoji(body)}
-    </Linkify>
-  );
-}

src/app/components/message/Reply.css.ts

@@ -1,20 +1,13 @@
 import { style } from '@vanilla-extract/css';
 import { config, toRem } from 'folds';
 
-export const ReplyBend = style({
-  flexShrink: 0,
-});
-
 export const Reply = style({
+  padding: `0 ${config.space.S100}`,
   marginBottom: toRem(1),
+  cursor: 'pointer',
   minWidth: 0,
   maxWidth: '100%',
   minHeight: config.lineHeight.T300,
-  selectors: {
-    'button&': {
-      cursor: 'pointer',
-    },
-  },
 });
 
 export const ReplyContent = style({
@@ -26,3 +19,7 @@ export const ReplyContent = style({
     },
   },
 });
+
+export const ReplyContentText = style({
+  paddingRight: config.space.S100,
+});

src/app/components/message/Reply.tsx

@@ -1,7 +1,7 @@
 import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
 import { EventTimelineSet, MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
 import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
-import React, { ReactNode, useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import to from 'await-to-js';
 import classNames from 'classnames';
 import colorMXID from '../../../util/colorMXID';
@@ -10,105 +10,94 @@ import { getMxIdLocalPart } from '../../utils/matrix';
 import { LinePlaceholder } from './placeholder';
 import { randomNumberBetween } from '../../utils/common';
 import * as css from './Reply.css';
-import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
-import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
-
-type ReplyLayoutProps = {
-  userColor?: string;
-  username?: ReactNode;
-};
-export const ReplyLayout = as<'div', ReplyLayoutProps>(
-  ({ username, userColor, className, children, ...props }, ref) => (
-    <Box
-      className={classNames(css.Reply, className)}
-      alignItems="Center"
-      gap="100"
-      {...props}
-      ref={ref}
-    >
-      <Box style={{ color: userColor, maxWidth: toRem(200) }} alignItems="Center" shrink="No">
-        <Icon size="100" src={Icons.ReplyArrow} />
-        {username}
-      </Box>
-      <Box grow="Yes" className={css.ReplyContent}>
-        {children}
-      </Box>
-    </Box>
-  )
-);
+import {
+  MessageBadEncryptedContent,
+  MessageDeletedContent,
+  MessageFailedContent,
+} from './MessageContentFallback';
 
 type ReplyProps = {
   mx: MatrixClient;
   room: Room;
-  timelineSet?: EventTimelineSet;
+  timelineSet: EventTimelineSet;
   eventId: string;
 };
 
-export const Reply = as<'div', ReplyProps>(({ mx, room, timelineSet, eventId, ...props }, ref) => {
-  const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
-    timelineSet?.findEventById(eventId)
-  );
-  const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
+export const Reply = as<'div', ReplyProps>(
+  ({ className, mx, room, timelineSet, eventId, ...props }, ref) => {
+    const [replyEvent, setReplyEvent] = useState<MatrixEvent | null | undefined>(
+      timelineSet.findEventById(eventId)
+    );
 
-  const { body } = replyEvent?.getContent() ?? {};
-  const sender = replyEvent?.getSender();
+    const { body } = replyEvent?.getContent() ?? {};
+    const sender = replyEvent?.getSender();
 
-  const fallbackBody = replyEvent?.isRedacted() ? (
-    <MessageDeletedContent />
-  ) : (
-    <MessageFailedContent />
-  );
+    const fallbackBody = replyEvent?.isRedacted() ? (
+      <MessageDeletedContent />
+    ) : (
+      <MessageFailedContent />
+    );
 
-  useEffect(() => {
-    let disposed = false;
-    const loadEvent = async () => {
-      const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, eventId));
-      const mEvent = new MatrixEvent(evt);
-      if (disposed) return;
-      if (err) {
-        setReplyEvent(null);
-        return;
-      }
-      if (mEvent.isEncrypted() && mx.getCrypto()) {
-        await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
-      }
-      setReplyEvent(mEvent);
-    };
-    if (replyEvent === undefined) loadEvent();
-    return () => {
-      disposed = true;
-    };
-  }, [replyEvent, mx, room, eventId]);
+    useEffect(() => {
+      let disposed = false;
+      const loadEvent = async () => {
+        const [err, evt] = await to(mx.fetchRoomEvent(room.roomId, eventId));
+        const mEvent = new MatrixEvent(evt);
+        if (disposed) return;
+        if (err) {
+          setReplyEvent(null);
+          return;
+        }
+        if (mEvent.isEncrypted() && mx.getCrypto()) {
+          await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
+        }
+        setReplyEvent(mEvent);
+      };
+      if (replyEvent === undefined) loadEvent();
+      return () => {
+        disposed = true;
+      };
+    }, [replyEvent, mx, room, eventId]);
 
-  const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
-  const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
+    const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
+    const bodyJSX = body ? trimReplyFromBody(body) : fallbackBody;
 
-  return (
-    <ReplyLayout
-      userColor={sender ? colorMXID(sender) : undefined}
-      username={
-        sender && (
-          <Text size="T300" truncate>
-            <b>{getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender)}</b>
-          </Text>
-        )
-      }
-      {...props}
-      ref={ref}
-    >
-      {replyEvent !== undefined ? (
-        <Text size="T300" truncate>
-          {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
-        </Text>
-      ) : (
-        <LinePlaceholder
-          style={{
-            backgroundColor: color.SurfaceVariant.ContainerActive,
-            maxWidth: toRem(placeholderWidth),
-            width: '100%',
-          }}
-        />
-      )}
-    </ReplyLayout>
-  );
-});
+    return (
+      <Box
+        className={classNames(css.Reply, className)}
+        alignItems="Center"
+        gap="100"
+        {...props}
+        ref={ref}
+      >
+        <Box
+          style={{ color: colorMXID(sender ?? eventId), maxWidth: '50%' }}
+          alignItems="Center"
+          shrink="No"
+        >
+          <Icon src={Icons.ReplyArrow} size="50" />
+          {sender && (
+            <Text size="T300" truncate>
+              {getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender)}
+            </Text>
+          )}
+        </Box>
+        <Box grow="Yes" className={css.ReplyContent}>
+          {replyEvent !== undefined ? (
+            <Text className={css.ReplyContentText} size="T300" truncate>
+              {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
+            </Text>
+          ) : (
+            <LinePlaceholder
+              style={{
+                backgroundColor: color.SurfaceVariant.ContainerActive,
+                maxWidth: toRem(randomNumberBetween(40, 400)),
+                width: '100%',
+              }}
+            />
+          )}
+        </Box>
+      </Box>
+    );
+  }
+);

src/app/components/message/Time.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentProps } from 'react';
+import React from 'react';
 import { Text, as } from 'folds';
 import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
 
@@ -7,23 +7,21 @@ export type TimeProps = {
   ts: number;
 };
 
-export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
-  ({ compact, ts, ...props }, ref) => {
-    let time = '';
-    if (compact) {
-      time = timeHourMinute(ts);
-    } else if (today(ts)) {
-      time = timeHourMinute(ts);
-    } else if (yesterday(ts)) {
-      time = `Yesterday ${timeHourMinute(ts)}`;
-    } else {
-      time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
-    }
-
-    return (
-      <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
-        {time}
-      </Text>
-    );
+export const Time = as<'span', TimeProps>(({ compact, ts, ...props }, ref) => {
+  let time = '';
+  if (compact) {
+    time = timeHourMinute(ts);
+  } else if (today(ts)) {
+    time = timeHourMinute(ts);
+  } else if (yesterday(ts)) {
+    time = `Yesterday ${timeHourMinute(ts)}`;
+  } else {
+    time = `${timeDayMonYear(ts)} ${timeHourMinute(ts)}`;
   }
-);
+
+  return (
+    <Text as="time" style={{ flexShrink: 0 }} size="T200" priority="300" {...props} ref={ref}>
+      {time}
+    </Text>
+  );
+});

src/app/components/message/attachment/Attachment.css.ts

@@ -9,7 +9,7 @@ export const Attachment = recipe({
     borderRadius: config.radii.R400,
     overflow: 'hidden',
     maxWidth: '100%',
-    width: toRem(400),
+    // width: toRem(400),
   },
   variants: {
     outlined: {
@@ -31,7 +31,7 @@ export const AttachmentBox = style([
   {
     maxWidth: '100%',
     maxHeight: toRem(600),
-    width: toRem(400),
+    // width: toRem(400),
     overflow: 'hidden',
   },
 ]);

src/app/components/message/content/AudioContent.tsx

@@ -1,199 +0,0 @@
-/* eslint-disable jsx-a11y/media-has-caption */
-import React, { ReactNode, useCallback, useRef, useState } from 'react';
-import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
-import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import { Range } from 'react-range';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { getFileSrcUrl } from './util';
-import { IAudioInfo } from '../../../../types/matrix/common';
-import {
-  PlayTimeCallback,
-  useMediaLoading,
-  useMediaPlay,
-  useMediaPlayTimeCallback,
-  useMediaSeek,
-  useMediaVolume,
-} from '../../../hooks/media';
-import { useThrottle } from '../../../hooks/useThrottle';
-import { secondsToMinutesAndSeconds } from '../../../utils/common';
-
-const PLAY_TIME_THROTTLE_OPS = {
-  wait: 500,
-  immediate: true,
-};
-
-type RenderMediaControlProps = {
-  after: ReactNode;
-  leftControl: ReactNode;
-  rightControl: ReactNode;
-  children: ReactNode;
-};
-export type AudioContentProps = {
-  mimeType: string;
-  url: string;
-  info: IAudioInfo;
-  encInfo?: EncryptedAttachmentInfo;
-  renderMediaControl: (props: RenderMediaControlProps) => ReactNode;
-};
-export function AudioContent({
-  mimeType,
-  url,
-  info,
-  encInfo,
-  renderMediaControl,
-}: AudioContentProps) {
-  const mx = useMatrixClient();
-
-  const [srcState, loadSrc] = useAsyncCallback(
-    useCallback(
-      () => getFileSrcUrl(mx.mxcUrlToHttp(url) ?? '', mimeType, encInfo),
-      [mx, url, mimeType, encInfo]
-    )
-  );
-
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-
-  const [currentTime, setCurrentTime] = useState(0);
-  // duration in seconds. (NOTE: info.duration is in milliseconds)
-  const infoDuration = info.duration ?? 0;
-  const [duration, setDuration] = useState((infoDuration >= 0 ? infoDuration : 0) / 1000);
-
-  const getAudioRef = useCallback(() => audioRef.current, []);
-  const { loading } = useMediaLoading(getAudioRef);
-  const { playing, setPlaying } = useMediaPlay(getAudioRef);
-  const { seek } = useMediaSeek(getAudioRef);
-  const { volume, mute, setMute, setVolume } = useMediaVolume(getAudioRef);
-  const handlePlayTimeCallback: PlayTimeCallback = useCallback((d, ct) => {
-    setDuration(d);
-    setCurrentTime(ct);
-  }, []);
-  useMediaPlayTimeCallback(
-    getAudioRef,
-    useThrottle(handlePlayTimeCallback, PLAY_TIME_THROTTLE_OPS)
-  );
-
-  const handlePlay = () => {
-    if (srcState.status === AsyncStatus.Success) {
-      setPlaying(!playing);
-    } else if (srcState.status !== AsyncStatus.Loading) {
-      loadSrc();
-    }
-  };
-
-  return renderMediaControl({
-    after: (
-      <Range
-        step={1}
-        min={0}
-        max={duration || 1}
-        values={[currentTime]}
-        onChange={(values) => seek(values[0])}
-        renderTrack={(params) => (
-          <div {...params.props}>
-            {params.children}
-            <ProgressBar
-              as="div"
-              variant="Secondary"
-              size="300"
-              min={0}
-              max={duration}
-              value={currentTime}
-              radii="300"
-            />
-          </div>
-        )}
-        renderThumb={(params) => (
-          <Badge
-            size="300"
-            variant="Secondary"
-            fill="Solid"
-            radii="Pill"
-            outlined
-            {...params.props}
-            style={{
-              ...params.props.style,
-              zIndex: 0,
-            }}
-          />
-        )}
-      />
-    ),
-    leftControl: (
-      <>
-        <Chip
-          onClick={handlePlay}
-          variant="Secondary"
-          radii="300"
-          disabled={srcState.status === AsyncStatus.Loading}
-          before={
-            srcState.status === AsyncStatus.Loading || loading ? (
-              <Spinner variant="Secondary" size="50" />
-            ) : (
-              <Icon src={playing ? Icons.Pause : Icons.Play} size="50" filled={playing} />
-            )
-          }
-        >
-          <Text size="B300">{playing ? 'Pause' : 'Play'}</Text>
-        </Chip>
-
-        <Text size="T200">{`${secondsToMinutesAndSeconds(
-          currentTime
-        )} / ${secondsToMinutesAndSeconds(duration)}`}</Text>
-      </>
-    ),
-    rightControl: (
-      <>
-        <IconButton
-          variant="SurfaceVariant"
-          size="300"
-          radii="Pill"
-          onClick={() => setMute(!mute)}
-          aria-pressed={mute}
-        >
-          <Icon src={mute ? Icons.VolumeMute : Icons.VolumeHigh} size="50" />
-        </IconButton>
-        <Range
-          step={0.1}
-          min={0}
-          max={1}
-          values={[volume]}
-          onChange={(values) => setVolume(values[0])}
-          renderTrack={(params) => (
-            <div {...params.props}>
-              {params.children}
-              <ProgressBar
-                style={{ width: toRem(48) }}
-                variant="Secondary"
-                size="300"
-                min={0}
-                max={1}
-                value={volume}
-                radii="300"
-              />
-            </div>
-          )}
-          renderThumb={(params) => (
-            <Badge
-              size="300"
-              variant="Secondary"
-              fill="Solid"
-              radii="Pill"
-              outlined
-              {...params.props}
-              style={{
-                ...params.props.style,
-                zIndex: 0,
-              }}
-            />
-          )}
-        />
-      </>
-    ),
-    children: (
-      <audio controls={false} autoPlay ref={audioRef}>
-        {srcState.status === AsyncStatus.Success && <source src={srcState.data} type={mimeType} />}
-      </audio>
-    ),
-  });
-}

src/app/components/message/content/ThumbnailContent.tsx

@@ -1,34 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { IThumbnailContent } from '../../../../types/matrix/common';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { getFileSrcUrl } from './util';
-
-export type ThumbnailContentProps = {
-  info: IThumbnailContent;
-  renderImage: (src: string) => ReactNode;
-};
-export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
-  const mx = useMatrixClient();
-
-  const [thumbSrcState, loadThumbSrc] = useAsyncCallback(
-    useCallback(() => {
-      const thumbInfo = info.thumbnail_info;
-      const thumbMxcUrl = info.thumbnail_file?.url ?? info.thumbnail_url;
-      if (typeof thumbMxcUrl !== 'string' || typeof thumbInfo?.mimetype !== 'string') {
-        throw new Error('Failed to load thumbnail');
-      }
-      return getFileSrcUrl(
-        mx.mxcUrlToHttp(thumbMxcUrl) ?? '',
-        thumbInfo.mimetype,
-        info.thumbnail_file
-      );
-    }, [mx, info])
-  );
-
-  useEffect(() => {
-    loadThumbSrc();
-  }, [loadThumbSrc]);
-
-  return thumbSrcState.status === AsyncStatus.Success ? renderImage(thumbSrcState.data) : null;
-}

src/app/components/message/content/index.ts

@@ -1,7 +0,0 @@
-export * from './ThumbnailContent';
-export * from './ImageContent';
-export * from './VideoContent';
-export * from './AudioContent';
-export * from './FileContent';
-export * from './FallbackContent';
-export * from './EventContent';

src/app/components/message/content/style.css.ts

@@ -1,37 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { DefaultReset, config } from 'folds';
-
-export const RelativeBase = style([
-  DefaultReset,
-  {
-    position: 'relative',
-    width: '100%',
-    height: '100%',
-  },
-]);
-
-export const AbsoluteContainer = style([
-  DefaultReset,
-  {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-  },
-]);
-
-export const AbsoluteFooter = style([
-  DefaultReset,
-  {
-    position: 'absolute',
-    bottom: config.space.S100,
-    left: config.space.S100,
-    right: config.space.S100,
-  },
-]);
-
-export const ModalWide = style({
-  minWidth: '85vw',
-  minHeight: '90vh',
-});

src/app/components/message/index.ts

@@ -3,8 +3,5 @@ export * from './placeholder';
 export * from './Reaction';
 export * from './attachment';
 export * from './Reply';
-export * from './content';
+export * from './MessageContentFallback';
 export * from './Time';
-export * from './MsgTypeRenderers';
-export * from './FileHeader';
-export * from './RenderBody';

src/app/components/message/layout/layout.css.ts

@@ -61,7 +61,6 @@ const highlightAnime = keyframes({
 const HighlightVariant = styleVariants({
   true: {
     animation: `${highlightAnime} 2000ms ease-in-out`,
-    animationIterationCount: 'infinite',
   },
 });
 
@@ -144,14 +143,12 @@ export const BubbleContent = style({
 });
 
 export const Username = style({
+  cursor: 'pointer',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   selectors: {
-    'button&': {
-      cursor: 'pointer',
-    },
-    'button&:hover, button&:focus-visible': {
+    '&:hover, &:focus-visible': {
       textDecoration: 'underline',
     },
   },

src/app/components/nav/NavCategory.tsx

@@ -1,11 +0,0 @@
-import React, { ReactNode } from 'react';
-import { as } from 'folds';
-import classNames from 'classnames';
-import * as css from './styles.css';
-
-type NavCategoryProps = {
-  children: ReactNode;
-};
-export const NavCategory = as<'div', NavCategoryProps>(({ className, ...props }, ref) => (
-  <div className={classNames(css.NavCategory, className)} {...props} ref={ref} />
-));

src/app/components/nav/NavCategoryHeader.tsx

@@ -1,19 +0,0 @@
-import React, { ReactNode } from 'react';
-import classNames from 'classnames';
-import { Header, as } from 'folds';
-import * as css from './styles.css';
-
-export type NavCategoryHeaderProps = {
-  children: ReactNode;
-};
-export const NavCategoryHeader = as<'div', NavCategoryHeaderProps>(
-  ({ className, ...props }, ref) => (
-    <Header
-      className={classNames(css.NavCategoryHeader, className)}
-      variant="Background"
-      size="300"
-      {...props}
-      ref={ref}
-    />
-  )
-);

src/app/components/nav/NavEmptyLayout.tsx

@@ -1,40 +0,0 @@
-import { Box, config } from 'folds';
-import React, { ReactNode } from 'react';
-
-export function NavEmptyCenter({ children }: { children: ReactNode }) {
-  return (
-    <Box
-      style={{
-        padding: config.space.S500,
-      }}
-      grow="Yes"
-      direction="Column"
-      justifyContent="Center"
-    >
-      {children}
-    </Box>
-  );
-}
-
-type NavEmptyLayoutProps = {
-  icon?: ReactNode;
-  title?: ReactNode;
-  content?: ReactNode;
-  options?: ReactNode;
-};
-export function NavEmptyLayout({ icon, title, content, options }: NavEmptyLayoutProps) {
-  return (
-    <Box direction="Column" gap="400">
-      <Box direction="Column" alignItems="Center" gap="200">
-        {icon}
-      </Box>
-      <Box direction="Column" gap="100" alignItems="Center">
-        {title}
-        {content}
-      </Box>
-      <Box direction="Column" gap="200">
-        {options}
-      </Box>
-    </Box>
-  );
-}

src/app/components/nav/NavItem.tsx

@@ -1,33 +0,0 @@
-import classNames from 'classnames';
-import React, { ComponentProps, forwardRef } from 'react';
-import { Link } from 'react-router-dom';
-import { as } from 'folds';
-import * as css from './styles.css';
-
-export const NavItem = as<
-  'div',
-  {
-    highlight?: boolean;
-  } & css.RoomSelectorVariants
->(({ as: AsNavItem = 'div', className, highlight, variant, radii, children, ...props }, ref) => (
-  <AsNavItem
-    className={classNames(css.NavItem({ variant, radii }), className)}
-    data-highlight={highlight}
-    {...props}
-    ref={ref}
-  >
-    {children}
-  </AsNavItem>
-));
-
-export const NavLink = forwardRef<HTMLAnchorElement, ComponentProps<typeof Link>>(
-  ({ className, ...props }, ref) => (
-    <Link className={classNames(css.NavLink, className)} {...props} ref={ref} />
-  )
-);
-
-export const NavButton = as<'button'>(
-  ({ as: AsNavButton = 'button', className, ...props }, ref) => (
-    <AsNavButton className={classNames(css.NavLink, className)} {...props} ref={ref} />
-  )
-);

src/app/components/nav/NavItemContent.tsx

@@ -1,10 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { Text, as } from 'folds';
-import classNames from 'classnames';
-import * as css from './styles.css';
-
-export const NavItemContent = as<'p', ComponentProps<typeof Text>>(
-  ({ className, ...props }, ref) => (
-    <Text className={classNames(css.NavItemContent, className)} size="T400" {...props} ref={ref} />
-  )
-);

src/app/components/nav/NavItemOptions.tsx

@@ -1,17 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { Box, as } from 'folds';
-import classNames from 'classnames';
-import * as css from './styles.css';
-
-export const NavItemOptions = as<'div', ComponentProps<typeof Box>>(
-  ({ className, ...props }, ref) => (
-    <Box
-      className={classNames(css.NavItemOptions, className)}
-      alignItems="Center"
-      shrink="No"
-      gap="0"
-      {...props}
-      ref={ref}
-    />
-  )
-);

src/app/components/nav/index.ts

@@ -1,6 +0,0 @@
-export * from './NavCategory';
-export * from './NavCategoryHeader';
-export * from './NavEmptyLayout';
-export * from './NavItem';
-export * from './NavItemContent';
-export * from './NavItemOptions';

src/app/components/nav/styles.css.ts

@@ -1,127 +0,0 @@
-import { ComplexStyleRule, createVar, style } from '@vanilla-extract/css';
-import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { ContainerColor, DefaultReset, Disabled, RadiiVariant, color, config, toRem } from 'folds';
-
-export const NavCategory = style([
-  DefaultReset,
-  {
-    position: 'relative',
-  },
-]);
-
-export const NavCategoryHeader = style({
-  gap: config.space.S100,
-});
-
-export const NavLink = style({
-  color: 'inherit',
-  minWidth: 0,
-  display: 'flex',
-  alignItems: 'center',
-  cursor: 'pointer',
-  flexGrow: 1,
-  ':hover': {
-    textDecoration: 'unset',
-  },
-  ':focus': {
-    outline: 'none',
-  },
-});
-
-const Container = createVar();
-const ContainerHover = createVar();
-const ContainerActive = createVar();
-const ContainerLine = createVar();
-const OnContainer = createVar();
-
-const getVariant = (variant: ContainerColor): ComplexStyleRule => ({
-  vars: {
-    [Container]: color[variant].Container,
-    [ContainerHover]: color[variant].ContainerHover,
-    [ContainerActive]: color[variant].ContainerActive,
-    [ContainerLine]: color[variant].ContainerLine,
-    [OnContainer]: color[variant].OnContainer,
-  },
-});
-
-const NavItemBase = style({
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'start',
-  cursor: 'pointer',
-  backgroundColor: Container,
-  color: OnContainer,
-  outline: 'none',
-  minHeight: toRem(38),
-
-  selectors: {
-    '&:hover, &:focus-visible': {
-      backgroundColor: ContainerHover,
-    },
-    '&[data-hover=true]': {
-      backgroundColor: ContainerHover,
-    },
-    [`&:has(.${NavLink}:active)`]: {
-      backgroundColor: ContainerActive,
-    },
-    '&[aria-selected=true]': {
-      backgroundColor: ContainerActive,
-    },
-    [`&:has(.${NavLink}:focus-visible)`]: {
-      outline: `${config.borderWidth.B600} solid ${ContainerLine}`,
-      outlineOffset: `calc(-1 * ${config.borderWidth.B600})`,
-    },
-  },
-  '@supports': {
-    [`not selector(:has(.${NavLink}:focus-visible))`]: {
-      ':focus-within': {
-        outline: `${config.borderWidth.B600} solid ${ContainerLine}`,
-        outlineOffset: `calc(-1 * ${config.borderWidth.B600})`,
-      },
-    },
-  },
-});
-export const NavItem = recipe({
-  base: [DefaultReset, NavItemBase, Disabled],
-  variants: {
-    variant: {
-      Background: getVariant('Background'),
-      Surface: getVariant('Surface'),
-      SurfaceVariant: getVariant('SurfaceVariant'),
-      Primary: getVariant('Primary'),
-      Secondary: getVariant('Secondary'),
-      Success: getVariant('Success'),
-      Warning: getVariant('Warning'),
-      Critical: getVariant('Critical'),
-    },
-    radii: RadiiVariant,
-  },
-  defaultVariants: {
-    variant: 'Surface',
-    radii: '400',
-  },
-});
-
-export type RoomSelectorVariants = RecipeVariants<typeof NavItem>;
-export const NavItemContent = style({
-  paddingLeft: config.space.S200,
-  paddingRight: config.space.S300,
-  height: 'inherit',
-  minWidth: 0,
-  flexGrow: 1,
-  display: 'flex',
-  alignItems: 'center',
-
-  selectors: {
-    '&:hover': {
-      textDecoration: 'unset',
-    },
-    [`.${NavItemBase}[data-highlight=true] &`]: {
-      fontWeight: config.fontWeight.W600,
-    },
-  },
-});
-
-export const NavItemOptions = style({
-  paddingRight: config.space.S200,
-});

src/app/components/page/Page.tsx

@@ -1,146 +0,0 @@
-import React, { ComponentProps, MutableRefObject, ReactNode } from 'react';
-import { Box, Header, Line, Scroll, Text, as } from 'folds';
-import classNames from 'classnames';
-import { ContainerColor } from '../../styles/ContainerColor.css';
-import * as css from './style.css';
-import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-
-type PageRootProps = {
-  nav: ReactNode;
-  children: ReactNode;
-};
-
-export function PageRoot({ nav, children }: PageRootProps) {
-  const screenSize = useScreenSizeContext();
-
-  return (
-    <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
-      {nav}
-      {screenSize !== ScreenSize.Mobile && (
-        <Line variant="Background" size="300" direction="Vertical" />
-      )}
-      {children}
-    </Box>
-  );
-}
-
-type ClientDrawerLayoutProps = {
-  children: ReactNode;
-};
-export function PageNav({ children }: ClientDrawerLayoutProps) {
-  const screenSize = useScreenSizeContext();
-  const isMobile = screenSize === ScreenSize.Mobile;
-
-  return (
-    <Box
-      grow={isMobile ? 'Yes' : undefined}
-      className={css.PageNav}
-      shrink={isMobile ? 'Yes' : 'No'}
-    >
-      <Box grow="Yes" direction="Column">
-        {children}
-      </Box>
-    </Box>
-  );
-}
-
-export const PageNavHeader = as<'header'>(({ className, ...props }, ref) => (
-  <Header
-    className={classNames(css.PageNavHeader, className)}
-    variant="Background"
-    size="600"
-    {...props}
-    ref={ref}
-  />
-));
-
-export function PageNavContent({
-  scrollRef,
-  children,
-}: {
-  children: ReactNode;
-  scrollRef?: MutableRefObject<HTMLDivElement | null>;
-}) {
-  return (
-    <Box grow="Yes" direction="Column">
-      <Scroll
-        ref={scrollRef}
-        variant="Background"
-        direction="Vertical"
-        size="300"
-        hideTrack
-        visibility="Hover"
-      >
-        <div className={css.PageNavContent}>{children}</div>
-      </Scroll>
-    </Box>
-  );
-}
-
-export const Page = as<'div'>(({ className, ...props }, ref) => (
-  <Box
-    grow="Yes"
-    direction="Column"
-    className={classNames(ContainerColor({ variant: 'Surface' }), className)}
-    {...props}
-    ref={ref}
-  />
-));
-
-export const PageHeader = as<'div'>(({ className, ...props }, ref) => (
-  <Header
-    as="header"
-    size="600"
-    className={classNames(css.PageHeader, className)}
-    {...props}
-    ref={ref}
-  />
-));
-
-export const PageContent = as<'div'>(({ className, ...props }, ref) => (
-  <div className={classNames(css.PageContent, className)} {...props} ref={ref} />
-));
-
-export const PageHeroSection = as<'div', ComponentProps<typeof Box>>(
-  ({ className, ...props }, ref) => (
-    <Box
-      direction="Column"
-      className={classNames(css.PageHeroSection, className)}
-      {...props}
-      ref={ref}
-    />
-  )
-);
-
-export function PageHero({
-  icon,
-  title,
-  subTitle,
-  children,
-}: {
-  icon: ReactNode;
-  title: ReactNode;
-  subTitle: ReactNode;
-  children?: ReactNode;
-}) {
-  return (
-    <Box direction="Column" gap="400">
-      <Box direction="Column" alignItems="Center" gap="200">
-        {icon}
-      </Box>
-      <Box as="h2" direction="Column" gap="200" alignItems="Center">
-        <Text align="Center" size="H2">
-          {title}
-        </Text>
-        <Text align="Center" priority="400">
-          {subTitle}
-        </Text>
-      </Box>
-      {children}
-    </Box>
-  );
-}
-
-export const PageContentCenter = as<'div'>(({ className, ...props }, ref) => (
-  <div className={classNames(css.PageContentCenter, className)} {...props} ref={ref} />
-));

src/app/components/page/index.tsx

@@ -1 +0,0 @@
-export * from './Page';

src/app/components/page/style.css.ts

@@ -1,69 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { DefaultReset, color, config, toRem } from 'folds';
-
-export const PageNav = style({
-  width: toRem(280),
-});
-
-export const PageNavHeader = style({
-  padding: `0 ${config.space.S200} 0 ${config.space.S300}`,
-  flexShrink: 0,
-  borderBottomWidth: 1,
-
-  selectors: {
-    'button&': {
-      cursor: 'pointer',
-    },
-    'button&[aria-pressed=true]': {
-      backgroundColor: color.Background.ContainerActive,
-    },
-    'button&:hover, button&:focus-visible': {
-      backgroundColor: color.Background.ContainerHover,
-    },
-    'button&:active': {
-      backgroundColor: color.Background.ContainerActive,
-    },
-  },
-});
-
-export const PageNavContent = style({
-  minHeight: '100%',
-  padding: config.space.S200,
-  paddingRight: 0,
-  paddingBottom: config.space.S700,
-});
-
-export const PageHeader = style({
-  paddingLeft: config.space.S400,
-  paddingRight: config.space.S200,
-  borderBottomWidth: config.borderWidth.B300,
-});
-
-export const PageContent = style([
-  DefaultReset,
-  {
-    paddingTop: config.space.S400,
-    paddingLeft: config.space.S400,
-    paddingRight: 0,
-    paddingBottom: toRem(100),
-  },
-]);
-
-export const PageHeroSection = style([
-  DefaultReset,
-  {
-    padding: '40px 0',
-    maxWidth: toRem(466),
-    width: '100%',
-    margin: 'auto',
-  },
-]);
-
-export const PageContentCenter = style([
-  DefaultReset,
-  {
-    maxWidth: toRem(964),
-    width: '100%',
-    margin: 'auto',
-  },
-]);

src/app/components/room-avatar/RoomAvatar.css.ts

@@ -1,14 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { color } from 'folds';
-
-export const RoomAvatar = style({
-  backgroundColor: color.Secondary.Container,
-  color: color.Secondary.OnContainer,
-  textTransform: 'capitalize',
-
-  selectors: {
-    '&[data-image-loaded="true"]': {
-      backgroundColor: 'transparent',
-    },
-  },
-});

src/app/components/room-avatar/RoomAvatar.tsx

@@ -1,56 +0,0 @@
-import { JoinRule } from 'matrix-js-sdk';
-import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
-import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
-import * as css from './RoomAvatar.css';
-import { joinRuleToIconSrc } from '../../utils/room';
-import colorMXID from '../../../util/colorMXID';
-
-type RoomAvatarProps = {
-  roomId: string;
-  src?: string;
-  alt?: string;
-  renderFallback: () => ReactNode;
-};
-export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps) {
-  const [error, setError] = useState(false);
-
-  const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
-    evt.currentTarget.setAttribute('data-image-loaded', 'true');
-  };
-
-  if (!src || error) {
-    return (
-      <AvatarFallback
-        style={{ backgroundColor: colorMXID(roomId ?? ''), color: color.Surface.Container }}
-        className={css.RoomAvatar}
-      >
-        {renderFallback()}
-      </AvatarFallback>
-    );
-  }
-
-  return (
-    <AvatarImage
-      className={css.RoomAvatar}
-      src={src}
-      alt={alt}
-      onError={() => setError(true)}
-      onLoad={handleLoad}
-      draggable={false}
-    />
-  );
-}
-
-export const RoomIcon = forwardRef<
-  SVGSVGElement,
-  Omit<ComponentProps<typeof Icon>, 'src'> & {
-    joinRule: JoinRule;
-    space?: boolean;
-  }
->(({ joinRule, space, ...props }, ref) => (
-  <Icon
-    src={joinRuleToIconSrc(Icons, joinRule, space || false) ?? Icons.Hash}
-    {...props}
-    ref={ref}
-  />
-));

src/app/components/room-avatar/index.ts

@@ -1 +0,0 @@
-export * from './RoomAvatar';

src/app/components/room-card/RoomCard.tsx

@@ -1,314 +0,0 @@
-import React, { ReactNode, useCallback, useRef, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
-import {
-  Avatar,
-  Badge,
-  Box,
-  Button,
-  Dialog,
-  Icon,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-  as,
-  color,
-  config,
-} from 'folds';
-import classNames from 'classnames';
-import FocusTrap from 'focus-trap-react';
-import * as css from './style.css';
-import { RoomAvatar } from '../room-avatar';
-import { getMxIdLocalPart } from '../../utils/matrix';
-import { nameInitials } from '../../utils/common';
-import { millify } from '../../plugins/millify';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { onEnterOrSpace } from '../../utils/keyboard';
-import { RoomType, StateEvent } from '../../../types/matrix/room';
-import { useJoinedRoomId } from '../../hooks/useJoinedRoomId';
-import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
-import { getRoomAvatarUrl, getStateEvent } from '../../utils/room';
-import { useStateEventCallback } from '../../hooks/useStateEventCallback';
-
-type GridColumnCount = '1' | '2' | '3';
-const getGridColumnCount = (gridWidth: number): GridColumnCount => {
-  if (gridWidth <= 498) return '1';
-  if (gridWidth <= 748) return '2';
-  return '3';
-};
-
-const setGridColumnCount = (grid: HTMLElement, count: GridColumnCount): void => {
-  grid.style.setProperty('grid-template-columns', `repeat(${count}, 1fr)`);
-};
-
-export function RoomCardGrid({ children }: { children: ReactNode }) {
-  const gridRef = useRef<HTMLDivElement>(null);
-
-  useElementSizeObserver(
-    useCallback(() => gridRef.current, []),
-    useCallback((width, _, target) => setGridColumnCount(target, getGridColumnCount(width)), [])
-  );
-
-  return (
-    <Box className={css.CardGrid} direction="Row" gap="400" wrap="Wrap" ref={gridRef}>
-      {children}
-    </Box>
-  );
-}
-
-export const RoomCardBase = as<'div'>(({ className, ...props }, ref) => (
-  <Box
-    direction="Column"
-    gap="300"
-    className={classNames(css.RoomCardBase, className)}
-    {...props}
-    ref={ref}
-  />
-));
-
-export const RoomCardName = as<'h6'>(({ ...props }, ref) => (
-  <Text as="h6" size="H6" truncate {...props} ref={ref} />
-));
-
-export const RoomCardTopic = as<'p'>(({ className, ...props }, ref) => (
-  <Text
-    as="p"
-    size="T200"
-    className={classNames(css.RoomCardTopic, className)}
-    {...props}
-    priority="400"
-    ref={ref}
-  />
-));
-
-function ErrorDialog({
-  title,
-  message,
-  children,
-}: {
-  title: string;
-  message: string;
-  children: (openError: () => void) => ReactNode;
-}) {
-  const [viewError, setViewError] = useState(false);
-  const closeError = () => setViewError(false);
-  const openError = () => setViewError(true);
-
-  return (
-    <>
-      {children(openError)}
-      <Overlay open={viewError} backdrop={<OverlayBackdrop />}>
-        <OverlayCenter>
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              clickOutsideDeactivates: true,
-              onDeactivate: closeError,
-            }}
-          >
-            <Dialog variant="Surface">
-              <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-                <Box direction="Column" gap="100">
-                  <Text>{title}</Text>
-                  <Text style={{ color: color.Critical.Main }} size="T300" priority="400">
-                    {message}
-                  </Text>
-                </Box>
-                <Button size="400" variant="Secondary" fill="Soft" onClick={closeError}>
-                  <Text size="B400">Cancel</Text>
-                </Button>
-              </Box>
-            </Dialog>
-          </FocusTrap>
-        </OverlayCenter>
-      </Overlay>
-    </>
-  );
-}
-
-type RoomCardProps = {
-  roomIdOrAlias: string;
-  allRooms: string[];
-  avatarUrl?: string;
-  name?: string;
-  topic?: string;
-  memberCount?: number;
-  roomType?: string;
-  onView?: (roomId: string) => void;
-  renderTopicViewer: (name: string, topic: string, requestClose: () => void) => ReactNode;
-};
-
-export const RoomCard = as<'div', RoomCardProps>(
-  (
-    {
-      roomIdOrAlias,
-      allRooms,
-      avatarUrl,
-      name,
-      topic,
-      memberCount,
-      roomType,
-      onView,
-      renderTopicViewer,
-      ...props
-    },
-    ref
-  ) => {
-    const mx = useMatrixClient();
-    const joinedRoomId = useJoinedRoomId(allRooms, roomIdOrAlias);
-    const joinedRoom = mx.getRoom(joinedRoomId);
-    const [topicEvent, setTopicEvent] = useState(() =>
-      joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomTopic) : undefined
-    );
-
-    const fallbackName = getMxIdLocalPart(roomIdOrAlias) ?? roomIdOrAlias;
-    const fallbackTopic = roomIdOrAlias;
-
-    const avatar = joinedRoom
-      ? getRoomAvatarUrl(mx, joinedRoom, 96)
-      : avatarUrl && mx.mxcUrlToHttp(avatarUrl, 96, 96, 'crop');
-
-    const roomName = joinedRoom?.name || name || fallbackName;
-    const roomTopic =
-      (topicEvent?.getContent().topic as string) || undefined || topic || fallbackTopic;
-    const joinedMemberCount = joinedRoom?.getJoinedMemberCount() ?? memberCount;
-
-    useStateEventCallback(
-      mx,
-      useCallback(
-        (event) => {
-          if (
-            joinedRoom &&
-            event.getRoomId() === joinedRoom.roomId &&
-            event.getType() === StateEvent.RoomTopic
-          ) {
-            setTopicEvent(getStateEvent(joinedRoom, StateEvent.RoomTopic));
-          }
-        },
-        [joinedRoom]
-      )
-    );
-
-    const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
-      useCallback(() => mx.joinRoom(roomIdOrAlias), [mx, roomIdOrAlias])
-    );
-    const joining =
-      joinState.status === AsyncStatus.Loading || joinState.status === AsyncStatus.Success;
-
-    const [viewTopic, setViewTopic] = useState(false);
-    const closeTopic = () => setViewTopic(false);
-    const openTopic = () => setViewTopic(true);
-
-    return (
-      <RoomCardBase {...props} ref={ref}>
-        <Box gap="200" justifyContent="SpaceBetween">
-          <Avatar size="500">
-            <RoomAvatar
-              roomId={roomIdOrAlias}
-              src={avatar ?? undefined}
-              alt={roomIdOrAlias}
-              renderFallback={() => (
-                <Text as="span" size="H3">
-                  {nameInitials(roomName)}
-                </Text>
-              )}
-            />
-          </Avatar>
-          {(roomType === RoomType.Space || joinedRoom?.isSpaceRoom()) && (
-            <Badge variant="Secondary" fill="Soft" outlined>
-              <Text size="L400">Space</Text>
-            </Badge>
-          )}
-        </Box>
-        <Box grow="Yes" direction="Column" gap="100">
-          <RoomCardName>{roomName}</RoomCardName>
-          <RoomCardTopic onClick={openTopic} onKeyDown={onEnterOrSpace(openTopic)} tabIndex={0}>
-            {roomTopic}
-          </RoomCardTopic>
-
-          <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  clickOutsideDeactivates: true,
-                  onDeactivate: closeTopic,
-                }}
-              >
-                {renderTopicViewer(roomName, roomTopic, closeTopic)}
-              </FocusTrap>
-            </OverlayCenter>
-          </Overlay>
-        </Box>
-        {typeof joinedMemberCount === 'number' && (
-          <Box gap="100">
-            <Icon size="50" src={Icons.User} />
-            <Text size="T200">{`${millify(joinedMemberCount)} Members`}</Text>
-          </Box>
-        )}
-        {typeof joinedRoomId === 'string' && (
-          <Button
-            onClick={onView ? () => onView(joinedRoomId) : undefined}
-            variant="Secondary"
-            fill="Soft"
-            size="300"
-          >
-            <Text size="B300" truncate>
-              View
-            </Text>
-          </Button>
-        )}
-        {typeof joinedRoomId !== 'string' && joinState.status !== AsyncStatus.Error && (
-          <Button
-            onClick={join}
-            variant="Secondary"
-            size="300"
-            disabled={joining}
-            before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
-          >
-            <Text size="B300" truncate>
-              {joining ? 'Joining' : 'Join'}
-            </Text>
-          </Button>
-        )}
-        {typeof joinedRoomId !== 'string' && joinState.status === AsyncStatus.Error && (
-          <Box gap="200">
-            <Button
-              onClick={join}
-              className={css.ActionButton}
-              variant="Critical"
-              fill="Solid"
-              size="300"
-            >
-              <Text size="B300" truncate>
-                Retry
-              </Text>
-            </Button>
-            <ErrorDialog
-              title="Join Error"
-              message={joinState.error.message || 'Failed to join. Unknown Error.'}
-            >
-              {(openError) => (
-                <Button
-                  onClick={openError}
-                  className={css.ActionButton}
-                  variant="Critical"
-                  fill="Soft"
-                  outlined
-                  size="300"
-                >
-                  <Text size="B300" truncate>
-                    View Error
-                  </Text>
-                </Button>
-              )}
-            </ErrorDialog>
-          </Box>
-        )}
-      </RoomCardBase>
-    );
-  }
-);

src/app/components/room-card/index.ts

@@ -1 +0,0 @@
-export * from './RoomCard';

src/app/components/room-card/style.css.ts

@@ -1,36 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { DefaultReset, config } from 'folds';
-import { ContainerColor } from '../../styles/ContainerColor.css';
-
-export const CardGrid = style({
-  display: 'grid',
-  gridTemplateColumns: 'repeat(3, 1fr)',
-  gap: config.space.S400,
-});
-
-export const RoomCardBase = style([
-  DefaultReset,
-  ContainerColor({ variant: 'SurfaceVariant' }),
-  {
-    padding: config.space.S500,
-    borderRadius: config.radii.R500,
-  },
-]);
-
-export const RoomCardTopic = style({
-  minHeight: `calc(3 * ${config.lineHeight.T200})`,
-  display: '-webkit-box',
-  WebkitLineClamp: 3,
-  WebkitBoxOrient: 'vertical',
-  overflow: 'hidden',
-  cursor: 'pointer',
-
-  ':hover': {
-    textDecoration: 'underline',
-  },
-});
-
-export const ActionButton = style({
-  flex: '1 1 0',
-  minWidth: 1,
-});

src/app/components/room-intro/RoomIntro.tsx

@@ -1,19 +1,14 @@
 import React, { useCallback } from 'react';
-import { Avatar, Box, Button, Spinner, Text, as } from 'folds';
+import { Avatar, AvatarFallback, AvatarImage, Box, Button, Spinner, Text, as, color } from 'folds';
 import { Room } from 'matrix-js-sdk';
-import { useAtomValue } from 'jotai';
-import { openInviteUser } from '../../../client/action/navigation';
+import { openInviteUser, selectRoom } from '../../../client/action/navigation';
+import { useStateEvent } from '../../hooks/useStateEvent';
 import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
 import { getMemberDisplayName, getStateEvent } from '../../utils/room';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { RoomAvatar } from '../room-avatar';
-import { nameInitials } from '../../utils/common';
-import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
-import { mDirectAtom } from '../../state/mDirectList';
 
 export type RoomIntroProps = {
   room: Room;
@@ -21,21 +16,21 @@ export type RoomIntroProps = {
 
 export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {
   const mx = useMatrixClient();
-  const { navigateRoom } = useRoomNavigate();
-  const mDirects = useAtomValue(mDirectAtom);
-
   const createEvent = getStateEvent(room, StateEvent.RoomCreate);
-  const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
-  const name = useRoomName(room);
-  const topic = useRoomTopic(room);
-  const avatarHttpUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc) : undefined;
-
+  const avatarEvent = useStateEvent(room, StateEvent.RoomAvatar);
+  const nameEvent = useStateEvent(room, StateEvent.RoomName);
+  const topicEvent = useStateEvent(room, StateEvent.RoomTopic);
   const createContent = createEvent?.getContent<IRoomCreateContent>();
+
   const ts = createEvent?.getTs();
   const creatorId = createEvent?.getSender();
   const creatorName =
     creatorId && (getMemberDisplayName(room, creatorId) ?? getMxIdLocalPart(creatorId));
   const prevRoomId = createContent?.predecessor?.room_id;
+  const avatarMxc = (avatarEvent?.getContent().url as string) || undefined;
+  const avatarHttpUrl = avatarMxc ? mx.mxcUrlToHttp(avatarMxc) : undefined;
+  const name = (nameEvent?.getContent().name || room.name) as string;
+  const topic = (topicEvent?.getContent().topic as string) || undefined;
 
   const [prevRoomState, joinPrevRoom] = useAsyncCallback(
     useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
@@ -45,12 +40,18 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
     <Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
       <Box>
         <Avatar size="500">
-          <RoomAvatar
-            roomId={room.roomId}
-            src={avatarHttpUrl ?? undefined}
-            alt={name}
-            renderFallback={() => <Text size="H2">{nameInitials(name)}</Text>}
-          />
+          {avatarHttpUrl ? (
+            <AvatarImage src={avatarHttpUrl} alt={name} />
+          ) : (
+            <AvatarFallback
+              style={{
+                backgroundColor: color.SurfaceVariant.Container,
+                color: color.SurfaceVariant.OnContainer,
+              }}
+            >
+              <Text size="H2">{name[0]}</Text>
+            </AvatarFallback>
+          )}
         </Avatar>
       </Box>
       <Box direction="Column" gap="300">
@@ -81,7 +82,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
           {typeof prevRoomId === 'string' &&
             (mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
               <Button
-                onClick={() => navigateRoom(prevRoomId)}
+                onClick={() => selectRoom(prevRoomId)}
                 variant="Success"
                 size="300"
                 fill="Soft"

src/app/components/room-topic-viewer/RoomTopicViewer.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
-import classNames from 'classnames';
-import Linkify from 'linkify-react';
-import * as css from './style.css';
-import { LINKIFY_OPTS, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
-
-export const RoomTopicViewer = as<
-  'div',
-  {
-    name: string;
-    topic: string;
-    requestClose: () => void;
-  }
->(({ name, topic, requestClose, className, ...props }, ref) => (
-  <Modal
-    size="300"
-    flexHeight
-    className={classNames(css.ModalFlex, className)}
-    {...props}
-    ref={ref}
-  >
-    <Header className={css.ModalHeader} variant="Surface" size="500">
-      <Box grow="Yes">
-        <Text size="H4" truncate>
-          {name}
-        </Text>
-      </Box>
-      <IconButton size="300" onClick={requestClose} radii="300">
-        <Icon src={Icons.Cross} />
-      </IconButton>
-    </Header>
-    <Scroll className={css.ModalScroll} size="300" hideTrack>
-      <Box className={css.ModalContent} direction="Column" gap="100">
-        <Text size="T300" className={css.ModalTopic} priority="400">
-          <Linkify options={LINKIFY_OPTS}>{scaleSystemEmoji(topic)}</Linkify>
-        </Text>
-      </Box>
-    </Scroll>
-  </Modal>
-));

src/app/components/room-topic-viewer/index.ts

@@ -1 +0,0 @@
-export * from './RoomTopicViewer';

src/app/components/room-topic-viewer/style.css.ts

@@ -1,23 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
-
-export const ModalFlex = style({
-  display: 'flex',
-  flexDirection: 'column',
-});
-export const ModalHeader = style({
-  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-  borderBottomWidth: config.borderWidth.B300,
-});
-export const ModalScroll = style({
-  flexGrow: 1,
-});
-export const ModalContent = style({
-  padding: config.space.S400,
-  paddingRight: config.space.S200,
-  paddingBottom: config.space.S700,
-});
-export const ModalTopic = style({
-  whiteSpace: 'pre-wrap',
-  wordBreak: 'break-word',
-});

src/app/components/scroll-top-container/ScrollTopContainer.tsx

@@ -1,39 +0,0 @@
-import React, { RefObject, useCallback, useState } from 'react';
-import { Box, as } from 'folds';
-import classNames from 'classnames';
-import * as css from './style.css';
-import {
-  getIntersectionObserverEntry,
-  useIntersectionObserver,
-} from '../../hooks/useIntersectionObserver';
-
-export const ScrollTopContainer = as<
-  'div',
-  {
-    scrollRef?: RefObject<HTMLElement>;
-    anchorRef: RefObject<HTMLElement>;
-    onVisibilityChange?: (onTop: boolean) => void;
-  }
->(({ className, scrollRef, anchorRef, onVisibilityChange, ...props }, ref) => {
-  const [onTop, setOnTop] = useState(true);
-
-  useIntersectionObserver(
-    useCallback(
-      (intersectionEntries) => {
-        if (!anchorRef.current) return;
-        const entry = getIntersectionObserverEntry(anchorRef.current, intersectionEntries);
-        if (entry) {
-          setOnTop(entry.isIntersecting);
-          onVisibilityChange?.(entry.isIntersecting);
-        }
-      },
-      [anchorRef, onVisibilityChange]
-    ),
-    useCallback(() => ({ root: scrollRef?.current }), [scrollRef]),
-    useCallback(() => anchorRef.current, [anchorRef])
-  );
-
-  if (onTop) return null;
-
-  return <Box className={classNames(css.ScrollTopContainer, className)} {...props} ref={ref} />;
-});

src/app/components/scroll-top-container/index.ts

@@ -1 +0,0 @@
-export * from './ScrollTopContainer';

src/app/components/scroll-top-container/style.css.ts

@@ -1,20 +0,0 @@
-import { keyframes, style } from '@vanilla-extract/css';
-import { config } from 'folds';
-
-const ScrollContainerAnime = keyframes({
-  '0%': {
-    transform: `translate(-50%, -100%) scale(0)`,
-  },
-  '100%': {
-    transform: `translate(-50%, 0) scale(1)`,
-  },
-});
-
-export const ScrollTopContainer = style({
-  position: 'absolute',
-  top: config.space.S200,
-  left: '50%',
-  transform: 'translateX(-50%)',
-  zIndex: config.zIndex.Z100,
-  animation: `${ScrollContainerAnime} 100ms`,
-});

src/app/components/sequence-card/SequenceCard.tsx

@@ -1,18 +0,0 @@
-import React, { ComponentProps } from 'react';
-import { Box, as } from 'folds';
-import classNames from 'classnames';
-import { ContainerColor, ContainerColorVariants } from '../../styles/ContainerColor.css';
-import * as css from './style.css';
-
-export const SequenceCard = as<
-  'div',
-  ComponentProps<typeof Box> & ContainerColorVariants & css.SequenceCardVariants
->(({ className, variant, firstChild, lastChild, outlined, ...props }, ref) => (
-  <Box
-    className={classNames(css.SequenceCard({ outlined }), ContainerColor({ variant }), className)}
-    data-first-child={firstChild}
-    data-last-child={lastChild}
-    {...props}
-    ref={ref}
-  />
-));

src/app/components/sequence-card/index.ts

@@ -1 +0,0 @@
-export * from './SequenceCard';

src/app/components/sequence-card/style.css.ts

@@ -1,52 +0,0 @@
-import { createVar } from '@vanilla-extract/css';
-import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { config } from 'folds';
-
-const outlinedWidth = createVar('0');
-export const SequenceCard = recipe({
-  base: {
-    vars: {
-      [outlinedWidth]: '0',
-    },
-    borderStyle: 'solid',
-    borderWidth: outlinedWidth,
-    borderBottomWidth: 0,
-    selectors: {
-      '&:first-child, :not(&) + &': {
-        borderTopLeftRadius: config.radii.R400,
-        borderTopRightRadius: config.radii.R400,
-      },
-      '&:last-child, &:not(:has(+&))': {
-        borderBottomLeftRadius: config.radii.R400,
-        borderBottomRightRadius: config.radii.R400,
-        borderBottomWidth: outlinedWidth,
-      },
-      [`&[data-first-child="true"]`]: {
-        borderTopLeftRadius: config.radii.R400,
-        borderTopRightRadius: config.radii.R400,
-      },
-      [`&[data-first-child="false"]`]: {
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0,
-      },
-      [`&[data-last-child="true"]`]: {
-        borderBottomLeftRadius: config.radii.R400,
-        borderBottomRightRadius: config.radii.R400,
-      },
-      [`&[data-last-child="false"]`]: {
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0,
-      },
-    },
-  },
-  variants: {
-    outlined: {
-      true: {
-        vars: {
-          [outlinedWidth]: config.borderWidth.B300,
-        },
-      },
-    },
-  },
-});
-export type SequenceCardVariants = RecipeVariants<typeof SequenceCard>;

src/app/components/sidebar/Sidebar.css.ts

@@ -1,249 +0,0 @@
-import { createVar, style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { color, config, DefaultReset, Disabled, FocusOutline, toRem } from 'folds';
-import { ContainerColor } from '../../styles/ContainerColor.css';
-
-export const Sidebar = style([
-  DefaultReset,
-  {
-    width: toRem(66),
-    backgroundColor: color.Background.Container,
-    borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
-
-    display: 'flex',
-    flexDirection: 'column',
-    color: color.Background.OnContainer,
-  },
-]);
-
-export const SidebarStack = style([
-  DefaultReset,
-  {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    alignItems: 'center',
-    gap: config.space.S300,
-    padding: `${config.space.S300} 0`,
-  },
-]);
-
-const DropLineDist = createVar();
-export const DropTarget = style({
-  vars: {
-    [DropLineDist]: toRem(-8),
-  },
-
-  selectors: {
-    '&[data-inside-folder=true]': {
-      vars: {
-        [DropLineDist]: toRem(-6),
-      },
-    },
-    '&[data-drop-child=true]': {
-      outline: `${config.borderWidth.B700} solid ${color.Success.Main}`,
-      borderRadius: config.radii.R400,
-    },
-    '&[data-drop-above=true]::after, &[data-drop-below=true]::after': {
-      content: '',
-      display: 'block',
-      position: 'absolute',
-      left: toRem(0),
-      width: '100%',
-      height: config.borderWidth.B700,
-      backgroundColor: color.Success.Main,
-    },
-    '&[data-drop-above=true]::after': {
-      top: DropLineDist,
-    },
-    '&[data-drop-below=true]::after': {
-      bottom: DropLineDist,
-    },
-  },
-});
-
-const PUSH_X = 2;
-export const SidebarItem = recipe({
-  base: [
-    DefaultReset,
-    {
-      minWidth: toRem(42),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      position: 'relative',
-      transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
-
-      selectors: {
-        '&:hover': {
-          transform: `translateX(${toRem(PUSH_X)})`,
-        },
-        '&::before': {
-          content: '',
-          display: 'none',
-          position: 'absolute',
-          left: toRem(-11.5 - PUSH_X),
-          width: toRem(3 + PUSH_X),
-          height: toRem(16),
-          borderRadius: `0 ${toRem(4)} ${toRem(4)} 0`,
-          background: 'CurrentColor',
-          transition: 'height 200ms linear',
-        },
-        '&:hover::before': {
-          display: 'block',
-          width: toRem(3),
-        },
-      },
-    },
-    Disabled,
-    DropTarget,
-  ],
-  variants: {
-    active: {
-      true: {
-        selectors: {
-          '&::before': {
-            display: 'block',
-            height: toRem(24),
-          },
-          '&:hover::before': {
-            width: toRem(3 + PUSH_X),
-          },
-        },
-      },
-    },
-  },
-});
-export type SidebarItemVariants = RecipeVariants<typeof SidebarItem>;
-
-export const SidebarItemBadge = recipe({
-  base: [
-    DefaultReset,
-    {
-      pointerEvents: 'none',
-      position: 'absolute',
-      zIndex: 1,
-      lineHeight: 0,
-    },
-  ],
-  variants: {
-    hasCount: {
-      true: {
-        top: toRem(-6),
-        left: toRem(-6),
-      },
-      false: {
-        top: toRem(-2),
-        left: toRem(-2),
-      },
-    },
-  },
-  defaultVariants: {
-    hasCount: false,
-  },
-});
-export type SidebarItemBadgeVariants = RecipeVariants<typeof SidebarItemBadge>;
-
-export const SidebarAvatar = recipe({
-  base: [
-    {
-      selectors: {
-        'button&': {
-          cursor: 'pointer',
-        },
-      },
-    },
-  ],
-  variants: {
-    size: {
-      '200': {
-        width: toRem(16),
-        height: toRem(16),
-        fontSize: toRem(10),
-        lineHeight: config.lineHeight.T200,
-        letterSpacing: config.letterSpacing.T200,
-      },
-      '300': {
-        width: toRem(34),
-        height: toRem(34),
-      },
-      '400': {
-        width: toRem(42),
-        height: toRem(42),
-      },
-    },
-    outlined: {
-      true: {
-        border: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
-      },
-    },
-  },
-  defaultVariants: {
-    size: '400',
-  },
-});
-export type SidebarAvatarVariants = RecipeVariants<typeof SidebarAvatar>;
-
-export const SidebarFolder = recipe({
-  base: [
-    ContainerColor({ variant: 'Background' }),
-    {
-      padding: config.space.S100,
-      width: toRem(42),
-      minHeight: toRem(42),
-      display: 'flex',
-      flexWrap: 'wrap',
-      outline: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
-      position: 'relative',
-
-      selectors: {
-        'button&': {
-          cursor: 'pointer',
-        },
-      },
-    },
-    FocusOutline,
-    DropTarget,
-  ],
-  variants: {
-    state: {
-      Close: {
-        gap: toRem(2),
-        borderRadius: config.radii.R400,
-      },
-      Open: {
-        paddingLeft: 0,
-        paddingRight: 0,
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: config.space.S200,
-        borderRadius: config.radii.R500,
-      },
-    },
-  },
-  defaultVariants: {
-    state: 'Close',
-  },
-});
-export type SidebarFolderVariants = RecipeVariants<typeof SidebarFolder>;
-
-export const SidebarFolderDropTarget = recipe({
-  base: {
-    width: '100%',
-    height: toRem(8),
-    position: 'absolute',
-    left: 0,
-  },
-  variants: {
-    position: {
-      Top: {
-        top: toRem(-4),
-      },
-      Bottom: {
-        bottom: toRem(-4),
-      },
-    },
-  },
-});
-export type SidebarFolderDropTargetVariants = RecipeVariants<typeof SidebarFolderDropTarget>;

src/app/components/sidebar/Sidebar.tsx

@@ -1,8 +0,0 @@
-import classNames from 'classnames';
-import { as } from 'folds';
-import React from 'react';
-import * as css from './Sidebar.css';
-
-export const Sidebar = as<'div'>(({ as: AsSidebar = 'div', className, ...props }, ref) => (
-  <AsSidebar className={classNames(css.Sidebar, className)} {...props} ref={ref} />
-));

src/app/components/sidebar/SidebarContent.tsx

@@ -1,19 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Box } from 'folds';
-
-type SidebarContentProps = {
-  scrollable: ReactNode;
-  sticky: ReactNode;
-};
-export function SidebarContent({ scrollable, sticky }: SidebarContentProps) {
-  return (
-    <>
-      <Box direction="Column" grow="Yes">
-        {scrollable}
-      </Box>
-      <Box direction="Column" shrink="No">
-        {sticky}
-      </Box>
-    </>
-  );
-}

src/app/components/sidebar/SidebarItem.tsx

@@ -1,81 +0,0 @@
-import classNames from 'classnames';
-import { as, Avatar, Text, Tooltip, TooltipProvider, toRem } from 'folds';
-import React, { ComponentProps, ReactNode, RefCallback } from 'react';
-import * as css from './Sidebar.css';
-
-export const SidebarItem = as<'div', css.SidebarItemVariants>(
-  ({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
-    <AsSidebarAvatarBox
-      className={classNames(css.SidebarItem({ active }), className)}
-      {...props}
-      ref={ref}
-    />
-  )
-);
-
-export const SidebarItemBadge = as<'div', css.SidebarItemBadgeVariants>(
-  ({ as: AsSidebarBadgeBox = 'div', className, hasCount, ...props }, ref) => (
-    <AsSidebarBadgeBox
-      className={classNames(css.SidebarItemBadge({ hasCount }), className)}
-      {...props}
-      ref={ref}
-    />
-  )
-);
-
-export function SidebarItemTooltip({
-  tooltip,
-  children,
-}: {
-  tooltip?: ReactNode | string;
-  children: (triggerRef: RefCallback<HTMLElement | SVGElement>) => ReactNode;
-}) {
-  if (!tooltip) {
-    return children(() => undefined);
-  }
-
-  return (
-    <TooltipProvider
-      delay={400}
-      position="Right"
-      tooltip={
-        <Tooltip style={{ maxWidth: toRem(280) }}>
-          <Text size="H5">{tooltip}</Text>
-        </Tooltip>
-      }
-    >
-      {children}
-    </TooltipProvider>
-  );
-}
-
-export const SidebarAvatar = as<'div', css.SidebarAvatarVariants & ComponentProps<typeof Avatar>>(
-  ({ className, size, outlined, radii, ...props }, ref) => (
-    <Avatar
-      className={classNames(css.SidebarAvatar({ size, outlined }), className)}
-      radii={radii}
-      {...props}
-      ref={ref}
-    />
-  )
-);
-
-export const SidebarFolder = as<'div', css.SidebarFolderVariants>(
-  ({ as: AsSidebarFolder = 'div', className, state, ...props }, ref) => (
-    <AsSidebarFolder
-      className={classNames(css.SidebarFolder({ state }), className)}
-      {...props}
-      ref={ref}
-    />
-  )
-);
-
-export const SidebarFolderDropTarget = as<'div', css.SidebarFolderDropTargetVariants>(
-  ({ as: AsSidebarFolderDropTarget = 'div', className, position, ...props }, ref) => (
-    <AsSidebarFolderDropTarget
-      className={classNames(css.SidebarFolderDropTarget({ position }), className)}
-      {...props}
-      ref={ref}
-    />
-  )
-);

src/app/components/sidebar/SidebarStack.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { as } from 'folds';
-import * as css from './Sidebar.css';
-
-export const SidebarStack = as<'div'>(
-  ({ as: AsSidebarStack = 'div', className, ...props }, ref) => (
-    <AsSidebarStack className={classNames(css.SidebarStack, className)} {...props} ref={ref} />
-  )
-);

src/app/components/sidebar/SidebarStackSeparator.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Line, toRem } from 'folds';
-
-export function SidebarStackSeparator() {
-  return (
-    <Line
-      role="separator"
-      style={{ width: toRem(24), margin: '0 auto' }}
-      variant="Background"
-      size="300"
-    />
-  );
-}

src/app/components/sidebar/index.ts

@@ -1,5 +0,0 @@
-export * from './Sidebar';
-export * from './SidebarItem';
-export * from './SidebarContent';
-export * from './SidebarStack';
-export * from './SidebarStackSeparator';

src/app/components/typing-indicator/TypingIndicator.css.ts

@@ -17,14 +17,10 @@ export const TypingDot = recipe({
       backgroundColor: 'currentColor',
       borderRadius: '50%',
       transform: 'translateY(15%)',
+      animation: `${TypingDotAnime} 0.6s infinite alternate`,
     },
   ],
   variants: {
-    animated: {
-      true: {
-        animation: `${TypingDotAnime} 0.6s infinite alternate`,
-      },
-    },
     size: {
       '300': {
         width: toRem(4),
@@ -49,6 +45,5 @@ export const TypingDot = recipe({
   },
   defaultVariants: {
     size: '400',
-    animated: true,
   },
 });

src/app/components/typing-indicator/TypingIndicator.tsx

@@ -4,22 +4,19 @@ import * as css from './TypingIndicator.css';
 
 export type TypingIndicatorProps = {
   size?: '300' | '400';
-  disableAnimation?: boolean;
 };
 
-export const TypingIndicator = as<'div', TypingIndicatorProps>(
-  ({ size, disableAnimation, style, ...props }, ref) => (
-    <Box
-      as="span"
-      alignItems="Center"
-      shrink="No"
-      style={{ gap: toRem(size === '300' ? 1 : 2), ...style }}
-      {...props}
-      ref={ref}
-    >
-      <span className={css.TypingDot({ size, index: '0', animated: !disableAnimation })} />
-      <span className={css.TypingDot({ size, index: '1', animated: !disableAnimation })} />
-      <span className={css.TypingDot({ size, index: '2', animated: !disableAnimation })} />
-    </Box>
-  )
-);
+export const TypingIndicator = as<'div', TypingIndicatorProps>(({ size, style, ...props }, ref) => (
+  <Box
+    as="span"
+    alignItems="Center"
+    shrink="No"
+    style={{ gap: toRem(size === '300' ? 1 : 2), ...style }}
+    {...props}
+    ref={ref}
+  >
+    <span className={css.TypingDot({ size, index: '0' })} />
+    <span className={css.TypingDot({ size, index: '1' })} />
+    <span className={css.TypingDot({ size, index: '2' })} />
+  </Box>
+));

src/app/components/unread-badge/UnreadBadge.tsx

@@ -1,36 +0,0 @@
-import React, { CSSProperties, ReactNode } from 'react';
-import { Box, Badge, toRem, Text } from 'folds';
-import { millify } from '../../plugins/millify';
-
-type UnreadBadgeProps = {
-  highlight?: boolean;
-  count: number;
-};
-const styles: CSSProperties = {
-  minWidth: toRem(16),
-};
-export function UnreadBadgeCenter({ children }: { children: ReactNode }) {
-  return (
-    <Box as="span" style={styles} shrink="No" alignItems="Center" justifyContent="Center">
-      {children}
-    </Box>
-  );
-}
-
-export function UnreadBadge({ highlight, count }: UnreadBadgeProps) {
-  return (
-    <Badge
-      variant={highlight ? 'Success' : 'Secondary'}
-      size={count > 0 ? '400' : '200'}
-      fill={count > 0 ? 'Solid' : 'Soft'}
-      radii="Pill"
-      outlined
-    >
-      {count > 0 && (
-        <Text as="span" size="L400">
-          {millify(count)}
-        </Text>
-      )}
-    </Badge>
-  );
-}

src/app/components/unread-badge/index.ts

@@ -1 +0,0 @@
-export * from './UnreadBadge';

src/app/components/url-preview/UrlPreviewCard.css.tsx

@@ -1,47 +0,0 @@
-import { recipe } from '@vanilla-extract/recipes';
-import { DefaultReset, color, toRem } from 'folds';
-
-export const UrlPreviewHolderGradient = recipe({
-  base: [
-    DefaultReset,
-    {
-      position: 'absolute',
-      height: '100%',
-      width: toRem(10),
-      zIndex: 1,
-    },
-  ],
-  variants: {
-    position: {
-      Left: {
-        left: 0,
-        background: `linear-gradient(to right,${color.Surface.Container} , rgba(116,116,116,0))`,
-      },
-      Right: {
-        right: 0,
-        background: `linear-gradient(to left,${color.Surface.Container} , rgba(116,116,116,0))`,
-      },
-    },
-  },
-});
-export const UrlPreviewHolderBtn = recipe({
-  base: [
-    DefaultReset,
-    {
-      position: 'absolute',
-      zIndex: 1,
-    },
-  ],
-  variants: {
-    position: {
-      Left: {
-        left: 0,
-        transform: 'translateX(-25%)',
-      },
-      Right: {
-        right: 0,
-        transform: 'translateX(25%)',
-      },
-    },
-  },
-});

src/app/components/url-preview/index.ts

@@ -1,2 +1 @@
 export * from './UrlPreview';
-export * from './UrlPreviewCard';

src/app/components/user-avatar/UserAvatar.css.ts

@@ -1,14 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { color } from 'folds';
-
-export const UserAvatar = style({
-  backgroundColor: color.Secondary.Container,
-  color: color.Secondary.OnContainer,
-  textTransform: 'capitalize',
-
-  selectors: {
-    '&[data-image-loaded="true"]': {
-      backgroundColor: 'transparent',
-    },
-  },
-});

src/app/components/user-avatar/UserAvatar.tsx

@@ -1,40 +0,0 @@
-import { AvatarFallback, AvatarImage, color } from 'folds';
-import React, { ReactEventHandler, ReactNode, useState } from 'react';
-import * as css from './UserAvatar.css';
-import colorMXID from '../../../util/colorMXID';
-
-type UserAvatarProps = {
-  userId: string;
-  src?: string;
-  alt?: string;
-  renderFallback: () => ReactNode;
-};
-export function UserAvatar({ userId, src, alt, renderFallback }: UserAvatarProps) {
-  const [error, setError] = useState(false);
-
-  const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
-    evt.currentTarget.setAttribute('data-image-loaded', 'true');
-  };
-
-  if (!src || error) {
-    return (
-      <AvatarFallback
-        style={{ backgroundColor: colorMXID(userId), color: color.Surface.Container }}
-        className={css.UserAvatar}
-      >
-        {renderFallback()}
-      </AvatarFallback>
-    );
-  }
-
-  return (
-    <AvatarImage
-      className={css.UserAvatar}
-      src={src}
-      alt={alt}
-      onError={() => setError(true)}
-      onLoad={handleLoad}
-      draggable={false}
-    />
-  );
-}

src/app/components/user-avatar/index.ts

@@ -1 +0,0 @@
-export * from './UserAvatar';

src/app/components/virtualizer/VirtualTile.tsx

@@ -1,20 +0,0 @@
-import { VirtualItem } from '@tanstack/react-virtual';
-import { as } from 'folds';
-import React from 'react';
-import classNames from 'classnames';
-import * as css from './style.css';
-
-type VirtualTileProps = {
-  virtualItem: VirtualItem;
-};
-export const VirtualTile = as<'div', VirtualTileProps>(
-  ({ className, virtualItem, style, ...props }, ref) => (
-    <div
-      className={classNames(css.VirtualTile, className)}
-      style={{ top: virtualItem.start, ...style }}
-      data-index={virtualItem.index}
-      {...props}
-      ref={ref}
-    />
-  )
-);

src/app/components/virtualizer/index.ts

@@ -1 +0,0 @@
-export * from './VirtualTile';

src/app/components/virtualizer/style.css.ts

@@ -1,11 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { DefaultReset } from 'folds';
-
-export const VirtualTile = style([
-  DefaultReset,
-  {
-    position: 'absolute',
-    width: '100%',
-    left: 0,
-  },
-]);

src/app/cs-api.ts

@@ -104,7 +104,7 @@ export const specVersions = async (
   request: typeof fetch,
   baseUrl: string
 ): Promise<SpecVersions> => {
-  const res = await request(`${trimTrailingSlash(baseUrl)}/_matrix/client/versions`);
+  const res = await request(`${baseUrl}/_matrix/client/versions`);
 
   const data = (await res.json()) as unknown;
 

src/app/features/join-before-navigate/JoinBeforeNavigate.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Box, Scroll, Text, toRem } from 'folds';
-import { useAtomValue } from 'jotai';
-import { RoomCard } from '../../components/room-card';
-import { RoomTopicViewer } from '../../components/room-topic-viewer';
-import { Page, PageHeader } from '../../components/page';
-import { RoomSummaryLoader } from '../../components/RoomSummaryLoader';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { allRoomsAtom } from '../../state/room-list/roomList';
-
-type JoinBeforeNavigateProps = { roomIdOrAlias: string };
-export function JoinBeforeNavigate({ roomIdOrAlias }: JoinBeforeNavigateProps) {
-  const mx = useMatrixClient();
-  const allRooms = useAtomValue(allRoomsAtom);
-  const { navigateRoom, navigateSpace } = useRoomNavigate();
-
-  const handleView = (roomId: string) => {
-    if (mx.getRoom(roomId)?.isSpaceRoom()) {
-      navigateSpace(roomId);
-      return;
-    }
-    navigateRoom(roomId);
-  };
-
-  return (
-    <Page>
-      <PageHeader>
-        <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
-          <Text size="H3" truncate>
-            {roomIdOrAlias}
-          </Text>
-        </Box>
-      </PageHeader>
-      <Box grow="Yes">
-        <Scroll hideTrack visibility="Hover" size="0">
-          <Box style={{ height: '100%' }} grow="Yes" alignItems="Center" justifyContent="Center">
-            <RoomSummaryLoader roomIdOrAlias={roomIdOrAlias}>
-              {(summary) => (
-                <RoomCard
-                  style={{ maxWidth: toRem(364), width: '100%' }}
-                  roomIdOrAlias={roomIdOrAlias}
-                  allRooms={allRooms}
-                  avatarUrl={summary?.avatar_url}
-                  name={summary?.name}
-                  topic={summary?.topic}
-                  memberCount={summary?.num_joined_members}
-                  roomType={summary?.room_type}
-                  renderTopicViewer={(name, topic, requestClose) => (
-                    <RoomTopicViewer name={name} topic={topic} requestClose={requestClose} />
-                  )}
-                  onView={handleView}
-                />
-              )}
-            </RoomSummaryLoader>
-          </Box>
-        </Scroll>
-      </Box>
-    </Page>
-  );
-}

src/app/features/join-before-navigate/index.ts

@@ -1 +0,0 @@
-export * from './JoinBeforeNavigate';

src/app/features/lobby/DnD.css.ts

@@ -1,91 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { color, config, toRem } from 'folds';
-import { ContainerColor } from '../../styles/ContainerColor.css';
-
-export const ItemDraggableTarget = style([
-  ContainerColor({ variant: 'SurfaceVariant' }),
-  {
-    height: '100%',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    zIndex: 1,
-    cursor: 'grab',
-    borderRadius: config.radii.R400,
-    opacity: config.opacity.P300,
-
-    ':active': {
-      cursor: 'ns-resize',
-    },
-  },
-]);
-
-const LineHeight = 4;
-const DropTargetLine = style({
-  selectors: {
-    '&[data-hover=true]:before': {
-      content: '',
-      display: 'block',
-      width: '100%',
-
-      position: 'absolute',
-      left: 0,
-      top: '50%',
-      zIndex: 1,
-      transform: 'translateY(-50%)',
-
-      borderBottom: `${toRem(LineHeight)} solid currentColor`,
-    },
-    '&[data-hover=true]:after': {
-      content: '',
-      display: 'block',
-      width: toRem(LineHeight * 3),
-      height: toRem(LineHeight * 3),
-
-      position: 'absolute',
-      left: 0,
-      top: '50%',
-      zIndex: 1,
-      transform: 'translate(-50%, -50%)',
-
-      backgroundColor: color.Surface.Container,
-      border: `${toRem(LineHeight)} solid currentColor`,
-      borderRadius: '50%',
-    },
-  },
-});
-
-const BaseAfterRoomItemDropTarget = style({
-  width: '100%',
-
-  position: 'absolute',
-  left: 0,
-  bottom: 0,
-  zIndex: 99,
-
-  color: color.Success.Main,
-
-  selectors: {
-    '&[data-error=true]': {
-      color: color.Critical.Main,
-    },
-  },
-});
-const RoomTargetHeight = 32;
-export const AfterRoomItemDropTarget = style([
-  BaseAfterRoomItemDropTarget,
-  {
-    height: toRem(RoomTargetHeight),
-    transform: `translateY(${toRem(RoomTargetHeight / 2 + LineHeight / 2)})`,
-  },
-  DropTargetLine,
-]);
-const SpaceTargetHeight = 14;
-export const AfterSpaceItemDropTarget = style([
-  BaseAfterRoomItemDropTarget,
-  {
-    height: toRem(SpaceTargetHeight),
-    transform: `translateY(calc(100% - ${toRem(4)}))`,
-  },
-  DropTargetLine,
-]);

src/app/features/lobby/DnD.tsx

@@ -1,146 +0,0 @@
-import React, { RefObject, useEffect, useRef, useState } from 'react';
-import {
-  dropTargetForElements,
-  draggable,
-  monitorForElements,
-} from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { autoScrollForElements } from '@atlaskit/pragmatic-drag-and-drop-auto-scroll/element';
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import classNames from 'classnames';
-import { Box, Icon, Icons, as } from 'folds';
-import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
-import * as css from './DnD.css';
-
-export type DropContainerData = {
-  item: HierarchyItem;
-  nextRoomId?: string;
-};
-export type CanDropCallback = (item: HierarchyItem, container: DropContainerData) => boolean;
-
-export const useDraggableItem = (
-  item: HierarchyItem,
-  targetRef: RefObject<HTMLElement>,
-  onDragging: (item?: HierarchyItem) => void,
-  dragHandleRef?: RefObject<HTMLElement>
-): boolean => {
-  const [dragging, setDragging] = useState(false);
-
-  useEffect(() => {
-    const target = targetRef.current;
-    const dragHandle = dragHandleRef?.current ?? undefined;
-
-    return !target
-      ? undefined
-      : draggable({
-          element: target,
-          dragHandle,
-          getInitialData: () => item,
-          onDragStart: () => {
-            setDragging(true);
-            onDragging(item);
-          },
-          onDrop: () => {
-            setDragging(false);
-            onDragging(undefined);
-          },
-        });
-  }, [targetRef, dragHandleRef, item, onDragging]);
-
-  return dragging;
-};
-
-export const ItemDraggableTarget = as<'div'>(({ className, ...props }, ref) => (
-  <Box
-    justifyContent="Center"
-    alignItems="Center"
-    className={classNames(css.ItemDraggableTarget, className)}
-    ref={ref}
-    {...props}
-  >
-    <Icon size="50" src={Icons.VerticalDots} />
-  </Box>
-));
-
-type AfterItemDropTargetProps = {
-  item: HierarchyItem;
-  afterSpace?: boolean;
-  nextRoomId?: string;
-  canDrop: CanDropCallback;
-};
-export function AfterItemDropTarget({
-  item,
-  afterSpace,
-  nextRoomId,
-  canDrop,
-}: AfterItemDropTargetProps) {
-  const targetRef = useRef<HTMLDivElement>(null);
-  const [dropState, setDropState] = useState<'idle' | 'allow' | 'not-allow'>('idle');
-
-  useEffect(() => {
-    const target = targetRef.current;
-    if (!target) {
-      throw Error('drop target ref is not set properly');
-    }
-
-    return dropTargetForElements({
-      element: target,
-      getData: () => {
-        const container: DropContainerData = {
-          item,
-          nextRoomId,
-        };
-        return container;
-      },
-      onDragEnter: ({ source }) => {
-        if (
-          canDrop(source.data as HierarchyItem, {
-            item,
-            nextRoomId,
-          })
-        ) {
-          setDropState('allow');
-        } else {
-          setDropState('not-allow');
-        }
-      },
-      onDragLeave: () => setDropState('idle'),
-      onDrop: () => setDropState('idle'),
-    });
-  }, [item, nextRoomId, canDrop]);
-
-  return (
-    <div
-      className={afterSpace ? css.AfterSpaceItemDropTarget : css.AfterRoomItemDropTarget}
-      data-hover={dropState !== 'idle'}
-      data-error={dropState === 'not-allow'}
-      ref={targetRef}
-    />
-  );
-}
-
-export const useDnDMonitor = (
-  scrollRef: RefObject<HTMLElement>,
-  onDragging: (item?: HierarchyItem) => void,
-  onReorder: (item: HierarchyItem, container: DropContainerData) => void
-) => {
-  useEffect(() => {
-    const scrollElement = scrollRef.current;
-    if (!scrollElement) {
-      throw Error('Scroll element ref not configured');
-    }
-
-    return combine(
-      monitorForElements({
-        onDrop: ({ source, location }) => {
-          onDragging(undefined);
-          const { dropTargets } = location.current;
-          if (dropTargets.length === 0) return;
-          onReorder(source.data as HierarchyItem, dropTargets[0].data as DropContainerData);
-        },
-      }),
-      autoScrollForElements({
-        element: scrollElement,
-      })
-    );
-  }, [scrollRef, onDragging, onReorder]);
-};

src/app/features/lobby/HierarchyItemMenu.tsx

@@ -1,306 +0,0 @@
-import React, { MouseEventHandler, useCallback, useEffect, useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import {
-  Box,
-  IconButton,
-  Icon,
-  Icons,
-  PopOut,
-  Menu,
-  MenuItem,
-  Text,
-  RectCords,
-  config,
-  Line,
-  Spinner,
-  toRem,
-} from 'folds';
-import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { MSpaceChildContent, StateEvent } from '../../../types/matrix/room';
-import {
-  openInviteUser,
-  openSpaceSettings,
-  toggleRoomSettings,
-} from '../../../client/action/navigation';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { UseStateProvider } from '../../components/UseStateProvider';
-import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
-import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
-
-type HierarchyItemWithParent = HierarchyItem & {
-  parentId: string;
-};
-
-function SuggestMenuItem({
-  item,
-  requestClose,
-}: {
-  item: HierarchyItemWithParent;
-  requestClose: () => void;
-}) {
-  const mx = useMatrixClient();
-  const { roomId, parentId, content } = item;
-
-  const [toggleState, handleToggleSuggested] = useAsyncCallback(
-    useCallback(() => {
-      const newContent: MSpaceChildContent = { ...content, suggested: !content.suggested };
-      return mx.sendStateEvent(parentId, StateEvent.SpaceChild, newContent, roomId);
-    }, [mx, parentId, roomId, content])
-  );
-
-  useEffect(() => {
-    if (toggleState.status === AsyncStatus.Success) {
-      requestClose();
-    }
-  }, [requestClose, toggleState]);
-
-  return (
-    <MenuItem
-      onClick={handleToggleSuggested}
-      size="300"
-      radii="300"
-      before={toggleState.status === AsyncStatus.Loading && <Spinner size="100" />}
-      disabled={toggleState.status === AsyncStatus.Loading}
-    >
-      <Text as="span" size="T300" truncate>
-        {content.suggested ? 'Unset Suggested' : 'Set Suggested'}
-      </Text>
-    </MenuItem>
-  );
-}
-
-function RemoveMenuItem({
-  item,
-  requestClose,
-}: {
-  item: HierarchyItemWithParent;
-  requestClose: () => void;
-}) {
-  const mx = useMatrixClient();
-  const { roomId, parentId } = item;
-
-  const [removeState, handleRemove] = useAsyncCallback(
-    useCallback(
-      () => mx.sendStateEvent(parentId, StateEvent.SpaceChild, {}, roomId),
-      [mx, parentId, roomId]
-    )
-  );
-
-  useEffect(() => {
-    if (removeState.status === AsyncStatus.Success) {
-      requestClose();
-    }
-  }, [requestClose, removeState]);
-
-  return (
-    <MenuItem
-      onClick={handleRemove}
-      variant="Critical"
-      fill="None"
-      size="300"
-      radii="300"
-      before={
-        removeState.status === AsyncStatus.Loading && (
-          <Spinner variant="Critical" fill="Soft" size="100" />
-        )
-      }
-      disabled={removeState.status === AsyncStatus.Loading}
-    >
-      <Text as="span" size="T300" truncate>
-        Remove
-      </Text>
-    </MenuItem>
-  );
-}
-
-function InviteMenuItem({
-  item,
-  requestClose,
-  disabled,
-}: {
-  item: HierarchyItemWithParent;
-  requestClose: () => void;
-  disabled?: boolean;
-}) {
-  const handleInvite = () => {
-    openInviteUser(item.roomId);
-    requestClose();
-  };
-
-  return (
-    <MenuItem
-      onClick={handleInvite}
-      size="300"
-      radii="300"
-      variant="Primary"
-      fill="None"
-      disabled={disabled}
-    >
-      <Text as="span" size="T300" truncate>
-        Invite
-      </Text>
-    </MenuItem>
-  );
-}
-
-function SettingsMenuItem({
-  item,
-  requestClose,
-  disabled,
-}: {
-  item: HierarchyItemWithParent;
-  requestClose: () => void;
-  disabled?: boolean;
-}) {
-  const handleSettings = () => {
-    if (item.space) {
-      openSpaceSettings(item.roomId);
-    } else {
-      toggleRoomSettings(item.roomId);
-    }
-    requestClose();
-  };
-
-  return (
-    <MenuItem onClick={handleSettings} size="300" radii="300" disabled={disabled}>
-      <Text as="span" size="T300" truncate>
-        Settings
-      </Text>
-    </MenuItem>
-  );
-}
-
-type HierarchyItemMenuProps = {
-  item: HierarchyItem & {
-    parentId: string;
-  };
-  joined: boolean;
-  canInvite: boolean;
-  canEditChild: boolean;
-  pinned?: boolean;
-  onTogglePin?: (roomId: string) => void;
-};
-export function HierarchyItemMenu({
-  item,
-  joined,
-  canInvite,
-  canEditChild,
-  pinned,
-  onTogglePin,
-}: HierarchyItemMenuProps) {
-  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-
-  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleRequestClose = useCallback(() => setMenuAnchor(undefined), []);
-
-  if (!joined && !canEditChild) {
-    return null;
-  }
-
-  return (
-    <Box gap="200" alignItems="Center" shrink="No">
-      <IconButton
-        onClick={handleOpenMenu}
-        size="300"
-        variant="SurfaceVariant"
-        fill="None"
-        radii="300"
-        aria-pressed={!!menuAnchor}
-      >
-        <Icon size="50" src={Icons.VerticalDots} />
-      </IconButton>
-      {menuAnchor && (
-        <PopOut
-          anchor={menuAnchor}
-          position="Bottom"
-          align="End"
-          content={
-            <FocusTrap
-              focusTrapOptions={{
-                initialFocus: false,
-                returnFocusOnDeactivate: false,
-                onDeactivate: () => setMenuAnchor(undefined),
-                clickOutsideDeactivates: true,
-                isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-              }}
-            >
-              <Menu style={{ maxWidth: toRem(150), width: '100vw' }}>
-                {joined && (
-                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-                    {onTogglePin && (
-                      <MenuItem
-                        size="300"
-                        radii="300"
-                        onClick={() => {
-                          onTogglePin(item.roomId);
-                          handleRequestClose();
-                        }}
-                      >
-                        <Text as="span" size="T300" truncate>
-                          {pinned ? 'Unpin from Sidebar' : 'Pin to Sidebar'}
-                        </Text>
-                      </MenuItem>
-                    )}
-                    <InviteMenuItem
-                      item={item}
-                      requestClose={handleRequestClose}
-                      disabled={!canInvite}
-                    />
-                    <SettingsMenuItem item={item} requestClose={handleRequestClose} />
-                    <UseStateProvider initial={false}>
-                      {(promptLeave, setPromptLeave) => (
-                        <>
-                          <MenuItem
-                            onClick={() => setPromptLeave(true)}
-                            variant="Critical"
-                            fill="None"
-                            size="300"
-                            after={<Icon size="100" src={Icons.ArrowGoLeft} />}
-                            radii="300"
-                            aria-pressed={promptLeave}
-                          >
-                            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-                              Leave
-                            </Text>
-                          </MenuItem>
-                          {promptLeave &&
-                            (item.space ? (
-                              <LeaveSpacePrompt
-                                roomId={item.roomId}
-                                onDone={handleRequestClose}
-                                onCancel={() => setPromptLeave(false)}
-                              />
-                            ) : (
-                              <LeaveRoomPrompt
-                                roomId={item.roomId}
-                                onDone={handleRequestClose}
-                                onCancel={() => setPromptLeave(false)}
-                              />
-                            ))}
-                        </>
-                      )}
-                    </UseStateProvider>
-                  </Box>
-                )}
-                {(joined || canEditChild) && (
-                  <Line size="300" variant="Surface" direction="Horizontal" />
-                )}
-                {canEditChild && (
-                  <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-                    <SuggestMenuItem item={item} requestClose={handleRequestClose} />
-                    <RemoveMenuItem item={item} requestClose={handleRequestClose} />
-                  </Box>
-                )}
-              </Menu>
-            </FocusTrap>
-          }
-        />
-      )}
-    </Box>
-  );
-}

src/app/features/lobby/Lobby.tsx

@@ -1,528 +0,0 @@
-import React, { MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';
-import { Box, Icon, IconButton, Icons, Line, Scroll, config } from 'folds';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useAtom, useAtomValue } from 'jotai';
-import { useNavigate } from 'react-router-dom';
-import { IJoinRuleEventContent, JoinRule, RestrictedAllowType, Room } from 'matrix-js-sdk';
-import { useSpace } from '../../hooks/useSpace';
-import { Page, PageContent, PageContentCenter, PageHeroSection } from '../../components/page';
-import { HierarchyItem, useSpaceHierarchy } from '../../hooks/useSpaceHierarchy';
-import { VirtualTile } from '../../components/virtualizer';
-import { spaceRoomsAtom } from '../../state/spaceRooms';
-import { MembersDrawer } from '../room/MembersDrawer';
-import { useSetting } from '../../state/hooks/settings';
-import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { settingsAtom } from '../../state/settings';
-import { LobbyHeader } from './LobbyHeader';
-import { LobbyHero } from './LobbyHero';
-import { ScrollTopContainer } from '../../components/scroll-top-container';
-import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
-import {
-  IPowerLevels,
-  PowerLevelsContextProvider,
-  powerLevelAPI,
-  usePowerLevels,
-  useRoomsPowerLevels,
-} from '../../hooks/usePowerLevels';
-import { RoomItemCard } from './RoomItem';
-import { mDirectAtom } from '../../state/mDirectList';
-import { SpaceItemCard } from './SpaceItem';
-import { makeLobbyCategoryId } from '../../state/closedLobbyCategories';
-import { useCategoryHandler } from '../../hooks/useCategoryHandler';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { allRoomsAtom } from '../../state/room-list/roomList';
-import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
-import { getSpaceRoomPath } from '../../pages/pathUtils';
-import { HierarchyItemMenu } from './HierarchyItemMenu';
-import { StateEvent } from '../../../types/matrix/room';
-import { AfterItemDropTarget, CanDropCallback, useDnDMonitor } from './DnD';
-import { ASCIILexicalTable, orderKeys } from '../../utils/ASCIILexicalTable';
-import { getStateEvent } from '../../utils/room';
-import { useClosedLobbyCategoriesAtom } from '../../state/hooks/closedLobbyCategories';
-import {
-  makeCinnySpacesContent,
-  sidebarItemWithout,
-  useSidebarItems,
-} from '../../hooks/useSidebarItems';
-import { useOrphanSpaces } from '../../state/hooks/roomList';
-import { roomToParentsAtom } from '../../state/room/roomToParents';
-import { AccountDataEvent } from '../../../types/matrix/accountData';
-
-export function Lobby() {
-  const navigate = useNavigate();
-  const mx = useMatrixClient();
-  const mDirects = useAtomValue(mDirectAtom);
-  const allRooms = useAtomValue(allRoomsAtom);
-  const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
-  const space = useSpace();
-  const spacePowerLevels = usePowerLevels(space);
-  const lex = useMemo(() => new ASCIILexicalTable(' '.charCodeAt(0), '~'.charCodeAt(0), 6), []);
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const heroSectionRef = useRef<HTMLDivElement>(null);
-  const [heroSectionHeight, setHeroSectionHeight] = useState<number>();
-  const [spaceRooms, setSpaceRooms] = useAtom(spaceRoomsAtom);
-  const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
-  const screenSize = useScreenSizeContext();
-  const [onTop, setOnTop] = useState(true);
-  const [closedCategories, setClosedCategories] = useAtom(useClosedLobbyCategoriesAtom());
-  const [sidebarItems] = useSidebarItems(
-    useOrphanSpaces(mx, allRoomsAtom, useAtomValue(roomToParentsAtom))
-  );
-  const sidebarSpaces = useMemo(() => {
-    const sideSpaces = sidebarItems.flatMap((item) => {
-      if (typeof item === 'string') return item;
-      return item.content;
-    });
-
-    return new Set(sideSpaces);
-  }, [sidebarItems]);
-
-  useElementSizeObserver(
-    useCallback(() => heroSectionRef.current, []),
-    useCallback((w, height) => setHeroSectionHeight(height), [])
-  );
-
-  const getRoom = useCallback(
-    (rId: string) => {
-      if (allJoinedRooms.has(rId)) {
-        return mx.getRoom(rId) ?? undefined;
-      }
-      return undefined;
-    },
-    [mx, allJoinedRooms]
-  );
-
-  const canEditSpaceChild = useCallback(
-    (powerLevels: IPowerLevels) =>
-      powerLevelAPI.canSendStateEvent(
-        powerLevels,
-        StateEvent.SpaceChild,
-        powerLevelAPI.getPowerLevel(powerLevels, mx.getUserId() ?? undefined)
-      ),
-    [mx]
-  );
-
-  const [draggingItem, setDraggingItem] = useState<HierarchyItem>();
-  const flattenHierarchy = useSpaceHierarchy(
-    space.roomId,
-    spaceRooms,
-    getRoom,
-    useCallback(
-      (childId) =>
-        closedCategories.has(makeLobbyCategoryId(space.roomId, childId)) || !!draggingItem?.space,
-      [closedCategories, space.roomId, draggingItem]
-    )
-  );
-
-  const virtualizer = useVirtualizer({
-    count: flattenHierarchy.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => 1,
-    overscan: 2,
-    paddingStart: heroSectionHeight ?? 258,
-  });
-  const vItems = virtualizer.getVirtualItems();
-
-  const roomsPowerLevels = useRoomsPowerLevels(
-    useMemo(
-      () => flattenHierarchy.map((i) => mx.getRoom(i.roomId)).filter((r) => !!r) as Room[],
-      [mx, flattenHierarchy]
-    )
-  );
-
-  const canDrop: CanDropCallback = useCallback(
-    (item, container): boolean => {
-      const restrictedItem = mx.getRoom(item.roomId)?.getJoinRule() === JoinRule.Restricted;
-      if (item.roomId === container.item.roomId || item.roomId === container.nextRoomId) {
-        // can not drop before or after itself
-        return false;
-      }
-
-      if (item.space) {
-        if (!container.item.space) return false;
-        const containerSpaceId = space.roomId;
-
-        if (
-          getRoom(containerSpaceId) === undefined ||
-          !canEditSpaceChild(roomsPowerLevels.get(containerSpaceId) ?? {})
-        ) {
-          return false;
-        }
-
-        return true;
-      }
-
-      const containerSpaceId = container.item.space
-        ? container.item.roomId
-        : container.item.parentId;
-
-      const dropOutsideSpace = item.parentId !== containerSpaceId;
-
-      if (dropOutsideSpace && restrictedItem) {
-        // do not allow restricted room to drop outside
-        // current space if can't change join rule allow
-        const itemPowerLevel = roomsPowerLevels.get(item.roomId) ?? {};
-        const userPLInItem = powerLevelAPI.getPowerLevel(
-          itemPowerLevel,
-          mx.getUserId() ?? undefined
-        );
-        const canChangeJoinRuleAllow = powerLevelAPI.canSendStateEvent(
-          itemPowerLevel,
-          StateEvent.RoomJoinRules,
-          userPLInItem
-        );
-        if (!canChangeJoinRuleAllow) {
-          return false;
-        }
-      }
-
-      if (
-        getRoom(containerSpaceId) === undefined ||
-        !canEditSpaceChild(roomsPowerLevels.get(containerSpaceId) ?? {})
-      ) {
-        return false;
-      }
-      return true;
-    },
-    [getRoom, space.roomId, roomsPowerLevels, canEditSpaceChild, mx]
-  );
-
-  const reorderSpace = useCallback(
-    (item: HierarchyItem, containerItem: HierarchyItem) => {
-      if (!item.parentId) return;
-
-      const childItems = flattenHierarchy
-        .filter((i) => i.parentId && i.space)
-        .filter((i) => i.roomId !== item.roomId);
-
-      const beforeIndex = childItems.findIndex((i) => i.roomId === containerItem.roomId);
-      const insertIndex = beforeIndex + 1;
-
-      childItems.splice(insertIndex, 0, {
-        ...item,
-        content: { ...item.content, order: undefined },
-      });
-
-      const currentOrders = childItems.map((i) => {
-        if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
-          return i.content.order;
-        }
-        return undefined;
-      });
-
-      const newOrders = orderKeys(lex, currentOrders);
-
-      newOrders?.forEach((orderKey, index) => {
-        const itm = childItems[index];
-        if (!itm || !itm.parentId) return;
-        const parentPL = roomsPowerLevels.get(itm.parentId);
-        const canEdit = parentPL && canEditSpaceChild(parentPL);
-        if (canEdit && orderKey !== currentOrders[index]) {
-          mx.sendStateEvent(
-            itm.parentId,
-            StateEvent.SpaceChild,
-            { ...itm.content, order: orderKey },
-            itm.roomId
-          );
-        }
-      });
-    },
-    [mx, flattenHierarchy, lex, roomsPowerLevels, canEditSpaceChild]
-  );
-
-  const reorderRoom = useCallback(
-    (item: HierarchyItem, containerItem: HierarchyItem): void => {
-      const itemRoom = mx.getRoom(item.roomId);
-      if (!item.parentId) {
-        return;
-      }
-      const containerParentId: string = containerItem.space
-        ? containerItem.roomId
-        : containerItem.parentId;
-      const itemContent = item.content;
-
-      if (item.parentId !== containerParentId) {
-        mx.sendStateEvent(item.parentId, StateEvent.SpaceChild, {}, item.roomId);
-      }
-
-      if (
-        itemRoom &&
-        itemRoom.getJoinRule() === JoinRule.Restricted &&
-        item.parentId !== containerParentId
-      ) {
-        // change join rule allow parameter when dragging
-        // restricted room from one space to another
-        const joinRuleContent = getStateEvent(
-          itemRoom,
-          StateEvent.RoomJoinRules
-        )?.getContent<IJoinRuleEventContent>();
-
-        if (joinRuleContent) {
-          const allow =
-            joinRuleContent.allow?.filter((allowRule) => allowRule.room_id !== item.parentId) ?? [];
-          allow.push({ type: RestrictedAllowType.RoomMembership, room_id: containerParentId });
-          mx.sendStateEvent(itemRoom.roomId, StateEvent.RoomJoinRules, {
-            ...joinRuleContent,
-            allow,
-          });
-        }
-      }
-
-      const childItems = flattenHierarchy
-        .filter((i) => i.parentId === containerParentId && !i.space)
-        .filter((i) => i.roomId !== item.roomId);
-
-      const beforeItem: HierarchyItem | undefined = containerItem.space ? undefined : containerItem;
-      const beforeIndex = childItems.findIndex((i) => i.roomId === beforeItem?.roomId);
-      const insertIndex = beforeIndex + 1;
-
-      childItems.splice(insertIndex, 0, {
-        ...item,
-        parentId: containerParentId,
-        content: { ...itemContent, order: undefined },
-      });
-
-      const currentOrders = childItems.map((i) => {
-        if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
-          return i.content.order;
-        }
-        return undefined;
-      });
-
-      const newOrders = orderKeys(lex, currentOrders);
-
-      newOrders?.forEach((orderKey, index) => {
-        const itm = childItems[index];
-        if (itm && orderKey !== currentOrders[index]) {
-          mx.sendStateEvent(
-            containerParentId,
-            StateEvent.SpaceChild,
-            { ...itm.content, order: orderKey },
-            itm.roomId
-          );
-        }
-      });
-    },
-    [mx, flattenHierarchy, lex]
-  );
-
-  useDnDMonitor(
-    scrollRef,
-    setDraggingItem,
-    useCallback(
-      (item, container) => {
-        if (!canDrop(item, container)) {
-          return;
-        }
-        if (item.space) {
-          reorderSpace(item, container.item);
-        } else {
-          reorderRoom(item, container.item);
-        }
-      },
-      [reorderRoom, reorderSpace, canDrop]
-    )
-  );
-
-  const addSpaceRoom = useCallback(
-    (roomId: string) => setSpaceRooms({ type: 'PUT', roomId }),
-    [setSpaceRooms]
-  );
-
-  const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) =>
-    closedCategories.has(categoryId)
-  );
-
-  const handleOpenRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    const rId = evt.currentTarget.getAttribute('data-room-id');
-    if (!rId) return;
-    const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
-    navigate(getSpaceRoomPath(pSpaceIdOrAlias, getCanonicalAliasOrRoomId(mx, rId)));
-  };
-
-  const togglePinToSidebar = useCallback(
-    (rId: string) => {
-      const newItems = sidebarItemWithout(sidebarItems, rId);
-      if (!sidebarSpaces.has(rId)) {
-        newItems.push(rId);
-      }
-      const newSpacesContent = makeCinnySpacesContent(mx, newItems);
-      mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
-    },
-    [mx, sidebarItems, sidebarSpaces]
-  );
-
-  return (
-    <PowerLevelsContextProvider value={spacePowerLevels}>
-      <Box grow="Yes">
-        <Page>
-          <LobbyHeader
-            showProfile={!onTop}
-            powerLevels={roomsPowerLevels.get(space.roomId) ?? {}}
-          />
-          <Box style={{ position: 'relative' }} grow="Yes">
-            <Scroll ref={scrollRef} hideTrack visibility="Hover">
-              <PageContent>
-                <PageContentCenter>
-                  <ScrollTopContainer
-                    scrollRef={scrollRef}
-                    anchorRef={heroSectionRef}
-                    onVisibilityChange={setOnTop}
-                  >
-                    <IconButton
-                      onClick={() => virtualizer.scrollToOffset(0)}
-                      variant="SurfaceVariant"
-                      radii="Pill"
-                      outlined
-                      size="300"
-                      aria-label="Scroll to Top"
-                    >
-                      <Icon src={Icons.ChevronTop} size="300" />
-                    </IconButton>
-                  </ScrollTopContainer>
-                  <div
-                    style={{
-                      position: 'relative',
-                      height: virtualizer.getTotalSize(),
-                    }}
-                  >
-                    <PageHeroSection ref={heroSectionRef} style={{ paddingTop: 0 }}>
-                      <LobbyHero />
-                    </PageHeroSection>
-                    {vItems.map((vItem) => {
-                      const item = flattenHierarchy[vItem.index];
-                      if (!item) return null;
-                      const itemPowerLevel = roomsPowerLevels.get(item.roomId) ?? {};
-                      const userPLInItem = powerLevelAPI.getPowerLevel(
-                        itemPowerLevel,
-                        mx.getUserId() ?? undefined
-                      );
-                      const canInvite = powerLevelAPI.canDoAction(
-                        itemPowerLevel,
-                        'invite',
-                        userPLInItem
-                      );
-                      const isJoined = allJoinedRooms.has(item.roomId);
-
-                      const nextRoomId: string | undefined =
-                        flattenHierarchy[vItem.index + 1]?.roomId;
-
-                      const dragging =
-                        draggingItem?.roomId === item.roomId &&
-                        draggingItem.parentId === item.parentId;
-
-                      if (item.space) {
-                        const categoryId = makeLobbyCategoryId(space.roomId, item.roomId);
-                        const { parentId } = item;
-                        const parentPowerLevels = parentId
-                          ? roomsPowerLevels.get(parentId) ?? {}
-                          : undefined;
-
-                        return (
-                          <VirtualTile
-                            virtualItem={vItem}
-                            style={{
-                              paddingTop: vItem.index === 0 ? 0 : config.space.S500,
-                            }}
-                            ref={virtualizer.measureElement}
-                            key={vItem.index}
-                          >
-                            <SpaceItemCard
-                              item={item}
-                              joined={allJoinedRooms.has(item.roomId)}
-                              categoryId={categoryId}
-                              closed={closedCategories.has(categoryId) || !!draggingItem?.space}
-                              handleClose={handleCategoryClick}
-                              getRoom={getRoom}
-                              canEditChild={canEditSpaceChild(
-                                roomsPowerLevels.get(item.roomId) ?? {}
-                              )}
-                              canReorder={
-                                parentPowerLevels ? canEditSpaceChild(parentPowerLevels) : false
-                              }
-                              options={
-                                parentId &&
-                                parentPowerLevels && (
-                                  <HierarchyItemMenu
-                                    item={{ ...item, parentId }}
-                                    canInvite={canInvite}
-                                    joined={isJoined}
-                                    canEditChild={canEditSpaceChild(parentPowerLevels)}
-                                    pinned={sidebarSpaces.has(item.roomId)}
-                                    onTogglePin={togglePinToSidebar}
-                                  />
-                                )
-                              }
-                              before={item.parentId ? undefined : undefined}
-                              after={
-                                <AfterItemDropTarget
-                                  item={item}
-                                  nextRoomId={nextRoomId}
-                                  afterSpace
-                                  canDrop={canDrop}
-                                />
-                              }
-                              onDragging={setDraggingItem}
-                              data-dragging={dragging}
-                            />
-                          </VirtualTile>
-                        );
-                      }
-
-                      const parentPowerLevels = roomsPowerLevels.get(item.parentId) ?? {};
-                      const prevItem: HierarchyItem | undefined = flattenHierarchy[vItem.index - 1];
-                      const nextItem: HierarchyItem | undefined = flattenHierarchy[vItem.index + 1];
-                      return (
-                        <VirtualTile
-                          virtualItem={vItem}
-                          style={{ paddingTop: config.space.S100 }}
-                          ref={virtualizer.measureElement}
-                          key={vItem.index}
-                        >
-                          <RoomItemCard
-                            item={item}
-                            onSpaceFound={addSpaceRoom}
-                            dm={mDirects.has(item.roomId)}
-                            firstChild={!prevItem || prevItem.space === true}
-                            lastChild={!nextItem || nextItem.space === true}
-                            onOpen={handleOpenRoom}
-                            getRoom={getRoom}
-                            canReorder={canEditSpaceChild(parentPowerLevels)}
-                            options={
-                              <HierarchyItemMenu
-                                item={item}
-                                canInvite={canInvite}
-                                joined={isJoined}
-                                canEditChild={canEditSpaceChild(parentPowerLevels)}
-                              />
-                            }
-                            after={
-                              <AfterItemDropTarget
-                                item={item}
-                                nextRoomId={nextRoomId}
-                                canDrop={canDrop}
-                              />
-                            }
-                            data-dragging={dragging}
-                            onDragging={setDraggingItem}
-                          />
-                        </VirtualTile>
-                      );
-                    })}
-                  </div>
-                </PageContentCenter>
-              </PageContent>
-            </Scroll>
-          </Box>
-        </Page>
-        {screenSize === ScreenSize.Desktop && isDrawer && (
-          <>
-            <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer room={space} />
-          </>
-        )}
-      </Box>
-    </PowerLevelsContextProvider>
-  );
-}

src/app/features/lobby/LobbyHeader.css.ts

@@ -1,13 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
-
-export const Header = style({
-  borderBottomColor: 'transparent',
-});
-export const HeaderTopic = style({
-  ':hover': {
-    cursor: 'pointer',
-    opacity: config.opacity.P500,
-    textDecoration: 'underline',
-  },
-});