From c0247ff2bd364fe77138765999713f65d3ac3f18 Mon Sep 17 00:00:00 2001
From: Sergey Mosin <sergey@srgdev.com>
Date: Fri, 1 Mar 2024 10:07:14 -0500
Subject: [PATCH 1/3] improve: fire the 'squire2-toolbar' event after more
 props are added

---
 plugins/compact-composer/js/CompactComposer.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/compact-composer/js/CompactComposer.js b/plugins/compact-composer/js/CompactComposer.js
index 503d00c9ef..668151336c 100644
--- a/plugins/compact-composer/js/CompactComposer.js
+++ b/plugins/compact-composer/js/CompactComposer.js
@@ -114,9 +114,6 @@
 
 			this.container = container;
 
-			toolbar.className = 'squire-toolbar btn-toolbar';
-			const actions = this.#makeActions(squire, toolbar);
-
 			plain.className = 'squire-plain';
 			wysiwyg.className = 'squire-wysiwyg';
 			wysiwyg.dir = 'auto';
@@ -126,6 +123,9 @@
 			this.wysiwyg = wysiwyg;
 			this.toolbar = toolbar;
 
+			toolbar.className = 'squire-toolbar btn-toolbar';
+			const actions = this.#makeActions(squire, toolbar);
+
 			this.squire.addEventListener('willPaste', pasteSanitizer);
 			this.squire.addEventListener('pasteImage', (e) => {
 				pasteImageHandler(e, squire);

From 6169f6083f15d1e1b09d15860ed90df4091dd9e8 Mon Sep 17 00:00:00 2001
From: Sergey Mosin <sergey@srgdev.com>
Date: Fri, 1 Mar 2024 10:12:24 -0500
Subject: [PATCH 2/3] improve: add dark theme support and use 'button' element
 as menu trigger for consistent styling

---
 plugins/compact-composer/css/composer.css     |  1 +
 .../compact-composer/js/CompactComposer.js    |  6 +--
 .../templates/PopupsCompose.html              | 43 ++-----------------
 3 files changed, 7 insertions(+), 43 deletions(-)

diff --git a/plugins/compact-composer/css/composer.css b/plugins/compact-composer/css/composer.css
index 3b7cb6f55a..143a3e1cf7 100644
--- a/plugins/compact-composer/css/composer.css
+++ b/plugins/compact-composer/css/composer.css
@@ -39,6 +39,7 @@
 
 .squire-toolbar-svg-icon {
     display: block;
+    fill: var(--dialog-clr, #333);
 }
 
 .squire2-mode-wysiwyg .squire-plain,
diff --git a/plugins/compact-composer/js/CompactComposer.js b/plugins/compact-composer/js/CompactComposer.js
index 668151336c..4a95a6c130 100644
--- a/plugins/compact-composer/js/CompactComposer.js
+++ b/plugins/compact-composer/js/CompactComposer.js
@@ -663,13 +663,13 @@
 						return indicators;
 					case 'menu':
 					case 'menu_more':
-						const menuWrap = document.createElement('div');
+						const menuWrap = createElement('div');
 						menuWrap.className = 'btn-group dropdown squire-toolbar-menu-wrap';
 						menuWrap.title = item.label;
 						if (!item.showInPlainMode) {
 							menuWrap.className += ' squire-html-mode-item';
 						}
-						const menuBtn = document.createElement('a');
+						const menuBtn = createElement('button');
 						menuBtn.className = 'btn dropdown-toggle';
 						if (item.icon !== '') {
 							menuBtn.innerHTML = item.icon;
@@ -680,7 +680,7 @@
 						}
 						menuWrap.appendChild(menuBtn);
 
-						const menu = document.createElement('ul');
+						const menu = createElement('ul');
 						menu.className = 'dropdown-menu squire-toolbar-menu';
 						if (item.rightEdge) {
 							menu.className += ' right-edge';
diff --git a/plugins/compact-composer/templates/PopupsCompose.html b/plugins/compact-composer/templates/PopupsCompose.html
index ad22c40064..7c05c875fb 100644
--- a/plugins/compact-composer/templates/PopupsCompose.html
+++ b/plugins/compact-composer/templates/PopupsCompose.html
@@ -145,10 +145,10 @@
 				</a>
 			</div>
 			<div class="btn-group">
-				<a class="btn fontastic" style="padding-left: 10px; padding-right: 10px;" id="composeUploadButton"
-					 data-bind="visible: addAttachmentEnabled()" data-i18n="[title]COMPOSE/ATTACH_FILES">
+				<button class="btn fontastic" id="composeUploadButton"
+								data-bind="visible: addAttachmentEnabled()" data-i18n="[title]COMPOSE/ATTACH_FILES">
 					⁺📎
-				</a>
+				</button>
 			</div>
 		</div>
 	</div>
@@ -167,41 +167,6 @@
 		<div class="tab-content" role="tabpanel" aria-hidden="false" style="grid-column-end:3">
 			<div class="textAreaParent" data-bind="initDom: editorArea, attr:{spellcheck:allowSpellcheck()?'true':'false'}"></div>
 		</div>
-
-		<!--		<input type="radio" name="tabs" value="attachments" id="tab-attachments" data-bind="checked: viewArea">-->
-		<!--		<label for="tab-attachments"-->
-		<!--			role="tab"-->
-		<!--			aria-selected="false"-->
-		<!--			aria-controls="panel2"-->
-		<!--			tabindex="0"-->
-		<!--			data-bind="-->
-		<!--				css: { 'btn-danger': attachmentsInErrorCount() },-->
-		<!--				tooltipErrorTip: attachmentsErrorTooltip">-->
-		<!--			<b data-bind="visible: attachmentsCount, text: attachmentsCount"></b>-->
-		<!--			<i data-bind="css: { 'icon-attachment': !attachmentsInProcessCount(), 'icon-spinner': attachmentsInProcessCount()}"></i>-->
-		<!--			<span data-i18n="GLOBAL/ATTACHMENTS"></span>-->
-		<!--		</label>-->
-		<!--		<div class="tab-content attachmentAreaParent" role="tabpanel" aria-hidden="true" style="grid-column-end:4">-->
-		<!--			<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled() && dragAndDropVisible(), css: {dragAndDropOver: dragAndDropOver}"-->
-		<!--				data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>-->
-		<!--			<ul class="attachmentList" data-bind="foreach: attachments">-->
-		<!--				<li class="attachmentItem" data-bind="attr: { title: title }, css: { waiting: waiting, error: '' !== error() }">-->
-		<!--					<div class="attachmentIcon">-->
-		<!--						<i class="iconMain" data-bind="css: iconClass, visible: !uploading() || 0 === progress()"></i>-->
-		<!--						<div class="iconProgress" data-bind="attr: { style: progressStyle }, visible: uploading"></div>-->
-		<!--						<div class="iconBG" data-bind="text: progressText, visible: uploading"></div>-->
-		<!--					</div>-->
-		<!--					<div class="attachmentNameParent">-->
-		<!--						<a href="#" class="close pull-right" style="margin-top:-4px;" data-bind="click: cancel">×</a>-->
-		<!--						<div class="attachmentName" data-bind="text: fileName"></div>-->
-		<!--						<span class="attachmentSize" data-bind="text: friendlySize"></span>-->
-		<!--					</div>-->
-		<!--				</li>-->
-		<!--			</ul>-->
-		<!--			<div class="no-attachments-desc" data-bind="visible: 0 === attachments().length"-->
-		<!--				data-i18n="COMPOSE/NO_ATTACHMENTS_HERE_DESC"></div>-->
-		<!--		</div>-->
-
 		<input type="radio" name="tabs" value="mailvelope" id="tab-mailvelope" data-bind="checked: viewArea">
 		<label for="tab-mailvelope"
 					 role="tab"
@@ -219,8 +184,6 @@
 <div class="attachmentAreaParent compact">
 	<div class="b-attachment-place" data-bind="visible: addAttachmentEnabled(), css: {dragAndDropOver: dragAndDropVisible}"
 			 data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>
-	<!--	<div class="b-attachment-place dragAndDropOver"-->
-	<!--			 data-i18n="COMPOSE/ATTACH_DROP_FILES_DESC"></div>-->
 	<ul class="attachmentList" data-bind="foreach: attachments">
 		<li class="attachmentItem" data-bind="attr: { title: title }, css: { waiting: waiting, error: '' !== error() }">
 			<div class="attachmentIcon">

From d6acf55ab27f1899ddf220cf8d5526d387a0722f Mon Sep 17 00:00:00 2001
From: Sergey Mosin <sergey@srgdev.com>
Date: Fri, 1 Mar 2024 10:20:45 -0500
Subject: [PATCH 3/3] fix: use compact template in non-destructive way (do not
 replace the PopupsCompose template if a different wysiwyg is used)

---
 plugins/compact-composer/index.php            |  4 +-
 .../compact-composer/js/CompactComposer.js    | 53 +++++++++++++------
 ...Compose.html => PopupsCompactCompose.html} |  0
 3 files changed, 40 insertions(+), 17 deletions(-)
 rename plugins/compact-composer/templates/{PopupsCompose.html => PopupsCompactCompose.html} (100%)

diff --git a/plugins/compact-composer/index.php b/plugins/compact-composer/index.php
index b165bddaf8..c04a4e7322 100644
--- a/plugins/compact-composer/index.php
+++ b/plugins/compact-composer/index.php
@@ -6,7 +6,7 @@ class CompactComposerPlugin extends \RainLoop\Plugins\AbstractPlugin
 		NAME = 'Compact Composer',
 		AUTHOR = 'Sergey Mosin',
 		URL = 'https://github.com/the-djmaze/snappymail/pull/1466',
-		VERSION = '1.0.0',
+		VERSION = '1.0.1',
 		RELEASE = '2024-02-23',
 		REQUIRED = '2.34.0',
 		LICENSE = 'AGPL v3',
@@ -14,7 +14,7 @@ class CompactComposerPlugin extends \RainLoop\Plugins\AbstractPlugin
 
 	public function Init(): void
 	{
-		$this->addTemplate('templates/PopupsCompose.html');
+		$this->addTemplate('templates/PopupsCompactCompose.html');
 		$this->addCss('css/composer.css');
 		$this->addJs('js/squire-raw.js');
 		$this->addJs('js/parsel.js');
diff --git a/plugins/compact-composer/js/CompactComposer.js b/plugins/compact-composer/js/CompactComposer.js
index 4a95a6c130..92451a9bf4 100644
--- a/plugins/compact-composer/js/CompactComposer.js
+++ b/plugins/compact-composer/js/CompactComposer.js
@@ -1,16 +1,47 @@
 /* eslint max-len: 0 */
 (win => {
 
-	addEventListener('rl-view-model.create', e => {
-		if (e.detail.viewModelTemplateID === 'PopupsCompose') {
-			// There is a better way to do this probably,
-			// but we need this for drag and drop to work
-			e.detail.attachmentsArea = e.detail.bodyArea;
-		}
+	const rl = win.rl;
+
+	if (!rl) {
+		return;
+	}
+
+	rl.registerWYSIWYG('CompactComposer', (owner, container, onReady) => {
+		const editor = new CompactComposer(container);
+		onReady(editor);
 	});
 
 	const doc = win.document;
-	const rl = win.rl;
+
+	// If a user (or admin) selected the CompactComposer we need to
+	// replace PopupsCompose template with PopupsCompactCompose template.
+	// --
+	// This might break some plugins if they query/change PopupsCompose template
+	// before this code is called. They should instead listen for
+	// 'rl-view-model.create' to work properly.
+	if (rl.settings.get('editorWysiwyg') === 'CompactComposer') {
+		const compactTemplate = doc.getElementById('PopupsCompactCompose');
+		if (!compactTemplate) {
+			console.error('CompactComposer: PopupsCompactCompose template not found');
+			return;
+		}
+		const originalTemplate = doc.getElementById('PopupsCompose');
+		if (originalTemplate) {
+			originalTemplate.id = 'PopupsCompose_replaced';
+		} else {
+			console.warn('CompactComposer: PopupsCompose template not found');
+		}
+		compactTemplate.id = 'PopupsCompose';
+
+		addEventListener('rl-view-model.create', e => {
+			if (e.detail.viewModelTemplateID === 'PopupsCompose') {
+				// There is a better way to do this probably,
+				// but we need this for drag and drop to work
+				e.detail.attachmentsArea = e.detail.bodyArea;
+			}
+		});
+	}
 
 	const
 		removeElements = 'HEAD,LINK,META,NOSCRIPT,SCRIPT,TEMPLATE,TITLE',
@@ -956,12 +987,4 @@
 			}
 		}
 	}
-
-	if (rl) {
-		rl.registerWYSIWYG('CompactComposer', (owner, container, onReady) => {
-			const editor = new CompactComposer(container);
-			onReady(editor);
-		});
-	}
-
 })(window);
diff --git a/plugins/compact-composer/templates/PopupsCompose.html b/plugins/compact-composer/templates/PopupsCompactCompose.html
similarity index 100%
rename from plugins/compact-composer/templates/PopupsCompose.html
rename to plugins/compact-composer/templates/PopupsCompactCompose.html