Renamed channels to rooms (#30)

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

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

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

@@ -1,4 +1,4 @@
-.channel-intro {
+.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));
@@ -11,7 +11,7 @@
     }
   }
 
-  .channel-intro__content {
+  .room-intro__content {
     margin-top: var(--sp-extra-loose);
     max-width: 640px;
   }

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelSelector.scss';
+import './RoomSelector.scss';
 
 import colorMXID from '../../../util/colorMXID';
 
@@ -9,40 +9,40 @@ import Avatar from '../../atoms/avatar/Avatar';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
-function ChannelSelectorWrapper({
+function RoomSelectorWrapper({
   isSelected, onClick, content, options,
 }) {
   return (
-    <div className={`channel-selector${isSelected ? ' channel-selector--selected' : ''}`}>
+    <div className={`room-selector${isSelected ? ' room-selector--selected' : ''}`}>
       <button
-        className="channel-selector__content"
+        className="room-selector__content"
         type="button"
         onClick={onClick}
-        onMouseUp={(e) => blurOnBubbling(e, '.channel-selector')}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
       >
         {content}
       </button>
-      <div className="channel-selector__options">{options}</div>
+      <div className="room-selector__options">{options}</div>
     </div>
   );
 }
-ChannelSelectorWrapper.defaultProps = {
+RoomSelectorWrapper.defaultProps = {
   options: null,
 };
-ChannelSelectorWrapper.propTypes = {
+RoomSelectorWrapper.propTypes = {
   isSelected: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
   content: PropTypes.node.isRequired,
   options: PropTypes.node,
 };
 
-function ChannelSelector({
+function RoomSelector({
   name, roomId, imageSrc, iconSrc,
   isSelected, isUnread, notificationCount, isAlert,
   options, onClick,
 }) {
   return (
-    <ChannelSelectorWrapper
+    <RoomSelectorWrapper
       isSelected={isSelected}
       content={(
         <>
@@ -67,12 +67,12 @@ function ChannelSelector({
     />
   );
 }
-ChannelSelector.defaultProps = {
+RoomSelector.defaultProps = {
   imageSrc: null,
   iconSrc: null,
   options: null,
 };
-ChannelSelector.propTypes = {
+RoomSelector.propTypes = {
   name: PropTypes.string.isRequired,
   roomId: PropTypes.string.isRequired,
   imageSrc: PropTypes.string,
@@ -85,4 +85,4 @@ ChannelSelector.propTypes = {
   onClick: PropTypes.func.isRequired,
 };
 
-export default ChannelSelector;
+export default RoomSelector;

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

@@ -1,15 +1,15 @@
-.channel-selector-flex {
+.room-selector-flex {
   display: flex;
   align-items: center;
 }
-.channel-selector-flexItem {
+.room-selector-flexItem {
   flex: 1;
   min-width: 0;
   min-height: 0;
 }
 
-.channel-selector {
+.room-selector {
-  @extend .channel-selector-flex;
+  @extend .room-selector-flex;
 
   border: 1px solid transparent;
   border-radius: var(--bo-radius);
@@ -19,7 +19,7 @@
     background-color: var(--bg-surface);
     border-color: var(--bg-surface-border);
 
-    & .channel-selector__options {
+    & .room-selector__options {
       display: flex;
     }
   }
@@ -27,7 +27,7 @@
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
-      & .channel-selector__options {
+      & .room-selector__options {
         display: flex;
       }
     }
@@ -46,9 +46,9 @@
   }
 }
 
-.channel-selector__content {
+.room-selector__content {
-  @extend .channel-selector-flexItem;
+  @extend .room-selector-flexItem;
-  @extend .channel-selector-flex;
+  @extend .room-selector-flex;
   padding: 0 var(--sp-extra-tight);
   min-height: 40px;
   cursor: inherit;
@@ -58,7 +58,7 @@
   }
 
   & > .text {
-    @extend .channel-selector-flexItem;
+    @extend .room-selector-flexItem;
     margin: 0 var(--sp-extra-tight);
 
     color: var(--tc-surface-normal);
@@ -67,8 +67,8 @@
     text-overflow: ellipsis;
   }
 }
-.channel-selector__options {
+.room-selector__options {
-  @extend .channel-selector-flex;
+  @extend .room-selector-flex;
   display: none;
   margin-right: var(--sp-ultra-tight);
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelTile.scss';
+import './RoomTile.scss';
 
 import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
@@ -12,20 +12,20 @@ function linkifyContent(content) {
   return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
 }
 
-function ChannelTile({
+function RoomTile({
   avatarSrc, name, id,
   inviterName, memberCount, desc, options,
 }) {
   return (
-    <div className="channel-tile">
+    <div className="room-tile">
-      <div className="channel-tile__avatar">
+      <div className="room-tile__avatar">
         <Avatar
           imageSrc={avatarSrc}
           bgColor={colorMXID(id)}
           text={name.slice(0, 1)}
         />
       </div>
-      <div className="channel-tile__content">
+      <div className="room-tile__content">
         <Text variant="s1">{name}</Text>
         <Text variant="b3">
           {
@@ -36,12 +36,12 @@ function ChannelTile({
         </Text>
         {
           desc !== null && (typeof desc === 'string')
-            ? <Text className="channel-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
+            ? <Text className="room-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
             : desc
         }
       </div>
       { options !== null && (
-        <div className="channel-tile__options">
+        <div className="room-tile__options">
           {options}
         </div>
       )}
@@ -49,14 +49,14 @@ function ChannelTile({
   );
 }
 
-ChannelTile.defaultProps = {
+RoomTile.defaultProps = {
   avatarSrc: null,
   inviterName: null,
   options: null,
   desc: null,
   memberCount: null,
 };
-ChannelTile.propTypes = {
+RoomTile.propTypes = {
   avatarSrc: PropTypes.string,
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -69,4 +69,4 @@ ChannelTile.propTypes = {
   options: PropTypes.node,
 };
 
-export default ChannelTile;
+export default RoomTile;

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

@@ -1,4 +1,4 @@
-.channel-tile {
+.room-tile {
   display: flex;
 
   &__content {

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './CreateChannel.scss';
+import './CreateRoom.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import { isRoomAliasAvailable } from '../../../util/matrixUtil';
@@ -18,7 +18,7 @@ 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 CreateChannel({ isOpen, onRequestClose }) {
+function CreateRoom({ isOpen, onRequestClose }) {
   const [isPublic, togglePublic] = useState(false);
   const [isEncrypted, toggleEncrypted] = useState(true);
   const [isValidAddress, updateIsValidAddress] = useState(null);
@@ -69,10 +69,10 @@ function CreateChannel({ isOpen, onRequestClose }) {
       onRequestClose();
     } catch (e) {
       if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
-        updateCreatingError('ERROR: Invalid characters in channel address');
+        updateCreatingError('ERROR: Invalid characters in room address');
         updateIsValidAddress(false);
       } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
-        updateCreatingError('ERROR: Channel address is already in use');
+        updateCreatingError('ERROR: Room address is already in use');
         updateIsValidAddress(false);
       } else updateCreatingError(e.message);
     }
@@ -110,26 +110,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
   return (
     <PopupWindow
       isOpen={isOpen}
-      title="Create channel"
+      title="Create room"
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
       onRequestClose={onRequestClose}
     >
-      <div className="create-channel">
+      <div className="create-room">
-        <form className="create-channel__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
+        <form className="create-room__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
           <SettingTile
-            title="Make channel public"
+            title="Make room public"
             options={<Toggle isActive={isPublic} onToggle={togglePublic} />}
-            content={<Text variant="b3">Public channel can be joined by anyone.</Text>}
+            content={<Text variant="b3">Public room can be joined by anyone.</Text>}
           />
           {isPublic && (
             <div>
-              <Text className="create-channel__address__label" variant="b2">Channel address</Text>
+              <Text className="create-room__address__label" variant="b2">Room address</Text>
-              <div className="create-channel__address">
+              <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-channel__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
+              {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 && (
@@ -140,26 +140,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
             />
           )}
           <Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" />
-          <div className="create-channel__name-wrapper">
+          <div className="create-room__name-wrapper">
-            <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Channel name" required />
+            <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-channel__loading">
+            <div className="create-room__loading">
               <Spinner size="small" />
-              <Text>Creating channel...</Text>
+              <Text>Creating room...</Text>
             </div>
           )}
-          {typeof creatingError === 'string' && <Text className="create-channel__error" variant="b3">{creatingError}</Text>}
+          {typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
         </form>
       </div>
     </PopupWindow>
   );
 }
 
-CreateChannel.propTypes = {
+CreateRoom.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onRequestClose: PropTypes.func.isRequired,
 };
 
-export default CreateChannel;
+export default CreateRoom;

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

@@ -1,4 +1,4 @@
-.create-channel {
+.create-room {
   margin: 0 var(--sp-normal);
   margin-right: 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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './PublicChannels.scss';
+import './PublicRooms.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -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 HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
@@ -53,7 +53,7 @@ function TryJoinWithAlias({ alias, onRequestClose }) {
     } catch (e) {
       setStatus({
         isJoining: false,
-        error: `Unable to join ${alias}. Either channel is private or doesn't exist.`,
+        error: `Unable to join ${alias}. Either room is private or doesn't exist.`,
         roomId: null,
         tempRoomId: null,
       });
@@ -84,38 +84,38 @@ TryJoinWithAlias.propTypes = {
   onRequestClose: PropTypes.func.isRequired,
 };
 
-function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
+function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
   const [isSearching, updateIsSearching] = useState(false);
   const [isViewMore, updateIsViewMore] = useState(false);
-  const [publicChannels, updatePublicChannels] = useState([]);
+  const [publicRooms, updatePublicRooms] = useState([]);
   const [nextBatch, updateNextBatch] = useState(undefined);
   const [searchQuery, updateSearchQuery] = useState({});
-  const [joiningChannels, updateJoiningChannels] = useState(new Set());
+  const [joiningRooms, updateJoiningRooms] = useState(new Set());
 
-  const channelNameRef = useRef(null);
+  const roomNameRef = useRef(null);
   const hsRef = useRef(null);
   const userId = initMatrix.matrixClient.getUserId();
 
-  async function searchChannels(viewMore) {
+  async function searchRooms(viewMore) {
-    let inputChannelName = channelNameRef?.current?.value || searchTerm;
+    let inputRoomName = roomNameRef?.current?.value || searchTerm;
     let isInputAlias = false;
-    if (typeof inputChannelName === 'string') {
+    if (typeof inputRoomName === 'string') {
-      isInputAlias = inputChannelName[0] === '#' && inputChannelName.indexOf(':') > 1;
+      isInputAlias = inputRoomName[0] === '#' && inputRoomName.indexOf(':') > 1;
     }
-    const hsFromAlias = (isInputAlias) ? inputChannelName.slice(inputChannelName.indexOf(':') + 1) : null;
+    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 inputChannelName !== 'string') inputChannelName = '';
+    if (typeof inputRoomName !== 'string') inputRoomName = '';
 
     if (isSearching) return;
     if (viewMore !== true
-      && inputChannelName === searchQuery.name
+      && inputRoomName === searchQuery.name
       && inputHs === searchQuery.homeserver
     ) return;
 
     updateSearchQuery({
-      name: inputChannelName,
+      name: inputRoomName,
       homeserver: inputHs,
     });
     if (isViewMore !== viewMore) updateIsViewMore(viewMore);
@@ -128,26 +128,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
         since: viewMore ? nextBatch : undefined,
         include_all_networks: true,
         filter: {
-          generic_search_term: inputChannelName,
+          generic_search_term: inputRoomName,
         },
       });
 
-      const totalChannels = viewMore ? publicChannels.concat(result.chunk) : result.chunk;
+      const totalRooms = viewMore ? publicRooms.concat(result.chunk) : result.chunk;
-      updatePublicChannels(totalChannels);
+      updatePublicRooms(totalRooms);
       updateNextBatch(result.next_batch);
       updateIsSearching(false);
       updateIsViewMore(false);
-      if (totalChannels.length === 0) {
+      if (totalRooms.length === 0) {
         updateSearchQuery({
-          error: `No result found for "${inputChannelName}" on ${inputHs}`,
+          error: `No result found for "${inputRoomName}" on ${inputHs}`,
-          alias: isInputAlias ? inputChannelName : null,
+          alias: isInputAlias ? inputRoomName : null,
         });
       }
     } catch (e) {
-      updatePublicChannels([]);
+      updatePublicRooms([]);
       updateSearchQuery({
         error: 'Something went wrong!',
-        alias: isInputAlias ? inputChannelName : null,
+        alias: isInputAlias ? inputRoomName : null,
       });
       updateIsSearching(false);
       updateNextBatch(undefined);
@@ -156,13 +156,13 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
   }
 
   useEffect(() => {
-    if (isOpen) searchChannels();
+    if (isOpen) searchRooms();
   }, [isOpen]);
 
   function handleOnRoomAdded(roomId) {
-    if (joiningChannels.has(roomId)) {
+    if (joiningRooms.has(roomId)) {
-      joiningChannels.delete(roomId);
+      joiningRooms.delete(roomId);
-      updateJoiningChannels(new Set(Array.from(joiningChannels)));
+      updateJoiningRooms(new Set(Array.from(joiningRooms)));
     }
   }
   useEffect(() => {
@@ -170,36 +170,36 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
     return () => {
       initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
     };
-  }, [joiningChannels]);
+  }, [joiningRooms]);
 
-  function handleViewChannel(roomId) {
+  function handleViewRoom(roomId) {
     selectRoom(roomId);
     onRequestClose();
   }
 
-  function joinChannel(roomIdOrAlias) {
+  function joinRoom(roomIdOrAlias) {
-    joiningChannels.add(roomIdOrAlias);
+    joiningRooms.add(roomIdOrAlias);
-    updateJoiningChannels(new Set(Array.from(joiningChannels)));
+    updateJoiningRooms(new Set(Array.from(joiningRooms)));
     roomActions.join(roomIdOrAlias, false);
   }
 
-  function renderChannelList(channels) {
+  function renderRoomList(rooms) {
-    return channels.map((channel) => {
+    return rooms.map((room) => {
-      const alias = typeof channel.canonical_alias === 'string' ? channel.canonical_alias : channel.room_id;
+      const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id;
-      const name = typeof channel.name === 'string' ? channel.name : alias;
+      const name = typeof room.name === 'string' ? room.name : alias;
-      const isJoined = initMatrix.roomList.rooms.has(channel.room_id);
+      const isJoined = initMatrix.roomList.rooms.has(room.room_id);
       return (
-        <ChannelTile
+        <RoomTile
-          key={channel.room_id}
+          key={room.room_id}
-          avatarSrc={typeof channel.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(channel.avatar_url, 42, 42, 'crop') : null}
+          avatarSrc={typeof room.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(room.avatar_url, 42, 42, 'crop') : null}
           name={name}
           id={alias}
-          memberCount={channel.num_joined_members}
+          memberCount={room.num_joined_members}
-          desc={typeof channel.topic === 'string' ? channel.topic : null}
+          desc={typeof room.topic === 'string' ? room.topic : null}
           options={(
             <>
-              {isJoined && <Button onClick={() => handleViewChannel(channel.room_id)}>Open</Button>}
+              {isJoined && <Button onClick={() => handleViewRoom(room.room_id)}>Open</Button>}
-              {!isJoined && (joiningChannels.has(channel.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinChannel(channel.aliases?.[0] || channel.room_id)} variant="primary">Join</Button>)}
+              {!isJoined && (joiningRooms.has(room.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinRoom(room.aliases?.[0] || room.room_id)} variant="primary">Join</Button>)}
             </>
           )}
         />
@@ -210,26 +210,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
   return (
     <PopupWindow
       isOpen={isOpen}
-      title="Public channels"
+      title="Public rooms"
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
       onRequestClose={onRequestClose}
     >
-      <div className="public-channels">
+      <div className="public-rooms">
-        <form className="public-channels__form" onSubmit={(e) => { e.preventDefault(); searchChannels(); }}>
+        <form className="public-rooms__form" onSubmit={(e) => { e.preventDefault(); searchRooms(); }}>
-          <div className="public-channels__input-wrapper">
+          <div className="public-rooms__input-wrapper">
-            <Input value={searchTerm} forwardRef={channelNameRef} label="Channel name or alias" />
+            <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-channels__search-status">
+        <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 channels from ${searchQuery.homeserver}...`}</Text>
+                    <Text variant="b2">{`Loading public rooms from ${searchQuery.homeserver}...`}</Text>
                   </div>
                 )
                 : (
@@ -243,28 +243,28 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
           {
             typeof searchQuery.name !== 'undefined' && !isSearching && (
               searchQuery.name === ''
-                ? <Text variant="b2">{`Public channels on ${searchQuery.homeserver}.`}</Text>
+                ? <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-channels__search-error" variant="b2">{searchQuery.error}</Text>
+              <Text className="public-rooms__search-error" variant="b2">{searchQuery.error}</Text>
               {typeof searchQuery.alias === 'string' && (
                 <TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} />
               )}
             </>
           )}
         </div>
-        { publicChannels.length !== 0 && (
+        { publicRooms.length !== 0 && (
-          <div className="public-channels__content">
+          <div className="public-rooms__content">
-            { renderChannelList(publicChannels) }
+            { renderRoomList(publicRooms) }
           </div>
         )}
-        { publicChannels.length !== 0 && publicChannels.length % SEARCH_LIMIT === 0 && (
+        { publicRooms.length !== 0 && publicRooms.length % SEARCH_LIMIT === 0 && (
-          <div className="public-channels__view-more">
+          <div className="public-rooms__view-more">
             { isViewMore !== true && (
-              <Button onClick={() => searchChannels(true)}>View more</Button>
+              <Button onClick={() => searchRooms(true)}>View more</Button>
             )}
             { isViewMore && <Spinner /> }
           </div>
@@ -274,14 +274,14 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
   );
 }
 
-PublicChannels.defaultProps = {
+PublicRooms.defaultProps = {
   searchTerm: undefined,
 };
 
-PublicChannels.propTypes = {
+PublicRooms.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   searchTerm: PropTypes.string,
   onRequestClose: PropTypes.func.isRequired,
 };
 
-export default PublicChannels;
+export default PublicRooms;

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

@@ -1,4 +1,4 @@
-.public-channels {
+.public-rooms {
   margin: 0 var(--sp-normal);
   margin-right: var(--sp-extra-tight);
   margin-top: var(--sp-extra-tight);
@@ -75,7 +75,7 @@
     }
   }
   
-  & .channel-tile {
+  & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
       align-self: flex-end;

src/app/organisms/pw/Windows.jsx

@@ -4,17 +4,17 @@ import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 
 import InviteList from '../invite-list/InviteList';
-import PublicChannels from '../public-channels/PublicChannels';
+import PublicRooms from '../public-rooms/PublicRooms';
-import CreateChannel from '../create-channel/CreateChannel';
+import CreateRoom from '../create-room/CreateRoom';
 import InviteUser from '../invite-user/InviteUser';
 import Settings from '../settings/Settings';
 
 function Windows() {
   const [isInviteList, changeInviteList] = useState(false);
-  const [publicChannels, changePublicChannels] = useState({
+  const [publicRooms, changePublicRooms] = useState({
     isOpen: false, searchTerm: undefined,
   });
-  const [isCreateChannel, changeCreateChannel] = useState(false);
+  const [isCreateRoom, changeCreateRoom] = useState(false);
   const [inviteUser, changeInviteUser] = useState({
     isOpen: false, roomId: undefined, term: undefined,
   });
@@ -23,14 +23,14 @@ function Windows() {
   function openInviteList() {
     changeInviteList(true);
   }
-  function openPublicChannels(searchTerm) {
+  function openPublicRooms(searchTerm) {
-    changePublicChannels({
+    changePublicRooms({
       isOpen: true,
       searchTerm,
     });
   }
-  function openCreateChannel() {
+  function openCreateRoom() {
-    changeCreateChannel(true);
+    changeCreateRoom(true);
   }
   function openInviteUser(roomId, searchTerm) {
     changeInviteUser({
@@ -45,14 +45,14 @@ function Windows() {
 
   useEffect(() => {
     navigation.on(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
-    navigation.on(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels);
+    navigation.on(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
-    navigation.on(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel);
+    navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
     navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
     navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings);
     return () => {
       navigation.removeListener(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
-      navigation.removeListener(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels);
+      navigation.removeListener(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
-      navigation.removeListener(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel);
+      navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
       navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
       navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings);
     };
@@ -64,14 +64,14 @@ function Windows() {
         isOpen={isInviteList}
         onRequestClose={() => changeInviteList(false)}
       />
-      <PublicChannels
+      <PublicRooms
-        isOpen={publicChannels.isOpen}
+        isOpen={publicRooms.isOpen}
-        searchTerm={publicChannels.searchTerm}
+        searchTerm={publicRooms.searchTerm}
-        onRequestClose={() => changePublicChannels({ isOpen: false, searchTerm: undefined })}
+        onRequestClose={() => changePublicRooms({ isOpen: false, searchTerm: undefined })}
       />
-      <CreateChannel
+      <CreateRoom
-        isOpen={isCreateChannel}
+        isOpen={isCreateRoom}
-        onRequestClose={() => changeCreateChannel(false)}
+        onRequestClose={() => changeCreateRoom(false)}
       />
       <InviteUser
         isOpen={inviteUser.isOpen}

src/app/organisms/room/Room.jsx

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import './Channel.scss';
+import './Room.scss';
 
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 
 import Welcome from '../welcome/Welcome';
-import ChannelView from './ChannelView';
+import RoomView from './RoomView';
 import PeopleDrawer from './PeopleDrawer';
 
-function Channel() {
+function Room() {
   const [selectedRoomId, changeSelectedRoomId] = useState(null);
   const [isDrawerVisible, toggleDrawerVisiblity] = useState(navigation.isPeopleDrawerVisible);
   useEffect(() => {
@@ -30,11 +30,11 @@ function Channel() {
   if (selectedRoomId === null) return <Welcome />;
 
   return (
-    <div className="channel-container">
+    <div className="room-container">
-      <ChannelView roomId={selectedRoomId} />
+      <RoomView roomId={selectedRoomId} />
       { isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />}
     </div>
   );
 }
 
-export default Channel;
+export default Room;

src/app/organisms/room/Room.scss

@@ -1,4 +1,4 @@
-.channel-container {
+.room-container {
   display: flex;
   height: 100%;
 }

src/app/organisms/room/RoomView.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelView.scss';
+import './RoomView.scss';
 
 import EventEmitter from 'events';
 
@@ -8,11 +8,11 @@ import RoomTimeline from '../../../client/state/RoomTimeline';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 
-import ChannelViewHeader from './ChannelViewHeader';
+import RoomViewHeader from './RoomViewHeader';
-import ChannelViewContent from './ChannelViewContent';
+import RoomViewContent from './RoomViewContent';
-import ChannelViewFloating from './ChannelViewFloating';
+import RoomViewFloating from './RoomViewFloating';
-import ChannelViewInput from './ChannelViewInput';
+import RoomViewInput from './RoomViewInput';
-import ChannelViewCmdBar from './ChannelViewCmdBar';
+import RoomViewCmdBar from './RoomViewCmdBar';
 
 import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common';
 
@@ -22,7 +22,7 @@ let lastScrollTop = 0;
 let lastScrollHeight = 0;
 let isReachedBottom = true;
 let isReachedTop = false;
-function ChannelView({ roomId }) {
+function RoomView({ roomId }) {
   const [roomTimeline, updateRoomTimeline] = useState(null);
   const timelineSVRef = useRef(null);
 
@@ -101,13 +101,13 @@ function ChannelView({ roomId }) {
   }
 
   return (
-    <div className="channel-view">
+    <div className="room-view">
-      <ChannelViewHeader roomId={roomId} />
+      <RoomViewHeader roomId={roomId} />
-      <div className="channel-view__content-wrapper">
+      <div className="room-view__content-wrapper">
-        <div className="channel-view__scrollable">
+        <div className="room-view__scrollable">
           <ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide>
             {roomTimeline !== null && (
-              <ChannelViewContent
+              <RoomViewContent
                 roomId={roomId}
                 roomTimeline={roomTimeline}
                 timelineScroll={timelineScroll}
@@ -116,7 +116,7 @@ function ChannelView({ roomId }) {
             )}
           </ScrollView>
           {roomTimeline !== null && (
-            <ChannelViewFloating
+            <RoomViewFloating
               roomId={roomId}
               roomTimeline={roomTimeline}
               timelineScroll={timelineScroll}
@@ -125,14 +125,14 @@ function ChannelView({ roomId }) {
           )}
         </div>
         {roomTimeline !== null && (
-          <div className="channel-view__sticky">
+          <div className="room-view__sticky">
-            <ChannelViewInput
+            <RoomViewInput
               roomId={roomId}
               roomTimeline={roomTimeline}
               timelineScroll={timelineScroll}
               viewEvent={viewEvent}
             />
-            <ChannelViewCmdBar
+            <RoomViewCmdBar
               roomId={roomId}
               roomTimeline={roomTimeline}
               viewEvent={viewEvent}
@@ -143,8 +143,8 @@ function ChannelView({ roomId }) {
     </div>
   );
 }
-ChannelView.propTypes = {
+RoomView.propTypes = {
   roomId: PropTypes.string.isRequired,
 };
 
-export default ChannelView;
+export default RoomView;

src/app/organisms/room/RoomView.scss

@@ -1,24 +1,24 @@
-.channel-view-flexBox {
+.room-view-flexBox {
   display: flex;
   flex-direction: column;
 }
-.channel-view-flexItem {
+.room-view-flexItem {
   flex: 1;
   min-height: 0;
   min-width: 0;
 }
 
-.channel-view {
+.room-view {
-  @extend .channel-view-flexItem;
+  @extend .room-view-flexItem;
-  @extend .channel-view-flexBox;
+  @extend .room-view-flexBox;
 
   &__content-wrapper {
-    @extend .channel-view-flexItem;
+    @extend .room-view-flexItem;
-    @extend .channel-view-flexBox;
+    @extend .room-view-flexBox;
   }
 
   &__scrollable {
-    @extend .channel-view-flexItem;
+    @extend .room-view-flexItem;
     position: relative;
   }
   

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelViewCmdBar.scss';
+import './RoomViewCmdBar.scss';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 
@@ -11,8 +11,8 @@ import { toggleMarkdown } from '../../../client/action/settings';
 import * as roomActions from '../../../client/action/room';
 import {
   selectRoom,
-  openCreateChannel,
+  openCreateRoom,
-  openPublicChannels,
+  openPublicRooms,
   openInviteUser,
   openReadReceipts,
 } from '../../../client/action/navigation';
@@ -41,17 +41,17 @@ const commands = [{
   description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org',
   exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm),
 }, {
-  name: 'createChannel',
+  name: 'createRoom',
-  description: 'Create new channel',
+  description: 'Create new room',
-  exe: () => openCreateChannel(),
+  exe: () => openCreateRoom(),
 }, {
   name: 'join',
   isOptions: true,
-  description: 'Join channel with alias. Example: /join/#cinny:matrix.org',
+  description: 'Join room with alias. Example: /join/#cinny:matrix.org',
-  exe: (roomId, searchTerm) => openPublicChannels(searchTerm),
+  exe: (roomId, searchTerm) => openPublicRooms(searchTerm),
 }, {
   name: 'leave',
-  description: 'Leave current channel',
+  description: 'Leave current room',
   exe: (roomId) => roomActions.leave(roomId),
 }, {
   name: 'invite',
@@ -70,10 +70,10 @@ function CmdHelp() {
           <Text variant="b2">/command_name</Text>
           <MenuHeader>Go-to commands</MenuHeader>
           <Text variant="b2">{'>*space_name'}</Text>
-          <Text variant="b2">{'>#channel_name'}</Text>
+          <Text variant="b2">{'>#room_name'}</Text>
           <Text variant="b2">{'>@people_name'}</Text>
-          <MenuHeader>Autofill command</MenuHeader>
+          <MenuHeader>Autofill commands</MenuHeader>
-          <Text variant="b2">:emoji_name:</Text>
+          <Text variant="b2">:emoji_name</Text>
           <Text variant="b2">@name</Text>
         </>
       )}
@@ -174,7 +174,7 @@ function getCmdActivationMessage(prefix) {
   const cmd = {
     '/': () => genMessage('General command mode activated. ', 'Type command name for suggestions.'),
     '>*': () => genMessage('Go-to command mode activated. ', 'Type space name for suggestions.'),
-    '>#': () => genMessage('Go-to command mode activated. ', 'Type channel name for suggestions.'),
+    '>#': () => genMessage('Go-to command mode activated. ', 'Type room name for suggestions.'),
     '>@': () => genMessage('Go-to command mode activated. ', 'Type people name for suggestions.'),
     ':': () => genMessage('Emoji autofill command mode activated. ', 'Type emoji shortcut for suggestions.'),
     '@': () => genMessage('Name autofill command mode activated. ', 'Type name for suggestions.'),
@@ -273,7 +273,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
   const cmd = {
     '/': (cmds) => getGenCmdSuggestions(prefix, cmds),
     '>*': (spaces) => getRoomsSuggestion(prefix, spaces),
-    '>#': (channels) => getRoomsSuggestion(prefix, channels),
+    '>#': (rooms) => getRoomsSuggestion(prefix, rooms),
     '>@': (peoples) => getRoomsSuggestion(prefix, peoples),
     ':': (emos) => getEmojiSuggestion(prefix, emos),
     '@': (members) => getNameSuggestion(prefix, members),
@@ -284,7 +284,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
 const asyncSearch = new AsyncSearch();
 let cmdPrefix;
 let cmdOption;
-function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
+function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   const [cmd, setCmd] = useState(null);
 
   function displaySuggestions(suggestions) {
@@ -466,10 +466,10 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     </div>
   );
 }
-ChannelViewCmdBar.propTypes = {
+RoomViewCmdBar.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
   viewEvent: PropTypes.shape({}).isRequired,
 };
 
-export default ChannelViewCmdBar;
+export default RoomViewCmdBar;

src/app/organisms/room/RoomViewContent.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelViewContent.scss';
+import './RoomViewContent.scss';
 
 import dateFormat from 'dateformat';
 
@@ -29,7 +29,7 @@ import {
   PlaceholderMessage,
 } from '../../molecules/message/Message';
 import * as Media from '../../molecules/media/Media';
-import ChannelIntro from '../../molecules/channel-intro/ChannelIntro';
+import RoomIntro from '../../molecules/room-intro/RoomIntro';
 import TimelineChange from '../../molecules/message/TimelineChange';
 
 import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
@@ -131,20 +131,20 @@ function genMediaContent(mE) {
   }
 }
 
-function genChannelIntro(mEvent, roomTimeline) {
+function genRoomIntro(mEvent, roomTimeline) {
   const mx = initMatrix.matrixClient;
   const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
   const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId);
   let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
   avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
   return (
-    <ChannelIntro
+    <RoomIntro
-      key={mEvent ? mEvent.getId() : 'channel-intro'}
+      key={mEvent ? mEvent.getId() : 'room-intro'}
       roomId={roomTimeline.roomId}
       avatarSrc={avatarSrc}
       name={roomTimeline.room.name}
       heading={`Welcome to ${roomTimeline.room.name}`}
-      desc={`This is the beginning of ${roomTimeline.room.name} channel.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
+      desc={`This is the beginning of ${roomTimeline.room.name} room.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
       time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
     />
   );
@@ -188,7 +188,7 @@ function pickEmoji(e, roomId, eventId, roomTimeline) {
 }
 
 let wasAtBottom = true;
-function ChannelViewContent({
+function RoomViewContent({
   roomId, roomTimeline, timelineScroll, viewEvent,
 }) {
   const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false);
@@ -517,7 +517,7 @@ function ChannelViewContent({
   }
 
   function renderMessage(mEvent) {
-    if (mEvent.getType() === 'm.room.create') return genChannelIntro(mEvent, roomTimeline);
+    if (mEvent.getType() === 'm.room.create') return genRoomIntro(mEvent, roomTimeline);
     if (
       mEvent.getType() !== 'm.room.message'
       && mEvent.getType() !== 'm.room.encrypted'
@@ -562,20 +562,20 @@ function ChannelViewContent({
   }
 
   return (
-    <div className="channel-view__content">
+    <div className="room-view__content">
       <div className="timeline__wrapper">
         { roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() }
-        { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genChannelIntro(undefined, roomTimeline)}
+        { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genRoomIntro(undefined, roomTimeline)}
         { roomTimeline.timeline.map(renderMessage) }
       </div>
     </div>
   );
 }
-ChannelViewContent.propTypes = {
+RoomViewContent.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
   timelineScroll: PropTypes.shape({}).isRequired,
   viewEvent: PropTypes.shape({}).isRequired,
 };
 
-export default ChannelViewContent;
+export default RoomViewContent;

src/app/organisms/room/RoomViewContent.scss

@@ -1,4 +1,4 @@
-.channel-view__content {
+.room-view__content {
   min-height: 100%;
   display: flex;
   flex-direction: column;

src/app/organisms/room/RoomViewFloating.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelViewFloating.scss';
+import './RoomViewFloating.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -13,7 +13,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 
 import { getUsersActionJsx } from './common';
 
-function ChannelViewFloating({
+function RoomViewFloating({
   roomId, roomTimeline, timelineScroll, viewEvent,
 }) {
   const [reachedBottom, setReachedBottom] = useState(true);
@@ -53,11 +53,11 @@ function ChannelViewFloating({
 
   return (
     <>
-      <div className={`channel-view__typing${isSomeoneTyping(typingMembers) ? ' channel-view__typing--open' : ''}`}>
+      <div className={`room-view__typing${isSomeoneTyping(typingMembers) ? ' room-view__typing--open' : ''}`}>
         <div className="bouncingLoader"><div /></div>
         <Text variant="b2">{getTypingMessage(typingMembers)}</Text>
       </div>
-      <div className={`channel-view__STB${reachedBottom ? '' : ' channel-view__STB--open'}`}>
+      <div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>
         <IconButton
           onClick={() => {
             timelineScroll.enableSmoothScroll();
@@ -71,7 +71,7 @@ function ChannelViewFloating({
     </>
   );
 }
-ChannelViewFloating.propTypes = {
+RoomViewFloating.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
   timelineScroll: PropTypes.shape({
@@ -80,4 +80,4 @@ ChannelViewFloating.propTypes = {
   viewEvent: PropTypes.shape({}).isRequired,
 };
 
-export default ChannelViewFloating;
+export default RoomViewFloating;

src/app/organisms/room/RoomViewFloating.scss

@@ -1,4 +1,4 @@
-.channel-view {
+.room-view {
   &__typing {
     display: flex;
     padding: var(--sp-ultra-tight) var(--sp-normal);

src/app/organisms/room/RoomViewHeader.jsx

@@ -17,7 +17,7 @@ import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg
 import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
 import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 
-function ChannelViewHeader({ roomId }) {
+function RoomViewHeader({ roomId }) {
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
   let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
@@ -55,8 +55,8 @@ function ChannelViewHeader({ roomId }) {
     </Header>
   );
 }
-ChannelViewHeader.propTypes = {
+RoomViewHeader.propTypes = {
   roomId: PropTypes.string.isRequired,
 };
 
-export default ChannelViewHeader;
+export default RoomViewHeader;

src/app/organisms/room/RoomViewInput.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelViewInput.scss';
+import './RoomViewInput.scss';
 
 import TextareaAutosize from 'react-autosize-textarea';
 
@@ -33,7 +33,7 @@ const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
 let cmdCursorPos = null;
-function ChannelViewInput({
+function RoomViewInput({
   roomId, roomTimeline, timelineScroll, viewEvent,
 }) {
   const [attachment, setAttachment] = useState(null);
@@ -304,14 +304,14 @@ function ChannelViewInput({
   function renderInputs() {
     return (
       <>
-        <div className={`channel-input__option-container${attachment === null ? '' : ' channel-attachment__option'}`}>
+        <div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
           <input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
           <IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
         </div>
-        <div ref={inputBaseRef} className="channel-input__input-container">
+        <div ref={inputBaseRef} className="room-input__input-container">
           {roomTimeline.isEncryptedRoom() && <RawIcon size="extra-small" src={ShieldIC} />}
           <ScrollView autoHide>
-            <Text className="channel-input__textarea-wrapper">
+            <Text className="room-input__textarea-wrapper">
               <TextareaAutosize
                 ref={textAreaRef}
                 onChange={handleMsgTyping}
@@ -324,7 +324,7 @@ function ChannelViewInput({
           {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
           <button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button>
         </div>
-        <div ref={rightOptionsRef} className="channel-input__option-container">
+        <div ref={rightOptionsRef} className="room-input__option-container">
           <IconButton
             onClick={(e) => {
               const boxInfo = e.target.getBoundingClientRect();
@@ -346,14 +346,14 @@ function ChannelViewInput({
   function attachFile() {
     const fileType = attachment.type.slice(0, attachment.type.indexOf('/'));
     return (
-      <div className="channel-attachment">
+      <div className="room-attachment">
-        <div className={`channel-attachment__preview${fileType !== 'image' ? ' channel-attachment__icon' : ''}`}>
+        <div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
           {fileType === 'image' && <img alt={attachment.name} src={URL.createObjectURL(attachment)} />}
           {fileType === 'video' && <RawIcon src={VLCIC} />}
           {fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
           {fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
         </div>
-        <div className="channel-attachment__info">
+        <div className="room-attachment__info">
           <Text variant="b1">{attachment.name}</Text>
           <Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachment.size)}`}</span></Text>
         </div>
@@ -363,7 +363,7 @@ function ChannelViewInput({
 
   function attachReply() {
     return (
-      <div className="channel-reply">
+      <div className="room-reply">
         <IconButton
           onClick={() => {
             roomsInput.cancelReplyTo(roomId);
@@ -387,17 +387,17 @@ function ChannelViewInput({
     <>
       { replyTo !== null && attachReply()}
       { attachment !== null && attachFile() }
-      <form className="channel-input" onSubmit={(e) => { e.preventDefault(); }}>
+      <form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
         {
           roomTimeline.room.isSpaceRoom()
-            ? <Text className="channel-input__space" variant="b1">Spaces are yet to be implemented</Text>
+            ? <Text className="room-input__space" variant="b1">Spaces are yet to be implemented</Text>
             : renderInputs()
         }
       </form>
     </>
   );
 }
-ChannelViewInput.propTypes = {
+RoomViewInput.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
   timelineScroll: PropTypes.shape({
@@ -410,4 +410,4 @@ ChannelViewInput.propTypes = {
   viewEvent: PropTypes.shape({}).isRequired,
 };
 
-export default ChannelViewInput;
+export default RoomViewInput;

src/app/organisms/room/RoomViewInput.scss

@@ -1,4 +1,4 @@
-.channel-input {
+.room-input {
   padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
   display: flex;
   min-height: 48px;
@@ -73,7 +73,7 @@
   }
 }
 
-.channel-attachment {
+.room-attachment {
   --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
   display: flex;
   align-items: center;
@@ -112,7 +112,7 @@
   }
 }
 
-.channel-reply {
+.room-reply {
   display: flex;
   align-items: center;
   background-color: var(--bg-surface-low);

src/app/organisms/room/common.jsx

@@ -9,7 +9,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{user}</b>
-          {' joined the channel'}
+          {' joined the room'}
         </>
       );
     },
@@ -18,7 +18,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{user}</b>
-          {' left the channel'}
+          {' left the room'}
           {reasonMsg}
         </>
       );

src/app/templates/client/Client.jsx

@@ -4,7 +4,7 @@ import './Client.scss';
 import Text from '../../atoms/text/Text';
 import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
-import Channel from '../../organisms/channel/Channel';
+import Room from '../../organisms/room/Room';
 import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
@@ -38,8 +38,8 @@ function Client() {
       <div className="navigation__wrapper">
         <Navigation />
       </div>
-      <div className="channel__wrapper">
+      <div className="room__wrapper">
-        <Channel />
+        <Room />
       </div>
       <Windows />
       <Dialogs />

src/app/templates/client/Client.scss

@@ -6,7 +6,7 @@
 .navigation__wrapper {
   width: var(--navigation-width);
 }
-.channel__wrapper {
+.room__wrapper {
   flex: 1;
   min-width: 0;
   background-color: var(--bg-surface);

src/client/action/navigation.js

@@ -27,16 +27,16 @@ function openInviteList() {
   });
 }
 
-function openPublicChannels(searchTerm) {
+function openPublicRooms(searchTerm) {
   appDispatcher.dispatch({
-    type: cons.actions.navigation.OPEN_PUBLIC_CHANNELS,
+    type: cons.actions.navigation.OPEN_PUBLIC_ROOMS,
     searchTerm,
   });
 }
 
-function openCreateChannel() {
+function openCreateRoom() {
   appDispatcher.dispatch({
-    type: cons.actions.navigation.OPEN_CREATE_CHANNEL,
+    type: cons.actions.navigation.OPEN_CREATE_ROOM,
   });
 }
 
@@ -75,8 +75,8 @@ export {
   selectRoom,
   togglePeopleDrawer,
   openInviteList,
-  openPublicChannels,
+  openPublicRooms,
-  openCreateChannel,
+  openCreateRoom,
   openInviteUser,
   openSettings,
   openEmojiBoard,

src/client/state/cons.js

@@ -12,8 +12,8 @@ const cons = {
       SELECT_ROOM: 'SELECT_ROOM',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
-      OPEN_PUBLIC_CHANNELS: 'OPEN_PUBLIC_CHANNELS',
+      OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
-      OPEN_CREATE_CHANNEL: 'OPEN_CREATE_CHANNEL',
+      OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
       OPEN_INVITE_USER: 'OPEN_INVITE_USER',
       OPEN_SETTINGS: 'OPEN_SETTINGS',
       OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
@@ -37,8 +37,8 @@ const cons = {
       ROOM_SELECTED: 'ROOM_SELECTED',
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
       INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
-      PUBLIC_CHANNELS_OPENED: 'PUBLIC_CHANNELS_OPENED',
+      PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
-      CREATE_CHANNEL_OPENED: 'CREATE_CHANNEL_OPENED',
+      CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
       INVITE_USER_OPENED: 'INVITE_USER_OPENED',
       SETTINGS_OPENED: 'SETTINGS_OPENED',
       EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',

src/client/state/navigation.js

@@ -37,11 +37,11 @@ class Navigation extends EventEmitter {
       [cons.actions.navigation.OPEN_INVITE_LIST]: () => {
         this.emit(cons.events.navigation.INVITE_LIST_OPENED);
       },
-      [cons.actions.navigation.OPEN_PUBLIC_CHANNELS]: () => {
+      [cons.actions.navigation.OPEN_PUBLIC_ROOMS]: () => {
-        this.emit(cons.events.navigation.PUBLIC_CHANNELS_OPENED, action.searchTerm);
+        this.emit(cons.events.navigation.PUBLIC_ROOMS_OPENED, action.searchTerm);
       },
-      [cons.actions.navigation.OPEN_CREATE_CHANNEL]: () => {
+      [cons.actions.navigation.OPEN_CREATE_ROOM]: () => {
-        this.emit(cons.events.navigation.CREATE_CHANNEL_OPENED);
+        this.emit(cons.events.navigation.CREATE_ROOM_OPENED);
       },
       [cons.actions.navigation.OPEN_INVITE_USER]: () => {
         this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);