refactor: update UXs

src/routes/chat/ChannelChat/index.js

@@ -66,7 +66,26 @@ export default function ChannelChat({
             <span className="title">{name}</span>
             <span className="desc">{description}</span>
           </div>
-          <ul className="members">members</ul>
+          <ul className="opts">
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.alert.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.pin.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.people.svg"
+                alt="opt icon"
+              />
+            </li>
+          </ul>
         </StyledHeader>
       }
       contacts={

src/routes/chat/ChannelChat/styled.js

@@ -22,6 +22,20 @@ export const StyledHeader = styled.header`
       color: #616161;
     }
   }
+  .opts {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    .opt {
+      cursor: pointer;
+      width: 24px;
+      height: 24px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 `;
 export const StyledNotification = styled.div`
   padding: 3px 8px;
@@ -57,7 +71,7 @@ export const StyledContacts = styled.div`
   height: calc(100vh - 56px);
   overflow-y: scroll;
   background: #f5f6f7;
-  padding: 16px;
+  padding: 8px;
 `;
 export const StyledChannelChat = styled.article`
   position: relative;

src/routes/chat/ChannelList.js

@@ -22,11 +22,10 @@ const NavItem = ({ data, setFiles }) => {
       isActive: monitor.canDrop() && monitor.isOver(),
     }),
   }));
-  const { id, is_public, name, description, unreads } = data;
+  const { id, is_public, name, unreads } = data;
   return (
     <NavLink
       ref={drop}
-      title={description}
       key={id}
       className={`link ${isActive ? "drop_over" : ""}`}
       to={`/chat/channel/${id}`}

src/routes/chat/DMChat/index.js

@@ -36,6 +36,32 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
       header={
         <StyledHeader>
           <Contact interactive={false} uid={currUser.uid} />
+          <ul className="opts">
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.call.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.video.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.people.add.svg"
+                alt="opt icon"
+              />
+            </li>
+            <li className="opt">
+              <img
+                src="https://static.nicegoodthings.com/project/rustchat/icon.mark.read.svg"
+                alt="opt icon"
+              />
+            </li>
+          </ul>
         </StyledHeader>
       }
     >

src/routes/chat/DMChat/styled.js

@@ -27,6 +27,20 @@ export const StyledHeader = styled.header`
       color: #616161;
     }
   }
+  .opts {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    .opt {
+      cursor: pointer;
+      width: 24px;
+      height: 24px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
 `;
 export const StyledDMChat = styled.article`
   position: relative;

src/routes/chat/Layout.js

@@ -20,7 +20,9 @@ const StyledWrapper = styled.article`
     justify-content: space-between;
     position: relative;
     .members {
-      border-top: 1px solid transparent;
+      box-shadow: inset 0px 10px 2px -10px rgba(0, 0, 0, 0.1);
+      /* margin-top: 1px; */
+      /* border-top: 1px solid transparent; */
     }
   }
   .drag_tip {

src/routes/chat/index.js

@@ -10,6 +10,7 @@ import { useGetContactsQuery } from "../../app/services/contact";
 import StyledWrapper from "./styled";
 import Search from "../../common/component/Search";
 import Avatar from "../../common/component/Avatar";
+import CurrentUser from "../../common/component/CurrentUser";
 import ChannelChat from "./ChannelChat";
 import DMChat from "./DMChat";
 import ChannelList from "./ChannelList";
@@ -41,7 +42,11 @@ export default function ChatPage() {
     return Object.values(ChannelMsgData[gid] || {}).filter((m) => m.unread)
       .length;
   };
-
+  const handleToggleExpand = (evt) => {
+    const { currentTarget } = evt;
+    const listEle = currentTarget.parentElement.parentElement;
+    listEle.classList.toggle("collapse");
+  };
   if (!contacts) return null;
   const tmpSessionUser = contacts.find((c) => c.uid == user_id);
   const transformedChannels = Object.entries(channels).map(([key, obj]) => {
@@ -72,8 +77,12 @@ export default function ChatPage() {
           <Search />
           <div className="list channels">
             <h3 className="title">
-              <span className="txt">
-                <AiOutlineCaretDown size={18} color="#78787C" />
+              <span className="txt" onClick={handleToggleExpand}>
+                <AiOutlineCaretDown
+                  className="icon"
+                  size={18}
+                  color="#78787C"
+                />
                 CHANNELS
               </span>
               <MdAdd
@@ -91,8 +100,12 @@ export default function ChatPage() {
           </div>
           <div className="list dms">
             <h3 className="title">
-              <span className="txt">
-                <AiOutlineCaretDown size={18} color="#78787C" />
+              <span className="txt" onClick={handleToggleExpand}>
+                <AiOutlineCaretDown
+                  className="icon"
+                  size={18}
+                  color="#78787C"
+                />
                 DIRECT MESSAGE
               </span>
               <MdAdd
@@ -125,6 +138,7 @@ export default function ChatPage() {
               )}
             </nav>
           </div>
+          <CurrentUser />
         </div>
         <div className="right">
           {channel_id && (

src/routes/chat/styled.js

@@ -3,6 +3,7 @@ const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
   > .left {
+    position: relative;
     display: flex;
     flex-direction: column;
     width: 260px;
@@ -26,6 +27,10 @@ const StyledWrapper = styled.div`
           line-height: 20px;
           color: #78787c;
         }
+        .icon {
+          transition: transform 0.5s ease;
+          transform-origin: center;
+        }
       }
       > .nav {
         display: flex;
@@ -151,6 +156,14 @@ const StyledWrapper = styled.div`
           outline: 2px solid #52edff;
         }
       }
+      &.collapse {
+        .title .icon {
+          transform: rotate(-90deg);
+        }
+        > .nav {
+          display: none;
+        }
+      }
     }
   }
   > .right {