Center folder strip name, fix file share url, keep fileList wrapping tight (closes #38)

CHANGELOG.md

@@ -1,16 +1,37 @@
 # Changelog
 
-## Changes 5/20/2025 1.3.6
+## Changes 5/22/2025 v1.3.7
+
+- `.folder-strip-container .folder-name` css added to center text below folder material icon.
+- Override file share_url to always use current origin
+- Update `fileList` css to keep file name wrapping tight.
+
+---
+
+## Changes 5/21/2025
+
+- **Drag & Drop to Folder Strip**  
+  - Enabled dragging files from the file list directly onto the folder-strip items.  
+  - Hooked up `folderDragOverHandler`, `folderDragLeaveHandler`, and `folderDropHandler` to `.folder-strip-container .folder-item`.  
+  - On drop, files are moved via `/api/file/moveFiles.php` and the file list is refreshed.
+
+- **Restore files from trash Toast Message**  
+  - Changed the restore handlers so that the toast always reports the actual file(s) restored (e.g. “Restored file: foo.txt”) instead of “No trash record found.”  
+  - Removed reliance on backend message payload and now generate the confirmation text client-side based on selected items.  
+
+---
+
+## Changes 5/20/2025 v1.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 `Extract ZIP` until selecting zip files
     - Hide `Create File` button when file list items are selected.
 
 ---
 
-## Changes 5/19/2025 1.3.5
+## Changes 5/19/2025 v1.3.5
 
 ### Added Folder strip & Create File
 

public/css/styles.css

@@ -971,16 +971,15 @@ body.dark-mode #fileList table tr {
 }
 
 :root {
-  --file-row-height: 48px; /* default, will be overwritten by your slider */
+  --file-row-height: 48px;
 }
 
-/* Force each <tr> to be exactly the var() height */
 #fileList table.table tbody tr {
-  height: var(--file-row-height) !important;
+  height: auto !important;
+  min-height: var(--file-row-height) !important;
 }
 
-/* And force each <td> to match, with no extra padding or line-height */
-#fileList table.table tbody td {
+#fileList table.table tbody td:not(.file-name-cell) {
   height: var(--file-row-height) !important;
   line-height: var(--file-row-height) !important;
   padding-top: 0 !important;
@@ -988,6 +987,13 @@ body.dark-mode #fileList table tr {
   vertical-align: middle;
 }
 
+#fileList table.table tbody td.file-name-cell {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.2em !important;
+  height: auto !important;
+}
+
 /* ===========================================================
    HEADINGS & FORM LABELS
    =========================================================== */
@@ -2261,13 +2267,20 @@ body.dark-mode .user-dropdown .user-menu .item:hover {
   align-items: center;
   cursor: pointer;
   width: 80px;
-  color: inherit; /* icon will pick up text color */
+  color: inherit;
   font-size: 0.85em;
 }
 .folder-strip-container .folder-item i.material-icons {
   font-size: 28px;
   margin-bottom: 4px;
 }
+.folder-strip-container .folder-name {
+  text-align: center;
+  white-space: normal;
+  word-break: break-word;
+  max-width: 80px;
+  margin-top: 4px;
+}
 
 .folder-strip-container .folder-item i.material-icons {
   color: currentColor;

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.6";
+const version = "v1.3.7";
 const adminTitle = `${t("admin_panel")} <small style="font-size:12px;color:gray;">${version}</small>`;
 
 // ————— Inject updated styles —————

public/js/fileListView.js

@@ -17,6 +17,11 @@ import { bindFileListContextMenu } from './fileMenu.js';
 import { openDownloadModal } from './fileActions.js';
 import { openTagModal, openMultiTagModal } from './fileTags.js';
 import { getParentFolder, updateBreadcrumbTitle, setupBreadcrumbDelegation } from './folderManager.js';
+import {
+    folderDragOverHandler,
+    folderDragLeaveHandler,
+    folderDropHandler
+} from './fileDragDrop.js';
 
 export let fileData = [];
 export let sortOrder = { column: "uploaded", ascending: true };
@@ -333,7 +338,7 @@ export async function loadFileList(folderParam) {
               <label for="rowHeightSlider" style="margin-right:8px;line-height:1;">
                 ${t("row_height")}:
               </label>
-              <input type="range" id="rowHeightSlider" min="31" max="60" value="${currentHeight}" style="vertical-align:middle;">
+              <input type="range" id="rowHeightSlider" min="30" max="60" value="${currentHeight}" style="vertical-align:middle;">
               <span id="rowHeightValue" style="margin-left:6px;line-height:1;">${currentHeight}px</span>
             `;
                 const rowSlider = document.getElementById("rowHeightSlider");
@@ -357,26 +362,31 @@ export async function loadFileList(folderParam) {
         }
         if (window.showFoldersInList && subfolders.length) {
             strip.innerHTML = subfolders.map(sf => `
-                <div class="folder-item" data-folder="${sf.full}">
+              <div class="folder-item" data-folder="${sf.full}" draggable="true">
                 <i class="material-icons">folder</i>
                 <div class="folder-name">${escapeHTML(sf.name)}</div>
               </div>
             `).join("");
             strip.style.display = "flex";
+
             strip.querySelectorAll(".folder-item").forEach(el => {
+                // click‐to‐navigate
                 el.addEventListener("click", () => {
                     const dest = el.dataset.folder;
                     window.currentFolder = dest;
                     localStorage.setItem("lastOpenedFolder", dest);
-                    // sync breadcrumb & tree
                     updateBreadcrumbTitle(dest);
                     document.querySelectorAll(".folder-option.selected")
                         .forEach(o => o.classList.remove("selected"));
                     document.querySelector(`.folder-option[data-folder="${dest}"]`)
                         ?.classList.add("selected");
-                    // reload
                     loadFileList(dest);
                 });
+
+                // drag & drop handlers
+                el.addEventListener("dragover", folderDragOverHandler);
+                el.addEventListener("dragleave", folderDragLeaveHandler);
+                el.addEventListener("drop", folderDropHandler);
             });
         } else {
             strip.style.display = "none";

public/js/main.js

@@ -64,35 +64,26 @@ export function initializeApp() {
 }
 
 export function loadCsrfToken() {
-  return fetchWithCsrf('/api/auth/token.php', {
-    method: 'GET'
-  })
+  return fetchWithCsrf('/api/auth/token.php', { method: 'GET' })
     .then(res => {
-      if (!res.ok) {
-        throw new Error(`Token fetch failed with status ${res.status}`);
-      }
+      if (!res.ok) throw new Error(`Token fetch failed with status ${res.status}`);
       return res.json();
     })
     .then(({ csrf_token, share_url }) => {
-      // Update global and <meta>
       window.csrfToken = csrf_token;
-      let meta = document.querySelector('meta[name="csrf-token"]');
-      if (!meta) {
-        meta = document.createElement('meta');
-        meta.name = 'csrf-token';
-        document.head.appendChild(meta);
-      }
+
+      // update CSRF meta
+      let meta = document.querySelector('meta[name="csrf-token"]') ||
+        Object.assign(document.head.appendChild(document.createElement('meta')), { name: 'csrf-token' });
       meta.content = csrf_token;
 
-      let shareMeta = document.querySelector('meta[name="share-url"]');
-      if (!shareMeta) {
-        shareMeta = document.createElement('meta');
-        shareMeta.name = 'share-url';
-        document.head.appendChild(shareMeta);
-      }
-      shareMeta.content = share_url;
+      // force share_url to match wherever we're browsing
+      const actualShare = window.location.origin;
+      let shareMeta = document.querySelector('meta[name="share-url"]') ||
+        Object.assign(document.head.appendChild(document.createElement('meta')), { name: 'share-url' });
+      shareMeta.content = actualShare;
 
-      return { csrf_token, share_url };
+      return { csrf_token, share_url: actualShare };
     });
 }
 

public/js/trashRestoreDelete.js

@@ -79,15 +79,16 @@ export function setupTrashRestoreDelete() {
                 body: JSON.stringify({ files })
             })
                 .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        showToast(data.success);
+                .then(() => {
+                    // Always report what we actually restored
+                    if (files.length === 1) {
+                        showToast(`Restored file: ${files[0]}`);
+                    } else {
+                        showToast(`Restored files: ${files.join(", ")}`);
+                    }
                     toggleVisibility("restoreFilesModal", false);
                     loadFileList(window.currentFolder);
                     loadFolderTree(window.currentFolder);
-                    } else {
-                        showToast(data.error);
-                    }
                 })
                 .catch(err => {
                     console.error("Error restoring files:", err);
@@ -119,16 +120,15 @@ export function setupTrashRestoreDelete() {
                 body: JSON.stringify({ files })
             })
                 .then(response => response.json())
-                .then(data => {
-                    if (data.success) {
-                        showToast(data.success);
+                .then(() => {
+                    if (files.length === 1) {
+                        showToast(`Restored file: ${files[0]}`);
+                    } else {
+                        showToast(`Restored files: ${files.join(", ")}`);
+                    }
                     toggleVisibility("restoreFilesModal", false);
                     loadFileList(window.currentFolder);
                     loadFolderTree(window.currentFolder);
-
-                    } else {
-                        showToast(data.error);
-                    }
                 })
                 .catch(err => {
                     console.error("Error restoring files:", err);