enhance: tooltips

src/routes/chat/ChannelChat/index.js

@@ -4,6 +4,7 @@ import { useSelector } from "react-redux";
 import { useReadMessageMutation } from "../../../app/services/message";
 import useChatScroll from "../../../common/hook/useChatScroll";
 import ChannelIcon from "../../../common/component/ChannelIcon";
+import Tooltip from "../../../common/component/Tooltip";
 import Send from "../../../common/component/Send";
 import Contact from "../../../common/component/Contact";
 import Layout from "../Layout";
@@ -21,7 +22,6 @@ import {
 import AddMemberModal from "./AddMemberModal";
 
 export default function ChannelChat({ cid = "", dropFiles = [] }) {
-  // const containerRef = useRef(null);
   const [updateReadIndex] = useReadMessageMutation();
   const updateReadDebounced = useDebounce(updateReadIndex, 300);
   const [membersVisible, setMembersVisible] = useState(true);
@@ -54,6 +54,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
   const toggleAddVisible = () => {
     setAddMemberModalVisible((prev) => !prev);
   };
+
   const { name, description, is_public, members = [] } = data;
   const memberIds = members.length == 0 ? userIds : members;
   console.log("channel message list", msgIds);
@@ -81,13 +82,19 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
             </div>
             <ul className="opts">
               <li className="opt">
-                <img src={alertIcon} alt="opt icon" />
+                <Tooltip tip="Notifications" placement="bottom">
+                  <img src={alertIcon} alt="opt icon" />
+                </Tooltip>
               </li>
               <li className="opt">
-                <img src={pinIcon} alt="opt icon" />
+                <Tooltip tip="Pin" placement="bottom">
+                  <img src={pinIcon} alt="opt icon" />
+                </Tooltip>
               </li>
               <li className="opt" onClick={toggleMembersVisible}>
-                <img src={peopleIcon} alt="opt icon" />
+                <Tooltip tip="Channel Members" placement="bottom">
+                  <img src={peopleIcon} alt="opt icon" />
+                </Tooltip>
               </li>
             </ul>
           </StyledHeader>
@@ -103,7 +110,7 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   </div>
                 )}
                 {memberIds.map((uid) => {
-                  return <Contact key={uid} uid={uid} popover />;
+                  return <Contact key={uid} uid={uid} dm popover />;
                 })}
               </StyledContacts>
             </>
@@ -128,11 +135,13 @@ export default function ChannelChat({ cid = "", dropFiles = [] }) {
                   .map((mid, idx) => {
                     const curr = messageData[mid];
                     if (!curr) return null;
+                    const isFirst = idx == 0;
                     const prev = idx == 0 ? null : messageData[msgIds[idx - 1]];
                     const read = curr?.from_uid == loginUid || mid <= readIndex;
                     return renderMessageFragment({
                       updateReadIndex: updateReadDebounced,
                       read,
+                      isFirst,
                       prev,
                       curr,
                       contextId: cid,

src/routes/chat/ChannelList/NavItem.js

@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from "react-redux";
 import Tippy from "@tippyjs/react";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import ContextMenu from "../../../common/component/ContextMenu";
+import Tooltip from "../../../common/component/Tooltip";
 // import { useDebounce} from "rooks";
 import { useReadMessageMutation } from "../../../app/services/message";
 
@@ -118,7 +119,9 @@ const NavItem = ({ id, setFiles, toggleRemoveConfirm }) => {
           <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
         </div>
         <div className="icons">
-          <i className="setting" onClick={handleChannelSetting}></i>
+          <Tooltip placement="bottom" tip="Channel Setting">
+            <i className="setting" onClick={handleChannelSetting}></i>
+          </Tooltip>
           {unreads > 0 && (
             <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
               {unreads > 99 ? null : unreads}

src/routes/chat/index.js

@@ -3,11 +3,12 @@ import { useState } from "react";
 import { useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 
-import { MdAdd } from "react-icons/md";
 import { AiOutlineCaretDown } from "react-icons/ai";
 
 import StyledWrapper from "./styled";
+import AddIcon from "../../assets/icons/add.svg";
 import Search from "../../common/component/Search";
+import Tooltip from "../../common/component/Tooltip";
 // import Contact from "../../common/component/Contact";
 import CurrentUser from "../../common/component/CurrentUser";
 import ChannelChat from "./ChannelChat";
@@ -63,11 +64,12 @@ export default function ChatPage() {
                 />
                 CHANNELS
               </span>
-              <MdAdd
-                onClick={toggleChannelModalVisible}
-                size={18}
-                color="#78787C"
-              />
+              <Tooltip tip="New Channel" placement="bottom">
+                <AddIcon
+                  className="add_icon"
+                  onClick={toggleChannelModalVisible}
+                />
+              </Tooltip>
             </h3>
             <nav className="nav">
               <ChannelList setDropFiles={setChannelDropFiles} />
@@ -83,11 +85,12 @@ export default function ChatPage() {
                 />
                 DIRECT MESSAGE
               </span>
-              <MdAdd
-                size={18}
-                color="#78787C"
-                onClick={toggleContactsModalVisible}
-              />
+              <Tooltip tip="New DM" placement="bottom">
+                <AddIcon
+                  className="add_icon"
+                  onClick={toggleContactsModalVisible}
+                />
+              </Tooltip>
             </h3>
             <nav className="nav">
               <DMList

src/routes/chat/styled.js

@@ -31,6 +31,10 @@ const StyledWrapper = styled.div`
           transition: transform 0.5s ease;
           transform-origin: center;
         }
+        .add_icon {
+          width: 18px;
+          height: 18px;
+        }
       }
       > .nav {
         display: flex;