From 9ca191ea2f1001a79a85a70cd3dfb7c4b6ddd0fd Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Sun, 2 Aug 2026 13:57:28 +0530
Subject: [PATCH 1/2] fix(quick-tools): add visible close button to search when
 toggler is off

---
 src/components/quickTools/footer.js  |  1 +
 src/components/quickTools/style.scss | 11 +++++++++++
 src/handlers/quickTools.js           |  4 ++++
 3 files changed, 16 insertions(+)

diff --git a/src/components/quickTools/footer.js b/src/components/quickTools/footer.js
index f95eedd41..fcb133035 100644
--- a/src/components/quickTools/footer.js
+++ b/src/components/quickTools/footer.js
@@ -45,6 +45,7 @@ export const SearchRow1 = ({ inputRef }) => (
 		<RowItem id="search-prev" icon="arrow_back" action="search-prev" />
 		<RowItem id="search-next" icon="arrow_forward" action="search-next" />
 		<RowItem id="search-settings" icon="settings" action="search-settings" />
+		<RowItem id="close" icon="clearclose" action="toggle" />
 	</div>
 );
 
diff --git a/src/components/quickTools/style.scss b/src/components/quickTools/style.scss
index 1a28e83b2..e14616ae3 100644
--- a/src/components/quickTools/style.scss
+++ b/src/components/quickTools/style.scss
@@ -1,6 +1,17 @@
 @use '../../styles/mixins.scss';
 
 #quick-tools {
+  #search_row1 {
+    [data-id="close"] {
+      display: none;
+      flex: 0 0 40px;
+    }
+
+    &.inline-close [data-id="close"] {
+      display: inline-flex;
+    }
+  }
+
   .icon.click:not([disabled]) {
     @include mixins.active-icon;
     transition: all 0.3s ease-in-out;
diff --git a/src/handlers/quickTools.js b/src/handlers/quickTools.js
index f1cbf27fc..b03a6c828 100644
--- a/src/handlers/quickTools.js
+++ b/src/handlers/quickTools.js
@@ -438,6 +438,10 @@ function toggleSearch() {
 		activeSearchState = { className, content: $content, footerHeight };
 
 		$toggler.className = "floating icon clearclose";
+		$searchRow1.classList.toggle(
+			"inline-close",
+			!appSettings.value.floatingButton || !$toggler.isConnected,
+		);
 		$footer.content = [$searchRow1, $searchRow2];
 		clearSearchQuickToolsState($content);
 		setRefValue($searchInput, selectedText || "");

From 44e6a378f52f206b7c5dc8aef48aa00a4bd08705 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Sun, 2 Aug 2026 14:03:23 +0530
Subject: [PATCH 2/2] fix

---
 src/handlers/quickTools.js | 38 ++++++++++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/src/handlers/quickTools.js b/src/handlers/quickTools.js
index b03a6c828..aff8f9009 100644
--- a/src/handlers/quickTools.js
+++ b/src/handlers/quickTools.js
@@ -33,6 +33,8 @@ let input;
 /** @type {number} */
 let quickToolUsedTimeout = null;
 let activeSearchState = null;
+/** @type {MutationObserver | null} */
+let searchCloseVisibilityObserver = null;
 
 const state = {
 	shift: false,
@@ -438,10 +440,7 @@ function toggleSearch() {
 		activeSearchState = { className, content: $content, footerHeight };
 
 		$toggler.className = "floating icon clearclose";
-		$searchRow1.classList.toggle(
-			"inline-close",
-			!appSettings.value.floatingButton || !$toggler.isConnected,
-		);
+		startSearchCloseVisibilitySync();
 		$footer.content = [$searchRow1, $searchRow2];
 		clearSearchQuickToolsState($content);
 		setRefValue($searchInput, selectedText || "");
@@ -473,6 +472,7 @@ function toggleSearch() {
 					content: $content,
 					footerHeight,
 				};
+				stopSearchCloseVisibilitySync();
 				clearSearchQuickToolsState(restoreState.content);
 				removeSearch();
 				clearQuickToolsButtonFeedback(restoreState.content);
@@ -497,6 +497,36 @@ function toggleSearch() {
 	$searchInput.focus();
 }
 
+function startSearchCloseVisibilitySync() {
+	stopSearchCloseVisibilitySync();
+	syncSearchCloseVisibility();
+
+	const { $toggler } = quickTools;
+	searchCloseVisibilityObserver = new MutationObserver(
+		syncSearchCloseVisibility,
+	);
+	searchCloseVisibilityObserver.observe(root, { childList: true });
+	searchCloseVisibilityObserver.observe($toggler, {
+		attributes: true,
+		attributeFilter: ["class"],
+	});
+}
+
+function stopSearchCloseVisibilitySync() {
+	searchCloseVisibilityObserver?.disconnect();
+	searchCloseVisibilityObserver = null;
+	quickTools.$searchRow1.classList.remove("inline-close");
+}
+
+function syncSearchCloseVisibility() {
+	const { $searchRow1, $toggler } = quickTools;
+	const hasVisibleFloatingClose =
+		appSettings.value.floatingButton &&
+		$toggler.isConnected &&
+		!$toggler.classList.contains("hide");
+	$searchRow1.classList.toggle("inline-close", !hasVisibleFloatingClose);
+}
+
 function toggle() {
 	// if search is active, remove it
 	const searchBar = actionStack.get("search-bar");