Gallery View Toggle button moved to header

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Changes 4/12/2025
 
+- Moved Gallery view toggle button into header.
+- Removed css entries that are not needed anymore for Gallery View Toggle.
+
 ### Advanced Search Implementation
 
 - **Advanced Search Toggle:**

css/styles.css

@@ -1584,39 +1584,6 @@ body.dark-mode .btn-secondary {
   border-color: #6c757d;
 }
 
-#toggleViewBtn {
-  margin-bottom: 20px;
-  margin-left: 14px;
-  padding: 10px 20px;
-  background: rgba(0, 0, 0, 0.6);
-  color: #fff;
-  border: none;
-  border-radius: 4px;
-  font-size: 16px;
-  cursor: pointer;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
-  transition: background 0.3s ease, box-shadow 0.3s ease;
-}
-
-@media (max-width: 768px) {
-  #toggleViewBtn {
-    margin-left: 0 !important;
-  }
-}
-
-@media (max-width: 600px) {
-  #toggleViewBtn {
-    margin-left: 0 !important;
-    margin-right: auto !important;
-    display: block !important;
-  }
-}
-
-#toggleViewBtn:hover {
-  background: rgba(0, 0, 0, 0.8);
-  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
-}
-
 body.dark-mode .btn-danger {
   background-color: #dc3545;
   color: #fff;

js/fileListView.js

@@ -129,19 +129,39 @@ export function createViewToggleButton() {
     if (!toggleBtn) {
       toggleBtn = document.createElement("button");
       toggleBtn.id = "toggleViewBtn";
-        toggleBtn.classList.add("btn", "btn-secondary");
+      toggleBtn.classList.add("btn", "btn-toggleview");
-        const titleElem = document.getElementById("fileListTitle");
+      
-        if (titleElem) {
+      // Set initial icon and tooltip based on current view mode.
-            titleElem.parentNode.insertBefore(toggleBtn, titleElem.nextSibling);
+      if (window.viewMode === "gallery") {
+        toggleBtn.innerHTML = '<i class="material-icons">view_list</i>';
+        toggleBtn.title =  t("switch_to_table_view");
+      } else {
+        toggleBtn.innerHTML = '<i class="material-icons">view_module</i>';
+        toggleBtn.title = t("switch_to_gallery_view");
+      }
+      
+      // Insert the button before the last button in the header.
+      const headerButtons = document.querySelector(".header-buttons");
+      if (headerButtons && headerButtons.lastElementChild) {
+        headerButtons.insertBefore(toggleBtn, headerButtons.lastElementChild);
+      } else if (headerButtons) {
+        headerButtons.appendChild(toggleBtn);
       }
     }
-    toggleBtn.textContent = window.viewMode === "gallery" ? t("switch_to_table_view") : t("switch_to_gallery_view");
+    
     toggleBtn.onclick = () => {
       window.viewMode = window.viewMode === "gallery" ? "table" : "gallery";
       localStorage.setItem("viewMode", window.viewMode);
       loadFileList(window.currentFolder);
-        toggleBtn.textContent = window.viewMode === "gallery" ? t("switch_to_table_view") : t("switch_to_gallery_view");
+      if (window.viewMode === "gallery") {
+        toggleBtn.innerHTML = '<i class="material-icons">view_list</i>';
+        toggleBtn.title =  t("switch_to_table_view");
+      } else {
+        toggleBtn.innerHTML = '<i class="material-icons">view_module</i>';
+        toggleBtn.title = t("switch_to_gallery_view");
+      }
     };
+    
     return toggleBtn;
   }