refactor: session list

src/common/component/Message/Mention.js

@@ -10,10 +10,11 @@ const Styled = styled.span`
     cursor: pointer;
   }
 `;
-export default function Mention({ uid, popover = true, cid }) {
+export default function Mention({ uid, popover = true, cid, textOnly = false }) {
   const contactsData = useSelector((store) => store.contacts.byId);
   const user = contactsData[uid];
   if (!user) return null;
+  if (textOnly) return `@${user.name}`;
   return (
     <Tippy
       disabled={!popover}

src/common/utils.js

@@ -123,10 +123,10 @@ export const getInitialsAvatar = ({
   context.rect(0, 0, canvas.width, canvas.height);
   context.fillStyle = background;
   context.fill();
-  // 两个字符，自动缩放40
-  context.font = `${weight} ${
-    ((initial_size || height) - (initials.length == 2 ? 40 : 0)) / 2
-  }px ${fontFamily}`;
+  // 多于两个字符，自动缩放
+  const subtract =
+    initials.length > 3 ? 50 : initials.length > 2 ? 40 : initials.length == 2 ? 30 : 0;
+  context.font = `${weight} ${((initial_size || height) - subtract) / 2}px ${fontFamily}`;
   context.textAlign = "center";
 
   context.textBaseline = "middle";

src/routes/chat/SessionList/Session.js

@@ -7,6 +7,7 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import ContextMenu from "./ContextMenu";
 import getUnreadCount, { renderPreviewMessage } from "../utils";
 import Contact from "../../../common/component/Contact";
+import Avatar from "../../../common/component/Avatar";
 import iconChannel from "../../../assets/icons/channel.svg?url";
 import IconLock from "../../../assets/icons/lock.svg";
 import useContextMenu from "../../../common/hook/useContextMenu";
@@ -45,7 +46,7 @@ export default function Session({
   );
   const { visible: contextMenuVisible, handleContextMenuEvent, hideContextMenu } = useContextMenu();
   const [data, setData] = useState(null);
-  const { messageData, contactData, channelData, readIndex, loginUid, mids } = useSelector(
+  const { messageData, contactData, channelData, readIndex, loginUid, mids, muted } = useSelector(
     (store) => {
       return {
         mids: type == "user" ? store.userMessage.byId[id] : store.channelMessage[id],
@@ -54,7 +55,8 @@ export default function Session({
           type == "user" ? store.footprint.readUsers[id] : store.footprint.readChannels[id],
         messageData: store.message,
         contactData: store.contacts.byId,
-        channelData: store.channels.byId
+        channelData: store.channels.byId,
+        muted: type == "user" ? store.footprint.muteUsers[id] : store.footprint.muteChannels[id]
       };
     }
   );
@@ -92,7 +94,7 @@ export default function Session({
       >
         <NavLink
           ref={drop}
-          className={`nav ${isActive ? "drop_over" : ""}`}
+          className={`nav ${isActive ? "drop_over" : ""} ${muted ? "muted" : ""}`}
           to={type == "user" ? `/chat/dm/${id}` : `/chat/channel/${id}`}
           onContextMenu={handleContextMenuEvent}
         >
@@ -100,11 +102,12 @@ export default function Session({
             {type == "user" ? (
               <Contact avatarSize={40} compact interactive={false} className="avatar" uid={id} />
             ) : (
-              <img
-                className={`${icon ? "" : "channel_default"}`}
-                onError={handleImageError}
-                src={icon || iconChannel}
-              />
+              <Avatar className="icon" type="channel" name={name} url={icon} />
+              // <img
+              //   className={`${icon ? "" : "channel_default"}`}
+              //   onError={handleImageError}
+              //   src={icon || iconChannel}
+              // />
             )}
           </div>
           <div className="details">

src/routes/chat/SessionList/index.js

@@ -24,7 +24,7 @@ export default function SessionList({ tempSession = null }) {
     const cSessions = channelIDs.map((id) => {
       const mids = channelMessage[id];
       if (!mids || mids.length == 0) {
-        return { mid: null, unreads: 0, id, type: "channel" };
+        return { key: `channel_${id}`, mid: null, unreads: 0, id, type: "channel" };
       }
       const mid = [...mids].pop();
       return { key: `channel_${id}`, id, mid, type: "channel" };
@@ -32,7 +32,7 @@ export default function SessionList({ tempSession = null }) {
     const uSessions = DMs.map((id) => {
       const mids = userMessage[id];
       if (!mids || mids.length == 0) {
-        return { mid: null, unreads: 0, id, type: "user" };
+        return { key: `user_${id}`, mid: null, unreads: 0, id, type: "user" };
       }
       const mid = [...mids].pop();
       return { key: `user_${id}`, type: "user", id, mid };

src/routes/chat/SessionList/styled.js

@@ -21,7 +21,7 @@ const Styled = styled.ul`
         box-shadow: inset 0 0 0 2px #52edff;
       }
       .icon {
-        flex: 1;
+        display: flex;
         background-color: #eee;
         border-radius: 50%;
         img {
@@ -101,6 +101,16 @@ const Styled = styled.ul`
           }
         }
       }
+      &.muted {
+        .up .name,
+        .up .time,
+        .down .msg {
+          color: #d0d5dd;
+        }
+        .down .badge {
+          background: #bfbfbf;
+        }
+      }
     }
   }
 `;

src/routes/chat/index.js

@@ -30,7 +30,7 @@ export default function ChatPage() {
   const tmpSession =
     sessionUids.findIndex((i) => i == user_id) > -1
       ? null
-      : { mid: null, unreads: 0, id: user_id, type: "user" };
+      : { key: `user_${user_id}`, mid: null, unreads: 0, id: user_id, type: "user" };
   // console.log("temp uid", tmpUid);
   const placeholderVisible = !channel_id && !user_id;
   return (

src/routes/chat/utils.js

@@ -8,6 +8,8 @@ import Checkbox from "../../common/component/styled/Checkbox";
 import Divider from "../../common/component/Divider";
 import Message from "../../common/component/Message";
 import { updateSelectMessages } from "../../app/slices/ui";
+import Mention from "../../common/component/Message/Mention";
+import reactStringReplace from "react-string-replace";
 // function debounce(callback, wait = 2000, immediate = false) {
 //   let timeout = null;
 //   return function () {
@@ -55,7 +57,11 @@ export const renderPreviewMessage = (message = null) => {
   switch (content_type) {
     case ContentTypes.text:
       {
-        res = content;
+        res = reactStringReplace(content, /(\s{1}@[0-9]+\s{1})/g, (match, idx) => {
+          console.log("match", match);
+          const uid = match.trim().slice(1);
+          return <Mention key={idx} uid={uid} textOnly={true} />;
+        });
       }
       break;
     case ContentTypes.markdown:

src/routes/index.js

@@ -6,7 +6,7 @@ import toast from "react-hot-toast";
 import NotFoundPage from "./404";
 // const HomePage = lazy(() => import("./home"));
 const RegBasePage = lazy(() => import("./reg"));
-const ChatPage = lazy(() => import("./chat"));
+// const ChatPage = lazy(() => import("./chat"));
 const RegWithUsernamePage = lazy(() => import("./reg/RegWithUsername"));
 const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
 const RegPage = lazy(() => import("./reg/Register"));
@@ -23,7 +23,7 @@ import RequireAuth from "../common/component/RequireAuth";
 import RequireNoAuth from "../common/component/RequireNoAuth";
 import Meta from "../common/component/Meta";
 import HomePage from "./home";
-// import ChatPage from "./chat";
+import ChatPage from "./chat";
 import Loading from "../common/component/Loading";
 
 import store from "../app/store";
@@ -114,9 +114,9 @@ const PageRoutes = () => {
             <Route
               index
               element={
-                <Suspense fallback={<Loading />}>
-                  <ChatPage />
-                </Suspense>
+                // <Suspense fallback={<Loading />}>
+                <ChatPage />
+                // </Suspense>
               }
             />
             <Route path="chat">
@@ -124,17 +124,17 @@ const PageRoutes = () => {
               <Route
                 path="channel/:channel_id"
                 element={
-                  <Suspense fallback={<Loading />}>
-                    <ChatPage />
-                  </Suspense>
+                  // <Suspense fallback={<Loading />}>
+                  <ChatPage />
+                  // </Suspense>
                 }
               />
               <Route
                 path="dm/:user_id"
                 element={
-                  <Suspense fallback={<Loading />}>
-                    <ChatPage />
-                  </Suspense>
+                  // <Suspense fallback={<Loading />}>
+                  <ChatPage />
+                  // </Suspense>
                 }
               />
             </Route>