Account Sidebar (#3621)

* starting commit

* fix avatars

* fixup after rebase

* fix avatar spacing and autohide scrollbar

* indication for active account

* fix fmt and lint

* fix chat from last account is still selected while switching

* do not change width for account sidebar

* style add button

* unread badge and symbol if bg-sync is disabled
and update inline todo

* clear settings-store and stop io if applicable when switching accounts

* remove changing border radius

* change add btn style and account sidebar should not be themed

* - fix update when deleting account with the back button of welcome screen
- remove switch account from sidebar
- remove effectful backend functions logut and unSelectAccount

* change badge counter to display combined count
(when syncAll is enabled)

* remove `hideAccountsSidebar` option and move `syncAllAccounts` into advanced settings

* completly hide / remove scrollbar

fix lint

* small style adjustment

* webxdc apps stay open now (unless sync all is disabled)

* update badge when chanching syncAll

* make sure current account still works when diabling sync all

* add context menu

* fix gallery

* fix map

* Fix chat menu (3dot)

* rm todo comment section from account list sidebar

* fix clear button of searchbar

* reactor to component styling and multiple files

* fix lint

* camel case class names

* fix stuff

* Add hover tooltip

(id and size where taken from old account switcher screen, when hovering over the email address)

* add `unconfigured_account_hint` to hover info

* Fix layering to prevent switcher to be over dialogs

* fix: account badges (both unread and disabled sync) are over the dialog backdrops

* start with account deletion (ui feedback doesn't work yet)

* make delete account return to list

* make the dialog text a bit prettier

* show backdrop for the special dialogs too, so its clearer that sidebar is diabled.

though we might need to darken it more as it is barely noticible, darkening the backdrop would also help with #3646

* darken backdrop

* commit a change that I forgot to commit

* show account as card in deletion dialog

* make unselected accounts slightly dimmed down

* make the active indicator larger

* fix top padding

* fix fmt

* fix update displayname and avatar when it changes

* add no account selected screen and remove account selector screen

* fix login with email address

* make sure "no account" does not flicker up on startup

* go back to last selected account when going back from welcome screen in new account

* update account sidebar on sucessfull login and backup export

* add remaining translation strings and change sync all switch label.

* more translation strings

* update changelog

* fix fmt

* fix that hovering items close to the bottom made a scrollbar appear

* remove sidebar menu

* Account Sidebar: No window titlebar on MacOS (#3670)

* draft: idea for macOS with custom titlebar
(other apps like discord do this, looks quite nice but probably has some risks of new bugs, so I'm sceptical wether it is a good idea to do it now)

* change padding to new width on non macOS

* background for macOS traffic lights

* fix fmt

* fix setting a quote moving around ui
(make the sidebar fixed size)

* apply overwrites from global into the original files

* use default export for account deletion screen

* move other components to default export

* pretify order of import statements

* remove unessesary attribute

* lowerCamelCase classnames

* remove unused code

* move background class out of noAccountSelectedScreen class

* move AccountListSidebar out of screens folder

* update UI if display name changed by a different device
fix #3624

* update comment

* fix fmt

* refactor connectivity of hover info to not produce a react unmounted error

* hover info should not reload account, the account list of the parent (the sidebar) should always be up to date

* refactor account size to prevent unmounted update error in AccountHoverInfo

* add settings button

* remove account id from hover info

* fix fmt

* remove unessesary log statement

* improve about dialog (#3677)

* add more versions to about dialog and update order of existing information.

* remove unessesary log statement

* fix all media view bugs:
- fix 3dot menu hidden state updating
- make all media heding non interactible, important for macOS so you can use that area to drag the window around

---------

Co-authored-by: adz <x12@adz.garden>

CHANGELOG.md

@@ -11,6 +11,8 @@
 - Message reactions with emojis #2964
 - Show info dialog on tap for invalid unencrypted mails #3652
 - Add QR scan button next to search input on main screen #3665
+- Add Account Switcher Sidebar #3621
+- Add new account deletion screen #3621
 
 ### Changed
 - Update `deltachat-node` and `deltachat/jsonrpc-client` to `v1.134.0`
@@ -41,6 +43,10 @@
 - Remove unessesary z-index css properties and reorganize the remaining ones #3661
 - Require setting display name when creating profile after scanning invite code #3663
 - Improve design of profile image selector component #3667
+- badge count is now across all active accounts #3621
+- "sync all accounts" moved to settings under advanced -> experimental #3621
+- webxdc stay open when switching accounts (when you have sync all enabled, which is the default) #3621
+- Add more versions to about dialog and update the order of information #3677
 
 ### Fixed
 - Silently fail when notifications are not supported by OS #3613
@@ -55,6 +61,8 @@
 
 ### Removed
 - Remove qr icon in sidebar #3666
+- Remove old Account switcher screen #3621
+- Remove sidebar menu #3621
 
 <a id="1_42_2"></a>
 

_locales/_untranslated_en.json

@@ -2,5 +2,14 @@
   "broadcast_list_warning": {
     "comment": "this won't be translated, as our goal is to have encrypted broadcast lists - simon & bjoern as of oct 2023",
     "message": "Broadcast Lists are always unencrypted because they use blind copy (BCC)"
+  },
+  "no_account_selected": {
+    "message": "No Account is selected"
+  },
+  "sync_all_accounts": {
+    "message": "Sync All Accounts in Background"
+  },
+  "background_sync_disabled_explaination": {
+    "message": "Background Sync Disabled, Account is only synced when selected"
   }
 }

bin/build-frontend-ts.mjs

@@ -29,6 +29,7 @@ function config(options) {
       'process.env.NODE_ENV': isProduction ? '"production"' : '"development"',
     },
     plugins,
+    external: ["*.jpg", "*.webp", "*.svg"]
   }
 }
 

docs/THEMES.md

@@ -5,6 +5,10 @@ Themes are CSS files that act as themes by containing many different css variabl
 Most of these variables are small variations of the base colors of the theme so using scss allows us to generate them from the base colors to save us work.
 But of course we can overwrite those variables manually too, we can even overwrite css classes if our theme needs it.
 
+## Notes
+
+- The account sidebar should not be themed
+
 ## Theme codes
 
 There are two types of themes `dc`(built-in) and `custom` themes.

scss/_connectivity-toast.scss

@@ -1,7 +1,7 @@
 .ConnectivityToast {
   position: fixed;
   bottom: 15px;
-  left: 8px;
+  margin-left: 8px;
   text-align: center;
   background-color: var(--contextMenuBg);
   border: 1px solid var(--contextMenuBorder);

scss/_global.scss

@@ -206,3 +206,11 @@ kbd,
 samp {
   font-family: monospace, $emojifonts;
 }
+
+.main-container {
+  display: flex;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}

scss/_variables.scss

@@ -34,14 +34,16 @@ $z-index: (
   chatlist-scope-floating-action-button: 1,
   jump-down-button-scope-counter: 1,
   import-qr-code-dialog-scope-scan-qr-description: 1,
+  account-list-sidebar-scope-account-badge: 1,
 
   // Global Scope
   // ============
   emoji-sticker-picker: 10,
 
-  sidebar: 100,
   user-feedback: 100,
 
+  account-hover-info: 200,
+
   // toast for errors and success messages
   absolute-positioning-helper: 1000,
   context-menu-layer: 9999

scss/chat/_chat-list-item.scss

@@ -346,3 +346,8 @@
     background-color: white;
   }
 }
+
+#new-chat-button {
+  right: 15px;
+  position: absolute;
+}

scss/chat/_chat-list.scss

@@ -9,7 +9,6 @@
     0 0 0 rgba(16, 22, 26, 0),
     0 1px 1px rgba(16, 22, 26, 0.2);
   user-select: none;
-  margin-top: $nav-bar-height;
 
   .search-result-divider {
     line-height: 43px;

scss/gallery/_media.scss

@@ -3,9 +3,7 @@ $tab-height: 46px;
 .media-view {
   width: calc(100% - var(--chat-list-width, 30%));
   background-color: var(--galleryBg);
-  float: right;
   padding-left: 10px;
-  margin-top: $nav-bar-height;
   max-height: calc(100vh - 50px);
   overflow: hidden;
 

scss/login/_login.scss

@@ -71,6 +71,7 @@
 }
 
 .login-screen {
+  flex-grow: 1;
   li.login-item {
     display: flex;
     justify-content: space-between;
@@ -266,34 +267,3 @@ div.delta-form-group {
     margin-top: 40px;
   }
 }
-
-.accounts {
-  .contact-list-item {
-    .contact {
-      width: 100%;
-      overflow: hidden;
-
-      .email {
-        display: inline-block;
-        width: 100%;
-      }
-    }
-
-    .unread-badge-container {
-      align-self: center;
-      margin-right: 9px;
-
-      .fresh-message-counter {
-        color: var(--unreadCountLabel);
-        background-color: var(--unreadCountBg);
-        text-align: center;
-        font-size: 9pt;
-        height: 20px;
-        padding: 0 5pt;
-        line-height: 20px;
-        border-radius: 10px;
-        font-weight: bold;
-      }
-    }
-  }
-}

scss/main_screen/_main_screen.scss

@@ -1,4 +1,8 @@
 .main-screen {
+  flex-grow: 1;
+  position: relative;
+  overflow: hidden;
+
   .navbar-chat-name {
     font-size: medium;
     font-weight: bold;

scss/main_screen/_navbar_wrapper.scss

@@ -1,4 +1,9 @@
 .navbar-wrapper {
+  // so it can be used to drag the window around
+  -webkit-app-region: drag;
+
+  position: relative;
+
   .icon-rotated > .bp4-icon > svg:not([fill]) {
     transform: rotate(90deg);
   }
@@ -66,3 +71,9 @@
     border-radius: 100%;
   }
 }
+
+.no-drag,
+#hamburger-menu-button,
+#chat-list-search {
+  -webkit-app-region: no-drag;
+}

scss/manifest.scss

@@ -81,8 +81,5 @@
 // Icons
 @import '_icons';
 
-@import '_sidebar';
-@import '_account-list';
-
 // Re-usable generic UI components
 @import 'components/_radios';

scss/map/_map.scss

@@ -3,12 +3,11 @@
 $color-map-overlay-bg: var(--mapOverlayBg);
 
 .map-wrapper {
-  margin-left: var(--chat-list-width, 30vw);
-  position: absolute;
+  max-height: calc(100vh - 50px);
+  overflow: hidden;
 }
 
 #map {
-  margin-top: 50px;
   height: calc(100vh - 50px);
   width: calc(100vw - var(--chat-list-width, 30vw));
 }