From 93fae155b1a23c764f5f649f623d6fc50e016940 Mon Sep 17 00:00:00 2001
From: Virgile <virgile.girardin@wire.com>
Date: Tue, 16 Jul 2024 16:10:42 +0200
Subject: [PATCH] runfix: re-implement indicator on settings button when a new
 device is added (WPB-9542)

---
 .../ConversationTab/ConversationTab.tsx       |  8 +++----
 .../ConversationTabs/ConversationTabs.tsx     |  2 +-
 .../panels/Conversations/Conversations.tsx    |  2 ++
 src/style/list/conversations.less             | 22 -------------------
 4 files changed, 7 insertions(+), 27 deletions(-)

diff --git a/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationTab.tsx b/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationTab.tsx
index ee41d3855f5..0fe5b08614d 100644
--- a/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationTab.tsx
+++ b/src/script/page/LeftSidebar/panels/Conversations/ConversationTab/ConversationTab.tsx
@@ -31,7 +31,7 @@ interface ConversationTabProps {
   unreadConversations?: number;
   dataUieName: string;
   isActive?: boolean;
-  showNotificationBadge?: boolean;
+  showNotificationsBadge?: boolean;
 }
 
 export const ConversationTab = ({
@@ -44,7 +44,7 @@ export const ConversationTab = ({
   unreadConversations = 0,
   dataUieName,
   isActive = false,
-  showNotificationBadge = false,
+  showNotificationsBadge = false,
 }: ConversationTabProps) => {
   return (
     <button
@@ -60,10 +60,10 @@ export const ConversationTab = ({
     >
       <span className="conversations-sidebar-btn--text-wrapper">
         {Icon}
-        {(unreadConversations > 0 || showNotificationBadge) && (
+        {(unreadConversations > 0 || showNotificationsBadge) && (
           <span
             className={cx('conversations-sidebar-btn--badge', {active: isActive})}
-            data-uie-name={showNotificationBadge ? 'notification-badge' : 'unread-badge'}
+            data-uie-name={showNotificationsBadge ? 'notification-badge' : 'unread-badge'}
           />
         )}
         <span className="conversations-sidebar-btn--text">{label || title}</span>
diff --git a/src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx b/src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx
index f7919d19406..59005786334 100644
--- a/src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx
+++ b/src/script/page/LeftSidebar/panels/Conversations/ConversationTabs/ConversationTabs.tsx
@@ -184,7 +184,7 @@ export const ConversationTabs = ({
           }}
           conversationTabIndex={1}
           dataUieName="go-preferences"
-          showNotificationBadge={showNotificationsBadge}
+          showNotificationsBadge={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
index a4d20c9a6f9..0c5a07cf361 100644
--- a/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx
+++ b/src/script/page/LeftSidebar/panels/Conversations/Conversations.tsx
@@ -109,6 +109,7 @@ const Conversations: React.FC<ConversationsProps> = ({
   const [conversationsFilter, setConversationsFilter] = useState<string>('');
   const {classifiedDomains, isTeam} = useKoSubscribableChildren(teamState, ['classifiedDomains', 'isTeam']);
   const {connectRequests} = useKoSubscribableChildren(userState, ['connectRequests']);
+  const {notifications} = useKoSubscribableChildren(preferenceNotificationRepository, ['notifications']);
 
   const {isTemporaryGuest} = useKoSubscribableChildren(selfUser, ['isTemporaryGuest']);
 
@@ -264,6 +265,7 @@ const Conversations: React.FC<ConversationsProps> = ({
           archivedConversations={archivedConversations}
           conversationRepository={conversationRepository}
           onClickPreferences={() => onClickPreferences(ContentState.PREFERENCES_ACCOUNT)}
+          showNotificationsBadge={notifications.length > 0}
         />
       </FadingScrollbar>
 
diff --git a/src/style/list/conversations.less b/src/style/list/conversations.less
index fcfe602c6cd..ad7b76408ac 100644
--- a/src/style/list/conversations.less
+++ b/src/style/list/conversations.less
@@ -292,28 +292,6 @@
   }
 }
 
-.conversations-settings-button {
-  .button-reset-default;
-  .button-icon-large;
-  .focus-border-radius;
-  position: relative;
-  outline-offset: 0.2rem;
-}
-
-.conversations-settings {
-  position: relative;
-
-  &--badge::after {
-    .dot-md;
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background-color: currentColor;
-    color: inherit;
-    content: '';
-  }
-}
-
 .conversations-hint {
   position: absolute;
   bottom: 0;