URL navigation in interface and other improvements (#1633)

* load room on url change

* add direct room list

* render space room list

* fix css syntax error

* update scroll virtualizer

* render subspaces room list

* improve sidebar notification badge perf

* add nav category components

* add space recursive direct component

* use nav category component in home, direct and space room list

* add empty home and direct list layout

* fix unread room menu ref

* add more navigation items in room, direct and space tab

* add more navigation

* fix unread room menu to links

* fix space lobby and search link

* add explore navigation section

* add notifications navigation menu

* redirect to initial path after login

* include unsupported room in rooms

* move router hooks in hooks/router folder

* add featured explore - WIP

* load featured room with room summary

* fix room card topic line clamp

* add react query

* load room summary using react query

* add join button in room card

* add content component

* use content component in featured community content

* fix content width

* add responsive room card grid

* fix async callback error status

* add room card error button

* fix client drawer shrink

* add room topic viewer

* open room card topic in viewer

* fix room topic close btn

* add get orphan parent util

* add room card error dialog

* add view featured room or space btn

* refactor orphanParent to orphanParents

* WIP - explore server

* show space hint in room card

* add room type filters

* add per page item limit popout

* reset scroll on public rooms load

* refactor explore ui

* refactor public rooms component

* reset search on server change

* fix typo

* add empty featured section info

* display user server on top

* make server room card view btn clickable

* add user server as default redirect for explore path

* make home empty btn clickable

* add thirdparty instance filter in server explore

* remove since param on instance change

* add server button in explore menu

* rename notifications path to inbox

* update react-virtual

* Add notification messages inbox - WIP

* add scroll top container component

* add useInterval hook

* add visibility change callback prop to scroll top container component

* auto refresh notifications every 10 seconds

* make message related component reusable

* refactor matrix event renderer hoook

* render notification message content

* refactor matrix event renderer hook

* update sequence card styles

* move room navigate hook in global hooks

* add open message button in notifications

* add mark room as read button in notification group

* show error in notification messages

* add more featured spaces

* render reply in notification messages

* make notification message reply clickable

* add outline prop for attachments

* make old settings dialog viewable

* add open featured communities as default config option

* add invite count notification badge in sidebar and inbox menu

* add element size observer hook

* improve element size observer hook props

* improve screen size hook

* fix room avatar util function

* allow Text props in Time component

* fix dm room util function

* add invitations

* add no invites and notification cards

* fix inbox tab unread badge visible without invite count

* update folds and change inbox icon

* memo search param construction

* add message search in home

* fix default message search order

* fix display edited message new content

* highlight search text in search messages

* fix message search loading

* disable log in production

* add use space context

* add useRoom context

* fix space room list

* fix inbox tab active state

* add hook to get space child room recursive

* add search for space

* add virtual tile component

* virtualize home and directs room list

* update nav category component

* use virtual tile component in more places

* fix message highlight when click on reply twice

* virtualize space room list

* fix space room list lag issue

* update folds

* add room nav item component in space room list

* use room nav item in home and direct room list

* make space categories closable and save it in local storage

* show unread room when category is collapsed

* make home and direct room list category closable

* rename room nav item show avatar prop

* fix explore server category text alignment

* rename closedRoomCategories to closedNavCategories

* add nav category handler hook

* save and restore last navigation path on space select

* filter space rooms category by activity when it is closed

* save and restore home and direct nav path state

* save and restore inbox active path on open

* save and restore explore tab active path

* remove notification badge unread menu

* add join room or space before navigate screen

* move room component to features folder and add new room header

* update folds

* add room header menu

* fix home room list activity sorting

* do not hide selected room item on category closed in home and direct tab

* replace old select room/tab call with navigate hook

* improve state event hooks

* show room card summary for joined rooms

* prevent room from opening in wrong tab

* only show message sender id on hover in modern layout

* revert state event hooks changes

* add key prop to room provider components

* add welcome page

* prevent excessive redirects

* fix sidebar style with no spaces

* move room settings in popup window

* remove invite option from room settings

* fix open room list search

* add leave room prompt

* standardize room and user avatar

* fix avatar text size

* add new reply layout

* rename space hierarchy hook

* add room topic hook

* add room name hook

* add room avatar hook and add direct room avatar util

* space lobby - WIP

* hide invalid space child event from space hierarchy in lobby

* move lobby to features

* fix element size observer hook width and height

* add lobby header and hero section

* add hierarchy room item error and loading state

* add first and last child prop in sequence card

* redirect to lobby from index path

* memo and retry hierarchy room summary error

* fix hierarchy room item styles

* rename lobby hierarchy item card to room item card

* show direct room avatar in space lobby

* add hierarchy space item

* add space item unknown room join button

* fix space hierarchy hook refresh after new space join

* change user avatar color and fallback render to user icon

* change room avatar fallback to room icon

* rename room/user avatar renderInitial prop to renderFallback

* add room join and view button in space lobby

* make power level api more reusable

* fix space hierarchy not updating on child update

* add menu to suggest or remove space children

* show reply arrow in place of reply bend in message

* fix typeerror in search because of wrong js-sdk t.ds

* do not refetch hierarchy room summary on window focus

* make room/user avatar un-draggable

* change welcome page support button copy

* drag-and-drop ordering of lobby spaces/rooms - WIP

* add ASCIILexicalTable algorithms

* fix wrong power level check in lobby items options

* fix lobby can drop checks

* fix join button error crash

* fix reply spacing

* fix m direct updated with other account data

* add option to open room/space settings from lobby

* add option in lobby to add new or existing room/spaces

* fix room nav item selected styles

* add space children reorder mechanism

* fix space child reorder bug

* fix hierarchy item sort function

* Apply reorder of lobby into room list

* add and improve space lobby menu items

* add existing spaces menu in lobby

* change restricted room allow params when dragging outside space

* move featured servers config from homeserver list

* removed unused features from space settings

* add canonical alias as name fallback in lobby item

* fix unreliable unread count update bug

* fix after login redirect

* fix room card topic hover style

* Add dnd and folders in sidebar spaces

* fix orphan space not visible in sidebar

* fix sso login has mix of icon and button

* fix space children not  visible in home upon leaving space

* recalculate notification on updating any space child

* fix user color saturation/lightness

* add user color to user avatar

* add background colors to room avatar

* show 2 length initial in sidebar space avatar

* improve link color

* add nav button component

* open legacy create room and create direct

* improve page route structure

* handle hash router in path utils

* mobile friendly router and navigation

* make room header member drawer icon mobile friendly

* setup index redirect for inbox and explore server route

* add leave space prompt

* improve member drawer filter menu

* add space context menu

* add context menu in home

* add leave button in lobby items

* render user tab avatar on sidebar

* force overwrite netlify - test

* netlify test

* fix reset-password path without server redirected to login

* add message link copy button in message menu

* reset unread on sync prepared

* fix stuck typing notifications

* show typing indication in room nav item

* refactor closedNavCategories atom to use userId in store key

* refactor closedLobbyCategoriesAtom to include userId in store key

* refactor navToActivePathAtom to use userId in storage key

* remove unused file

* refactor openedSidebarFolderAtom to include userId in storage key

* add context menu for sidebar space tab

* fix eslint not working

* add option to pin/unpin child spaces

* add context menu for directs tab

* add context menu for direct and home tab

* show lock icon for non-public space in header

* increase matrix max listener count

* wrap lobby add space room in callback hook

src/app/features/message-search/MessageSearch.tsx

@@ -0,0 +1,329 @@
+import React, { RefObject, useEffect, useMemo, useRef } from 'react';
+import { Text, Box, Icon, Icons, config, Spinner, IconButton, Line, toRem } from 'folds';
+import { useAtomValue } from 'jotai';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
+import { SearchOrderBy } from 'matrix-js-sdk';
+import { PageHero, PageHeroSection } from '../../components/page';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { _SearchPathSearchParams } from '../../pages/paths';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { SequenceCard } from '../../components/sequence-card';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { ScrollTopContainer } from '../../components/scroll-top-container';
+import { ContainerColor } from '../../styles/ContainerColor.css';
+import { decodeSearchParamValueArray, encodeSearchParamValueArray } from '../../pages/pathUtils';
+import { useRooms } from '../../state/hooks/roomList';
+import { allRoomsAtom } from '../../state/room-list/roomList';
+import { mDirectAtom } from '../../state/mDirectList';
+import { MessageSearchParams, useMessageSearch } from './useMessageSearch';
+import { SearchResultGroup } from './SearchResultGroup';
+import { SearchInput } from './SearchInput';
+import { SearchFilters } from './SearchFilters';
+import { VirtualTile } from '../../components/virtualizer';
+
+const useSearchPathSearchParams = (searchParams: URLSearchParams): _SearchPathSearchParams =>
+  useMemo(
+    () => ({
+      global: searchParams.get('global') ?? undefined,
+      term: searchParams.get('term') ?? undefined,
+      order: searchParams.get('order') ?? undefined,
+      rooms: searchParams.get('rooms') ?? undefined,
+      senders: searchParams.get('senders') ?? undefined,
+    }),
+    [searchParams]
+  );
+
+type MessageSearchProps = {
+  defaultRoomsFilterName: string;
+  allowGlobal?: boolean;
+  rooms: string[];
+  senders?: string[];
+  scrollRef: RefObject<HTMLDivElement>;
+};
+export function MessageSearch({
+  defaultRoomsFilterName,
+  allowGlobal,
+  rooms,
+  senders,
+  scrollRef,
+}: MessageSearchProps) {
+  const mx = useMatrixClient();
+  const mDirects = useAtomValue(mDirectAtom);
+  const allRooms = useRooms(mx, allRoomsAtom, mDirects);
+  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
+  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const searchPathSearchParams = useSearchPathSearchParams(searchParams);
+  const { navigateRoom } = useRoomNavigate();
+
+  const searchParamRooms = useMemo(() => {
+    if (searchPathSearchParams.rooms) {
+      const joinedRoomIds = decodeSearchParamValueArray(searchPathSearchParams.rooms).filter(
+        (rId) => allRooms.includes(rId)
+      );
+      return joinedRoomIds;
+    }
+    return undefined;
+  }, [allRooms, searchPathSearchParams.rooms]);
+  const searchParamsSenders = useMemo(() => {
+    if (searchPathSearchParams.senders) {
+      return decodeSearchParamValueArray(searchPathSearchParams.senders);
+    }
+    return undefined;
+  }, [searchPathSearchParams.senders]);
+
+  const msgSearchParams: MessageSearchParams = useMemo(() => {
+    const isGlobal = searchPathSearchParams.global === 'true';
+    const defaultRooms = isGlobal ? undefined : rooms;
+
+    return {
+      term: searchPathSearchParams.term,
+      order: searchPathSearchParams.order ?? SearchOrderBy.Recent,
+      rooms: searchParamRooms ?? defaultRooms,
+      senders: searchParamsSenders ?? senders,
+    };
+  }, [searchPathSearchParams, searchParamRooms, searchParamsSenders, rooms, senders]);
+
+  const searchMessages = useMessageSearch(msgSearchParams);
+
+  const { status, data, error, fetchNextPage, hasNextPage, isFetchingNextPage } = useInfiniteQuery({
+    enabled: !!msgSearchParams.term,
+    queryKey: [
+      'search',
+      msgSearchParams.term,
+      msgSearchParams.order,
+      msgSearchParams.rooms,
+      msgSearchParams.senders,
+    ],
+    queryFn: ({ pageParam }) => searchMessages(pageParam),
+    initialPageParam: '',
+    getNextPageParam: (lastPage) => lastPage.nextToken,
+  });
+
+  const groups = useMemo(() => data?.pages.flatMap((result) => result.groups) ?? [], [data]);
+  const highlights = useMemo(() => {
+    const mixed = data?.pages.flatMap((result) => result.highlights);
+    return Array.from(new Set(mixed));
+  }, [data]);
+
+  const virtualizer = useVirtualizer({
+    count: groups.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 40,
+    overscan: 1,
+  });
+  const vItems = virtualizer.getVirtualItems();
+
+  const handleSearch = (term: string) => {
+    setSearchParams((prevParams) => {
+      const newParams = new URLSearchParams(prevParams);
+      newParams.delete('term');
+      newParams.append('term', term);
+      return newParams;
+    });
+  };
+  const handleSearchClear = () => {
+    if (searchInputRef.current) {
+      searchInputRef.current.value = '';
+    }
+    setSearchParams((prevParams) => {
+      const newParams = new URLSearchParams(prevParams);
+      newParams.delete('term');
+      return newParams;
+    });
+  };
+
+  const handleSelectedRoomsChange = (selectedRooms?: string[]) => {
+    setSearchParams((prevParams) => {
+      const newParams = new URLSearchParams(prevParams);
+      newParams.delete('rooms');
+      if (selectedRooms && selectedRooms.length > 0) {
+        newParams.append('rooms', encodeSearchParamValueArray(selectedRooms));
+      }
+      return newParams;
+    });
+  };
+  const handleGlobalChange = (global?: boolean) => {
+    setSearchParams((prevParams) => {
+      const newParams = new URLSearchParams(prevParams);
+      newParams.delete('global');
+      if (global) {
+        newParams.append('global', 'true');
+      }
+      return newParams;
+    });
+  };
+
+  const handleOrderChange = (order?: string) => {
+    setSearchParams((prevParams) => {
+      const newParams = new URLSearchParams(prevParams);
+      newParams.delete('order');
+      if (order) {
+        newParams.append('order', order);
+      }
+      return newParams;
+    });
+  };
+
+  const lastVItem = vItems[vItems.length - 1];
+  const lastVItemIndex: number | undefined = lastVItem?.index;
+  const lastGroupIndex = groups.length - 1;
+  useEffect(() => {
+    if (
+      lastGroupIndex > -1 &&
+      lastGroupIndex === lastVItemIndex &&
+      !isFetchingNextPage &&
+      hasNextPage
+    ) {
+      fetchNextPage();
+    }
+  }, [lastVItemIndex, lastGroupIndex, fetchNextPage, isFetchingNextPage, hasNextPage]);
+
+  return (
+    <Box direction="Column" gap="700">
+      <ScrollTopContainer scrollRef={scrollRef} anchorRef={scrollTopAnchorRef}>
+        <IconButton
+          onClick={() => virtualizer.scrollToOffset(0)}
+          variant="SurfaceVariant"
+          radii="Pill"
+          outlined
+          size="300"
+          aria-label="Scroll to Top"
+        >
+          <Icon src={Icons.ChevronTop} size="300" />
+        </IconButton>
+      </ScrollTopContainer>
+      <Box ref={scrollTopAnchorRef} direction="Column" gap="300">
+        <SearchInput
+          active={!!msgSearchParams.term}
+          loading={status === 'pending'}
+          searchInputRef={searchInputRef}
+          onSearch={handleSearch}
+          onReset={handleSearchClear}
+        />
+        <SearchFilters
+          defaultRoomsFilterName={defaultRoomsFilterName}
+          allowGlobal={allowGlobal}
+          roomList={searchPathSearchParams.global === 'true' ? allRooms : rooms}
+          selectedRooms={searchParamRooms}
+          onSelectedRoomsChange={handleSelectedRoomsChange}
+          global={searchPathSearchParams.global === 'true'}
+          onGlobalChange={handleGlobalChange}
+          order={msgSearchParams.order}
+          onOrderChange={handleOrderChange}
+        />
+      </Box>
+
+      {!msgSearchParams.term && status === 'pending' && (
+        <Box
+          className={ContainerColor({ variant: 'SurfaceVariant' })}
+          style={{
+            padding: config.space.S400,
+            borderRadius: config.radii.R400,
+            minHeight: toRem(450),
+          }}
+          direction="Column"
+          alignItems="Center"
+          justifyContent="Center"
+          gap="200"
+        >
+          <PageHeroSection>
+            <PageHero
+              icon={<Icon size="600" src={Icons.Message} />}
+              title="Search Messages"
+              subTitle="Find helpful messages in your community by searching with related keywords."
+            />
+          </PageHeroSection>
+        </Box>
+      )}
+
+      {msgSearchParams.term && groups.length === 0 && status === 'success' && (
+        <Box
+          className={ContainerColor({ variant: 'Warning' })}
+          style={{ padding: config.space.S300, borderRadius: config.radii.R400 }}
+          alignItems="Center"
+          gap="200"
+        >
+          <Icon size="200" src={Icons.Info} />
+          <Text>
+            No results found for <b>{`"${msgSearchParams.term}"`}</b>
+          </Text>
+        </Box>
+      )}
+
+      {((msgSearchParams.term && status === 'pending') ||
+        (groups.length > 0 && vItems.length === 0)) && (
+        <Box direction="Column" gap="100">
+          {[...Array(8).keys()].map((key) => (
+            <SequenceCard variant="SurfaceVariant" key={key} style={{ minHeight: toRem(80) }} />
+          ))}
+        </Box>
+      )}
+
+      {vItems.length > 0 && (
+        <Box direction="Column" gap="300">
+          <Box direction="Column" gap="200">
+            <Text size="H5">{`Results for "${msgSearchParams.term}"`}</Text>
+            <Line size="300" variant="Surface" />
+          </Box>
+          <div
+            style={{
+              position: 'relative',
+              height: virtualizer.getTotalSize(),
+            }}
+          >
+            {vItems.map((vItem) => {
+              const group = groups[vItem.index];
+              if (!group) return null;
+              const groupRoom = mx.getRoom(group.roomId);
+              if (!groupRoom) return null;
+
+              return (
+                <VirtualTile
+                  virtualItem={vItem}
+                  style={{ paddingBottom: config.space.S500 }}
+                  ref={virtualizer.measureElement}
+                  key={vItem.index}
+                >
+                  <SearchResultGroup
+                    room={groupRoom}
+                    highlights={highlights}
+                    items={group.items}
+                    mediaAutoLoad={mediaAutoLoad}
+                    urlPreview={urlPreview}
+                    onOpen={navigateRoom}
+                  />
+                </VirtualTile>
+              );
+            })}
+          </div>
+          {isFetchingNextPage && (
+            <Box justifyContent="Center" alignItems="Center">
+              <Spinner size="600" variant="Secondary" />
+            </Box>
+          )}
+        </Box>
+      )}
+
+      {error && (
+        <Box
+          className={ContainerColor({ variant: 'Critical' })}
+          style={{
+            padding: config.space.S300,
+            borderRadius: config.radii.R400,
+          }}
+          direction="Column"
+          gap="200"
+        >
+          <Text size="L400">{error.name}</Text>
+          <Text size="T300">{error.message}</Text>
+        </Box>
+      )}
+    </Box>
+  );
+}

src/app/features/message-search/SearchFilters.tsx

@@ -0,0 +1,413 @@
+import React, {
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Box,
+  Chip,
+  Text,
+  Icon,
+  Icons,
+  Line,
+  config,
+  PopOut,
+  Menu,
+  MenuItem,
+  Header,
+  toRem,
+  Scroll,
+  Button,
+  Input,
+  Badge,
+  RectCords,
+} from 'folds';
+import { SearchOrderBy } from 'matrix-js-sdk';
+import FocusTrap from 'focus-trap-react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { joinRuleToIconSrc } from '../../utils/room';
+import { factoryRoomIdByAtoZ } from '../../utils/sort';
+import {
+  SearchItemStrGetter,
+  UseAsyncSearchOptions,
+  useAsyncSearch,
+} from '../../hooks/useAsyncSearch';
+import { DebounceOptions, useDebounce } from '../../hooks/useDebounce';
+import { VirtualTile } from '../../components/virtualizer';
+
+type OrderButtonProps = {
+  order?: string;
+  onChange: (order?: string) => void;
+};
+function OrderButton({ order, onChange }: OrderButtonProps) {
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+  const rankOrder = order === SearchOrderBy.Rank;
+
+  const setOrder = (o?: string) => {
+    setMenuAnchor(undefined);
+    onChange(o);
+  };
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
+  return (
+    <PopOut
+      anchor={menuAnchor}
+      align="End"
+      position="Bottom"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setMenuAnchor(undefined),
+            clickOutsideDeactivates: true,
+          }}
+        >
+          <Menu variant="Surface">
+            <Header size="300" variant="Surface" style={{ padding: `0 ${config.space.S300}` }}>
+              <Text size="L400">Sort by</Text>
+            </Header>
+            <Line variant="Surface" size="300" />
+            <div style={{ padding: config.space.S100 }}>
+              <MenuItem
+                onClick={() => setOrder()}
+                variant="Surface"
+                size="300"
+                radii="300"
+                aria-pressed={!rankOrder}
+              >
+                <Text size="T300">Recent</Text>
+              </MenuItem>
+              <MenuItem
+                onClick={() => setOrder(SearchOrderBy.Rank)}
+                variant="Surface"
+                size="300"
+                radii="300"
+                aria-pressed={rankOrder}
+              >
+                <Text size="T300">Relevance</Text>
+              </MenuItem>
+            </div>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant="SurfaceVariant"
+        radii="Pill"
+        after={<Icon size="50" src={Icons.Sort} />}
+        onClick={handleOpenMenu}
+      >
+        {rankOrder ? <Text size="T200">Relevance</Text> : <Text size="T200">Recent</Text>}
+      </Chip>
+    </PopOut>
+  );
+}
+
+const SEARCH_OPTS: UseAsyncSearchOptions = {
+  limit: 20,
+  matchOptions: {
+    contain: true,
+  },
+};
+const SEARCH_DEBOUNCE_OPTS: DebounceOptions = {
+  wait: 200,
+};
+
+type SelectRoomButtonProps = {
+  roomList: string[];
+  selectedRooms?: string[];
+  onChange: (rooms?: string[]) => void;
+};
+function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButtonProps) {
+  const mx = useMatrixClient();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+  const [localSelected, setLocalSelected] = useState(selectedRooms);
+
+  const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
+    (rId) => mx.getRoom(rId)?.name ?? rId,
+    [mx]
+  );
+
+  const [searchResult, _searchRoom, resetSearch] = useAsyncSearch(
+    roomList,
+    getRoomNameStr,
+    SEARCH_OPTS
+  );
+  const rooms = Array.from(searchResult?.items ?? roomList).sort(factoryRoomIdByAtoZ(mx));
+
+  const virtualizer = useVirtualizer({
+    count: rooms.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 32,
+    overscan: 5,
+  });
+  const vItems = virtualizer.getVirtualItems();
+
+  const searchRoom = useDebounce(_searchRoom, SEARCH_DEBOUNCE_OPTS);
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
+    const value = evt.currentTarget.value.trim();
+    if (!value) {
+      resetSearch();
+      return;
+    }
+    searchRoom(value);
+  };
+
+  const handleRoomClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const roomId = evt.currentTarget.getAttribute('data-room-id');
+    if (!roomId) return;
+    if (localSelected?.includes(roomId)) {
+      setLocalSelected(localSelected?.filter((rId) => rId !== roomId));
+      return;
+    }
+    const addedRooms = [...(localSelected ?? [])];
+    addedRooms.push(roomId);
+    setLocalSelected(addedRooms);
+  };
+
+  const handleSave = () => {
+    setMenuAnchor(undefined);
+    onChange(localSelected);
+  };
+
+  const handleDeselectAll = () => {
+    setMenuAnchor(undefined);
+    onChange(undefined);
+  };
+
+  useEffect(() => {
+    setLocalSelected(selectedRooms);
+    resetSearch();
+  }, [menuAnchor, selectedRooms, resetSearch]);
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
+  return (
+    <PopOut
+      anchor={menuAnchor}
+      align="Center"
+      position="Bottom"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setMenuAnchor(undefined),
+            clickOutsideDeactivates: true,
+          }}
+        >
+          <Menu variant="Surface" style={{ width: toRem(250) }}>
+            <Box direction="Column" style={{ maxHeight: toRem(450), maxWidth: toRem(300) }}>
+              <Box
+                shrink="No"
+                direction="Column"
+                gap="100"
+                style={{ padding: config.space.S200, paddingBottom: 0 }}
+              >
+                <Text size="L400">Search</Text>
+                <Input
+                  onChange={handleSearchChange}
+                  size="300"
+                  radii="300"
+                  after={
+                    searchResult && searchResult.items.length > 0 ? (
+                      <Badge variant="Secondary" size="400" radii="Pill">
+                        <Text size="L400">{searchResult.items.length}</Text>
+                      </Badge>
+                    ) : null
+                  }
+                />
+              </Box>
+              <Scroll ref={scrollRef} size="300" hideTrack>
+                <Box
+                  direction="Column"
+                  gap="100"
+                  style={{
+                    padding: config.space.S200,
+                    paddingRight: 0,
+                  }}
+                >
+                  {!searchResult && <Text size="L400">Rooms</Text>}
+                  {searchResult && <Text size="L400">{`Rooms for "${searchResult.query}"`}</Text>}
+                  {searchResult && searchResult.items.length === 0 && (
+                    <Text style={{ padding: config.space.S400 }} size="T300" align="Center">
+                      No match found!
+                    </Text>
+                  )}
+                  <div
+                    style={{
+                      position: 'relative',
+                      height: virtualizer.getTotalSize(),
+                    }}
+                  >
+                    {vItems.map((vItem) => {
+                      const roomId = rooms[vItem.index];
+                      const room = mx.getRoom(roomId);
+                      if (!room) return null;
+                      const selected = localSelected?.includes(roomId);
+
+                      return (
+                        <VirtualTile
+                          virtualItem={vItem}
+                          style={{ paddingBottom: config.space.S100 }}
+                          ref={virtualizer.measureElement}
+                          key={vItem.index}
+                        >
+                          <MenuItem
+                            data-room-id={roomId}
+                            onClick={handleRoomClick}
+                            variant={selected ? 'Success' : 'Surface'}
+                            size="300"
+                            radii="300"
+                            aria-pressed={selected}
+                            before={
+                              <Icon
+                                size="50"
+                                src={
+                                  joinRuleToIconSrc(Icons, room.getJoinRule(), false) ?? Icons.Hash
+                                }
+                              />
+                            }
+                          >
+                            <Text truncate size="T300">
+                              {room.name}
+                            </Text>
+                          </MenuItem>
+                        </VirtualTile>
+                      );
+                    })}
+                  </div>
+                </Box>
+              </Scroll>
+              <Line variant="Surface" size="300" />
+              <Box shrink="No" direction="Column" gap="100" style={{ padding: config.space.S200 }}>
+                <Button size="300" variant="Secondary" radii="300" onClick={handleSave}>
+                  {localSelected && localSelected.length > 0 ? (
+                    <Text size="B300">Save ({localSelected.length})</Text>
+                  ) : (
+                    <Text size="B300">Save</Text>
+                  )}
+                </Button>
+                <Button
+                  size="300"
+                  radii="300"
+                  variant="Secondary"
+                  fill="Soft"
+                  onClick={handleDeselectAll}
+                  disabled={!localSelected || localSelected.length === 0}
+                >
+                  <Text size="B300">Deselect All</Text>
+                </Button>
+              </Box>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        onClick={handleOpenMenu}
+        variant="SurfaceVariant"
+        radii="Pill"
+        before={<Icon size="100" src={Icons.PlusCircle} />}
+      >
+        <Text size="T200">Select Rooms</Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+type SearchFiltersProps = {
+  defaultRoomsFilterName: string;
+  allowGlobal?: boolean;
+  roomList: string[];
+  selectedRooms?: string[];
+  onSelectedRoomsChange: (selectedRooms?: string[]) => void;
+  global?: boolean;
+  onGlobalChange: (global?: boolean) => void;
+  order?: string;
+  onOrderChange: (order?: string) => void;
+};
+export function SearchFilters({
+  defaultRoomsFilterName,
+  allowGlobal,
+  roomList,
+  selectedRooms,
+  onSelectedRoomsChange,
+  global,
+  order,
+  onGlobalChange,
+  onOrderChange,
+}: SearchFiltersProps) {
+  const mx = useMatrixClient();
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Filter</Text>
+      <Box gap="200" wrap="Wrap">
+        <Chip
+          variant={!global ? 'Success' : 'Surface'}
+          aria-pressed={!global}
+          before={!global && <Icon size="100" src={Icons.Check} />}
+          outlined
+          onClick={() => onGlobalChange()}
+        >
+          <Text size="T200">{defaultRoomsFilterName}</Text>
+        </Chip>
+        {allowGlobal && (
+          <Chip
+            variant={global ? 'Success' : 'Surface'}
+            aria-pressed={global}
+            before={global && <Icon size="100" src={Icons.Check} />}
+            outlined
+            onClick={() => onGlobalChange(true)}
+          >
+            <Text size="T200">Global</Text>
+          </Chip>
+        )}
+        <Line
+          style={{ margin: `${config.space.S100} 0` }}
+          direction="Vertical"
+          variant="Surface"
+          size="300"
+        />
+        {selectedRooms?.map((roomId) => {
+          const room = mx.getRoom(roomId);
+          if (!room) return null;
+
+          return (
+            <Chip
+              key={roomId}
+              variant="Success"
+              onClick={() => onSelectedRoomsChange(selectedRooms.filter((rId) => rId !== roomId))}
+              radii="Pill"
+              before={
+                <Icon
+                  size="50"
+                  src={joinRuleToIconSrc(Icons, room.getJoinRule(), false) ?? Icons.Hash}
+                />
+              }
+              after={<Icon size="50" src={Icons.Cross} />}
+            >
+              <Text size="T200">{room.name}</Text>
+            </Chip>
+          );
+        })}
+        <SelectRoomButton
+          roomList={roomList}
+          selectedRooms={selectedRooms}
+          onChange={onSelectedRoomsChange}
+        />
+        <Box grow="Yes" data-spacing-node />
+        <OrderButton order={order} onChange={onOrderChange} />
+      </Box>
+    </Box>
+  );
+}

src/app/features/message-search/SearchInput.tsx

@@ -0,0 +1,66 @@
+import React, { FormEventHandler, RefObject } from 'react';
+import { Box, Text, Input, Icon, Icons, Spinner, Chip, config } from 'folds';
+
+type SearchProps = {
+  active?: boolean;
+  loading?: boolean;
+  searchInputRef: RefObject<HTMLInputElement>;
+  onSearch: (term: string) => void;
+  onReset: () => void;
+};
+export function SearchInput({ active, loading, searchInputRef, onSearch, onReset }: SearchProps) {
+  const handleSearchSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
+    evt.preventDefault();
+    const { searchInput } = evt.target as HTMLFormElement & {
+      searchInput: HTMLInputElement;
+    };
+
+    const searchTerm = searchInput.value.trim() || undefined;
+    if (searchTerm) {
+      onSearch(searchTerm);
+    }
+  };
+
+  return (
+    <Box as="form" direction="Column" gap="100" onSubmit={handleSearchSubmit}>
+      <span data-spacing-node />
+      <Text size="L400">Search</Text>
+      <Input
+        ref={searchInputRef}
+        style={{ paddingRight: config.space.S300 }}
+        name="searchInput"
+        size="500"
+        variant="Background"
+        placeholder="Search for keyword"
+        autoComplete="off"
+        before={
+          active && loading ? (
+            <Spinner variant="Secondary" size="200" />
+          ) : (
+            <Icon size="200" src={Icons.Search} />
+          )
+        }
+        after={
+          active ? (
+            <Chip
+              key="resetButton"
+              type="reset"
+              variant="Secondary"
+              size="400"
+              radii="Pill"
+              outlined
+              after={<Icon size="50" src={Icons.Cross} />}
+              onClick={onReset}
+            >
+              <Text size="B300">Clear</Text>
+            </Chip>
+          ) : (
+            <Chip type="submit" variant="Primary" size="400" radii="Pill" outlined>
+              <Text size="B300">Enter</Text>
+            </Chip>
+          )
+        }
+      />
+    </Box>
+  );
+}

src/app/features/message-search/SearchResultGroup.tsx

@@ -0,0 +1,262 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { MouseEventHandler, useMemo } from 'react';
+import { IEventWithRoomId, JoinRule, RelationType, Room } from 'matrix-js-sdk';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { Avatar, Box, Chip, Header, Icon, Icons, Text, config } from 'folds';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import {
+  getReactCustomHtmlParser,
+  makeHighlightRegex,
+} from '../../plugins/react-custom-html-parser';
+import { getMxIdLocalPart, isRoomId, isUserId } from '../../utils/matrix';
+import { openJoinAlias, openProfileViewer } from '../../../client/action/navigation';
+import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
+import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
+import {
+  AvatarBase,
+  ImageContent,
+  MSticker,
+  ModernLayout,
+  RedactedContent,
+  Reply,
+  Time,
+  Username,
+} from '../../components/message';
+import { RenderMessageContent } from '../../components/RenderMessageContent';
+import { Image } from '../../components/media';
+import { ImageViewer } from '../../components/image-viewer';
+import * as customHtmlCss from '../../styles/CustomHtml.css';
+import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
+import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '../../utils/room';
+import colorMXID from '../../../util/colorMXID';
+import { ResultItem } from './useMessageSearch';
+import { SequenceCard } from '../../components/sequence-card';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { UserAvatar } from '../../components/user-avatar';
+
+type SearchResultGroupProps = {
+  room: Room;
+  highlights: string[];
+  items: ResultItem[];
+  mediaAutoLoad?: boolean;
+  urlPreview?: boolean;
+  onOpen: (roomId: string, eventId: string) => void;
+};
+export function SearchResultGroup({
+  room,
+  highlights,
+  items,
+  mediaAutoLoad,
+  urlPreview,
+  onOpen,
+}: SearchResultGroupProps) {
+  const mx = useMatrixClient();
+  const { navigateRoom, navigateSpace } = useRoomNavigate();
+  const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
+
+  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+    () =>
+      getReactCustomHtmlParser(mx, room, {
+        highlightRegex,
+        handleSpoilerClick: (evt) => {
+          const target = evt.currentTarget;
+          if (target.getAttribute('aria-pressed') === 'true') {
+            evt.stopPropagation();
+            target.setAttribute('aria-pressed', 'false');
+            target.style.cursor = 'initial';
+          }
+        },
+        handleMentionClick: (evt) => {
+          const target = evt.currentTarget;
+          const mentionId = target.getAttribute('data-mention-id');
+          if (typeof mentionId !== 'string') return;
+          if (isUserId(mentionId)) {
+            openProfileViewer(mentionId, room.roomId);
+            return;
+          }
+          if (isRoomId(mentionId) && mx.getRoom(mentionId)) {
+            if (mx.getRoom(mentionId)?.isSpaceRoom()) navigateSpace(mentionId);
+            else navigateRoom(mentionId);
+            return;
+          }
+          openJoinAlias(mentionId);
+        },
+      }),
+    [mx, room, highlightRegex, navigateRoom, navigateSpace]
+  );
+
+  const renderMatrixEvent = useMatrixEventRenderer<[IEventWithRoomId, string, GetContentCallback]>(
+    {
+      [MessageEvent.RoomMessage]: (event, displayName, getContent) => {
+        if (event.unsigned?.redacted_because) {
+          return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
+        }
+
+        return (
+          <RenderMessageContent
+            displayName={displayName}
+            msgType={event.content.msgtype ?? ''}
+            ts={event.origin_server_ts}
+            getContent={getContent}
+            mediaAutoLoad={mediaAutoLoad}
+            urlPreview={urlPreview}
+            htmlReactParserOptions={htmlReactParserOptions}
+            highlightRegex={highlightRegex}
+            outlineAttachment
+          />
+        );
+      },
+      [MessageEvent.Reaction]: (event, displayName, getContent) => {
+        if (event.unsigned?.redacted_because) {
+          return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
+        }
+        return (
+          <MSticker
+            content={getContent()}
+            renderImageContent={(props) => (
+              <ImageContent
+                {...props}
+                autoPlay={mediaAutoLoad}
+                renderImage={(p) => <Image {...p} loading="lazy" />}
+                renderViewer={(p) => <ImageViewer {...p} />}
+              />
+            )}
+          />
+        );
+      },
+      [StateEvent.RoomTombstone]: (event) => {
+        const { content } = event;
+        return (
+          <Box grow="Yes" direction="Column">
+            <Text size="T400" priority="300">
+              Room Tombstone. {content.body}
+            </Text>
+          </Box>
+        );
+      },
+    },
+    undefined,
+    (event) => {
+      if (event.unsigned?.redacted_because) {
+        return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
+      }
+      return (
+        <Box grow="Yes" direction="Column">
+          <Text size="T400" priority="300">
+            <code className={customHtmlCss.Code}>{event.type}</code>
+            {' event'}
+          </Text>
+        </Box>
+      );
+    }
+  );
+
+  const handleOpenClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const eventId = evt.currentTarget.getAttribute('data-event-id');
+    if (!eventId) return;
+    onOpen(room.roomId, eventId);
+  };
+
+  return (
+    <Box direction="Column" gap="200">
+      <Header size="300">
+        <Box gap="200" grow="Yes">
+          <Avatar size="200" radii="300">
+            <RoomAvatar
+              roomId={room.roomId}
+              src={getRoomAvatarUrl(mx, room, 96)}
+              alt={room.name}
+              renderFallback={() => (
+                <RoomIcon size="50" joinRule={room.getJoinRule() ?? JoinRule.Restricted} filled />
+              )}
+            />
+          </Avatar>
+          <Text size="H4" truncate>
+            {room.name}
+          </Text>
+        </Box>
+      </Header>
+      <Box direction="Column" gap="100">
+        {items.map((item) => {
+          const { event } = item;
+
+          const displayName =
+            getMemberDisplayName(room, event.sender) ??
+            getMxIdLocalPart(event.sender) ??
+            event.sender;
+          const senderAvatarMxc = getMemberAvatarMxc(room, event.sender);
+
+          const mainEventId =
+            event.content['m.relates_to']?.rel_type === RelationType.Replace
+              ? event.content['m.relates_to'].event_id
+              : event.event_id;
+
+          const getContent = (() =>
+            event.content['m.new_content'] ?? event.content) as GetContentCallback;
+
+          const replyEventId = event.content['m.relates_to']?.['m.in_reply_to']?.event_id;
+
+          return (
+            <SequenceCard
+              key={event.event_id}
+              style={{ padding: config.space.S400 }}
+              variant="SurfaceVariant"
+              direction="Column"
+            >
+              <ModernLayout
+                before={
+                  <AvatarBase>
+                    <Avatar size="300">
+                      <UserAvatar
+                        userId={event.sender}
+                        src={
+                          senderAvatarMxc
+                            ? mx.mxcUrlToHttp(senderAvatarMxc, 48, 48, 'crop') ?? undefined
+                            : undefined
+                        }
+                        alt={displayName}
+                        renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+                      />
+                    </Avatar>
+                  </AvatarBase>
+                }
+              >
+                <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
+                  <Box gap="200" alignItems="Baseline">
+                    <Username style={{ color: colorMXID(event.sender) }}>
+                      <Text as="span" truncate>
+                        <b>{displayName}</b>
+                      </Text>
+                    </Username>
+                    <Time ts={event.origin_server_ts} />
+                  </Box>
+                  <Box shrink="No" gap="200" alignItems="Center">
+                    <Chip
+                      data-event-id={mainEventId}
+                      onClick={handleOpenClick}
+                      variant="Secondary"
+                      radii="400"
+                    >
+                      <Text size="T200">Open</Text>
+                    </Chip>
+                  </Box>
+                </Box>
+                {replyEventId && (
+                  <Reply
+                    as="button"
+                    mx={mx}
+                    room={room}
+                    eventId={replyEventId}
+                    data-event-id={replyEventId}
+                    onClick={handleOpenClick}
+                  />
+                )}
+                {renderMatrixEvent(event.type, false, event, displayName, getContent)}
+              </ModernLayout>
+            </SequenceCard>
+          );
+        })}
+      </Box>
+    </Box>
+  );
+}

src/app/features/message-search/index.ts

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

src/app/features/message-search/useMessageSearch.ts

@@ -0,0 +1,115 @@
+import {
+  IEventWithRoomId,
+  IResultContext,
+  ISearchRequestBody,
+  ISearchResponse,
+  ISearchResult,
+  SearchOrderBy,
+} from 'matrix-js-sdk';
+import { useCallback } from 'react';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+
+export type ResultItem = {
+  rank: number;
+  event: IEventWithRoomId;
+  context: IResultContext;
+};
+
+export type ResultGroup = {
+  roomId: string;
+  items: ResultItem[];
+};
+
+export type SearchResult = {
+  nextToken?: string;
+  highlights: string[];
+  groups: ResultGroup[];
+};
+
+const groupSearchResult = (results: ISearchResult[]): ResultGroup[] => {
+  const groups: ResultGroup[] = [];
+
+  results.forEach((item) => {
+    const roomId = item.result.room_id;
+    const resultItem: ResultItem = {
+      rank: item.rank,
+      event: item.result,
+      context: item.context,
+    };
+
+    const lastAddedGroup: ResultGroup | undefined = groups[groups.length - 1];
+    if (lastAddedGroup && roomId === lastAddedGroup.roomId) {
+      lastAddedGroup.items.push(resultItem);
+      return;
+    }
+    groups.push({
+      roomId,
+      items: [resultItem],
+    });
+  });
+
+  return groups;
+};
+
+const parseSearchResult = (result: ISearchResponse): SearchResult => {
+  const roomEvents = result.search_categories.room_events;
+
+  const searchResult: SearchResult = {
+    nextToken: roomEvents?.next_batch,
+    highlights: roomEvents?.highlights ?? [],
+    groups: groupSearchResult(roomEvents?.results ?? []),
+  };
+
+  return searchResult;
+};
+
+export type MessageSearchParams = {
+  term?: string;
+  order?: string;
+  rooms?: string[];
+  senders?: string[];
+};
+export const useMessageSearch = (params: MessageSearchParams) => {
+  const mx = useMatrixClient();
+  const { term, order, rooms, senders } = params;
+
+  const searchMessages = useCallback(
+    async (nextBatch?: string) => {
+      if (!term)
+        return {
+          highlights: [],
+          groups: [],
+        };
+      const limit = 20;
+
+      const requestBody: ISearchRequestBody = {
+        search_categories: {
+          room_events: {
+            event_context: {
+              before_limit: 0,
+              after_limit: 0,
+              include_profile: false,
+            },
+            filter: {
+              limit,
+              rooms,
+              senders,
+            },
+            include_state: false,
+            order_by: order as SearchOrderBy.Recent,
+            search_term: term,
+          },
+        },
+      };
+
+      const r = await mx.search({
+        body: requestBody,
+        next_batch: nextBatch === '' ? undefined : nextBatch,
+      });
+      return parseSearchResult(r);
+    },
+    [mx, term, order, rooms, senders]
+  );
+
+  return searchMessages;
+};