feat: make unread accounts position: sticky

This somewhat addresses the
"indicators on top and bottom
if there are unread accounts out of screen"
point in #3671.

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Added
 - added experimental tauri version (`packages/target-tauri`) #4462
+- always show accounts with unread messages, even when they're normally scrolled out of view
 
 ### Changed
 - add some missing translations

packages/frontend/scss/_variables.scss

@@ -32,6 +32,7 @@ $z-index: (
   chatlist-scope-floating-action-button: 1,
   jump-down-button-scope-counter: 1,
   account-list-sidebar-scope-account-badge: 1,
+  account-list-sidebar-scope-sticky-account: 1,
 
   // Global Scope
   // ============

packages/frontend/src/components/AccountListSidebar/AccountItem.tsx

@@ -178,6 +178,8 @@ export default function AccountItem({
     )
   }
 
+  const isSticky = unreadCount > 0
+
   const ref = useRef<HTMLButtonElement>(null)
   useLayoutEffect(() => {
     if (!isSelected) {
@@ -210,8 +212,13 @@ export default function AccountItem({
     // TODO refactor: maybe just use `ResizeObserver`,
     // as we do with messages list:
     // https://github.com/deltachat/deltachat-desktop/pull/4119
+    //
+    // Also watching `isSticky` because the selected account might stop
+    // being sticky when the user reads its messages,
+    // and it would get out of view, so we'd want to get it back in view.
+    //
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSelected, window.__screen])
+  }, [isSelected, isSticky, window.__screen])
 
   const rovingTabindex = useRovingTabindex(ref)
   // TODO `rovingTabindex.setAsActiveElement()` when the active account
@@ -237,6 +244,7 @@ export default function AccountItem({
       className={classNames(styles.account, rovingTabindex.className, {
         [styles.active]: isSelected,
         [styles['context-menu-active']]: isContextMenuActive,
+        [styles.isSticky]: isSticky,
       })}
       onClick={() => onSelectAccount(accountId)}
       onContextMenu={onContextMenu}

packages/frontend/src/components/AccountListSidebar/styles.module.scss

@@ -70,10 +70,27 @@
     text-align: start; // To align the "active" indicator
 
     height: var(--als-avatar-size);
+
     margin-bottom: var(--als-avatar-margin);
     margin-top: var(--als-avatar-margin);
-    scroll-margin-bottom: var(--als-avatar-margin);
-    scroll-margin-top: var(--als-avatar-margin);
+    // Adding extra `var(--als-avatar-size) + 2 * var(--als-avatar-margin)`
+    // to the margins so that
+    // if there is another `.isSticky` account, then that account does not
+    // cover the account that we want to scroll into view.
+    // And another extra `2 * var(--als-avatar-margin)` so that it's obvious that
+    // the other sticky account really is sticky, to make it obviously overlay
+    // on top of another account, and be positioned perfectly on top of it.
+    //
+    // TODO improvement: perhaps it makes sense to keep these at just
+    // `var(--als-avatar-margin)` in case there is no sticky account above.
+    // This should be achievable with CSS.
+    scroll-margin-bottom: calc(
+      5 * var(--als-avatar-margin) + var(--als-avatar-size)
+    );
+    scroll-margin-top: calc(
+      5 * var(--als-avatar-margin) + var(--als-avatar-size)
+    );
+
     position: relative;
     z-index: $z-index-new-local-scope;
 
@@ -90,6 +107,21 @@
       }
     }
 
+    &.isSticky {
+      position: sticky;
+      bottom: var(--als-avatar-margin);
+      top: var(--als-avatar-margin);
+      // Only needed when this account is scrolled _above_ the visible region.
+      z-index: map-get($z-index, account-list-sidebar-scope-sticky-account);
+
+      .avatar {
+        opacity: 1;
+        .content {
+          box-shadow: 0px 0px 4px 2px #00000040;
+        }
+      }
+    }
+
     &.active,
     &:hover,
     &.context-menu-active {