feat: new Layout

src/routes/chat/ChannelChat/index.js

@@ -9,9 +9,14 @@ import Send from "../../../common/component/Send";
 import Contact from "../../../common/component/Contact";
 import Layout from "../Layout";
 import { renderMessageFragment } from "../utils";
+import EditIcon from "../../../assets/icons/edit.svg";
 import alertIcon from "../../../assets/icons/alert.svg?url";
 import peopleIcon from "../../../assets/icons/people.svg?url";
 import pinIcon from "../../../assets/icons/pin.svg?url";
+import searchIcon from "../../../assets/icons/search.svg?url";
+import headphoneIcon from "../../../assets/icons/headphone.svg?url";
+import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
+import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
 import addIcon from "../../../assets/icons/add.svg?url";
 import {
   // StyledNotification,
@@ -20,8 +25,10 @@ import {
   StyledHeader,
 } from "./styled";
 import AddMemberModal from "./AddMemberModal";
+import { NavLink, useLocation } from "react-router-dom";
 
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
+  const { pathname } = useLocation();
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   const [membersVisible, setMembersVisible] = useState(true);
@@ -73,30 +80,57 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
         context="channel"
         dropFiles={dropFiles}
         // ref={containerRef}
+        aside={
+          <>
+            <ul className="tools">
+              <li className="tool">
+                <Tooltip tip="Search" placement="left">
+                  <img src={searchIcon} alt="opt icon" />
+                </Tooltip>
+              </li>
+              <li className="tool">
+                <Tooltip tip="Voice/Video Chat" placement="left">
+                  <img src={headphoneIcon} alt="opt icon" />
+                </Tooltip>
+              </li>
+              <li className="tool">
+                <Tooltip tip="Notifications" placement="left">
+                  <img src={alertIcon} alt="opt icon" />
+                </Tooltip>
+              </li>
+              <li className="tool">
+                <Tooltip tip="Pin" placement="left">
+                  <img src={pinIcon} alt="opt icon" />
+                </Tooltip>
+              </li>
+              <li className="tool" onClick={toggleMembersVisible}>
+                <Tooltip tip="Channel Members" placement="left">
+                  <img src={peopleIcon} alt="opt icon" />
+                </Tooltip>
+              </li>
+            </ul>
+            <hr className="divider" />
+            <ul className="apps">
+              <li className="app">
+                <Tooltip tip="Webrowse" placement="left">
+                  <img src={webrowseIcon} alt="app icon" />
+                </Tooltip>
+              </li>
+              <li className="app">
+                <Tooltip tip="BoardOS" placement="left">
+                  <img src={boardosIcon} alt="app icon" />
+                </Tooltip>
+              </li>
+            </ul>
+          </>
+        }
         header={
-          <StyledHeader>
+          <StyledHeader className="head">
             <div className="txt">
               <ChannelIcon personal={!is_public} />
               <span className="title">{name}</span>
               <span className="desc">{description}</span>
             </div>
-            <ul className="opts">
-              <li className="opt">
-                <Tooltip tip="Notifications" placement="bottom">
-                  <img src={alertIcon} alt="opt icon" />
-                </Tooltip>
-              </li>
-              <li className="opt">
-                <Tooltip tip="Pin" placement="bottom">
-                  <img src={pinIcon} alt="opt icon" />
-                </Tooltip>
-              </li>
-              <li className="opt" onClick={toggleMembersVisible}>
-                <Tooltip tip="Channel Members" placement="bottom">
-                  <img src={peopleIcon} alt="opt icon" />
-                </Tooltip>
-              </li>
-            </ul>
           </StyledHeader>
         }
         contacts={
@@ -125,7 +159,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                 <p className="desc">
                   This is the start of the #{name} channel.{" "}
                 </p>
-                {/* <button className="edit">Edit Channel</button> */}
+                <NavLink
+                  to={`/setting/channel/${cid}?f=${pathname}`}
+                  className="edit"
+                >
+                  <EditIcon className="icon" />
+                  Edit Channel
+                </NavLink>
               </div>
               <div className="feed">
                 {[...msgIds]

src/routes/chat/ChannelChat/styled.js

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 export const StyledHeader = styled.header`
-  width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
@@ -22,20 +21,6 @@ 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;
@@ -68,10 +53,10 @@ export const StyledContacts = styled.div`
   gap: 5px;
   /* todo */
   width: 226px;
-  height: calc(100vh - 56px);
+  height: calc(100vh - 56px - 22px);
   overflow-y: scroll;
-  background: #f5f6f7;
   padding: 8px;
+  box-shadow: inset 1px 0px 0px rgba(0, 0, 0, 0.1);
   > .add {
     cursor: pointer;
     display: flex;
@@ -101,18 +86,19 @@ export const StyledChannelChat = styled.article`
   width: 100%;
   /* margin-bottom: 120px; */
   > .wrapper {
+    background-color: #fff;
     display: flex;
     flex-direction: column;
     padding: 0;
-    padding-bottom: 10px;
-    height: calc(100vh - 56px);
+    padding-bottom: 16px;
+    height: calc(100vh - 56px - 22px);
     .chat {
       padding: 18px 16px;
       height: 100%;
       height: -webkit-fill-available;
       overflow: auto;
       > .info {
-        padding-top: 114px;
+        padding-top: 62px;
         display: flex;
         flex-direction: column;
         align-items: flex-start;
@@ -129,15 +115,26 @@ export const StyledChannelChat = styled.article`
           line-height: 24px;
         }
         .edit {
-          color: #3c8ce7;
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          .icon {
+            width: 16px;
+            height: 16px;
+            path {
+              fill: #3c8ce7;
+            }
+          }
           padding: 0;
-          border: none;
-          outline: none;
-          background: none;
           font-style: normal;
           font-weight: 500;
           font-size: 16px;
           line-height: 24px;
+          background: linear-gradient(135deg, #3c8ce7 0%, #00eaff 100%);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          text-fill-color: transparent;
         }
       }
       > .feed {

src/routes/chat/DMChat/index.js

@@ -1,10 +1,12 @@
 // import { useState, useEffect } from "react";
 import { useSelector } from "react-redux";
 import { useDebounce } from "rooks";
-
-import addIcon from "../../../assets/icons/add.person.svg?url";
-import callIcon from "../../../assets/icons/call.svg?url";
-import videoIcon from "../../../assets/icons/video.svg?url";
+import Tooltip from "../../../common/component/Tooltip";
+import alertIcon from "../../../assets/icons/alert.svg?url";
+import pinIcon from "../../../assets/icons/pin.svg?url";
+import searchIcon from "../../../assets/icons/search.svg?url";
+import boardosIcon from "../../../assets/icons/app.boardos.svg?url";
+import webrowseIcon from "../../../assets/icons/app.webrowse.svg?url";
 import useChatScroll from "../../../common/hook/useChatScroll";
 import Send from "../../../common/component/Send";
 import { useReadMessageMutation } from "../../../app/services/message";
@@ -38,20 +40,37 @@ export default function DMChat({ uid = "", dropFiles = [] }) {
       to={uid}
       context="user"
       dropFiles={dropFiles}
-      header={
-        <StyledHeader>
-          <Contact interactive={false} uid={currUser.uid} />
-          <ul className="opts">
-            <li className="opt">
-              <img src={callIcon} alt="opt icon" />
+      aside={
+        <>
+          <ul className="tools">
+            <li className="tool">
+              <img src={searchIcon} alt="opt icon" />
             </li>
-            <li className="opt">
-              <img src={videoIcon} alt="opt icon" />
+            <li className="tool">
+              <img src={alertIcon} alt="opt icon" />
             </li>
-            <li className="opt">
-              <img src={addIcon} alt="opt icon" />
+            <li className="tool">
+              <img src={pinIcon} alt="opt icon" />
             </li>
           </ul>
+          <hr className="divider" />
+          <ul className="apps">
+            <li className="app">
+              <Tooltip tip="Webrowse" placement="left">
+                <img src={webrowseIcon} alt="app icon" />
+              </Tooltip>
+            </li>
+            <li className="app">
+              <Tooltip tip="BoardOS" placement="left">
+                <img src={boardosIcon} alt="app icon" />
+              </Tooltip>
+            </li>
+          </ul>
+        </>
+      }
+      header={
+        <StyledHeader className="head">
+          <Contact interactive={false} uid={currUser.uid} />
         </StyledHeader>
       }
     >

src/routes/chat/DMChat/styled.js

@@ -1,6 +1,5 @@
 import styled from "styled-components";
 export const StyledHeader = styled.header`
-  width: 100%;
   height: 100%;
   /* padding: 0 20px 0 10px; */
   display: flex;
@@ -27,20 +26,6 @@ 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;
@@ -48,8 +33,8 @@ export const StyledDMChat = styled.article`
   flex-direction: column;
   width: 100%;
   padding: 0;
-  padding-bottom: 10px;
-  height: calc(100vh - 56px);
+  padding-bottom: 16px;
+  height: calc(100vh - 56px - 22px);
   > .chat {
     padding: 18px 16px;
     height: 100%;

src/routes/chat/Layout.js

@@ -9,14 +9,17 @@ const StyledWrapper = styled.article`
   position: relative;
   width: 100%;
   background: #fff;
-  height: 100vh;
+  border-top-right-radius: 16px;
+  border-bottom-right-radius: 16px;
   > .head {
+    box-sizing: content-box;
     height: 56px;
     padding: 0 20px;
-    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1);
+    /* box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.1); */
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   }
   > .main {
-    height: calc(100vh - 56px);
+    height: calc(100vh - 56px - 22px);
     width: 100%;
     display: flex;
     align-items: flex-start;
@@ -27,6 +30,36 @@ const StyledWrapper = styled.article`
       /* margin-top: 1px; */
       /* border-top: 1px solid transparent; */
     }
+    > .aside {
+      padding: 12px;
+      position: absolute;
+      right: 0;
+      top: -56px;
+      transform: translateX(100%);
+      display: flex;
+      flex-direction: column;
+      .divider {
+        border: none;
+        background-color: #d4d4d4;
+        width: 16px;
+        height: 1px;
+        margin: 18px auto;
+      }
+      .tools,
+      .apps {
+        display: flex;
+        flex-direction: column;
+      }
+      .tools {
+        gap: 24px;
+        .tool {
+          cursor: pointer;
+        }
+      }
+      .apps {
+        gap: 15px;
+      }
+    }
   }
   .drag_tip {
     display: flex;
@@ -75,6 +108,7 @@ const StyledWrapper = styled.article`
 export default function Layout({
   children,
   header,
+  aside = null,
   contacts = null,
   dropFiles = [],
   context = "channel",
@@ -137,10 +171,11 @@ export default function Layout({
         <ImagePreviewModal data={previewImage} closeModal={closePreviewModal} />
       )}
       <StyledWrapper ref={drop}>
-        <header className="head">{header}</header>
+        {header}
         <main className="main" ref={messagesContainer}>
           {children}
           {contacts && <div className="members">{contacts}</div>}
+          {aside && <div className="aside">{aside}</div>}
         </main>
         <div
           className={`drag_tip ${

src/routes/chat/styled.js

@@ -2,14 +2,17 @@ import styled from "styled-components";
 const StyledWrapper = styled.div`
   display: flex;
   height: 100%;
+  padding: 12px 48px 10px 0;
   > .left {
+    background-color: #fff;
     position: relative;
     display: flex;
     flex-direction: column;
     min-width: 260px;
-    box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
-    height: 100vh;
+    box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.05);
+    height: calc(100vh - 22px);
     overflow: auto;
+    border-radius: 16px 0 0 16px;
     .list {
       margin: 12px 8px;
       &.dms {
@@ -146,6 +149,7 @@ const StyledWrapper = styled.div`
     }
   }
   > .right {
+    border-radius: 0 16px 16px 0;
     width: 100%;
   }
 `;