add navigation atoms

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
   rules: {
     'linebreak-style': 0,
     'no-underscore-dangle': 0,
+    "no-shadow": "off",
 
     "import/prefer-default-export": "off",
     "import/extensions": "off",
@@ -55,5 +56,6 @@ module.exports = {
     "react-hooks/exhaustive-deps": "error",
 
     "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-shadow": "error"
   },
 };

index.html

@@ -27,7 +27,7 @@
 
     <link id="favicon" rel="shortcut icon" href="./public/favicon.ico" />
 
-    <link rel="manifest" href="./manifest.json" />
+    <link rel="manifest" href="./public/manifest.json" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="application-name" content="Cinny" />
     <meta name="apple-mobile-web-app-title" content="Cinny" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "2.2.3",
+  "version": "2.2.2",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
@@ -24,14 +24,22 @@
     "@khanacademy/simple-markdown": "0.8.6",
     "@matrix-org/olm": "3.2.14",
     "@tippyjs/react": "4.2.6",
+    "@vanilla-extract/css": "1.9.3",
+    "@vanilla-extract/recipes": "0.3.0",
+    "@vanilla-extract/vite-plugin": "3.7.1",
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
+    "classnames": "2.3.2",
     "dateformat": "5.0.3",
     "emojibase-data": "7.0.1",
     "file-saver": "2.0.5",
     "flux": "4.0.3",
+    "focus-trap-react": "10.0.2",
+    "folds": "1.0.4",
     "formik": "2.2.9",
     "html-react-parser": "3.0.4",
+    "immer": "9.0.16",
+    "jotai": "1.12.0",
     "katex": "0.16.4",
     "linkify-html": "4.0.2",
     "linkifyjs": "4.0.2",
@@ -50,16 +58,12 @@
     "twemoji": "14.0.2"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
-    "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
-    "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@typescript-eslint/eslint-plugin": "5.46.1",
     "@typescript-eslint/parser": "5.46.1",
     "@vitejs/plugin-react": "3.0.0",
-    "buffer": "6.0.3",
     "eslint": "8.29.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-prettier": "8.5.0",
@@ -67,11 +71,10 @@
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-react": "7.31.11",
     "eslint-plugin-react-hooks": "4.6.0",
-    "mini-svg-data-uri": "1.4.4",
     "prettier": "2.8.1",
     "sass": "1.56.2",
     "typescript": "4.9.4",
-    "vite": "4.0.1",
+    "vite": "4.0.4",
     "vite-plugin-static-copy": "0.13.0"
   }
 }

src/app/atoms/system-icons/RawIcon.jsx

@@ -2,18 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RawIcon.scss';
 
-function RawIcon({ color, size, src, isImage }) {
+function RawIcon({
+  color, size, src, isImage,
+}) {
   const style = {};
   if (color !== null) style.backgroundColor = color;
   if (isImage) {
     style.backgroundColor = 'transparent';
-    style.backgroundImage = `url("${src}")`;
+    style.backgroundImage = `url(${src})`;
   } else {
-    style.WebkitMaskImage = `url("${src}")`;
-    style.maskImage = `url("${src}")`;
+    style.WebkitMaskImage = `url(${src})`;
+    style.maskImage = `url(${src})`;
   }
 
-  return <span className={`ic-raw ic-raw-${size}`} style={style} />;
+  return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
 }
 
 RawIcon.defaultProps = {

src/app/components/sidebar/Sidebar.css.ts

@@ -0,0 +1,111 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { color, config, DefaultReset, toRem } from 'folds';
+
+export const Sidebar = style([
+  DefaultReset,
+  {
+    width: toRem(66),
+    backgroundColor: color.Background.Container,
+    borderRight: `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`,
+
+    display: 'flex',
+    flexDirection: 'column',
+    color: color.Background.OnContainer,
+  },
+]);
+
+export const SidebarStack = style([
+  DefaultReset,
+  {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: config.space.S300,
+    padding: `${config.space.S300} 0`,
+  },
+]);
+
+const PUSH_X = 2;
+export const SidebarAvatarBox = recipe({
+  base: [
+    DefaultReset,
+    {
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative',
+      transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
+
+      selectors: {
+        '&:hover': {
+          transform: `translateX(${toRem(PUSH_X)})`,
+        },
+        '&::before': {
+          content: '',
+          display: 'none',
+          position: 'absolute',
+          left: toRem(-11.5 - PUSH_X),
+          width: toRem(3 + PUSH_X),
+          height: toRem(16),
+          borderRadius: `0 ${toRem(4)} ${toRem(4)} 0`,
+          background: 'CurrentColor',
+          transition: 'height 200ms linear',
+        },
+        '&:hover::before': {
+          display: 'block',
+          width: toRem(3),
+        },
+      },
+    },
+  ],
+  variants: {
+    active: {
+      true: {
+        selectors: {
+          '&::before': {
+            display: 'block',
+            height: toRem(24),
+          },
+          '&:hover::before': {
+            width: toRem(3 + PUSH_X),
+          },
+        },
+      },
+    },
+  },
+});
+
+export type SidebarAvatarBoxVariants = RecipeVariants<typeof SidebarAvatarBox>;
+
+export const SidebarBadgeBox = recipe({
+  base: [
+    DefaultReset,
+    {
+      position: 'absolute',
+      zIndex: 1,
+    },
+  ],
+  variants: {
+    hasCount: {
+      true: {
+        top: toRem(-6),
+        right: toRem(-6),
+      },
+      false: {
+        top: toRem(-2),
+        right: toRem(-2),
+      },
+    },
+  },
+  defaultVariants: {
+    hasCount: false,
+  },
+});
+
+export type SidebarBadgeBoxVariants = RecipeVariants<typeof SidebarBadgeBox>;
+
+export const SidebarBadgeOutline = style({
+  boxShadow: `0 0 0 ${config.borderWidth.B500} ${color.Background.Container}`,
+});

src/app/components/sidebar/Sidebar.tsx

@@ -0,0 +1,8 @@
+import classNames from 'classnames';
+import { as } from 'folds';
+import React from 'react';
+import * as css from './Sidebar.css';
+
+export const Sidebar = as<'div'>(({ as: AsSidebar = 'div', className, ...props }, ref) => (
+  <AsSidebar className={classNames(css.Sidebar, className)} {...props} ref={ref} />
+));

src/app/components/sidebar/SidebarAvatar.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { as, Avatar, Box, color, config, Text, Tooltip, TooltipProvider } from 'folds';
+import React, { forwardRef, MouseEventHandler, ReactNode } from 'react';
+import * as css from './Sidebar.css';
+
+const SidebarAvatarBox = as<'div', css.SidebarAvatarBoxVariants>(
+  ({ as: AsSidebarAvatarBox = 'div', className, active, ...props }, ref) => (
+    <AsSidebarAvatarBox
+      className={classNames(css.SidebarAvatarBox({ active }), className)}
+      {...props}
+      ref={ref}
+    />
+  )
+);
+
+export const SidebarAvatar = forwardRef<
+  HTMLDivElement,
+  css.SidebarAvatarBoxVariants &
+    css.SidebarBadgeBoxVariants & {
+      outlined?: boolean;
+      avatarChildren: ReactNode;
+      tooltip: ReactNode | string;
+      notificationBadge?: (badgeClassName: string) => ReactNode;
+      onClick?: MouseEventHandler<HTMLButtonElement>;
+      onContextMenu?: MouseEventHandler<HTMLButtonElement>;
+    }
+>(
+  (
+    {
+      active,
+      hasCount,
+      outlined,
+      avatarChildren,
+      tooltip,
+      notificationBadge,
+      onClick,
+      onContextMenu,
+    },
+    ref
+  ) => (
+    <SidebarAvatarBox active={active} ref={ref}>
+      <TooltipProvider
+        delay={0}
+        position="right"
+        tooltip={
+          <Tooltip>
+            <Text size="T300">{tooltip}</Text>
+          </Tooltip>
+        }
+      >
+        {(avRef) => (
+          <Avatar
+            ref={avRef}
+            as="button"
+            onClick={onClick}
+            onContextMenu={onContextMenu}
+            style={{
+              border: outlined
+                ? `${config.borderWidth.B300} solid ${color.Background.ContainerLine}`
+                : undefined,
+              cursor: 'pointer',
+            }}
+          >
+            {avatarChildren}
+          </Avatar>
+        )}
+      </TooltipProvider>
+      {notificationBadge && (
+        <Box className={css.SidebarBadgeBox({ hasCount })}>
+          {notificationBadge(css.SidebarBadgeOutline)}
+        </Box>
+      )}
+    </SidebarAvatarBox>
+  )
+);

src/app/components/sidebar/SidebarContent.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+import { Box, Scroll } from 'folds';
+
+type SidebarContentProps = {
+  scrollable: ReactNode;
+  sticky: ReactNode;
+};
+export function SidebarContent({ scrollable, sticky }: SidebarContentProps) {
+  return (
+    <>
+      <Box direction="Column" grow="Yes">
+        <Scroll variant="Background" size="0">
+          {scrollable}
+        </Scroll>
+      </Box>
+      <Box direction="Column" shrink="No">
+        {sticky}
+      </Box>
+    </>
+  );
+}

src/app/components/sidebar/SidebarStack.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import classNames from 'classnames';
+import { as } from 'folds';
+import * as css from './Sidebar.css';
+
+export const SidebarStack = as<'div'>(
+  ({ as: AsSidebarStack = 'div', className, ...props }, ref) => (
+    <AsSidebarStack className={classNames(css.SidebarStack, className)} {...props} ref={ref} />
+  )
+);

src/app/components/sidebar/SidebarStackSeparator.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Line, toRem } from 'folds';
+
+export function SidebarStackSeparator() {
+  return (
+    <Line
+      role="separator"
+      style={{ width: toRem(24), margin: '0 auto' }}
+      variant="Background"
+      size="300"
+    />
+  );
+}

src/app/components/sidebar/index.ts

@@ -0,0 +1,5 @@
+export * from './Sidebar';
+export * from './SidebarAvatar';
+export * from './SidebarContent';
+export * from './SidebarStack';
+export * from './SidebarStackSeparator';

src/app/molecules/image-upload/ImageUpload.jsx

@@ -74,7 +74,7 @@ function ImageUpload({
           <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
         </button>
       )}
-      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" accept="image/*" />
+      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
     </div>
   );
 }

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -13,7 +13,6 @@ import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 import AsyncSearch from '../../../util/AsyncSearch';
 import { addRecentEmoji, getRecentEmojis } from './recent';
-import { TWEMOJI_BASE_URL } from '../../../util/twemojify';
 
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
@@ -47,49 +46,45 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
         const emoji = groupEmojis[emojiIndex];
         emojiRow.push(
           <span key={emojiIndex}>
-            {emoji.hexcode ? (
-              // This is a unicode emoji, and should be rendered with twemoji
-              parse(
-                twemoji.parse(emoji.unicode, {
-                  attributes: () => ({
-                    unicode: emoji.unicode,
-                    shortcodes: emoji.shortcodes?.toString(),
-                    hexcode: emoji.hexcode,
-                    loading: 'lazy',
-                  }),
-                  base: TWEMOJI_BASE_URL,
-                })
-              )
-            ) : (
-              // This is a custom emoji, and should be render as an mxc
-              <img
-                className="emoji"
-                draggable="false"
-                loading="lazy"
-                alt={emoji.shortcode}
-                unicode={`:${emoji.shortcode}:`}
-                shortcodes={emoji.shortcode}
-                src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
-                data-mx-emoticon={emoji.mxc}
-              />
-            )}
-          </span>
+            {
+              emoji.hexcode
+                // This is a unicode emoji, and should be rendered with twemoji
+                ? parse(twemoji.parse(
+                  emoji.unicode,
+                  {
+                    attributes: () => ({
+                      unicode: emoji.unicode,
+                      shortcodes: emoji.shortcodes?.toString(),
+                      hexcode: emoji.hexcode,
+                      loading: 'lazy',
+                    }),
+                  },
+                ))
+                // This is a custom emoji, and should be render as an mxc
+                : (
+                  <img
+                    className="emoji"
+                    draggable="false"
+                    loading="lazy"
+                    alt={emoji.shortcode}
+                    unicode={`:${emoji.shortcode}:`}
+                    shortcodes={emoji.shortcode}
+                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
+                    data-mx-emoticon={emoji.mxc}
+                  />
+                )
+            }
+          </span>,
         );
       }
-      emojiBoard.push(
-        <div key={r} className="emoji-row">
-          {emojiRow}
-        </div>
-      );
+      emojiBoard.push(<div key={r} className="emoji-row">{emojiRow}</div>);
     }
     return emojiBoard;
   }
 
   return (
     <div className="emoji-group">
-      <Text className="emoji-group__header" variant="b2" weight="bold">
-        {name}
-      </Text>
+      <Text className="emoji-group__header" variant="b2" weight="bold">{name}</Text>
       {groupEmojis.length !== 0 && <div className="emoji-set noselect">{getEmojiBoard()}</div>}
     </div>
   );
@@ -97,16 +92,17 @@ const EmojiGroup = React.memo(({ name, groupEmojis }) => {
 
 EmojiGroup.propTypes = {
   name: PropTypes.string.isRequired,
-  groupEmojis: PropTypes.arrayOf(
-    PropTypes.shape({
-      length: PropTypes.number,
-      unicode: PropTypes.string,
-      hexcode: PropTypes.string,
-      mxc: PropTypes.string,
-      shortcode: PropTypes.string,
-      shortcodes: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-    })
-  ).isRequired,
+  groupEmojis: PropTypes.arrayOf(PropTypes.shape({
+    length: PropTypes.number,
+    unicode: PropTypes.string,
+    hexcode: PropTypes.string,
+    mxc: PropTypes.string,
+    shortcode: PropTypes.string,
+    shortcodes: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+    ]),
+  })).isRequired,
 };
 
 const asyncSearch = new AsyncSearch();
@@ -132,13 +128,7 @@ function SearchedEmoji() {
 
   if (searchedEmojis === null) return false;
 
-  return (
-    <EmojiGroup
-      key="-1"
-      name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'}
-      groupEmojis={searchedEmojis.emojis}
-    />
-  );
+  return <EmojiGroup key="-1" name={searchedEmojis.emojis.length === 0 ? 'No search result found' : 'Search results'} groupEmojis={searchedEmojis.emojis} />;
 }
 
 function EmojiBoard({ onSelect, searchRef }) {
@@ -156,10 +146,7 @@ function EmojiBoard({ onSelect, searchRef }) {
     if (typeof shortcodes === 'undefined') shortcodes = undefined;
     else shortcodes = shortcodes.split(',');
     return {
-      unicode,
-      hexcode,
-      shortcodes,
-      mxc,
+      unicode, hexcode, shortcodes, mxc,
     };
   }
 
@@ -224,9 +211,10 @@ function EmojiBoard({ onSelect, searchRef }) {
       const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
       const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
       if (room) {
-        const packs = getRelevantPacks(room.client, [room, ...parentRooms]).filter(
-          (pack) => pack.getEmojis().length !== 0
-        );
+        const packs = getRelevantPacks(
+          room.client,
+          [room, ...parentRooms],
+        ).filter((pack) => pack.getEmojis().length !== 0);
 
         // Set an index for each pack so that we know where to jump when the user uses the nav
         for (let i = 0; i < packs.length; i += 1) {
@@ -275,41 +263,44 @@ function EmojiBoard({ onSelect, searchRef }) {
             />
           )}
           <div className="emoji-board__nav-custom">
-            {availableEmojis.map((pack) => {
-              const src = initMatrix.matrixClient.mxcUrlToHttp(
-                pack.avatarUrl ?? pack.getEmojis()[0].mxc
-              );
-              return (
-                <IconButton
-                  onClick={() => openGroup(recentOffset + pack.packIndex)}
-                  src={src}
-                  key={pack.packIndex}
-                  tooltip={pack.displayName ?? 'Unknown'}
-                  tooltipPlacement="left"
-                  isImage
-                />
-              );
-            })}
+            {
+              availableEmojis.map((pack) => {
+                const src = initMatrix.matrixClient
+                  .mxcUrlToHttp(pack.avatarUrl ?? pack.getEmojis()[0].mxc);
+                return (
+                  <IconButton
+                    onClick={() => openGroup(recentOffset + pack.packIndex)}
+                    src={src}
+                    key={pack.packIndex}
+                    tooltip={pack.displayName ?? 'Unknown'}
+                    tooltipPlacement="left"
+                    isImage
+                  />
+                );
+              })
+            }
           </div>
           <div className="emoji-board__nav-twemoji">
-            {[
-              [0, EmojiIC, 'Smilies'],
-              [1, DogIC, 'Animals'],
-              [2, CupIC, 'Food'],
-              [3, BallIC, 'Activities'],
-              [4, PhotoIC, 'Travel'],
-              [5, BulbIC, 'Objects'],
-              [6, PeaceIC, 'Symbols'],
-              [7, FlagIC, 'Flags'],
-            ].map(([indx, ico, name]) => (
-              <IconButton
-                onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
-                key={indx}
-                src={ico}
-                tooltip={name}
-                tooltipPlacement="left"
-              />
-            ))}
+            {
+              [
+                [0, EmojiIC, 'Smilies'],
+                [1, DogIC, 'Animals'],
+                [2, CupIC, 'Food'],
+                [3, BallIC, 'Activities'],
+                [4, PhotoIC, 'Travel'],
+                [5, BulbIC, 'Objects'],
+                [6, PeaceIC, 'Symbols'],
+                [7, FlagIC, 'Flags'],
+              ].map(([indx, ico, name]) => (
+                <IconButton
+                  onClick={() => openGroup(recentOffset + availableEmojis.length + indx)}
+                  key={indx}
+                  src={ico}
+                  tooltip={name}
+                  tooltipPlacement="left"
+                />
+              ))
+            }
           </div>
         </div>
       </ScrollView>
@@ -322,25 +313,27 @@ function EmojiBoard({ onSelect, searchRef }) {
           <ScrollView ref={scrollEmojisRef} autoHide>
             <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
               <SearchedEmoji />
-              {recentEmojis.length > 0 && (
-                <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />
-              )}
-              {availableEmojis.map((pack) => (
-                <EmojiGroup
-                  name={pack.displayName ?? 'Unknown'}
-                  key={pack.packIndex}
-                  groupEmojis={pack.getEmojis()}
-                  className="custom-emoji-group"
-                />
-              ))}
-              {emojiGroups.map((group) => (
-                <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
-              ))}
+              {recentEmojis.length > 0 && <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />}
+              {
+                availableEmojis.map((pack) => (
+                  <EmojiGroup
+                    name={pack.displayName ?? 'Unknown'}
+                    key={pack.packIndex}
+                    groupEmojis={pack.getEmojis()}
+                    className="custom-emoji-group"
+                  />
+                ))
+              }
+              {
+                emojiGroups.map((group) => (
+                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
+                ))
+              }
             </div>
           </ScrollView>
         </div>
         <div ref={emojiInfo} className="emoji-board__content__info">
-          <div>{parse(twemoji.parse('🙂', { base: TWEMOJI_BASE_URL }))}</div>
+          <div>{ parse(twemoji.parse('🙂')) }</div>
           <Text>:slight_smile:</Text>
         </div>
       </div>

src/app/organisms/navigation/Navigation.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import './Navigation.scss';
 
+import { Sidebar1 } from './Sidebar1';
 import SideBar from './SideBar';
 import Drawer from './Drawer';
 
 function Navigation() {
   return (
     <div className="navigation">
+      <Sidebar1 />
       <SideBar />
       <Drawer />
     </div>

src/app/organisms/navigation/SideBar.scss

@@ -7,10 +7,7 @@
   width: var(--navigation-sidebar-width);
   height: 100%;
   background-color: var(--bg-surface-extra-low);
-  @include dir.side(border,
-    none,
-    1px solid var(--bg-surface-border),
-  );
+  @include dir.side(border, none, 1px solid var(--bg-surface-border));
 
   &__scrollable,
   &__sticky {
@@ -24,7 +21,7 @@
 
 .scrollable-content {
   &::after {
-    content: "";
+    content: '';
     display: block;
     width: 100%;
     height: 8px;
@@ -33,7 +30,8 @@
     background-image: linear-gradient(
       to top,
       var(--bg-surface-extra-low),
-      var(--bg-surface-extra-low-transparent));
+      var(--bg-surface-extra-low-transparent)
+    );
     position: sticky;
     bottom: -1px;
     left: 0;
@@ -44,7 +42,7 @@
 .space-container,
 .sticky-container {
   @extend .cp-fx__column--c-c;
-  
+
   padding: var(--sp-ultra-tight) 0;
 
   & > .sidebar-avatar,
@@ -63,7 +61,7 @@
   box-shadow: var(--bs-danger-border);
   animation-name: pushRight;
   animation-duration: 400ms;
-  animation-iteration-count: infinite;
+  animation-iteration-count: 30;
   animation-direction: alternate;
 }
 
@@ -74,4 +72,4 @@
   to {
     transform: translateX(0) scale(1);
   }
-}
+}

src/app/organisms/navigation/Sidebar1.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { Icon, Icons, Badge, AvatarFallback, Text } from 'folds';
+import { useAtom } from 'jotai';
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarStackSeparator,
+  SidebarStack,
+  SidebarAvatar,
+} from '../../components/sidebar';
+import { selectedTabAtom, SidebarTab } from '../../state/selectedTab';
+
+export function Sidebar1() {
+  const [selectedTab, setSelectedTab] = useAtom(selectedTabAtom);
+
+  return (
+    <Sidebar>
+      <SidebarContent
+        scrollable={
+          <>
+            <SidebarStack>
+              <SidebarAvatar
+                active={selectedTab === SidebarTab.Home}
+                outlined
+                tooltip="Home"
+                avatarChildren={<Icon src={Icons.Home} filled />}
+                onClick={() => setSelectedTab(SidebarTab.Home)}
+              />
+              <SidebarAvatar
+                active={selectedTab === SidebarTab.People}
+                outlined
+                tooltip="People"
+                avatarChildren={<Icon src={Icons.User} />}
+                onClick={() => setSelectedTab(SidebarTab.People)}
+              />
+            </SidebarStack>
+            <SidebarStackSeparator />
+            <SidebarStack>
+              <SidebarAvatar
+                tooltip="Space A"
+                notificationBadge={(badgeClassName) => (
+                  <Badge
+                    className={badgeClassName}
+                    size="200"
+                    variant="Secondary"
+                    fill="Solid"
+                    radii="Pill"
+                  />
+                )}
+                avatarChildren={
+                  <AvatarFallback
+                    style={{
+                      backgroundColor: 'red',
+                      color: 'white',
+                    }}
+                  >
+                    <Text size="T500">B</Text>
+                  </AvatarFallback>
+                }
+              />
+              <SidebarAvatar
+                tooltip="Space B"
+                hasCount
+                notificationBadge={(badgeClassName) => (
+                  <Badge className={badgeClassName} radii="Pill" fill="Solid" variant="Secondary">
+                    <Text size="L400">64</Text>
+                  </Badge>
+                )}
+                avatarChildren={
+                  <AvatarFallback
+                    style={{
+                      backgroundColor: 'green',
+                      color: 'white',
+                    }}
+                  >
+                    <Text size="T500">C</Text>
+                  </AvatarFallback>
+                }
+              />
+            </SidebarStack>
+            <SidebarStackSeparator />
+            <SidebarStack>
+              <SidebarAvatar
+                outlined
+                tooltip="Explore Community"
+                avatarChildren={<Icon src={Icons.Explore} />}
+              />
+              <SidebarAvatar
+                outlined
+                tooltip="Create Space"
+                avatarChildren={<Icon src={Icons.Plus} />}
+              />
+            </SidebarStack>
+          </>
+        }
+        sticky={
+          <>
+            <SidebarStackSeparator />
+            <SidebarStack>
+              <SidebarAvatar
+                outlined
+                tooltip="Search"
+                avatarChildren={<Icon src={Icons.Search} />}
+              />
+              <SidebarAvatar
+                tooltip="User Settings"
+                avatarChildren={
+                  <AvatarFallback
+                    style={{
+                      backgroundColor: 'blue',
+                      color: 'white',
+                    }}
+                  >
+                    <Text size="T500">A</Text>
+                  </AvatarFallback>
+                }
+              />
+            </SidebarStack>
+          </>
+        }
+      />
+    </Sidebar>
+  );
+}

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -5,7 +5,7 @@ import './RoomViewCmdBar.scss';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 
-import { twemojify, TWEMOJI_BASE_URL } from '../../../util/twemojify';
+import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
 import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
@@ -31,7 +31,7 @@ CmdItem.propTypes = {
 
 function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
   function renderCmdSuggestions(cmdPrefix, cmds) {
-    const cmdOptString = typeof option === 'string' ? `/${option}` : '/?';
+    const cmdOptString = (typeof option === 'string') ? `/${option}` : '/?';
     return cmds.map((cmd) => (
       <CmdItem
         key={cmd}
@@ -53,15 +53,15 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
 
     // Renders a small Twemoji
     function renderTwemoji(emoji) {
-      return parse(
-        twemoji.parse(emoji.unicode, {
+      return parse(twemoji.parse(
+        emoji.unicode,
+        {
           attributes: () => ({
             unicode: emoji.unicode,
             shortcodes: emoji.shortcodes?.toString(),
           }),
-          base: TWEMOJI_BASE_URL,
-        })
-      );
+        },
+      ));
     }
 
     // Render a custom emoji
@@ -87,12 +87,10 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
     return emos.map((emoji) => (
       <CmdItem
         key={emoji.shortcode}
-        onClick={() =>
-          fireCmd({
-            prefix: emPrefix,
-            result: emoji,
-          })
-        }
+        onClick={() => fireCmd({
+          prefix: emPrefix,
+          result: emoji,
+        })}
       >
         <Text variant="b1">{renderEmoji(emoji)}</Text>
         <Text variant="b2">{`:${emoji.shortcode}:`}</Text>
@@ -189,13 +187,10 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
         });
       },
       '@': () => {
-        const members = mx
-          .getRoom(roomId)
-          .getJoinedMembers()
-          .map((member) => ({
-            name: member.name,
-            userId: member.userId.slice(1),
-          }));
+        const members = mx.getRoom(roomId).getJoinedMembers().map((member) => ({
+          name: member.name,
+          userId: member.userId.slice(1),
+        }));
         asyncSearch.setup(members, { keys: ['name', 'userId'], limit: 20 });
         const endIndex = members.length > 20 ? 20 : members.length;
         setCmd({ prefix, suggestions: members.slice(0, endIndex) });
@@ -282,7 +277,9 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
       </div>
       <div className="cmd-bar__content">
         <ScrollView horizontal vertical={false} invisible>
-          <div className="cmd-bar__content-suggestions">{renderSuggestions(cmd, fireCmd)}</div>
+          <div className="cmd-bar__content-suggestions">
+            { renderSuggestions(cmd, fireCmd) }
+          </div>
         </ScrollView>
       </div>
     </div>

src/app/pages/App.jsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { StrictMode } from 'react';
+import { Provider } from 'jotai';
 
 import { isAuthenticated } from '../../client/state/auth';
 
@@ -6,7 +7,11 @@ import Auth from '../templates/auth/Auth';
 import Client from '../templates/client/Client';
 
 function App() {
-  return isAuthenticated() ? <Client /> : <Auth />;
+  return (
+    <StrictMode>
+      <Provider>{isAuthenticated() ? <Client /> : <Auth />}</Provider>
+    </StrictMode>
+  );
 }
 
 export default App;

src/app/state/hooks/inviteList.ts

@@ -0,0 +1,63 @@
+import { useAtomValue, WritableAtom } from 'jotai';
+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, RoomsAction } from '../utils';
+import { MDirectAction } from '../mDirectList';
+
+export const useSpaceInvites = (
+  mx: MatrixClient,
+  allInvitesAtom: WritableAtom<string[], RoomsAction>
+) => {
+  const selector = useCallback(
+    (rooms: string[]) => rooms.filter((roomId) => isSpace(mx.getRoom(roomId))),
+    [mx]
+  );
+  return useAtomValue(selectAtom(allInvitesAtom, selector, compareRoomsEqual));
+};
+
+export const useRoomInvites = (
+  mx: MatrixClient,
+  allInvitesAtom: WritableAtom<string[], RoomsAction>,
+  mDirectAtom: WritableAtom<Set<string>, MDirectAction>
+) => {
+  const mDirects = useAtomValue(mDirectAtom);
+  const selector = useCallback(
+    (rooms: string[]) =>
+      rooms.filter(
+        (roomId) =>
+          isRoom(mx.getRoom(roomId)) &&
+          !(mDirects.has(roomId) || isDirectInvite(mx.getRoom(roomId), mx.getUserId()))
+      ),
+    [mx, mDirects]
+  );
+  return useAtomValue(selectAtom(allInvitesAtom, selector, compareRoomsEqual));
+};
+
+export const useDirectInvites = (
+  mx: MatrixClient,
+  allInvitesAtom: WritableAtom<string[], RoomsAction>,
+  mDirectAtom: WritableAtom<Set<string>, MDirectAction>
+) => {
+  const mDirects = useAtomValue(mDirectAtom);
+  const selector = useCallback(
+    (rooms: string[]) =>
+      rooms.filter(
+        (roomId) => mDirects.has(roomId) || isDirectInvite(mx.getRoom(roomId), mx.getUserId())
+      ),
+    [mx, mDirects]
+  );
+  return useAtomValue(selectAtom(allInvitesAtom, selector, compareRoomsEqual));
+};
+
+export const useUnsupportedInvites = (
+  mx: MatrixClient,
+  allInvitesAtom: WritableAtom<string[], RoomsAction>
+) => {
+  const selector = useCallback(
+    (rooms: string[]) => rooms.filter((roomId) => isUnsupportedRoom(mx.getRoom(roomId))),
+    [mx]
+  );
+  return useAtomValue(selectAtom(allInvitesAtom, selector, compareRoomsEqual));
+};

src/app/state/hooks/roomList.ts

@@ -0,0 +1,54 @@
+import { useAtomValue, WritableAtom } 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, RoomsAction } from '../utils';
+import { MDirectAction } from '../mDirectList';
+
+export const useSpaces = (mx: MatrixClient, allRoomsAtom: WritableAtom<string[], RoomsAction>) => {
+  const selector = useCallback(
+    (rooms: string[]) => rooms.filter((roomId) => isSpace(mx.getRoom(roomId))),
+    [mx]
+  );
+  return useAtomValue(selectAtom(allRoomsAtom, selector, compareRoomsEqual));
+};
+
+export const useRooms = (
+  mx: MatrixClient,
+  allRoomsAtom: WritableAtom<string[], RoomsAction>,
+  mDirectAtom: WritableAtom<Set<string>, MDirectAction>
+) => {
+  const mDirects = useAtomValue(mDirectAtom);
+  const selector = useCallback(
+    (rooms: string[]) =>
+      rooms.filter((roomId) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId)),
+    [mx, mDirects]
+  );
+  return useAtomValue(selectAtom(allRoomsAtom, selector, compareRoomsEqual));
+};
+
+export const useDirects = (
+  mx: MatrixClient,
+  allRoomsAtom: WritableAtom<string[], RoomsAction>,
+  mDirectAtom: WritableAtom<Set<string>, MDirectAction>
+) => {
+  const mDirects = useAtomValue(mDirectAtom);
+  const selector = useCallback(
+    (rooms: string[]) =>
+      rooms.filter((roomId) => isRoom(mx.getRoom(roomId)) && mDirects.has(roomId)),
+    [mx, mDirects]
+  );
+  return useAtomValue(selectAtom(allRoomsAtom, selector, compareRoomsEqual));
+};
+
+export const useUnsupportedRooms = (
+  mx: MatrixClient,
+  allRoomsAtom: WritableAtom<string[], RoomsAction>
+) => {
+  const selector = useCallback(
+    (rooms: string[]) => rooms.filter((roomId) => isUnsupportedRoom(mx.getRoom(roomId))),
+    [mx]
+  );
+  return useAtomValue(selectAtom(allRoomsAtom, selector, compareRoomsEqual));
+};

src/app/state/hooks/settings.ts

@@ -0,0 +1,34 @@
+import { atom, useAtomValue, useSetAtom, WritableAtom } from 'jotai';
+import { SetAtom } from 'jotai/core/atom';
+import { selectAtom } from 'jotai/utils';
+import { useMemo } from 'react';
+import { Settings } from '../settings';
+
+export const useSetSetting = <K extends keyof Settings>(
+  settingsAtom: WritableAtom<Settings, Settings>,
+  key: K
+) => {
+  const setterAtom = useMemo(
+    () =>
+      atom<null, Settings[K]>(null, (get, set, value) => {
+        const s = { ...get(settingsAtom) };
+        s[key] = value;
+        set(settingsAtom, s);
+      }),
+    [settingsAtom, key]
+  );
+
+  return useSetAtom(setterAtom);
+};
+
+export const useSetting = <K extends keyof Settings>(
+  settingsAtom: WritableAtom<Settings, Settings>,
+  key: K
+): [Settings[K], SetAtom<Settings[K], void>] => {
+  const selector = useMemo(() => (s: Settings) => s[key], [key]);
+  const setting = useAtomValue(selectAtom(settingsAtom, selector));
+
+  const setter = useSetSetting(settingsAtom, key);
+
+  return [setting, setter];
+};

src/app/state/hooks/useBindAtoms.ts

@@ -0,0 +1,16 @@
+import { MatrixClient } from 'matrix-js-sdk';
+import { allInvitesAtom, useBindAllInvitesAtom } from '../inviteList';
+import { allRoomsAtom, useBindAllRoomsAtom } from '../roomList';
+import { mDirectAtom, useBindMDirectAtom } from '../mDirectList';
+import { muteChangesAtom, mutedRoomsAtom, useBindMutedRoomsAtom } from '../mutedRoomList';
+import { roomToUnreadAtom, useBindRoomToUnreadAtom } from '../roomToUnread';
+import { roomToParentsAtom, useBindRoomToParentsAtom } from '../roomToParents';
+
+export const useBindAtoms = (mx: MatrixClient) => {
+  useBindMDirectAtom(mx, mDirectAtom);
+  useBindAllInvitesAtom(mx, allInvitesAtom);
+  useBindAllRoomsAtom(mx, allRoomsAtom);
+  useBindRoomToParentsAtom(mx, roomToParentsAtom);
+  useBindMutedRoomsAtom(mx, mutedRoomsAtom);
+  useBindRoomToUnreadAtom(mx, roomToUnreadAtom, muteChangesAtom);
+};

src/app/state/inviteList.ts

@@ -0,0 +1,32 @@
+import { atom, WritableAtom } from 'jotai';
+import { MatrixClient } from 'matrix-js-sdk';
+import { useMemo } from 'react';
+import { Membership } from '../../types/matrix/room';
+import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';
+
+const baseRoomsAtom = atom<string[]>([]);
+export const allInvitesAtom = atom<string[], RoomsAction>(
+  (get) => get(baseRoomsAtom),
+  (get, set, action) => {
+    if (action.type === 'INITIALIZE') {
+      set(baseRoomsAtom, action.rooms);
+      return;
+    }
+    set(baseRoomsAtom, (ids) => {
+      const newIds = ids.filter((id) => id !== action.roomId);
+      if (action.type === 'PUT') newIds.push(action.roomId);
+      return newIds;
+    });
+  }
+);
+
+export const useBindAllInvitesAtom = (
+  mx: MatrixClient,
+  allRooms: WritableAtom<string[], RoomsAction>
+) => {
+  useBindRoomsWithMembershipsAtom(
+    mx,
+    allRooms,
+    useMemo(() => [Membership.Invite], [])
+  );
+};

src/app/state/mDirectList.ts

@@ -0,0 +1,47 @@
+import { atom, useSetAtom, WritableAtom } from 'jotai';
+import { ClientEvent, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
+import { useEffect } from 'react';
+import { AccountDataEvent } from '../../types/matrix/accountData';
+import { getAccountData, getMDirects } from '../utils/room';
+
+export type MDirectAction = {
+  type: 'INITIALIZE' | 'UPDATE';
+  rooms: Set<string>;
+};
+
+const baseMDirectAtom = atom(new Set<string>());
+export const mDirectAtom = atom<Set<string>, MDirectAction>(
+  (get) => get(baseMDirectAtom),
+  (get, set, action) => {
+    set(baseMDirectAtom, action.rooms);
+  }
+);
+
+export const useBindMDirectAtom = (
+  mx: MatrixClient,
+  mDirect: WritableAtom<Set<string>, MDirectAction>
+) => {
+  const setMDirect = useSetAtom(mDirect);
+
+  useEffect(() => {
+    const mDirectEvent = getAccountData(mx, AccountDataEvent.Direct);
+    if (mDirectEvent) {
+      setMDirect({
+        type: 'INITIALIZE',
+        rooms: getMDirects(mDirectEvent),
+      });
+    }
+
+    const handleAccountData = (event: MatrixEvent) => {
+      setMDirect({
+        type: 'UPDATE',
+        rooms: getMDirects(event),
+      });
+    };
+
+    mx.on(ClientEvent.AccountData, handleAccountData);
+    return () => {
+      mx.removeListener(ClientEvent.AccountData, handleAccountData);
+    };
+  }, [mx, setMDirect]);
+};

src/app/state/mutedRoomList.ts

@@ -0,0 +1,101 @@
+import { atom, WritableAtom, 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';
+
+export type MutedRoomsUpdate =
+  | {
+      type: 'INITIALIZE';
+      addRooms: string[];
+    }
+  | {
+      type: 'UPDATE';
+      addRooms: string[];
+      removeRooms: string[];
+    };
+
+export const muteChangesAtom = atom<MuteChanges>({
+  added: [],
+  removed: [],
+});
+
+const baseMutedRoomsAtom = atom(new Set<string>());
+export const mutedRoomsAtom = atom<Set<string>, MutedRoomsUpdate>(
+  (get) => get(baseMutedRoomsAtom),
+  (get, set, action) => {
+    const mutedRooms = new Set([...get(mutedRoomsAtom)]);
+    if (action.type === 'INITIALIZE') {
+      set(baseMutedRoomsAtom, new Set([...action.addRooms]));
+      set(muteChangesAtom, {
+        added: [...action.addRooms],
+        removed: [],
+      });
+      return;
+    }
+    if (action.type === 'UPDATE') {
+      action.removeRooms.forEach((roomId) => mutedRooms.delete(roomId));
+      action.addRooms.forEach((roomId) => mutedRooms.add(roomId));
+      set(baseMutedRoomsAtom, mutedRooms);
+      set(muteChangesAtom, {
+        added: [...action.addRooms],
+        removed: [...action.removeRooms],
+      });
+    }
+  }
+);
+
+export const useBindMutedRoomsAtom = (
+  mx: MatrixClient,
+  mutedAtom: WritableAtom<Set<string>, MutedRoomsUpdate>
+) => {
+  const setMuted = useSetAtom(mutedAtom);
+
+  useEffect(() => {
+    const overrideRules = mx.getAccountData('m.push_rules')?.getContent<IPushRules>()
+      ?.global?.override;
+    if (overrideRules) {
+      const mutedRooms = overrideRules.reduce<string[]>((rooms, rule) => {
+        if (isMutedRule(rule)) rooms.push(rule.rule_id);
+        return rooms;
+      }, []);
+      setMuted({
+        type: 'INITIALIZE',
+        addRooms: mutedRooms,
+      });
+    }
+  }, [mx, setMuted]);
+
+  useEffect(() => {
+    const handlePushRules = (mEvent: MatrixEvent, oldMEvent?: MatrixEvent) => {
+      if (mEvent.getType() === 'm.push_rules') {
+        const override = mEvent?.getContent()?.global?.override as IPushRule[] | undefined;
+        const oldOverride = oldMEvent?.getContent()?.global?.override as IPushRule[] | undefined;
+        if (!override || !oldOverride) return;
+
+        const isMuteToggled = (rule: IPushRule, otherOverride: IPushRule[]) => {
+          const roomId = rule.rule_id;
+
+          const isMuted = isMutedRule(rule);
+          if (!isMuted) return false;
+          const isOtherMuted = findMutedRule(otherOverride, roomId);
+          if (isOtherMuted) return false;
+          return true;
+        };
+
+        const mutedRules = override.filter((rule) => isMuteToggled(rule, oldOverride));
+        const unMutedRules = oldOverride.filter((rule) => isMuteToggled(rule, override));
+
+        setMuted({
+          type: 'UPDATE',
+          addRooms: mutedRules.map((rule) => rule.rule_id),
+          removeRooms: unMutedRules.map((rule) => rule.rule_id),
+        });
+      }
+    };
+    mx.on(ClientEvent.AccountData, handlePushRules);
+    return () => {
+      mx.removeListener(ClientEvent.AccountData, handlePushRules);
+    };
+  }, [mx, setMuted]);
+};

src/app/state/roomList.ts

@@ -0,0 +1,31 @@
+import { atom, WritableAtom } from 'jotai';
+import { MatrixClient } from 'matrix-js-sdk';
+import { useMemo } from 'react';
+import { Membership } from '../../types/matrix/room';
+import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';
+
+const baseRoomsAtom = atom<string[]>([]);
+export const allRoomsAtom = atom<string[], RoomsAction>(
+  (get) => get(baseRoomsAtom),
+  (get, set, action) => {
+    if (action.type === 'INITIALIZE') {
+      set(baseRoomsAtom, action.rooms);
+      return;
+    }
+    set(baseRoomsAtom, (ids) => {
+      const newIds = ids.filter((id) => id !== action.roomId);
+      if (action.type === 'PUT') newIds.push(action.roomId);
+      return newIds;
+    });
+  }
+);
+export const useBindAllRoomsAtom = (
+  mx: MatrixClient,
+  allRooms: WritableAtom<string[], RoomsAction>
+) => {
+  useBindRoomsWithMembershipsAtom(
+    mx,
+    allRooms,
+    useMemo(() => [Membership.Join], [])
+  );
+};

src/app/state/roomToParents.ts

@@ -0,0 +1,120 @@
+import produce from 'immer';
+import { atom, useSetAtom, WritableAtom } from 'jotai';
+import {
+  ClientEvent,
+  MatrixClient,
+  MatrixEvent,
+  Room,
+  RoomEvent,
+  RoomStateEvent,
+} from 'matrix-js-sdk';
+import { useEffect } from 'react';
+import { Membership, RoomToParents, StateEvent } from '../../types/matrix/room';
+import {
+  getRoomToParents,
+  getSpaceChildren,
+  isSpace,
+  isValidChild,
+  mapParentWithChildren,
+} from '../utils/room';
+
+export type RoomToParentsAction =
+  | {
+      type: 'INITIALIZE';
+      roomToParents: RoomToParents;
+    }
+  | {
+      type: 'PUT';
+      parent: string;
+      children: string[];
+    }
+  | {
+      type: 'DELETE';
+      roomId: string;
+    };
+
+const baseRoomToParents = atom<RoomToParents>(new Map());
+export const roomToParentsAtom = atom<RoomToParents, RoomToParentsAction>(
+  (get) => get(baseRoomToParents),
+  (get, set, action) => {
+    if (action.type === 'INITIALIZE') {
+      set(baseRoomToParents, action.roomToParents);
+      return;
+    }
+    if (action.type === 'PUT') {
+      set(
+        baseRoomToParents,
+        produce(get(baseRoomToParents), (draftRoomToParents) => {
+          mapParentWithChildren(draftRoomToParents, action.parent, action.children);
+        })
+      );
+      return;
+    }
+    if (action.type === 'DELETE') {
+      set(
+        baseRoomToParents,
+        produce(get(baseRoomToParents), (draftRoomToParents) => {
+          const noParentRooms: string[] = [];
+          draftRoomToParents.delete(action.roomId);
+          draftRoomToParents.forEach((parents, child) => {
+            parents.delete(action.roomId);
+            if (parents.size === 0) noParentRooms.push(child);
+          });
+          noParentRooms.forEach((room) => draftRoomToParents.delete(room));
+        })
+      );
+    }
+  }
+);
+
+export const useBindRoomToParentsAtom = (
+  mx: MatrixClient,
+  roomToParents: WritableAtom<RoomToParents, RoomToParentsAction>
+) => {
+  const setRoomToParents = useSetAtom(roomToParents);
+
+  useEffect(() => {
+    setRoomToParents({ type: 'INITIALIZE', roomToParents: getRoomToParents(mx) });
+
+    const handleAddRoom = (room: Room) => {
+      if (isSpace(room) && room.getMyMembership() !== Membership.Invite) {
+        setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
+      }
+    };
+
+    const handleMembershipChange = (room: Room, membership: string) => {
+      if (isSpace(room) && membership === Membership.Join) {
+        setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
+      }
+    };
+
+    const handleStateChange = (mEvent: MatrixEvent) => {
+      if (mEvent.getType() === StateEvent.SpaceChild) {
+        const childId = mEvent.getStateKey();
+        const roomId = mEvent.getRoomId();
+        if (childId && roomId) {
+          if (isValidChild(mEvent)) {
+            setRoomToParents({ type: 'PUT', parent: roomId, children: [childId] });
+          } else {
+            setRoomToParents({ type: 'DELETE', roomId: childId });
+          }
+        }
+      }
+    };
+
+    const handleDeleteRoom = (roomId: string) => {
+      setRoomToParents({ type: 'DELETE', roomId });
+    };
+
+    mx.on(ClientEvent.Room, handleAddRoom);
+    mx.on(RoomEvent.MyMembership, handleMembershipChange);
+    mx.on(RoomStateEvent.Events, handleStateChange);
+    mx.on(ClientEvent.DeleteRoom, handleDeleteRoom);
+    return () => {
+      mx.removeListener(ClientEvent.Room, handleAddRoom);
+      mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
+      mx.removeListener(RoomStateEvent.Events, handleStateChange);
+      mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
+    };
+  }, [mx, setRoomToParents]);
+};

src/app/state/roomToUnread.ts

@@ -0,0 +1,219 @@
+import produce from 'immer';
+import { atom, useSetAtom, PrimitiveAtom, WritableAtom, useAtomValue } from 'jotai';
+import { IRoomTimelineData, MatrixClient, MatrixEvent, Room, RoomEvent } from 'matrix-js-sdk';
+import { ReceiptContent, ReceiptType } from 'matrix-js-sdk/lib/@types/read_receipts';
+import { useEffect } from 'react';
+import {
+  MuteChanges,
+  Membership,
+  NotificationType,
+  RoomToUnread,
+  UnreadInfo,
+} from '../../types/matrix/room';
+import {
+  getAllParents,
+  getNotificationType,
+  getUnreadInfo,
+  getUnreadInfos,
+  isNotificationEvent,
+  roomHaveUnread,
+} from '../utils/room';
+import { roomToParentsAtom } from './roomToParents';
+
+export type RoomToUnreadAction =
+  | {
+      type: 'RESET';
+      unreadInfos: UnreadInfo[];
+    }
+  | {
+      type: 'PUT';
+      unreadInfo: UnreadInfo;
+    }
+  | {
+      type: 'DELETE';
+      roomId: string;
+    };
+
+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,
+  });
+
+  const newH = unreadInfo.highlight - oldUnread.highlight;
+  const newT = unreadInfo.total - oldUnread.total;
+
+  allParents.forEach((parentId) => {
+    const oldParentUnread = roomToUnread.get(parentId) ?? { highlight: 0, total: 0, from: null };
+    roomToUnread.set(parentId, {
+      highlight: (oldParentUnread.highlight += newH),
+      total: (oldParentUnread.total += newT),
+      from: new Set([...(oldParentUnread.from ?? []), unreadInfo.roomId]),
+    });
+  });
+};
+
+const deleteUnreadInfo = (roomToUnread: RoomToUnread, allParents: Set<string>, roomId: string) => {
+  const oldUnread = roomToUnread.get(roomId);
+  if (!oldUnread) return;
+  roomToUnread.delete(roomId);
+
+  allParents.forEach((parentId) => {
+    const oldParentUnread = roomToUnread.get(parentId);
+    if (!oldParentUnread) return;
+    const newFrom = new Set([...(oldParentUnread.from ?? roomId)]);
+    newFrom.delete(roomId);
+    if (newFrom.size === 0) {
+      roomToUnread.delete(parentId);
+      return;
+    }
+    roomToUnread.set(parentId, {
+      highlight: oldParentUnread.highlight - oldUnread.highlight,
+      total: oldParentUnread.total - oldUnread.total,
+      from: newFrom,
+    });
+  });
+};
+
+const baseRoomToUnread = atom<RoomToUnread>(new Map());
+export const roomToUnreadAtom = atom<RoomToUnread, RoomToUnreadAction>(
+  (get) => get(baseRoomToUnread),
+  (get, set, action) => {
+    if (action.type === 'RESET') {
+      const draftRoomToUnread: RoomToUnread = new Map();
+      action.unreadInfos.forEach((unreadInfo) => {
+        putUnreadInfo(
+          draftRoomToUnread,
+          getAllParents(get(roomToParentsAtom), unreadInfo.roomId),
+          unreadInfo
+        );
+      });
+      set(baseRoomToUnread, draftRoomToUnread);
+      return;
+    }
+    if (action.type === 'PUT') {
+      set(
+        baseRoomToUnread,
+        produce(get(baseRoomToUnread), (draftRoomToUnread) =>
+          putUnreadInfo(
+            draftRoomToUnread,
+            getAllParents(get(roomToParentsAtom), action.unreadInfo.roomId),
+            action.unreadInfo
+          )
+        )
+      );
+      return;
+    }
+    if (action.type === 'DELETE' && get(baseRoomToUnread).has(action.roomId)) {
+      set(
+        baseRoomToUnread,
+        produce(get(baseRoomToUnread), (draftRoomToUnread) =>
+          deleteUnreadInfo(
+            draftRoomToUnread,
+            getAllParents(get(roomToParentsAtom), action.roomId),
+            action.roomId
+          )
+        )
+      );
+    }
+  }
+);
+
+export const useBindRoomToUnreadAtom = (
+  mx: MatrixClient,
+  unreadAtom: WritableAtom<RoomToUnread, RoomToUnreadAction>,
+  muteChangesAtom: PrimitiveAtom<MuteChanges>
+) => {
+  const setUnreadAtom = useSetAtom(unreadAtom);
+  const muteChanges = useAtomValue(muteChangesAtom);
+
+  useEffect(() => {
+    setUnreadAtom({
+      type: 'RESET',
+      unreadInfos: getUnreadInfos(mx),
+    });
+  }, [mx, setUnreadAtom]);
+
+  useEffect(() => {
+    const handleTimelineEvent = (
+      mEvent: MatrixEvent,
+      room: Room | undefined,
+      toStartOfTimeline: boolean | undefined,
+      removed: boolean,
+      data: IRoomTimelineData
+    ) => {
+      if (!room || !data.liveEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent)) return;
+      if (getNotificationType(mx, room.roomId) === NotificationType.Mute) {
+        setUnreadAtom({
+          type: 'DELETE',
+          roomId: room.roomId,
+        });
+        return;
+      }
+
+      if (mEvent.getSender() === mx.getUserId()) return;
+      setUnreadAtom({ type: 'PUT', unreadInfo: getUnreadInfo(room) });
+    };
+    mx.on(RoomEvent.Timeline, handleTimelineEvent);
+    return () => {
+      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
+    };
+  }, [mx, setUnreadAtom]);
+
+  useEffect(() => {
+    const handleReceipt = (mEvent: MatrixEvent, room: Room) => {
+      if (mEvent.getType() === 'm.receipt') {
+        const myUserId = mx.getUserId();
+        if (!myUserId) return;
+        if (room.isSpaceRoom()) return;
+        const content = mEvent.getContent<ReceiptContent>();
+
+        const isMyReceipt = Object.keys(content).find((eventId) =>
+          (Object.keys(content[eventId]) as ReceiptType[]).find(
+            (receiptType) => content[eventId][receiptType][myUserId]
+          )
+        );
+        if (isMyReceipt) {
+          setUnreadAtom({ type: 'DELETE', roomId: room.roomId });
+        }
+      }
+    };
+    mx.on(RoomEvent.Receipt, handleReceipt);
+    return () => {
+      mx.removeListener(RoomEvent.Receipt, handleReceipt);
+    };
+  }, [mx, setUnreadAtom]);
+
+  useEffect(() => {
+    muteChanges.removed.forEach((roomId) => {
+      const room = mx.getRoom(roomId);
+      if (!room) return;
+      if (!roomHaveUnread(mx, room)) return;
+      setUnreadAtom({ type: 'PUT', unreadInfo: getUnreadInfo(room) });
+    });
+    muteChanges.added.forEach((roomId) => {
+      setUnreadAtom({ type: 'DELETE', roomId });
+    });
+  }, [mx, setUnreadAtom, muteChanges]);
+
+  useEffect(() => {
+    const handleMembershipChange = (room: Room, membership: string) => {
+      if (membership !== Membership.Join) {
+        setUnreadAtom({
+          type: 'DELETE',
+          roomId: room.roomId,
+        });
+      }
+    };
+    mx.on(RoomEvent.MyMembership, handleMembershipChange);
+    return () => {
+      mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
+    };
+  }, [mx, setUnreadAtom]);
+};

src/app/state/selectedRoom.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const selectedRoomAtom = atom<string | undefined>(undefined);

src/app/state/selectedTab.ts

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+
+export enum SidebarTab {
+  Home = 'Home',
+  People = 'People',
+}
+
+export const selectedTabAtom = atom<SidebarTab | string>(SidebarTab.Home);

src/app/state/settings.ts

@@ -0,0 +1,47 @@
+import { atom } from 'jotai';
+
+const STORAGE_KEY = 'settings';
+export interface Settings {
+  themeIndex: number;
+  useSystemTheme: boolean;
+  isMarkdown: boolean;
+  isPeopleDrawer: boolean;
+
+  hideMembershipEvents: boolean;
+  hideNickAvatarEvents: boolean;
+
+  showNotifications: boolean;
+  isNotificationSounds: boolean;
+}
+
+const defaultSettings: Settings = {
+  themeIndex: 0,
+  useSystemTheme: true,
+  isMarkdown: true,
+  isPeopleDrawer: true,
+
+  hideMembershipEvents: false,
+  hideNickAvatarEvents: true,
+
+  showNotifications: true,
+  isNotificationSounds: true,
+};
+
+export const getSettings = () => {
+  const settings = localStorage.getItem(STORAGE_KEY);
+  if (settings === null) return defaultSettings;
+  return JSON.parse(settings) as Settings;
+};
+
+export const setSettings = (settings: Settings) => {
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+};
+
+const baseSettings = atom<Settings>(getSettings());
+export const settingsAtom = atom<Settings, Settings>(
+  (get) => get(baseSettings),
+  (get, set, update) => {
+    set(baseSettings, update);
+    setSettings(update);
+  }
+);

src/app/state/tabToRoom.ts

@@ -0,0 +1,34 @@
+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>(
+  (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:
+};

src/app/state/utils.ts

@@ -0,0 +1,64 @@
+import { useSetAtom, WritableAtom } from 'jotai';
+import { ClientEvent, MatrixClient, Room, RoomEvent } from 'matrix-js-sdk';
+import { useEffect } from 'react';
+import { Membership } from '../../types/matrix/room';
+
+export type RoomsAction =
+  | {
+      type: 'INITIALIZE';
+      rooms: string[];
+    }
+  | {
+      type: 'PUT' | 'DELETE';
+      roomId: string;
+    };
+
+export const useBindRoomsWithMembershipsAtom = (
+  mx: MatrixClient,
+  roomsAtom: WritableAtom<string[], RoomsAction>,
+  memberships: Membership[]
+) => {
+  const setRoomsAtom = useSetAtom(roomsAtom);
+
+  useEffect(() => {
+    const satisfyMembership = (room: Room): boolean =>
+      !!memberships.find((membership) => membership === room.getMyMembership());
+    setRoomsAtom({
+      type: 'INITIALIZE',
+      rooms: mx
+        .getRooms()
+        .filter(satisfyMembership)
+        .map((room) => room.roomId),
+    });
+
+    const handleAddRoom = (room: Room) => {
+      if (satisfyMembership(room)) {
+        setRoomsAtom({ type: 'PUT', roomId: room.roomId });
+      }
+    };
+
+    const handleMembershipChange = (room: Room) => {
+      if (!satisfyMembership(room)) {
+        setRoomsAtom({ type: 'DELETE', roomId: room.roomId });
+      }
+    };
+
+    const handleDeleteRoom = (roomId: string) => {
+      setRoomsAtom({ type: 'DELETE', roomId });
+    };
+
+    mx.on(ClientEvent.Room, handleAddRoom);
+    mx.on(RoomEvent.MyMembership, handleMembershipChange);
+    mx.on(ClientEvent.DeleteRoom, handleDeleteRoom);
+    return () => {
+      mx.removeListener(ClientEvent.Room, handleAddRoom);
+      mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
+      mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
+    };
+  }, [mx, memberships, setRoomsAtom]);
+};
+
+export const compareRoomsEqual = (a: string[], b: string[]) => {
+  if (a.length !== b.length) return false;
+  return a.every((roomId, roomIdIndex) => roomId === b[roomIdIndex]);
+};

src/app/utils/disposable.ts

@@ -0,0 +1,8 @@
+export type DisposeCallback<Q extends unknown[] = [], R = void> = (...args: Q) => R;
+export type DisposableContext<P extends unknown[] = [], Q extends unknown[] = [], R = void> = (
+  ...args: P
+) => DisposeCallback<Q, R>;
+
+export const disposable = <P extends unknown[], Q extends unknown[] = [], R = void>(
+  context: DisposableContext<P, Q, R>
+) => context;

src/app/utils/room.ts

@@ -0,0 +1,217 @@
+import {
+  IPushRule,
+  IPushRules,
+  MatrixClient,
+  MatrixEvent,
+  NotificationCountType,
+  Room,
+} from 'matrix-js-sdk';
+import { AccountDataEvent } from '../../types/matrix/accountData';
+import {
+  NotificationType,
+  RoomToParents,
+  RoomType,
+  StateEvent,
+  UnreadInfo,
+} from '../../types/matrix/room';
+
+export const getStateEvent = (
+  room: Room,
+  eventType: StateEvent,
+  stateKey = ''
+): MatrixEvent | null => room.currentState.getStateEvents(eventType, stateKey);
+
+export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[] =>
+  room.currentState.getStateEvents(eventType);
+
+export const getAccountData = (
+  mx: MatrixClient,
+  eventType: AccountDataEvent
+): MatrixEvent | undefined => mx.getAccountData(eventType);
+
+export const getMDirects = (mDirectEvent: MatrixEvent): Set<string> => {
+  const roomIds = new Set<string>();
+  const userIdToDirects = mDirectEvent?.getContent();
+
+  if (userIdToDirects === undefined) return roomIds;
+
+  Object.keys(userIdToDirects).forEach((userId) => {
+    const directs = userIdToDirects[userId];
+    if (Array.isArray(directs)) {
+      directs.forEach((id) => {
+        if (typeof id === 'string') roomIds.add(id);
+      });
+    }
+  });
+
+  return roomIds;
+};
+
+export const isDirectInvite = (room: Room | null, myUserId: string | null): boolean => {
+  if (!room || !myUserId) return false;
+  const me = room.getMember(myUserId);
+  const memberEvent = me?.events?.member;
+  const content = memberEvent?.getContent();
+  return content?.is_direct === true;
+};
+
+export const isSpace = (room: Room | null): boolean => {
+  if (!room) return false;
+  const event = getStateEvent(room, StateEvent.RoomCreate);
+  if (!event) return false;
+  return event.getContent().type === RoomType.Space;
+};
+
+export const isRoom = (room: Room | null): boolean => {
+  if (!room) return false;
+  const event = getStateEvent(room, StateEvent.RoomCreate);
+  if (!event) return false;
+  return event.getContent().type === undefined;
+};
+
+export const isUnsupportedRoom = (room: Room | null): boolean => {
+  if (!room) return false;
+  const event = getStateEvent(room, StateEvent.RoomCreate);
+  if (!event) return true; // Consider room unsupported if m.room.create event doesn't exist
+  return event.getContent().type !== undefined && event.getContent().type !== RoomType.Space;
+};
+
+export function isValidChild(mEvent: MatrixEvent): boolean {
+  return mEvent.getType() === StateEvent.SpaceChild && Object.keys(mEvent.getContent()).length > 0;
+}
+
+export const getAllParents = (roomToParents: RoomToParents, roomId: string): Set<string> => {
+  const allParents = new Set<string>();
+
+  const addAllParentIds = (rId: string) => {
+    if (allParents.has(rId)) return;
+    allParents.add(rId);
+
+    const parents = roomToParents.get(rId);
+    parents?.forEach((id) => addAllParentIds(id));
+  };
+  addAllParentIds(roomId);
+  allParents.delete(roomId);
+  return allParents;
+};
+
+export const getSpaceChildren = (room: Room) =>
+  getStateEvents(room, StateEvent.SpaceChild).reduce<string[]>((filtered, mEvent) => {
+    const stateKey = mEvent.getStateKey();
+    if (isValidChild(mEvent) && stateKey) {
+      filtered.push(stateKey);
+    }
+    return filtered;
+  }, []);
+
+export const mapParentWithChildren = (
+  roomToParents: RoomToParents,
+  roomId: string,
+  children: string[]
+) => {
+  const allParents = getAllParents(roomToParents, roomId);
+  children.forEach((childId) => {
+    if (allParents.has(childId)) {
+      // Space cycle detected.
+      return;
+    }
+    const parents = roomToParents.get(childId) ?? new Set<string>();
+    parents.add(roomId);
+    roomToParents.set(childId, parents);
+  });
+};
+
+export const getRoomToParents = (mx: MatrixClient): RoomToParents => {
+  const map: RoomToParents = new Map();
+  mx.getRooms()
+    .filter((room) => isSpace(room))
+    .forEach((room) => mapParentWithChildren(map, room.roomId, getSpaceChildren(room)));
+
+  return map;
+};
+
+export const isMutedRule = (rule: IPushRule) =>
+  rule.actions[0] === 'dont_notify' && rule.conditions?.[0]?.kind === 'event_match';
+
+export const findMutedRule = (overrideRules: IPushRule[], roomId: string) =>
+  overrideRules.find((rule) => rule.rule_id === roomId && isMutedRule(rule));
+
+export const getNotificationType = (mx: MatrixClient, roomId: string): NotificationType => {
+  let roomPushRule: IPushRule | undefined;
+  try {
+    roomPushRule = mx.getRoomPushRule('global', roomId);
+  } catch {
+    roomPushRule = undefined;
+  }
+
+  if (!roomPushRule) {
+    const overrideRules = mx.getAccountData('m.push_rules')?.getContent<IPushRules>()
+      ?.global?.override;
+    if (!overrideRules) return NotificationType.Default;
+
+    return findMutedRule(overrideRules, roomId) ? NotificationType.Mute : NotificationType.Default;
+  }
+
+  if (roomPushRule.actions[0] === 'notify') return NotificationType.AllMessages;
+  return NotificationType.MentionsAndKeywords;
+};
+
+export const isNotificationEvent = (mEvent: MatrixEvent) => {
+  const eType = mEvent.getType();
+  if (
+    ['m.room.create', 'm.room.message', 'm.room.encrypted', 'm.room.member', 'm.sticker'].find(
+      (type) => type === eType
+    )
+  )
+    return false;
+  if (eType === 'm.room.member') return false;
+
+  if (mEvent.isRedacted()) return false;
+  if (mEvent.getRelation()?.rel_type === 'm.replace') return false;
+
+  return true;
+};
+
+export const roomHaveUnread = (mx: MatrixClient, room: Room) => {
+  const userId = mx.getUserId();
+  if (!userId) return false;
+  const readUpToId = room.getEventReadUpTo(userId);
+  const liveEvents = room.getLiveTimeline().getEvents();
+
+  if (liveEvents[liveEvents.length - 1]?.getSender() === userId) {
+    return false;
+  }
+
+  for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
+    const event = liveEvents[i];
+    if (!event) return false;
+    if (event.getId() === readUpToId) return false;
+    if (isNotificationEvent(event)) return true;
+  }
+  return true;
+};
+
+export const getUnreadInfo = (room: Room): UnreadInfo => {
+  const total = room.getUnreadNotificationCount(NotificationCountType.Total);
+  const highlight = room.getUnreadNotificationCount(NotificationCountType.Highlight);
+  return {
+    roomId: room.roomId,
+    highlight,
+    total: highlight > total ? highlight : total,
+  };
+};
+
+export const getUnreadInfos = (mx: MatrixClient): UnreadInfo[] => {
+  const unreadInfos = mx.getRooms().reduce<UnreadInfo[]>((unread, room) => {
+    if (room.isSpaceRoom()) return unread;
+    if (room.getMyMembership() !== 'join') return unread;
+    if (getNotificationType(mx, room.roomId) === NotificationType.Mute) return unread;
+
+    if (roomHaveUnread(mx, room)) {
+      unread.push(getUnreadInfo(room));
+    }
+
+    return unread;
+  }, []);
+  return unreadInfos;
+};

src/client/mx.ts

@@ -0,0 +1,7 @@
+import { MatrixClient } from 'matrix-js-sdk';
+import initMatrix from './initMatrix';
+
+export const mx = (): MatrixClient => {
+  if (!initMatrix.matrixClient) console.error('Matrix client is used before initialization!');
+  return initMatrix.matrixClient!;
+};

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '2.2.3',
+  version: '2.2.2',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',
@@ -12,13 +12,7 @@ const cons = {
     HOME: 'home',
     DIRECTS: 'dm',
   },
-  supportEventTypes: [
-    'm.room.create',
-    'm.room.message',
-    'm.room.encrypted',
-    'm.room.member',
-    'm.sticker',
-  ],
+  supportEventTypes: ['m.room.create', 'm.room.message', 'm.room.encrypted', 'm.room.member', 'm.sticker'],
   notifs: {
     DEFAULT: 'default',
     ALL_MESSAGES: 'all_messages',

src/index.jsx

@@ -1,5 +1,13 @@
+/* eslint-disable import/first */
 import React from 'react';
 import ReactDom from 'react-dom';
+import { enableMapSet } from 'immer';
+import '@fontsource/inter/variable.css';
+import 'folds/dist/style.css';
+import { lightTheme, configClass, config, varsClass } from 'folds';
+
+enableMapSet();
+
 import './font';
 import './index.scss';
 
@@ -7,6 +15,9 @@ import settings from './client/state/settings';
 
 import App from './app/pages/App';
 
+document.body.classList.add(lightTheme, configClass, varsClass);
+document.body.style.fontFamily = config.font.Inter;
+
 settings.applyTheme();
 
 ReactDom.render(<App />, document.getElementById('root'));

src/types/matrix/accountData.ts

@@ -0,0 +1,6 @@
+export enum AccountDataEvent {
+  PushRules = 'm.push_rules',
+  Direct = 'm.direct',
+  IgnoredUserList = 'm.ignored_user_list',
+  CinnySpaces = 'in.cinny.spaces',
+}

src/types/matrix/room.ts

@@ -0,0 +1,59 @@
+export enum Membership {
+  Invite = 'invite',
+  Knock = 'knock',
+  Join = 'join',
+  Leave = 'leave',
+  Ban = 'ban',
+}
+
+export enum StateEvent {
+  RoomCanonicalAlias = 'm.room.canonical_alias',
+  RoomCreate = 'm.room.create',
+  RoomJoinRules = 'm.room.join_rules',
+  RoomMember = 'm.room.member',
+  RoomThirdPartyInvite = 'm.room.third_party_invite',
+  RoomPowerLevels = 'm.room.power_levels',
+  RoomName = 'm.room.name',
+  RoomTopic = 'm.room.topic',
+  RoomAvatar = 'm.room.avatar',
+  RoomPinnedEvents = 'm.room.pinned_events',
+  RoomEncryption = 'm.room.encryption',
+  RoomHistoryVisibility = 'm.room.history_visibility',
+  RoomGuestAccess = 'm.room.guest_access',
+  RoomServerAcl = 'm.room.server_acl',
+  RoomTombstone = 'm.room.tombstone',
+
+  SpaceChild = 'm.space.child',
+  SpaceParent = 'm.space.parent',
+}
+
+export enum RoomType {
+  Space = 'm.space',
+}
+
+export enum NotificationType {
+  Default = 'default',
+  AllMessages = 'all_messages',
+  MentionsAndKeywords = 'mentions_and_keywords',
+  Mute = 'mute',
+}
+
+export type RoomToParents = Map<string, Set<string>>;
+export type RoomToUnread = Map<
+  string,
+  {
+    total: number;
+    highlight: number;
+    from: Set<string> | null;
+  }
+>;
+export type UnreadInfo = {
+  roomId: string;
+  total: number;
+  highlight: number;
+};
+
+export type MuteChanges = {
+  added: string[];
+  removed: string[];
+};

src/util/twemojify.jsx

@@ -6,8 +6,6 @@ import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 import { sanitizeText } from './sanitize';
 
-export const TWEMOJI_BASE_URL = 'https://cdn.jsdelivr.net/gh/twitter/twemoji@14.0.2/assets/';
-
 const Math = lazy(() => import('../app/atoms/math/Math'));
 
 const mathOptions = {
@@ -40,16 +38,11 @@ const mathOptions = {
 export function twemojify(text, opts, linkify = false, sanitize = true, maths = false) {
   if (typeof text !== 'string') return text;
   let content = text;
-  const options = opts ?? { base: TWEMOJI_BASE_URL };
-  if (!options.base) {
-    options.base = TWEMOJI_BASE_URL;
-  }
 
   if (sanitize) {
     content = sanitizeText(content);
   }
-
-  content = twemoji.parse(content, options);
+  content = twemoji.parse(content, opts);
   if (linkify) {
     content = linkifyHtml(content, {
       target: '_blank',

tsconfig.json

@@ -4,6 +4,7 @@
     "jsx": "react",
     "target": "ES6",
     "allowJs": true,
+    "strict": true,
     "esModuleInterop": true,
     "moduleResolution": "Node",
     "outDir": "dist",

vite.config.js

@@ -2,9 +2,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { wasm } from '@rollup/plugin-wasm';
 import { viteStaticCopy } from 'vite-plugin-static-copy';
-import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
-import inject from '@rollup/plugin-inject';
-import { svgLoader } from './viteSvgLoader';
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
 const copyFiles = {
   targets: [
@@ -36,32 +34,13 @@ export default defineConfig({
   },
   plugins: [
     viteStaticCopy(copyFiles),
-    svgLoader(),
+    vanillaExtractPlugin(),
     wasm(),
     react(),
   ],
-  optimizeDeps: {
-    esbuildOptions: {
-        define: {
-          global: 'globalThis'
-        },
-        plugins: [
-          // Enable esbuild polyfill plugins
-          NodeGlobalsPolyfillPlugin({
-            process: false,
-            buffer: true,
-          }),
-        ]
-    }
-  },
   build: {
     outDir: 'dist',
     sourcemap: true,
     copyPublicDir: false,
-    rollupOptions: {
-      plugins: [
-        inject({ Buffer: ['buffer', 'Buffer'] })
-      ]
-    }
   },
 });

viteSvgLoader.ts

@@ -1,16 +0,0 @@
-import svgToMiniDataURI from 'mini-svg-data-uri';
-import type { Plugin } from 'rollup';
-import fs from 'fs';
-
-// TODO: remove this once https://github.com/vitejs/vite/pull/2909 gets merged
-export const svgLoader = (): Plugin => ({
-  name: 'vite-svg-patch-plugin',
-  transform: (code, id) => {
-    if (id.endsWith('.svg')) {
-      const extractedSvg = fs.readFileSync(id, 'utf8');
-      const datauri = svgToMiniDataURI.toSrcset(extractedSvg);
-      return `export default "${datauri}"`;
-    }
-    return code;
-  },
-});