feat: Implement image carousel functionality with metadata handling and UI enhancements

config.json

@@ -9,13 +9,30 @@
     "xmr.se"
   ],
   "allowCustomHomeservers": true,
+
+  "calling": {
+    "livekitServiceUrl": "https://b.ruv.wtf/matrix-rtc/livekit/jwt"
+  },
+
   "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",
+      "#freesoftware:matrix.org",
+      "#pcapdroid:matrix.org",
+      "#gentoo:matrix.org",
+      "#PrivSec.dev:arcticfoxes.net",
+      "#disroot:aria-net.org"
     ],
-    "servers": []
+    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
   },
 
   "hashRouter": {

docs/PLUGIN_API.md

@@ -105,7 +105,6 @@ interface PluginContext {
   pluginId: string;
   matrixClient: MatrixClient;
   React: typeof import('react');
-  lucide: typeof import('lucide-react');
   
   commands: CommandsAPI;
   messages: MessagesAPI;
@@ -417,8 +416,6 @@ interface UIButtonDefinition {
   location: UILocation;
   label: string;
   icon?: string;
-  /** Lucide icon name, e.g. `ImagePlay`. Also supported via `icon: 'lucide:ImagePlay'`. */
-  lucideIcon?: string;
   position?: UIButtonPosition;
   onClick?: () => void | Promise<void>;
 }

index.html

@@ -27,10 +27,6 @@
     <meta name="theme-color" content="#000000" />
 
     <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Space+Grotesk:wght@400;600;700&display=swap"
-    />
 
     <link rel="manifest" href="/manifest.json" />
     <meta name="mobile-web-app-capable" content="yes" />

package-lock.json

@@ -12,6 +12,8 @@
         "@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",
+        "@capacitor/core": "8.3.4",
+        "@capacitor/local-notifications": "8.2.0",
         "@fontsource/inter": "4.5.14",
         "@paarrot/plugin-manager": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git",
         "@tanstack/react-query": "5.24.1",
@@ -56,7 +58,6 @@
         "linkifyjs": "4.1.3",
         "livekit-client": "2.17.0",
         "lottie-web": "5.13.0",
-        "lucide-react": "0.511.0",
         "matrix-js-sdk": "38.2.0",
         "millify": "6.1.0",
         "pako": "2.1.0",
@@ -1670,6 +1671,24 @@
       "integrity": "sha512-wJ8ReQbHxsAfXhrf9ixl0aYbZorRuOWpBNzm8pL8ftmSxQx/wnJD5Eg861NwJU/czy2VXFIebCeZnZrI9rktIQ==",
       "license": "(Apache-2.0 AND BSD-3-Clause)"
     },
+    "node_modules/@capacitor/core": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.3.4.tgz",
+      "integrity": "sha512-CqRQCkb6HXxcx/N7s+hHTN6ef2CmamFiRMITwm4qB840ph56mS42bzUgn6tKCP+RZjdDweiRHj9ytDDeN6jFag==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@capacitor/local-notifications": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/local-notifications/-/local-notifications-8.2.0.tgz",
+      "integrity": "sha512-fvLY0w2w4MiX+DD4+Wv4DOwOLdzKZsMDwAcRv/Juudd+QbKbn69s6cM3xVqPwAiDqfnqsY4/S8xtQD6M73wY2A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@capacitor/core": ">=8.0.0"
+      }
+    },
     "node_modules/@emotion/hash": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -8754,15 +8773,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "0.511.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.511.0.tgz",
-      "integrity": "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",

package.json

@@ -23,6 +23,8 @@
     "@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",
+    "@capacitor/core": "8.3.4",
+    "@capacitor/local-notifications": "8.2.0",
     "@fontsource/inter": "4.5.14",
     "@paarrot/plugin-manager": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git",
     "@tanstack/react-query": "5.24.1",
@@ -67,7 +69,6 @@
     "linkifyjs": "4.1.3",
     "livekit-client": "2.17.0",
     "lottie-web": "5.13.0",
-    "lucide-react": "0.511.0",
     "matrix-js-sdk": "38.2.0",
     "millify": "6.1.0",
     "pako": "2.1.0",

src/app/components/AccountDataEditor.tsx

@@ -1,6 +1,19 @@
 import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Text, IconButton, Input, Button, TextAreaComponent as TextArea, color, Spinner, Chip, Scroll, config } from 'folds';
-import { Icon, Icons } from './icons';
+import {
+  Box,
+  Text,
+  Icon,
+  Icons,
+  IconButton,
+  Input,
+  Button,
+  TextArea as TextAreaComponent,
+  color,
+  Spinner,
+  Chip,
+  Scroll,
+  config,
+} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { Cursor } from '../plugins/text-area';
 import { syntaxErrorPosition } from '../utils/dom';

src/app/components/BackupRestore.tsx

@@ -1,8 +1,23 @@
 import React, { MouseEventHandler, useCallback, useState } from 'react';
 import { useAtom } from 'jotai';
 import { CryptoApi, KeyBackupInfo } from 'matrix-js-sdk/lib/crypto-api';
-import { Badge, Box, Button, color, config, IconButton, Menu, percent, PopOut, ProgressBar, RectCords, Spinner, Text } from 'folds';
-import { Icon, Icons } from './icons';
+import {
+  Badge,
+  Box,
+  Button,
+  color,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  percent,
+  PopOut,
+  ProgressBar,
+  RectCords,
+  Spinner,
+  Text,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { BackupProgressStatus, backupRestoreProgressAtom } from '../state/backupRestore';
 import { InfoCard } from './info-card';

src/app/components/DeviceVerification.tsx

@@ -6,8 +6,21 @@ import {
 } from 'matrix-js-sdk/lib/crypto-api';
 import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
 import { VerificationMethod } from 'matrix-js-sdk/lib/types';
-import { Box, Button, config, Dialog, Header, IconButton, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text } from 'folds';
-import { Icon, Icons } from './icons';
+import {
+  Box,
+  Button,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Spinner,
+  Text,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import {
   useVerificationRequestPhase,

src/app/components/DeviceVerificationSetup.tsx

@@ -1,6 +1,18 @@
 import React, { FormEventHandler, forwardRef, useCallback, useState } from 'react';
-import { Dialog, Header, Box, Text, IconButton, config, Button, Chip, color, Spinner } from 'folds';
-import { Icon, Icons } from './icons';
+import {
+  Dialog,
+  Header,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  config,
+  Button,
+  Chip,
+  color,
+  Spinner,
+} from 'folds';
 import FileSaver from 'file-saver';
 import to from 'await-to-js';
 import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';

src/app/components/JoinRulesSwitcher.tsx

@@ -1,6 +1,18 @@
 import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import { config, Box, MenuItem, Text, RectCords, PopOut, Menu, Button, Spinner } from 'folds';
-import { Icon, Icons, IconSrc } from './icons';
+import {
+  config,
+  Box,
+  MenuItem,
+  Text,
+  Icon,
+  Icons,
+  IconSrc,
+  RectCords,
+  PopOut,
+  Menu,
+  Button,
+  Spinner,
+} from 'folds';
 import { JoinRule } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';

src/app/components/ManualVerification.tsx

@@ -1,6 +1,17 @@
 import React, { MouseEventHandler, ReactNode, useCallback, useState } from 'react';
-import { Box, Text, Chip, RectCords, PopOut, Menu, config, MenuItem, color } from 'folds';
-import { Icon, Icons } from './icons';
+import {
+  Box,
+  Text,
+  Chip,
+  Icon,
+  Icons,
+  RectCords,
+  PopOut,
+  Menu,
+  config,
+  MenuItem,
+  color,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';
 import { SettingTile } from './setting-tile';

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

@@ -2,8 +2,24 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { Box, Button, Chip, Header, IconButton, Input, Menu, PopOut, RectCords, Scroll, Spinner, Text, as, config } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Box,
+  Button,
+  Chip,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Menu,
+  PopOut,
+  RectCords,
+  Scroll,
+  Spinner,
+  Text,
+  as,
+  config,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import FileSaver from 'file-saver';
 import * as css from './PdfViewer.css';

src/app/components/RoomNotificationSwitcher.tsx

@@ -1,5 +1,4 @@
-import { Box, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
-import { Icon } from './icons';
+import { Box, config, Icon, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
 import React, { MouseEventHandler, ReactNode, useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';

src/app/components/UIAFlowOverlay.tsx

@@ -1,6 +1,17 @@
 import React, { ReactNode } from 'react';
-import { Overlay, OverlayBackdrop, Box, config, Text, TooltipProvider, Tooltip, Chip, IconButton } from 'folds';
-import { Icons, Icon } from './icons';
+import {
+  Overlay,
+  OverlayBackdrop,
+  Box,
+  config,
+  Text,
+  TooltipProvider,
+  Tooltip,
+  Icons,
+  Icon,
+  Chip,
+  IconButton,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 
 export type UIAFlowOverlayProps = {

src/app/components/account-switcher/AccountSwitcher.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Avatar, Box, MenuItem, Text, config } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Avatar, Box, Icon, Icons, MenuItem, Text, config } from 'folds';
 import { useAtomValue } from 'jotai';
 import { sessionsAtom, Session } from '../../state/sessions';
 import { setLocalStorageItem } from '../../state/utils/atomWithLocalStorage';

src/app/components/create-room/AdditionalCreatorInput.tsx

@@ -1,5 +1,20 @@
-import { Box, Button, Chip, config, Input, Line, Menu, MenuItem, PopOut, RectCords, Scroll, Text, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Line,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Scroll,
+  Text,
+  toRem,
+} from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';
 import React, {

src/app/components/create-room/CreateRoomAliasInput.tsx

@@ -7,8 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
-import { Box, color, Input, Spinner, Text, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, color, Icon, Icons, Input, Spinner, Text, toRem } from 'folds';
 import { isKeyHotkey } from 'is-hotkey';
 import { getMxIdServer } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/create-room/CreateRoomKindSelector.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Box, Text, config } from 'folds';
-import { Icon, Icons, IconSrc } from '../icons';
+import { Box, Text, Icon, Icons, config, IconSrc } from 'folds';
 import { SequenceCard } from '../sequence-card';
 import { SettingTile } from '../setting-tile';
 

src/app/components/create-room/RoomVersionSelector.tsx

@@ -1,6 +1,17 @@
 import React, { MouseEventHandler, useState } from 'react';
-import { Box, Button, Chip, config, Menu, PopOut, RectCords, Text, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Box,
+  Button,
+  Chip,
+  config,
+  Icon,
+  Icons,
+  Menu,
+  PopOut,
+  RectCords,
+  Text,
+  toRem,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { SettingTile } from '../setting-tile';
 import { SequenceCard } from '../sequence-card';

src/app/components/direct-list/DirectList.tsx

@@ -1,7 +1,20 @@
 import React, { MouseEventHandler, forwardRef, useMemo, useState } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
-import { Avatar, Box, Button, IconButton, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Avatar,
+  Box,
+  Button,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Text,
+  config,
+  toRem,
+} from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
 import { useNavigate } from 'react-router-dom';

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

@@ -1,8 +1,17 @@
 import React, { useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { config, IconButton, Line, Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
+import {
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Line,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+} from 'folds';
 
-import { Icon, Icons } from '../icons';
 import { CustomEditor, useEditor } from './Editor';
 import { Toolbar } from './Toolbar';
 import { stopPropagation } from '../../utils/keyboard';

src/app/components/editor/Editor.tsx

@@ -85,8 +85,6 @@ type CustomEditorProps = {
   before?: ReactNode;
   after?: ReactNode;
   maxHeight?: string;
-  /** Stretch the editable area to fill the parent (e.g. post modal). */
-  fillHeight?: boolean;
   editor: Editor;
   placeholder?: string;
   onKeyDown?: KeyboardEventHandler;
@@ -103,7 +101,6 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       before,
       after,
       maxHeight = '50vh',
-      fillHeight = false,
       editor,
       placeholder,
       onKeyDown,
@@ -226,27 +223,11 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       []
     );
 
-    const scrollStyle = fillHeight
-      ? { flex: '1 1 auto', minHeight: maxHeight, height: '100%' }
-      : { maxHeight };
-
     return (
-      <div
-        className={css.Editor}
-        ref={ref}
-        style={
-          fillHeight
-            ? { display: 'flex', flexDirection: 'column', height: '100%', minHeight: maxHeight }
-            : undefined
-        }
-      >
+      <div className={css.Editor} ref={ref}>
         <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
           {top}
-          <Box
-            alignItems="Start"
-            grow={fillHeight ? 'Yes' : undefined}
-            style={fillHeight ? { width: '100%', minHeight: 0, flex: '1 1 auto' } : undefined}
-          >
+          <Box alignItems="Start">
             {before && (
               <Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
                 {before}
@@ -255,7 +236,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
             <Scroll
               className={css.EditorTextareaScroll}
               variant="SurfaceVariant"
-              style={scrollStyle}
+              style={{ maxHeight }}
               size="300"
               visibility="Hover"
               hideTrack

src/app/components/editor/Toolbar.tsx

@@ -1,6 +1,22 @@
 import FocusTrap from 'focus-trap-react';
-import { Badge, Box, config, IconButton, Line, Menu, PopOut, RectCords, Scroll, Text, Tooltip, TooltipProvider, toRem } from 'folds';
-import { Icon, Icons, IconSrc } from '../icons';
+import {
+  Badge,
+  Box,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  IconSrc,
+  Line,
+  Menu,
+  PopOut,
+  RectCords,
+  Scroll,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  toRem,
+} from 'folds';
 import React, { MouseEventHandler, ReactNode, useState } from 'react';
 import { ReactEditor, useSlate } from 'slate-react';
 import {

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

@@ -1,7 +1,6 @@
 import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
 import { Editor } from 'slate';
-import { Avatar, MenuItem, Text } from 'folds';
-import { Icon, Icons } from '../../icons';
+import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
 import { JoinRule, MatrixClient } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 

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

@@ -1,7 +1,6 @@
 import React, { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react';
 import { Editor } from 'slate';
-import { Avatar, MenuItem, Text } from 'folds';
-import { Icon, Icons } from '../../icons';
+import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 
 import { AutocompleteQuery } from './autocompleteQuery';

src/app/components/emoji-board/EmojiBoard.tsx

@@ -9,8 +9,7 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { Box, config, Scroll } from 'folds';
-import { Icons } from '../icons';
+import { Box, config, Icons, Scroll } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { Room } from 'matrix-js-sdk';

src/app/components/emoji-board/components/NoStickerPacks.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Box, toRem, config, Text } from 'folds';
+import { Box, toRem, config, Icons, Icon, Text } from 'folds';
 
-import { Icons, Icon } from '../../icons';
 export function NoStickerPacks() {
   return (
     <Box

src/app/components/emoji-board/components/SearchInput.tsx

@@ -1,6 +1,5 @@
 import React, { ChangeEventHandler, useRef } from 'react';
-import { Input, Chip, Text } from 'folds';
-import { Icon, Icons } from '../../icons';
+import { Input, Chip, Icon, Icons, Text } from 'folds';
 import { mobileOrTablet } from '../../../utils/user-agent';
 
 type SearchInputProps = {

src/app/components/emoji-board/components/Sidebar.tsx

@@ -1,6 +1,17 @@
 import React, { ReactNode } from 'react';
-import { Box, Scroll, Line, as, TooltipProvider, Tooltip, Text, IconButton } from 'folds';
-import { Icon, IconSrc, Icons } from '../../icons';
+import {
+  Box,
+  Scroll,
+  Line,
+  as,
+  TooltipProvider,
+  Tooltip,
+  Text,
+  IconButton,
+  Icon,
+  IconSrc,
+  Icons,
+} from 'folds';
 import classNames from 'classnames';
 import * as css from './styles.css';
 

src/app/components/emoji-board/useEmojiGroupIcons.ts

@@ -1,6 +1,5 @@
-import { IconSrc, Icons } from '../icons';
 import { useMemo } from 'react';
-
+import { IconSrc, Icons } from 'folds';
 
 import { EmojiGroupId } from '../../plugins/emoji';
 

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

@@ -1,7 +1,18 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Avatar, Box, Header, IconButton, MenuItem, Scroll, Text, as, config } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Avatar,
+  Box,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  MenuItem,
+  Scroll,
+  Text,
+  as,
+  config,
+} from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
 import { getMemberDisplayName } from '../../utils/room';

src/app/components/icons/Icon.tsx

@@ -1,41 +0,0 @@
-import React, { CSSProperties, forwardRef } from 'react';
-import classNames from 'classnames';
-import type { LucideIcon } from 'lucide-react';
-import { ICON_PIXEL_SIZES } from './iconSizes';
-import type { IconSize } from './types';
-import * as iconStyles from './style.css';
-
-export type IconProps = {
-  src: LucideIcon;
-  size?: IconSize;
-  filled?: boolean;
-  className?: string;
-  style?: CSSProperties;
-  fill?: string;
-} & Omit<React.SVGAttributes<SVGSVGElement>, 'fill'>;
-
-export const Icon = forwardRef<SVGSVGElement, IconProps>(
-  ({ className, size = '400', filled = false, src: LucideIconComponent, style, fill, ...props }, ref) => {
-    const pixelSize = ICON_PIXEL_SIZES[size];
-
-    return (
-      <LucideIconComponent
-        ref={ref}
-        className={classNames(iconStyles.Icon({ size }), className)}
-        style={
-          size === 'Inherit'
-            ? { width: '1em', height: '1em', ...style }
-            : pixelSize
-              ? { width: pixelSize, height: pixelSize, ...style }
-              : style
-        }
-        strokeWidth={2}
-        fill={fill ?? (filled ? 'currentColor' : 'none')}
-        aria-hidden={props['aria-hidden'] ?? props['aria-label'] ? undefined : true}
-        {...props}
-      />
-    );
-  }
-);
-
-Icon.displayName = 'Icon';

src/app/components/icons/iconSizes.ts

@@ -1,12 +0,0 @@
-import type { IconSize } from './types';
-
-export const ICON_PIXEL_SIZES: Record<IconSize, number | undefined> = {
-  '50': 10,
-  '100': 12,
-  '200': 16,
-  '300': 20,
-  '400': 24,
-  '500': 28,
-  '600': 32,
-  Inherit: undefined,
-};

src/app/components/icons/index.ts

@@ -1,4 +0,0 @@
-export { Icon } from './Icon';
-export type { IconProps } from './Icon';
-export { Icons } from './lucideIcons';
-export type { IconName, IconSrc, IconSize } from './types';

src/app/components/icons/lucideIcons.ts

@@ -1,238 +0,0 @@
-import {
-  ArrowDown,
-  ArrowLeft,
-  ArrowRight,
-  ArrowUp,
-  ArrowUpDown,
-  AtSign,
-  Ban,
-  Bell,
-  BellDot,
-  BellOff,
-  BellRing,
-  Bold,
-  Bookmark,
-  Boxes,
-  CaseSensitive,
-  Check,
-  CheckCheck,
-  ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronUp,
-  Circle,
-  CirclePlus,
-  Clock,
-  Code,
-  Code2,
-  Compass,
-  CornerUpLeft,
-  CornerUpRight,
-  Download,
-  ExternalLink,
-  Eye,
-  EyeOff,
-  File,
-  FileText,
-  Filter,
-  Flag,
-  Globe,
-  Hash,
-  Heading1,
-  Heading2,
-  Heading3,
-  Headphones,
-  Heart,
-  History,
-  Home,
-  Image,
-  ImagePlay,
-  Inbox,
-  Info,
-  Italic,
-  Leaf,
-  Lightbulb,
-  Link,
-  List,
-  ListOrdered,
-  Lock,
-  LogOut,
-  Mail,
-  MailPlus,
-  MessageSquare,
-  MessageSquareDot,
-  MessageSquarePlus,
-  MessagesSquare,
-  Mic,
-  MicOff,
-  Minus,
-  Monitor,
-  MoreHorizontal,
-  MoreVertical,
-  Paperclip,
-  Pause,
-  Pencil,
-  Phone,
-  Pin,
-  Play,
-  Plus,
-  Power,
-  Quote,
-  RefreshCw,
-  Reply,
-  Search,
-  Send,
-  Server,
-  Settings,
-  Shield,
-  ShieldUser,
-  Smile,
-  SmilePlus,
-  Sparkles,
-  Star,
-  Strikethrough,
-  Sun,
-  Terminal,
-  Trash2,
-  TriangleAlert,
-  Trophy,
-  Type,
-  Underline,
-  User,
-  UserPlus,
-  Video,
-  VideoOff,
-  Volume2,
-  VolumeX,
-  X,
-} from 'lucide-react';
-
-export const Icons = {
-  Alphabet: CaseSensitive,
-  AlphabetUnderline: Underline,
-  ArrowBottom: ArrowDown,
-  ArrowDropBottom: ChevronDown,
-  ArrowDropLeft: ChevronLeft,
-  ArrowDropRight: ChevronRight,
-  ArrowDropTop: ChevronUp,
-  ArrowGoLeft: CornerUpLeft,
-  ArrowGoRight: CornerUpRight,
-  ArrowGoRightCross: LogOut,
-  ArrowGoRightPlus: ExternalLink,
-  ArrowLeft,
-  ArrowRight,
-  ArrowTop: ArrowUp,
-  ArrowUpDown,
-  Attachment: Paperclip,
-  Ball: Circle,
-  Bell,
-  BellMute: BellOff,
-  BellPing: BellDot,
-  BellRing,
-  BlockCode: Code,
-  BlockQuote: Quote,
-  Bold,
-  Bookmark,
-  Bulb: Lightbulb,
-  Category: Boxes,
-  Check,
-  CheckTwice: CheckCheck,
-  ChevronBottom: ChevronDown,
-  ChevronLeft,
-  ChevronRight,
-  ChevronTop: ChevronUp,
-  Clock,
-  Code: Code2,
-  Cross: X,
-  Cup: Trophy,
-  Delete: Trash2,
-  Download,
-  Explore: Compass,
-  External: ExternalLink,
-  Eye,
-  EyeBlind: EyeOff,
-  File,
-  Filter,
-  Flag,
-  Funnel: Filter,
-  Hash,
-  HashGlobe: Globe,
-  HashLock: Lock,
-  HashPlus: CirclePlus,
-  HashSearch: Search,
-  Heading1,
-  Heading2,
-  Heading3,
-  Headphone: Headphones,
-  Heart,
-  Home,
-  HorizontalDots: MoreHorizontal,
-  Inbox,
-  Info,
-  Italic,
-  Leaf,
-  Link,
-  Lock,
-  Mail,
-  MailPlus,
-  Markdown: FileText,
-  Mention: AtSign,
-  Message: MessageSquare,
-  MessageUnread: MessageSquareDot,
-  Mic,
-  MicMute: MicOff,
-  Minus,
-  Monitor,
-  NoEntry: Ban,
-  OrderList: ListOrdered,
-  Pause,
-  Peace: Sparkles,
-  Pencil,
-  Phone,
-  Photo: Image,
-  Pin,
-  Play,
-  Plus,
-  PlusCircle: CirclePlus,
-  Power,
-  Prohibited: Ban,
-  RecentClock: History,
-  Reload: RefreshCw,
-  ReplyArrow: Reply,
-  Search,
-  Send,
-  Server,
-  Setting: Settings,
-  Shield,
-  ShieldLock: Lock,
-  ShieldUser,
-  Smile,
-  SmilePlus,
-  Sort: ArrowUpDown,
-  Space: Boxes,
-  SpaceGlobe: Globe,
-  SpaceLock: Lock,
-  SpacePlus: Plus,
-  SpaceSearch: Search,
-  Star,
-  Sticker: Sparkles,
-  Strike: Strikethrough,
-  Sun,
-  Terminal,
-  Text: Type,
-  Thread: MessagesSquare,
-  ThreadPlus: MessageSquarePlus,
-  ThreadUnread: MessageSquareDot,
-  Underline,
-  UnorderList: List,
-  User,
-  UserPlus,
-  VerticalDots: MoreVertical,
-  VideoCamera: Video,
-  VideoCameraMute: VideoOff,
-  Vlc: Play,
-  VolumeHigh: Volume2,
-  VolumeMute: VolumeX,
-  Warning: TriangleAlert,
-  ImagePlay,
-} as const;

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

@@ -1,25 +0,0 @@
-import { recipe } from '@vanilla-extract/recipes';
-import { config } from 'folds';
-
-export const Icon = recipe({
-  base: {
-    display: 'inline-block',
-    flexShrink: 0,
-    verticalAlign: 'middle',
-  },
-  variants: {
-    size: {
-      '50': { width: config.size.X50, height: config.size.X50 },
-      '100': { width: config.size.X100, height: config.size.X100 },
-      '200': { width: config.size.X200, height: config.size.X200 },
-      '300': { width: config.size.X300, height: config.size.X300 },
-      '400': { width: config.size.X400, height: config.size.X400 },
-      '500': { width: config.size.X500, height: config.size.X500 },
-      '600': { width: config.size.X600, height: config.size.X600 },
-      Inherit: { width: '1em', height: '1em' },
-    },
-  },
-  defaultVariants: {
-    size: '400',
-  },
-});

src/app/components/icons/types.ts

@@ -1,5 +0,0 @@
-import type { LucideIcon } from 'lucide-react';
-
-export type IconSrc = LucideIcon;
-export type IconSize = '50' | '100' | '200' | '300' | '400' | '500' | '600' | 'Inherit';
-export type IconName = keyof typeof import('./lucideIcons').Icons;

src/app/components/image-editor/ImageEditor.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Box, Chip, Header, IconButton, Text, as } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
 import * as css from './ImageEditor.css';
 
 export type ImageEditorProps = {

src/app/components/image-pack-view/ImagePackView.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Box, IconButton, Text, Scroll, Chip } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
 import { PackAddress } from '../../plugins/custom-emoji';
 import { Page, PageHeader, PageContent } from '../page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/image-pack-view/ImageTile.tsx

@@ -1,6 +1,5 @@
 import React, { FormEventHandler, ReactNode, useMemo, useState } from 'react';
-import { Badge, Box, Button, Chip, Input, Text } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds';
 import { UsageSwitcher, useUsageStr } from './UsageSwitcher';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import * as css from './style.css';

src/app/components/image-pack-view/PackMeta.tsx

@@ -1,6 +1,16 @@
 import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
-import { Box, Text, Avatar, AvatarFallback, Button, Input, TextArea, Chip } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Box,
+  Text,
+  Avatar,
+  AvatarFallback,
+  Button,
+  Icon,
+  Icons,
+  Input,
+  TextArea,
+  Chip,
+} from 'folds';
 import Linkify from 'linkify-react';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/image-pack-view/UsageSwitcher.tsx

@@ -1,6 +1,5 @@
 import React, { MouseEventHandler, useMemo, useState } from 'react';
-import { Box, Button, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { ImageUsage } from '../../plugins/custom-emoji';
 import { stopPropagation } from '../../utils/keyboard';

src/app/components/image-viewer/ImageViewer.tsx

@@ -2,8 +2,7 @@
 import React from 'react';
 import FileSaver from 'file-saver';
 import classNames from 'classnames';
-import { Box, Chip, Header, IconButton, Text, as } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
 import * as css from './ImageViewer.css';
 import { useZoom } from '../../hooks/useZoom';
 import { usePan } from '../../hooks/usePan';

src/app/components/invite-user-prompt/InviteUserPrompt.tsx

@@ -7,8 +7,28 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Overlay, OverlayBackdrop, OverlayCenter, Box, Header, config, Text, IconButton, Input, Button, Spinner, color, TextArea, Dialog, Menu, toRem, Scroll, MenuItem } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Box,
+  Header,
+  config,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Input,
+  Button,
+  Spinner,
+  color,
+  TextArea,
+  Dialog,
+  Menu,
+  toRem,
+  Scroll,
+  MenuItem,
+} from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';

src/app/components/join-address-prompt/JoinAddressPrompt.tsx

@@ -1,7 +1,21 @@
 import React, { FormEventHandler, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, Button, Input, color } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Dialog,
+  Overlay,
+  OverlayCenter,
+  OverlayBackdrop,
+  Header,
+  config,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Button,
+  Input,
+  color,
+} from 'folds';
 import { stopPropagation } from '../../utils/keyboard';
 import { isRoomAlias, isRoomId } from '../../utils/matrix';
 import { parseMatrixToRoom, parseMatrixToRoomEvent, testMatrixTo } from '../../plugins/matrix-to';

src/app/components/join-space-prompt/JoinSpacePrompt.tsx

@@ -1,7 +1,25 @@
 import React, { useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner, Scroll, Checkbox, Avatar, Badge } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Dialog,
+  Overlay,
+  OverlayCenter,
+  OverlayBackdrop,
+  Header,
+  config,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  color,
+  Button,
+  Spinner,
+  Scroll,
+  Checkbox,
+  Avatar,
+  Badge,
+} from 'folds';
 import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';

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

@@ -1,7 +1,21 @@
 import React, { useCallback, useEffect } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner } from 'folds';
-import { Icon, Icons } from '../icons';
+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';

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

@@ -1,7 +1,21 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Dialog,
+  Overlay,
+  OverlayCenter,
+  OverlayBackdrop,
+  Header,
+  config,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  color,
+  Button,
+  Spinner,
+} from 'folds';
 import { MatrixError, Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/manage-rooms-prompt/ManageRoomsPrompt.tsx

@@ -1,7 +1,26 @@
 import React, { useMemo, useState, useCallback, useRef, useEffect, MouseEvent } from 'react';
 import FocusTrap from 'focus-trap-react';
-import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner, Scroll, Checkbox, Badge, Line, Avatar } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Dialog,
+  Overlay,
+  OverlayCenter,
+  OverlayBackdrop,
+  Header,
+  config,
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  color,
+  Button,
+  Spinner,
+  Scroll,
+  Checkbox,
+  Badge,
+  Line,
+  Avatar,
+} from 'folds';
 import { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';

src/app/components/media/Video.tsx

@@ -1,8 +1,7 @@
 import React, { VideoHTMLAttributes, forwardRef, useRef, useState, useEffect } from 'react';
 
 import classNames from 'classnames';
-import { Box, IconButton, Tooltip, TooltipProvider, Text } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, IconButton, Icon, Icons, Tooltip, TooltipProvider, Text } from 'folds';
 import * as css from './media.css';
 import * as videoCss from './videoControls.css';
 

src/app/components/member-tile/MemberTile.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
-import { as, Avatar, Box, Text } from 'folds';
-import { Icon, Icons } from '../icons';
+import { as, Avatar, Box, Icon, Icons, Text } from 'folds';
 import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 import { getMemberDisplayName } from '../../utils/room';
 import { getMxIdLocalPart } from '../../utils/matrix';

src/app/components/message/FileHeader.tsx

@@ -1,5 +1,4 @@
-import { Badge, Box, IconButton, Spinner, Text, as, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Badge, Box, Icon, IconButton, Icons, Spinner, Text, as, toRem } from 'folds';
 import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FileSaver from 'file-saver';

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,6 +1,5 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { Box, Chip, Text, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+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';

src/app/components/message/Reply.tsx

@@ -1,5 +1,4 @@
-import { Box, Text, as, color, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
 import { EventTimelineSet, Room } from 'matrix-js-sdk';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
 import classNames from 'classnames';

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

@@ -1,7 +1,6 @@
 /* eslint-disable jsx-a11y/media-has-caption */
 import React, { ReactNode, useCallback, useRef, useState } from 'react';
-import { Badge, Chip, IconButton, ProgressBar, Spinner, Text, toRem } from 'folds';
-import { Icon, Icons } from '../../icons';
+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';

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

@@ -1,5 +1,4 @@
-import { Box } from 'folds';
-import { Icon, IconSrc } from '../../icons';
+import { Box, Icon, IconSrc } from 'folds';
 import React, { ReactNode } from 'react';
 import { BubbleLayout, CompactLayout, ModernLayout } from '..';
 import { MessageLayout } from '../../../state/settings';

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

@@ -1,5 +1,4 @@
-import { Box, Text, as, color, config } from 'folds';
-import { Icon, Icons } from '../../icons';
+import { Box, Icon, Icons, Text, as, color, config } from 'folds';
 import React from 'react';
 
 const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };

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

@@ -1,6 +1,19 @@
 import React, { ReactNode, useCallback, useState } from 'react';
-import { Box, Button, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
-import { Icon, Icons } from '../../icons';
+import {
+  Box,
+  Button,
+  Icon,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Spinner,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  as,
+} from 'folds';
 import FileSaver from 'file-saver';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FocusTrap from 'focus-trap-react';

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

@@ -1,6 +1,21 @@
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
-import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
-import { Icon, Icons } from '../../icons';
+import {
+  Badge,
+  Box,
+  Button,
+  Chip,
+  Icon,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Spinner,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  as,
+} from 'folds';
 import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';

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

@@ -1,6 +1,21 @@
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
-import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
-import { Icon, Icons } from '../../icons';
+import {
+  Badge,
+  Box,
+  Button,
+  Chip,
+  Icon,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Spinner,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  as,
+} from 'folds';
 import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';

src/app/components/message/layout/Base.tsx

@@ -35,7 +35,6 @@ export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?
       size="T400"
       priority={notice ? '300' : '400'}
       className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
-      data-allow-text-selection="true"
       {...props}
       ref={ref}
     />

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

@@ -215,8 +215,6 @@ export const MessageTextBody = recipe({
     overflow: 'clip',
     overflowY: 'clip',
     lineHeight: '1.5',
-    userSelect: 'text',
-    WebkitUserSelect: 'text',
   },
   variants: {
     preWrap: {

src/app/components/page/Page.tsx

@@ -28,18 +28,14 @@ export function PageRoot({ nav, children }: PageRootProps) {
 type ClientDrawerLayoutProps = {
   children: ReactNode;
 };
-export function PageNav({
-  size,
-  children,
-  className,
-}: ClientDrawerLayoutProps & css.PageNavVariants & { className?: string }) {
+export function PageNav({ size, children }: ClientDrawerLayoutProps & css.PageNavVariants) {
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 
   return (
     <Box
       grow={isMobile ? 'Yes' : undefined}
-      className={classNames(css.PageNav({ size }), className)}
+      className={css.PageNav({ size })}
       shrink={isMobile ? 'Yes' : 'No'}
     >
       <Box grow="Yes" direction="Column">
@@ -64,12 +60,10 @@ export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
 
 export function PageNavContent({
   scrollRef,
-  scrollProps,
   children,
 }: {
   children: ReactNode;
   scrollRef?: MutableRefObject<HTMLDivElement | null>;
-  scrollProps?: React.ComponentProps<typeof Scroll>;
 }) {
   return (
     <Box grow="Yes" direction="Column">
@@ -80,7 +74,6 @@ export function PageNavContent({
         size="300"
         hideTrack
         visibility="Hover"
-        {...scrollProps}
       >
         <div className={css.PageNavContent}>{children}</div>
       </Scroll>

src/app/components/password-input/PasswordInput.tsx

@@ -1,6 +1,5 @@
 import React, { ComponentProps, forwardRef } from 'react';
-import { IconButton, Input, config } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Icon, IconButton, Input, config, Icons } from 'folds';
 import { UseStateProvider } from '../UseStateProvider';
 
 type PasswordInputProps = Omit<ComponentProps<typeof Input>, 'type' | 'size'> & {

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

@@ -1,6 +1,5 @@
 import { JoinRule } from 'matrix-js-sdk';
-import { AvatarFallback, AvatarImage, color } from 'folds';
-import { Icon, Icons } from '../icons';
+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';

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

@@ -1,7 +1,22 @@
 import React, { ReactNode, useCallback, useRef, useState } from 'react';
 import { MatrixError, Room } from 'matrix-js-sdk';
-import { Avatar, Badge, Box, Button, Dialog, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, as, color, config } from 'folds';
-import { Icon, Icons } from '../icons';
+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';
@@ -151,7 +166,6 @@ export const RoomCard = as<'div', RoomCardProps>(
     const useAuthentication = useMediaAuthentication();
     const joinedRoomId = useJoinedRoomId(allRooms, roomIdOrAlias);
     const joinedRoom = mx.getRoom(joinedRoomId);
-    const createEvent = joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomCreate) : undefined;
     const [topicEvent, setTopicEvent] = useState(() =>
       joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomTopic) : undefined
     );
@@ -196,8 +210,6 @@ export const RoomCard = as<'div', RoomCardProps>(
 
     const [showSpaceJoinPrompt, setShowSpaceJoinPrompt] = useState(false);
     const isSpace = roomType === RoomType.Space || joinedRoom?.isSpaceRoom();
-    const isForum =
-      roomType === RoomType.Forum || createEvent?.getContent<{ type?: string }>().type === RoomType.Forum;
 
     const handleJoinClick = () => {
       if (isSpace) {
@@ -240,11 +252,6 @@ export const RoomCard = as<'div', RoomCardProps>(
               <Text size="L400">Space</Text>
             </Badge>
           )}
-          {isForum && (
-            <Badge variant="Secondary" fill="Soft" outlined>
-              <Text size="L400">Forum</Text>
-            </Badge>
-          )}
         </Box>
         <Box grow="Yes" direction="Column" gap="100">
           <RoomCardName>{roomName}</RoomCardName>

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import { as, Box, Header, IconButton, Modal, Scroll, Text } from 'folds';
-import { Icon, Icons } from '../icons';
+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';

src/app/components/speech-bubble/SpeechBubble.css.ts

@@ -1,60 +0,0 @@
-import { globalStyle, style } from '@vanilla-extract/css';
-import { color, config, toRem } from 'folds';
-
-const tailTopBase = {
-  content: '""',
-  position: 'absolute' as const,
-  top: toRem(-5),
-  left: 'var(--speech-tail-x, 50%)',
-  transform: 'translateX(-50%) rotate(45deg)',
-  width: toRem(10),
-  height: toRem(10),
-};
-
-export const SpeechBubble = style({
-  position: 'relative',
-  padding: `${toRem(8)} ${toRem(12)}`,
-  backgroundColor: color.SurfaceVariant.Container,
-  color: color.SurfaceVariant.OnContainer,
-  borderRadius: config.radii.R300,
-  boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
-});
-
-export const SpeechBubbleTailTop = style({
-  selectors: {
-    '&::before': {
-      ...tailTopBase,
-      backgroundColor: color.SurfaceVariant.Container,
-    },
-  },
-});
-
-/** Popover menus (kebab, etc.) — surface matches folds Menu. */
-export const SpeechBubbleMenu = style({
-  position: 'relative',
-  padding: 0,
-  backgroundColor: color.Surface.Container,
-  color: color.Surface.OnContainer,
-  borderRadius: config.radii.R400,
-  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-  boxShadow: '0 10px 28px rgb(0 0 0 / 28%), 0 2px 6px rgb(0 0 0 / 12%)',
-  overflow: 'visible',
-});
-
-export const SpeechBubbleMenuTailTop = style({
-  selectors: {
-    '&::before': {
-      ...tailTopBase,
-      backgroundColor: color.Surface.Container,
-      borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-      borderTop: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-    },
-  },
-});
-
-globalStyle(`${SpeechBubbleMenu} > *`, {
-  background: 'transparent',
-  border: 'none',
-  boxShadow: 'none',
-});
-

src/app/components/speech-bubble/SpeechBubble.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import * as css from './SpeechBubble.css';
-
-type SpeechBubbleProps = {
-  children: React.ReactNode;
-  className?: string;
-  /** `menu` for dropdowns; `tooltip` for hover cards. */
-  variant?: 'tooltip' | 'menu';
-  /** Tail position. Currently only 'top' is implemented. */
-  tail?: 'top' | 'none';
-  /** Percentage string, e.g. '50%'. */
-  tailX?: string;
-  style?: React.CSSProperties;
-};
-
-export function SpeechBubble({
-  children,
-  className,
-  variant = 'tooltip',
-  tail = 'top',
-  tailX,
-  style,
-}: SpeechBubbleProps) {
-  const isMenu = variant === 'menu';
-
-  return (
-    <div
-      className={classNames(
-        isMenu ? css.SpeechBubbleMenu : css.SpeechBubble,
-        tail === 'top' ? (isMenu ? css.SpeechBubbleMenuTailTop : css.SpeechBubbleTailTop) : undefined,
-        className
-      )}
-      style={{
-        ...(tailX ? ({ ['--speech-tail-x' as string]: tailX } as React.CSSProperties) : null),
-        ...style,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-

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

@@ -1,8 +1,7 @@
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import React, { ComponentProps, HTMLAttributes, Suspense, forwardRef, lazy } from 'react';
 import classNames from 'classnames';
-import { Box, Chip, Header, IconButton, Scroll, Text, as } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Chip, Header, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
 import { ErrorBoundary } from 'react-error-boundary';
 import * as css from './TextViewer.css';
 import { copyToClipboard } from '../../utils/dom';

src/app/components/title-bar/WindowControls.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, IconButton } from 'folds';
-import { Icon } from '../icons';
+import { Box, IconButton, Icon } from 'folds';
 import { invoke } from '@tauri-apps/api/core';
 import * as css from './WindowControls.css';
 

src/app/components/uia-stages/PasswordStage.tsx

@@ -1,5 +1,4 @@
-import { Box, Button, color, config, Dialog, Header, IconButton, Text } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
 import React, { FormEventHandler } from 'react';
 import { AuthType } from 'matrix-js-sdk';
 import { StageComponentProps } from './types';

src/app/components/uia-stages/SSOStage.tsx

@@ -1,6 +1,5 @@
 import { openExternalUrl } from '../../utils/tauri';
-import { Box, Button, color, config, Dialog, Header, IconButton, Text } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
 import React, { useCallback, useEffect, useState } from 'react';
 import { StageComponentProps } from './types';
 

src/app/components/upload-board/UploadBoard.tsx

@@ -1,6 +1,5 @@
 import React, { MutableRefObject, ReactNode, useImperativeHandle, useRef } from 'react';
-import { Badge, Box, Chip, Header, Spinner, Text, as, percent } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Badge, Box, Chip, Header, Icon, Icons, Spinner, Text, as, percent } from 'folds';
 import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 

src/app/components/upload-card/CompactUploadCardRenderer.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from 'react';
-import { Chip, IconButton, Text, color } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
 import { UploadCard, UploadCardError, CompactUploadCardProgress } from './UploadCard';
 import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

src/app/components/upload-card/UploadCard.tsx

@@ -1,5 +1,4 @@
-import { Badge, Box, ProgressBar, Text, percent } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Badge, Box, Icon, Icons, ProgressBar, Text, percent } from 'folds';
 import React, { ReactNode, forwardRef } from 'react';
 
 import * as css from './UploadCard.css';

src/app/components/upload-card/UploadCardRenderer.tsx

@@ -1,6 +1,5 @@
 import React, { ReactNode, useEffect } from 'react';
-import { Box, Chip, IconButton, Text, color, config, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
 import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
 import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

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

@@ -1,7 +1,6 @@
 import React, { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
-import { Box, IconButton, Scroll, Spinner, Text, as, color, config } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription, UrlPreviewImg } from './UrlPreview';

src/app/components/url-preview/YouTubeEmbed.tsx

@@ -1,6 +1,5 @@
 import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
-import { Box, Spinner, Text, as } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Icon, Icons, Spinner, Text, as } from 'folds';
 import * as css from './YouTubeEmbed.css';
 import { getYouTubeStream, isYouTubeStreamingAvailable, openExternalUrl } from '../../utils/tauri';
 

src/app/components/user-profile/CreatorChip.tsx

@@ -1,5 +1,4 @@
-import { Chip, color, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Chip, color, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
 import React, { MouseEventHandler, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';

src/app/components/user-profile/PowerChip.tsx

@@ -1,5 +1,26 @@
-import { Box, Button, Chip, color, config, Dialog, Header, IconButton, Line, Menu, MenuItem, Overlay, OverlayBackdrop, OverlayCenter, PopOut, RectCords, Spinner, Text, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Box,
+  Button,
+  Chip,
+  color,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Line,
+  Menu,
+  MenuItem,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  PopOut,
+  RectCords,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
 import React, { MouseEventHandler, useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';

src/app/components/user-profile/UserChips.tsx

@@ -4,8 +4,24 @@ import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { Room } from 'matrix-js-sdk';
-import { PopOut, Menu, MenuItem, color, config, Text, Line, Chip, RectCords, Spinner, toRem, Box, Scroll, Avatar } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  PopOut,
+  Menu,
+  MenuItem,
+  color,
+  config,
+  Text,
+  Line,
+  Chip,
+  Icon,
+  Icons,
+  RectCords,
+  Spinner,
+  toRem,
+  Box,
+  Scroll,
+  Avatar,
+} from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdServer } from '../../utils/matrix';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';

src/app/components/user-profile/UserHero.tsx

@@ -1,6 +1,16 @@
 import React, { useState } from 'react';
-import { Avatar, Box, Modal, Overlay, OverlayBackdrop, OverlayCenter, Text, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import {
+  Avatar,
+  Box,
+  Icon,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  toRem,
+} from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import * as css from './styles.css';

src/app/components/user-profile/UserModeration.tsx

@@ -1,5 +1,4 @@
-import { Box, Button, color, config, Spinner, Text, Input } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds';
 import React, { useCallback, useRef } from 'react';
 import { useRoom } from '../../hooks/useRoom';
 import { CutoutCard } from '../cutout-card';

src/app/components/user-profile/UserRoomProfile.tsx

@@ -1,5 +1,4 @@
-import { Box, Button, color, config, Text, toRem } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Button, color, config, Icon, Icons, Text, toRem } from 'folds';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { UserHero, UserHeroName } from './UserHero';

src/app/components/video-viewer/VideoViewer.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import FileSaver from 'file-saver';
 import classNames from 'classnames';
-import { Box, Chip, Header, IconButton, Text, as } from 'folds';
-import { Icon, Icons } from '../icons';
+import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
 import * as css from './VideoViewer.css';
 import { downloadMedia } from '../../utils/matrix';
 import { getCurrentAccessToken } from '../../utils/auth';

src/app/features/ShareRoomPicker.tsx

@@ -2,8 +2,24 @@ import { useAtomValue } from 'jotai';
 import React, { ChangeEventHandler, useCallback, useMemo, useRef, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
-import { Avatar, Box, Button, Header, IconButton, Input, MenuItem, Modal, Overlay, OverlayBackdrop, OverlayCenter, Scroll, Text, config } from 'folds';
-import { Icon, Icons } from '../components/icons';
+import {
+  Avatar,
+  Box,
+  Button,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Text,
+  config,
+} from 'folds';
 import { useMatrixClient } from '../hooks/useMatrixClient';
 import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
 import { allRoomsAtom } from '../state/room-list/roomList';

src/app/features/add-existing/AddExisting.tsx

@@ -1,6 +1,24 @@
 import FocusTrap from 'focus-trap-react';
-import { Avatar, Box, Button, config, Header, IconButton, Input, Menu, MenuItem, Modal, Overlay, OverlayBackdrop, OverlayCenter, Scroll, Spinner, Text } from 'folds';
-import { Icon, Icons } from '../../components/icons';
+import {
+  Avatar,
+  Box,
+  Button,
+  config,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Menu,
+  MenuItem,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Scroll,
+  Spinner,
+  Text,
+} from 'folds';
 import React, {
   ChangeEventHandler,
   MouseEventHandler,

src/app/features/call/CallOverlay.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, IconButton, Text, Tooltip, TooltipProvider, color } from 'folds';
-import { Icon, Icons } from '../../components/icons';
+import { Box, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider, color } from 'folds';
 import { useAtom } from 'jotai';
 import { useCall } from './useCall';
 import { useRoomCallMembers } from './useRoomCallMembers';

src/app/features/call/DockedCallContent.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Box, IconButton, Text, Tooltip, TooltipProvider, Scroll, color } from 'folds';
-import { Icon, Icons } from '../../components/icons';
+import { Box, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider, Scroll, color } from 'folds';
 import { useSetAtom } from 'jotai';
 import { useCall } from './useCall';
 import { ScreenShareItem, ScreenShareEntry } from './CallOverlay';

src/app/features/call/IncomingCallNotification.tsx

@@ -1,8 +1,7 @@
 /* eslint-disable no-console */
 import React, { useCallback, useEffect, useState } from 'react';
 import { MatrixEvent, Room, RoomStateEvent } from 'matrix-js-sdk';
-import { Box, IconButton, Text, color } from 'folds';
-import { Icon, Icons } from '../../components/icons';
+import { Box, Icon, IconButton, Icons, Text, color } from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useCall } from './useCall';
 import { CallType } from './types';

src/app/features/call/SidebarDockedCallPanel.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Box, IconButton, Scroll, Text, Tooltip, TooltipProvider, color } from 'folds';
-import { Icon, Icons } from '../../components/icons';
+import { Box, Icon, IconButton, Icons, Scroll, Text, Tooltip, TooltipProvider, color } from 'folds';
 import { useSetAtom } from 'jotai';
 import { useCall } from './useCall';
 import { useRoomCallMembers } from './useRoomCallMembers';

src/app/features/common-settings/developer-tools/DevelopTools.tsx

@@ -1,6 +1,23 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { Box, Text, IconButton, Scroll, Switch, Button, MenuItem, config, color, TextArea, Dialog, Overlay, OverlayBackdrop, OverlayCenter, Modal } from 'folds';
-import { Icon, Icons } from '../../../components/icons';
+import {
+  Box,
+  Text,
+  IconButton,
+  Icon,
+  Icons,
+  Scroll,
+  Switch,
+  Button,
+  MenuItem,
+  config,
+  color,
+  TextArea,
+  Dialog,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Modal,
+} from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';

src/app/features/common-settings/developer-tools/SendRoomEvent.tsx

@@ -1,7 +1,19 @@
 import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
-import { Box, Chip, IconButton, Text, config, Button, Spinner, color, TextAreaComponent as TextArea, Input } from 'folds';
-import { Icon, Icons } from '../../../components/icons';
+import {
+  Box,
+  Chip,
+  Icon,
+  Icons,
+  IconButton,
+  Text,
+  config,
+  Button,
+  Spinner,
+  color,
+  TextArea as TextAreaComponent,
+  Input,
+} from 'folds';
 import { Page, PageHeader } from '../../../components/page';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -1,6 +1,18 @@
 import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Text, IconButton, Chip, Scroll, config, TextAreaComponent as TextArea, color, Spinner, Button } from 'folds';
-import { Icon, Icons } from '../../../components/icons';
+import {
+  Box,
+  Text,
+  Icon,
+  Icons,
+  IconButton,
+  Chip,
+  Scroll,
+  config,
+  TextArea as TextAreaComponent,
+  color,
+  Spinner,
+  Button,
+} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { Page, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';

src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
-import { Box, IconButton, Scroll, Text } from 'folds';
-import { Icon, Icons } from '../../../components/icons';
+import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { ImagePack } from '../../../plugins/custom-emoji';
 import { ImagePackView } from '../../../components/image-pack-view';

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -1,6 +1,20 @@
 import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
-import { Box, Text, Button, Avatar, AvatarFallback, toRem, config, Input, Spinner, color, IconButton, Menu } from 'folds';
-import { Icon, Icons } from '../../../components/icons';
+import {
+  Box,
+  Text,
+  Button,
+  Icon,
+  Icons,
+  Avatar,
+  AvatarFallback,
+  toRem,
+  config,
+  Input,
+  Spinner,
+  color,
+  IconButton,
+  Menu,
+} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
 import {

src/app/features/common-settings/general/EmbedFilters.tsx

@@ -1,6 +1,18 @@
 import React, { FormEventHandler, useCallback, useState } from 'react';
-import { Box, Button, Chip, color, config, Input, Spinner, Text, Tooltip, TooltipProvider } from 'folds';
-import { Icon, Icons } from '../../../components/icons';
+import {
+  Box,
+  Button,
+  Chip,
+  color,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Spinner,
+  Text,
+  Tooltip,
+  TooltipProvider,
+} from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';

src/app/features/common-settings/general/RoomAddress.tsx

@@ -1,6 +1,19 @@
 import React, { FormEventHandler, useCallback, useState } from 'react';
-import { Badge, Box, Button, Checkbox, Chip, color, config, Input, Spinner, Text, toRem } from 'folds';
-import { Icon, Icons } from '../../../components/icons';
+import {
+  Badge,
+  Box,
+  Button,
+  Checkbox,
+  Chip,
+  color,
+  config,
+  Icon,
+  Icons,
+  Input,
+  Spinner,
+  Text,
+  toRem,
+} from 'folds';
 import { MatrixError } from 'matrix-js-sdk';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCard } from '../../../components/sequence-card';

src/app/features/common-settings/general/RoomEncryption.tsx

@@ -1,5 +1,20 @@
-import { Badge, Box, Button, color, config, Dialog, Header, IconButton, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text } from 'folds';
-import { Icon, Icons } from '../../../components/icons';
+import {
+  Badge,
+  Box,
+  Button,
+  color,
+  config,
+  Dialog,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Spinner,
+  Text,
+} from 'folds';
 import React, { useCallback, useState } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';