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

Author: bajrangCoder

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

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