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

@@ -99,11 +99,19 @@ export function buildSearchAndPaginationControls({ currentPage, totalPages, sear
     <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"}
+    const combinedTopHTML = topControlsHTML;
-</button>`;
-    const combinedTopHTML = topControlsHTML + advancedToggleHTML;
     
     let headerHTML = buildFileTableHeader(sortOrder);
     const startIndex = (currentPage - 1) * itemsPerPageSetting;

js/i18n.js

@@ -7,6 +7,8 @@ const translations = {
     "element_not_found": "Element with id \"{id}\" not found.",
     "search_placeholder": "Search files, tags, & uploader...",
     "search_placeholder_advanced": "Advanced Search: files, tags, uploader & content...",
+    "basic_search_tooltip": "Basic Search: Search by file name, tags, and uploader.",
+    "advanced_search_tooltip": "Advanced Search: Includes file content, in addition to file name, tags, and uploader.",
     "file_name": "File Name",
     "date_modified": "Date Modified",
     "upload_date": "Upload Date",
@@ -580,15 +582,15 @@ const translations = {
     // Dark Mode Toggle
     "dark_mode_toggle": "Dunkler Modus"
   }
-  };
+};
 
-  let currentLocale = 'en';
+let currentLocale = 'en';
 
-  export function setLocale(locale) {
+export function setLocale(locale) {
   currentLocale = locale;
-  }
+}
 
-  export function t(key, placeholders) {
+export function t(key, placeholders) {
   const localeTranslations = translations[currentLocale] || {};
   let translation = localeTranslations[key] || key;
   if (placeholders) {
@@ -597,9 +599,9 @@ const translations = {
     });
   }
   return translation;
-  }
+}
 
-  export function applyTranslations() {
+export function applyTranslations() {
   document.querySelectorAll('[data-i18n-key]').forEach(el => {
     el.innerText = t(el.getAttribute('data-i18n-key'));
   });
@@ -609,4 +611,4 @@ const translations = {
   document.querySelectorAll('[data-i18n-title]').forEach(el => {
     el.setAttribute('title', t(el.getAttribute('data-i18n-title')));
   });
-  }
+}