fix(quick-tools): add visible close button to search when toggler is off

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>
 );
 

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;

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,6 +440,7 @@ function toggleSearch() {
 		activeSearchState = { className, content: $content, footerHeight };
 
 		$toggler.className = "floating icon clearclose";
+		startSearchCloseVisibilitySync();
 		$footer.content = [$searchRow1, $searchRow2];
 		clearSearchQuickToolsState($content);
 		setRefValue($searchInput, selectedText || "");
@@ -469,6 +472,7 @@ function toggleSearch() {
 					content: $content,
 					footerHeight,
 				};
+				stopSearchCloseVisibilitySync();
 				clearSearchQuickToolsState(restoreState.content);
 				removeSearch();
 				clearQuickToolsButtonFeedback(restoreState.content);
@@ -493,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");