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-12 10:10:29 +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/state/closedLobbyCategories.ts
+++ b/src/app/state/closedLobbyCategories.ts
@ -0,0 +1,68 @@
+import { WritableAtom, atom } from 'jotai';
+import produce from 'immer';
+import {
+  atomWithLocalStorage,
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from './utils/atomWithLocalStorage';
+
+const CLOSED_LOBBY_CATEGORY = 'closedLobbyCategories';
+
+type ClosedLobbyCategoriesAction =
+  | {
+      type: 'PUT';
+      categoryId: string;
+    }
+  | {
+      type: 'DELETE';
+      categoryId: string;
+    };
+
+export type ClosedLobbyCategoriesAtom = WritableAtom<
+  Set<string>,
+  [ClosedLobbyCategoriesAction],
+  undefined
+>;
+
+export const makeClosedLobbyCategoriesAtom = (userId: string): ClosedLobbyCategoriesAtom => {
+  const storeKey = `${CLOSED_LOBBY_CATEGORY}${userId}`;
+
+  const baseClosedLobbyCategoriesAtom = atomWithLocalStorage<Set<string>>(
+    storeKey,
+    (key) => {
+      const arrayValue = getLocalStorageItem<string[]>(key, []);
+      return new Set(arrayValue);
+    },
+    (key, value) => {
+      const arrayValue = Array.from(value);
+      setLocalStorageItem(key, arrayValue);
+    }
+  );
+
+  const closedLobbyCategoriesAtom = atom<Set<string>, [ClosedLobbyCategoriesAction], undefined>(
+    (get) => get(baseClosedLobbyCategoriesAtom),
+    (get, set, action) => {
+      if (action.type === 'DELETE') {
+        set(
+          baseClosedLobbyCategoriesAtom,
+          produce(get(baseClosedLobbyCategoriesAtom), (draft) => {
+            draft.delete(action.categoryId);
+          })
+        );
+        return;
+      }
+      if (action.type === 'PUT') {
+        set(
+          baseClosedLobbyCategoriesAtom,
+          produce(get(baseClosedLobbyCategoriesAtom), (draft) => {
+            draft.add(action.categoryId);
+          })
+        );
+      }
+    }
+  );
+
+  return closedLobbyCategoriesAtom;
+};
+
+export const makeLobbyCategoryId = (...args: string[]): string => args.join('|');
--- a/src/app/state/closedNavCategories.ts
+++ b/src/app/state/closedNavCategories.ts
@ -0,0 +1,68 @@
+import { WritableAtom, atom } from 'jotai';
+import produce from 'immer';
+import {
+  atomWithLocalStorage,
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from './utils/atomWithLocalStorage';
+
+const CLOSED_NAV_CATEGORY = 'closedNavCategories';
+
+type ClosedNavCategoriesAction =
+  | {
+      type: 'PUT';
+      categoryId: string;
+    }
+  | {
+      type: 'DELETE';
+      categoryId: string;
+    };
+
+export type ClosedNavCategoriesAtom = WritableAtom<
+  Set<string>,
+  [ClosedNavCategoriesAction],
+  undefined
+>;
+
+export const makeClosedNavCategoriesAtom = (userId: string): ClosedNavCategoriesAtom => {
+  const storeKey = `${CLOSED_NAV_CATEGORY}${userId}`;
+
+  const baseClosedNavCategoriesAtom = atomWithLocalStorage<Set<string>>(
+    storeKey,
+    (key) => {
+      const arrayValue = getLocalStorageItem<string[]>(key, []);
+      return new Set(arrayValue);
+    },
+    (key, value) => {
+      const arrayValue = Array.from(value);
+      setLocalStorageItem(key, arrayValue);
+    }
+  );
+
+  const closedNavCategoriesAtom = atom<Set<string>, [ClosedNavCategoriesAction], undefined>(
+    (get) => get(baseClosedNavCategoriesAtom),
+    (get, set, action) => {
+      if (action.type === 'DELETE') {
+        set(
+          baseClosedNavCategoriesAtom,
+          produce(get(baseClosedNavCategoriesAtom), (draft) => {
+            draft.delete(action.categoryId);
+          })
+        );
+        return;
+      }
+      if (action.type === 'PUT') {
+        set(
+          baseClosedNavCategoriesAtom,
+          produce(get(baseClosedNavCategoriesAtom), (draft) => {
+            draft.add(action.categoryId);
+          })
+        );
+      }
+    }
+  );
+
+  return closedNavCategoriesAtom;
+};
+
+export const makeNavCategoryId = (...args: string[]): string => args.join('|');
--- a/src/app/state/hooks/closedLobbyCategories.ts
+++ b/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;
+};
--- a/src/app/state/hooks/closedNavCategories.ts
+++ b/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;
+};
--- a/src/app/state/hooks/inviteList.ts
+++ b/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(
--- a/src/app/state/hooks/navToActivePath.ts
+++ b/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;
+};
--- a/src/app/state/hooks/openedSidebarFolder.ts
+++ b/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;
+};
--- a/src/app/state/hooks/roomList.ts
+++ b/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);
 };
--- a/src/app/state/hooks/unread.ts
+++ b/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));
+};
--- a/src/app/state/hooks/useBindAtoms.ts
+++ b/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);
 };
--- a/src/app/state/mDirectList.ts
+++ b/src/app/state/mDirectList.ts
@ -30,10 +30,12 @@ export const useBindMDirectAtom = (mx: MatrixClient, mDirect: typeof mDirectAtom
    }

    const handleAccountData = (event: MatrixEvent) => {
-      setMDirect({
-        type: 'UPDATE',
-        rooms: getMDirects(event),
-      });
+      if (event.getType() === AccountDataEvent.Direct) {
+        setMDirect({
+          type: 'UPDATE',
+          rooms: getMDirects(event),
+        });
+      }
    };

    mx.on(ClientEvent.AccountData, handleAccountData);
--- a/src/app/state/navToActivePath.ts
+++ b/src/app/state/navToActivePath.ts
@ -0,0 +1,66 @@
+import { WritableAtom, atom } from 'jotai';
+import produce from 'immer';
+import { Path } from 'react-router-dom';
+import {
+  atomWithLocalStorage,
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from './utils/atomWithLocalStorage';
+
+const NAV_TO_ACTIVE_PATH = 'navToActivePath';
+
+type NavToActivePath = Map<string, Path>;
+
+type NavToActivePathAction =
+  | {
+      type: 'PUT';
+      navId: string;
+      path: Path;
+    }
+  | {
+      type: 'DELETE';
+      navId: string;
+    };
+
+export type NavToActivePathAtom = WritableAtom<NavToActivePath, [NavToActivePathAction], undefined>;
+
+export const makeNavToActivePathAtom = (userId: string): NavToActivePathAtom => {
+  const storeKey = `${NAV_TO_ACTIVE_PATH}${userId}`;
+
+  const baseNavToActivePathAtom = atomWithLocalStorage<NavToActivePath>(
+    storeKey,
+    (key) => {
+      const obj: Record<string, Path> = getLocalStorageItem(key, {});
+      return new Map(Object.entries(obj));
+    },
+    (key, value) => {
+      const obj: Record<string, Path> = Object.fromEntries(value);
+      setLocalStorageItem(key, obj);
+    }
+  );
+
+  const navToActivePathAtom = atom<NavToActivePath, [NavToActivePathAction], undefined>(
+    (get) => get(baseNavToActivePathAtom),
+    (get, set, action) => {
+      if (action.type === 'DELETE') {
+        set(
+          baseNavToActivePathAtom,
+          produce(get(baseNavToActivePathAtom), (draft) => {
+            draft.delete(action.navId);
+          })
+        );
+        return;
+      }
+      if (action.type === 'PUT') {
+        set(
+          baseNavToActivePathAtom,
+          produce(get(baseNavToActivePathAtom), (draft) => {
+            draft.set(action.navId, action.path);
+          })
+        );
+      }
+    }
+  );
+
+  return navToActivePathAtom;
+};
--- a/src/app/state/openedSidebarFolder.ts
+++ b/src/app/state/openedSidebarFolder.ts
@ -0,0 +1,66 @@
+import { WritableAtom, atom } from 'jotai';
+import produce from 'immer';
+import {
+  atomWithLocalStorage,
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from './utils/atomWithLocalStorage';
+
+const OPENED_SIDEBAR_FOLDER = 'openedSidebarFolder';
+
+type OpenedSidebarFolderAction =
+  | {
+      type: 'PUT';
+      id: string;
+    }
+  | {
+      type: 'DELETE';
+      id: string;
+    };
+
+export type OpenedSidebarFolderAtom = WritableAtom<
+  Set<string>,
+  [OpenedSidebarFolderAction],
+  undefined
+>;
+
+export const makeOpenedSidebarFolderAtom = (userId: string): OpenedSidebarFolderAtom => {
+  const storeKey = `${OPENED_SIDEBAR_FOLDER}${userId}`;
+
+  const baseOpenedSidebarFolderAtom = atomWithLocalStorage<Set<string>>(
+    storeKey,
+    (key) => {
+      const arrayValue = getLocalStorageItem<string[]>(key, []);
+      return new Set(arrayValue);
+    },
+    (key, value) => {
+      const arrayValue = Array.from(value);
+      setLocalStorageItem(key, arrayValue);
+    }
+  );
+
+  const openedSidebarFolderAtom = atom<Set<string>, [OpenedSidebarFolderAction], undefined>(
+    (get) => get(baseOpenedSidebarFolderAtom),
+    (get, set, action) => {
+      if (action.type === 'DELETE') {
+        set(
+          baseOpenedSidebarFolderAtom,
+          produce(get(baseOpenedSidebarFolderAtom), (draft) => {
+            draft.delete(action.id);
+          })
+        );
+        return;
+      }
+      if (action.type === 'PUT') {
+        set(
+          baseOpenedSidebarFolderAtom,
+          produce(get(baseOpenedSidebarFolderAtom), (draft) => {
+            draft.add(action.id);
+          })
+        );
+      }
+    }
+  );
+
+  return openedSidebarFolderAtom;
+};
--- a/src/app/state/room-list/inviteList.ts
+++ b/src/app/state/room-list/inviteList.ts
@ -1,7 +1,7 @@
 import { atom, WritableAtom } from 'jotai';
 import { MatrixClient } from 'matrix-js-sdk';
 import { useMemo } from 'react';
-import { Membership } from '../../types/matrix/room';
+import { Membership } from '../../../types/matrix/room';
 import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';

 const baseRoomsAtom = atom<string[]>([]);
--- a/src/app/state/room-list/mutedRoomList.ts
+++ b/src/app/state/room-list/mutedRoomList.ts
@ -1,8 +1,8 @@
 import { atom, useSetAtom } from 'jotai';
 import { ClientEvent, IPushRule, IPushRules, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
 import { useEffect } from 'react';
-import { MuteChanges } from '../../types/matrix/room';
-import { findMutedRule, isMutedRule } from '../utils/room';
+import { MuteChanges } from '../../../types/matrix/room';
+import { findMutedRule, isMutedRule } from '../../utils/room';

 export type MutedRoomsUpdate =
  | {
--- a/src/app/state/room-list/roomList.ts
+++ b/src/app/state/room-list/roomList.ts
@ -1,7 +1,7 @@
 import { atom } from 'jotai';
 import { MatrixClient } from 'matrix-js-sdk';
 import { useMemo } from 'react';
-import { Membership } from '../../types/matrix/room';
+import { Membership } from '../../../types/matrix/room';
 import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';

 const baseRoomsAtom = atom<string[]>([]);
--- a/src/app/state/room-list/utils.ts
+++ b/src/app/state/room-list/utils.ts
@ -1,7 +1,7 @@
 import { useSetAtom, WritableAtom } from 'jotai';
 import { ClientEvent, MatrixClient, Room, RoomEvent } from 'matrix-js-sdk';
 import { useEffect } from 'react';
-import { Membership } from '../../types/matrix/room';
+import { Membership } from '../../../types/matrix/room';

 export type RoomsAction =
  | {
@ -38,7 +38,9 @@ export const useBindRoomsWithMembershipsAtom = (
    };

    const handleMembershipChange = (room: Room) => {
-      if (!satisfyMembership(room)) {
+      if (satisfyMembership(room)) {
+        setRoomsAtom({ type: 'PUT', roomId: room.roomId });
+      } else {
        setRoomsAtom({ type: 'DELETE', roomId: room.roomId });
      }
    };
--- a/src/app/state/room/roomInputDrafts.ts
+++ b/src/app/state/room/roomInputDrafts.ts
@ -2,9 +2,9 @@ import { atom } from 'jotai';
 import { atomFamily } from 'jotai/utils';
 import { Descendant } from 'slate';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import { TListAtom, createListAtom } from './list';
-import { createUploadAtomFamily } from './upload';
-import { TUploadContent } from '../utils/matrix';
+import { TListAtom, createListAtom } from '../list';
+import { createUploadAtomFamily } from '../upload';
+import { TUploadContent } from '../../utils/matrix';

 export const roomUploadAtomFamily = createUploadAtomFamily();

--- a/src/app/state/room/roomToParents.ts
+++ b/src/app/state/room/roomToParents.ts
@ -9,14 +9,14 @@ import {
  RoomStateEvent,
 } from 'matrix-js-sdk';
 import { useEffect } from 'react';
-import { Membership, RoomToParents, StateEvent } from '../../types/matrix/room';
+import { Membership, RoomToParents, StateEvent } from '../../../types/matrix/room';
 import {
  getRoomToParents,
  getSpaceChildren,
  isSpace,
  isValidChild,
  mapParentWithChildren,
-} from '../utils/room';
+} from '../../utils/room';

 export type RoomToParentsAction =
  | {
@ -83,6 +83,10 @@ export const useBindRoomToParentsAtom = (
    };

    const handleMembershipChange = (room: Room, membership: string) => {
+      if (room.getMyMembership() === Membership.Leave) {
+        setRoomToParents({ type: 'DELETE', roomId: room.roomId });
+        return;
+      }
      if (isSpace(room) && membership === Membership.Join) {
        setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
      }
--- a/src/app/state/room/roomToUnread.ts
+++ b/src/app/state/room/roomToUnread.ts
@ -1,15 +1,24 @@
 import produce from 'immer';
 import { atom, useSetAtom, PrimitiveAtom, useAtomValue } from 'jotai';
-import { IRoomTimelineData, MatrixClient, MatrixEvent, Room, RoomEvent } from 'matrix-js-sdk';
+import {
+  IRoomTimelineData,
+  MatrixClient,
+  MatrixEvent,
+  Room,
+  RoomEvent,
+  SyncState,
+} from 'matrix-js-sdk';
 import { ReceiptContent, ReceiptType } from 'matrix-js-sdk/lib/@types/read_receipts';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import {
  MuteChanges,
  Membership,
  NotificationType,
  RoomToUnread,
  UnreadInfo,
-} from '../../types/matrix/room';
+  Unread,
+  StateEvent,
+} from '../../../types/matrix/room';
 import {
  getAllParents,
  getNotificationType,
@ -17,8 +26,10 @@ import {
  getUnreadInfos,
  isNotificationEvent,
  roomHaveUnread,
-} from '../utils/room';
+} from '../../utils/room';
 import { roomToParentsAtom } from './roomToParents';
+import { useStateEventCallback } from '../../hooks/useStateEventCallback';
+import { useSyncState } from '../../hooks/useSyncState';

 export type RoomToUnreadAction =
  | {
@ -34,17 +45,19 @@ export type RoomToUnreadAction =
      roomId: string;
    };

+const unreadInfoToUnread = (unreadInfo: UnreadInfo): Unread => ({
+  highlight: unreadInfo.highlight,
+  total: unreadInfo.total,
+  from: null,
+});
+
 const putUnreadInfo = (
  roomToUnread: RoomToUnread,
  allParents: Set<string>,
  unreadInfo: UnreadInfo
 ) => {
  const oldUnread = roomToUnread.get(unreadInfo.roomId) ?? { highlight: 0, total: 0, from: null };
-  roomToUnread.set(unreadInfo.roomId, {
-    highlight: unreadInfo.highlight,
-    total: unreadInfo.total,
-    from: null,
-  });
+  roomToUnread.set(unreadInfo.roomId, unreadInfoToUnread(unreadInfo));

  const newH = unreadInfo.highlight - oldUnread.highlight;
  const newT = unreadInfo.total - oldUnread.total;
@ -81,6 +94,28 @@ const deleteUnreadInfo = (roomToUnread: RoomToUnread, allParents: Set<string>, r
  });
 };

+export const unreadEqual = (u1: Unread, u2: Unread): boolean => {
+  const countEqual = u1.highlight === u2.highlight && u1.total === u2.total;
+
+  if (!countEqual) return false;
+
+  const f1 = u1.from;
+  const f2 = u2.from;
+  if (f1 === null && f2 === null) return true;
+  if (f1 === null || f2 === null) return false;
+
+  if (f1.size !== f2.size) return false;
+
+  let fromEqual = true;
+  f1?.forEach((item) => {
+    if (!f2?.has(item)) {
+      fromEqual = false;
+    }
+  });
+
+  return fromEqual;
+};
+
 const baseRoomToUnread = atom<RoomToUnread>(new Map());
 export const roomToUnreadAtom = atom<RoomToUnread, [RoomToUnreadAction], undefined>(
  (get) => get(baseRoomToUnread),
@ -98,13 +133,20 @@ export const roomToUnreadAtom = atom<RoomToUnread, [RoomToUnreadAction], undefin
      return;
    }
    if (action.type === 'PUT') {
+      const { unreadInfo } = action;
+      const currentUnread = get(baseRoomToUnread).get(unreadInfo.roomId);
+      if (currentUnread && unreadEqual(currentUnread, unreadInfoToUnread(unreadInfo))) {
+        // Do not update if unread data has not changes
+        // like total & highlight
+        return;
+      }
      set(
        baseRoomToUnread,
        produce(get(baseRoomToUnread), (draftRoomToUnread) =>
          putUnreadInfo(
            draftRoomToUnread,
-            getAllParents(get(roomToParentsAtom), action.unreadInfo.roomId),
-            action.unreadInfo
+            getAllParents(get(roomToParentsAtom), unreadInfo.roomId),
+            unreadInfo
          )
        )
      );
@ -140,6 +182,21 @@ export const useBindRoomToUnreadAtom = (
    });
  }, [mx, setUnreadAtom]);

+  useSyncState(
+    mx,
+    useCallback(
+      (state) => {
+        if (state === SyncState.Prepared) {
+          setUnreadAtom({
+            type: 'RESET',
+            unreadInfos: getUnreadInfos(mx),
+          });
+        }
+      },
+      [mx, setUnreadAtom]
+    )
+  );
+
  useEffect(() => {
    const handleTimelineEvent = (
      mEvent: MatrixEvent,
@ -216,4 +273,19 @@ export const useBindRoomToUnreadAtom = (
      mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
    };
  }, [mx, setUnreadAtom]);
+
+  useStateEventCallback(
+    mx,
+    useCallback(
+      (mEvent) => {
+        if (mEvent.getType() === StateEvent.SpaceChild) {
+          setUnreadAtom({
+            type: 'RESET',
+            unreadInfos: getUnreadInfos(mx),
+          });
+        }
+      },
+      [mx, setUnreadAtom]
+    )
+  );
 };
--- a/src/app/state/selectedRoom.ts
+++ b/src/app/state/selectedRoom.ts
@ -1,3 +0,0 @@
-import { atom } from 'jotai';
-
-export const selectedRoomAtom = atom<string | undefined>(undefined);
--- a/src/app/state/selectedTab.ts
+++ b/src/app/state/selectedTab.ts
@ -1,8 +0,0 @@
-import { atom } from 'jotai';
-
-export enum SidebarTab {
-  Home = 'Home',
-  People = 'People',
-}
-
-export const selectedTabAtom = atom<SidebarTab | string>(SidebarTab.Home);
--- a/src/app/state/spaceRooms.ts
+++ b/src/app/state/spaceRooms.ts
@ -0,0 +1,54 @@
+import { atom } from 'jotai';
+import produce from 'immer';
+import {
+  atomWithLocalStorage,
+  getLocalStorageItem,
+  setLocalStorageItem,
+} from './utils/atomWithLocalStorage';
+
+const SPACE_ROOMS = 'spaceRooms';
+
+const baseSpaceRoomsAtom = atomWithLocalStorage<Set<string>>(
+  SPACE_ROOMS,
+  (key) => {
+    const arrayValue = getLocalStorageItem<string[]>(key, []);
+    return new Set(arrayValue);
+  },
+  (key, value) => {
+    const arrayValue = Array.from(value);
+    setLocalStorageItem(key, arrayValue);
+  }
+);
+
+type SpaceRoomsAction =
+  | {
+      type: 'PUT';
+      roomId: string;
+    }
+  | {
+      type: 'DELETE';
+      roomId: string;
+    };
+
+export const spaceRoomsAtom = atom<Set<string>, [SpaceRoomsAction], undefined>(
+  (get) => get(baseSpaceRoomsAtom),
+  (get, set, action) => {
+    if (action.type === 'DELETE') {
+      set(
+        baseSpaceRoomsAtom,
+        produce(get(baseSpaceRoomsAtom), (draft) => {
+          draft.delete(action.roomId);
+        })
+      );
+      return;
+    }
+    if (action.type === 'PUT') {
+      set(
+        baseSpaceRoomsAtom,
+        produce(get(baseSpaceRoomsAtom), (draft) => {
+          draft.add(action.roomId);
+        })
+      );
+    }
+  }
+);
--- a/src/app/state/tabToRoom.ts
+++ b/src/app/state/tabToRoom.ts
@ -1,34 +0,0 @@
-import produce from 'immer';
-import { atom } from 'jotai';
-import { MatrixClient } from 'matrix-js-sdk';
-
-type RoomInfo = {
-  roomId: string;
-  timestamp: number;
-};
-type TabToRoom = Map<string, RoomInfo>;
-
-type TabToRoomAction = {
-  type: 'PUT';
-  tabInfo: { tabId: string; roomInfo: RoomInfo };
-};
-
-const baseTabToRoom = atom<TabToRoom>(new Map());
-export const tabToRoomAtom = atom<TabToRoom, [TabToRoomAction], undefined>(
-  (get) => get(baseTabToRoom),
-  (get, set, action) => {
-    if (action.type === 'PUT') {
-      set(
-        baseTabToRoom,
-        produce(get(baseTabToRoom), (draft) => {
-          draft.set(action.tabInfo.tabId, action.tabInfo.roomInfo);
-        })
-      );
-    }
-  }
-);
-
-export const useBindTabToRoomAtom = (mx: MatrixClient) => {
-  console.log(mx);
-  // TODO:
-};
--- a/src/app/state/typingMembers.ts
+++ b/src/app/state/typingMembers.ts
@ -1,28 +1,76 @@
+import produce from 'immer';
 import { atom, useSetAtom } from 'jotai';
 import { selectAtom } from 'jotai/utils';
-import {
-  MatrixClient,
-  RoomMember,
-  RoomMemberEvent,
-  RoomMemberEventHandlerMap,
-} from 'matrix-js-sdk';
+import { MatrixClient, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk';
 import { useEffect } from 'react';

-export type IRoomIdToTypingMembers = Map<string, RoomMember[]>;
+export const TYPING_TIMEOUT_MS = 5000; // 5 seconds

-export type IRoomIdToTypingMembersAction =
-  | {
-      type: 'PUT';
-      roomId: string;
-      member: RoomMember;
-    }
-  | {
-      type: 'DELETE';
-      roomId: string;
-      member: RoomMember;
-    };
+export type TypingReceipt = {
+  userId: string;
+  ts: number;
+};
+export type IRoomIdToTypingMembers = Map<string, TypingReceipt[]>;
+
+type TypingMemberPutAction = {
+  type: 'PUT';
+  roomId: string;
+  userId: string;
+  ts: number;
+};
+type TypingMemberDeleteAction = {
+  type: 'DELETE';
+  roomId: string;
+  userId: string;
+};
+export type IRoomIdToTypingMembersAction = TypingMemberPutAction | TypingMemberDeleteAction;

 const baseRoomIdToTypingMembersAtom = atom<IRoomIdToTypingMembers>(new Map());
+
+const putTypingMember = (
+  roomToMembers: IRoomIdToTypingMembers,
+  action: TypingMemberPutAction
+): IRoomIdToTypingMembers => {
+  let typingMembers = roomToMembers.get(action.roomId) ?? [];
+
+  typingMembers = typingMembers.filter((receipt) => receipt.userId !== action.userId);
+  typingMembers.push({
+    userId: action.userId,
+    ts: action.ts,
+  });
+  roomToMembers.set(action.roomId, typingMembers);
+  return roomToMembers;
+};
+
+const deleteTypingMember = (
+  roomToMembers: IRoomIdToTypingMembers,
+  action: TypingMemberDeleteAction
+): IRoomIdToTypingMembers => {
+  let typingMembers = roomToMembers.get(action.roomId) ?? [];
+
+  typingMembers = typingMembers.filter((receipt) => receipt.userId !== action.userId);
+  if (typingMembers.length === 0) {
+    roomToMembers.delete(action.roomId);
+  } else {
+    roomToMembers.set(action.roomId, typingMembers);
+  }
+  return roomToMembers;
+};
+
+const timeoutReceipt = (
+  roomToMembers: IRoomIdToTypingMembers,
+  roomId: string,
+  userId: string,
+  timeout: number
+): boolean | undefined => {
+  const typingMembers = roomToMembers.get(roomId) ?? [];
+
+  const target = typingMembers.find((receipt) => receipt.userId === userId);
+  if (!target) return undefined;
+
+  return Date.now() - target.ts >= timeout;
+};
+
 export const roomIdToTypingMembersAtom = atom<
  IRoomIdToTypingMembers,
  [IRoomIdToTypingMembersAction],
@ -30,16 +78,48 @@ export const roomIdToTypingMembersAtom = atom<
 >(
  (get) => get(baseRoomIdToTypingMembersAtom),
  (get, set, action) => {
-    const roomIdToTypingMembers = get(baseRoomIdToTypingMembersAtom);
-    let typingMembers = roomIdToTypingMembers.get(action.roomId) ?? [];
-
-    typingMembers = typingMembers.filter((member) => member.userId !== action.member.userId);
+    const rToTyping = get(baseRoomIdToTypingMembersAtom);

    if (action.type === 'PUT') {
-      typingMembers = [...typingMembers, action.member];
+      set(
+        baseRoomIdToTypingMembersAtom,
+        produce(rToTyping, (draft) => putTypingMember(draft, action))
+      );
+
+      // remove typing receipt after some timeout
+      // to prevent stuck typing members
+      setTimeout(() => {
+        const { roomId, userId } = action;
+        const timeout = timeoutReceipt(
+          get(baseRoomIdToTypingMembersAtom),
+          roomId,
+          userId,
+          TYPING_TIMEOUT_MS
+        );
+        if (timeout) {
+          set(
+            baseRoomIdToTypingMembersAtom,
+            produce(get(baseRoomIdToTypingMembersAtom), (draft) =>
+              deleteTypingMember(draft, {
+                type: 'DELETE',
+                roomId,
+                userId,
+              })
+            )
+          );
+        }
+      }, TYPING_TIMEOUT_MS);
+    }
+
+    if (
+      action.type === 'DELETE' &&
+      rToTyping.get(action.roomId)?.find((receipt) => receipt.userId === action.userId)
+    ) {
+      set(
+        baseRoomIdToTypingMembersAtom,
+        produce(rToTyping, (draft) => deleteTypingMember(draft, action))
+      );
    }
-    roomIdToTypingMembers.set(action.roomId, typingMembers);
-    set(baseRoomIdToTypingMembersAtom, new Map([...roomIdToTypingMembers]));
  }
 );

@ -57,7 +137,8 @@ export const useBindRoomIdToTypingMembersAtom = (
      setTypingMembers({
        type: member.typing ? 'PUT' : 'DELETE',
        roomId: member.roomId,
-        member,
+        userId: member.userId,
+        ts: Date.now(),
      });
    };