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/lobby/SpaceItem.tsx

@@ -0,0 +1,493 @@
+import React, { MouseEventHandler, ReactNode, useCallback, useRef, useState } from 'react';
+import {
+  Box,
+  Avatar,
+  Text,
+  Chip,
+  Icon,
+  Icons,
+  as,
+  Badge,
+  toRem,
+  Spinner,
+  PopOut,
+  Menu,
+  MenuItem,
+  RectCords,
+  config,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import classNames from 'classnames';
+import { MatrixError, Room } from 'matrix-js-sdk';
+import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { RoomAvatar } from '../../components/room-avatar';
+import { nameInitials } from '../../utils/common';
+import {
+  HierarchyRoomSummaryLoader,
+  LocalRoomSummaryLoader,
+} from '../../components/RoomSummaryLoader';
+import { getRoomAvatarUrl } from '../../utils/room';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import * as css from './SpaceItem.css';
+import * as styleCss from './style.css';
+import { ErrorCode } from '../../cs-errorcode';
+import { useDraggableItem } from './DnD';
+import { openCreateRoom, openSpaceAddExisting } from '../../../client/action/navigation';
+
+function SpaceProfileLoading() {
+  return (
+    <Box gap="200" alignItems="Center">
+      <Box grow="Yes" gap="200" alignItems="Center" className={css.HeaderChipPlaceholder}>
+        <Avatar className={styleCss.AvatarPlaceholder} size="200" radii="300" />
+        <Box
+          className={styleCss.LinePlaceholder}
+          shrink="No"
+          style={{ width: '100vw', maxWidth: toRem(120) }}
+        />
+      </Box>
+    </Box>
+  );
+}
+
+type UnknownPrivateSpaceProfileProps = {
+  roomId: string;
+  name?: string;
+  avatarUrl?: string;
+  suggested?: boolean;
+};
+function UnknownPrivateSpaceProfile({
+  roomId,
+  name,
+  avatarUrl,
+  suggested,
+}: UnknownPrivateSpaceProfileProps) {
+  return (
+    <Chip
+      as="span"
+      className={css.HeaderChip}
+      variant="Surface"
+      size="500"
+      before={
+        <Avatar size="200" radii="300">
+          <RoomAvatar
+            roomId={roomId}
+            src={avatarUrl}
+            alt={name}
+            renderFallback={() => (
+              <Text as="span" size="H6">
+                {nameInitials(name)}
+              </Text>
+            )}
+          />
+        </Avatar>
+      }
+    >
+      <Box alignItems="Center" gap="200">
+        <Text size="H4" truncate>
+          {name || 'Unknown'}
+        </Text>
+
+        <Badge variant="Secondary" fill="Soft" radii="Pill" outlined>
+          <Text size="L400">Private Space</Text>
+        </Badge>
+        {suggested && (
+          <Badge variant="Success" fill="Soft" radii="Pill" outlined>
+            <Text size="L400">Suggested</Text>
+          </Badge>
+        )}
+      </Box>
+    </Chip>
+  );
+}
+
+type UnknownSpaceProfileProps = {
+  roomId: string;
+  via?: string[];
+  name?: string;
+  avatarUrl?: string;
+  suggested?: boolean;
+};
+function UnknownSpaceProfile({
+  roomId,
+  via,
+  name,
+  avatarUrl,
+  suggested,
+}: UnknownSpaceProfileProps) {
+  const mx = useMatrixClient();
+
+  const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
+    useCallback(() => mx.joinRoom(roomId, { viaServers: via }), [mx, roomId, via])
+  );
+
+  const canJoin = joinState.status === AsyncStatus.Idle || joinState.status === AsyncStatus.Error;
+  return (
+    <Chip
+      className={css.HeaderChip}
+      variant="Surface"
+      size="500"
+      onClick={join}
+      disabled={!canJoin}
+      before={
+        <Avatar size="200" radii="300">
+          <RoomAvatar
+            roomId={roomId}
+            src={avatarUrl}
+            alt={name}
+            renderFallback={() => (
+              <Text as="span" size="H6">
+                {nameInitials(name)}
+              </Text>
+            )}
+          />
+        </Avatar>
+      }
+      after={
+        canJoin ? <Icon src={Icons.Plus} size="50" /> : <Spinner variant="Secondary" size="200" />
+      }
+    >
+      <Box alignItems="Center" gap="200">
+        <Text size="H4" truncate>
+          {name || 'Unknown'}
+        </Text>
+        {suggested && (
+          <Badge variant="Success" fill="Soft" radii="Pill" outlined>
+            <Text size="L400">Suggested</Text>
+          </Badge>
+        )}
+        {joinState.status === AsyncStatus.Error && (
+          <Badge variant="Critical" fill="Soft" radii="Pill" outlined>
+            <Text size="L400" truncate>
+              {joinState.error.name}
+            </Text>
+          </Badge>
+        )}
+      </Box>
+    </Chip>
+  );
+}
+
+type SpaceProfileProps = {
+  roomId: string;
+  name: string;
+  avatarUrl?: string;
+  suggested?: boolean;
+  closed: boolean;
+  categoryId: string;
+  handleClose?: MouseEventHandler<HTMLButtonElement>;
+};
+function SpaceProfile({
+  roomId,
+  name,
+  avatarUrl,
+  suggested,
+  closed,
+  categoryId,
+  handleClose,
+}: SpaceProfileProps) {
+  return (
+    <Chip
+      data-category-id={categoryId}
+      onClick={handleClose}
+      className={css.HeaderChip}
+      variant="Surface"
+      size="500"
+      before={
+        <Avatar size="200" radii="300">
+          <RoomAvatar
+            roomId={roomId}
+            src={avatarUrl}
+            alt={name}
+            renderFallback={() => (
+              <Text as="span" size="H6">
+                {nameInitials(name)}
+              </Text>
+            )}
+          />
+        </Avatar>
+      }
+      after={<Icon src={closed ? Icons.ChevronRight : Icons.ChevronBottom} size="50" />}
+    >
+      <Box alignItems="Center" gap="200">
+        <Text size="H4" truncate>
+          {name}
+        </Text>
+        {suggested && (
+          <Badge variant="Success" fill="Soft" radii="Pill" outlined>
+            <Text size="L400">Suggested</Text>
+          </Badge>
+        )}
+      </Box>
+    </Chip>
+  );
+}
+
+type RootSpaceProfileProps = {
+  closed: boolean;
+  categoryId: string;
+  handleClose?: MouseEventHandler<HTMLButtonElement>;
+};
+function RootSpaceProfile({ closed, categoryId, handleClose }: RootSpaceProfileProps) {
+  return (
+    <Chip
+      data-category-id={categoryId}
+      onClick={handleClose}
+      className={css.HeaderChip}
+      variant="Surface"
+      size="500"
+      after={<Icon src={closed ? Icons.ChevronRight : Icons.ChevronBottom} size="50" />}
+    >
+      <Box alignItems="Center" gap="200">
+        <Text size="H4" truncate>
+          Rooms
+        </Text>
+      </Box>
+    </Chip>
+  );
+}
+
+function AddRoomButton({ item }: { item: HierarchyItem }) {
+  const [cords, setCords] = useState<RectCords>();
+
+  const handleAddRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleCreateRoom = () => {
+    openCreateRoom(false, item.roomId as any);
+    setCords(undefined);
+  };
+
+  const handleAddExisting = () => {
+    openSpaceAddExisting(item.roomId);
+    setCords(undefined);
+  };
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="End"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setCords(undefined),
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+          }}
+        >
+          <Menu style={{ padding: config.space.S100 }}>
+            <MenuItem
+              size="300"
+              radii="300"
+              variant="Primary"
+              fill="None"
+              onClick={handleCreateRoom}
+            >
+              <Text size="T300">New Room</Text>
+            </MenuItem>
+            <MenuItem size="300" radii="300" fill="None" onClick={handleAddExisting}>
+              <Text size="T300">Existing Room</Text>
+            </MenuItem>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant="Primary"
+        radii="Pill"
+        before={<Icon src={Icons.Plus} size="50" />}
+        onClick={handleAddRoom}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300">Add Room</Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+function AddSpaceButton({ item }: { item: HierarchyItem }) {
+  const [cords, setCords] = useState<RectCords>();
+
+  const handleAddSpace: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const handleCreateSpace = () => {
+    openCreateRoom(true, item.roomId as any);
+    setCords(undefined);
+  };
+
+  const handleAddExisting = () => {
+    openSpaceAddExisting(item.roomId, true);
+    setCords(undefined);
+  };
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="End"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setCords(undefined),
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+          }}
+        >
+          <Menu style={{ padding: config.space.S100 }}>
+            <MenuItem
+              size="300"
+              radii="300"
+              variant="Primary"
+              fill="None"
+              onClick={handleCreateSpace}
+            >
+              <Text size="T300">New Space</Text>
+            </MenuItem>
+            <MenuItem size="300" radii="300" fill="None" onClick={handleAddExisting}>
+              <Text size="T300">Existing Space</Text>
+            </MenuItem>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <Chip
+        variant="SurfaceVariant"
+        radii="Pill"
+        before={<Icon src={Icons.Plus} size="50" />}
+        onClick={handleAddSpace}
+        aria-pressed={!!cords}
+      >
+        <Text size="B300">Add Space</Text>
+      </Chip>
+    </PopOut>
+  );
+}
+
+type SpaceItemCardProps = {
+  item: HierarchyItem;
+  joined?: boolean;
+  categoryId: string;
+  closed: boolean;
+  handleClose?: MouseEventHandler<HTMLButtonElement>;
+  options?: ReactNode;
+  before?: ReactNode;
+  after?: ReactNode;
+  canEditChild: boolean;
+  canReorder: boolean;
+  onDragging: (item?: HierarchyItem) => void;
+  getRoom: (roomId: string) => Room | undefined;
+};
+export const SpaceItemCard = as<'div', SpaceItemCardProps>(
+  (
+    {
+      className,
+      joined,
+      closed,
+      categoryId,
+      item,
+      handleClose,
+      options,
+      before,
+      after,
+      canEditChild,
+      canReorder,
+      onDragging,
+      getRoom,
+      ...props
+    },
+    ref
+  ) => {
+    const mx = useMatrixClient();
+    const { roomId, content } = item;
+    const space = getRoom(roomId);
+    const targetRef = useRef<HTMLDivElement>(null);
+    useDraggableItem(item, targetRef, onDragging);
+
+    return (
+      <Box
+        shrink="No"
+        alignItems="Center"
+        gap="200"
+        className={classNames(css.SpaceItemCard({ outlined: !joined || closed }), className)}
+        {...props}
+        ref={ref}
+      >
+        {before}
+        <Box grow="Yes" gap="100" alignItems="Inherit" justifyContent="SpaceBetween">
+          <Box ref={canReorder ? targetRef : null}>
+            {space ? (
+              <LocalRoomSummaryLoader room={space}>
+                {(localSummary) =>
+                  item.parentId ? (
+                    <SpaceProfile
+                      roomId={roomId}
+                      name={localSummary.name}
+                      avatarUrl={getRoomAvatarUrl(mx, space, 96)}
+                      suggested={content.suggested}
+                      closed={closed}
+                      categoryId={categoryId}
+                      handleClose={handleClose}
+                    />
+                  ) : (
+                    <RootSpaceProfile
+                      closed={closed}
+                      categoryId={categoryId}
+                      handleClose={handleClose}
+                    />
+                  )
+                }
+              </LocalRoomSummaryLoader>
+            ) : (
+              <HierarchyRoomSummaryLoader roomId={roomId}>
+                {(summaryState) => (
+                  <>
+                    {summaryState.status === AsyncStatus.Loading && <SpaceProfileLoading />}
+                    {summaryState.status === AsyncStatus.Error &&
+                      (summaryState.error.name === ErrorCode.M_FORBIDDEN ? (
+                        <UnknownPrivateSpaceProfile roomId={roomId} suggested={content.suggested} />
+                      ) : (
+                        <UnknownSpaceProfile
+                          roomId={roomId}
+                          via={item.content.via}
+                          suggested={content.suggested}
+                        />
+                      ))}
+                    {summaryState.status === AsyncStatus.Success && (
+                      <UnknownSpaceProfile
+                        roomId={roomId}
+                        via={item.content.via}
+                        name={summaryState.data.name || summaryState.data.canonical_alias || roomId}
+                        avatarUrl={
+                          summaryState.data?.avatar_url
+                            ? mx.mxcUrlToHttp(summaryState.data.avatar_url, 96, 96, 'crop') ??
+                              undefined
+                            : undefined
+                        }
+                        suggested={content.suggested}
+                      />
+                    )}
+                  </>
+                )}
+              </HierarchyRoomSummaryLoader>
+            )}
+          </Box>
+          {canEditChild && (
+            <Box alignItems="Inherit" gap="200">
+              <AddRoomButton item={item} />
+              {item.parentId === undefined && <AddSpaceButton item={item} />}
+            </Box>
+          )}
+        </Box>
+        {options}
+        {after}
+      </Box>
+    );
+  }
+);