Adjust ThreadLIstUnseenThreadsBanner and add item highlighting

Author: arnautov-anton

src/components/Threads/ThreadList/ThreadList.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import type { ComputeItemKey, VirtuosoProps } from 'react-virtuoso';
 import { Virtuoso } from 'react-virtuoso';
 import clsx from 'clsx';
 
-import type { Thread, ThreadManagerState } from 'stream-chat';
+import type { Thread, ThreadManager, ThreadManagerState } from 'stream-chat';
 
 import { ThreadListItem as DefaultThreadListItem } from './ThreadListItem';
 import { ThreadListEmptyPlaceholder as DefaultThreadListEmptyPlaceholder } from './ThreadListEmptyPlaceholder';
@@ -30,12 +30,12 @@ export const useThreadList = () => {
 
   useEffect(() => {
     const handleVisibilityChange = () => {
-      if (document.visibilityState === 'visible') {
-        client.threads.activate();
-      }
-      if (document.visibilityState === 'hidden') {
-        client.threads.deactivate();
-      }
+      // if (document.visibilityState === 'visible') {
+      client.threads.activate();
+      // }
+      // if (document.visibilityState === 'hidden') {
+      // client.threads.deactivate();
+      // }
     };
 
     handleVisibilityChange();
@@ -48,6 +48,41 @@ export const useThreadList = () => {
   }, [client]);
 };
 
+const useThreadHighlighting = (threadManager: ThreadManager) => {
+  const [threadsToHighlight, setThreadsToHighlight] = useState<
+    Record<string, () => void>
+  >({});
+
+  useEffect(() => {
+    const unsubscribe = threadManager.state.subscribeWithSelector(
+      (state) => state.threads,
+      (nextThreads, previousThreads) => {
+        if (!previousThreads) return;
+
+        const resetByThreadId: Record<string, () => void> = {};
+
+        for (const thread of nextThreads) {
+          if (previousThreads.includes(thread)) continue;
+
+          resetByThreadId[thread.id] = () => {
+            setThreadsToHighlight((pv) => {
+              const copy = { ...pv };
+              delete copy[thread.id];
+              return copy;
+            });
+          };
+        }
+
+        setThreadsToHighlight(resetByThreadId);
+      },
+    );
+
+    return unsubscribe;
+  });
+
+  return threadsToHighlight;
+};
+
 export const ThreadList = ({ virtuosoProps }: ThreadListProps) => {
   const { client, navOpen = true } = useChatContext();
   const {
@@ -58,6 +93,8 @@ export const ThreadList = ({ virtuosoProps }: ThreadListProps) => {
   } = useComponentContext();
   const { isLoading, threads } = useStateStore(client.threads.state, selector);
 
+  const resetByThreadId = useThreadHighlighting(client.threads);
+
   useThreadList();
 
   if (isLoading && !threads.length) {
@@ -93,7 +130,14 @@ export const ThreadList = ({ virtuosoProps }: ThreadListProps) => {
         }}
         computeItemKey={computeItemKey}
         data={threads}
-        itemContent={(_, thread) => <ThreadListItem thread={thread} />}
+        itemContent={(_, thread) => (
+          <ThreadListItem
+            thread={thread}
+            threadListItemUIProps={{
+              resetHighlighting: resetByThreadId[thread.id],
+            }}
+          />
+        )}
         // TODO: handle visibility (for a button that scrolls to the unread thread)
         // itemsRendered={(items) => console.log({ items })}
         {...virtuosoProps}

src/components/Threads/ThreadList/ThreadListItemUI.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import clsx from 'clsx';
 
 import type { ThreadState } from 'stream-chat';
 import type { ComponentPropsWithoutRef } from 'react';
@@ -14,9 +15,14 @@ import { Badge } from '../../Badge';
 import { SummarizedMessagePreview } from '../../SummarizedMessagePreview';
 import { NAV_SIDEBAR_DESKTOP_BREAKPOINT } from '../../Chat';
 
-export type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'>;
+export type ThreadListItemUIProps = ComponentPropsWithoutRef<'button'> & {
+  resetHighlighting?: () => void;
+};
 
-export const ThreadListItemUI = (props: ThreadListItemUIProps) => {
+export const ThreadListItemUI = ({
+  resetHighlighting,
+  ...props
+}: ThreadListItemUIProps) => {
   const { client } = useChatContext();
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const thread = useThreadListItemContext()!;
@@ -69,11 +75,26 @@ export const ThreadListItemUI = (props: ThreadListItemUIProps) => {
     }));
   }, [participants]);
 
+  useEffect(() => {
+    if (!resetHighlighting) return;
+
+    const reset = resetHighlighting;
+
+    const timeout = setTimeout(() => {
+      reset();
+    }, 2000);
+
+    return () => clearTimeout(timeout);
+  }, [resetHighlighting]);
+
   return (
     <div className='str-chat__thread-list-item-container'>
       <button
         aria-pressed={activeThread === thread}
-        className='str-chat__thread-list-item'
+        className={clsx('str-chat__thread-list-item', {
+          'str-chat__thread-list-item--highlighted':
+            typeof resetHighlighting !== 'undefined',
+        })}
         data-thread-id={thread.id}
         onClick={() => {
           if (

src/components/Threads/ThreadList/ThreadListUnseenThreadsBanner.tsx

@@ -1,31 +1,49 @@
 import React from 'react';
+import clsx from 'clsx';
 
 import type { ThreadManagerState } from 'stream-chat';
 
-import { IconArrowRotateClockwise } from '../../Icons';
-import { useChatContext } from '../../../context';
+import { IconArrowRotateRightLeftRepeatRefresh } from '../../Icons';
+import { useChatContext, useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
+import { LoadingIndicator } from '../../Loading';
 
 const selector = (nextValue: ThreadManagerState) => ({
+  isLoading: nextValue.pagination.isLoading,
   unseenThreadIds: nextValue.unseenThreadIds,
 });
 
 export const ThreadListUnseenThreadsBanner = () => {
   const { client } = useChatContext();
-  const { unseenThreadIds } = useStateStore(client.threads.state, selector);
+  const { t } = useTranslationContext();
+  const { isLoading, unseenThreadIds } = useStateStore(client.threads.state, selector);
 
   if (!unseenThreadIds.length) return null;
 
   return (
-    <div className='str-chat__unseen-threads-banner'>
-      {/* TODO: translate */}
-      {unseenThreadIds.length} unread threads
-      <button
-        className='str-chat__unseen-threads-banner__button'
-        onClick={() => client.threads.reload()}
-      >
-        <IconArrowRotateClockwise />
-      </button>
-    </div>
+    <button
+      className={clsx('str-chat__unseen-threads-banner', {
+        'str-chat__unseen-threads-banner--loading': isLoading,
+      })}
+      disabled={isLoading}
+      onClick={() => client.threads.reload()}
+    >
+      {!isLoading && (
+        <>
+          <IconArrowRotateRightLeftRepeatRefresh />
+          <span>
+            {t('ThreadListUnseenThreadsBanner/unreadThreads', {
+              count: unseenThreadIds.length,
+            })}
+          </span>
+        </>
+      )}
+      {isLoading && (
+        <>
+          <LoadingIndicator />
+          <span>{t('ThreadListUnseenThreadsBanner/loading')}</span>
+        </>
+      )}
+    </button>
   );
 };

src/components/Threads/ThreadList/styling/ThreadList.scss

@@ -111,6 +111,31 @@
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
+
+  .str-chat__unseen-threads-banner {
+    @include utils.unset-button;
+
+    font: var(--str-chat__metadata-emphasis-text);
+    cursor: pointer;
+    display: flex;
+    color: var(--text-secondary);
+    height: 36px;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-xs);
+    border-radius: var(--radius-none);
+    background: var(--background-core-surface);
+    position: relative;
+
+    & > .str-chat__icon {
+      height: var(--icon-size-md);
+      width: var(--icon-size-md);
+    }
+
+    &:not(:disabled):hover {
+      @include utils.overlay-after(var(--background-core-hover));
+    }
+  }
 }
 
 .str-chat__thread-list {

src/components/Threads/ThreadList/styling/ThreadListItemUI.scss

@@ -4,6 +4,10 @@
   border-bottom: 1px solid var(--border-core-subtle);
   padding: var(--spacing-xxs);
   max-width: 100%;
+
+  &:has(.str-chat__thread-list-item--highlighted) {
+    background: var(--background-core-highlight);
+  }
 }
 
 .str-chat__thread-list-item {
@@ -16,12 +20,11 @@
   border: none;
   cursor: pointer;
   text-align: start;
-  background: var(--background-elevation-elevation-1);
+  background: var(--base-transparent-0);
   border-radius: var(--radius-lg);
   width: 100%;
   max-width: 100%;
 
-  background: var(--background-elevation-elevation-1);
   &:not(:disabled):hover {
     background: var(--background-core-hover);
   }