updateFileActionButtons to hide or show depending on action

CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
-## Changes 5/19/2025
+## Changes 5/20/2025 1.3.6
+
+- **domUtils.js**
+  - `updateFileActionButtons`
+    - Hide selection buttons (`Delete Files`, `Copy Files`, `Move Files` & `Download ZIP`) until file is selected.
+    - Hides `Extract ZIP` until selecting zip files
+    - Hide `Create File` button when file list items are selected.
+
+---
+
+## Changes 5/19/2025 1.3.5
 
 ### Added Folder strip & Create File
 

public/index.html

@@ -389,7 +389,7 @@
             </div>
             <button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled
               data-i18n-key="download_zip">Download ZIP</button>
-            <button id="extractZipBtn" class="btn btn-sm btn-info" data-i18n-title="extract_zip"
+            <button id="extractZipBtn" class="btn action-btn btn-sm btn-info" data-i18n-title="extract_zip"
               data-i18n-key="extract_zip_button">Extract Zip</button>
             <button id="createFileBtn" class="btn action-btn" data-i18n-key="create_file">
               ${t('create_file')}

public/js/adminPanel.js

@@ -3,7 +3,7 @@ import { loadAdminConfigFunc } from './auth.js';
 import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
 import { sendRequest } from './networkUtils.js';
 
-const version = "v1.3.5";
+const version = "v1.3.6";
 const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;
 
 // ————— Inject updated styles —————

public/js/domUtils.js

@@ -33,54 +33,66 @@ export function toggleAllCheckboxes(masterCheckbox) {
 export function updateFileActionButtons() {
   const fileCheckboxes = document.querySelectorAll("#fileList .file-checkbox");
   const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
+
+  const deleteBtn = document.getElementById("deleteSelectedBtn");
   const copyBtn = document.getElementById("copySelectedBtn");
   const moveBtn = document.getElementById("moveSelectedBtn");
-  const deleteBtn = document.getElementById("deleteSelectedBtn");
   const zipBtn = document.getElementById("downloadZipBtn");
   const extractZipBtn = document.getElementById("extractZipBtn");
+  const createBtn = document.getElementById("createFileBtn");
 
-   // keep the “select all” in sync ——
-   const master = document.getElementById("selectAll");
-   if (master) {
-     if (selectedCheckboxes.length === fileCheckboxes.length) {
-       master.checked = true;
-       master.indeterminate = false;
-     } else if (selectedCheckboxes.length === 0) {
-       master.checked = false;
-       master.indeterminate = false;
-     } else {
-       master.checked = false;
-       master.indeterminate = true;
-     }
-   }
+  const anyFiles = fileCheckboxes.length > 0;
+  const anySelected = selectedCheckboxes.length > 0;
+  const anyZip = Array.from(selectedCheckboxes)
+    .some(cb => cb.value.toLowerCase().endsWith(".zip"));
 
-  if (fileCheckboxes.length === 0) {
-    if (copyBtn) copyBtn.style.display = "none";
-    if (moveBtn) moveBtn.style.display = "none";
-    if (deleteBtn) deleteBtn.style.display = "none";
-    if (zipBtn) zipBtn.style.display = "none";
-    if (extractZipBtn) extractZipBtn.style.display = "none";
-  } else {
-    if (copyBtn) copyBtn.style.display = "inline-block";
-    if (moveBtn) moveBtn.style.display = "inline-block";
-    if (deleteBtn) deleteBtn.style.display = "inline-block";
-    if (zipBtn) zipBtn.style.display = "inline-block";
-    if (extractZipBtn) extractZipBtn.style.display = "inline-block";
-
-    const anySelected = selectedCheckboxes.length > 0;
-    if (copyBtn) copyBtn.disabled = !anySelected;
-    if (moveBtn) moveBtn.disabled = !anySelected;
-    if (deleteBtn) deleteBtn.disabled = !anySelected;
-    if (zipBtn) zipBtn.disabled = !anySelected;
-
-    if (extractZipBtn) {
-      // Enable only if at least one selected file ends with .zip (case-insensitive).
-      const anyZipSelected = Array.from(selectedCheckboxes).some(chk =>
-        chk.value.toLowerCase().endsWith(".zip")
-      );
-      extractZipBtn.disabled = !anyZipSelected;
+  // — Select All checkbox sync (unchanged) —
+  const master = document.getElementById("selectAll");
+  if (master) {
+    if (selectedCheckboxes.length === fileCheckboxes.length) {
+      master.checked = true;
+      master.indeterminate = false;
+    } else if (selectedCheckboxes.length === 0) {
+      master.checked = false;
+      master.indeterminate = false;
+    } else {
+      master.checked = false;
+      master.indeterminate = true;
     }
   }
+
+  // Delete / Copy / Move: only show when something is selected
+  if (deleteBtn) {
+    deleteBtn.style.display = anySelected ? "" : "none";
+  }
+  if (copyBtn) {
+    copyBtn.style.display = anySelected ? "" : "none";
+  }
+  if (moveBtn) {
+    moveBtn.style.display = anySelected ? "" : "none";
+  }
+
+  // Download ZIP: only show when something is selected
+  if (zipBtn) {
+    zipBtn.style.display = anySelected ? "" : "none";
+  }
+
+  // Extract ZIP: only show when a selected file is a .zip
+  if (extractZipBtn) {
+    extractZipBtn.style.display = anyZip ? "" : "none";
+  }
+
+  // Create File: only show when nothing is selected
+  if (createBtn) {
+    createBtn.style.display = anySelected ? "none" : "";
+  }
+
+  // Finally disable the ones that are shown but shouldn’t be clickable
+  if (deleteBtn) deleteBtn.disabled = !anySelected;
+  if (copyBtn) copyBtn.disabled = !anySelected;
+  if (moveBtn) moveBtn.disabled = !anySelected;
+  if (zipBtn) zipBtn.disabled = !anySelected;
+  if (extractZipBtn) extractZipBtn.disabled = !anyZip;
 }
 
 export function showToast(message, duration = 3000) {