chore: updates

src/common/component/CurrentUser.js

@@ -1,12 +1,10 @@
 import { useEffect } from "react";
 import styled from "styled-components";
-import { AiOutlineCaretDown, AiOutlineSound } from "react-icons/ai";
-import { MdOutlineKeyboardVoice } from "react-icons/md";
 import { useSelector, useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
 import { clearAuthData } from "../../app/slices/auth.data";
-import BASE_URL from "../../app/config";
+// import BASE_URL from "../../app/config";
 import { useLazyLogoutQuery } from "../../app/services/auth";
 import Avatar from "./Avatar";
 const StyledWrapper = styled.div`
@@ -14,8 +12,10 @@ const StyledWrapper = styled.div`
   position: absolute;
   bottom: 0;
   left: 0;
-  padding: 16px 12px;
-  width: 100%;
+  margin: 8px;
+  width: -webkit-fill-available;
+  border-radius: 25px;
+  padding: 7px 8px 7px 4px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -26,12 +26,28 @@ const StyledWrapper = styled.div`
     justify-content: space-between;
     gap: 5px;
     .avatar {
-      width: 24px;
-      height: 24px;
+      width: 32px;
+      height: 32px;
       border-radius: 50%;
     }
     .toggle {
     }
+    .info {
+      display: flex;
+      flex-direction: column;
+      .name {
+        font-weight: bold;
+        font-size: 14px;
+        line-height: 20px;
+        color: #27272a;
+      }
+      .id {
+        padding: 0 2px;
+        font-size: 12px;
+        line-height: 18px;
+        color: #52525b;
+      }
+    }
   }
   .settings {
     gap: 20px;
@@ -40,6 +56,8 @@ const StyledWrapper = styled.div`
     justify-content: space-between;
     .icon {
       cursor: pointer;
+      width: 24px;
+      height: 24px;
     }
   }
 `;
@@ -59,24 +77,34 @@ export default function CurrentUser({ expand = true }) {
   }, [isSuccess]);
 
   if (!user) return null;
-  const { name, avatar } = user;
+  const { uid, name, avatar } = user;
   return (
     <StyledWrapper>
-      <div className="profile" title={name}>
+      <div className="profile">
         <Avatar
           onDoubleClick={handleLogout}
-          title={name}
           url={avatar}
           name={name}
           alt="user avatar"
           className="avatar"
         />
-        <AiOutlineCaretDown className="toggle" width={20} color="#C4C4C4" />
+        <div className="info">
+          <span className="name">{name}</span>
+          <span className="id">#{uid}</span>
+        </div>
       </div>
       {expand && (
         <div className="settings">
-          <AiOutlineSound className="icon" size={15} color="#1C1C1E" />
-          <MdOutlineKeyboardVoice className="icon" size={15} color="#1C1C1E" />
+          <img
+            src="https://static.nicegoodthings.com/project/rustchat/icon.speaker.svg"
+            className="icon"
+            alt="mic icon"
+          />
+          <img
+            src="https://static.nicegoodthings.com/project/rustchat/icon.mic.svg"
+            className="icon"
+            alt="sound icon"
+          />
         </div>
       )}
     </StyledWrapper>

src/common/component/Message/index.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from "react";
 import dayjs from "dayjs";
-import { useDispatch } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useInViewRef } from "rooks";
 import Tippy from "@tippyjs/react";
+import Linkify from "react-linkify";
 import Profile from "../Profile";
 import Avatar from "../Avatar";
 import BASE_URL from "../../../app/config";
-import { useGetContactsQuery } from "../../../app/services/contact";
 import { setChannelMsgRead } from "../../../app/slices/message.channel";
 import { setUserMsgRead } from "../../../app/slices/message.user";
 import StyledWrapper from "./styled";
@@ -15,7 +15,17 @@ const renderContent = (type, content) => {
   let ctn = null;
   switch (type) {
     case "text/plain":
-      ctn = content;
+      ctn = (
+        <Linkify
+          componentDecorator={(decoratedHref, decoratedText, key) => (
+            <a target="blank" href={decoratedHref} key={key}>
+              {decoratedText}
+            </a>
+          )}
+        >
+          {content}
+        </Linkify>
+      );
       break;
     case "image/jpeg":
       ctn = (
@@ -45,7 +55,7 @@ export default function Message({
   const [myRef, inView] = useInViewRef();
   const disptach = useDispatch();
   const avatarRef = useRef(null);
-  const { data: contacts } = useGetContactsQuery();
+  const contacts = useSelector((store) => store.contacts);
   useEffect(() => {
     if (!unread) {
       avatarRef.current?.scrollIntoView();
@@ -72,7 +82,7 @@ export default function Message({
         content={<Profile data={currUser} type="card" />}
       >
         <div className="avatar" data-uid={uid} ref={avatarRef}>
-          <Avatar url={currUser.avatar} id={fromUid} name={currUser.name} />
+          <Avatar url={currUser.avatar} name={currUser.name} />
         </div>
       </Tippy>
       <div className="details">

src/common/component/Message/styled.js

@@ -56,6 +56,12 @@ const StyledMsg = styled.div`
       .img {
         max-width: 400px;
       }
+      a {
+        border-radius: 2px;
+        background-color: #f5feff;
+        padding: 2px;
+        color: #1fe1f9;
+      }
     }
   }
 `;

src/routes/chat/ChannelList.js

@@ -34,7 +34,14 @@ const NavItem = ({ data, setFiles }) => {
         <ChannelIcon personal={!is_public} />
         {name}
       </span>
-      {unreads > 0 && <i className="badge">{unreads}</i>}
+      <div className="icons">
+        <i className="setting"></i>
+        {unreads > 0 && (
+          <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
+            {unreads > 99 ? null : unreads}
+          </i>
+        )}
+      </div>
     </NavLink>
   );
 };

src/routes/chat/Layout.js

@@ -87,7 +87,7 @@ export default function Layout({
     }),
   }));
   return (
-    <StyledWrapper className="animate__animated animate__fadeIn" ref={drop}>
+    <StyledWrapper ref={drop}>
       <header className="head">{header}</header>
       <main className="main">
         {children}

src/routes/chat/styled.js

@@ -58,23 +58,39 @@ const StyledWrapper = styled.div`
             font-size: 14px;
             line-height: 20px;
           }
-          > .badge {
-            color: #fff;
+          > .icons {
             display: flex;
             align-items: center;
-            justify-content: center;
-            height: 20px;
-            min-width: 20px;
-            border-radius: 50%;
-            background: #bfbfbf;
-            font-weight: 900;
-            font-size: 10px;
-            line-height: 10px;
-            &.dot {
-              width: 6px;
-              height: 6px;
-              padding: 0;
+            gap: 4px;
+            > .setting {
+              visibility: hidden;
+              display: flex;
+              width: 16px;
+              height: 16px;
+              background-image: url("https://static.nicegoodthings.com/project/rustchat/icon.setting.svg");
             }
+            > .badge {
+              color: #fff;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: 20px;
+              min-width: 20px;
+              border-radius: 50%;
+              background: #bfbfbf;
+              font-weight: 900;
+              font-size: 10px;
+              line-height: 10px;
+              &.dot {
+                min-width: unset;
+                width: 6px;
+                height: 6px;
+                padding: 0;
+              }
+            }
+          }
+          &:hover > .icons > .setting {
+            visibility: visible;
           }
         }
         .session {

src/routes/home/Menu.js

@@ -37,7 +37,11 @@ export default function Menu({ toggle, expand = true }) {
           alt="setting icon"
           className="icon"
         />
-        {expand && <span className="txt">Settings</span>}
+        {expand && (
+          <span className="txt animate__animated animate__fadeIn">
+            Settings
+          </span>
+        )}
       </li>
       <li className="menu" onClick={toggle}>
         <img
@@ -49,7 +53,9 @@ export default function Menu({ toggle, expand = true }) {
           alt="expand icon"
           className="icon"
         />
-        {expand && <span className="txt">Expand</span>}
+        {expand && (
+          <span className="txt animate__animated animate__fadeIn">Expand</span>
+        )}
       </li>
     </StyledMenus>
   );

src/routes/home/ServerDropList.js

@@ -1,6 +1,6 @@
 // import React from 'react';
 import styled from "styled-components";
-import { HiChevronDoubleLeft } from "react-icons/hi";
+// import { HiChevronDoubleLeft } from "react-icons/hi";
 
 const StyledWrapper = styled.div`
   height: 56px;
@@ -38,7 +38,11 @@ export default function ServerDropList({ data, expand = true }) {
     <StyledWrapper className={expand ? "expand" : ""}>
       <div className="server">
         <img className="logo" src={data.logo} alt="logo" />
-        {expand && <h2 className="title">{data.name}</h2>}
+        {expand && (
+          <h2 className="title animate__animated animate__fadeIn">
+            {data.name}
+          </h2>
+        )}
       </div>
     </StyledWrapper>
   );

src/routes/home/Tools.js

@@ -73,19 +73,29 @@ export default function Tools({ expand = true }) {
               alt="logo"
             />
           </div>
-          {expand && <h2 className="title">Webrowse</h2>}
+          {expand && (
+            <h2 className="title animate__animated animate__fadeIn">
+              Webrowse
+            </h2>
+          )}
         </li>
         <li className="tool">
           <div className="logo">
             <IoLogoGithub size={40} className="icon" />
           </div>
-          {expand && <h2 className="title">Github</h2>}
+          {expand && (
+            <h2 className="title animate__animated animate__fadeIn">Github</h2>
+          )}
         </li>
         <li className="tool add">
           <div className="logo">
             <RiAddFill className="icon" size={40} color="#4B5563" />
           </div>
-          {expand && <h2 className="title">Add new app</h2>}
+          {expand && (
+            <h2 className="title animate__animated animate__fadeIn">
+              Add new app
+            </h2>
+          )}
         </li>
       </ul>
     </StyledWrapper>