Renamed channels to rooms (#30)

src/app/molecules/room-intro/RoomIntro.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomIntro.scss';
+
+import Linkify from 'linkifyjs/react';
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+
+function linkifyContent(content) {
+  return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
+}
+
+function RoomIntro({
+  roomId, avatarSrc, name, heading, desc, time,
+}) {
+  return (
+    <div className="room-intro">
+      <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
+      <div className="room-intro__content">
+        <Text className="room-intro__name" variant="h1">{heading}</Text>
+        <Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
+        { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
+      </div>
+    </div>
+  );
+}
+
+RoomIntro.defaultProps = {
+  avatarSrc: false,
+  time: null,
+};
+
+RoomIntro.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  avatarSrc: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+  ]),
+  name: PropTypes.string.isRequired,
+  heading: PropTypes.string.isRequired,
+  desc: PropTypes.string.isRequired,
+  time: PropTypes.string,
+};
+
+export default RoomIntro;

src/app/molecules/room-intro/RoomIntro.scss

@@ -0,0 +1,31 @@
+.room-intro {
+  margin-top: calc(2 * var(--sp-extra-loose));
+  margin-bottom: var(--sp-extra-loose);
+  padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
+  padding-right: var(--sp-extra-tight);
+
+  [dir=rtl] & {
+    padding: {
+      left: var(--sp-extra-tight);
+      right: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
+    }
+  }
+
+  .room-intro__content {
+    margin-top: var(--sp-extra-loose);
+    max-width: 640px;
+  }
+  &__name {
+    color: var(--tc-surface-high);
+  }
+  &__desc {
+    color: var(--tc-surface-normal);
+    margin: var(--sp-tight) 0 var(--sp-extra-tight);
+    & a {
+      word-break: break-all;
+    }
+  }
+  &__time {
+    color: var(--tc-surface-low);
+  }
+}

src/app/molecules/room-selector/RoomSelector.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomSelector.scss';
+
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
+import { blurOnBubbling } from '../../atoms/button/script';
+
+function RoomSelectorWrapper({
+  isSelected, onClick, content, options,
+}) {
+  return (
+    <div className={`room-selector${isSelected ? ' room-selector--selected' : ''}`}>
+      <button
+        className="room-selector__content"
+        type="button"
+        onClick={onClick}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
+      >
+        {content}
+      </button>
+      <div className="room-selector__options">{options}</div>
+    </div>
+  );
+}
+RoomSelectorWrapper.defaultProps = {
+  options: null,
+};
+RoomSelectorWrapper.propTypes = {
+  isSelected: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  content: PropTypes.node.isRequired,
+  options: PropTypes.node,
+};
+
+function RoomSelector({
+  name, roomId, imageSrc, iconSrc,
+  isSelected, isUnread, notificationCount, isAlert,
+  options, onClick,
+}) {
+  return (
+    <RoomSelectorWrapper
+      isSelected={isSelected}
+      content={(
+        <>
+          <Avatar
+            text={name.slice(0, 1)}
+            bgColor={colorMXID(roomId)}
+            imageSrc={imageSrc}
+            iconSrc={iconSrc}
+            size="extra-small"
+          />
+          <Text variant="b1">{name}</Text>
+          { isUnread && (
+            <NotificationBadge
+              alert={isAlert}
+              content={notificationCount !== 0 ? notificationCount : null}
+            />
+          )}
+        </>
+      )}
+      options={options}
+      onClick={onClick}
+    />
+  );
+}
+RoomSelector.defaultProps = {
+  imageSrc: null,
+  iconSrc: null,
+  options: null,
+};
+RoomSelector.propTypes = {
+  name: PropTypes.string.isRequired,
+  roomId: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  iconSrc: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
+  isUnread: PropTypes.bool.isRequired,
+  notificationCount: PropTypes.number.isRequired,
+  isAlert: PropTypes.bool.isRequired,
+  options: PropTypes.node,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default RoomSelector;

src/app/molecules/room-selector/RoomSelector.scss

@@ -0,0 +1,88 @@
+.room-selector-flex {
+  display: flex;
+  align-items: center;
+}
+.room-selector-flexItem {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.room-selector {
+  @extend .room-selector-flex;
+
+  border: 1px solid transparent;
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+  
+  &--selected {
+    background-color: var(--bg-surface);
+    border-color: var(--bg-surface-border);
+
+    & .room-selector__options {
+      display: flex;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+      & .room-selector__options {
+        display: flex;
+      }
+    }
+  }
+  &:focus {
+    outline: none;
+    background-color: var(--bg-surface-hover);
+  }
+  &:active {
+    background-color: var(--bg-surface-active);
+  }
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active {
+    background-color: var(--bg-surface);
+  }
+}
+
+.room-selector__content {
+  @extend .room-selector-flexItem;
+  @extend .room-selector-flex;
+  padding: 0 var(--sp-extra-tight);
+  min-height: 40px;
+  cursor: inherit;
+
+  & > .avatar-container .avatar__bordered {
+    box-shadow: none;
+  }
+
+  & > .text {
+    @extend .room-selector-flexItem;
+    margin: 0 var(--sp-extra-tight);
+
+    color: var(--tc-surface-normal);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+.room-selector__options {
+  @extend .room-selector-flex;
+  display: none;
+  margin-right: var(--sp-ultra-tight);
+
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: var(--sp-ultra-tight);
+  }
+
+  &:empty {
+    margin: 0 !important;
+  }
+
+  & .ic-btn-surface {
+    padding: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+  }
+}

src/app/molecules/room-tile/RoomTile.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomTile.scss';
+
+import Linkify from 'linkifyjs/react';
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+
+function linkifyContent(content) {
+  return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
+}
+
+function RoomTile({
+  avatarSrc, name, id,
+  inviterName, memberCount, desc, options,
+}) {
+  return (
+    <div className="room-tile">
+      <div className="room-tile__avatar">
+        <Avatar
+          imageSrc={avatarSrc}
+          bgColor={colorMXID(id)}
+          text={name.slice(0, 1)}
+        />
+      </div>
+      <div className="room-tile__content">
+        <Text variant="s1">{name}</Text>
+        <Text variant="b3">
+          {
+            inviterName !== null
+              ? `Invited by ${inviterName} to ${id}${memberCount === null ? '' : ` • ${memberCount} members`}`
+              : id + (memberCount === null ? '' : ` • ${memberCount} members`)
+          }
+        </Text>
+        {
+          desc !== null && (typeof desc === 'string')
+            ? <Text className="room-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
+            : desc
+        }
+      </div>
+      { options !== null && (
+        <div className="room-tile__options">
+          {options}
+        </div>
+      )}
+    </div>
+  );
+}
+
+RoomTile.defaultProps = {
+  avatarSrc: null,
+  inviterName: null,
+  options: null,
+  desc: null,
+  memberCount: null,
+};
+RoomTile.propTypes = {
+  avatarSrc: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
+  inviterName: PropTypes.string,
+  memberCount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  desc: PropTypes.node,
+  options: PropTypes.node,
+};
+
+export default RoomTile;

src/app/molecules/room-tile/RoomTile.scss

@@ -0,0 +1,21 @@
+.room-tile {
+  display: flex;
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+
+    margin: 0 var(--sp-normal);
+
+    &__desc {
+      white-space: pre-wrap;
+      & a {
+        white-space: wrap;
+      }
+    }
+
+    & .text:not(:first-child) {
+      margin-top: var(--sp-ultra-tight);
+    }
+  }
+}

src/app/organisms/create-room/CreateRoom.jsx

@@ -0,0 +1,165 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './CreateRoom.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { isRoomAliasAvailable } from '../../../util/matrixUtil';
+import * as roomActions from '../../../client/action/room';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import Toggle from '../../atoms/button/Toggle';
+import IconButton from '../../atoms/button/IconButton';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
+
+import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+function CreateRoom({ isOpen, onRequestClose }) {
+  const [isPublic, togglePublic] = useState(false);
+  const [isEncrypted, toggleEncrypted] = useState(true);
+  const [isValidAddress, updateIsValidAddress] = useState(null);
+  const [isCreatingRoom, updateIsCreatingRoom] = useState(false);
+  const [creatingError, updateCreatingError] = useState(null);
+
+  const [titleValue, updateTitleValue] = useState(undefined);
+  const [topicValue, updateTopicValue] = useState(undefined);
+  const [addressValue, updateAddressValue] = useState(undefined);
+
+  const addressRef = useRef(null);
+  const topicRef = useRef(null);
+  const nameRef = useRef(null);
+
+  const userId = initMatrix.matrixClient.getUserId();
+  const hsString = userId.slice(userId.indexOf(':'));
+
+  function resetForm() {
+    togglePublic(false);
+    toggleEncrypted(true);
+    updateIsValidAddress(null);
+    updateIsCreatingRoom(false);
+    updateCreatingError(null);
+    updateTitleValue(undefined);
+    updateTopicValue(undefined);
+    updateAddressValue(undefined);
+  }
+
+  async function createRoom() {
+    if (isCreatingRoom) return;
+    updateIsCreatingRoom(true);
+    updateCreatingError(null);
+    const name = nameRef.current.value;
+    let topic = topicRef.current.value;
+    if (topic.trim() === '') topic = undefined;
+    let roomAlias;
+    if (isPublic) {
+      roomAlias = addressRef?.current?.value;
+      if (roomAlias.trim() === '') roomAlias = undefined;
+    }
+
+    try {
+      await roomActions.create({
+        name, topic, isPublic, roomAlias, isEncrypted,
+      });
+
+      resetForm();
+      onRequestClose();
+    } catch (e) {
+      if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
+        updateCreatingError('ERROR: Invalid characters in room address');
+        updateIsValidAddress(false);
+      } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
+        updateCreatingError('ERROR: Room address is already in use');
+        updateIsValidAddress(false);
+      } else updateCreatingError(e.message);
+    }
+    updateIsCreatingRoom(false);
+  }
+
+  function validateAddress(e) {
+    const myAddress = e.target.value;
+    updateIsValidAddress(null);
+    updateAddressValue(e.target.value);
+    updateCreatingError(null);
+
+    setTimeout(async () => {
+      if (myAddress !== addressRef.current.value) return;
+      const roomAlias = addressRef.current.value;
+      if (roomAlias === '') return;
+      const roomAddress = `#${roomAlias}${hsString}`;
+
+      if (await isRoomAliasAvailable(roomAddress)) {
+        updateIsValidAddress(true);
+      } else {
+        updateIsValidAddress(false);
+      }
+    }, 1000);
+  }
+  function handleTitleChange(e) {
+    if (e.target.value.trim() === '') updateTitleValue(undefined);
+    updateTitleValue(e.target.value);
+  }
+  function handleTopicChange(e) {
+    if (e.target.value.trim() === '') updateTopicValue(undefined);
+    updateTopicValue(e.target.value);
+  }
+
+  return (
+    <PopupWindow
+      isOpen={isOpen}
+      title="Create room"
+      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+      onRequestClose={onRequestClose}
+    >
+      <div className="create-room">
+        <form className="create-room__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
+          <SettingTile
+            title="Make room public"
+            options={<Toggle isActive={isPublic} onToggle={togglePublic} />}
+            content={<Text variant="b3">Public room can be joined by anyone.</Text>}
+          />
+          {isPublic && (
+            <div>
+              <Text className="create-room__address__label" variant="b2">Room address</Text>
+              <div className="create-room__address">
+                <Text variant="b1">#</Text>
+                <Input value={addressValue} onChange={validateAddress} state={(isValidAddress === false) ? 'error' : 'normal'} forwardRef={addressRef} placeholder="my_room" required />
+                <Text variant="b1">{hsString}</Text>
+              </div>
+              {isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
+            </div>
+          )}
+          {!isPublic && (
+            <SettingTile
+              title="Enable end-to-end encryption"
+              options={<Toggle isActive={isEncrypted} onToggle={toggleEncrypted} />}
+              content={<Text variant="b3">You can’t disable this later. Bridges & most bots won’t work yet.</Text>}
+            />
+          )}
+          <Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" />
+          <div className="create-room__name-wrapper">
+            <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Room name" required />
+            <Button disabled={isValidAddress === false || isCreatingRoom} iconSrc={HashPlusIC} type="submit" variant="primary">Create</Button>
+          </div>
+          {isCreatingRoom && (
+            <div className="create-room__loading">
+              <Spinner size="small" />
+              <Text>Creating room...</Text>
+            </div>
+          )}
+          {typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
+        </form>
+      </div>
+    </PopupWindow>
+  );
+}
+
+CreateRoom.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+export default CreateRoom;

src/app/organisms/create-room/CreateRoom.scss

@@ -0,0 +1,103 @@
+.create-room {
+  margin: 0 var(--sp-normal);
+  margin-right: var(--sp-extra-tight);
+
+  &__form > * {
+    margin-top: var(--sp-normal);
+    &:first-child {
+      margin-top: var(--sp-extra-tight);
+    }
+  }
+
+  &__address {
+    display: flex;
+    &__label {
+      color: var(--tc-surface-low);
+      margin-bottom: var(--sp-ultra-tight);
+    }
+    &__tip {
+      margin-left: 46px;
+      margin-top: var(--sp-ultra-tight);
+      [dir=rtl] & {
+        margin-left: 0;
+        margin-right: 46px;
+      }
+    }
+    & .text {
+      display: flex;
+      align-items: center;
+      padding: 0 var(--sp-normal);
+      border: 1px solid var(--bg-surface-border);
+      border-radius: var(--bo-radius);
+      color: var(--tc-surface-low);
+    }
+    & *:nth-child(2) {
+      flex: 1;
+      min-width: 0;
+      & .input {
+        border-radius: 0;
+      }
+    }
+    & .text:first-child {
+      border-right-width: 0;
+      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+    }
+    & .text:last-child {
+      border-left-width: 0;
+      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+    }
+    [dir=rtl] & {
+      & .text:first-child {
+        border-left-width: 0;
+        border-right-width: 1px;
+        border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      }
+      & .text:last-child {
+        border-right-width: 0;
+        border-left-width: 1px;
+        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      }
+    }
+  }
+
+  &__name-wrapper {
+    display: flex;
+    align-items: flex-end;
+
+    & .input-container {
+      flex: 1;
+      min-width: 0;
+      margin-right: var(--sp-normal);
+      [dir=rtl] & {
+        margin-right: 0;
+        margin-left: var(--sp-normal);
+      }
+    }
+    & .btn-primary {
+      padding-top: 11px;
+      padding-bottom: 11px;
+    }
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    & .text {
+      margin-left: var(--sp-normal);
+      [dir=rtl] & {
+        margin-left: 0;
+        margin-right: var(--sp-normal);
+      }
+    }
+  }
+  &__error {
+    text-align: center;
+    color: var(--bg-danger) !important;
+  }
+
+  [dir=rtl] & {
+    margin-right: var(--sp-normal);
+    margin-left: var(--sp-extra-tight);
+  }
+}

src/app/organisms/invite-list/InviteList.jsx

@@ -11,7 +11,7 @@ import Button from '../../atoms/button/Button';
 import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import ChannelTile from '../../molecules/channel-tile/ChannelTile';
+import RoomTile from '../../molecules/room-tile/RoomTile';
 
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
@@ -47,13 +47,13 @@ function InviteList({ isOpen, onRequestClose }) {
     };
   }, [procInvite]);
 
-  function renderChannelTile(roomId) {
+  function renderRoomTile(roomId) {
     const myRoom = initMatrix.matrixClient.getRoom(roomId);
     const roomName = myRoom.name;
     let roomAlias = myRoom.getCanonicalAlias();
     if (roomAlias === null) roomAlias = myRoom.roomId;
     return (
-      <ChannelTile
+      <RoomTile
         key={myRoom.roomId}
         name={roomName}
         avatarSrc={initMatrix.matrixClient.getRoom(roomId).getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop')}
@@ -91,7 +91,7 @@ function InviteList({ isOpen, onRequestClose }) {
             const myRoom = initMatrix.matrixClient.getRoom(roomId);
             const roomName = myRoom.name;
             return (
-              <ChannelTile
+              <RoomTile
                 key={myRoom.roomId}
                 name={roomName}
                 id={myRoom.getDMInviter()}
@@ -114,14 +114,14 @@ function InviteList({ isOpen, onRequestClose }) {
             <Text variant="b3">Spaces</Text>
           </div>
         )}
-        { Array.from(initMatrix.roomList.inviteSpaces).map(renderChannelTile) }
+        { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
 
         { initMatrix.roomList.inviteRooms.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Channels</Text>
+            <Text variant="b3">Rooms</Text>
           </div>
         )}
-        { Array.from(initMatrix.roomList.inviteRooms).map(renderChannelTile) }
+        { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }
       </div>
     </PopupWindow>
   );

src/app/organisms/invite-list/InviteList.scss

@@ -14,7 +14,7 @@
     }
   }
 
-  & .channel-tile {
+  & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
       align-self: flex-end;

src/app/organisms/invite-user/InviteUser.jsx

@@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
 import Input from '../../atoms/input/Input';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import ChannelTile from '../../molecules/channel-tile/ChannelTile';
+import RoomTile from '../../molecules/room-tile/RoomTile';
 
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
@@ -188,7 +188,7 @@ function InviteUser({
       const userId = user.user_id;
       const name = typeof user.display_name === 'string' ? user.display_name : userId;
       return (
-        <ChannelTile
+        <RoomTile
           key={userId}
           avatarSrc={typeof user.avatar_url === 'string' ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop') : null}
           name={name}

src/app/organisms/invite-user/InviteUser.scss

@@ -39,7 +39,7 @@
     border-top: 1px solid var(--bg-surface-border);
   }
 
-  & .channel-tile {
+  & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
       align-self: flex-end;

src/app/organisms/navigation/Drawer.jsx

@@ -40,9 +40,9 @@ function Drawer() {
       <DrawerHeader activeTab={activeTab} />
       <div className="drawer__content-wrapper">
         <DrawerBradcrumb />
-        <div className="channels__wrapper">
+        <div className="rooms__wrapper">
           <ScrollView autoHide>
-            <div className="channels-container">
+            <div className="rooms-container">
               {
                 activeTab === 'home'
                   ? <Home />

src/app/organisms/navigation/Drawer.scss

@@ -28,14 +28,14 @@
   display: none;
   height: var(--header-height);
 }
-.channels__wrapper {
+.rooms__wrapper {
   @extend .drawer-flexItem;
 }
 
-.channels-container {
+.rooms-container {
   padding-bottom: var(--sp-extra-loose);
 
-  & > .channel-selector {
+  & > .room-selector {
     width: calc(100% - var(--sp-extra-tight));
     margin-left: auto;
 
@@ -46,7 +46,7 @@
 
   }
 
-  & > .channel-selector:first-child {
+  & > .room-selector:first-child {
     margin-top: var(--sp-extra-tight);
   }
 

src/app/organisms/navigation/DrawerHeader.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import {
-  openPublicChannels, openCreateChannel, openInviteUser,
+  openPublicRooms, openCreateRoom, openInviteUser,
 } from '../../../client/action/navigation';
 
 import Text from '../../atoms/text/Text';
@@ -26,22 +26,22 @@ function DrawerHeader({ activeTab }) {
           <ContextMenu
             content={(hideMenu) => (
               <>
-                <MenuHeader>Add channel</MenuHeader>
+                <MenuHeader>Add room</MenuHeader>
                 <MenuItem
                   iconSrc={HashPlusIC}
-                  onClick={() => { hideMenu(); openCreateChannel(); }}
+                  onClick={() => { hideMenu(); openCreateRoom(); }}
                 >
-                  Create new channel
+                  Create new room
                 </MenuItem>
                 <MenuItem
                   iconSrc={HashSearchIC}
-                  onClick={() => { hideMenu(); openPublicChannels(); }}
+                  onClick={() => { hideMenu(); openPublicRooms(); }}
                 >
-                  Add Public channel
+                  Add public room
                 </MenuItem>
               </>
             )}
-            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
+            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
           />
         )}
       {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}

src/app/organisms/navigation/Home.jsx

@@ -70,7 +70,7 @@ function Home() {
         />
       ))}
 
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
+      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
       { roomIds.map((id) => (
         <Selector
           key={id}

src/app/organisms/navigation/Selector.jsx

@@ -7,7 +7,7 @@ import { doesRoomHaveUnread } from '../../../util/matrixUtil';
 import { selectRoom } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
 
-import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
+import RoomSelector from '../../molecules/room-selector/RoomSelector';
 
 import HashIC from '../../../../public/res/ic/outlined/hash.svg';
 import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
@@ -39,7 +39,7 @@ function Selector({ roomId, isDM, drawerPostie }) {
   }, []);
 
   return (
-    <ChannelSelector
+    <RoomSelector
       key={roomId}
       name={room.name}
       roomId={roomId}

src/app/organisms/navigation/SideBar.jsx

@@ -6,7 +6,7 @@ import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import logout from '../../../client/action/logout';
 import {
-  changeTab, openInviteList, openPublicChannels, openSettings,
+  changeTab, openInviteList, openPublicRooms, openSettings,
 } from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
 
@@ -92,8 +92,8 @@ function SideBar() {
           <div className="scrollable-content">
             <div className="featured-container">
               <SidebarAvatar active={activeTab === 'home'} onClick={() => changeTab('home')} tooltip="Home" iconSrc={HomeIC} />
-              <SidebarAvatar active={activeTab === 'dms'} onClick={() => changeTab('dms')} tooltip="People" iconSrc={UserIC} />
+              <SidebarAvatar active={activeTab === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
-              <SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
+              <SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
             </div>
             <div className="sidebar-divider" />
             <div className="space-container" />

src/app/organisms/public-rooms/PublicRooms.jsx

@@ -0,0 +1,287 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './PublicRooms.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import { selectRoom } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
+import Spinner from '../../atoms/spinner/Spinner';
+import Input from '../../atoms/input/Input';
+import PopupWindow from '../../molecules/popup-window/PopupWindow';
+import RoomTile from '../../molecules/room-tile/RoomTile';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+
+const SEARCH_LIMIT = 20;
+
+function TryJoinWithAlias({ alias, onRequestClose }) {
+  const [status, setStatus] = useState({
+    isJoining: false,
+    error: null,
+    roomId: null,
+    tempRoomId: null,
+  });
+  function handleOnRoomAdded(roomId) {
+    if (status.tempRoomId !== null && status.tempRoomId !== roomId) return;
+    setStatus({
+      isJoining: false, error: null, roomId, tempRoomId: null,
+    });
+  }
+
+  useEffect(() => {
+    initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
+    return () => {
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
+    };
+  }, [status]);
+
+  async function joinWithAlias() {
+    setStatus({
+      isJoining: true, error: null, roomId: null, tempRoomId: null,
+    });
+    try {
+      const roomId = await roomActions.join(alias, false);
+      setStatus({
+        isJoining: true, error: null, roomId: null, tempRoomId: roomId,
+      });
+    } catch (e) {
+      setStatus({
+        isJoining: false,
+        error: `Unable to join ${alias}. Either room is private or doesn't exist.`,
+        roomId: null,
+        tempRoomId: null,
+      });
+    }
+  }
+
+  return (
+    <div className="try-join-with-alias">
+      {status.roomId === null && !status.isJoining && status.error === null && (
+        <Button onClick={() => joinWithAlias()}>{`Try joining ${alias}`}</Button>
+      )}
+      {status.isJoining && (
+        <>
+          <Spinner size="small" />
+          <Text>{`Joining ${alias}...`}</Text>
+        </>
+      )}
+      {status.roomId !== null && (
+        <Button onClick={() => { onRequestClose(); selectRoom(status.roomId); }}>Open</Button>
+      )}
+      {status.error !== null && <Text variant="b2"><span style={{ color: 'var(--bg-danger)' }}>{status.error}</span></Text>}
+    </div>
+  );
+}
+
+TryJoinWithAlias.propTypes = {
+  alias: PropTypes.string.isRequired,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
+  const [isSearching, updateIsSearching] = useState(false);
+  const [isViewMore, updateIsViewMore] = useState(false);
+  const [publicRooms, updatePublicRooms] = useState([]);
+  const [nextBatch, updateNextBatch] = useState(undefined);
+  const [searchQuery, updateSearchQuery] = useState({});
+  const [joiningRooms, updateJoiningRooms] = useState(new Set());
+
+  const roomNameRef = useRef(null);
+  const hsRef = useRef(null);
+  const userId = initMatrix.matrixClient.getUserId();
+
+  async function searchRooms(viewMore) {
+    let inputRoomName = roomNameRef?.current?.value || searchTerm;
+    let isInputAlias = false;
+    if (typeof inputRoomName === 'string') {
+      isInputAlias = inputRoomName[0] === '#' && inputRoomName.indexOf(':') > 1;
+    }
+    const hsFromAlias = (isInputAlias) ? inputRoomName.slice(inputRoomName.indexOf(':') + 1) : null;
+    let inputHs = hsFromAlias || hsRef?.current?.value;
+
+    if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1);
+    if (typeof inputRoomName !== 'string') inputRoomName = '';
+
+    if (isSearching) return;
+    if (viewMore !== true
+      && inputRoomName === searchQuery.name
+      && inputHs === searchQuery.homeserver
+    ) return;
+
+    updateSearchQuery({
+      name: inputRoomName,
+      homeserver: inputHs,
+    });
+    if (isViewMore !== viewMore) updateIsViewMore(viewMore);
+    updateIsSearching(true);
+
+    try {
+      const result = await initMatrix.matrixClient.publicRooms({
+        server: inputHs,
+        limit: SEARCH_LIMIT,
+        since: viewMore ? nextBatch : undefined,
+        include_all_networks: true,
+        filter: {
+          generic_search_term: inputRoomName,
+        },
+      });
+
+      const totalRooms = viewMore ? publicRooms.concat(result.chunk) : result.chunk;
+      updatePublicRooms(totalRooms);
+      updateNextBatch(result.next_batch);
+      updateIsSearching(false);
+      updateIsViewMore(false);
+      if (totalRooms.length === 0) {
+        updateSearchQuery({
+          error: `No result found for "${inputRoomName}" on ${inputHs}`,
+          alias: isInputAlias ? inputRoomName : null,
+        });
+      }
+    } catch (e) {
+      updatePublicRooms([]);
+      updateSearchQuery({
+        error: 'Something went wrong!',
+        alias: isInputAlias ? inputRoomName : null,
+      });
+      updateIsSearching(false);
+      updateNextBatch(undefined);
+      updateIsViewMore(false);
+    }
+  }
+
+  useEffect(() => {
+    if (isOpen) searchRooms();
+  }, [isOpen]);
+
+  function handleOnRoomAdded(roomId) {
+    if (joiningRooms.has(roomId)) {
+      joiningRooms.delete(roomId);
+      updateJoiningRooms(new Set(Array.from(joiningRooms)));
+    }
+  }
+  useEffect(() => {
+    initMatrix.roomList.on(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
+    return () => {
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
+    };
+  }, [joiningRooms]);
+
+  function handleViewRoom(roomId) {
+    selectRoom(roomId);
+    onRequestClose();
+  }
+
+  function joinRoom(roomIdOrAlias) {
+    joiningRooms.add(roomIdOrAlias);
+    updateJoiningRooms(new Set(Array.from(joiningRooms)));
+    roomActions.join(roomIdOrAlias, false);
+  }
+
+  function renderRoomList(rooms) {
+    return rooms.map((room) => {
+      const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id;
+      const name = typeof room.name === 'string' ? room.name : alias;
+      const isJoined = initMatrix.roomList.rooms.has(room.room_id);
+      return (
+        <RoomTile
+          key={room.room_id}
+          avatarSrc={typeof room.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(room.avatar_url, 42, 42, 'crop') : null}
+          name={name}
+          id={alias}
+          memberCount={room.num_joined_members}
+          desc={typeof room.topic === 'string' ? room.topic : null}
+          options={(
+            <>
+              {isJoined && <Button onClick={() => handleViewRoom(room.room_id)}>Open</Button>}
+              {!isJoined && (joiningRooms.has(room.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinRoom(room.aliases?.[0] || room.room_id)} variant="primary">Join</Button>)}
+            </>
+          )}
+        />
+      );
+    });
+  }
+
+  return (
+    <PopupWindow
+      isOpen={isOpen}
+      title="Public rooms"
+      contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
+      onRequestClose={onRequestClose}
+    >
+      <div className="public-rooms">
+        <form className="public-rooms__form" onSubmit={(e) => { e.preventDefault(); searchRooms(); }}>
+          <div className="public-rooms__input-wrapper">
+            <Input value={searchTerm} forwardRef={roomNameRef} label="Room name or alias" />
+            <Input forwardRef={hsRef} value={userId.slice(userId.indexOf(':') + 1)} label="Homeserver" required />
+          </div>
+          <Button disabled={isSearching} iconSrc={HashSearchIC} variant="primary" type="submit">Search</Button>
+        </form>
+        <div className="public-rooms__search-status">
+          {
+            typeof searchQuery.name !== 'undefined' && isSearching && (
+              searchQuery.name === ''
+                ? (
+                  <div className="flex--center">
+                    <Spinner size="small" />
+                    <Text variant="b2">{`Loading public rooms from ${searchQuery.homeserver}...`}</Text>
+                  </div>
+                )
+                : (
+                  <div className="flex--center">
+                    <Spinner size="small" />
+                    <Text variant="b2">{`Searching for "${searchQuery.name}" on ${searchQuery.homeserver}...`}</Text>
+                  </div>
+                )
+            )
+          }
+          {
+            typeof searchQuery.name !== 'undefined' && !isSearching && (
+              searchQuery.name === ''
+                ? <Text variant="b2">{`Public rooms on ${searchQuery.homeserver}.`}</Text>
+                : <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text>
+            )
+          }
+          { searchQuery.error && (
+            <>
+              <Text className="public-rooms__search-error" variant="b2">{searchQuery.error}</Text>
+              {typeof searchQuery.alias === 'string' && (
+                <TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} />
+              )}
+            </>
+          )}
+        </div>
+        { publicRooms.length !== 0 && (
+          <div className="public-rooms__content">
+            { renderRoomList(publicRooms) }
+          </div>
+        )}
+        { publicRooms.length !== 0 && publicRooms.length % SEARCH_LIMIT === 0 && (
+          <div className="public-rooms__view-more">
+            { isViewMore !== true && (
+              <Button onClick={() => searchRooms(true)}>View more</Button>
+            )}
+            { isViewMore && <Spinner /> }
+          </div>
+        )}
+      </div>
+    </PopupWindow>
+  );
+}
+
+PublicRooms.defaultProps = {
+  searchTerm: undefined,
+};
+
+PublicRooms.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  searchTerm: PropTypes.string,
+  onRequestClose: PropTypes.func.isRequired,
+};
+
+export default PublicRooms;

src/app/organisms/public-rooms/PublicRooms.scss

@@ -0,0 +1,100 @@
+.public-rooms {
+  margin: 0 var(--sp-normal);
+  margin-right: var(--sp-extra-tight);
+  margin-top: var(--sp-extra-tight);
+
+  &__form {
+    display: flex;
+    align-items: flex-end;
+
+    & .btn-primary {
+      padding: {
+        top: 11px;
+        bottom: 11px;
+      }
+    }
+  }
+  &__input-wrapper {
+    flex: 1;
+    min-width: 0;
+
+    display: flex;
+    margin-right: var(--sp-normal);
+    [dir=rtl] & {
+      margin-right: 0;
+      margin-left: var(--sp-normal);
+    }
+
+    & > div:first-child {
+      flex: 1;
+      min-width: 0;
+
+      & .input {
+        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+        [dir=rtl] & {
+          border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+        }
+      }
+    }
+
+    & > div:last-child .input {
+      width: 120px;
+      border-left-width: 0;
+      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
+      [dir=rtl] & {
+        border-left-width: 1px;
+        border-right-width: 0;
+        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      }
+    }
+  }
+
+  &__search-status {
+    margin-top: var(--sp-extra-loose);
+    margin-bottom: var(--sp-tight);
+    & .donut-spinner {
+      margin: 0 var(--sp-tight);
+    }
+
+    .try-join-with-alias {
+      margin-top: var(--sp-normal);
+    }
+  }
+  &__search-error {
+    color: var(--bg-danger);
+  }
+  &__content {
+    border-top: 1px solid var(--bg-surface-border);
+  }
+  &__view-more {
+    margin-top: var(--sp-loose);
+    margin-left: calc(var(--av-normal) + var(--sp-normal));
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: calc(var(--av-normal) + var(--sp-normal));
+    }
+  }
+  
+  & .room-tile {
+    margin-top: var(--sp-normal);
+    &__options {
+      align-self: flex-end;
+    }
+  }
+
+  [dir=rtl] & {
+    margin: {
+      left: var(--sp-extra-tight);
+      right: var(--sp-normal);
+    }
+  }
+}
+
+.try-join-with-alias {
+  display: flex;
+  align-items: center;
+  
+  & >.text:nth-child(2) {
+    margin: 0 var(--sp-normal);
+  }
+}