release(v1.8.10): theme-aware media modal, stronger file drag-and-drop, unified progress color, and favicon overhaul

2025-11-08 13:33:38 -05:00
parent 429cd0314a
commit 04ec0a0830
32 changed files with 818 additions and 444 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,44 @@
 # Changelog

+## Changes 11/8/2025 (v1.8.10)
+
+release(v1.8.10): theme-aware media modal, stronger file drag-and-drop, unified progress color, and favicon overhaul
+
+UI/UX — Media modal
+
+- Add fixed top bar to avoid filename/controls overlapping native media chrome; keep hover-on-stage look.
+- Show a Material icon by file type next to the filename (image/video/pdf/code/arch/txt, with fallback).
+- Restore “X” behavior and make hover theme-aware (red pill + white ‘X’ in light, red pill + black ‘X’ in dark).
+
+Video/Image controls
+
+- Top-right action icons use theme-aware styles and align with the filename row.
+- Prev/Next paddles remain high-contrast and vertically centered within the stage.
+
+Progress badges (list & modal)
+
+- Standardize “in-progress” to darker orange (#ea580c) for better contrast in light/dark; update CSS and list badge rendering.
+
+Drag & drop
+
+- Support multi-select drags with a clean JSON payload + text fallback; nicer drag ghost.
+- More resilient drops: accept data-dest-folder, safer JSON parse, early guards, and better toasts.
+- POST move now sends Accept header, uses global CSRF, and refreshes the active view on success.
+
+Editor & ONLYOFFICE
+
+- Full-screen OO modal with preconnect, optional hidden warm-up to reduce first-open latency, and live theme sync.
+- CodeMirror path: fix theme/mode setters (use `cm`) and tighten dynamic mode loading.
+
+Assets & polish
+
+- Swap in full favicon stack (SVG + PNG 512/32/16 + ICO) and set theme-color; cache-busted via `{{APP_QVER}}`.
+- Refresh `logo.svg` (accessibility, cleaner handles/gradients).
+
+Also added: refreshed resource images and new logo sizes (logo-16, logo-32, logo-64, etc.) for crisper favicons and embeds.
+
+---
+
 ## Changes 11/7/2025 (v1.8.9)

 release(v1.8.9): fix(oidc, admin): first-save Client ID/Secret (closes #64)
--- a/public/assets/favicon.ico
+++ b/public/assets/favicon.ico
--- a/public/assets/logo-128.png
+++ b/public/assets/logo-128.png
--- a/public/assets/logo-16.png
+++ b/public/assets/logo-16.png
--- a/public/assets/logo-192.png
+++ b/public/assets/logo-192.png
--- a/public/assets/logo-256.png
+++ b/public/assets/logo-256.png
--- a/public/assets/logo-32.png
+++ b/public/assets/logo-32.png
--- a/public/assets/logo-48.png
+++ b/public/assets/logo-48.png
--- a/public/assets/logo-64.png
+++ b/public/assets/logo-64.png
--- a/public/assets/logo.png
+++ b/public/assets/logo.png
--- a/public/assets/logo.svg
+++ b/public/assets/logo.svg
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1919,12 +1919,12 @@ body {
  color: #fff;
 }
 .status-badge.watched {
-  border-color: rgba(34,197,94,.35);      /* green-ish */
+  border-color: rgba(34,197,94,.45);      /* green-ish */
  background: rgba(34,197,94,.15);
 }
 .status-badge.progress {
-  border-color: rgba(250,204,21,.35);     /* amber-ish */
-  background: rgba(250,204,21,.15);
+  border-color: rgba(234,88,12,.55);     /* amber-ish */
+  background: rgba(234,88,12,.18);
 }
 #downloadProgressModal .modal-body,
 #downloadProgressModal .rise-modal-body,
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@@ -3,17 +3,24 @@

 <head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>FileRise</title>
+  <meta name="theme-color" content="#0b5ed7">
  <script>(function(){try{var s=localStorage.getItem('darkMode');var isDark=(s===null)?(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches):(s==='1'||s==='true');var root=document.documentElement;root.setAttribute('data-theme',isDark?'dark':'light');root.classList.toggle('dark-mode',isDark);var bg=isDark?'#121212':'#ffffff';root.style.backgroundColor=bg;root.style.colorScheme=isDark?'dark':'light';root.style.setProperty('--pre-bg',bg);var m=document.querySelector('meta[name="theme-color"]');if(m)m.setAttribute('content',bg);}catch(e){}})();</script>
  <style id="pretheme-css">
    html,body,#loadingOverlay{background:var(--pre-bg,#ffffff) !important;}
  </style>
-  <link rel="icon" type="image/png" href="/assets/logo.png"><link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
+  <!-- Favicons (ordered: SVG -> PNGs -> ICO) -->
+  <link rel="icon" href="/assets/logo.svg?v={{APP_QVER}}" type="image/svg+xml" sizes="any">
+  <link rel="icon" href="/assets/logo.png?v={{APP_QVER}}" type="image/png" sizes="512x512">
+  <link rel="icon" href="/assets/logo-32.png?v={{APP_QVER}}" type="image/png" sizes="32x32">
+  <link rel="icon" href="/assets/logo-16.png?v={{APP_QVER}}" type="image/png" sizes="16x16">
+  <link rel="shortcut icon" href="/assets/favicon.ico?v={{APP_QVER}}">
+  
  <meta name="description" content="FileRise is a fast, self-hosted file manager with granular per-folder ACLs, drag-and-drop folder moves, WebDAV, tagging, and a clean UI.">
-  <meta name="csrf-token" content=""><meta name="share-url" content=""><meta name="theme-color" content="#0b5ed7"><meta name="color-scheme" content="light dark">
+  <meta name="csrf-token" content=""><meta name="share-url" content=""><meta name="color-scheme" content="light dark">
  <link rel="manifest" href="/manifest.webmanifest?v={{APP_QVER}}">
  <link rel="apple-touch-icon" href="/assets/icons/icon-192.png?v={{APP_QVER}}">
  
-<!-- Critical CSS -->
+  <!-- Critical CSS -->
  <link rel="stylesheet" href="/vendor/bootstrap/4.5.2/bootstrap.min.css?v={{APP_QVER}}">
  <link rel="stylesheet" href="/css/styles.css?v={{APP_QVER}}">
  <link rel="stylesheet" href="/css/vendor/roboto.css?v={{APP_QVER}}">
--- a/public/js/fileDragDrop.js
+++ b/public/js/fileDragDrop.js
@@ -2,124 +2,163 @@
 import { showToast } from './domUtils.js?v={{APP_QVER}}';
 import { loadFileList } from './fileListView.js?v={{APP_QVER}}';

-export function fileDragStartHandler(event) {
-  const row = event.currentTarget;
-  let fileNames = [];
-
-  const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
-  if (selectedCheckboxes.length > 1) {
-    selectedCheckboxes.forEach(chk => {
-      const parentRow = chk.closest("tr");
-      if (parentRow) {
-        const cell = parentRow.querySelector("td:nth-child(2)");
-        if (cell) {
-          let rawName = cell.textContent.trim();
-          const tagContainer = cell.querySelector(".tag-badges");
-          if (tagContainer) {
-            const tagText = tagContainer.innerText.trim();
-            if (rawName.endsWith(tagText)) {
-              rawName = rawName.slice(0, -tagText.length).trim();
-            }
-          }
-          fileNames.push(rawName);
-        }
-      }
-    });
-  } else {
-    const fileNameCell = row.querySelector("td:nth-child(2)");
-    if (fileNameCell) {
-      let rawName = fileNameCell.textContent.trim();
-      const tagContainer = fileNameCell.querySelector(".tag-badges");
-      if (tagContainer) {
-        const tagText = tagContainer.innerText.trim();
-        if (rawName.endsWith(tagText)) {
-          rawName = rawName.slice(0, -tagText.length).trim();
-        }
-      }
-      fileNames.push(rawName);
-    }
-  }
-
-  if (fileNames.length === 0) return;
-
-  const dragData = fileNames.length === 1 
-    ? { fileName: fileNames[0], sourceFolder: window.currentFolder || "root" }
-    : { files: fileNames, sourceFolder: window.currentFolder || "root" };
-
-  event.dataTransfer.setData("application/json", JSON.stringify(dragData));
-
-  let dragImage = document.createElement("div");
-  dragImage.style.display = "inline-flex";
-  dragImage.style.width = "auto";
-  dragImage.style.maxWidth = "fit-content";
-  dragImage.style.padding = "6px 10px";
-  dragImage.style.backgroundColor = "#333";
-  dragImage.style.color = "#fff";
-  dragImage.style.border = "1px solid #555";
-  dragImage.style.borderRadius = "4px";
-  dragImage.style.alignItems = "center";
-  dragImage.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.3)";
-  const icon = document.createElement("span");
-  icon.className = "material-icons";
-  icon.textContent = "insert_drive_file";
-  icon.style.marginRight = "4px";
-  const label = document.createElement("span");
-  label.textContent = fileNames.length === 1 ? fileNames[0] : fileNames.length + " files";
-  dragImage.appendChild(icon);
-  dragImage.appendChild(label);
-  
-  document.body.appendChild(dragImage);
-  event.dataTransfer.setDragImage(dragImage, 5, 5);
-  setTimeout(() => {
-    document.body.removeChild(dragImage);
-  }, 0);
+/* ---------------- helpers ---------------- */
+function getRowEl(el) {
+  return el?.closest('tr[data-file-name], .gallery-card[data-file-name]') || null;
+}
+function getNameFromAny(el) {
+  const row = getRowEl(el);
+  if (!row) return null;
+  // 1) canonical
+  const n = row.getAttribute('data-file-name');
+  if (n) return n;
+  // 2) filename-only span
+  const span = row.querySelector('.filename-text');
+  if (span) return span.textContent.trim();
+  return null;
+}
+function getSelectedFileNames() {
+  const boxes = Array.from(document.querySelectorAll('#fileList .file-checkbox:checked'));
+  const names = boxes.map(cb => getNameFromAny(cb)).filter(Boolean);
+  // de-dup just in case
+  return Array.from(new Set(names));
+}
+function makeDragImage(labelText, iconName = 'insert_drive_file') {
+  const wrap = document.createElement('div');
+  Object.assign(wrap.style, {
+    display: 'inline-flex',
+    maxWidth: '420px',
+    padding: '6px 10px',
+    backgroundColor: '#333',
+    color: '#fff',
+    border: '1px solid #555',
+    borderRadius: '6px',
+    alignItems: 'center',
+    gap: '6px',
+    boxShadow: '2px 2px 6px rgba(0,0,0,0.3)',
+    fontSize: '12px',
+    pointerEvents: 'none'
+  });
+  const icon = document.createElement('span');
+  icon.className = 'material-icons';
+  icon.textContent = iconName;
+  const label = document.createElement('span');
+  // trim long single-name labels
+  const txt = String(labelText || '');
+  label.textContent = txt.length > 60 ? (txt.slice(0, 57) + '…') : txt;
+  wrap.appendChild(icon);
+  wrap.appendChild(label);
+  document.body.appendChild(wrap);
+  return wrap;
 }

+/* ---------------- drag start (rows/cards) ---------------- */
+export function fileDragStartHandler(event) {
+  const row = getRowEl(event.currentTarget);
+  if (!row) return;
+
+  // Use current selection if present; otherwise drag just this row’s file
+  let names = getSelectedFileNames();
+  if (names.length === 0) {
+    const single = getNameFromAny(row);
+    if (single) names = [single];
+  }
+  if (names.length === 0) return;
+
+  const sourceFolder = window.currentFolder || 'root';
+  const payload = { files: names, sourceFolder };
+
+  // primary payload
+  event.dataTransfer.setData('application/json', JSON.stringify(payload));
+  // fallback (lets some environments read something human)
+  event.dataTransfer.setData('text/plain', names.join('\n'));
+
+  // nicer drag image
+  const dragLabel = (names.length === 1) ? names[0] : `${names.length} files`;
+  const ghost = makeDragImage(dragLabel, names.length === 1 ? 'insert_drive_file' : 'folder');
+  event.dataTransfer.setDragImage(ghost, 6, 6);
+  // clean up the ghost as soon as the browser has captured it
+  setTimeout(() => { try { document.body.removeChild(ghost); } catch { } }, 0);
+}
+
+/* ---------------- folder targets ---------------- */
 export function folderDragOverHandler(event) {
  event.preventDefault();
-  event.currentTarget.classList.add("drop-hover");
+  event.currentTarget.classList.add('drop-hover');
 }
-
 export function folderDragLeaveHandler(event) {
-  event.currentTarget.classList.remove("drop-hover");
+  event.currentTarget.classList.remove('drop-hover');
 }

-export function folderDropHandler(event) {
+export async function folderDropHandler(event) {
  event.preventDefault();
-  event.currentTarget.classList.remove("drop-hover");
-  const dropFolder = event.currentTarget.getAttribute("data-folder");
-  let dragData;
+  event.currentTarget.classList.remove('drop-hover');
+
+  const dropFolder = event.currentTarget.getAttribute('data-folder')
+    || event.currentTarget.getAttribute('data-dest-folder')
+    || 'root';
+
+  // parse drag payload
+  let dragData = null;
  try {
-    dragData = JSON.parse(event.dataTransfer.getData("application/json"));
-  } catch (e) {
-    console.error("Invalid drag data");
+    const raw = event.dataTransfer.getData('application/json') || '{}';
+    dragData = JSON.parse(raw);
+  } catch {
+    // ignore
+  }
+  if (!dragData) {
+    showToast('Invalid drag data.');
    return;
  }
-  if (!dragData || !dragData.fileName) return;
-  fetch("/api/file/moveFiles.php", {
-    method: "POST",
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
-    },
-    body: JSON.stringify({
-      source: dragData.sourceFolder,
-      files: [dragData.fileName],
-      destination: dropFolder
-    })
-  })
-    .then(response => response.json())
-    .then(data => {
-      if (data.success) {
-        showToast(`File "${dragData.fileName}" moved successfully to ${dropFolder}!`);
-        loadFileList(dragData.sourceFolder);
-      } else {
-        showToast("Error moving file: " + (data.error || "Unknown error"));
-      }
-    })
-    .catch(error => {
-      console.error("Error moving file via drop:", error);
-      showToast("Error moving file.");
+
+  // normalize names
+  let names = Array.isArray(dragData.files) ? dragData.files.slice()
+    : dragData.fileName ? [dragData.fileName]
+      : [];
+  names = names.filter(v => typeof v === 'string' && v.length > 0);
+
+  if (names.length === 0) {
+    showToast('No files to move.');
+    return;
+  }
+
+  const sourceFolder = dragData.sourceFolder || (window.currentFolder || 'root');
+  if (dropFolder === sourceFolder) {
+    showToast('Source and destination are the same.');
+    return;
+  }
+
+  // POST move
+  try {
+    const res = await fetch('/api/file/moveFiles.php', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'X-CSRF-Token': window.csrfToken
+      },
+      body: JSON.stringify({
+        source: sourceFolder,
+        files: names,
+        destination: dropFolder
+      })
    });
+    const data = await res.json().catch(() => ({}));
+
+    if (res.ok && data && data.success) {
+      const msg = (names.length === 1)
+        ? `Moved "${names[0]}" to ${dropFolder}.`
+        : `Moved ${names.length} files to ${dropFolder}.`;
+      showToast(msg);
+      // Refresh whatever view the user is currently looking at
+      loadFileList(window.currentFolder || sourceFolder);
+    } else {
+      const err = (data && (data.error || data.message)) || `HTTP ${res.status}`;
+      showToast('Error moving file(s): ' + err);
+    }
+  } catch (e) {
+    console.error('Error moving file(s):', e);
+    showToast('Error moving file(s).');
+  }
 }
--- a/public/js/fileEditor.js
+++ b/public/js/fileEditor.js
@@ -70,7 +70,7 @@ function normalizeModeName(modeOption) {
 function getExt(name) { const i = name.lastIndexOf('.'); return i >= 0 ? name.slice(i + 1).toLowerCase() : ''; }

 // Cache OO capabilities (enabled flag + ext list) from /api/onlyoffice/status.php
-let __ooCaps = { enabled: false, exts: new Set(), fetched: false };
+let __ooCaps = { enabled: false, exts: new Set(), fetched: false, docsOrigin: null };

 async function fetchOnlyOfficeCapsOnce() {
  if (__ooCaps.fetched) return __ooCaps;
@@ -80,6 +80,7 @@ async function fetchOnlyOfficeCapsOnce() {
      const j = await r.json();
      __ooCaps.enabled = !!j.enabled;
      __ooCaps.exts = new Set(Array.isArray(j.exts) ? j.exts : []);
+      __ooCaps.docsOrigin = j.docsOrigin || null; // harmless if server doesn't send it
    }
  } catch { /* ignore; keep defaults */ }
  __ooCaps.fetched = true;
@@ -93,121 +94,23 @@ async function shouldUseOnlyOffice(fileName) {

 function isAbsoluteHttpUrl(u) { return /^https?:\/\//i.test(u || ''); }

-async function ensureOnlyOfficeApi(srcFromConfig, originFromConfig) {
-  let src =
-    srcFromConfig ||
-    (originFromConfig ? originFromConfig.replace(/\/$/, '') + '/web-apps/apps/api/documents/api.js'
-      : (window.ONLYOFFICE_API_SRC || '/onlyoffice/web-apps/apps/api/documents/api.js'));
-  if (window.DocsAPI && typeof window.DocsAPI.DocEditor === 'function') return;
-  await loadScriptOnce(src);
-}
-
-async function openOnlyOffice(fileName, folder) {
-  let editor; // make visible to the whole function
-
-  try {
-    const url = `/api/onlyoffice/config.php?folder=${encodeURIComponent(folder)}&file=${encodeURIComponent(fileName)}`;
-    const resp = await fetch(url, { credentials: 'include' });
-
-    const text = await resp.text();
-    let cfg;
-    try { cfg = JSON.parse(text); } catch {
-      throw new Error(`ONLYOFFICE config parse failed (HTTP ${resp.status}). First 120 chars: ${text.slice(0,120)}`);
-    }
-    if (!resp.ok) throw new Error(cfg.error || `ONLYOFFICE config HTTP ${resp.status}`);
-
-    // Must be absolute
-    const docUrl = cfg?.document?.url;
-    const cbUrl  = cfg?.editorConfig?.callbackUrl;
-    if (!/^https?:\/\//i.test(docUrl || '') || !/^https?:\/\//i.test(cbUrl || '')) {
-      throw new Error(`Config URLs must be absolute. document.url='${docUrl}', callbackUrl='${cbUrl}'`);
-    }
-
-    // Load DocsAPI if needed
-    await ensureOnlyOfficeApi(cfg.docs_api_js, cfg.documentServerOrigin);
-
-    // Modal
-    const modal = document.createElement('div');
-    modal.id = 'ooEditorModal';
-    modal.classList.add('modal', 'editor-modal');
-    modal.setAttribute('tabindex', '-1');
-    modal.innerHTML = `
-      <div class="editor-header">
-        <h3 class="editor-title">
-          ${t("editing")}: ${escapeHTML(fileName)}
-        </h3>
-        <button id="closeEditorX" class="editor-close-btn" aria-label="${t("close") || "Close"}">&times;</button>
-      </div>
-      <div class="editor-body" style="flex:1;min-height:200px">
-        <div id="oo-editor" style="width:100%;height:100%"></div>
-      </div>
-    `;
-    document.body.appendChild(modal);
-    modal.style.display = 'block';
-    modal.focus();
-
-    // We’ll fill this after wiring the toggle, so destroy() can unhook it
-    let removeThemeListener = () => {};
-
-    const destroy = () => {
-      try { editor?.destroyEditor?.(); } catch {}
-      try { removeThemeListener(); } catch {}
-      try { modal.remove(); } catch {}
-    };
-
-    modal.addEventListener('keydown', e => { if (e.key === 'Escape') destroy(); });
-    document.getElementById('closeEditorX')?.addEventListener('click', destroy);
-
-    // Let DS request closing
-    cfg.events = Object.assign({}, cfg.events, { onRequestClose: destroy });
-
-    // Initial theme
-    const isDark =
-    document.documentElement.classList.contains('dark-mode') ||
-    /^(1|true)$/i.test(localStorage.getItem('darkMode') || '');
-  
-  cfg.editorConfig = cfg.editorConfig || {};
-  cfg.editorConfig.customization = Object.assign(
-    {},
-    cfg.editorConfig.customization,
-    { uiTheme: isDark ? 'theme-dark' : 'theme-light' } // <- correct key/value
-  );
-
-    // Launch editor
-    editor = new window.DocsAPI.DocEditor('oo-editor', cfg);
-
-    // Live theme switching (ONLYOFFICE v7.2+ supports setTheme)
-    const darkToggle = document.getElementById('darkModeToggle');
-    const onDarkToggle = () => {
-      const nowDark = document.documentElement.classList.contains('dark-mode');
-      if (editor && typeof editor.setTheme === 'function') {
-        editor.setTheme(nowDark ? 'dark' : 'light');
-      }
-    };
-    if (darkToggle) {
-      darkToggle.addEventListener('click', onDarkToggle);
-      removeThemeListener = () => darkToggle.removeEventListener('click', onDarkToggle);
-    }
-  } catch (e) {
-    console.error('[ONLYOFFICE] failed to open:', e);
-    showToast((e && e.message) ? e.message : 'Unable to open ONLYOFFICE editor.');
-  }
-}
-// ---- /ONLYOFFICE integration ----------------------------------------------
-
-
+// ---- script/css single-load with timeout guards ----
 const _loadedScripts = new Set();
 const _loadedCss = new Set();
 let _corePromise = null;

-function loadScriptOnce(url) {
+function loadScriptOnce(url, timeoutMs = 12000) {
  return new Promise((resolve, reject) => {
    if (_loadedScripts.has(url)) return resolve();
    const s = document.createElement("script");
+    const timer = setTimeout(() => {
+      try { s.remove(); } catch { }
+      reject(new Error(`Timeout loading: ${url}`));
+    }, timeoutMs);
    s.src = url;
    s.async = true;
-    s.onload = () => { _loadedScripts.add(url); resolve(); };
-    s.onerror = () => reject(new Error(`Load failed: ${url}`));
+    s.onload = () => { clearTimeout(timer); _loadedScripts.add(url); resolve(); };
+    s.onerror = () => { clearTimeout(timer); reject(new Error(`Load failed: ${url}`)); };
    document.head.appendChild(s);
  });
 }
@@ -240,7 +143,6 @@ async function ensureCore() {
 async function loadSingleMode(name) {
  const rel = MODE_URL[name];
  if (!rel) return;
-  // prepend base if needed
  const url = rel.startsWith("http") ? rel : (rel.startsWith("/") ? rel : (CM_BASE + rel));
  await loadScriptOnce(url);
 }
@@ -265,9 +167,299 @@ async function ensureModeLoaded(modeOption) {
 }

 // Public helper for callers (we keep your existing function name in use):
-const MODE_LOAD_TIMEOUT_MS = 2500; // allow closing immediately; don't wait forever
+const MODE_LOAD_TIMEOUT_MS = 300; // allow closing immediately; don't wait forever
 // ==== /CodeMirror lazy loader ===============================================

+// ---- OO preconnect / prewarm ----
+function injectOOPreconnect(origin) {
+  try {
+    if (!origin || !isAbsoluteHttpUrl(origin)) return;
+    const make = (rel) => { const l = document.createElement('link'); l.rel = rel; l.href = origin; return l; };
+    document.head.appendChild(make('dns-prefetch'));
+    document.head.appendChild(make('preconnect'));
+  } catch { }
+}
+
+async function ensureOnlyOfficeApi(srcFromConfig, originFromConfig) {
+  // Prefer explicit src; else derive from origin; else fall back to window/global or default prefix path
+  let src = srcFromConfig;
+  if (!src) {
+    if (originFromConfig && isAbsoluteHttpUrl(originFromConfig)) {
+      src = originFromConfig.replace(/\/$/, '') + '/web-apps/apps/api/documents/api.js';
+    } else {
+      src = window.ONLYOFFICE_API_SRC || '/onlyoffice/web-apps/apps/api/documents/api.js';
+    }
+  }
+  if (window.DocsAPI && typeof window.DocsAPI.DocEditor === 'function') return;
+  // Try once; if it times out and we derived from origin, fall back to the default prefix path
+  try {
+    console.time('oo:api.js');
+    await loadScriptOnce(src);
+  } catch (e) {
+    if (src !== '/onlyoffice/web-apps/apps/api/documents/api.js') {
+      await loadScriptOnce('/onlyoffice/web-apps/apps/api/documents/api.js');
+    } else {
+      throw e;
+    }
+  } finally {
+    console.timeEnd('oo:api.js');
+  }
+}
+
+// ===== ONLYOFFICE: full-screen modal + warm on every click =====
+const ALWAYS_WARM_OO = true;      // warm EVERY time
+const OO_WARM_MS     = 300;
+
+function ensureOoModalCss() {
+  const prev = document.getElementById('ooEditorModalCss');
+  if (prev) return;
+
+  const style = document.createElement('style');
+  style.id = 'ooEditorModalCss';
+  style.textContent = `
+    #ooEditorModal{
+      --oo-header-h: 40px;
+      --oo-header-pad-v: 12px;
+      --oo-header-pad-h: 18px;
+      --oo-logo-h: 26px; /* tweak logo size */
+    }
+
+    #ooEditorModal{
+      position:fixed!important; inset:0!important; margin:0!important; padding:0!important;
+      display:flex!important; flex-direction:column!important; z-index:2147483646!important;
+      background:var(--oo-modal-bg,#111)!important;
+    }
+
+    /* Header: logo (left) + title (fill) + absolute close (right) */
+    #ooEditorModal .editor-header{
+      position:relative; display:flex; align-items:center; gap:12px;
+      min-height:var(--oo-header-h);
+      padding:var(--oo-header-pad-v) var(--oo-header-pad-h);
+      padding-right: calc(var(--oo-header-pad-h) + 64px); /* room for 32px round close */
+      border-bottom:1px solid rgba(0,0,0,.15);
+      box-sizing:border-box;
+    }
+
+    #ooEditorModal .editor-logo{
+      height:var(--oo-logo-h); width:auto; flex:0 0 auto;
+      display:block; user-select:none; -webkit-user-drag:none;
+    }
+
+    #ooEditorModal .editor-title{
+      margin:0; font-size:18px; font-weight:700; line-height:1.2;
+      overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
+      flex:1 1 auto;
+    }
+
+    /* Your scoped close button style */
+    #ooEditorModal .editor-close-btn{
+      position:absolute; top:5px; right:10px;
+      display:flex; justify-content:center; align-items:center;
+      font-size:20px; font-weight:bold; cursor:pointer; z-index:1000;
+      width:32px; height:32px; border-radius:50%; text-align:center; line-height:30px;
+      color:#ff4d4d; background-color:rgba(255,255,255,.9); border:2px solid transparent;
+      transition:all .3s ease-in-out;
+    }
+    #ooEditorModal .editor-close-btn:hover{
+      color:#fff; background-color:#ff4d4d;
+      box-shadow:0 0 6px rgba(255,77,77,.8); transform:scale(1.05);
+    }
+    .dark-mode #ooEditorModal .editor-close-btn{ background-color:rgba(0,0,0,.7); color:#ff6666; }
+    .dark-mode #ooEditorModal .editor-close-btn:hover{ background-color:#ff6666; color:#000; }
+
+    #ooEditorModal .editor-body{
+      position:relative!important; flex:1 1 auto!important; min-height:0!important; overflow:hidden!important;
+    }
+    #ooEditorModal #oo-editor{ width:100%!important; height:100%!important; }
+
+    #ooEditorModal .oo-warm-overlay{
+      position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
+      background:rgba(0,0,0,.14); z-index:5; font-weight:600; font-size:14px;
+    }
+
+    html.oo-lock, body.oo-lock{ height:100%!important; overflow:hidden!important; }
+  `;
+  document.head.appendChild(style);
+}
+
+// Theme-aware background so there’s no white/gray edge
+function applyModalBg(modal){
+  const isDark = document.documentElement.classList.contains('dark-mode')
+    || /^(1|true)$/i.test(localStorage.getItem('darkMode') || '');
+  const cs = getComputedStyle(document.documentElement);
+  const bg = (cs.getPropertyValue('--bg-color') || cs.getPropertyValue('--pre-bg') || '').trim()
+           || (isDark ? '#121212' : '#ffffff');
+  modal.style.setProperty('--oo-modal-bg', bg);
+}
+
+function lockPageScroll(on){
+  [document.documentElement, document.body].forEach(el => el.classList.toggle('oo-lock', !!on));
+}
+
+function ensureOoFullscreenModal(){
+  ensureOoModalCss();
+  let modal = document.getElementById('ooEditorModal');
+  if (!modal){
+    modal = document.createElement('div');
+    modal.id = 'ooEditorModal';
+    modal.innerHTML = `
+      <div class="editor-header">
+        <img class="editor-logo" src="/assets/logo.svg" alt="FileRise logo" />
+        <h3 class="editor-title"></h3>
+        <button id="closeEditorX" class="editor-close-btn" aria-label="${t("close") || "Close"}">&times;</button>
+      </div>
+      <div class="editor-body">
+        <div id="oo-editor"></div>
+      </div>
+    `;
+    document.body.appendChild(modal);
+  } else {
+    modal.querySelector('.editor-body').innerHTML = `<div id="oo-editor"></div>`;
+    // ensure logo exists and is placed before title when reusing
+    const header = modal.querySelector('.editor-header');
+    if (!header.querySelector('.editor-logo')){
+      const img = document.createElement('img');
+      img.className = 'editor-logo';
+      img.src = '/assets/logo.svg';
+      img.alt = 'FileRise logo';
+      header.insertBefore(img, header.querySelector('.editor-title'));
+    } else {
+      // make sure order is logo -> title
+      const logo = header.querySelector('.editor-logo');
+      const title = header.querySelector('.editor-title');
+      if (logo.nextElementSibling !== title){
+        header.insertBefore(logo, title);
+      }
+    }
+  }
+  applyModalBg(modal);
+  modal.style.display = 'flex';
+  modal.focus();
+  lockPageScroll(true);
+  return modal;
+}
+
+// Overlay lives INSIDE the modal body
+function setOoBusy(modal, on, label='Preparing editor…'){
+  if (!modal) return;
+  const body = modal.querySelector('.editor-body');
+  let ov = body.querySelector('.oo-warm-overlay');
+  if (on){
+    if (!ov){
+      ov = document.createElement('div');
+      ov.className = 'oo-warm-overlay';
+      ov.textContent = label;
+      body.appendChild(ov);
+    }
+  } else if (ov){
+    ov.remove();
+  }
+}
+
+// Hidden warm-up DocEditor (creates DS session/cache) then destroys
+async function warmDocServerOnce(cfg){
+  let host = null, warmEditor = null;
+  try{
+    host = document.createElement('div');
+    host.id = 'oo-warm-' + Math.random().toString(36).slice(2);
+    Object.assign(host.style, {
+      position:'absolute', left:'-99999px', top:'0', width:'2px', height:'2px', overflow:'hidden'
+    });
+    document.body.appendChild(host);
+
+    const warmCfg = JSON.parse(JSON.stringify(cfg));
+    warmCfg.events = Object.assign({}, warmCfg.events, { onAppReady(){}, onDocumentReady(){} });
+
+    warmEditor = new window.DocsAPI.DocEditor(host.id, warmCfg);
+    await new Promise(res => setTimeout(res, OO_WARM_MS));
+  }catch{} finally{
+    try{ warmEditor?.destroyEditor?.(); }catch{}
+    try{ host?.remove(); }catch{}
+  }
+}
+
+// Full-screen OO open with hidden warm-up EVERY click, then real editor
+async function openOnlyOffice(fileName, folder){
+  let editor = null;
+  let removeThemeListener = () => {};
+  let cfg = null;
+  let userClosed = false;
+
+  // Build our full-screen modal
+  const modal = ensureOoFullscreenModal();
+  const titleEl = modal.querySelector('.editor-title');
+  if (titleEl) titleEl.innerHTML = `${t("editing")}: ${escapeHTML(fileName)}`;
+
+  const destroy = (removeModal = true) => {
+    try { editor?.destroyEditor?.(); } catch {}
+    try { removeThemeListener(); } catch {}
+    if (removeModal) { try { modal.remove(); } catch {} }
+    lockPageScroll(false);
+  };
+  const onClose = () => { userClosed = true; destroy(true); };
+
+  modal.querySelector('#closeEditorX')?.addEventListener('click', onClose);
+  modal.addEventListener('keydown', (e) => { if (e.key === 'Escape') onClose(); });
+
+  try{
+    // 1) Fetch config
+    const url = `/api/onlyoffice/config.php?folder=${encodeURIComponent(folder)}&file=${encodeURIComponent(fileName)}`;
+    const resp = await fetch(url, { credentials: 'include' });
+    const text = await resp.text();
+
+    try { cfg = JSON.parse(text); } catch {
+      throw new Error(`ONLYOFFICE config parse failed (HTTP ${resp.status}). First 120 chars: ${text.slice(0,120)}`);
+    }
+    if (!resp.ok) throw new Error(cfg?.error || `ONLYOFFICE config HTTP ${resp.status}`);
+
+    // 2) Preconnect + load DocsAPI
+    injectOOPreconnect(cfg.documentServerOrigin || null);
+    await ensureOnlyOfficeApi(cfg.docs_api_js, cfg.documentServerOrigin);
+
+    // 3) Theme + base events
+    const isDark = document.documentElement.classList.contains('dark-mode')
+      || /^(1|true)$/i.test(localStorage.getItem('darkMode') || '');
+    cfg.events = (cfg.events && typeof cfg.events === 'object') ? cfg.events : {};
+    cfg.editorConfig = cfg.editorConfig || {};
+    cfg.editorConfig.customization = Object.assign(
+      {}, cfg.editorConfig.customization, { uiTheme: isDark ? 'theme-dark' : 'theme-light' }
+    );
+    cfg.events.onRequestClose = () => onClose();
+
+    // 4) Warm EVERY click 
+    if (ALWAYS_WARM_OO && !userClosed){
+      setOoBusy(modal, true);          // overlay INSIDE modal body
+      await warmDocServerOnce(cfg);
+      if (userClosed) return;
+    }
+
+    // 5) Launch visible editor in full-screen modal
+    cfg.events.onDocumentReady = () => { setOoBusy(modal, false); };
+    editor = new window.DocsAPI.DocEditor('oo-editor', cfg);
+
+    // Live theme switching + keep modal bg in sync
+    const darkToggle = document.getElementById('darkModeToggle');
+    const onDarkToggle = () => {
+      const nowDark = document.documentElement.classList.contains('dark-mode');
+      if (editor && typeof editor.setTheme === 'function') {
+        editor.setTheme(nowDark ? 'dark' : 'light');
+      }
+      applyModalBg(modal);
+    };
+    if (darkToggle) {
+      darkToggle.addEventListener('click', onDarkToggle);
+      removeThemeListener = () => darkToggle.removeEventListener('click', onDarkToggle);
+    }
+  }catch(e){
+    console.error('[ONLYOFFICE] failed to open:', e);
+    showToast((e && e.message) ? e.message : 'Unable to open ONLYOFFICE editor.');
+    destroy(true);
+  }
+}
+// ---- /ONLYOFFICE integration ----------------------------------------------
+
+// ==== Editor (CodeMirror) path =============================================
+
 function getModeForFile(fileName) {
  const dot = fileName.lastIndexOf(".");
  const ext = dot >= 0 ? fileName.slice(dot + 1).toLowerCase() : "";
@@ -452,38 +644,36 @@ export async function editFile(fileName, folder) {
        const normName = normalizeModeName(desiredMode) || "text/plain";
        const initialMode = (forcePlainText || !isModeRegistered(normName)) ? "text/plain" : desiredMode;

-        const cmOptions = {
-          lineNumbers: !forcePlainText,
-          mode: initialMode,
-          theme,
-          viewportMargin: forcePlainText ? 20 : Infinity,
-          lineWrapping: false
-        };
-
-        const editor = window.CodeMirror.fromTextArea(
+        const cm = window.CodeMirror.fromTextArea(
          document.getElementById("fileEditor"),
-          cmOptions
+          {
+            lineNumbers: !forcePlainText,
+            mode: initialMode,
+            theme,
+            viewportMargin: forcePlainText ? 20 : Infinity,
+            lineWrapping: false
+          }
        );
-        window.currentEditor = editor;
+        window.currentEditor = cm;

        setTimeout(adjustEditorSize, 50);
        observeModalResize(modal);

        // Font controls (now that editor exists)
        let currentFontSize = 14;
-        const wrapper = editor.getWrapperElement();
+        const wrapper = cm.getWrapperElement();
        wrapper.style.fontSize = currentFontSize + "px";
-        editor.refresh();
+        cm.refresh();

        decBtn.addEventListener("click", function () {
          currentFontSize = Math.max(8, currentFontSize - 2);
          wrapper.style.fontSize = currentFontSize + "px";
-          editor.refresh();
+          cm.refresh();
        });
        incBtn.addEventListener("click", function () {
          currentFontSize = Math.min(32, currentFontSize + 2);
          wrapper.style.fontSize = currentFontSize + "px";
-          editor.refresh();
+          cm.refresh();
        });

        // Save
@@ -496,7 +686,7 @@ export async function editFile(fileName, folder) {
        // Theme switch
        function updateEditorTheme() {
          const isDark = document.body.classList.contains("dark-mode");
-          editor.setOption("theme", isDark ? "material-darker" : "default");
+          cm.setOption("theme", isDark ? "material-darker" : "default");
        }
        const toggle = document.getElementById("darkModeToggle");
        if (toggle) toggle.addEventListener("click", updateEditorTheme);
@@ -506,12 +696,10 @@ export async function editFile(fileName, folder) {
          if (!canceled && !forcePlainText) {
            const nn = normalizeModeName(desiredMode);
            if (nn && isModeRegistered(nn)) {
-              editor.setOption("mode", desiredMode);
+              cm.setOption("mode", desiredMode);
            }
          }
-        }).catch(() => {
-          // If the mode truly fails to load, we just stay in plain text
-        });
+        }).catch(() => { /* stay in plain text */ });
      });
    })
    .catch(error => {
--- a/public/js/fileListView.js
+++ b/public/js/fileListView.js
@@ -182,7 +182,7 @@ function makeBadge(state) {
    el.classList.add('watched');
    el.textContent = (t('watched') || t('viewed') || 'Watched');
    el.style.borderColor = 'rgba(34,197,94,.45)';
-    el.style.background  = 'rgba(34,197,94,.12)';
+    el.style.background  = 'rgba(34,197,94,.15)';
    el.style.color       = '#22c55e';
    return el;
  }
@@ -191,9 +191,9 @@ function makeBadge(state) {
    const pct = Math.max(1, Math.min(99, Math.round((state.seconds / state.duration) * 100)));
    el.classList.add('progress');
    el.textContent = `${pct}%`;
-    el.style.borderColor = 'rgba(245,158,11,.45)';
-    el.style.background  = 'rgba(245,158,11,.12)';
-    el.style.color       = '#f59e0b';
+    el.style.borderColor = 'rgba(234,88,12,.55)';
+    el.style.background  = 'rgba(234,88,12,.18)';
+    el.style.color       = '#ea580c';
    return el;
  }

--- a/public/js/filePreview.js
+++ b/public/js/filePreview.js
@@ -123,6 +123,21 @@ export function openShareModal(file, folder) {
 const IMG_RE = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i;
 const VID_RE = /\.(mp4|mkv|webm|mov|ogv)$/i;
 const AUD_RE = /\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i;
+const ARCH_RE = /\.(zip|rar|7z|gz|bz2|xz|tar)$/i;
+const CODE_RE = /\.(js|mjs|ts|tsx|json|yml|yaml|xml|html?|css|scss|less|php|py|rb|go|rs|c|cpp|h|hpp|java|cs|sh|bat|ps1)$/i;
+const TXT_RE  = /\.(txt|rtf|md|log)$/i;
+
+function getIconForFile(name) {
+  const lower = (name || '').toLowerCase();
+  if (IMG_RE.test(lower)) return 'image';
+  if (VID_RE.test(lower)) return 'ondemand_video';
+  if (AUD_RE.test(lower)) return 'audiotrack';
+  if (lower.endsWith('.pdf')) return 'picture_as_pdf';
+  if (ARCH_RE.test(lower)) return 'archive';
+  if (CODE_RE.test(lower)) return 'code';
+  if (TXT_RE.test(lower)) return 'description';
+  return 'insert_drive_file';
+}

 function ensureMediaModal() {
  let overlay = document.getElementById("filePreviewModal");
@@ -152,109 +167,166 @@ function ensureMediaModal() {
  const navFg     = '#fff';
  const navBorder = isDark ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)';

+  // fixed top bar; pad-right to avoid overlap with absolute close “×”
  overlay.innerHTML = `
    <div class="modal-content media-modal" style="
      position: relative;
      max-width: 92vw;
-      max-height: 92vh;
      width: 92vw;
+      max-height: 92vh;
+      height: 92vh;
      box-sizing: border-box;
-      padding: 12px;
      background: ${panelBg};
      color: ${textCol};
      overflow: hidden;
      border-radius: 10px;
+      display:flex; flex-direction:column;
    ">
-      <div class="media-stage" style="position:relative; display:flex; align-items:center; justify-content:center; height: calc(92vh - 8px);">
-        <!-- filename badge (top-left) -->
-        <div class="media-title-badge" style="
-          position:absolute; top:8px; left:12px; max-width:60vw;
-          padding:4px 10px; border-radius:10px;
-          background: ${isDark ? 'rgba(0,0,0,.55)' : 'rgba(255,255,255,.65)'};
-          color: ${isDark ? '#fff' : '#111'};
-          font-weight:600; font-size:13px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; z-index:1002;">
+      <!-- Top bar -->
+      <div class="media-topbar" style="
+        flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
+        height:44px; padding:6px 12px; padding-right:56px; gap:10px;
+        border-bottom:1px solid ${isDark ? 'rgba(255,255,255,.12)' : 'rgba(0,0,0,.08)'};
+        background:${panelBg};
+      ">
+        <div class="media-title" style="display:flex; align-items:center; gap:8px; min-width:0;">
+          <span class="material-icons title-icon" style="
+            width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
+            font-size:22px; line-height:1; opacity:${isDark ? '0.96' : '0.9'};">
+            insert_drive_file
+          </span>
+          <div class="title-text" style="font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div>
        </div>
-
-        <!-- top-right actions row (aligned with your X at top:10px) -->
-        <div class="media-actions-bar" style="
-          position:absolute; top:10px; right:56px; display:flex; gap:6px; align-items:center; z-index:1002;">
+        <div class="media-right" style="display:flex; align-items:center; gap:8px;">
          <span class="status-chip" style="
-            display:none; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1;
-            border:1px solid rgba(250,204,21,.45); background:rgba(250,204,21,.15); color:#facc15;"></span>
-          <div class="action-group" style="display:flex; gap:6px;"></div>
+   display:none; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1;
+   border:1px solid transparent; background:transparent; color:inherit;"></span>
+          <div class="action-group" style="display:flex; gap:8px; align-items:center;"></div>
        </div>
+      </div>

-        <!-- your absolute close X -->
-        <span id="closeFileModal" class="close-image-modal" title="${t('close')}">&times;</span>
-
-        <!-- centered media -->
+      <!-- Stage -->
+      <div class="media-stage" style="position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center; overflow:hidden;">
        <div class="file-preview-container" style="position:relative; text-align:center; flex:1; min-width:0;"></div>

-        <!-- high-contrast prev/next -->
+        <!-- prev/next = rounded rectangles with centered glyphs -->
        <button class="nav-left"  aria-label="${t('previous')||'Previous'}" style="
          position:absolute; left:8px; top:50%; transform:translateY(-50%);
-          height:56px; min-width:44px; padding:0 12px; font-size:42px; line-height:1;
+          height:56px; min-width:48px; padding:0 14px;
+          display:flex; align-items:center; justify-content:center;
+          font-size:38px; line-height:0;
          background:${navBg}; color:${navFg}; border:1px solid ${navBorder};
          text-shadow: 0 1px 2px rgba(0,0,0,.6);
          border-radius:12px; cursor:pointer; display:none; z-index:1001; backdrop-filter: blur(2px);
          box-shadow: 0 2px 8px rgba(0,0,0,.35);">‹</button>
        <button class="nav-right" aria-label="${t('next')||'Next'}" style="
          position:absolute; right:8px; top:50%; transform:translateY(-50%);
-          height:56px; min-width:44px; padding:0 12px; font-size:42px; line-height:1;
+          height:56px; min-width:48px; padding:0 14px;
+          display:flex; align-items:center; justify-content:center;
+          font-size:38px; line-height:0;
          background:${navBg}; color:${navFg}; border:1px solid ${navBorder};
          text-shadow: 0 1px 2px rgba(0,0,0,.6);
          border-radius:12px; cursor:pointer; display:none; z-index:1001; backdrop-filter: blur(2px);
          box-shadow: 0 2px 8px rgba(0,0,0,.35);">›</button>
      </div>
+
+      <!-- Absolute close “×” (like original), themed + hover behavior -->
+      <span id="closeFileModal" class="close-image-modal" title="${t('close')}" style="
+        position:absolute; top:8px; right:10px; z-index:1002;
+        width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
+        font-size:22px; cursor:pointer; user-select:none; border-radius:50%; transition:all .15s ease;
+      ">&times;</span>
    </div>`;

  document.body.appendChild(overlay);

+  // theme the close “×” for visibility + hover rules that match your site:
+  const closeBtn = overlay.querySelector("#closeFileModal");
+  function paintCloseBase() {
+    closeBtn.style.backgroundColor = 'transparent';
+    closeBtn.style.color = '#e11d48'; // base red X
+    closeBtn.style.boxShadow = 'none';
+  }
+  function onCloseHoverEnter() {
+    const dark = document.documentElement.classList.contains('dark-mode');
+    closeBtn.style.backgroundColor = '#ef4444'; // red fill
+    closeBtn.style.color = dark ? '#000' : '#fff'; // X: black in dark / white in light
+    closeBtn.style.boxShadow = '0 0 6px rgba(239,68,68,.6)';
+  }
+  function onCloseHoverLeave() { paintCloseBase(); }
+  paintCloseBase();
+  closeBtn.addEventListener('mouseenter', onCloseHoverEnter);
+  closeBtn.addEventListener('mouseleave', onCloseHoverLeave);
+
  function closeModal() {
    try { overlay.querySelectorAll("video,audio").forEach(m => { try{m.pause()}catch(_){}}); } catch {}
    if (overlay._onKey) window.removeEventListener('keydown', overlay._onKey);
    overlay.remove();
  }
-  overlay.querySelector("#closeFileModal").addEventListener("click", closeModal);
+  closeBtn.addEventListener("click", closeModal);
  overlay.addEventListener("click", (e) => { if (e.target === overlay) closeModal(); });

  return overlay;
 }

 function setTitle(overlay, name) {
-  const el = overlay.querySelector('.media-title-badge');
-  if (el) el.textContent = name || '';
+  const textEl = overlay.querySelector('.title-text');
+  const iconEl = overlay.querySelector('.title-icon');
+  if (textEl) {
+    textEl.textContent = name || '';
+    textEl.setAttribute('title', name || '');
+  }
+  if (iconEl) {
+    iconEl.textContent = getIconForFile(name);
+    // keep the icon legible in both themes
+    const dark = document.documentElement.classList.contains('dark-mode');
+    iconEl.style.color = dark ? '#f5f5f5' : '#111111';
+    iconEl.style.opacity = dark ? '0.96' : '0.9';
+  }
 }

-function makeMI(name, title) {
+// Topbar icon (theme-aware) used for image tools + video actions
+function makeTopIcon(name, title) {
  const b = document.createElement('button');
-  b.className = `material-icons ${name}`;
-  b.textContent = name; // Material Icons font
+  b.className = 'material-icons';
+  b.textContent = name;
  b.title = title;
+
+  const dark = document.documentElement.classList.contains('dark-mode');
+
  Object.assign(b.style, {
-    width: "32px",
-    height: "32px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: "rgba(0,0,0,.25)",
-    border: "1px solid rgba(255,255,255,.25)",
-    cursor: "pointer",
-    userSelect: "none",
-    fontSize: "20px",
-    padding: "0",
-    borderRadius: "8px",
-    color: "#fff",
-    lineHeight: "1"
+    width: '32px',
+    height: '32px',
+    borderRadius: '8px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: dark ? '1px solid rgba(255,255,255,.25)' : '1px solid rgba(0,0,0,.15)',
+    background: dark ? 'rgba(255,255,255,.14)' : 'rgba(0,0,0,.08)',
+    cursor: 'pointer',
+    fontSize: '20px',
+    lineHeight: '1',
+    color: dark ? '#f5f5f5' : '#111',
+    boxShadow: dark ? '0 1px 2px rgba(0,0,0,.6)' : '0 1px 1px rgba(0,0,0,.08)'
  });
+
+  b.addEventListener('mouseenter', () => {
+    const darkNow = document.documentElement.classList.contains('dark-mode');
+    b.style.background = darkNow ? 'rgba(255,255,255,.22)' : 'rgba(0,0,0,.14)';
+  });
+  b.addEventListener('mouseleave', () => {
+    const darkNow = document.documentElement.classList.contains('dark-mode');
+    b.style.background = darkNow ? 'rgba(255,255,255,.14)' : 'rgba(0,0,0,.08)';
+  });
+
  return b;
 }

 function setNavVisibility(overlay, showPrev, showNext) {
  const prev = overlay.querySelector('.nav-left');
  const next = overlay.querySelector('.nav-right');
-  prev.style.display = showPrev ? 'inline-flex' : 'none';
-  next.style.display = showNext ? 'inline-flex' : 'none';
+  prev.style.display = showPrev ? 'flex' : 'none';
+  next.style.display = showNext ? 'flex' : 'none';
 }

 function setRowWatchedBadge(name, watched) {
@@ -280,8 +352,8 @@ function setRowWatchedBadge(name, watched) {
 export function previewFile(fileUrl, fileName) {
  const overlay    = ensureMediaModal();
  const container  = overlay.querySelector(".file-preview-container");
-  const actionWrap = overlay.querySelector(".media-actions-bar .action-group");
-  const statusChip = overlay.querySelector(".media-actions-bar .status-chip");
+  const actionWrap = overlay.querySelector(".media-right .action-group");
+  const statusChip = overlay.querySelector(".media-right .status-chip");

  // replace nav buttons to clear old listeners
  let prevBtn = overlay.querySelector('.nav-left');
@@ -320,10 +392,11 @@ export function previewFile(fileUrl, fileName) {
    img.dataset.rotate = 0;
    container.appendChild(img);

-    const zoomInBtn   = makeMI('zoom_in',      t('zoom_in')       || 'Zoom In');
-    const zoomOutBtn  = makeMI('zoom_out',     t('zoom_out')      || 'Zoom Out');
-    const rotateLeft  = makeMI('rotate_left',  t('rotate_left')   || 'Rotate Left');
-    const rotateRight = makeMI('rotate_right', t('rotate_right')  || 'Rotate Right');
+    // topbar-aligned, theme-aware icons
+    const zoomInBtn   = makeTopIcon('zoom_in',      t('zoom_in')       || 'Zoom In');
+    const zoomOutBtn  = makeTopIcon('zoom_out',     t('zoom_out')      || 'Zoom Out');
+    const rotateLeft  = makeTopIcon('rotate_left',  t('rotate_left')   || 'Rotate Left');
+    const rotateRight = makeTopIcon('rotate_right', t('rotate_right')  || 'Rotate Right');
    actionWrap.appendChild(zoomInBtn);
    actionWrap.appendChild(zoomOutBtn);
    actionWrap.appendChild(rotateLeft);
@@ -405,14 +478,11 @@ export function previewFile(fileUrl, fileName) {
    video.style.objectFit = "contain";
    container.appendChild(video);

-    const markBtn  = document.createElement('button');
-    const clearBtn = document.createElement('button');
-    markBtn.className  = 'btn btn-sm btn-success';
-    clearBtn.className = 'btn btn-sm btn-secondary';
-    markBtn.textContent  = t("mark_as_viewed") || "Mark as viewed";
-    clearBtn.textContent = t("clear_progress") || "Clear progress";
-    actionWrap.appendChild(markBtn);
-    actionWrap.appendChild(clearBtn);
+    // Top-right action icons (Material icons, theme-aware)
+    const markBtnIcon  = makeTopIcon('check_circle', t("mark_as_viewed") || "Mark as viewed");
+    const clearBtnIcon = makeTopIcon('restart_alt',  t("clear_progress") || "Clear progress");
+    actionWrap.appendChild(markBtnIcon);
+    actionWrap.appendChild(clearBtnIcon);

    const videos = (Array.isArray(fileData) ? fileData : []).filter(f => VID_RE.test(f.name));
    overlay.mediaType  = 'video';
@@ -453,15 +523,14 @@ export function previewFile(fileUrl, fileName) {
      if (!statusChip) return;
      // Completed
      if (state && state.completed) {
-        
        statusChip.textContent = (t('viewed') || 'Viewed') + ' ✓';
        statusChip.style.display = 'inline-block';
        statusChip.style.borderColor = 'rgba(34,197,94,.45)';
        statusChip.style.background  = 'rgba(34,197,94,.15)';
        statusChip.style.color       = '#22c55e';
-        markBtn.style.display  = 'none';
-        clearBtn.style.display = '';
-        clearBtn.textContent   = t('reset_progress') || t('clear_progress') || 'Reset';
+        markBtnIcon.style.display  = 'none';
+        clearBtnIcon.style.display = '';
+        clearBtnIcon.title = t('reset_progress') || t('clear_progress') || 'Reset';
        return;
      }
      // In progress
@@ -469,18 +538,20 @@ export function previewFile(fileUrl, fileName) {
        const pct = Math.max(1, Math.min(99, Math.round((state.seconds / state.duration) * 100)));
        statusChip.textContent = `${pct}%`;
        statusChip.style.display = 'inline-block';
-        statusChip.style.borderColor = 'rgba(250,204,21,.45)';
-        statusChip.style.background  = 'rgba(250,204,21,.15)';
-        statusChip.style.color       = '#facc15';
-        markBtn.style.display  = '';
-        clearBtn.style.display = '';
-        clearBtn.textContent   = t('reset_progress') || t('clear_progress') || 'Reset';
+        const dark = document.documentElement.classList.contains('dark-mode');
+ const ORANGE_HEX = '#ea580c'; // darker orange (works in light/dark)
+ statusChip.style.color       = ORANGE_HEX;
+ statusChip.style.borderColor = dark ? 'rgba(234,88,12,.55)' : 'rgba(234,88,12,.45)';  // #ea580c @ different alphas
+ statusChip.style.background  = dark ? 'rgba(234,88,12,.18)' : 'rgba(234,88,12,.12)';
+        markBtnIcon.style.display  = '';
+        clearBtnIcon.style.display = '';
+        clearBtnIcon.title = t('reset_progress') || t('clear_progress') || 'Reset';
        return;
      }
      // No progress
      statusChip.style.display = 'none';
-      markBtn.style.display  = '';
-      clearBtn.style.display = 'none';
+      markBtnIcon.style.display  = '';
+      clearBtnIcon.style.display = 'none';
    }

    function bindVideoEvents(nm) {
@@ -494,8 +565,8 @@ export function previewFile(fileUrl, fileName) {
          if (state && Number.isFinite(state.seconds) && state.seconds > 0 && state.seconds < (video.duration || Infinity)) {
            video.currentTime = state.seconds;
            const seconds = Math.floor(video.currentTime || 0);
-const duration = Math.floor(video.duration || 0);
-setFileProgressBadge(nm, seconds, duration);
+            const duration = Math.floor(video.duration || 0);
+            setFileProgressBadge(nm, seconds, duration);
            showToast((t("resumed_from") || "Resumed from") + " " + Math.floor(state.seconds) + "s");
          } else {
            const ls = localStorage.getItem(lsKey(nm));
@@ -528,14 +599,14 @@ setFileProgressBadge(nm, seconds, duration);
        renderStatus({ seconds: duration, duration, completed: true });
      });

-      markBtn.onclick = async () => {
+      markBtnIcon.onclick = async () => {
        const duration = Math.floor(video.duration || 0);
        await sendProgress({ nm, seconds: duration, duration, completed: true });
        showToast(t("marked_viewed") || "Marked as viewed");
        setFileWatchedBadge(nm, true);
        renderStatus({ seconds: duration, duration, completed: true });
      };
-      clearBtn.onclick = async () => {
+      clearBtnIcon.onclick = async () => {
        await sendProgress({ nm, seconds: 0, duration: null, completed: false, clear: true });
        try { localStorage.removeItem(lsKey(nm)); } catch {}
        showToast(t("progress_cleared") || "Progress cleared");
--- a/resources/dark-admin-panel.png
+++ b/resources/dark-admin-panel.png
--- a/resources/dark-gallery.png
+++ b/resources/dark-gallery.png
--- a/resources/dark-header.png
+++ b/resources/dark-header.png
--- a/resources/dark-preview.png
+++ b/resources/dark-preview.png
--- a/resources/dark-sidebar.png
+++ b/resources/dark-sidebar.png
--- a/resources/filerise-v1.8.10-latest.gif
+++ b/resources/filerise-v1.8.10-latest.gif
--- a/resources/light-admin-panel.png
+++ b/resources/light-admin-panel.png
--- a/resources/light-drag-file.png
+++ b/resources/light-drag-file.png
--- a/resources/light-preview.png
+++ b/resources/light-preview.png
--- a/resources/light-share.png
+++ b/resources/light-share.png
--- a/resources/light-topbar.png
+++ b/resources/light-topbar.png
--- a/resources/light-trash.png
+++ b/resources/light-trash.png
--- a/resources/light-user-panel.png
+++ b/resources/light-user-panel.png
--- a/src/controllers/OnlyOfficeController.php
+++ b/src/controllers/OnlyOfficeController.php
@@ -16,6 +16,23 @@ private const OO_SUPPORTED_EXTS = [
    'ppt','pptx','odp',
    'pdf'
  ];
+
+/** Origin that the Document Server should use to reach FileRise fast (internal URL) */
+private function effectiveFileOriginForDocs(): string
+{
+    $cfg = AdminModel::getConfig();
+    $oo  = is_array($cfg['onlyoffice'] ?? null) ? $cfg['onlyoffice'] : [];
+
+    // 1) explicit constant
+    if (defined('ONLYOFFICE_FILE_ORIGIN_FOR_DOCS') && ONLYOFFICE_FILE_ORIGIN_FOR_DOCS !== '') {
+        return (string)ONLYOFFICE_FILE_ORIGIN_FOR_DOCS;
+    }
+    // 2) admin.json setting
+    if (!empty($oo['fileOriginForDocs'])) return (string)$oo['fileOriginForDocs'];
+
+    // 3) fallback: whatever the public sees (may hairpin, but still works)
+    return $this->effectivePublicOrigin();
+}
  
  // Never editable via OO (we’ll always set edit=false for these)
  private const OO_NEVER_EDIT = ['pdf'];
@@ -127,117 +144,119 @@ private function ooLog(string $level, string $msg): void

    /** GET /api/onlyoffice/status.php */
    public function status(): void
-    {
-        header('Content-Type: application/json; charset=utf-8');
-        header('Cache-Control: no-store');
+{
+    header('Content-Type: application/json; charset=utf-8');
+    header('Cache-Control: no-store');

-        $enabled   = $this->effectiveEnabled();
-        $docsOrig  = $this->effectiveDocsOrigin();
-        $secret    = $this->effectiveSecret();
+    $enabled   = $this->effectiveEnabled();
+    $docsOrig  = $this->effectiveDocsOrigin();
+    $secret    = $this->effectiveSecret();

-        // Must have docs origin and secret to actually function
-        $enabled = $enabled && ($docsOrig !== '') && ($secret !== '');
+    // Must have docs origin and secret to actually function
+    $enabled = $enabled && ($docsOrig !== '') && ($secret !== '');

-        $exts = self::OO_SUPPORTED_EXTS;
-        // If you want the extras:
-        $exts = array_values(array_unique(array_merge($exts, self::OO_VIEW_ONLY_EXTRAS)));
-        
-        echo json_encode(['enabled' => (bool)$enabled, 'exts' => $exts], JSON_UNESCAPED_SLASHES);
-    }
+    $exts = self::OO_SUPPORTED_EXTS;
+    $exts = array_values(array_unique(array_merge($exts, self::OO_VIEW_ONLY_EXTRAS)));
+
+    echo json_encode([
+        'enabled'      => (bool)$enabled,
+        'exts'         => $exts,
+        'docsOrigin'   => $docsOrig,                     // <-- for preconnect/api.js
+        'publicOrigin' => $this->effectivePublicOrigin() // <-- informational
+    ], JSON_UNESCAPED_SLASHES);
+}

    /** GET /api/onlyoffice/config.php?folder=...&file=... */
-    public function config(): void
-    {
-        header('Content-Type: application/json; charset=utf-8');
-        header('Cache-Control: no-store');
+    // --- config(): use the DocServer-facing origin for fileUrl & callbackUrl ---
+public function config(): void
+{
+    header('Content-Type: application/json; charset=utf-8');
+    header('Cache-Control: no-store');

-        @session_start();
-        $user   = $_SESSION['username'] ?? 'anonymous';
-        $perms  = [];
-        $isAdmin = \ACL::isAdmin($perms);
+    @session_start();
+    $user   = $_SESSION['username'] ?? 'anonymous';
+    $perms  = [];
+    $isAdmin = \ACL::isAdmin($perms);

-        // Effective toggles
-        $enabled    = $this->effectiveEnabled();
-        $docsOrigin = rtrim($this->effectiveDocsOrigin(), '/');
-        $secret     = $this->effectiveSecret();
-        if (!$enabled) { http_response_code(404); echo '{"error":"ONLYOFFICE disabled"}'; return; }
-        if ($secret === '') { http_response_code(500); echo '{"error":"ONLYOFFICE_JWT_SECRET not configured"}'; return; }
-        if ($docsOrigin === '') { http_response_code(500); echo '{"error":"ONLYOFFICE_DOCS_ORIGIN not configured"}'; return; }
-        if (!defined('UPLOAD_DIR')) { http_response_code(500); echo '{"error":"UPLOAD_DIR not defined"}'; return; }
+    $enabled     = $this->effectiveEnabled();
+    $docsOrigin  = rtrim($this->effectiveDocsOrigin(), '/');
+    $secret      = $this->effectiveSecret();

-        // Inputs
-        $folder = \ACL::normalizeFolder((string)($_GET['folder'] ?? 'root'));
-        $file   = basename((string)($_GET['file'] ?? ''));
-        if ($file === '') { http_response_code(400); echo '{"error":"Bad request"}'; return; }
+    if (!$enabled) { http_response_code(404); echo '{"error":"ONLYOFFICE disabled"}'; return; }
+    if ($secret === '') { http_response_code(500); echo '{"error":"ONLYOFFICE_JWT_SECRET not configured"}'; return; }
+    if ($docsOrigin === '') { http_response_code(500); echo '{"error":"ONLYOFFICE_DOCS_ORIGIN not configured"}'; return; }
+    if (!defined('UPLOAD_DIR')) { http_response_code(500); echo '{"error":"UPLOAD_DIR not defined"}'; return; }

-        // ACL
-        if (!\ACL::canRead($user, $perms, $folder)) { http_response_code(403); echo '{"error":"Forbidden"}'; return; }
-        $canEdit = \ACL::canEdit($user, $perms, $folder);
+    $folder = \ACL::normalizeFolder((string)($_GET['folder'] ?? 'root'));
+    $file   = basename((string)($_GET['file'] ?? ''));
+    if ($file === '') { http_response_code(400); echo '{"error":"Bad request"}'; return; }

-        // Path
-        $base = rtrim(UPLOAD_DIR, "/\\") . DIRECTORY_SEPARATOR;
-        $rel  = ($folder === 'root') ? '' : ($folder . '/');
-        $abs  = realpath($base . $rel . $file);
-        if (!$abs || !is_file($abs)) { http_response_code(404); echo '{"error":"Not found"}'; return; }
-        if (strpos($abs, realpath($base)) !== 0) { http_response_code(400); echo '{"error":"Invalid path"}'; return; }
+    if (!\ACL::canRead($user, $perms, $folder)) { http_response_code(403); echo '{"error":"Forbidden"}'; return; }
+    $canEdit = \ACL::canEdit($user, $perms, $folder);

-        // Public origin
-        $publicOrigin = $this->effectivePublicOrigin();
+    $base = rtrim(UPLOAD_DIR, "/\\") . DIRECTORY_SEPARATOR;
+    $rel  = ($folder === 'root') ? '' : ($folder . '/');
+    $abs  = realpath($base . $rel . $file);
+    if (!$abs || !is_file($abs)) { http_response_code(404); echo '{"error":"Not found"}'; return; }
+    if (strpos($abs, realpath($base)) !== 0) { http_response_code(400); echo '{"error":"Invalid path"}'; return; }

-        // Signed download
-        $exp  = time() + 10*60;
-        $data = json_encode(['f'=>$folder,'n'=>$file,'u'=>$user,'adm'=>$isAdmin,'exp'=>$exp], JSON_UNESCAPED_SLASHES);
-        $sig  = hash_hmac('sha256', $data, $secret, true);
-        $tok  = $this->b64uEnc($data) . '.' . $this->b64uEnc($sig);
-        $fileUrl = $publicOrigin . '/api/onlyoffice/signed-download.php?tok=' . rawurlencode($tok);
+    // IMPORTANT: use the internal/fast origin for DocServer fetch + callback
+    $fileOriginForDocs = rtrim($this->effectiveFileOriginForDocs(), '/');

-        // Callback
-        $cbExp = time() + 10*60;
-        $cbSig = hash_hmac('sha256', $folder.'|'.$file.'|'.$cbExp, $secret);
-        $callbackUrl = $publicOrigin . '/api/onlyoffice/callback.php'
-          . '?folder=' . rawurlencode($folder)
-          . '&file='   . rawurlencode($file)
-          . '&exp='    . $cbExp
-          . '&sig='    . $cbSig;
+    $exp  = time() + 10*60;
+    $data = json_encode(['f'=>$folder,'n'=>$file,'u'=>$user,'adm'=>$isAdmin,'exp'=>$exp], JSON_UNESCAPED_SLASHES);
+    $sig  = hash_hmac('sha256', $data, $secret, true);
+    $tok  = $this->b64uEnc($data) . '.' . $this->b64uEnc($sig);
+    $fileUrl = $fileOriginForDocs . '/api/onlyoffice/signed-download.php?tok=' . rawurlencode($tok);

-        // Doc type & key
-        $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION) ?: 'docx');
-        $docType = in_array($ext, ['xls','xlsx','ods','csv'], true) ? 'cell'
-                : (in_array($ext, ['ppt','pptx','odp'], true) ? 'slide' : 'word');
-        $key = substr(sha1($abs . '|' . (string)filemtime($abs)), 0, 20);
+    $cbExp = time() + 10*60;
+    $cbSig = hash_hmac('sha256', $folder.'|'.$file.'|'.$cbExp, $secret);
+    $callbackUrl = $fileOriginForDocs . '/api/onlyoffice/callback.php'
+      . '?folder=' . rawurlencode($folder)
+      . '&file='   . rawurlencode($file)
+      . '&exp='    . $cbExp
+      . '&sig='    . $cbSig;

-        $docsApiJs  = $docsOrigin . '/web-apps/apps/api/documents/api.js';
+    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION) ?: 'docx');
+    $docType = in_array($ext, ['xls','xlsx','ods','csv'], true) ? 'cell'
+            : (in_array($ext, ['ppt','pptx','odp'], true) ? 'slide' : 'word');
+    $key = substr(sha1($abs . '|' . (string)filemtime($abs)), 0, 20);

-        $cfgOut = [
-          'document' => [
-            'fileType' => $ext,
-            'key'      => $key,
-            'title'    => $file,
-            'url'      => $fileUrl,
-            'permissions' => [
-              'download' => true,
-              'print'    => true,
-              'edit' => $canEdit && !in_array($ext, self::OO_NEVER_EDIT, true),
-            ],
-          ],
-          'documentType' => $docType,
-          'editorConfig' => [
-            'callbackUrl' => $callbackUrl,
-            'user'        => ['id'=>$user, 'name'=>$user],
-            'lang'        => 'en',
-          ],
-          'type' => 'desktop',
-        ];
+    $docsApiJs  = $docsOrigin . '/web-apps/apps/api/documents/api.js';

-        // JWT sign cfg
-        $h = $this->b64uEnc(json_encode(['alg'=>'HS256','typ'=>'JWT']));
-        $p = $this->b64uEnc(json_encode($cfgOut, JSON_UNESCAPED_SLASHES));
-        $s = $this->b64uEnc(hash_hmac('sha256', "$h.$p", $secret, true));
-        $cfgOut['token'] = "$h.$p.$s";
-        $cfgOut['docs_api_js'] = $docsApiJs;
+    $cfgOut = [
+      'document' => [
+        'fileType' => $ext,
+        'key'      => $key,
+        'title'    => $file,
+        'url'      => $fileUrl,
+        'permissions' => [
+          'download' => true,
+          'print'    => true,
+          'edit'     => $canEdit && !in_array($ext, self::OO_NEVER_EDIT, true),
+        ],
+      ],
+      'documentType' => $docType,
+      'editorConfig' => [
+        'callbackUrl' => $callbackUrl,
+        'user'        => ['id'=>$user, 'name'=>$user],
+        'lang'        => 'en',
+      ],
+      'type' => 'desktop',
+    ];

-        echo json_encode($cfgOut, JSON_UNESCAPED_SLASHES);
-    }
+    // JWT sign cfg
+    $h = $this->b64uEnc(json_encode(['alg'=>'HS256','typ'=>'JWT']));
+    $p = $this->b64uEnc(json_encode($cfgOut, JSON_UNESCAPED_SLASHES));
+    $s = $this->b64uEnc(hash_hmac('sha256', "$h.$p", $secret, true));
+    $cfgOut['token'] = "$h.$p.$s";
+
+    // expose to client for preconnect/script load
+    $cfgOut['docs_api_js']          = $docsApiJs;
+    $cfgOut['documentServerOrigin'] = $docsOrigin;
+
+    echo json_encode($cfgOut, JSON_UNESCAPED_SLASHES);
+}

    /** POST /api/onlyoffice/callback.php?folder=...&file=...&exp=...&sig=... */
    public function callback(): void
@@ -343,41 +362,52 @@ private function ooLog(string $level, string $msg): void

    /** GET /api/onlyoffice/signed-download.php?tok=... */
    public function signedDownload(): void
-    {
-        header('X-Content-Type-Options: nosniff');
-        header('Cache-Control: no-store');
+{
+    header('X-Content-Type-Options: nosniff');
+    header('Cache-Control: no-store');

-        $secret = $this->effectiveSecret();
-        if ($secret === '') { http_response_code(403); return; }
+    $secret = $this->effectiveSecret();
+    if ($secret === '') { http_response_code(403); return; }

-        $tok = $_GET['tok'] ?? '';
-        if (!$tok || strpos($tok, '.') === false) { http_response_code(400); return; }
-        [$b64data, $b64sig] = explode('.', $tok, 2);
-        $data = $this->b64uDec($b64data);
-        $sig  = $this->b64uDec($b64sig);
-        if ($data === false || $sig === false) { http_response_code(400); return; }
+    $tok = $_GET['tok'] ?? '';
+    if (!$tok || strpos($tok, '.') === false) { http_response_code(400); return; }
+    [$b64data, $b64sig] = explode('.', $tok, 2);
+    $data = $this->b64uDec($b64data);
+    $sig  = $this->b64uDec($b64sig);
+    if ($data === false || $sig === false) { http_response_code(400); return; }

-        $calc = hash_hmac('sha256', $data, $secret, true);
-        if (!hash_equals($calc, $sig)) { http_response_code(403); return; }
+    $calc = hash_hmac('sha256', $data, $secret, true);
+    if (!hash_equals($calc, $sig)) { http_response_code(403); return; }

-        $payload = json_decode($data, true);
-        if (!$payload || !isset($payload['f'],$payload['n'],$payload['exp'])) { http_response_code(400); return; }
-        if (time() > (int)$payload['exp']) { http_response_code(403); return; }
+    $payload = json_decode($data, true);
+    if (!$payload || !isset($payload['f'],$payload['n'],$payload['exp'])) { http_response_code(400); return; }
+    if (time() > (int)$payload['exp']) { http_response_code(403); return; }

-        $folder = trim(str_replace('\\','/',$payload['f']),"/ \t\r\n");
-        if ($folder === '' || $folder === 'root') $folder = 'root';
-        $file   = basename((string)$payload['n']);
+    $folder = trim(str_replace('\\','/',$payload['f']),"/ \t\r\n");
+    if ($folder === '' || $folder === 'root') $folder = 'root';
+    $file   = basename((string)$payload['n']);

-        $base = rtrim(UPLOAD_DIR, "/\\") . DIRECTORY_SEPARATOR;
-        $rel  = ($folder === 'root') ? '' : ($folder . '/');
-        $abs  = realpath($base . $rel . $file);
-        if (!$abs || !is_file($abs)) { http_response_code(404); return; }
-        if (strpos($abs, realpath($base)) !== 0) { http_response_code(400); return; }
+    $base = rtrim(UPLOAD_DIR, "/\\") . DIRECTORY_SEPARATOR;
+    $rel  = ($folder === 'root') ? '' : ($folder . '/');
+    $abs  = realpath($base . $rel . $file);
+    if (!$abs || !is_file($abs)) { http_response_code(404); return; }
+    if (strpos($abs, realpath($base)) !== 0) { http_response_code(400); return; }

-        $mime = mime_content_type($abs) ?: 'application/octet-stream';
-        header('Content-Type: '.$mime);
-        header('Content-Length: '.filesize($abs));
-        header('Content-Disposition: inline; filename="' . rawurlencode($file) . '"');
-        readfile($abs);
+    // Common headers
+    $mime = mime_content_type($abs) ?: 'application/octet-stream';
+    $len  = filesize($abs);
+    header('Content-Type: '.$mime);
+    header('Content-Length: '.$len);
+    header('Content-Disposition: inline; filename="' . rawurlencode($file) . '"');
+    header('Accept-Ranges: none'); // OO doesn’t require ranges; avoids partial edge-cases
+
+    // ---- Key change: for HEAD, do NOT read the file ----
+    if (($_SERVER['REQUEST_METHOD'] ?? 'GET') === 'HEAD') {
+        // send headers only; no body
+        return;
    }
+
+    // GET → stream the file
+    readfile($abs);
+}
 }