Show an unread badge when there are unread notifs from other accounts

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Added
 
+ - Add an unread badge if there are unread notifs from other accounts
+
 ### Changed
 
 ### Fixed

scss/_sidebar.scss

@@ -165,3 +165,23 @@
     -webkit-transform: translateX(-100%);
   }
 }
+
+@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;
+  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,57 @@
+import React, { useEffect, useState } from 'react'
+import { BackendRemote, onDCEvent } from '../backend-com'
+import { selectedAccountId } from '../ScreenController'
+import { runtime } from '../runtime'
+import { useSettingsStore } from '../stores/settings'
+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 settings = useSettingsStore()[0]
+
+  useEffect(() => {
+    if (settings === null) return
+    if (settings.desktopSettings.syncAllAccounts === false) 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
+  }, [settings])
+
+  if (settings && settings.desktopSettings.syncAllAccounts && haveOtherAccountsUnread) {
+    return <div className='unread-badge' style={{ ...props }} />
+  } else {
+    return null
+  }
+}

src/renderer/components/Sidebar.tsx

@@ -18,6 +18,7 @@ import {
   EffectfulBackendActions,
   onDCEvent,
 } from '../backend-com'
+import OtherAccountsUnreadBadge from './OtherAccountsUnreadBadge'
 
 export type SidebarState = 'init' | 'visible' | 'invisible'
 
@@ -180,6 +181,7 @@ const Sidebar = React.memo(
           </div>
           <div key='logout' className='sidebar-item' onClick={onLogout}>
             {tx('switch_account')}
+            <OtherAccountsUnreadBadge top='-38px' left='-14px' />
           </div>
           <div className='footer'>
             <Link href='https://delta.chat' label={'Delta Chat Desktop'} />

src/renderer/components/screens/MainScreen.tsx

@@ -42,14 +42,16 @@ import SettingsStoreInstance, { useSettingsStore } from '../../stores/settings'
 import { Type } from '../../backend-com'
 import { InlineVerifiedIcon } from '../VerifiedIcon'
 import { SettingsProfileDialog } from '../dialogs/Settings-Profile'
+import OtherAccountsUnreadBadge from '../OtherAccountsUnreadBadge'
 
 const log = getLogger('renderer/main-screen')
 
 export default function MainScreen() {
   const [queryStr, setQueryStr] = useState('')
   const [queryChatId, setQueryChatId] = useState<null | number>(null)
   const [sidebarState, setSidebarState] = useState<SidebarState>('init')
-  const [showArchivedChats, setShowArchivedChats] = useState(false)
+  const [showArchivedChats, setShowArchivedChats] = useState<boolean>(false)
+
   // Small hack/misuse of keyBindingAction to setShowArchivedChats from other components (especially
   // ViewProfile when selecting a shared chat/group)
   useKeyBindingAction(KeybindAction.ChatList_SwitchToArchiveView, () =>
@@ -202,6 +204,7 @@ export default function MainScreen() {
               id='hamburger-menu-button'
             >
               <Icon icon='menu' aria-label={tx('main_menu')} iconSize={20} />
+              <OtherAccountsUnreadBadge top='-26px' left='14px' />
             </div>
             {queryStr.length === 0 && showArchivedChats && (
               <>

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};