dedicated unread badge component

scss/_sidebar.scss

@@ -165,28 +165,23 @@
     -webkit-transform: translateX(-100%);
   }
 }
-/*
-  @keyframes unread-badge-bg-anim {
-      from {
-	background-color: color-mix(in srgb, var(--colorPrimary), transparent 100%);
-      }
-      to {
-	background-color: color-mix(in srgb, var(--colorPrimary), transparent 20%);
-      }
-    }
-    */
-// TODO: When Electron was upgraded, uncomment these to add animation.
-// color-mix has been added in Chrome and other browsers in early 2023
+
+@keyframes unread-badge-bg-anim {
+  from {
+    background-color: var(--unreadBadgeColor1);
+  }
+  to {
+    background-color: var(--unreadBadgeColor2);
+  }
+}
 div.unread-badge {
   width: 14px;
   height: 14px;
   border-radius: 50%;
   position: relative;
-  background-color: var(--colorPrimary);
-  /*
-      animation-duration: 1.5s;
-      animation-name: unread-badge-bg-anim;
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-      */
+  animation-duration: 1.5s;
+  animation-name: unread-badge-bg-anim;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  background-color: var(--unreadBadgeColor1);
 }

src/renderer/components/OtherAccountsUnreadBadge.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from 'react'
+import { BackendRemote, onDCEvent } from '../backend-com'
+import { selectedAccountId } from '../ScreenController'
+import { runtime } from '../runtime'
+import { DesktopSettingsType } from '../../shared/shared-types'
+
+// Tip of the Day: Keep as many ice creams as you can in your fridge
+// for the ice cream outage days. FREE ICE CREAM FOR EVERY1! --Farooq
+
+type ComponentProps = {
+  top: string
+  left: string
+}
+
+export default function OtherAccountsUnreadBadge(props: ComponentProps) {
+  const [
+    haveOtherAccountsUnread,
+    setHaveOtherAccountsUnread,
+  ] = useState<boolean>(false)
+  const [isSyncAllEnabled, setIsSyncAllEnabled] = useState<boolean>(false)
+
+  useEffect(() => {
+    runtime
+      .getDesktopSettings()
+      .then((settings: DesktopSettingsType) =>
+        setIsSyncAllEnabled(settings.syncAllAccounts)
+      )
+  })
+
+  useEffect(() => {
+    if (!isSyncAllEnabled) return
+    let updating = false
+    const update = () => {
+      if (updating) return
+      updating = true
+      BackendRemote.rpc.getAllAccountIds().then(accountIds => {
+        accountIds = accountIds.filter(id => id !== selectedAccountId())
+        for (const accountId of accountIds) {
+          BackendRemote.rpc.getFreshMsgs(accountId).then(ids => {
+            if (ids.length > 0) setHaveOtherAccountsUnread(true)
+          })
+        }
+      })
+      updating = false
+    }
+    update()
+
+    BackendRemote.rpc
+      .getAllAccountIds()
+      .then(accountIds =>
+        accountIds.map(id => onDCEvent(id, 'IncomingMsg', update))
+      )
+
+    return update
+  }, [isSyncAllEnabled])
+
+  if (haveOtherAccountsUnread) {
+    return <div className='unread-badge' style={{ ...props }} />
+  } else {
+    return null
+  }
+}

src/renderer/components/Sidebar.tsx

@@ -13,24 +13,22 @@ import { VERSION } from '../../shared/build-info'
 import { ActionEmitter, KeybindAction } from '../keybindings'
 import SettingsConnectivityDialog from './dialogs/Settings-Connectivity'
 import { debounceWithInit } from './chat/ChatListHelpers'
-import UnreadBadge from './UnreadBadge'
 import {
   BackendRemote,
   EffectfulBackendActions,
   onDCEvent,
 } from '../backend-com'
+import OtherAccountsUnreadBadge from './OtherAccountsUnreadBadge'
 
 export type SidebarState = 'init' | 'visible' | 'invisible'
 
 const Sidebar = React.memo(
   ({
     sidebarState,
     setSidebarState,
-    haveOtherAccountsUnread,
   }: {
     sidebarState: SidebarState
     setSidebarState: React.Dispatch<React.SetStateAction<SidebarState>>
-    haveOtherAccountsUnread: boolean
   }) => {
     const screenContext = useContext(ScreenContext)
     const settings = useSettingsStore()[0]
@@ -183,9 +181,7 @@ const Sidebar = React.memo(
           </div>
           <div key='logout' className='sidebar-item' onClick={onLogout}>
             {tx('switch_account')}
-            {haveOtherAccountsUnread && (
-              <UnreadBadge top='-38px' left='-14px' />
-            )}
+            <OtherAccountsUnreadBadge top='-38px' left='-14px' />
           </div>
           <div className='footer'>
             <Link href='https://delta.chat' label={'Delta Chat Desktop'} />

src/renderer/components/screens/MainScreen.tsx

@@ -19,8 +19,6 @@ import {
   selectChat,
   setChatView,
 } from '../helpers/ChatMethods'
-import { BackendRemote, onDCEvent } from '../../backend-com'
-import { selectedAccountId } from '../../ScreenController'
 
 import {
   Alignment,
@@ -44,7 +42,7 @@ import SettingsStoreInstance, { useSettingsStore } from '../../stores/settings'
 import { Type } from '../../backend-com'
 import { InlineVerifiedIcon } from '../VerifiedIcon'
 import { SettingsProfileDialog } from '../dialogs/Settings-Profile'
-import UnreadBadge from '../UnreadBadge'
+import OtherAccountsUnreadBadge from '../OtherAccountsUnreadBadge'
 
 const log = getLogger('renderer/main-screen')
 
@@ -53,36 +51,6 @@ export default function MainScreen() {
   const [queryChatId, setQueryChatId] = useState<null | number>(null)
   const [sidebarState, setSidebarState] = useState<SidebarState>('init')
   const [showArchivedChats, setShowArchivedChats] = useState<boolean>(false)
-  const [
-    haveOtherAccountsUnread,
-    setHaveOtherAccountsUnread,
-  ] = useState<boolean>(false)
-
-  useEffect(() => {
-    let updating = false
-    const update = () => {
-      if (updating) return
-      updating = true
-      BackendRemote.rpc.getAllAccountIds().then(accountIds => {
-        accountIds = accountIds.filter(id => id !== selectedAccountId())
-        for (const accountId of accountIds) {
-          BackendRemote.rpc.getFreshMsgs(accountId).then(ids => {
-            if (ids.length > 0) setHaveOtherAccountsUnread(true)
-          })
-        }
-      })
-      updating = false
-    }
-    update()
-
-    BackendRemote.rpc
-      .getAllAccountIds()
-      .then(accountIds =>
-        accountIds.map(id => onDCEvent(id, 'IncomingMsg', update))
-      )
-
-    return update
-  })
 
   // Small hack/misuse of keyBindingAction to setShowArchivedChats from other components (especially
   // ViewProfile when selecting a shared chat/group)
@@ -236,9 +204,7 @@ export default function MainScreen() {
               id='hamburger-menu-button'
             >
               <Icon icon='menu' aria-label={tx('main_menu')} iconSize={20} />
-              {haveOtherAccountsUnread && (
-                <UnreadBadge top='-26px' left='14px' />
-              )}
+              <OtherAccountsUnreadBadge top='-26px' left='14px' />
             </div>
             {queryStr.length === 0 && showArchivedChats && (
               <>
@@ -373,11 +339,7 @@ export default function MainScreen() {
         />
         {MessageListView}
       </div>
-      <Sidebar
-        sidebarState={sidebarState}
-        setSidebarState={setSidebarState}
-        haveOtherAccountsUnread={haveOtherAccountsUnread}
-      />
+      <Sidebar sidebarState={sidebarState} setSidebarState={setSidebarState} />
       <ConnectivityToast />
     </div>
   )

themes/_themebase.scss

@@ -21,6 +21,9 @@ $hover-contrast-change: 2%;
   --ovalButtonBgHover: #{changeContrast($ovalButtonBg, 70%)};
   --ovalButtonText: #{$ovalButtonText};
   --ovalButtonTextHover: #{desaturate(invert($ovalButtonText), 1)};
+  /* UnreadBadge */
+  --unreadBadgeColor1: #{$colorPrimary};
+  --unreadBadgeColor2: mix(#{$colorPrimary}, transparent, 20%);
   /* NavBar */
   --navBarBackground: #{$bgNavBar};
   --navBarText: #{$textNavBar};