feat: lots updates

src/routes/chat/ChannelList/NavItem.js

@@ -1,8 +1,9 @@
-import { NavLink, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { NativeTypes } from "react-dnd-html5-backend";
 import { useDispatch, useSelector } from "react-redux";
 // import { useDebounce} from "rooks";
+import StyledLink from "./styled";
 import { toggleChannelSetting } from "../../../app/slices/ui";
 import ChannelIcon from "../../../common/component/ChannelIcon";
 import { getUnreadCount } from "../utils";
@@ -47,7 +48,7 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
   const { is_public, name } = channel;
   const unreads = getUnreadCount({ mids, messageData, readIndex, loginUid });
   return (
-    <NavLink
+    <StyledLink
       data-cid={id}
       onContextMenu={(evt) => {
         contextMenuEventHandler(evt, id);
@@ -57,10 +58,10 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
       className={`link ${isActive ? "drop_over" : ""}`}
       to={`/chat/channel/${id}`}
     >
-      <span className="txt">
+      <div className="name" title={name}>
         <ChannelIcon personal={!is_public} />
-        {name}
-      </span>
+        <span className={`txt ${unreads == 0 ? "read" : ""}`}>{name}</span>
+      </div>
       <div className="icons">
         <i className="setting" onClick={handleChannelSetting}></i>
         {unreads > 0 && (
@@ -69,7 +70,7 @@ const NavItem = ({ id, setFiles, contextMenuEventHandler }) => {
           </i>
         )}
       </div>
-    </NavLink>
+    </StyledLink>
   );
 };
 

src/routes/chat/ChannelList/styled.js

@@ -0,0 +1,69 @@
+import styled from "styled-components";
+import { NavLink } from "react-router-dom";
+import settingIcon from "../../../assets/icons/setting.svg?url";
+const Styled = styled(NavLink)`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  border-radius: 4px;
+  &:hover,
+  &.active {
+    background: rgba(116, 127, 141, 0.1);
+  }
+  > .name {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    .txt {
+      color: #1c1c1e;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 20px;
+      width: 160px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      &.read {
+        color: #616161;
+      }
+    }
+  }
+  > .icons {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    > .setting {
+      visibility: hidden;
+      display: flex;
+      width: 16px;
+      height: 16px;
+      background-image: url(${settingIcon});
+      background-size: 16px;
+    }
+    > .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;
+  }
+`;
+export default Styled;