feat: Implement forum feed layout and refactor space navigation logic to support new routing structure

config.json

@@ -9,30 +9,13 @@
     "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": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
+    "servers": []
   },
 
   "hashRouter": {

docs/PLUGIN_API.md

@@ -105,6 +105,7 @@ interface PluginContext {
   pluginId: string;
   matrixClient: MatrixClient;
   React: typeof import('react');
+  lucide: typeof import('lucide-react');
   
   commands: CommandsAPI;
   messages: MessagesAPI;
@@ -416,6 +417,8 @@ 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,6 +27,10 @@
     <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

@@ -13,7 +13,7 @@
         "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
         "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
         "@fontsource/inter": "4.5.14",
-        "@paarrot/plugin-manager": "file:../../PluginManager",
+        "@paarrot/plugin-manager": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git",
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
         "@tanstack/react-virtual": "3.2.0",
@@ -56,6 +56,7 @@
         "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",
@@ -114,15 +115,6 @@
         "node": ">=16.0.0"
       }
     },
-    "../../PluginManager": {
-      "name": "@paarrot/plugin-manager",
-      "version": "1.0.0",
-      "devDependencies": {
-        "@types/node": "^25.6.0",
-        "rimraf": "^5.0.0",
-        "typescript": "^5.4.0"
-      }
-    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -2344,8 +2336,8 @@
       }
     },
     "node_modules/@paarrot/plugin-manager": {
-      "resolved": "../../PluginManager",
-      "link": true
+      "version": "1.0.0",
+      "resolved": "git+http://synbox.ruv.wtf:8418/litruv/plugin-manager.git#6c389381df3966568a40c39d8661f9a4300f7819"
     },
     "node_modules/@react-aria/breadcrumbs": {
       "version": "3.5.20",
@@ -8762,6 +8754,15 @@
         "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

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

src/app/components/BackupRestore.tsx

@@ -1,23 +1,8 @@
 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,
-  Icon,
-  IconButton,
-  Icons,
-  Menu,
-  percent,
-  PopOut,
-  ProgressBar,
-  RectCords,
-  Spinner,
-  Text,
-} from 'folds';
+import { Badge, Box, Button, color, config, IconButton, Menu, percent, PopOut, ProgressBar, RectCords, Spinner, Text } from 'folds';
+import { Icon, Icons } from './icons';
 import FocusTrap from 'focus-trap-react';
 import { BackupProgressStatus, backupRestoreProgressAtom } from '../state/backupRestore';
 import { InfoCard } from './info-card';

src/app/components/DeviceVerification.tsx

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

src/app/components/DeviceVerificationSetup.tsx

@@ -1,18 +1,6 @@
 import React, { FormEventHandler, forwardRef, useCallback, useState } from 'react';
-import {
-  Dialog,
-  Header,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  config,
-  Button,
-  Chip,
-  color,
-  Spinner,
-} from 'folds';
+import { Dialog, Header, Box, Text, IconButton, config, Button, Chip, color, Spinner } from 'folds';
+import { Icon, Icons } from './icons';
 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,18 +1,6 @@
 import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import {
-  config,
-  Box,
-  MenuItem,
-  Text,
-  Icon,
-  Icons,
-  IconSrc,
-  RectCords,
-  PopOut,
-  Menu,
-  Button,
-  Spinner,
-} from 'folds';
+import { config, Box, MenuItem, Text, RectCords, PopOut, Menu, Button, Spinner } from 'folds';
+import { Icon, Icons, IconSrc } from './icons';
 import { JoinRule } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';

src/app/components/ManualVerification.tsx

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

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

@@ -2,24 +2,8 @@
 /* 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,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Menu,
-  PopOut,
-  RectCords,
-  Scroll,
-  Spinner,
-  Text,
-  as,
-  config,
-} from 'folds';
+import { Box, Button, Chip, Header, IconButton, Input, Menu, PopOut, RectCords, Scroll, Spinner, Text, as, config } from 'folds';
+import { Icon, Icons } from '../icons';
 import FocusTrap from 'focus-trap-react';
 import FileSaver from 'file-saver';
 import * as css from './PdfViewer.css';

src/app/components/RoomNotificationSwitcher.tsx

@@ -1,4 +1,5 @@
-import { Box, config, Icon, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Box, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Icon } from './icons';
 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,17 +1,6 @@
 import React, { ReactNode } from 'react';
-import {
-  Overlay,
-  OverlayBackdrop,
-  Box,
-  config,
-  Text,
-  TooltipProvider,
-  Tooltip,
-  Icons,
-  Icon,
-  Chip,
-  IconButton,
-} from 'folds';
+import { Overlay, OverlayBackdrop, Box, config, Text, TooltipProvider, Tooltip, Chip, IconButton } from 'folds';
+import { Icons, Icon } from './icons';
 import FocusTrap from 'focus-trap-react';
 
 export type UIAFlowOverlayProps = {

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

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

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

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

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

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

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

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

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

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

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

@@ -1,20 +1,7 @@
 import React, { MouseEventHandler, forwardRef, useMemo, useState } from 'react';
 import { useAtom, useAtomValue } from 'jotai';
-import {
-  Avatar,
-  Box,
-  Button,
-  Icon,
-  IconButton,
-  Icons,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Text,
-  config,
-  toRem,
-} from 'folds';
+import { Avatar, Box, Button, IconButton, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 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,17 +1,8 @@
 import React, { useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-} from 'folds';
+import { config, IconButton, 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,6 +85,8 @@ 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;
@@ -101,6 +103,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       before,
       after,
       maxHeight = '50vh',
+      fillHeight = false,
       editor,
       placeholder,
       onKeyDown,
@@ -223,11 +226,27 @@ 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}>
+      <div
+        className={css.Editor}
+        ref={ref}
+        style={
+          fillHeight
+            ? { display: 'flex', flexDirection: 'column', height: '100%', minHeight: maxHeight }
+            : undefined
+        }
+      >
         <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
           {top}
-          <Box alignItems="Start">
+          <Box
+            alignItems="Start"
+            grow={fillHeight ? 'Yes' : undefined}
+            style={fillHeight ? { width: '100%', minHeight: 0, flex: '1 1 auto' } : undefined}
+          >
             {before && (
               <Box className={css.EditorOptions} alignItems="Center" gap="100" shrink="No">
                 {before}
@@ -236,7 +255,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
             <Scroll
               className={css.EditorTextareaScroll}
               variant="SurfaceVariant"
-              style={{ maxHeight }}
+              style={scrollStyle}
               size="300"
               visibility="Hover"
               hideTrack

src/app/components/editor/Toolbar.tsx

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

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

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

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

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

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

@@ -9,7 +9,8 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { Box, config, Icons, Scroll } from 'folds';
+import { Box, config, Scroll } from 'folds';
+import { Icons } from '../icons';
 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,6 +1,7 @@
 import React from 'react';
-import { Box, toRem, config, Icons, Icon, Text } from 'folds';
+import { Box, toRem, config, Text } from 'folds';
 
+import { Icons, Icon } from '../../icons';
 export function NoStickerPacks() {
   return (
     <Box

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

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

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

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

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

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

src/app/components/icons/Icon.tsx

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,238 @@
+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

@@ -0,0 +1,25 @@
+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

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
+import { Box, IconButton, Text, Scroll, Chip } from 'folds';
+import { Icon, Icons } from '../icons';
 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,5 +1,6 @@
 import React, { FormEventHandler, ReactNode, useMemo, useState } from 'react';
-import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds';
+import { Badge, Box, Button, Chip, Input, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 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,16 +1,6 @@
 import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
-import {
-  Box,
-  Text,
-  Avatar,
-  AvatarFallback,
-  Button,
-  Icon,
-  Icons,
-  Input,
-  TextArea,
-  Chip,
-} from 'folds';
+import { Box, Text, Avatar, AvatarFallback, Button, Input, TextArea, Chip } from 'folds';
+import { Icon, Icons } from '../icons';
 import Linkify from 'linkify-react';
 import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

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

@@ -1,5 +1,6 @@
 import React, { MouseEventHandler, useMemo, useState } from 'react';
-import { Box, Button, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Box, Button, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 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,7 +2,8 @@
 import React from 'react';
 import FileSaver from 'file-saver';
 import classNames from 'classnames';
-import { Box, Chip, Header, Icon, IconButton, Icons, Text, as } from 'folds';
+import { Box, Chip, Header, IconButton, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
 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,28 +7,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Box,
-  Header,
-  config,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Input,
-  Button,
-  Spinner,
-  color,
-  TextArea,
-  Dialog,
-  Menu,
-  toRem,
-  Scroll,
-  MenuItem,
-} from 'folds';
+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 { 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,21 +1,7 @@
 import React, { FormEventHandler, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
-  Dialog,
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Button,
-  Input,
-  color,
-} from 'folds';
+import { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, Button, Input, color } from 'folds';
+import { Icon, Icons } from '../icons';
 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,25 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
-import {
-  Dialog,
-  Overlay,
-  OverlayCenter,
-  OverlayBackdrop,
-  Header,
-  config,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-  Scroll,
-  Checkbox,
-  Avatar,
-  Badge,
-} from 'folds';
+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 { 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,21 +1,7 @@
 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 { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner } from 'folds';
+import { Icon, Icons } from '../icons';
 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,21 +1,7 @@
 import React, { useCallback, useEffect, useState } 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 { Dialog, Overlay, OverlayCenter, OverlayBackdrop, Header, config, Box, Text, IconButton, color, Button, Spinner } from 'folds';
+import { Icon, Icons } from '../icons';
 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,26 +1,7 @@
 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,
-  Icon,
-  Icons,
-  color,
-  Button,
-  Spinner,
-  Scroll,
-  Checkbox,
-  Badge,
-  Line,
-  Avatar,
-} from 'folds';
+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 { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';

src/app/components/media/Video.tsx

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

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

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

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,5 +1,6 @@
 import React, { CSSProperties, ReactNode } from 'react';
-import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
+import { Box, Chip, Text, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 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,4 +1,5 @@
-import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
+import { Box, Text, as, color, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 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,6 +1,7 @@
 /* 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 { Badge, Chip, IconButton, ProgressBar, Spinner, Text, toRem } from 'folds';
+import { Icon, Icons } from '../../icons';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';

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

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

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

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

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

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

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

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

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

@@ -35,6 +35,7 @@ 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,6 +215,8 @@ export const MessageTextBody = recipe({
     overflow: 'clip',
     overflowY: 'clip',
     lineHeight: '1.5',
+    userSelect: 'text',
+    WebkitUserSelect: 'text',
   },
   variants: {
     preWrap: {

src/app/components/page/Page.tsx

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

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

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

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

@@ -1,5 +1,6 @@
 import { JoinRule } from 'matrix-js-sdk';
-import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
+import { AvatarFallback, AvatarImage, color } from 'folds';
+import { Icon, Icons } from '../icons';
 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,22 +1,7 @@
 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 { Avatar, Badge, Box, Button, Dialog, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, as, color, config } from 'folds';
+import { Icon, Icons } from '../icons';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import * as css from './style.css';
@@ -166,6 +151,7 @@ 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
     );
@@ -210,6 +196,8 @@ 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) {
@@ -252,6 +240,11 @@ 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,5 +1,6 @@
 import React from 'react';
-import { as, Box, Header, Icon, IconButton, Icons, Modal, Scroll, Text } from 'folds';
+import { as, Box, Header, IconButton, Modal, Scroll, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 import classNames from 'classnames';
 import Linkify from 'linkify-react';
 import * as css from './style.css';

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

@@ -0,0 +1,60 @@
+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

@@ -0,0 +1,43 @@
+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,7 +1,8 @@
 /* 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, Icon, IconButton, Icons, Scroll, Text, as } from 'folds';
+import { Box, Chip, Header, IconButton, Scroll, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
 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,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import { Box, IconButton, Icon } from 'folds';
+import { Box, IconButton } from 'folds';
+import { Icon } from '../icons';
 import { invoke } from '@tauri-apps/api/core';
 import * as css from './WindowControls.css';
 

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

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

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

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

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

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

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

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
-import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
+import { Chip, IconButton, Text, color } from 'folds';
+import { Icon, Icons } from '../icons';
 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,4 +1,5 @@
-import { Badge, Box, Icon, Icons, ProgressBar, Text, percent } from 'folds';
+import { Badge, Box, ProgressBar, Text, percent } from 'folds';
+import { Icon, Icons } from '../icons';
 import React, { ReactNode, forwardRef } from 'react';
 
 import * as css from './UploadCard.css';

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

@@ -1,5 +1,6 @@
 import React, { ReactNode, useEffect } from 'react';
-import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
+import { Box, Chip, IconButton, Text, color, config, toRem } from 'folds';
+import { Icon, Icons } from '../icons';
 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,6 +1,7 @@
 import React, { MouseEvent, useCallback, useEffect, useRef, useState } from 'react';
 import { IPreviewUrlResponse } from 'matrix-js-sdk';
-import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
+import { Box, IconButton, Scroll, Spinner, Text, as, color, config } from 'folds';
+import { Icon, Icons } from '../icons';
 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,5 +1,6 @@
 import React, { MouseEvent, useCallback, useEffect, useState } from 'react';
-import { Box, Icon, Icons, Spinner, Text, as } from 'folds';
+import { Box, Spinner, Text, as } from 'folds';
+import { Icon, Icons } from '../icons';
 import * as css from './YouTubeEmbed.css';
 import { getYouTubeStream, isYouTubeStreamingAvailable, openExternalUrl } from '../../utils/tauri';
 

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

@@ -1,4 +1,5 @@
-import { Chip, color, config, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Chip, color, config, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
+import { Icon, Icons } from '../icons';
 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,26 +1,5 @@
-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 { 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 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,24 +4,8 @@ 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,
-  Icon,
-  Icons,
-  RectCords,
-  Spinner,
-  toRem,
-  Box,
-  Scroll,
-  Avatar,
-} from 'folds';
+import { PopOut, Menu, MenuItem, color, config, Text, Line, Chip, RectCords, Spinner, toRem, Box, Scroll, Avatar } from 'folds';
+import { Icon, Icons } from '../icons';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getMxIdServer } from '../../utils/matrix';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';

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

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

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

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

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

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

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

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

src/app/features/ShareRoomPicker.tsx

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

src/app/features/call/CallOverlay.tsx

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

src/app/features/call/DockedCallContent.tsx

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

src/app/features/call/IncomingCallNotification.tsx

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

src/app/features/call/SidebarDockedCallPanel.tsx

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

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

@@ -1,23 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import {
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  Scroll,
-  Switch,
-  Button,
-  MenuItem,
-  config,
-  color,
-  TextArea,
-  Dialog,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Modal,
-} from 'folds';
+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 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,19 +1,7 @@
 import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
-import {
-  Box,
-  Chip,
-  Icon,
-  Icons,
-  IconButton,
-  Text,
-  config,
-  Button,
-  Spinner,
-  color,
-  TextArea as TextAreaComponent,
-  Input,
-} from 'folds';
+import { Box, Chip, IconButton, Text, config, Button, Spinner, color, TextAreaComponent as TextArea, Input } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 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,18 +1,6 @@
 import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Box,
-  Text,
-  Icon,
-  Icons,
-  IconButton,
-  Chip,
-  Scroll,
-  config,
-  TextArea as TextAreaComponent,
-  color,
-  Spinner,
-  Button,
-} from 'folds';
+import { Box, Text, IconButton, Chip, Scroll, config, TextAreaComponent as TextArea, color, Spinner, Button } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 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,5 +1,6 @@
 import React, { useState } from 'react';
-import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
+import { Box, IconButton, Scroll, Text } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 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,20 +1,6 @@
 import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
-import {
-  Box,
-  Text,
-  Button,
-  Icon,
-  Icons,
-  Avatar,
-  AvatarFallback,
-  toRem,
-  config,
-  Input,
-  Spinner,
-  color,
-  IconButton,
-  Menu,
-} from 'folds';
+import { Box, Text, Button, Avatar, AvatarFallback, toRem, config, Input, Spinner, color, IconButton, Menu } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import { MatrixError } from 'matrix-js-sdk';
 import { SequenceCard } from '../../../components/sequence-card';
 import {

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

@@ -1,18 +1,6 @@
 import React, { FormEventHandler, useCallback, useState } from 'react';
-import {
-  Box,
-  Button,
-  Chip,
-  color,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Spinner,
-  Text,
-  Tooltip,
-  TooltipProvider,
-} from 'folds';
+import { Box, Button, Chip, color, config, Input, Spinner, Text, Tooltip, TooltipProvider } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 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,19 +1,6 @@
 import React, { FormEventHandler, useCallback, useState } from 'react';
-import {
-  Badge,
-  Box,
-  Button,
-  Checkbox,
-  Chip,
-  color,
-  config,
-  Icon,
-  Icons,
-  Input,
-  Spinner,
-  Text,
-  toRem,
-} from 'folds';
+import { Badge, Box, Button, Checkbox, Chip, color, config, Input, Spinner, Text, toRem } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 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,20 +1,5 @@
-import {
-  Badge,
-  Box,
-  Button,
-  color,
-  config,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-} from 'folds';
+import { Badge, Box, Button, color, config, Dialog, Header, IconButton, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text } from 'folds';
+import { Icon, Icons } from '../../../components/icons';
 import React, { useCallback, useState } from 'react';
 import { MatrixError } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';