show an unread badge when there are notifs from other account(s)

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Added
 
  - Show video chat instance URLs as subtitles #3369
+ - Add an unread badge if there are unread notifs from other accounts
 
 ### Changed
 - remove jitsi as a default Video Chat instance, because they added a sign-in requirement #3366

scss/_sidebar.scss

@@ -165,3 +165,28 @@
     -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
+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;
+      */
+}

src/renderer/components/Sidebar.tsx

@@ -13,6 +13,7 @@ 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,
@@ -25,9 +26,11 @@ 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]
@@ -180,6 +183,9 @@ const Sidebar = React.memo(
           </div>
           <div key='logout' className='sidebar-item' onClick={onLogout}>
             {tx('switch_account')}
+            {haveOtherAccountsUnread && (
+              <UnreadBadge top='-38px' left='-14px' />
+            )}
           </div>
           <div className='footer'>
             <Link href='https://delta.chat' label={'Delta Chat Desktop'} />

src/renderer/components/UnreadBadge.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+
+type UnreadBadgeProps = {
+  top: string
+  left: string
+}
+
+export default function UnreadBadge(props: UnreadBadgeProps) {
+  return <div className='unread-badge' style={{ ...props }} />
+}

src/renderer/components/screens/MainScreen.tsx

@@ -19,6 +19,8 @@ import {
   selectChat,
   setChatView,
 } from '../helpers/ChatMethods'
+import { BackendRemote, onDCEvent } from '../../backend-com'
+import { selectedAccountId } from '../../ScreenController'
 
 import {
   Alignment,
@@ -42,14 +44,46 @@ 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'
 
 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)
+  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)
   useKeyBindingAction(KeybindAction.ChatList_SwitchToArchiveView, () =>
@@ -202,6 +236,9 @@ export default function MainScreen() {
               id='hamburger-menu-button'
             >
               <Icon icon='menu' aria-label={tx('main_menu')} iconSize={20} />
+              {haveOtherAccountsUnread && (
+                <UnreadBadge top='-26px' left='14px' />
+              )}
             </div>
             {queryStr.length === 0 && showArchivedChats && (
               <>
@@ -336,7 +373,11 @@ export default function MainScreen() {
         />
         {MessageListView}
       </div>
-      <Sidebar sidebarState={sidebarState} setSidebarState={setSidebarState} />
+      <Sidebar
+        sidebarState={sidebarState}
+        setSidebarState={setSidebarState}
+        haveOtherAccountsUnread={haveOtherAccountsUnread}
+      />
       <ConnectivityToast />
     </div>
   )