feat: 收件箱增加已读未读标识

Author: moonrailgun

client/shared/index.tsx

@@ -202,6 +202,7 @@ export {
   userActions,
   groupActions,
   uiActions,
+  chatActions,
   globalActions,
 } from './redux/slices';
 export type { ChatConverseState } from './redux/slices/chat';

client/shared/model/inbox.ts

@@ -1,3 +1,5 @@
+import { request } from '../api/request';
+
 /**
  * 收件箱记录项类型
  */
@@ -15,3 +17,9 @@ export interface InboxItem {
   createdAt: string;
   updatedAt: string;
 }
+
+export async function setInboxAck(inboxItemId: string) {
+  await request.post('/api/chat/inbox/ack', {
+    inboxItemId,
+  });
+}

client/shared/redux/slices/chat.ts

@@ -322,6 +322,17 @@ const chatSlice = createSlice({
       const list = action.payload;
       state.inbox = list;
     },
+    /**
+     * 设置收件箱
+     */
+    setInboxItemAck(state, action: PayloadAction<string>) {
+      const inboxItemId = action.payload;
+      const item = state.inbox.find((item) => item._id === inboxItemId);
+
+      if (item) {
+        item.readed = true;
+      }
+    },
   },
 });
 

client/web/src/routes/Main/Content/Inbox/Content/index.tsx

@@ -1,13 +1,22 @@
 import { NotFound } from '@/components/NotFound';
 import React from 'react';
 import { useParams } from 'react-router';
-import { t, useInboxItem } from 'tailchat-shared';
+import {
+  model,
+  t,
+  useAppDispatch,
+  useInboxItem,
+  useWatch,
+} from 'tailchat-shared';
+import { chatActions } from 'tailchat-shared';
 import { InboxMessageContent } from './Message';
 
 export const InboxContent: React.FC = React.memo((props) => {
   const { inboxItemId } = useParams();
   const inboxItem = useInboxItem(inboxItemId ?? '');
 
+  useInboxAck(inboxItemId ?? '');
+
   if (!inboxItem) {
     return <NotFound message={t('没有找到该记录')} />;
   }
@@ -19,3 +28,19 @@ export const InboxContent: React.FC = React.memo((props) => {
   return <NotFound message={t('没有找到该类型的渲染方式')} />;
 });
 InboxContent.displayName = 'InboxContent';
+
+function useInboxAck(inboxItemId: string) {
+  const dispatch = useAppDispatch();
+  const item = useInboxItem(inboxItemId);
+
+  useWatch([inboxItemId], () => {
+    if (!item) {
+      return;
+    }
+
+    if (item.readed === false) {
+      dispatch(chatActions.setInboxItemAck(inboxItemId));
+      model.inbox.setInboxAck(inboxItemId);
+    }
+  });
+}

client/web/src/routes/Main/Content/Inbox/Sidebar.tsx

@@ -1,13 +1,14 @@
 import React, { useMemo } from 'react';
 import { CommonSidebarWrapper } from '@/components/CommonSidebarWrapper';
-import { isValidStr, model, t, useInboxList } from 'tailchat-shared';
+import { InboxItem, isValidStr, model, t, useInboxList } from 'tailchat-shared';
 import clsx from 'clsx';
 import _orderBy from 'lodash/orderBy';
 import { GroupName } from '@/components/GroupName';
 import { ConverseName } from '@/components/ConverseName';
 import { getMessageRender } from '@/plugin/common';
 import { useLocation } from 'react-router';
 import { Link } from 'react-router-dom';
+import { PillTabPane, PillTabs } from '@/components/PillTabs';
 
 /**
  * 收件箱侧边栏组件
@@ -16,33 +17,48 @@ export const InboxSidebar: React.FC = React.memo(() => {
   const inbox = useInboxList();
   const list = useMemo(() => _orderBy(inbox, 'createdAt', 'desc'), [inbox]);
 
-  return (
-    <CommonSidebarWrapper data-tc-role="sidebar-inbox">
-      <div className="overflow-auto">
-        {list.map((item) => {
-          const { type } = item;
+  const renderInbox = (item: InboxItem) => {
+    const { type } = item;
+
+    if (type === 'message') {
+      const message: Partial<model.inbox.InboxItem['message']> =
+        item.message ?? {};
+      let title: React.ReactNode = '';
+      if (isValidStr(message.groupId)) {
+        title = <GroupName groupId={message.groupId} />;
+      } else if (isValidStr(message.converseId)) {
+        title = <ConverseName converseId={message.converseId} />;
+      }
+
+      return (
+        <InboxSidebarItem
+          key={item._id}
+          title={title}
+          desc={getMessageRender(message.messageSnippet ?? '')}
+          source={'Tailchat'}
+          readed={item.readed}
+          to={`/main/inbox/${item._id}`}
+        />
+      );
+    }
 
-          if (type === 'message') {
-            const message: Partial<model.inbox.InboxItem['message']> =
-              item.message ?? {};
-            let title: React.ReactNode = '';
-            if (isValidStr(message.groupId)) {
-              title = <GroupName groupId={message.groupId} />;
-            } else if (isValidStr(message.converseId)) {
-              title = <ConverseName converseId={message.converseId} />;
-            }
+    return null;
+  };
 
-            return (
-              <InboxSidebarItem
-                key={item._id}
-                title={title}
-                desc={getMessageRender(message.messageSnippet ?? '')}
-                source={'Tailchat'}
-                to={`/main/inbox/${item._id}`}
-              />
-            );
-          }
-        })}
+  const fullList = list;
+  const unreadList = list.filter((item) => item.readed === false);
+
+  return (
+    <CommonSidebarWrapper data-tc-role="sidebar-inbox">
+      <div>
+        <PillTabs>
+          <PillTabPane key="1" tab={`${t('全部')} (${fullList.length})`}>
+            {fullList.map((item) => renderInbox(item))}
+          </PillTabPane>
+          <PillTabPane key="2" tab={`${t('未读')} (${unreadList.length})`}>
+            {unreadList.map((item) => renderInbox(item))}
+          </PillTabPane>
+        </PillTabs>
       </div>
     </CommonSidebarWrapper>
   );
@@ -53,6 +69,7 @@ const InboxSidebarItem: React.FC<{
   title: React.ReactNode;
   desc: React.ReactNode;
   source: string;
+  readed: boolean;
   to: string;
 }> = React.memo((props) => {
   const location = useLocation();
@@ -62,10 +79,11 @@ const InboxSidebarItem: React.FC<{
     <Link to={props.to}>
       <div
         className={clsx(
-          'p-2 overflow-auto cursor-pointer hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10',
+          'p-2 overflow-auto cursor-pointer hover:bg-black hover:bg-opacity-10 dark:hover:bg-white dark:hover:bg-opacity-10 border-r-4 rounded',
           {
             'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10': isActive,
-          }
+          },
+          props.readed ? 'border-transparent' : 'border-green-500'
         )}
       >
         <div className="text-lg overflow-ellipsis overflow-hidden text-gray-700 dark:text-white">