Add narrow members (#40)

packages/react-chat/src/components/Channels.tsx

@@ -90,7 +90,10 @@ export function Channel({
 
   return (
     <ChannelWrapper
-      className={isActive && !activeView ? "active" : ""}
+      className={
+        (isActive && !activeView) || (isActive && narrow) ? "active" : ""
+      }
+      style={{ width: narrow && activeView ? "calc(100% - 162px)" : "100%" }}
       theme={theme}
       onClick={onClick}
     >
@@ -108,7 +111,7 @@ export function Channel({
           <ChannelName
             theme={theme}
             className={
-              isActive
+              isActive || narrow
                 ? "active"
                 : notification && notification > 0
                 ? "notified"
@@ -158,6 +161,9 @@ const ChannelDescription = styled.p<ThemeProps>`
   line-height: 16px;
   letter-spacing: 0.1px;
   color: ${({ theme }) => theme.secondary};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 `;
 
 export const ChannelList = styled.div`
@@ -186,11 +192,14 @@ const ChannelWrapper = styled.div<ThemeProps>`
 export const ChannelInfo = styled.div`
   display: flex;
   align-items: center;
+  overflow: hidden;
 `;
 
 const ChannelTextInfo = styled.div`
   display: flex;
   flex-direction: column;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 export const ChannelLogo = styled.div<ThemeProps>`

packages/react-chat/src/components/Chat/ChatBody.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
 import { useNarrow } from "../../contexts/narrowProvider";
@@ -11,7 +11,7 @@ import { Community } from "../Community";
 import { EmptyChannel } from "../EmptyChannel";
 import { MembersIcon } from "../Icons/MembersIcon";
 import { NarrowChannels } from "../NarrowMode/NarrowChannels";
-import { NarrowTopbar } from "../NarrowMode/NarrowTopbar";
+import { NarrowMembers } from "../NarrowMode/NarrowMembers";
 
 import { ChatInput } from "./ChatInput";
 import { ChatMessages } from "./ChatMessages";
@@ -44,59 +44,78 @@ export function ChatBody({
   activeChannelId,
 }: ChatBodyProps) {
   const narrow = useNarrow();
-  const [showChannelsList, setShowChannels] = useState(false);
+  const [showChannelsList, setShowChannelsList] = useState(false);
   const [showMembersList, setShowMembersList] = useState(false);
+  const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]);
+
+  const switchChannelList = useCallback(() => {
+    setShowMembersList(false);
+    setShowChannelsList(true);
+  }, []);
+
+  const switchMemberList = useCallback(() => {
+    setShowChannelsList(false);
+    setShowMembersList(!showMembersList);
+  }, [showMembersList]);
 
   return (
-    <ChatBodyWrapper theme={theme}>
+    <ChatBodyWrapper theme={theme} className={className}>
       <ChatTopbar>
-        <ChannelWrapper>
+        <ChannelWrapper className={className}>
           {(showCommunity || narrow) && (
-            <CommunityWrap theme={theme}>
+            <CommunityWrap theme={theme} className={className}>
               <Community community={community} theme={theme} />
             </CommunityWrap>
           )}
           <Channel
             channel={channel}
             theme={theme}
-            isActive={true}
+            isActive={narrow ? showChannelsList : true}
             activeView={true}
             isMuted={false}
-            onClick={() => (narrow ? setShowChannels(true) : undefined)}
+            onClick={() => (narrow ? switchChannelList() : undefined)}
           />
         </ChannelWrapper>
         <MemberBtn
-          onClick={narrow ? () => setShowMembersList(true) : onClick}
+          onClick={narrow ? () => switchMemberList() : onClick}
-          className={showMembers ? "active" : ""}
+          className={
+            (showMembers && !narrow) || (showMembersList && narrow)
+              ? "active"
+              : ""
+          }
           theme={theme}
         >
           <MembersIcon theme={theme} />
         </MemberBtn>
       </ChatTopbar>
-      {!showChannelsList &&
+      {!showChannelsList && !showMembersList && (
-        !showMembersList &&
+        <>
-        (messages.length > 0 ? (
+          {" "}
-          <ChatMessages messages={messages} theme={theme} />
+          {messages.length > 0 ? (
-        ) : (
+            <ChatMessages messages={messages} theme={theme} />
-          <EmptyChannel theme={theme} channel={channel} />
+          ) : (
-        ))}
+            <EmptyChannel theme={theme} channel={channel} />
-      <ChatInput theme={theme} addMessage={sendMessage} />
+          )}
+          <ChatInput theme={theme} addMessage={sendMessage} />
+        </>
+      )}
+
       {showChannelsList && narrow && (
         <NarrowChannels
           theme={theme}
           community={community.name}
           notifications={notifications}
           setActiveChannel={setActiveChannel}
-          setShowChannels={setShowChannels}
+          setShowChannels={setShowChannelsList}
           activeChannelId={activeChannelId}
         />
       )}
       {showMembersList && narrow && (
-        <NarrowTopbar
+        <NarrowMembers
           theme={theme}
-          list="Community members"
+          community={community}
-          community={community.name}
+          setShowChannels={setShowChannelsList}
-          onClick={() => setShowMembersList(false)}
+          setShowMembersList={setShowMembersList}
         />
       )}
     </ChatBodyWrapper>
@@ -112,24 +131,36 @@ const ChatBodyWrapper = styled.div<ThemeProps>`
   flex: 1;
   height: 100%;
   background: ${({ theme }) => theme.bodyBackgroundColor};
+
+  &.narrow {
+    width: 100%;
+  }
 `;
 
 const ChannelWrapper = styled.div`
   display: flex;
   align-items: center;
+
+  &.narrow {
+    width: calc(100% - 46px);
+  }
 `;
 
 const ChatTopbar = styled.div`
   display: flex;
   justify-content: space-between;
-  padding: 0 8px;
+  padding: 5px 8px;
 `;
 
 const CommunityWrap = styled.div<ThemeProps>`
-  padding-right: 16px;
+  padding-right: 10px;
   margin-right: 16px;
   position: relative;
 
+  &.narrow {
+    margin-right: 8px;
+  }
+
   &:after {
     content: "";
     position: absolute;

packages/react-chat/src/components/Members.tsx

@@ -17,49 +17,69 @@ export function Members({ theme, community, setShowChannels }: MembersProps) {
   return (
     <MembersWrapper theme={theme}>
       <MemberHeading theme={theme}>Members</MemberHeading>
-      <MembersList>
+      <MembersList
-        <MemberCategory>
+        theme={theme}
-          <MemberCategoryName theme={theme}>You</MemberCategoryName>
+        community={community}
-          <MemberData>
+        setShowChannels={setShowChannels}
-            <MemberIcon>
+      />
-              <UserIcon theme={theme} memberView={true} />
-            </MemberIcon>
-            <MemberName theme={theme}>Guest564732</MemberName>
-          </MemberData>
-        </MemberCategory>
-        <MemberCategory>
-          <MemberCategoryName theme={theme}>Online</MemberCategoryName>
-          {community.membersList
-            .filter((member) => member.isOnline)
-            .map((member) => (
-              <Member
-                key={member.id}
-                theme={theme}
-                member={member}
-                isOnline={member.isOnline}
-                setShowChannels={setShowChannels}
-              />
-            ))}
-        </MemberCategory>
-        <MemberCategory>
-          <MemberCategoryName theme={theme}>Offline</MemberCategoryName>
-          {community.membersList
-            .filter((member) => !member.isOnline)
-            .map((member) => (
-              <Member
-                key={member.id}
-                theme={theme}
-                member={member}
-                isOnline={member.isOnline}
-                setShowChannels={setShowChannels}
-              />
-            ))}
-        </MemberCategory>
-      </MembersList>
     </MembersWrapper>
   );
 }
 
+interface MembersListProps {
+  theme: Theme;
+  community: CommunityData;
+  setShowChannels: (val: boolean) => void;
+}
+
+export function MembersList({
+  theme,
+  community,
+  setShowChannels,
+}: MembersListProps) {
+  return (
+    <MembersListWrap>
+      <MemberCategory>
+        <MemberCategoryName theme={theme}>You</MemberCategoryName>
+        <MemberData>
+          <MemberIcon>
+            <UserIcon theme={theme} memberView={true} />
+          </MemberIcon>
+          <MemberName theme={theme}>Guest564732</MemberName>
+        </MemberData>
+      </MemberCategory>
+      <MemberCategory>
+        <MemberCategoryName theme={theme}>Online</MemberCategoryName>
+        {community.membersList
+          .filter((member) => member.isOnline)
+          .map((member) => (
+            <Member
+              key={member.id}
+              theme={theme}
+              member={member}
+              isOnline={member.isOnline}
+              setShowChannels={setShowChannels}
+            />
+          ))}
+      </MemberCategory>
+      <MemberCategory>
+        <MemberCategoryName theme={theme}>Offline</MemberCategoryName>
+        {community.membersList
+          .filter((member) => !member.isOnline)
+          .map((member) => (
+            <Member
+              key={member.id}
+              theme={theme}
+              member={member}
+              isOnline={member.isOnline}
+              setShowChannels={setShowChannels}
+            />
+          ))}
+      </MemberCategory>
+    </MembersListWrap>
+  );
+}
+
 interface MemberProps {
   theme: Theme;
   member: any;
@@ -131,7 +151,7 @@ const MemberName = styled.p<ThemeProps>`
   white-space: nowrap;
 `;
 
-const MembersList = styled.div`
+const MembersListWrap = styled.div`
   display: flex;
   flex-direction: column;
   overflow-y: scroll;

packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+
+import { CommunityData } from "../../helpers/communityMock";
+import { Theme } from "../../styles/themes";
+import { MembersList } from "../Members";
+
+import { NarrowTopbar } from "./NarrowTopbar";
+
+interface NarrowMembersProps {
+  theme: Theme;
+  community: CommunityData;
+  setShowChannels: (val: boolean) => void;
+  setShowMembersList: (val: boolean) => void;
+}
+
+export function NarrowMembers({
+  theme,
+  community,
+  setShowChannels,
+  setShowMembersList,
+}: NarrowMembersProps) {
+  return (
+    <ListWrapper>
+      <NarrowTopbar
+        theme={theme}
+        list="Community members"
+        community={community.name}
+        onClick={() => setShowMembersList(false)}
+      />
+      <MembersList
+        theme={theme}
+        community={community}
+        setShowChannels={setShowChannels}
+      />
+    </ListWrapper>
+  );
+}
+
+const ListWrapper = styled.div`
+  padding: 18px;
+`;

packages/react-chat/src/styles/GlobalStyle.tsx

@@ -4,6 +4,10 @@ export const GlobalStyle = createGlobalStyle`
   * {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
   }
 
   body,