Group stories show group avatar in story list viewer

ts/components/Stories.stories.tsx

@@ -22,6 +22,7 @@ export default {
   component: Stories,
   argTypes: {
     deleteStoryForEveryone: { action: true },
+    getPreferredBadge: { action: true },
     hiddenStories: {
       defaultValue: [],
     },

ts/components/Stories.tsx

@@ -14,6 +14,7 @@ import type {
   StoryViewType,
 } from '../types/Stories';
 import type { LocalizerType } from '../types/Util';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import type { PropsType as SmartStoryCreatorPropsType } from '../state/smart/StoryCreator';
 import type { ViewStoryActionCreatorType } from '../state/ducks/stories';
 import { MyStories } from './MyStories';
@@ -23,6 +24,7 @@ import { getWidthFromPreferredWidth } from '../util/leftPaneWidth';
 
 export type PropsType = {
   deleteStoryForEveryone: (story: StoryViewType) => unknown;
+  getPreferredBadge: PreferredBadgeSelectorType;
   hiddenStories: Array<ConversationStoryType>;
   i18n: LocalizerType;
   me: ConversationType;
@@ -43,6 +45,7 @@ export type PropsType = {
 
 export const Stories = ({
   deleteStoryForEveryone,
+  getPreferredBadge,
   hiddenStories,
   i18n,
   me,
@@ -88,6 +91,7 @@ export const Stories = ({
             />
           ) : (
             <StoriesPane
+              getPreferredBadge={getPreferredBadge}
               hiddenStories={hiddenStories}
               i18n={i18n}
               me={me}

ts/components/StoriesPane.tsx

@@ -15,6 +15,7 @@ import type {
   StoryViewType,
 } from '../types/Stories';
 import type { LocalizerType } from '../types/Util';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import { ContextMenu } from './ContextMenu';
 import { MyStoriesButton } from './MyStoriesButton';
 import { SearchInput } from './SearchInput';
@@ -59,6 +60,7 @@ function getNewestMyStory(story: MyStoryType): StoryViewType {
 }
 
 export type PropsType = {
+  getPreferredBadge: PreferredBadgeSelectorType;
   hiddenStories: Array<ConversationStoryType>;
   i18n: LocalizerType;
   me: ConversationType;
@@ -75,6 +77,7 @@ export type PropsType = {
 };
 
 export const StoriesPane = ({
+  getPreferredBadge,
   hiddenStories,
   i18n,
   me,
@@ -164,6 +167,7 @@ export const StoriesPane = ({
         {renderedStories.map(story => (
           <StoryListItem
             conversationId={story.conversationId}
+            getPreferredBadge={getPreferredBadge}
             group={story.group}
             i18n={i18n}
             key={story.storyView.timestamp}
@@ -192,6 +196,7 @@ export const StoriesPane = ({
               hiddenStories.map(story => (
                 <StoryListItem
                   conversationId={story.conversationId}
+                  getPreferredBadge={getPreferredBadge}
                   key={story.storyView.timestamp}
                   i18n={i18n}
                   isHidden

ts/components/StoryListItem.stories.tsx

@@ -23,6 +23,7 @@ export default {
     conversationId: {
       defaultValue: getDefaultConversation().id,
     },
+    getPreferredBadge: { action: true },
     i18n: {
       defaultValue: i18n,
     },

ts/components/StoryListItem.tsx

@@ -3,18 +3,22 @@
 
 import React, { useState } from 'react';
 import classNames from 'classnames';
-import type { LocalizerType } from '../types/Util';
+import type { ConversationType } from '../state/ducks/conversations';
 import type { ConversationStoryType, StoryViewType } from '../types/Stories';
+import type { LocalizerType } from '../types/Util';
+import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
 import { Avatar, AvatarSize } from './Avatar';
 import { ConfirmationDialog } from './ConfirmationDialog';
 import { ContextMenu } from './ContextMenu';
 import { HasStories } from '../types/Stories';
 import { MessageTimestamp } from './conversation/MessageTimestamp';
 import { StoryImage } from './StoryImage';
+import { ThemeType } from '../types/Util';
 import { getAvatarColor } from '../types/Colors';
 
 export type PropsType = Pick<ConversationStoryType, 'group' | 'isHidden'> & {
   conversationId: string;
+  getPreferredBadge: PreferredBadgeSelectorType;
   i18n: LocalizerType;
   onGoToConversation: (conversationId: string) => unknown;
   onHideStory: (conversationId: string) => unknown;
@@ -26,8 +30,58 @@ export type PropsType = Pick<ConversationStoryType, 'group' | 'isHidden'> & {
   ) => unknown;
 };
 
+function StoryListItemAvatar({
+  acceptedMessageRequest,
+  avatarPath,
+  avatarStoryRing,
+  badges,
+  color,
+  getPreferredBadge,
+  i18n,
+  isMe,
+  name,
+  profileName,
+  sharedGroupNames,
+  title,
+}: Pick<
+  ConversationType,
+  | 'acceptedMessageRequest'
+  | 'avatarPath'
+  | 'color'
+  | 'name'
+  | 'profileName'
+  | 'sharedGroupNames'
+  | 'title'
+> & {
+  avatarStoryRing?: HasStories;
+  badges?: ConversationType['badges'];
+  getPreferredBadge: PreferredBadgeSelectorType;
+  i18n: LocalizerType;
+  isMe?: boolean;
+}): JSX.Element {
+  return (
+    <Avatar
+      acceptedMessageRequest={acceptedMessageRequest}
+      avatarPath={avatarPath}
+      badge={badges ? getPreferredBadge(badges) : undefined}
+      color={getAvatarColor(color)}
+      conversationType="direct"
+      i18n={i18n}
+      isMe={Boolean(isMe)}
+      name={name}
+      profileName={profileName}
+      sharedGroupNames={sharedGroupNames}
+      size={AvatarSize.FORTY_EIGHT}
+      storyRing={avatarStoryRing}
+      theme={ThemeType.dark}
+      title={title}
+    />
+  );
+}
+
 export const StoryListItem = ({
   conversationId,
+  getPreferredBadge,
   group,
   i18n,
   isHidden,
@@ -48,17 +102,7 @@ export const StoryListItem = ({
     timestamp,
   } = story;
 
-  const {
+  const { firstName, title } = sender;
-    acceptedMessageRequest,
-    avatarPath,
-    color,
-    firstName,
-    isMe,
-    name,
-    profileName,
-    sharedGroupNames,
-    title,
-  } = sender;
 
   let avatarStoryRing: HasStories | undefined;
   if (attachment) {
@@ -111,20 +155,11 @@ export const StoryListItem = ({
           strategy: 'absolute',
         }}
       >
-        <Avatar
+        <StoryListItemAvatar
-          acceptedMessageRequest={acceptedMessageRequest}
+          avatarStoryRing={avatarStoryRing}
-          sharedGroupNames={sharedGroupNames}
+          getPreferredBadge={getPreferredBadge}
-          avatarPath={avatarPath}
-          badge={undefined}
-          color={getAvatarColor(color)}
-          conversationType="direct"
           i18n={i18n}
-          isMe={Boolean(isMe)}
+          {...(group || sender)}
-          name={name}
-          profileName={profileName}
-          size={AvatarSize.FORTY_EIGHT}
-          storyRing={avatarStoryRing}
-          title={title}
         />
         <div className="StoryListItem__info">
           <>

ts/state/smart/Stories.tsx

@@ -11,6 +11,7 @@ import { SmartStoryCreator } from './StoryCreator';
 import { Stories } from '../../components/Stories';
 import { getMe } from '../selectors/conversations';
 import { getIntl } from '../selectors/user';
+import { getPreferredBadgeSelector } from '../selectors/badges';
 import { getPreferredLeftPaneWidth } from '../selectors/items';
 import { getStories } from '../selectors/stories';
 import { saveAttachment } from '../../util/saveAttachment';
@@ -39,6 +40,7 @@ export function SmartStories(): JSX.Element | null {
   const preferredWidthFromStorage = useSelector<StateType, number>(
     getPreferredLeftPaneWidth
   );
+  const getPreferredBadge = useSelector(getPreferredBadgeSelector);
 
   const { hiddenStories, myStories, stories } = useSelector(getStories);
 
@@ -50,6 +52,7 @@ export function SmartStories(): JSX.Element | null {
 
   return (
     <Stories
+      getPreferredBadge={getPreferredBadge}
       hiddenStories={hiddenStories}
       i18n={i18n}
       me={me}