feat: Missin indicator on settings button when new device was added (#…

…17695)
wireapp · Jul 4, 2024 · 034042e · 034042e
1 parent 5871853
commit 034042e
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationTab.tsx b/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationTab.tsx
@@ -31,6 +31,7 @@ interface ConversationTabProps {
   unreadConversations?: number;
   dataUieName: string;
   isActive?: boolean;
+  showNotificationBadge?: boolean;
 }
 
 export const ConversationTab = ({
@@ -43,6 +44,7 @@ export const ConversationTab = ({
   unreadConversations = 0,
   dataUieName,
   isActive = false,
+  showNotificationBadge = false,
 }: ConversationTabProps) => {
   return (
     <button
@@ -58,8 +60,11 @@ export const ConversationTab = ({
     >
       <span className="conversations-sidebar-btn--text-wrapper">
         {Icon}
-        {unreadConversations > 0 && (
-          <span className={cx('conversations-sidebar-btn--badge', {active: isActive})} data-uie-name="unread-badge" />
+        {(unreadConversations > 0 || showNotificationBadge) && (
+          <span
+            className={cx('conversations-sidebar-btn--badge', {active: isActive})}
+            data-uie-name={showNotificationBadge ? 'notification-badge' : 'unread-badge'}
+          />
         )}
         <span className="conversations-sidebar-btn--text">{label || title}</span>
       </span>

diff --git a/src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx b/src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx
@@ -41,6 +41,7 @@ interface ConversationTabsProps {
   onChangeTab: (tab: SidebarTabs, folderId?: string) => void;
   currentTab: SidebarTabs;
   onClickPreferences: () => void;
+  showNotificationsBadge?: boolean;
 }
 
 export const ConversationTabs = ({
@@ -53,6 +54,7 @@ export const ConversationTabs = ({
   onChangeTab,
   currentTab,
   onClickPreferences,
+  showNotificationsBadge = false,
 }: ConversationTabsProps) => {
   const totalUnreadConversations = unreadConversations.length;
 
@@ -179,6 +181,7 @@ export const ConversationTabs = ({
           }}
           conversationTabIndex={1}
           dataUieName="go-preferences"
+          showNotificationBadge={showNotificationsBadge}
           isActive={currentTab === SidebarTabs.PREFERENCES}
         />
 

diff --git a/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx b/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx
@@ -105,6 +105,7 @@ const Conversations: React.FC<ConversationsProps> = ({
   const [isConversationFilterFocused, setIsConversationFilterFocused] = useState(false);
   const {classifiedDomains, isTeam} = useKoSubscribableChildren(teamState, ['classifiedDomains', 'isTeam']);
   const {connectRequests} = useKoSubscribableChildren(userState, ['connectRequests']);
+  const {notifications} = useKoSubscribableChildren(preferenceNotificationRepository, ['notifications']);
 
   const {
     activeConversation,
@@ -274,6 +275,7 @@ const Conversations: React.FC<ConversationsProps> = ({
           archivedConversations={archivedConversations}
           conversationRepository={conversationRepository}
           onClickPreferences={() => onClickPreferences(ContentState.PREFERENCES_ACCOUNT)}
+          showNotificationsBadge={notifications.length > 0}
         />
       </FadingScrollbar>