From 7b29dca2619f7164fa4e0a95a253822f16a126c1 Mon Sep 17 00:00:00 2001
From: codiflow <43847817+codiflow@users.noreply.github.com>
Date: Thu, 12 Jan 2023 13:03:03 +0100
Subject: [PATCH 1/2] Adding a button to clear folder search input field

---
 dev/Styles/User/FolderList.less                            | 2 +-
 dev/Styles/User/MessageList.less                           | 7 +++++++
 dev/View/User/MailBox/MessageList.js                       | 4 ++++
 .../v/0.0.0/app/templates/Views/User/MailFolderList.html   | 3 ++-
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/dev/Styles/User/FolderList.less b/dev/Styles/User/FolderList.less
index 346cd8039..e229cf0dd 100644
--- a/dev/Styles/User/FolderList.less
+++ b/dev/Styles/User/FolderList.less
@@ -15,7 +15,7 @@
 	}
 
 	input {
-		width: calc(100% - 8px);
+		width: calc(100% - 37px);
 		margin-left: 4px;
 	}
 
diff --git a/dev/Styles/User/MessageList.less b/dev/Styles/User/MessageList.less
index be28b04c6..df187721c 100644
--- a/dev/Styles/User/MessageList.less
+++ b/dev/Styles/User/MessageList.less
@@ -79,6 +79,13 @@ html.rl-no-preview-pane {
 		padding-right: 8px;
 	}
 
+	.btn.buttonClearFolderSearchInput {
+		font-size: 14px;
+		padding-left: 8px;
+		padding-right: 8px;
+		margin-bottom: 4px;
+	}
+
 	.second-toolbar {
 		display: flex;
 		flex-shrink: 0;
diff --git a/dev/View/User/MailBox/MessageList.js b/dev/View/User/MailBox/MessageList.js
index 104876975..30e5b29eb 100644
--- a/dev/View/User/MailBox/MessageList.js
+++ b/dev/View/User/MailBox/MessageList.js
@@ -818,6 +818,10 @@ export class MailMessageList extends AbstractViewRight {
 		showScreenPopup(AdvancedSearchPopupView, [MessagelistUserStore.mainSearch()]);
 	}
 
+	clearFolderSearchClick() {
+		document.getElementById("folderSearchInput").value = "";
+	}
+
 	groupSearch(group) {
 		group.search && MessagelistUserStore.mainSearch(group.search);
 	}
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
index aa4958b4c..f657142e0 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
@@ -20,7 +20,8 @@
 			</li>
 		</ul>
 		<hr>
-		<input type="search" data-bind="textInput: foldersFilter, visible: foldersFilterVisible" data-i18n="[placeholder]GLOBAL/SEARCH">
+		<input type="search" id="folderSearchInput" data-bind="textInput: foldersFilter, visible: foldersFilterVisible" data-i18n="[placeholder]GLOBAL/SEARCH">
+		<a data-bind="click: clearFolderSearchClick" class="btn buttonClearFolderSearchInput">✕</a>
 		<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
 		<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>
 	</div>

From bd35a73f5f31d7f998810db67b95403a7ea41ed7 Mon Sep 17 00:00:00 2001
From: codiflow <43847817+codiflow@users.noreply.github.com>
Date: Thu, 12 Jan 2023 15:52:54 +0100
Subject: [PATCH 2/2] Added search input wrapper div

---
 .../v/0.0.0/app/templates/Views/User/MailFolderList.html    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
index f657142e0..5dc009132 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailFolderList.html
@@ -20,8 +20,10 @@
 			</li>
 		</ul>
 		<hr>
-		<input type="search" id="folderSearchInput" data-bind="textInput: foldersFilter, visible: foldersFilterVisible" data-i18n="[placeholder]GLOBAL/SEARCH">
-		<a data-bind="click: clearFolderSearchClick" class="btn buttonClearFolderSearchInput">✕</a>
+		<div class="search-input-wrp">
+			<input type="search" id="folderSearchInput" data-bind="textInput: foldersFilter, visible: foldersFilterVisible" data-i18n="[placeholder]GLOBAL/SEARCH">
+			<a data-bind="click: clearFolderSearchClick" class="btn buttonClearFolderSearchInput">✕</a>
+		</div>
 		<ul class="b-folders-user" data-bind="template: { name: 'MailFolderListItem', foreach: folderListVisible }"></ul>
 		<div class="move-action-content-wrapper" data-bind="visible: moveAction"></div>
 	</div>