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
2025-11-09 00:30:28 +03:00 · 2024-05-31 19:49:46 +05:30 · 2024-05-31 19:49:46 +05:30 · 4c76a7fd18
commit 4c76a7fd18
parent 2b7d825694
290 changed files with 17447 additions and 3224 deletions
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@ -0,0 +1,546 @@
+import React, {
+  ChangeEventHandler,
+  MouseEventHandler,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Avatar,
+  Badge,
+  Box,
+  Chip,
+  ContainerColor,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
+  Input,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Scroll,
+  Spinner,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  config,
+} from 'folds';
+import { Room, RoomMember } from 'matrix-js-sdk';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import FocusTrap from 'focus-trap-react';
+import classNames from 'classnames';
+
+import { openProfileViewer } from '../../../client/action/navigation';
+import * as css from './MembersDrawer.css';
+import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { Membership } from '../../../types/matrix/room';
+import { UseStateProvider } from '../../components/UseStateProvider';
+import {
+  SearchItemStrGetter,
+  UseAsyncSearchOptions,
+  useAsyncSearch,
+} from '../../hooks/useAsyncSearch';
+import { useDebounce } from '../../hooks/useDebounce';
+import { usePowerLevelTags, PowerLevelTag } from '../../hooks/usePowerLevelTags';
+import { TypingIndicator } from '../../components/typing-indicator';
+import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { useSetSetting, useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
+import { millify } from '../../plugins/millify';
+import { ScrollTopContainer } from '../../components/scroll-top-container';
+import { UserAvatar } from '../../components/user-avatar';
+import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
+
+export const MembershipFilters = {
+  filterJoined: (m: RoomMember) => m.membership === Membership.Join,
+  filterInvited: (m: RoomMember) => m.membership === Membership.Invite,
+  filterLeaved: (m: RoomMember) =>
+    m.membership === Membership.Leave &&
+    m.events.member?.getStateKey() === m.events.member?.getSender(),
+  filterKicked: (m: RoomMember) =>
+    m.membership === Membership.Leave &&
+    m.events.member?.getStateKey() !== m.events.member?.getSender(),
+  filterBanned: (m: RoomMember) => m.membership === Membership.Ban,
+};
+
+export type MembershipFilterFn = (m: RoomMember) => boolean;
+
+export type MembershipFilter = {
+  name: string;
+  filterFn: MembershipFilterFn;
+  color: ContainerColor;
+};
+
+const useMembershipFilterMenu = (): MembershipFilter[] =>
+  useMemo(
+    () => [
+      {
+        name: 'Joined',
+        filterFn: MembershipFilters.filterJoined,
+        color: 'Background',
+      },
+      {
+        name: 'Invited',
+        filterFn: MembershipFilters.filterInvited,
+        color: 'Success',
+      },
+      {
+        name: 'Left',
+        filterFn: MembershipFilters.filterLeaved,
+        color: 'Secondary',
+      },
+      {
+        name: 'Kicked',
+        filterFn: MembershipFilters.filterKicked,
+        color: 'Warning',
+      },
+      {
+        name: 'Banned',
+        filterFn: MembershipFilters.filterBanned,
+        color: 'Critical',
+      },
+    ],
+    []
+  );
+
+export const SortFilters = {
+  filterAscending: (a: RoomMember, b: RoomMember) =>
+    a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1,
+  filterDescending: (a: RoomMember, b: RoomMember) =>
+    a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1,
+  filterNewestFirst: (a: RoomMember, b: RoomMember) =>
+    (b.events.member?.getTs() ?? 0) - (a.events.member?.getTs() ?? 0),
+  filterOldest: (a: RoomMember, b: RoomMember) =>
+    (a.events.member?.getTs() ?? 0) - (b.events.member?.getTs() ?? 0),
+};
+
+export type SortFilterFn = (a: RoomMember, b: RoomMember) => number;
+
+export type SortFilter = {
+  name: string;
+  filterFn: SortFilterFn;
+};
+
+const useSortFilterMenu = (): SortFilter[] =>
+  useMemo(
+    () => [
+      {
+        name: 'A to Z',
+        filterFn: SortFilters.filterAscending,
+      },
+      {
+        name: 'Z to A',
+        filterFn: SortFilters.filterDescending,
+      },
+      {
+        name: 'Newest',
+        filterFn: SortFilters.filterNewestFirst,
+      },
+      {
+        name: 'Oldest',
+        filterFn: SortFilters.filterOldest,
+      },
+    ],
+    []
+  );
+
+export type MembersFilterOptions = {
+  membershipFilter: MembershipFilter;
+  sortFilter: SortFilter;
+};
+
+const SEARCH_OPTIONS: UseAsyncSearchOptions = {
+  limit: 100,
+  matchOptions: {
+    contain: true,
+  },
+};
+
+const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
+const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
+  getMemberSearchStr(m, query, mxIdToName);
+
+type MembersDrawerProps = {
+  room: Room;
+};
+export function MembersDrawer({ room }: MembersDrawerProps) {
+  const mx = useMatrixClient();
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+  const members = useRoomMembers(mx, room.roomId);
+  const getPowerLevelTag = usePowerLevelTags();
+  const fetchingMembers = members.length < room.getJoinedMemberCount();
+  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+
+  const membershipFilterMenu = useMembershipFilterMenu();
+  const sortFilterMenu = useSortFilterMenu();
+  const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
+  const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
+
+  const membershipFilter = membershipFilterMenu[membershipFilterIndex] ?? membershipFilterMenu[0];
+  const sortFilter = sortFilterMenu[sortFilterIndex] ?? sortFilterMenu[0];
+
+  const typingMembers = useRoomTypingMember(room.roomId);
+
+  const filteredMembers = useMemo(
+    () =>
+      members
+        .filter(membershipFilter.filterFn)
+        .sort(sortFilter.filterFn)
+        .sort((a, b) => b.powerLevel - a.powerLevel),
+    [members, membershipFilter, sortFilter]
+  );
+
+  const [result, search, resetSearch] = useAsyncSearch(
+    filteredMembers,
+    getRoomMemberStr,
+    SEARCH_OPTIONS
+  );
+  if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
+
+  const processMembers = result ? result.items : filteredMembers;
+
+  const PLTagOrRoomMember = useMemo(() => {
+    let prevTag: PowerLevelTag | undefined;
+    const tagOrMember: Array<PowerLevelTag | RoomMember> = [];
+    processMembers.forEach((m) => {
+      const plTag = getPowerLevelTag(m.powerLevel);
+      if (plTag !== prevTag) {
+        prevTag = plTag;
+        tagOrMember.push(plTag);
+      }
+      tagOrMember.push(m);
+    });
+    return tagOrMember;
+  }, [processMembers, getPowerLevelTag]);
+
+  const virtualizer = useVirtualizer({
+    count: PLTagOrRoomMember.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 40,
+    overscan: 10,
+  });
+
+  const handleSearchChange: ChangeEventHandler<HTMLInputElement> = useDebounce(
+    useCallback(
+      (evt) => {
+        if (evt.target.value) search(evt.target.value);
+        else resetSearch();
+      },
+      [search, resetSearch]
+    ),
+    { wait: 200 }
+  );
+
+  const getName = (member: RoomMember) =>
+    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
+
+  const handleMemberClick: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const btn = evt.currentTarget as HTMLButtonElement;
+    const userId = btn.getAttribute('data-user-id');
+    openProfileViewer(userId, room.roomId);
+  };
+
+  return (
+    <Box className={css.MembersDrawer} shrink="No" direction="Column">
+      <Header className={css.MembersDrawerHeader} variant="Background" size="600">
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Text title={`${room.getJoinedMemberCount()} Members`} size="H5" truncate>
+              {`${millify(room.getJoinedMemberCount())} Members`}
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center">
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Close</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  ref={triggerRef}
+                  variant="Background"
+                  onClick={() => setPeopleDrawer(false)}
+                >
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
+        </Box>
+      </Header>
+      <Box className={css.MemberDrawerContentBase} grow="Yes">
+        <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
+          <Box className={css.MemberDrawerContent} direction="Column" gap="200">
+            <Box ref={scrollTopAnchorRef} className={css.DrawerGroup} direction="Column" gap="200">
+              <Box alignItems="Center" justifyContent="SpaceBetween" gap="200">
+                <UseStateProvider initial={undefined}>
+                  {(anchor: RectCords | undefined, setAnchor) => (
+                    <PopOut
+                      anchor={anchor}
+                      position="Bottom"
+                      align="Start"
+                      offset={4}
+                      content={
+                        <FocusTrap
+                          focusTrapOptions={{
+                            initialFocus: false,
+                            onDeactivate: () => setAnchor(undefined),
+                            clickOutsideDeactivates: true,
+                            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                          }}
+                        >
+                          <Menu style={{ padding: config.space.S100 }}>
+                            {membershipFilterMenu.map((menuItem, index) => (
+                              <MenuItem
+                                key={menuItem.name}
+                                variant={
+                                  menuItem.name === membershipFilter.name
+                                    ? menuItem.color
+                                    : 'Surface'
+                                }
+                                aria-pressed={menuItem.name === membershipFilter.name}
+                                size="300"
+                                radii="300"
+                                onClick={() => {
+                                  setMembershipFilterIndex(index);
+                                  setAnchor(undefined);
+                                }}
+                              >
+                                <Text size="T300">{menuItem.name}</Text>
+                              </MenuItem>
+                            ))}
+                          </Menu>
+                        </FocusTrap>
+                      }
+                    >
+                      <Chip
+                        onClick={
+                          ((evt) =>
+                            setAnchor(
+                              evt.currentTarget.getBoundingClientRect()
+                            )) as MouseEventHandler<HTMLButtonElement>
+                        }
+                        variant={membershipFilter.color}
+                        size="400"
+                        radii="300"
+                        before={<Icon src={Icons.Filter} size="50" />}
+                      >
+                        <Text size="T200">{membershipFilter.name}</Text>
+                      </Chip>
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+                <UseStateProvider initial={undefined}>
+                  {(anchor: RectCords | undefined, setAnchor) => (
+                    <PopOut
+                      anchor={anchor}
+                      position="Bottom"
+                      align="End"
+                      offset={4}
+                      content={
+                        <FocusTrap
+                          focusTrapOptions={{
+                            initialFocus: false,
+                            onDeactivate: () => setAnchor(undefined),
+                            clickOutsideDeactivates: true,
+                            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                          }}
+                        >
+                          <Menu style={{ padding: config.space.S100 }}>
+                            {sortFilterMenu.map((menuItem, index) => (
+                              <MenuItem
+                                key={menuItem.name}
+                                variant="Surface"
+                                aria-pressed={menuItem.name === sortFilter.name}
+                                size="300"
+                                radii="300"
+                                onClick={() => {
+                                  setSortFilterIndex(index);
+                                  setAnchor(undefined);
+                                }}
+                              >
+                                <Text size="T300">{menuItem.name}</Text>
+                              </MenuItem>
+                            ))}
+                          </Menu>
+                        </FocusTrap>
+                      }
+                    >
+                      <Chip
+                        onClick={
+                          ((evt) =>
+                            setAnchor(
+                              evt.currentTarget.getBoundingClientRect()
+                            )) as MouseEventHandler<HTMLButtonElement>
+                        }
+                        variant="Background"
+                        size="400"
+                        radii="300"
+                        after={<Icon src={Icons.Sort} size="50" />}
+                      >
+                        <Text size="T200">{sortFilter.name}</Text>
+                      </Chip>
+                    </PopOut>
+                  )}
+                </UseStateProvider>
+              </Box>
+              <Box direction="Column" gap="100">
+                <Input
+                  ref={searchInputRef}
+                  onChange={handleSearchChange}
+                  style={{ paddingRight: config.space.S200 }}
+                  placeholder="Type name..."
+                  variant="Surface"
+                  size="400"
+                  radii="400"
+                  before={<Icon size="50" src={Icons.Search} />}
+                  after={
+                    result && (
+                      <Chip
+                        variant={result.items.length > 0 ? 'Success' : 'Critical'}
+                        size="400"
+                        radii="Pill"
+                        aria-pressed
+                        onClick={() => {
+                          if (searchInputRef.current) {
+                            searchInputRef.current.value = '';
+                            searchInputRef.current.focus();
+                          }
+                          resetSearch();
+                        }}
+                        after={<Icon size="50" src={Icons.Cross} />}
+                      >
+                        <Text size="B300">{`${result.items.length || 'No'} ${
+                          result.items.length === 1 ? 'Result' : 'Results'
+                        }`}</Text>
+                      </Chip>
+                    )
+                  }
+                />
+              </Box>
+            </Box>
+
+            <ScrollTopContainer scrollRef={scrollRef} anchorRef={scrollTopAnchorRef}>
+              <IconButton
+                onClick={() => virtualizer.scrollToOffset(0)}
+                variant="Surface"
+                radii="Pill"
+                outlined
+                size="300"
+                aria-label="Scroll to Top"
+              >
+                <Icon src={Icons.ChevronTop} size="300" />
+              </IconButton>
+            </ScrollTopContainer>
+
+            {!fetchingMembers && !result && processMembers.length === 0 && (
+              <Text style={{ padding: config.space.S300 }} align="Center">
+                {`No "${membershipFilter.name}" Members`}
+              </Text>
+            )}
+
+            <Box className={css.MembersGroup} direction="Column" gap="100">
+              <div
+                style={{
+                  position: 'relative',
+                  height: virtualizer.getTotalSize(),
+                }}
+              >
+                {virtualizer.getVirtualItems().map((vItem) => {
+                  const tagOrMember = PLTagOrRoomMember[vItem.index];
+                  if (!('userId' in tagOrMember)) {
+                    return (
+                      <Text
+                        style={{
+                          transform: `translateY(${vItem.start}px)`,
+                        }}
+                        data-index={vItem.index}
+                        ref={virtualizer.measureElement}
+                        key={`${room.roomId}-${vItem.index}`}
+                        className={classNames(css.MembersGroupLabel, css.DrawerVirtualItem)}
+                        size="L400"
+                      >
+                        {tagOrMember.name}
+                      </Text>
+                    );
+                  }
+
+                  const member = tagOrMember;
+                  const name = getName(member);
+                  const avatarUrl = member.getAvatarUrl(
+                    mx.baseUrl,
+                    100,
+                    100,
+                    'crop',
+                    undefined,
+                    false
+                  );
+
+                  return (
+                    <MenuItem
+                      style={{
+                        padding: `0 ${config.space.S200}`,
+                        transform: `translateY(${vItem.start}px)`,
+                      }}
+                      data-index={vItem.index}
+                      data-user-id={member.userId}
+                      ref={virtualizer.measureElement}
+                      key={`${room.roomId}-${member.userId}`}
+                      className={css.DrawerVirtualItem}
+                      variant="Background"
+                      radii="400"
+                      onClick={handleMemberClick}
+                      before={
+                        <Avatar size="200">
+                          <UserAvatar
+                            userId={member.userId}
+                            src={avatarUrl ?? undefined}
+                            alt={name}
+                            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                          />
+                        </Avatar>
+                      }
+                      after={
+                        typingMembers.find((receipt) => receipt.userId === member.userId) && (
+                          <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
+                            <TypingIndicator size="300" />
+                          </Badge>
+                        )
+                      }
+                    >
+                      <Box grow="Yes">
+                        <Text size="T400" truncate>
+                          {name}
+                        </Text>
+                      </Box>
+                    </MenuItem>
+                  );
+                })}
+              </div>
+            </Box>
+
+            {fetchingMembers && (
+              <Box justifyContent="Center">
+                <Spinner />
+              </Box>
+            )}
+          </Box>
+        </Scroll>
+      </Box>
+    </Box>
+  );
+}