Advanced/Basic search button as material icon on same row as search bar.

CHANGELOG.md

@@ -5,6 +5,7 @@
 - Moved Gallery view toggle button into header.
 - Removed css entries that are not needed anymore for Gallery View Toggle.
 - Change search box text when enabling advanced search.
+- Advanced/Basic search button as material icon on same row as search bar.
 
 ### Advanced Search Implementation
 

css/styles.css

@@ -1696,21 +1696,6 @@ body.dark-mode .folder-help-icon {
 
 }
 
-body.dark-mode #searchIcon {
-  background-color: #444;
-  border: 1px solid #555;
-  border-radius: 4px;
-  color: #fff;
-  padding: 4px 8px;
-}
-
-body.dark-mode #searchInput {
-  background-color: #333;
-  color: #e0e0e0;
-  border: 1px solid #555;
-}
-
-
 body.dark-mode .CodeMirror {
   background: #1e1e1e !important;
   color: #ffffff !important;
@@ -2128,3 +2113,57 @@ body.dark-mode .header-drop-zone.drag-active {
 body.dark-mode #fileSummary {
   color: white;
 }
+
+#searchIcon {
+  border-radius: 4px;
+  padding: 4px 8px;
+}
+
+body.dark-mode #searchIcon {
+  background-color: #444;
+  border: 1px solid #555;
+  color: #fff;
+}
+
+body.dark-mode #searchInput {
+  background-color: #333;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
+
+.btn-icon {
+  background: transparent;
+  border: none;
+  padding: 6px 8px;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s;
+}
+
+.btn-icon .material-icons,
+#searchIcon .material-icons {
+  font-size: 24px;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+  color: #333;
+}
+
+.btn-icon:hover,
+.btn-icon:focus {
+  background: rgba(0, 0, 0, 0.1);
+  outline: none;
+}
+
+body.dark-mode .btn-icon .material-icons,
+body.dark-mode #searchIcon .material-icons {
+  color: #fff;
+}
+
+body.dark-mode .btn-icon:hover,
+body.dark-mode .btn-icon:focus {
+  background: rgba(255, 255, 255, 0.1);
+}

js/domUtils.js

@@ -94,16 +94,24 @@ export function buildSearchAndPaginationControls({ currentPage, totalPages, sear
   const placeholderText = window.advancedSearchEnabled 
     ? t("search_placeholder_advanced")
     : t("search_placeholder");
-    
+
   return `
     <div class="row align-items-center mb-3">
       <div class="col-12 col-md-8 mb-2 mb-md-0">
         <div class="input-group">
+          <!-- Advanced Search Toggle Button -->
+          <div class="input-group-prepend">
+            <button id="advancedSearchToggle" class="btn btn-outline-secondary btn-icon" onclick="toggleAdvancedSearch()" title="${window.advancedSearchEnabled ? t("basic_search_tooltip") : t("advanced_search_tooltip")}">
+              <i class="material-icons">${window.advancedSearchEnabled ? "filter_alt_off" : "filter_alt"}</i>
+            </button>
+          </div>
+          <!-- Search Icon -->
           <div class="input-group-prepend">
             <span class="input-group-text" id="searchIcon">
               <i class="material-icons">search</i>
             </span>
           </div>
+          <!-- Search Input -->
           <input type="text" id="searchInput" class="form-control" placeholder="${placeholderText}" value="${safeSearchTerm}" aria-describedby="searchIcon">
         </div>
       </div>

js/fileListView.js

@@ -293,10 +293,8 @@ export function renderFileTable(folder, container) {
         totalPages,
         searchTerm: window.currentSearchTerm || ""
     });
-    const advancedToggleHTML = `<button id="advancedSearchToggle" class="btn btn-sm btn-outline-secondary" style="margin-left: 10px;" onclick="toggleAdvancedSearch()">
-  ${window.advancedSearchEnabled ? "Basic Search" : "Advanced Search"}
-</button>`;
-    const combinedTopHTML = topControlsHTML + advancedToggleHTML;
+
+    const combinedTopHTML = topControlsHTML;
     
     let headerHTML = buildFileTableHeader(sortOrder);
     const startIndex = (currentPage - 1) * itemsPerPageSetting;