chore: Search, user item & other fixes

examples/vite/src/App.tsx

@@ -9,6 +9,9 @@ import {
   createDraftCommandInjectionMiddleware,
   createActiveCommandGuardMiddleware,
   createCommandStringExtractionMiddleware,
+  SearchController,
+  ChannelSearchSource,
+  UserSearchSource,
 } from 'stream-chat';
 import {
   AIStateIndicator,
@@ -134,6 +137,28 @@ const App = () => {
     userData: { id: userId },
   });
 
+  const searchController = useMemo(() => {
+    if (!chatClient) return undefined;
+
+    return new SearchController({
+      sources: [
+        new ChannelSearchSource(chatClient, undefined, {
+          initialFilterConfig: {
+            $or: {
+              enabled: true,
+              generate: () => ({
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                $or: [{ members: { $in: [chatClient.userID!] } }, { type: 'public' }],
+                members: undefined,
+              }),
+            },
+          },
+        }),
+        new UserSearchSource(chatClient),
+      ],
+    });
+  }, [chatClient]);
+
   const filters: ChannelFilters = useMemo(
     () => ({
       $or: [
@@ -198,7 +223,11 @@ const App = () => {
         reactionOptions: newReactionOptions,
       }}
     >
-      <Chat client={chatClient} isMessageAIGenerated={isMessageAIGenerated}>
+      <Chat
+        searchController={searchController}
+        client={chatClient}
+        isMessageAIGenerated={isMessageAIGenerated}
+      >
         <ChatView>
           <ChatView.Selector
             itemSet={chatViewSelectorItemSet}

src/components/Avatar/styling/Avatar.scss

@@ -57,6 +57,7 @@
     position: absolute;
     width: var(--avatar-status-badge-size);
     height: var(--avatar-status-badge-size);
+    z-index: 1;
 
     left: calc(
       var(--avatar-size) / 2 + var(--avatar-size) / 2 *

src/components/Button/styling/Button.scss

@@ -93,7 +93,7 @@
 
       &:not(:disabled)[aria-pressed='true'] {
         // toggled
-        @include utils.overlay-after(0.1);
+        @include utils.overlay-after(var(--background-core-selected));
       }
 
       &:disabled {

src/components/Chat/Chat.tsx

@@ -90,8 +90,8 @@ export const Chat = (props: PropsWithChildren<ChatProps>) => {
       new SearchController({
         sources: [
           new ChannelSearchSource(client),
-          // new UserSearchSource(client),
-          // new MessageSearchSource(client),
+          new UserSearchSource(client),
+          new MessageSearchSource(client),
         ],
       }),
     [client, customChannelSearchController],

src/components/Reactions/styling/ReactionSelector.scss

@@ -12,7 +12,6 @@
   border: 1px solid var(--border-core-surface-subtle, #e2e6ea);
   background: var(--background-elevation-elevation-2, #fff);
 
-  /* shadow/ios/light/elevation-3 */
   box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16);
 
   &:has(.str-chat__reaction-selector-extended-list) {
@@ -35,7 +34,6 @@
   }
 
   .str-chat__reaction-selector-extended-list {
-    @include utils.scrollable-y;
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     height: 100%;

src/experimental/Search/SearchResults/SearchResultItem.tsx

@@ -8,6 +8,7 @@ import { Avatar } from '../../../components/Avatar';
 import { ChannelPreview } from '../../../components/ChannelPreview';
 import { useChannelListContext, useChatContext } from '../../../context';
 import { DEFAULT_JUMP_TO_PAGE_SIZE } from '../../../constants/limits';
+import { Timestamp } from '../../../components/Message/Timestamp';
 
 export type ChannelSearchResultItemProps = {
   item: Channel;
@@ -104,21 +105,31 @@ export const UserSearchResultItem = ({ item }: UserSearchResultItemProps) => {
   }, [client, item, setActiveChannel, setChannels, directMessagingChannelType]);
 
   return (
-    <button
-      aria-label={`Select User Channel: ${item.name || ''}`}
-      className='str-chat__search-result'
-      data-testid='search-result-user'
-      onClick={onClick}
-      role='option'
-    >
-      <Avatar
-        className='str-chat__avatar--channel-preview'
-        imageUrl={item.image}
-        size='md'
-        userName={item.name || item.id}
-      />
-      <div className='str-chat__search-result--display-name'>{item.name || item.id}</div>
-    </button>
+    <div className='str-chat__search-result-container'>
+      <button
+        aria-label={`Select User Channel: ${item.name || ''}`}
+        className='str-chat__search-result str-chat__search-result--user'
+        data-testid='search-result-user'
+        onClick={onClick}
+        role='option'
+      >
+        <Avatar
+          imageUrl={item.image}
+          isOnline={item.online}
+          size='xl'
+          userName={item.name || item.id}
+        />
+        <div className='str-chat__search-result-data'>
+          <div className='str-chat__search-result__display-name'>
+            {item.name || item.username || item.id}
+          </div>
+          <Timestamp
+            customClass='str-chat__search-result__last-active-timestamp'
+            timestamp={item.last_active}
+          />
+        </div>
+      </button>
+    </div>
   );
 };
 

src/experimental/Search/SearchResults/SearchResultsHeader.tsx

@@ -5,6 +5,7 @@ import type { SearchSource, SearchSourceState } from 'stream-chat';
 import { useSearchContext } from '../SearchContext';
 import { useTranslationContext } from '../../../context';
 import { useStateStore } from '../../../store';
+import { Button } from '../../../components';
 
 const searchSourceStateSelector = (nextValue: SearchSourceState) => ({
   isActive: nextValue.isActive,
@@ -36,8 +37,10 @@ const SearchSourceFilterButton = ({ source }: SearchSourceFilterButtonProps) =>
   );
 
   return (
-    <button
+    <Button
+      appearance='outline'
       aria-label={t('aria/Search results header filter button')}
+      aria-pressed={isActive}
       className={clsx('str-chat__search-results-header__filter-source-button', {
         'str-chat__search-results-header__filter-source-button--active': isActive,
       })}
@@ -51,9 +54,11 @@ const SearchSourceFilterButton = ({ source }: SearchSourceFilterButtonProps) =>
             source.search(searchController.searchQuery);
         }
       }}
+      size='xs'
+      variant='secondary'
     >
       {knownLabels[label] ?? t(label)}
-    </button>
+    </Button>
   );
 };
 

src/experimental/Search/styling/Search.scss

@@ -9,7 +9,7 @@
 .str-chat__search-bar {
   padding-inline: var(--spacing-md);
   display: flex;
-  gap: var(--spacing-xs);
+  gap: var(--spacing-xxxs);
 
   .str-chat__search-bar__input-wrapper {
     display: flex;
@@ -19,19 +19,14 @@
     border-radius: var(--radius-max);
     border: 1px solid var(--input-border-default);
     color: var(--input-text-placeholder);
-    font-family: var(--typography-font-family-sans);
-    font-size: var(--typography-font-size-sm);
+    font: var(--str_chat__heading-xs-text);
+    // FIXME: there's no proper variation so we need to adjust font-weight separately
     font-weight: var(--typography-font-weight-regular);
-    line-height: var(--typography-line-height-normal);
     flex-shrink: 1;
     flex-grow: 1;
 
-    // &:focus-visible:focus-within {
-    //   outline: 2px solid var(--border-utility-focus);
-    //   outline-offset: 2px;
-    // }
-
     .str-chat__search-bar__input {
+      min-height: 24px;
       border: none;
       background: none;
       width: 100%;
@@ -43,6 +38,10 @@
       }
     }
 
+    .str-chat__search-bar__clear-button {
+      flex-shrink: 0;
+    }
+
     padding-block: var(--spacing-xs);
     padding-inline: var(--spacing-sm);
 
@@ -57,6 +56,94 @@
   }
 }
 
+.str-chat__search-results {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+
+  .str-chat__search-results-header {
+    overflow-x: auto;
+    scrollbar-width: none;
+
+    .str-chat__search-results-header__filter-source-buttons {
+      display: flex;
+      gap: var(--spacing-xxs);
+      padding-inline: var(--spacing-md);
+
+      & > .str-chat__button {
+        flex-shrink: 0;
+      }
+    }
+  }
+}
+
+.str-chat__search-source-result-list {
+  .str-chat__search-result-container {
+    padding: var(--spacing-xxs);
+    border-bottom: 1px solid var(--border-core-subtle);
+
+    .str-chat__search-result {
+      &--user {
+        display: flex;
+        align-items: center;
+        gap: var(--spacing-md);
+        padding: var(--spacing-sm);
+        border-radius: var(--radius-lg);
+        width: 100%;
+        border: none;
+        background: none;
+        cursor: pointer;
+
+        .str-chat__avatar {
+          flex-shrink: 0;
+        }
+
+        .str-chat__search-result-data {
+          display: flex;
+          flex-direction: column;
+          gap: var(--spacing-xxs);
+          flex: 1 0 0;
+          min-width: 0;
+          text-align: start;
+
+          .str-chat__search-result__display-name {
+            font: var(--str-chat__heading-xs-text);
+            color: var(--text-primary);
+            flex: 1;
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+          }
+
+          .str-chat__search-result__last-active-timestamp {
+            flex: 1;
+            min-width: 0;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            font-weight: var(--typography-font-weight-regular);
+            font-size: var(--typography-font-size-sm);
+            color: var(--text-tertiary);
+            line-height: var(--typography-line-height-normal);
+          }
+        }
+
+        background: var(--background-elevation-elevation-1);
+        &:not(:disabled):hover {
+          background: var(--background-core-hover);
+        }
+        &:not(:disabled):active {
+          background: var(--background-core-pressed);
+        }
+        &:not(:disabled)[aria-pressed='true'] {
+          background: var(--background-core-selected);
+        }
+      }
+    }
+  }
+}
+
 .str-chat__search-source-result-list__footer,
 .str-chat__search-results-presearch,
 .str-chat__search-source-results-empty {