Reduce use of isMobile()

dev/App/User.js

@@ -183,7 +183,7 @@ export class AppUser extends AbstractApp {
 		super.bootstart();
 
 		addEventListener('beforeunload', event => {
-			if (arePopupsVisible() || (ThemeStore.isMobile() && MessageUserStore.message())) {
+			if (arePopupsVisible() || (!SettingsUserStore.layout() && MessageUserStore.message())) {
 				event.preventDefault();
 				return event.returnValue = i18n('POPUPS_ASK/EXIT_ARE_YOU_SURE');
 			}

dev/Knoin/Knoin.js

@@ -4,6 +4,9 @@ import { doc, $htmlCL, elementById, createElement, fireEvent } from 'Common/Glob
 import { forEachObjectEntry } from 'Common/Utils';
 import { i18nToNodes } from 'Common/Translator';
 
+import { leftPanelDisabled } from 'Common/Globals';
+import { ThemeStore } from 'Stores/Theme';
+
 let
 	currentScreen = null,
 	defaultScreenName = '';
@@ -151,6 +154,7 @@ const
 			vm.onHide?.();
 			destroy && vm.viewModelDom.remove();
 		});
+		ThemeStore.isMobile() && leftPanelDisabled(true);
 	},
 
 	/**

dev/Screen/User/MailBox.js

@@ -1,5 +1,5 @@
 import { Scope } from 'Common/Enums';
-import { doc, createElement, leftPanelDisabled, Settings } from 'Common/Globals';
+import { doc, createElement, Settings } from 'Common/Globals';
 import { pString, pInt } from 'Common/Utils';
 import { moveAction } from 'Common/UtilsUser';
 import { getFolderFromCacheList, getFolderFullName, getFolderInboxName } from 'Common/Cache';
@@ -9,7 +9,6 @@ import { AppUserStore } from 'Stores/User/App';
 import { AccountUserStore } from 'Stores/User/Account';
 import { FolderUserStore } from 'Stores/User/Folder';
 import { MessagelistUserStore } from 'Stores/User/Messagelist';
-import { ThemeStore } from 'Stores/Theme';
 
 import { SystemDropDownUserView } from 'View/User/SystemDropDown';
 import { MailFolderList } from 'View/User/MailBox/FolderList';
@@ -57,11 +56,8 @@ export class MailBoxUserScreen extends AbstractScreen {
 	 */
 	onShow() {
 		this.updateWindowTitle();
-
 		AppUserStore.focusedState('none');
 		AppUserStore.focusedState(Scope.MessageList);
-
-		ThemeStore.isMobile() && leftPanelDisabled(true);
 	}
 
 	/**

dev/Screen/User/Settings.js

@@ -1,11 +1,10 @@
 import { Scope } from 'Common/Enums';
-import { keyScope, leftPanelDisabled, SettingsCapa } from 'Common/Globals';
+import { keyScope, SettingsCapa } from 'Common/Globals';
 import { runSettingsViewModelHooks } from 'Common/Plugins';
 import { initOnStartOrLangChange, i18n } from 'Common/Translator';
 
 import { AppUserStore } from 'Stores/User/App';
 import { AccountUserStore } from 'Stores/User/Account';
-import { ThemeStore } from 'Stores/Theme';
 
 import { AbstractSettingsScreen, settingsAddViewModel } from 'Screen/AbstractSettings';
 
@@ -67,7 +66,6 @@ export class SettingsUserScreen extends AbstractSettingsScreen {
 	onShow() {
 		this.setSettingsTitle();
 		keyScope(Scope.Settings);
-		ThemeStore.isMobile() && leftPanelDisabled(true);
 	}
 
 	setSettingsTitle() {

dev/Styles/User/Layout.less

@@ -170,7 +170,7 @@ html.rl-left-panel-disabled {
 		left: 0;
 		top: 0;
 		bottom: 0;
-		width: 155px;
+		width: 50vw;
 		z-index: 3;
 	}
 	.rl-left-panel-disabled #rl-left {

dev/Styles/User/MessageList.less

@@ -367,6 +367,19 @@ html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
 	}
 }
 
+@media screen and (max-width: @maxMobileWidth) {
+	#V-MailMessageList .btn-toolbar:not(.hasChecked) .onCheckedShow {
+		display: none;
+	}
+	#V-MailMessageList .hasChecked {
+		.buttonCompose,
+		.onCheckedHide,
+		.sortFolder {
+			display: none;
+		}
+	}
+}
+
 @media screen and (min-width: @maxMobileWidth + 1px) {
 	.messageList {
 		.listDragOver {

dev/View/User/MailBox/MessageList.js

@@ -146,10 +146,6 @@ export class MailMessageList extends AbstractViewRight {
 				return c && MessagelistUserStore().length > c;
 			},
 
-			mobileCheckedStateShow: () => ThemeStore.isMobile() ? MessagelistUserStore.hasChecked() : 1,
-
-			mobileCheckedStateHide: () => ThemeStore.isMobile() ? !MessagelistUserStore.hasChecked() : 1,
-
 			listGrouped: () => {
 				let uid = MessagelistUserStore.threadUid(),
 					sort = FolderUserStore.sortMode() || 'DATE';
@@ -410,7 +406,7 @@ export class MailMessageList extends AbstractViewRight {
 	}
 
 	moveCommand(vm, event) {
-		if (this.mobileCheckedStateShow()) {
+		if (MessagelistUserStore.hasChecked()) {
 			if (vm && event?.preventDefault) {
 				stopEvent(event);
 			}

dev/View/User/MailBox/MessageView.js

@@ -280,8 +280,6 @@ export class MailMessageView extends AbstractViewRight {
 	onBuild(dom) {
 		const eqs = (ev, s) => ev.target.closestWithin(s, dom);
 		dom.addEventListener('click', event => {
-			ThemeStore.isMobile() && leftPanelDisabled(true);
-
 			let el = eqs(event, 'a');
 			if (el && 0 === event.button && mailToHelper(el.href)) {
 				stopEvent(event);

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -1,16 +1,16 @@
-<div class="btn-toolbar">
+<div class="btn-toolbar" data-bind="css: {'hasChecked':checkAll}">
 	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
-	<a class="btn buttonCompose" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}, visible: mobileCheckedStateHide()" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
+	<a class="btn buttonCompose" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
 		<i class="icon-paper-plane"></i>
 	</a>
-	<a class="btn" data-bind="click: reload, visible: mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
+	<a class="btn onCheckedHide" data-bind="click: reload" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
 		<i class="icon-spinner not-animated"></i>
 	</a>
-	<a href="#" tabindex="-1" class="btn" data-bind="visible: mobileCheckedStateShow(), command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
+	<a href="#" tabindex="-1" class="btn onCheckedShow" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
 		<i class="icon-copy visible-on-ctrl-btn"></i>
 		<i class="fontastic hidden-on-ctrl-btn">📁</i>
 	</a>
-	<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
+	<div class="btn-group onCheckedShow">
 		<a class="btn fontastic" data-bind="visible: archiveAllowed, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
 		<a class="btn fontastic" data-bind="visible: canMarkAsSpam, command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>
 		<a class="btn" data-bind="visible: isSpamFolder, command: notSpamCommand" data-i18n="[title]GLOBAL/NOT_SPAM">
@@ -68,7 +68,7 @@
 			</li>
 		</menu>
 	</div>
-	<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported() && mobileCheckedStateHide(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
+	<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
 		<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]MESSAGE_LIST/SORT" data-bind="text: sortText">⬇</a>
 		<menu class="dropdown-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
 			<li role="presentation" data-sort="" data-bind="click: changeSort">