Unread badges and loadUnreadThreads button \w icon

GetStream · Jun 10, 2024 · f677732 · f677732
1 parent 386105c
commit f677732
Show file tree

Hide file tree

Showing 9 changed files with 268 additions and 127 deletions.
diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx
@@ -13,7 +13,7 @@ import {
   ThreadList,
   ThreadProvider,
 } from 'stream-chat-react';
-import 'stream-chat-react/css/v2/index.css';
+import '@stream-io/stream-chat-css/dist/v2/css/index.css';
 
 const params = (new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams, property) => searchParams.get(property as string),
@@ -65,20 +65,22 @@ const App = () => {
 
   return (
     <Chat client={chatClient}>
-      {!threadOnly && (
-        <>
-          <ChannelList filters={filters} options={options} sort={sort} />
-          <Channel>
-            <Window>
-              <ChannelHeader />
-              <MessageList returnAllReadData />
-              <MessageInput focus />
-            </Window>
-            <Thread />
-          </Channel>
-        </>
-      )}
-      {threadOnly && <Threads />}
+      <div className='str-chat'>
+        {!threadOnly && (
+          <>
+            <ChannelList filters={filters} options={options} sort={sort} />
+            <Channel>
+              <Window>
+                <ChannelHeader />
+                <MessageList returnAllReadData />
+                <MessageInput focus />
+              </Window>
+              <Thread virtualized />
+            </Channel>
+          </>
+        )}
+        {threadOnly && <Threads />}
+      </div>
     </Chat>
   );
 };
@@ -87,8 +89,8 @@ const Threads = () => {
   const [state, setState] = useState<ThreadType | undefined>(undefined);
 
   return (
-    <div className='str-chat threads'>
-      <ThreadList onItemPointerDown={(_, thread) => setState(thread)} />
+    <div className='str-chat__threads'>
+      <ThreadList threadListItemProps={{ onPointerDown: (_, t) => setState(t) }} />
       <ThreadProvider thread={state}>
         <Thread virtualized />
       </ThreadProvider>

diff --git a/examples/vite/src/index.scss b/examples/vite/src/index.scss
@@ -16,70 +16,10 @@ body,
   display: flex;
   height: 100%;
 
-  // .str-chat__thread-list {
-  //   width: 50%;
-  //   height: 100%;
-  // }
-
-  .str-chat__thread-list-item {
-    all: unset;
-    box-sizing: border-box;
-    padding-block: 14px;
-    padding-inline: 8px;
-    gap: 6px;
+  & > div.str-chat {
+    height: 100%;
     width: 100%;
     display: flex;
-    flex-direction: column;
-    cursor: pointer;
-  }
-
-  .str-chat__thread-list-item__channel {
-    font-size: 14px;
-    font-weight: 400;
-  }
-
-  .str-chat__thread-list-item__parent-message {
-    font-size: 12px;
-    font-weight: 400;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  .str-chat__thread-list-item__latest-reply-container {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-  }
-
-  .str-chat__thread-list-item__latest-reply-details {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    gap: 4px;
-    width: 0;
-  }
-
-  .str-chat__thread-list-item__latest-reply-created-by {
-    font-weight: 500;
-    font-size: 16px;
-  }
-
-  .str-chat__thread-list-item__latest-reply-text {
-    display: flex;
-    font-size: 14px;
-    font-weight: 400;
-    justify-content: space-between;
-
-    & > div:first-child {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-
-    & > div:last-child {
-      white-space: nowrap;
-    }
   }
 
   .str-chat__channel-list {
@@ -122,18 +62,6 @@ body,
     }
   }
 
-  .str-chat.threads {
-    display: flex;
-    height: 100%;
-    width: 100%;
-
-    .vml {
-      display: flex;
-      flex-direction: column;
-      width: 70%;
-    }
-  }
-
   @media screen and (min-width: 768px) {
     //.str-chat__channel-list.thread-open {
     //  &.menu-open {
@@ -177,4 +105,130 @@ body,
       display: none;
     }
   }
-}
+}
+
+.str-chat__threads {
+  display: flex;
+  width: 100%;
+
+  .str-chat__thread {
+    width: 100%;
+  }
+
+  .str-chat__thread-list {
+    height: 100%;
+    max-width: 420px;
+  }
+}
+
+.str-chat__thread-list-container {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  font-size: 16px;
+  font-weight: 400;
+}
+
+.str-chat__unread-threads-banner {
+  margin: 8px;
+  border-radius: 16px;
+  padding: 16px;
+  background: #080707;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.str-chat__unread-threads-banner__button {
+  all: unset;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.str-chat__thread-list-item {
+  all: unset;
+  box-sizing: border-box;
+  padding-block: 14px;
+  padding-inline: 8px;
+  gap: 6px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+}
+
+.str-chat__thread-list-item__channel {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.str-chat__thread-list-item__parent-message {
+  display: flex;
+  gap: 3px;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.str-chat__thread-list-item__parent-message-text {
+  font-size: 12px;
+  font-weight: 400;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.str-chat__thread-list-item__parent-message-unread-count {
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 700;
+  width: 22px;
+  height: 22px;
+  background: #ff3842;
+  color: #fff;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.str-chat__thread-list-item__latest-reply-container {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.str-chat__thread-list-item__latest-reply-details {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 4px;
+  width: 0;
+}
+
+.str-chat__thread-list-item__latest-reply-created-by {
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.str-chat__thread-list-item__latest-reply-text {
+  display: flex;
+  font-size: 14px;
+  font-weight: 400;
+  justify-content: space-between;
+
+  & > div:first-child {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  & > div:last-child {
+    white-space: nowrap;
+  }
+}
diff --git a/package.json b/package.json
@@ -148,7 +148,7 @@
     "@semantic-release/changelog": "^6.0.2",
     "@semantic-release/git": "^10.0.1",
     "@stream-io/rollup-plugin-node-builtins": "^2.1.5",
-    "@stream-io/stream-chat-css": "^4.16.1",
+    "@stream-io/stream-chat-css": "link:../stream-chat-css/",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",

diff --git a/src/components/MessageList/MessageList.tsx b/src/components/MessageList/MessageList.tsx
@@ -225,18 +225,13 @@ const MessageListWithContext = <
           <UnreadMessagesNotification unreadCount={channelUnreadUiState?.unread_messages} />
         )}
         <div
-          className={clsx(messageListClass, {
-            [customClasses?.threadList || 'str-chat__thread-list']: threadList,
-          })}
+          className={clsx(messageListClass, customClasses?.threadList)}
           onScroll={onScroll}
           ref={setListElement}
           tabIndex={0}
         >
           {showEmptyStateIndicator ? (
-            <EmptyStateIndicator
-              key={'empty-state-indicator'}
-              listType={threadList ? 'thread' : 'message'}
-            />
+            <EmptyStateIndicator listType={threadList ? 'thread' : 'message'} />
           ) : (
             <InfiniteScroll
               className='str-chat__message-list-scroll'

diff --git a/src/components/Threads/ThreadContext.tsx b/src/components/Threads/ThreadContext.tsx
@@ -20,7 +20,7 @@ export const useThreadContext = () => {
   const thread = useContext(ThreadContext);
 
   const placeholder = useMemo(
-    () => new Thread({ client, registerEventHandlers: false, threadData: {} }),
+    () => new Thread({ client, registerSubscriptions: false, threadData: {} }),
     [client],
   );