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/state/hooks/closedLobbyCategories.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+import { ClosedLobbyCategoriesAtom } from '../closedLobbyCategories';
+
+const ClosedLobbyCategoriesAtomContext = createContext<ClosedLobbyCategoriesAtom | null>(null);
+export const ClosedLobbyCategoriesProvider = ClosedLobbyCategoriesAtomContext.Provider;
+
+export const useClosedLobbyCategoriesAtom = (): ClosedLobbyCategoriesAtom => {
+  const anAtom = useContext(ClosedLobbyCategoriesAtomContext);
+
+  if (!anAtom) {
+    throw new Error('ClosedLobbyCategoriesAtom is not provided!');
+  }
+
+  return anAtom;
+};

src/app/state/hooks/closedNavCategories.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+import { ClosedNavCategoriesAtom } from '../closedNavCategories';
+
+const ClosedNavCategoriesAtomContext = createContext<ClosedNavCategoriesAtom | null>(null);
+export const ClosedNavCategoriesProvider = ClosedNavCategoriesAtomContext.Provider;
+
+export const useClosedNavCategoriesAtom = (): ClosedNavCategoriesAtom => {
+  const anAtom = useContext(ClosedNavCategoriesAtomContext);
+
+  if (!anAtom) {
+    throw new Error('ClosedNavCategoriesAtom is not provided!');
+  }
+
+  return anAtom;
+};

src/app/state/hooks/inviteList.ts

@@ -3,9 +3,8 @@ import { selectAtom } from 'jotai/utils';
 import { MatrixClient } from 'matrix-js-sdk';
 import { useCallback } from 'react';
 import { isDirectInvite, isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
-import { compareRoomsEqual } from '../utils';
-import { mDirectAtom } from '../mDirectList';
-import { allInvitesAtom } from '../inviteList';
+import { compareRoomsEqual } from '../room-list/utils';
+import { allInvitesAtom } from '../room-list/inviteList';
 
 export const useSpaceInvites = (mx: MatrixClient, invitesAtom: typeof allInvitesAtom) => {
   const selector = useCallback(
@@ -18,9 +17,8 @@ export const useSpaceInvites = (mx: MatrixClient, invitesAtom: typeof allInvites
 export const useRoomInvites = (
   mx: MatrixClient,
   invitesAtom: typeof allInvitesAtom,
-  directAtom: typeof mDirectAtom
+  mDirects: Set<string>
 ) => {
-  const mDirects = useAtomValue(directAtom);
   const selector = useCallback(
     (rooms: string[]) =>
       rooms.filter(
@@ -36,9 +34,8 @@ export const useRoomInvites = (
 export const useDirectInvites = (
   mx: MatrixClient,
   invitesAtom: typeof allInvitesAtom,
-  directAtom: typeof mDirectAtom
+  mDirects: Set<string>
 ) => {
-  const mDirects = useAtomValue(directAtom);
   const selector = useCallback(
     (rooms: string[]) =>
       rooms.filter(

src/app/state/hooks/navToActivePath.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+import { NavToActivePathAtom } from '../navToActivePath';
+
+const NavToActivePathAtomContext = createContext<NavToActivePathAtom | null>(null);
+export const NavToActivePathProvider = NavToActivePathAtomContext.Provider;
+
+export const useNavToActivePathAtom = (): NavToActivePathAtom => {
+  const anAtom = useContext(NavToActivePathAtomContext);
+
+  if (!anAtom) {
+    throw new Error('NavToActivePathAtom is not provided!');
+  }
+
+  return anAtom;
+};

src/app/state/hooks/openedSidebarFolder.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+import { OpenedSidebarFolderAtom } from '../openedSidebarFolder';
+
+const OpenedSidebarFolderAtomContext = createContext<OpenedSidebarFolderAtom | null>(null);
+export const OpenedSidebarFolderProvider = OpenedSidebarFolderAtomContext.Provider;
+
+export const useOpenedSidebarFolderAtom = (): OpenedSidebarFolderAtom => {
+  const anAtom = useContext(OpenedSidebarFolderAtomContext);
+
+  if (!anAtom) {
+    throw new Error('OpenedSidebarFolderAtom is not provided!');
+  }
+
+  return anAtom;
+};

src/app/state/hooks/roomList.ts

@@ -1,52 +1,177 @@
-import { useAtomValue } from 'jotai';
+import { Atom, useAtomValue } from 'jotai';
 import { selectAtom } from 'jotai/utils';
 import { MatrixClient } from 'matrix-js-sdk';
-import { useCallback } from 'react';
-import { isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
-import { compareRoomsEqual } from '../utils';
-import { mDirectAtom } from '../mDirectList';
-import { allRoomsAtom } from '../roomList';
+import { useCallback, useMemo } from 'react';
+import { getAllParents, isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
+import { compareRoomsEqual } from '../room-list/utils';
+import { RoomToParents } from '../../../types/matrix/room';
 
-export const useSpaces = (mx: MatrixClient, roomsAtom: typeof allRoomsAtom) => {
-  const selector = useCallback(
-    (rooms: string[]) => rooms.filter((roomId) => isSpace(mx.getRoom(roomId))),
-    [mx]
-  );
-  return useAtomValue(selectAtom(roomsAtom, selector, compareRoomsEqual));
+export type RoomsAtom = Atom<string[]>;
+export type RoomSelector = (roomId: string) => boolean | undefined;
+
+export const selectedRoomsAtom = (
+  roomsAtom: RoomsAtom,
+  selector: (roomId: string) => boolean | undefined
+) => selectAtom(roomsAtom, (rooms) => rooms.filter(selector), compareRoomsEqual);
+
+export const useSelectedRooms = (roomsAtom: RoomsAtom, selector: RoomSelector) => {
+  const anAtom = useMemo(() => selectedRoomsAtom(roomsAtom, selector), [roomsAtom, selector]);
+
+  return useAtomValue(anAtom);
 };
 
-export const useRooms = (
+export type SpaceChildSelectorFactory = (parentId: string) => RoomSelector;
+
+export const useRecursiveChildScopeFactory = (
   mx: MatrixClient,
-  roomsAtom: typeof allRoomsAtom,
-  directAtom: typeof mDirectAtom
+  roomToParents: RoomToParents
+): SpaceChildSelectorFactory =>
+  useCallback(
+    (parentId: string) => (roomId) =>
+      isRoom(mx.getRoom(roomId)) &&
+      roomToParents.has(roomId) &&
+      getAllParents(roomToParents, roomId).has(parentId),
+    [mx, roomToParents]
+  );
+
+export const useChildSpaceScopeFactory = (
+  mx: MatrixClient,
+  roomToParents: RoomToParents
+): SpaceChildSelectorFactory =>
+  useCallback(
+    (parentId: string) => (roomId) =>
+      isSpace(mx.getRoom(roomId)) && roomToParents.get(roomId)?.has(parentId),
+    [mx, roomToParents]
+  );
+
+export const useRecursiveChildSpaceScopeFactory = (
+  mx: MatrixClient,
+  roomToParents: RoomToParents
+): SpaceChildSelectorFactory =>
+  useCallback(
+    (parentId: string) => (roomId) =>
+      isSpace(mx.getRoom(roomId)) &&
+      roomToParents.has(roomId) &&
+      getAllParents(roomToParents, roomId).has(parentId),
+    [mx, roomToParents]
+  );
+
+export const useChildRoomScopeFactory = (
+  mx: MatrixClient,
+  mDirects: Set<string>,
+  roomToParents: RoomToParents
+): SpaceChildSelectorFactory =>
+  useCallback(
+    (parentId: string) => (roomId) =>
+      isRoom(mx.getRoom(roomId)) &&
+      !mDirects.has(roomId) &&
+      roomToParents.get(roomId)?.has(parentId),
+    [mx, mDirects, roomToParents]
+  );
+
+export const useRecursiveChildRoomScopeFactory = (
+  mx: MatrixClient,
+  mDirects: Set<string>,
+  roomToParents: RoomToParents
+): SpaceChildSelectorFactory =>
+  useCallback(
+    (parentId: string) => (roomId) =>
+      isRoom(mx.getRoom(roomId)) &&
+      !mDirects.has(roomId) &&
+      roomToParents.has(roomId) &&
+      getAllParents(roomToParents, roomId).has(parentId),
+    [mx, mDirects, roomToParents]
+  );
+
+export const useChildDirectScopeFactory = (
+  mx: MatrixClient,
+  mDirects: Set<string>,
+  roomToParents: RoomToParents
+): SpaceChildSelectorFactory =>
+  useCallback(
+    (parentId: string) => (roomId) =>
+      isRoom(mx.getRoom(roomId)) &&
+      mDirects.has(roomId) &&
+      roomToParents.get(roomId)?.has(parentId),
+    [mx, mDirects, roomToParents]
+  );
+
+export const useRecursiveChildDirectScopeFactory = (
+  mx: MatrixClient,
+  mDirects: Set<string>,
+  roomToParents: RoomToParents
+): SpaceChildSelectorFactory =>
+  useCallback(
+    (parentId: string) => (roomId) =>
+      isRoom(mx.getRoom(roomId)) &&
+      mDirects.has(roomId) &&
+      roomToParents.has(roomId) &&
+      getAllParents(roomToParents, roomId).has(parentId),
+    [mx, mDirects, roomToParents]
+  );
+
+export const useSpaceChildren = (
+  roomsAtom: RoomsAtom,
+  spaceId: string,
+  selectorFactory: SpaceChildSelectorFactory
 ) => {
-  const mDirects = useAtomValue(directAtom);
-  const selector = useCallback(
-    (rooms: string[]) =>
-      rooms.filter((roomId) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId)),
+  const recursiveChildRoomSelector = useMemo(
+    () => selectorFactory(spaceId),
+    [selectorFactory, spaceId]
+  );
+  return useSelectedRooms(roomsAtom, recursiveChildRoomSelector);
+};
+
+export const useSpaces = (mx: MatrixClient, roomsAtom: RoomsAtom) => {
+  const selector: RoomSelector = useCallback((roomId) => isSpace(mx.getRoom(roomId)), [mx]);
+  return useSelectedRooms(roomsAtom, selector);
+};
+
+export const useOrphanSpaces = (
+  mx: MatrixClient,
+  roomsAtom: RoomsAtom,
+  roomToParents: RoomToParents
+) => {
+  const selector: RoomSelector = useCallback(
+    (roomId) => isSpace(mx.getRoom(roomId)) && !roomToParents.has(roomId),
+    [mx, roomToParents]
+  );
+  return useSelectedRooms(roomsAtom, selector);
+};
+
+export const useRooms = (mx: MatrixClient, roomsAtom: RoomsAtom, mDirects: Set<string>) => {
+  const selector: RoomSelector = useCallback(
+    (roomId: string) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId),
     [mx, mDirects]
   );
-  return useAtomValue(selectAtom(roomsAtom, selector, compareRoomsEqual));
+  return useSelectedRooms(roomsAtom, selector);
 };
 
-export const useDirects = (
+export const useOrphanRooms = (
   mx: MatrixClient,
-  roomsAtom: typeof allRoomsAtom,
-  directAtom: typeof mDirectAtom
+  roomsAtom: RoomsAtom,
+  mDirects: Set<string>,
+  roomToParents: RoomToParents
 ) => {
-  const mDirects = useAtomValue(directAtom);
-  const selector = useCallback(
-    (rooms: string[]) =>
-      rooms.filter((roomId) => isRoom(mx.getRoom(roomId)) && mDirects.has(roomId)),
+  const selector: RoomSelector = useCallback(
+    (roomId) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId) && !roomToParents.has(roomId),
+    [mx, mDirects, roomToParents]
+  );
+  return useSelectedRooms(roomsAtom, selector);
+};
+
+export const useDirects = (mx: MatrixClient, roomsAtom: RoomsAtom, mDirects: Set<string>) => {
+  const selector: RoomSelector = useCallback(
+    (roomId) => isRoom(mx.getRoom(roomId)) && mDirects.has(roomId),
     [mx, mDirects]
   );
-  return useAtomValue(selectAtom(roomsAtom, selector, compareRoomsEqual));
+  return useSelectedRooms(roomsAtom, selector);
 };
 
-export const useUnsupportedRooms = (mx: MatrixClient, roomsAtom: typeof allRoomsAtom) => {
-  const selector = useCallback(
-    (rooms: string[]) => rooms.filter((roomId) => isUnsupportedRoom(mx.getRoom(roomId))),
+export const useUnsupportedRooms = (mx: MatrixClient, roomsAtom: RoomsAtom) => {
+  const selector: RoomSelector = useCallback(
+    (roomId) => isUnsupportedRoom(mx.getRoom(roomId)),
     [mx]
   );
-  return useAtomValue(selectAtom(roomsAtom, selector, compareRoomsEqual));
+  return useSelectedRooms(roomsAtom, selector);
 };

src/app/state/hooks/unread.ts

@@ -0,0 +1,46 @@
+import { useCallback } from 'react';
+import { useAtomValue } from 'jotai';
+import { selectAtom } from 'jotai/utils';
+import { RoomToUnread, Unread } from '../../../types/matrix/room';
+import { roomToUnreadAtom, unreadEqual } from '../room/roomToUnread';
+
+const compareUnreadEqual = (u1?: Unread, u2?: Unread): boolean => {
+  if (!u1 || !u2) return false;
+  return unreadEqual(u1, u2);
+};
+
+const getRoomsUnread = (rooms: string[], roomToUnread: RoomToUnread): Unread | undefined => {
+  const unread = rooms.reduce<Unread | undefined>((u, roomId) => {
+    const roomUnread = roomToUnread.get(roomId);
+    if (!roomUnread) return u;
+    const newUnread: Unread = u ?? {
+      total: 0,
+      highlight: 0,
+      from: new Set(),
+    };
+    newUnread.total += roomUnread.total;
+    newUnread.highlight += roomUnread.highlight;
+    newUnread.from?.add(roomId);
+    return newUnread;
+  }, undefined);
+  return unread;
+};
+
+export const useRoomsUnread = (
+  rooms: string[],
+  roomToUnreadAtm: typeof roomToUnreadAtom
+): Unread | undefined => {
+  const selector = useCallback(
+    (roomToUnread: RoomToUnread) => getRoomsUnread(rooms, roomToUnread),
+    [rooms]
+  );
+  return useAtomValue(selectAtom(roomToUnreadAtm, selector, compareUnreadEqual));
+};
+
+export const useRoomUnread = (
+  roomId: string,
+  roomToUnreadAtm: typeof roomToUnreadAtom
+): Unread | undefined => {
+  const selector = useCallback((roomToUnread: RoomToUnread) => roomToUnread.get(roomId), [roomId]);
+  return useAtomValue(selectAtom(roomToUnreadAtm, selector, compareUnreadEqual));
+};

src/app/state/hooks/useBindAtoms.ts

@@ -1,10 +1,11 @@
 import { MatrixClient } from 'matrix-js-sdk';
-import { allInvitesAtom, useBindAllInvitesAtom } from '../inviteList';
-import { allRoomsAtom, useBindAllRoomsAtom } from '../roomList';
+import { allInvitesAtom, useBindAllInvitesAtom } from '../room-list/inviteList';
+import { allRoomsAtom, useBindAllRoomsAtom } from '../room-list/roomList';
 import { mDirectAtom, useBindMDirectAtom } from '../mDirectList';
-import { muteChangesAtom, mutedRoomsAtom, useBindMutedRoomsAtom } from '../mutedRoomList';
-import { roomToUnreadAtom, useBindRoomToUnreadAtom } from '../roomToUnread';
-import { roomToParentsAtom, useBindRoomToParentsAtom } from '../roomToParents';
+import { muteChangesAtom, mutedRoomsAtom, useBindMutedRoomsAtom } from '../room-list/mutedRoomList';
+import { roomToUnreadAtom, useBindRoomToUnreadAtom } from '../room/roomToUnread';
+import { roomToParentsAtom, useBindRoomToParentsAtom } from '../room/roomToParents';
+import { roomIdToTypingMembersAtom, useBindRoomIdToTypingMembersAtom } from '../typingMembers';
 
 export const useBindAtoms = (mx: MatrixClient) => {
   useBindMDirectAtom(mx, mDirectAtom);
@@ -13,4 +14,6 @@ export const useBindAtoms = (mx: MatrixClient) => {
   useBindRoomToParentsAtom(mx, roomToParentsAtom);
   useBindMutedRoomsAtom(mx, mutedRoomsAtom);
   useBindRoomToUnreadAtom(mx, roomToUnreadAtom, muteChangesAtom);
+
+  useBindRoomIdToTypingMembersAtom(mx, roomIdToTypingMembersAtom);
 };