chore(release): set APP_VERSION to v1.8.1 [skip ci]

release(v1.8.1): fix(security,onlyoffice): sanitize DS origin; safe api.js/iframe probes; better UX placeholder
chore(release): set APP_VERSION to v1.8.0 [skip ci]
2025-11-03 21:59:58 +00:00 · 2025-11-03 16:59:47 -05:00 · 2025-11-03 21:40:02 +00:00 · 2025-11-03 16:39:48 -05:00 · 2025-11-02 04:56:35 +00:00 · 2025-11-02 00:56:24 -04:00
22 changed files with 1849 additions and 437 deletions
--- a/.github/workflows/sync-changelog.yml
+++ b/.github/workflows/sync-changelog.yml
@@ -5,18 +5,25 @@ on:
  push:
    paths:
      - "CHANGELOG.md"
+  workflow_dispatch: {}

 permissions:
  contents: write

+concurrency:
+  group: bump-and-sync-${{ github.ref }}
+  cancel-in-progress: false
+
 jobs:
  bump_and_sync:
    runs-on: ubuntu-latest

    steps:
-      - uses: actions/checkout@v4
+      - name: Checkout FileRise
+        uses: actions/checkout@v4
        with:
          fetch-depth: 0
+          ref: ${{ github.ref }}

      - name: Extract version from commit message
        id: ver
@@ -32,6 +39,23 @@ jobs:
            echo "No release(vX.Y.Z) tag in commit message; skipping bump."
          fi

+      # Ensure we're on the branch and up to date BEFORE modifying files
+      - name: Ensure clean branch (no local mods), update from remote
+        if: steps.ver.outputs.version != ''
+        shell: bash
+        run: |
+          set -euo pipefail
+          # Be on a named branch that tracks the remote
+          git checkout -B "${{ github.ref_name }}" --track "origin/${{ github.ref_name }}" || git checkout -B "${{ github.ref_name }}"
+          # Make sure the worktree is clean
+          if ! git diff --quiet || ! git diff --cached --quiet; then
+            echo "::error::Working tree not clean before update. Aborting."
+            git status --porcelain
+            exit 1
+          fi
+          # Update branch
+          git pull --rebase origin "${{ github.ref_name }}"
+
      - name: Update public/js/version.js (source of truth)
        if: steps.ver.outputs.version != ''
        shell: bash
@@ -42,8 +66,6 @@ jobs:
          window.APP_VERSION = '${{ steps.ver.outputs.version }}';
          EOF

-      # ✂️ REMOVED: repo stamping of HTML/CSS/JS
-
      - name: Commit version.js only
        if: steps.ver.outputs.version != ''
        shell: bash
@@ -56,7 +78,7 @@ jobs:
            echo "No changes to commit"
          else
            git commit -m "chore(release): set APP_VERSION to ${{ steps.ver.outputs.version }} [skip ci]"
-            git push
+            git push origin "${{ github.ref_name }}"
          fi

      - name: Checkout filerise-docker
@@ -66,6 +88,7 @@ jobs:
          repository: error311/filerise-docker
          token: ${{ secrets.PAT_TOKEN }}
          path: docker-repo
+          fetch-depth: 0

      - name: Copy CHANGELOG.md and write VERSION
        if: steps.ver.outputs.version != ''
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,106 @@
 # Changelog

+## Changes 11/3/2025 (V1.8.1)
+
+release(v1.8.1): fix(security,onlyoffice): sanitize DS origin; safe api.js/iframe probes; better UX placeholder
+
+- Add ONLYOFFICE URL sanitizers:
+  - getTrustedDocsOrigin(): enforce http/https, strip creds, normalize to origin
+  - buildOnlyOfficeApiUrl(): construct fixed /web-apps/.../api.js via URL()
+- Probe hardening (addresses CodeQL js/xss-through-dom):
+  - ooProbeScript/ooProbeFrame now use sanitized origins and fixed paths
+  - optional CSP nonce support for injected script
+  - optional iframe sandbox; robust cleanup/timeout handling
+- CSP helper now renders lines based on validated origin (fallback to raw for visibility)
+- Admin UI UX: placeholder switched to HTTPS example (`https://docs.example.com`)
+- Comments added to justify safety to static analyzers
+
+Files: public/js/adminPanel.js
+
+Refs: #37
+
+---
+
+## Changes 11/3/2025 (v1.8.0)
+
+release(v1.8.0): feat(onlyoffice): first-class ONLYOFFICE integration (view/edit), admin UI, API, CSP helpers
+
+Refs #37 — implements ONLYOFFICE integration suggested in the discussion; video progress saving will be tracked separately.
+
+Adds secure, ACL-aware ONLYOFFICE support throughout FileRise:
+
+- **Backend / API**
+  - New OnlyOfficeController with supported extensions (doc/xls/ppt/pdf etc.), status/config endpoints, and signed download flow.
+  - New endpoints:
+    - GET /api/onlyoffice/status.php — reports availability + supported exts.  
+    - GET /api/onlyoffice/config.php — returns DocEditor config (signed URLs, callback).  
+    - GET /api/onlyoffice/signed-download.php — serves signed blobs to DS.  
+  - Effective config/overrides: env/constant wins; supports docsOrigin, publicOrigin, and jwtSecret; status gated on presence of origin+secret.
+  - Public origin resolution (BASE_URL/proxy aware) for absolute URLs.
+
+- **Admin config / UI**
+  - AdminPanel gets a new “ONLYOFFICE” section with Enable toggle, Document Server Origin, masked JWT Secret, and “Replace” control.
+  - Built-in connection tester (status, secret presence, callback ping, api.js load, iframe embed) + CSP helper (Apache & Nginx snippets)
+
+- **Frontend integration**
+  - fileEditor detects OO capability via /api/onlyoffice/status and routes supported types to the DocEditor; loads DocsAPI dynamically.
+  - editFile() short-circuits to openOnlyOffice when applicable; includes live dark/light theme sync where supported.
+  - fileListView pulls status once on load to drive UI decisions (e.g., editing affordances).
+
+- **AdminModel / config**
+  - Adds onlyoffice {enabled, docsOrigin, publicOrigin} defaults and update path, with jwtSecret persisted (kept unless explicitly replaced).
+  - Optional constants in config.php to override and debug.
+
+- **Security & UX notes**
+  - Editor access remains ACL-checked (read/edit) and uses absolute, signed URLs surfaced via controller.  
+  - Admin UI never echoes secrets; “Replace” toggles explicit updates only.  
+  - CSP helper makes it straightforward to permit api.js + iframe + XHR to your DS.  
+
+- **Docs/Styling**
+  - Minor CSS touch-ups around hover states and modal layout.
+
+---
+
+## Changes 11/2/2025 (v1.7.5)
+
+release(v1.7.5): CSP hardening, API-backed previews, flicker-free theming, cache tuning & deploy script (closes #50)
+release(v1.7.5): retrigger CI bump (no code changes)
+release(v1.7.5): retrigger CI bump ensure up to date
+
+### Security/headers
+
+- Tighten CSP: pin the inline pre-theme snippet with a script-src SHA-256 and keep everything else on 'self'.
+- Improve cache policy for versioned assets: force 1y + immutable and add s-maxage for CDNs; also avoid HSTS redirects on local/dev hosts.
+
+### Previews & editor
+
+- Remove hardcoded `/uploads/` paths; always build preview URLs via the API (respects UPLOAD_DIR/ACL).
+- Use the API URL for gallery prev/next and file-menu “Preview” to fix 404s on custom storage roots.
+- Editor now probes size safely (HEAD → Range 0-0 fallback) before fetching, then fetches with credentials.
+
+### Login, theming & UX polish
+
+- Pre-theme inline boot sets `dark-mode` + background early; swap to `[hidden]`/`unhide()` instead of inline `display:none`.
+- Add full-screen loading overlay with quick fade and proper color-scheme; prevent white/black flash on theme flips.
+- Refactor app/login reveal flow in `main.js` (`revealAppAndHideOverlay`, `authed` path, setup wizard).
+
+### HTML/CSS & perf
+
+- Make Bootstrap/Styles/Roboto critical (plain `<link rel="stylesheet">`); keep fonts as true preloads; modulepreload app entry.
+- Export a `__CSS_PROMISE__` from `defer-css.js` for sites that still promote preloads.
+- Header logo marked `fetchpriority="high"` for faster first paint.
+- Normalize dark-mode selectors to `.dark-mode` scope (admin panel, etc.).
+
+### Manual Deploy script
+
+- Add `scripts/filerise-deploy.sh`: idempotent rsync-based deploy with writable dirs preserved, optional Composer install, and PHP-FPM/Apache reloads.
+
+### Notes
+
+- If you change the inline pre-theme snippet, update the CSP hash accordingly.
+
+---
+
 ## Changes 10/31/2025 (v1.7.4)

 release(v1.7.4): login hint replace toast + fix unauth boot
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
 [![Sponsor on GitHub](https://img.shields.io/badge/Sponsor-❤-red)](https://github.com/sponsors/error311)
 [![Support on Ko-fi](https://img.shields.io/badge/Ko--fi-Buy%20me%20a%20coffee-orange)](https://ko-fi.com/error311)

-**Quick links:** [Demo](#live-demo) • [Install](#installation--setup) • [Docker](#1-running-with-docker-recommended) • [Unraid](#unraid) • [WebDAV](#quick-start-mount-via-webdav) • [FAQ](#faq--troubleshooting)
+**Quick links:** [Demo](#live-demo) • [Install](#installation--setup) • [Docker](#1-running-with-docker-recommended) • [Unraid](#unraid) • [WebDAV](#quick-start-mount-via-webdav) • [ONLYOFFICE](#quick-start-onlyoffice-optional) • [FAQ](#faq--troubleshooting)

 **Elevate your File Management** – A modern, self-hosted web file manager.  
 Upload, organize, and share files or folders through a sleek, responsive web interface.  
@@ -21,6 +21,8 @@ Grant precise capabilities like *view*, *upload*, *rename*, *delete*, or *manage

 With drag-and-drop uploads, in-browser editing, secure user logins (SSO & TOTP 2FA), and one-click public sharing, **FileRise** brings professional-grade file management to your own server — simple to deploy, easy to scale, and fully self-hosted.

+New: Open and edit Office documents — **Word (DOCX)**, **Excel (XLSX)**, **PowerPoint (PPTX)** — directly in **FileRise** using your self-hosted **ONLYOFFICE Document Server** (optional). Open **ODT/ODS/ODP**, and view **PDFs** inline. Where supported by your Document Server, users can add **comments/annotations** to documents (and PDFs). Everything is enforced by the same per-folder ACLs across the UI and WebDAV.
+
 > ⚠️ **Security fix in v1.5.0** — ACL hardening. If you’re on ≤1.4.x, please upgrade.

 **10/25/2025 Video demo:**
@@ -74,6 +76,8 @@ With drag-and-drop uploads, in-browser editing, secure user logins (SSO & TOTP 2

 - 📝 **Built-in Editor & Preview:** Inline preview for images, video, audio, and PDFs. CodeMirror-based editor for text/code with syntax highlighting and line numbers.

+- 🧩 **Office Docs (ONLYOFFICE, optional):** View/edit DOCX, XLSX, PPTX (and ODT/ODS/ODP, PDF view) using your self-hosted ONLYOFFICE Document Server. Enforced by the same ACLs as the web UI & WebDAV.
+
 - 🏷️ **Tags & Search:** Add color-coded tags and search by name, tag, uploader, or content. Advanced fuzzy search indexes metadata and file contents.

 - 🔒 **Authentication & SSO:** Username/password, optional TOTP 2FA, and OIDC (Google, Authentik, Keycloak).
@@ -342,8 +346,48 @@ https://your-host/webdav.php/

 ---

+## Quick start: ONLYOFFICE (optional)
+
+FileRise can open & edit office docs using your **self-hosted ONLYOFFICE Document Server**.
+
+**What you need**  
+
+- A reachable ONLYOFFICE Document Server (Community/Enterprise).  
+- A shared **JWT secret** used by FileRise and your Document Server.
+
+**Setup (2–3 minutes)**  
+
+1. In FileRise go to **Admin → ONLYOFFICE** and:
+   - ✅ Enable ONLYOFFICE
+   - 🔗 Set **Document Server Origin** (e.g., `https://docs.example.com`)
+   - 🔑 Enter **JWT Secret** (click “Replace” to set)
+2. (Recommended) Click **Run tests** in the ONLYOFFICE card:
+   - Checks FileRise status, callback reachability, `api.js` load, and iframe embed.
+3. Update your **Content-Security-Policy** to allow the DS origin.  
+   The Admin panel shows a ready-to-copy line for Apache & Nginx. Example:
+
+   **Apache**
+
+   ```apache
+   Header always set Content-Security-Policy "default-src 'self'; frame-src 'self' https://docs.example.com; script-src 'self' https://docs.example.com https://docs.example.com/web-apps/apps/api/documents/api.js; connect-src 'self' https://docs.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'"
+   ```
+
+   **Nginx**
+
+   ```add_header Content-Security-Policy "default-src 'self'; frame-src 'self' https://docs.example.com; script-src 'self' https://docs.example.com https://docs.example.com/web-apps/apps/api/documents/api.js; connect-src 'self' https://docs.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'" always;
+   ```
+
+   **Notes**
+   - If your site is https://, your Document Server must also be https:// (or the browser will block it as mixed content).
+   - Editor access respects FileRise ACLs (view/edit/share) exactly like the rest of the app.
+
+---
+
 ## FAQ / Troubleshooting

+- **ONLYOFFICE editor won’t load / blank frame:** Verify CSP allows your DS origin (`script-src`, `frame-src`, `connect-src`) and that the DS is reachable over HTTPS if your site is HTTPS.
+- **“Disabled — check JWT Secret / Origin” in tests:** In **Admin → ONLYOFFICE**, set the Document Server Origin and click “Replace” to save a JWT secret. Then re-run tests.
+
 - **“Upload failed” or large files not uploading:** Ensure `TOTAL_UPLOAD_SIZE` in config and PHP’s `post_max_size` / `upload_max_filesize` are set high enough. For extremely large files, you might need to increase `max_execution_time` or rely on resumable uploads in smaller chunks.

 - **How to enable HTTPS?** FileRise doesn’t terminate TLS itself. Run it behind a reverse proxy (Nginx, Caddy, Apache with SSL) or use a companion like nginx-proxy or Caddy in Docker. Set `SECURE="true"` in Docker so FileRise generates HTTPS links.
@@ -399,6 +443,20 @@ Every bit helps me keep FileRise fast, polished, and well-maintained. Thank you!

 ## Dependencies

+### ONLYOFFICE integration
+
+FileRise can open office documents using a self-hosted ONLYOFFICE Document Server.
+
+- **We do not bundle ONLYOFFICE.** Admins point FileRise to an existing ONLYOFFICE Docs server and (optionally) set a JWT secret in **Admin > ONLYOFFICE**.
+- **Licensing:** ONLYOFFICE Document Server (Community Edition) is released under the GNU AGPL v3. Enterprise editions are commercially licensed. When you deploy ONLYOFFICE, you are responsible for complying with the license of the edition you use.  
+  – Project page & license: <https://github.com/ONLYOFFICE/DocumentServer> (AGPL-3.0)  
+- **FileRise license unaffected:** FileRise communicates with ONLYOFFICE over standard HTTP and loads `api.js` from the configured Document Server at runtime; FileRise does not redistribute ONLYOFFICE code.
+- **Trademarks:** ONLYOFFICE is a trademark of Ascensio System SIA. FileRise is not affiliated with or endorsed by ONLYOFFICE.
+
+#### Security / CSP
+
+If you enable ONLYOFFICE, allow its origin in your CSP (`script-src`, `frame-src`, `connect-src`). The Admin panel shows a ready-to-copy line for Apache/Nginx.
+
 ### PHP Libraries

 - **[jumbojett/openid-connect-php](https://github.com/jumbojett/OpenID-Connect-PHP)** (v^1.0.0)
--- a/config/config.php
+++ b/config/config.php
@@ -25,6 +25,13 @@ if (!defined('DEFAULT_CAN_ZIP'))          define('DEFAULT_CAN_ZIP', true);
 if (!defined('DEFAULT_VIEW_OWN_ONLY'))    define('DEFAULT_VIEW_OWN_ONLY', false);
 define('FOLDER_OWNERS_FILE', META_DIR . 'folder_owners.json');
 define('ACL_INHERIT_ON_CREATE', true);
+// ONLYOFFICE integration overrides (uncomment and set as needed)
+/*
+define('ONLYOFFICE_ENABLED', false);
+define('ONLYOFFICE_JWT_SECRET', 'test123456');
+define('ONLYOFFICE_DOCS_ORIGIN', 'http://192.168.1.61'); // your Document Server
+define('ONLYOFFICE_DEBUG', true);
+*/

 // Encryption helpers
 function encryptData($data, $encryptionKey)
--- a/public/.htaccess
+++ b/public/.htaccess
@@ -1,35 +1,46 @@
 # --------------------------------
-# Base: safe in most environments
+# FileRise portable .htaccess
 # --------------------------------
 Options -Indexes
 DirectoryIndex index.html

 <IfModule mod_authz_core.c>
-  <FilesMatch "^\.">
+  # Block dotfiles like .env, .git, etc., but allow ACME under .well-known
+  <FilesMatch "^\.(?!well-known(?:/|$))">
    Require all denied
  </FilesMatch>
 </IfModule>

+# ---------------- Rewrites ----------------
+<IfModule mod_rewrite.c>
 RewriteEngine On

-# --- HTTPS redirect ---
-# Use ONE of these blocks.
+# Never redirect local/dev hosts
+RewriteCond %{HTTP_HOST} ^(localhost|127\.0\.0\.1|fr\.local|192\.168\.[0-9]+\.[0-9]+)$ [NC]
+RewriteRule ^ - [L]

-# A) Direct TLS on this server (enable this if Apache terminates HTTPS here)
-#RewriteCond %{HTTPS} off
+# Let ACME http-01 pass BEFORE any redirect (needed for auto-renew)
+RewriteCond %{REQUEST_URI} ^/.well-known/acme-challenge/
+RewriteRule - - [L]
+
+# HTTPS redirect (enable ONE of these, comment the other)
+
+# A) Direct TLS on this server
+#RewriteCond %{HTTPS} !=on
 #RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

-# B) Behind a reverse proxy/CDN that sets X-Forwarded-Proto
+# B) Behind reverse proxy that sets X-Forwarded-Proto
 #RewriteCond %{HTTP:X-Forwarded-Proto} =http [OR]
 #RewriteCond %{HTTP:X-Forwarded-Proto} ^$
 #RewriteCond %{HTTPS} !=on
 #RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

-# Don't interfere with ACME/http-01 if you do your own certs
-#RewriteCond %{REQUEST_URI} ^/.well-known/acme-challenge/
-#RewriteRule - - [L]
+# Mark versioned assets (?v=...) with env flag for caching rules below
+RewriteCond %{QUERY_STRING} (^|&)v= [NC]
+RewriteRule ^ - [E=IS_VER:1]
+</IfModule>

-# --- MIME types (fonts/SVG/ESM) ---
+# ---------------- MIME types ----------------
 <IfModule mod_mime.c>
  AddType font/woff2 .woff2
  AddType font/woff  .woff
@@ -37,7 +48,7 @@ RewriteEngine On
  AddType application/javascript .mjs
 </IfModule>

-# --- Security headers ---
+# ---------------- Security headers ----------------
 <IfModule mod_headers.c>
  Header always set X-Frame-Options "SAMEORIGIN"
  Header always set X-XSS-Protection "1; mode=block"
@@ -48,54 +59,54 @@ RewriteEngine On
  Header always set Expect-CT "max-age=86400, enforce"
  Header always set Cross-Origin-Resource-Policy "same-origin"
  Header always set X-Permitted-Cross-Domain-Policies "none"
-  # HSTS only when actually on HTTPS
-  Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" "expr=%{HTTPS} == 'on'"

-  # CSP (modules, blobs, workers, etc.)
-  Header always set Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self'; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'"
+  # HSTS only when HTTPS (safe for .htaccess)
+  Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" env=HTTPS
+
+  # CSP — keep this SHA-256 in sync with your inline pre-theme script
+  Header always set Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' 'sha256-ajmGY+5VJOY6+8JHgzCqsqI8w9dCQfAmqIkFesOKItM='; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self'; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'"
 </IfModule>

-# --- Caching (query-string based, no env vars needed) ---
+# ---------------- Caching ----------------
 <IfModule mod_headers.c>
-  # HTML/PHP: no cache (only if PHP didn’t already set it)
+  # HTML/PHP: no cache
  <FilesMatch "\.(html?|php)$">
    Header setifempty Cache-Control "no-cache, no-store, must-revalidate"
    Header setifempty Pragma "no-cache"
    Header setifempty Expires "0"
  </FilesMatch>

-  # version.js: always non-cacheable
+  # version.js: never cache
  <FilesMatch "^js/version\.js$">
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires "0"
  </FilesMatch>

-  # Unversioned JS/CSS: 1 hour
+  # JS/CSS: long cache if ?v= present, else 1h
  <FilesMatch "\.(?:m?js|css)$">
-    Header set Cache-Control "public, max-age=3600, must-revalidate" "expr=%{QUERY_STRING} !~ /(^|&)v=/"
+    Header set Cache-Control "public, max-age=31536000, immutable" env=IS_VER
+    Header set Cache-Control "public, max-age=3600, must-revalidate" env=!IS_VER
  </FilesMatch>

-  # Unversioned static (images/fonts): 7 days
+  # Images/fonts: long cache if ?v= present, else 7d
  <FilesMatch "\.(?:png|jpe?g|gif|webp|svg|ico|woff2?|ttf|otf)$">
-    Header set Cache-Control "public, max-age=604800" "expr=%{QUERY_STRING} !~ /(^|&)v=/"
-  </FilesMatch>
-
-  # Versioned assets (?v=...): 1 year + immutable
-  <FilesMatch "\.(?:m?js|css|png|jpe?g|gif|webp|svg|ico|woff2?|ttf|otf)$">
-    Header setifempty Cache-Control "public, max-age=31536000, immutable" "expr=%{QUERY_STRING} =~ /(^|&)v=/"
+    Header set Cache-Control "public, max-age=31536000, immutable" env=IS_VER
+    Header set Cache-Control "public, max-age=604800" env=!IS_VER
  </FilesMatch>
 </IfModule>

-# --- Compression ---
+# ---------------- Compression ----------------
 <IfModule mod_brotli.c>
-  BrotliCompressionQuality 5
+  # Do NOT set BrotliCompressionQuality in .htaccess (vhost/server only)
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript application/json image/svg+xml
 </IfModule>
 <IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
 </IfModule>

-# --- Disable TRACE ---
+# ---------------- Disable TRACE ----------------
+<IfModule mod_rewrite.c>
 RewriteCond %{REQUEST_METHOD} ^TRACE
-RewriteRule .* - [F]
+RewriteRule .* - [F]
+</IfModule>
--- a/public/api/onlyoffice/callback.php
+++ b/public/api/onlyoffice/callback.php
@@ -0,0 +1,13 @@
+<?php
+/**
+ * @OA\Post(
+ *   path="/api/onlyoffice/callback.php",
+ *   summary="ONLYOFFICE save callback",
+ *   tags={"ONLYOFFICE"},
+ *   @OA\Response(response=200, description="OK / error JSON")
+ * )
+ */
+declare(strict_types=1);
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/OnlyOfficeController.php';
+(new OnlyOfficeController())->callback();
--- a/public/api/onlyoffice/config.php
+++ b/public/api/onlyoffice/config.php
@@ -0,0 +1,17 @@
+<?php
+/**
+ * @OA\Get(
+ *   path="/api/onlyoffice/config.php",
+ *   summary="Get editor config for a file (signed URLs, callback)",
+ *   tags={"ONLYOFFICE"},
+ *   @OA\Parameter(name="folder", in="query", @OA\Schema(type="string")),
+ *   @OA\Parameter(name="file",   in="query", @OA\Schema(type="string")),
+ *   @OA\Response(response=200, description="Editor config"),
+ *   @OA\Response(response=403, description="Forbidden"),
+ *   @OA\Response(response=404, description="Disabled / Not found")
+ * )
+ */
+declare(strict_types=1);
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/OnlyOfficeController.php';
+(new OnlyOfficeController())->config();
--- a/public/api/onlyoffice/signed-download.php
+++ b/public/api/onlyoffice/signed-download.php
@@ -0,0 +1,15 @@
+<?php
+/**
+ * @OA\Get(
+ *   path="/api/onlyoffice/signed-download.php",
+ *   summary="Serve a signed file blob to ONLYOFFICE",
+ *   tags={"ONLYOFFICE"},
+ *   @OA\Parameter(name="tok", in="query", required=true, @OA\Schema(type="string")),
+ *   @OA\Response(response=200, description="File stream"),
+ *   @OA\Response(response=403, description="Signature/expiry invalid")
+ * )
+ */
+declare(strict_types=1);
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/OnlyOfficeController.php';
+(new OnlyOfficeController())->signedDownload();
--- a/public/api/onlyoffice/status.php
+++ b/public/api/onlyoffice/status.php
@@ -0,0 +1,13 @@
+<?php
+/**
+ * @OA\Get(
+ *   path="/api/onlyoffice/status.php",
+ *   summary="ONLYOFFICE availability & supported extensions",
+ *   tags={"ONLYOFFICE"},
+ *   @OA\Response(response=200, description="Status JSON")
+ * )
+ */
+declare(strict_types=1);
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/OnlyOfficeController.php';
+(new OnlyOfficeController())->status();
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,6 +1,38 @@
 /* ===========================================================
   GENERAL STYLES & BASE LAYOUT
   =========================================================== */
+/* Reserve stable space for header + main */
+:root { --header-h: 55px; }
+.header-container { min-height: var(--header-h); }
+
+
+img.logo{ width:50px; height:50px; display:block; }  /* belt & suspenders for logo sizing */
+/* Hidden-but-reserved utility (no clicks) */
+.is-visually-hidden {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* After auth: show app, hide login */
+
+
+#fr-login-tip {
+  min-height: 40px;            /* reserve space */
+  max-width: 520px;
+  margin: 8px auto 0;
+  border-radius: 8px;
+  padding: 10px 12px;
+  text-align: left;
+  margin-bottom: 10px;
+}
+.main-wrapper{
+  display:flex;              /* or grid—flex is fine here */
+  gap:5px;
+  align-items:flex-start;
+}
+
+
+

 /* GENERAL STYLES */
 body {
@@ -24,8 +56,8 @@ body {
    padding-left: 4px !important;
  }@media (min-width: 1300px) {
  .container-fluid {
-      padding-left: 30px !important;
-      padding-right: 30px !important;
+      padding-left: 20px !important;
+      padding-right: 20px !important;
  }}
  @media (max-width: 600px) {
    .zones-toggle { left: 85px !important; }
@@ -37,11 +69,6 @@ body {
  /************************************************************/
  /* FLEXBOX HEADER: LOGO, TITLE, BUTTONS FIXED               */
  /************************************************************/
-  .header-logo .logo {
-    display:block;
-    max-width:100%;
-    height:auto;         /* keep aspect ratio; HTML attrs set the intrinsic box */
-  }
  .btn-login {
  margin-top: 10px;
  }/* Color overrides */
@@ -65,7 +92,7 @@ body {
    background-color: #2196F3;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-  }body.dark-mode .header-container {
+  }.dark-mode .header-container {
  background-color: #1f1f1f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  }#darkModeIcon {
@@ -77,7 +104,7 @@ body {
  }.header-logo svg {
  height: 50px;
    width: auto;
-  }body.dark-mode header {
+  }.dark-mode header {
  background-color: #1f1f1f;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
  }.header-left {
@@ -163,7 +190,7 @@ body {
    padding: 10px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  }/* Folder Help Tooltip - Dark Mode */
-  body.dark-mode .folder-help-tooltip {
+  .dark-mode .folder-help-tooltip {
  background-color: #333 !important;
    color: #eee !important;
    border: 1px solid #555 !important;
@@ -171,7 +198,7 @@ body {
  -webkit-text-fill-color: orange !important;
    color: inherit !important;
    padding-right: 10px !important;
-  }body.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
+  }.dark-mode #folderHelpBtn i.material-icons.folder-help-icon {
  -webkit-text-fill-color: #ffa500 !important;
    padding-right: 10px !important;
  }/************************************************************/
@@ -221,8 +248,8 @@ body {
  .material-icons.gallery-icon {
  color: black;
    margin-right: 5px;
-  }body.dark-mode .material-icons.folder-icon,
-  body.dark-mode .material-icons.gallery-icon {
+  }.dark-mode .material-icons.folder-icon,
+  .dark-mode .material-icons.gallery-icon {
  color: white;
    margin-right: 5px;
  }.remove-file-btn {
@@ -253,23 +280,23 @@ body {
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
-  }body.dark-mode #loginForm {
+  }.dark-mode #loginForm {
  background-color: #2c2c2c;
    color: #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);
-  }body.dark-mode #loginForm input {
+  }.dark-mode #loginForm input {
  background-color: #333;
    color: #fff;
    border: 1px solid #555;
-  }body.dark-mode #loginForm label {
+  }.dark-mode #loginForm label {
  color: #ddd;
-  }body.dark-mode #loginForm button {
+  }.dark-mode #loginForm button {
  background-color: #007bff;
    color: white;
    border: none;
-  }body.dark-mode #loginForm button:hover {
+  }.dark-mode #loginForm button:hover {
  background-color: #0056b3;
  }/* ===========================================================
     CARDS & MODALS
@@ -292,7 +319,7 @@ body {
    border: 1px solid #ccc;
    border-radius: 4px;
  }/* Override modal content for dark mode */
-  body.dark-mode #restoreFilesModal .modal-content {
+  .dark-mode #restoreFilesModal .modal-content {
  background: #2c2c2c !important;
    border: 1px solid #555 !important;
    color: #f0f0f0;
@@ -376,7 +403,7 @@ body {
      transform: translate(-50%, -70%);
  }}
  
-  body.dark-mode .modal .modal-content {
+  .dark-mode .modal .modal-content {
  background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #444;
@@ -405,10 +432,10 @@ body {
    background-color: #ff4d4d;
    box-shadow: 0px 0px 6px rgba(255, 77, 77, 0.8);
    transform: scale(1.05);
-  }body.dark-mode .editor-close-btn {
+  }.dark-mode .editor-close-btn {
  background-color: rgba(0, 0, 0, 0.7);
    color: #ff6666;
-  }body.dark-mode .editor-close-btn:hover {
+  }.dark-mode .editor-close-btn:hover {
  background-color: #ff6666;
    color: #000;
  }/* Editor Modal */
@@ -434,7 +461,7 @@ body {
    width: 100% !important;
    resize: none !important;
    overflow: auto !important;
-  }body.dark-mode .editor-modal {
+  }.dark-mode .editor-modal {
  background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #444;
@@ -459,7 +486,7 @@ body {
  }.editor-title {
  margin: 0;
    line-height: 33px;
-  }body.dark-mode .editor-header {
+  }.dark-mode .editor-header {
  background-color: #2c2c2c;
  }@media (max-width: 600px) {
  .editor-title {
@@ -527,9 +554,9 @@ body {
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
-  }body.dark-mode .material-icons.pauseResumeBtn {
+  }.dark-mode .material-icons.pauseResumeBtn {
  color: white !important;
-  }body.dark-mode .material-icons.pauseResumeBtn:hover {
+  }.dark-mode .material-icons.pauseResumeBtn:hover {
  background-color: rgba(255, 215, 0, 0.3);
    color: #fff;
  }body:not(.dark-mode) .material-icons.pauseResumeBtn:hover {
@@ -632,15 +659,15 @@ body {
  }#createBtn {
  background-color: #007bff;
    color: white;
-  }body.dark-mode .dropdown-menu {
+  }.dark-mode .dropdown-menu {
  background-color: #2c2c2c !important;
    border-color:   #444    !important;
    color:          #e0e0e0!important;
-  }body.dark-mode .dropdown-menu .dropdown-item {
+  }.dark-mode .dropdown-menu .dropdown-item {
  color: #e0e0e0 !important;
  }.dropdown-item:hover {
  background-color: rgba(0,0,0,0.05);
-  }body.dark-mode .dropdown-item:hover {
+  }.dark-mode .dropdown-item:hover {
  background-color: rgba(255,255,255,0.1);
  }#fileList button.edit-btn {
  background-color: #007bff;
@@ -661,7 +688,7 @@ body {
  background-color: transparent;
  }#fileList table tr:hover {
  background-color: #e0e0e0;
-  }body.dark-mode #fileList table tr:hover {
+  }.dark-mode #fileList table tr:hover {
  background-color: #444;
  }#fileListTitle {
  white-space: normal !important;
@@ -679,7 +706,7 @@ body {
  box-shadow: none;
    border: none !important;
    outline: none !important;
-  }body.dark-mode #fileList table tr {
+  }.dark-mode #fileList table tr {
  box-shadow: none;
    border: none !important;
    outline: none !important;
@@ -763,7 +790,7 @@ body {
    color: inherit;
    cursor: pointer;
    padding: 0;
-  }#loginForm,
+  }
  #uploadForm {
  display: none;
  }.folder-actions {
@@ -824,7 +851,7 @@ body {
    color: #fff;
  }.row-selected {
  background-color: #f2f2f2 !important;
-  }body.dark-mode .row-selected {
+  }.dark-mode .row-selected {
  background-color: #444 !important;
    color: #fff !important;
  }.custom-prev-next-btn {
@@ -838,11 +865,11 @@ body {
    cursor: pointer;
  }.custom-prev-next-btn:hover:not(:disabled) {
  background-color: #d5d5d5;
-  }body.dark-mode .custom-prev-next-btn {
+  }.dark-mode .custom-prev-next-btn {
  background-color: #444;
    color: #fff;
    border: none;
-  }body.dark-mode .custom-prev-next-btn:hover:not(:disabled) {
+  }.dark-mode .custom-prev-next-btn:hover:not(:disabled) {
  background-color: #555;
  }#customToast {
  position: fixed;
@@ -879,6 +906,10 @@ body {
    line-height: 1 !important;
    vertical-align: middle !important;
  }#fileListContainer {
+    border: 1px solid #e0e0e0;
+    background: white;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
  max-width: 100%;
    padding-bottom: 10px !important;
    padding-left: 5px !important;
@@ -889,7 +920,7 @@ body {
      width: 99%;
  }}
  
-  body.dark-mode #fileListContainer {
+  .dark-mode #fileListContainer {
  background-color: #2c2c2c;
    color: #e0e0e0;
    border: 1px solid #444;
@@ -938,7 +969,7 @@ body {
      align-items: stretch;
  }.file-list-actions .action-btn {
  width: 100%;
-  height: 10px !important;
+  
  }.modal-content {
  width: 95%;
      margin: 20% auto;
@@ -965,7 +996,7 @@ body {
  #copySelectedBtn:hover,
  #moveSelectedBtn:hover,
  #downloadZipBtn:hover,
-  #extractZipBtn:hover
+  #extractZipBtn:hover,
  #customChooseBtn:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
@@ -1122,12 +1153,12 @@ body {
  background-color: #d0d0d0;
    border-radius: 4px;
    padding: 2px 4px;
-  }body.dark-mode .folder-option.selected {
+  }.dark-mode .folder-option.selected {
  background-color: #444;
    color: #fff;
    border-radius: 4px;
    padding: 2px 4px;
-  }body.dark-mode .folder-option:hover {
+  }.dark-mode .folder-option:hover {
  background-color: #333;
    color: #fff;
    padding: 2px 4px;
@@ -1167,7 +1198,7 @@ body {
      display: inline-flex !important;
  }}
  
-  body.dark-mode .image-preview-modal-content {
+  .dark-mode .image-preview-modal-content {
  background: #2c2c2c;
    border-color: #444;
  }.image-modal-img {
@@ -1204,13 +1235,13 @@ body {
  width: 600px !important;
    max-width: 90vw !important;
    /* ensures it doesn't exceed the viewport width */
-  }body.dark-mode .close-image-modal {
+  }.dark-mode .close-image-modal {
  background-color: rgba(0, 0, 0, 0.6);
    color: #ff6666;
-  }body.dark-mode .close-image-modal:hover {
+  }.dark-mode .close-image-modal:hover {
  background-color: #ff6666;
    color: #000;
-  }body.dark-mode .image-preview-modal-content {
+  }.dark-mode .image-preview-modal-content {
  background: #2c2c2c;
    border-color: #444;
  }.page-indicator {
@@ -1223,7 +1254,7 @@ body {
    margin-right: 0;
    margin-left: 0;
    font-size: 32px;
-  }body.dark-mode .file-icon {
+  }.dark-mode .file-icon {
  color: white;
  }.bottom-select {
  display: inline-block;
@@ -1321,36 +1352,36 @@ body {
  }/* ===========================================================
     DARK MODE STYLES
     =========================================================== */
-  body.dark-mode {
+  .dark-mode {
  background-color: #121212;
    color: #e0e0e0;
-  }body.dark-mode .container {
+  }.dark-mode .container {
  background-color: transparent !important;
-  }body.dark-mode .btn-primary {
+  }.dark-mode .btn-primary {
  background-color: #007bff;
    color: #fff;
    border-color: #007bff;
-  }body.dark-mode .btn-secondary {
+  }.dark-mode .btn-secondary {
  background-color: #6c757d;
    color: #fff;
    border-color: #6c757d;
-  }body.dark-mode .btn-danger {
+  }.dark-mode .btn-danger {
  background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
-  }body.dark-mode .modal .modal-content,
-  body.dark-mode .editor-modal {
+  }.dark-mode .modal .modal-content,
+  .dark-mode .editor-modal {
  background-color: #2c2c2c;
    color: #e0e0e0;
    border: 1px solid #444;
-  }body.dark-mode table {
+  }.dark-mode table {
  background-color: #2c2c2c;
    color: #e0e0e0;
-  }body.dark-mode table tr:hover {
+  }.dark-mode table tr:hover {
  background-color: #444;
-  }body.dark-mode #uploadProgressContainer .progress {
+  }.dark-mode #uploadProgressContainer .progress {
  background-color: #333;
-  }body.dark-mode #uploadProgressContainer .progress-bar {
+  }.dark-mode #uploadProgressContainer .progress-bar {
  background-color: #007bff;
    color: #e0e0e0;
  }.dark-mode-toggle {
@@ -1367,10 +1398,10 @@ body {
  background-color: rgba(255, 255, 255, 0.15) !important;
  }.dark-mode-toggle:active {
  background-color: rgba(255, 255, 255, 0.25) !important;
-  }body.dark-mode .dark-mode-toggle {
+  }.dark-mode .dark-mode-toggle {
  background-color: transparent !important;
    color: white !important;
-  }body.dark-mode .dark-mode-toggle:hover {
+  }.dark-mode .dark-mode-toggle:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  }.dark-mode-toggle:focus {
  outline: none !important;
@@ -1397,29 +1428,29 @@ body {
  }.folder-help-list {
  margin: 0;
    padding-left: 20px;
-  }body.dark-mode .folder-help-details {
+  }.dark-mode .folder-help-details {
  color: #ddd;
    background-color: #2c2c2c;
    border-color: #444;
-  }body.dark-mode .folder-help-summary {
+  }.dark-mode .folder-help-summary {
  color: #ddd;
    background: #2c2c2c;
-  }body.dark-mode .folder-help-icon {
+  }.dark-mode .folder-help-icon {
  color: #f6a72c;
    font-size: 20px;
-  }body.dark-mode .CodeMirror {
+  }.dark-mode .CodeMirror {
  background: #1e1e1e !important;
    color: #ffffff !important;
-  }body.dark-mode .CodeMirror-cursor {
+  }.dark-mode .CodeMirror-cursor {
  border-left: 2px solid #ffffff !important;
-  }body.dark-mode .CodeMirror-gutters {
+  }.dark-mode .CodeMirror-gutters {
  background: #252526 !important;
    border-right: 1px solid #444 !important;
-  }body.dark-mode .CodeMirror-linenumber {
+  }.dark-mode .CodeMirror-linenumber {
  color: #aaaaaa !important;
-  }body.dark-mode .CodeMirror-selected {
+  }.dark-mode .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.2) !important;
-  }body.dark-mode .CodeMirror-matchingbracket {
+  }.dark-mode .CodeMirror-matchingbracket {
  background-color: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid #ffffff !important;
  }.zoom_in,
@@ -1454,7 +1485,7 @@ body {
  }.drop-hover {
  background-color: #e0e0e0;
    border: 1px dashed #666;
-  }body.dark-mode .drop-hover {
+  }.dark-mode .drop-hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px dashed #ffffff !important;
  }#restoreFilesList li {
@@ -1466,35 +1497,33 @@ body {
    transform: translateY(-3px) !important;
  }#restoreFilesList li label {
  margin-left: 8px !important;
-  }body.dark-mode #fileContextMenu {
+  }.dark-mode #fileContextMenu {
  background-color: #2c2c2c !important;
    border: 1px solid #555 !important;
    color: #e0e0e0 !important;
-  }body.dark-mode #fileContextMenu div {
+  }.dark-mode #fileContextMenu div {
  color: #e0e0e0 !important;
  }#folderContextMenu {
  font-family: Arial, sans-serif;
    font-size: 14px;
-  }body.dark-mode #folderContextMenu {
+  }.dark-mode #folderContextMenu {
  background-color: #2c2c2c;
    border-color: #555;
    color: #e0e0e0;
-  }.main-wrapper {
-  display: flex;
-    flex-direction: row;
  }.drop-target-sidebar {
  display: none;
-    width: 50px;
-    transition: width 0.3s ease;
    background-color: #f8f9fa;
    border-right: 2px dashed #1565C0;
-    padding: 10px;
+    margin-top: 10px;
+    margin-left: 10px;
  }@media (min-width: 769px) {
  .drop-target-sidebar {
      display: block;
  }}
-  .drop-target-sidebar.active {
+  .drop-target-sidebar.active,
+  .drag-header.active {
  width: 350px;
+  height: 750px;
  }.main-column {
  flex: 1;
    transition: margin-left 0.3s ease;
@@ -1563,13 +1592,12 @@ body {
  }#sidebarDropArea,
  #uploadFolderRow {
  background-color: transparent;
-  }#sidebarDropArea {
-  display: none;
-  }body.dark-mode #sidebarDropArea,
-  body.dark-mode #uploadFolderRow {
+  
+  }.dark-mode #sidebarDropArea,
+  .dark-mode #uploadFolderRow {
  background-color: transparent;
-  }body.dark-mode #sidebarDropArea.highlight,
-  body.dark-mode #uploadFolderRow.highlight {
+  }.dark-mode #sidebarDropArea.highlight,
+  .dark-mode #uploadFolderRow.highlight {
  background-color: #333; 
    border: 2px dashed #555; 
    color: #fff;
@@ -1588,7 +1616,7 @@ body {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
-  }body.dark-mode .card {
+  }.dark-mode .card {
  background-color: #2c2c2c;
    color: #e0e0e0;
    border: 1px solid #444;
@@ -1606,17 +1634,17 @@ body {
  }.admin-panel-content {
  background: #fff;
    color: #000;
-  }body.dark-mode .admin-panel-content {
+  }.dark-mode .admin-panel-content {
  background: #2c2c2c;
    color: #e0e0e0;
    border: 1px solid #444;
-  }body.dark-mode .admin-panel-content input,
-  body.dark-mode .admin-panel-content select,
-  body.dark-mode .admin-panel-content textarea {
+  }.dark-mode .admin-panel-content input,
+  .dark-mode .admin-panel-content select,
+  .dark-mode .admin-panel-content textarea {
  background: #3a3a3a;
    color: #e0e0e0;
    border: 1px solid #555;
-  }body.dark-mode .admin-panel-content label {
+  }.dark-mode .admin-panel-content label {
  color: #e0e0e0;
  }#openChangePasswordModalBtn {
  width: max-content;
@@ -1637,7 +1665,7 @@ body {
    color: var(--download-spinner-color, #000);
  }body:not(.dark-mode) {
  --download-spinner-color: #000;
-  }body.dark-mode {
+  }.dark-mode {
  --download-spinner-color: #fff;
  }.rise-effect {
  transform: translateY(-20px);
@@ -1672,7 +1700,7 @@ body {
    background-color: transparent;
    transition: width 0.3s ease;
    box-sizing: border-box;
-  }body.dark-mode .header-drop-zone.drag-active {
+  }.dark-mode .header-drop-zone.drag-active {
  background-color: #333; 
    border: 2px dashed #555; 
    color: #fff;
@@ -1703,16 +1731,16 @@ body {
  line-height: 1;
    margin: 0;
    padding: 0;
-  }body.dark-mode #fileSummary {
+  }.dark-mode #fileSummary {
  color: white;
  }#searchIcon {
  border-radius: 4px;
    padding: 4px 8px;
-  }body.dark-mode #searchIcon {
+  }.dark-mode #searchIcon {
  background-color: #444;
    border: 1px solid #555;
    color: #fff;
-  }body.dark-mode #searchInput {
+  }.dark-mode #searchInput {
  background-color: #333;
    color: #e0e0e0;
    border: 1px solid #555;
@@ -1737,11 +1765,11 @@ body {
  .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 {
+  }.dark-mode .btn-icon .material-icons,
+  .dark-mode #searchIcon .material-icons {
  color: #fff;
-  }body.dark-mode .btn-icon:hover,
-  body.dark-mode .btn-icon:focus {
+  }.dark-mode .btn-icon:hover,
+  .dark-mode .btn-icon:focus {
  background: rgba(255, 255, 255, 0.1);
  }.user-dropdown {
  position: relative;
@@ -1772,12 +1800,12 @@ body {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.25rem;
-  }body.dark-mode .user-dropdown .user-menu {
+  }.dark-mode .user-dropdown .user-menu {
  background: #2c2c2c;
    border-color: #444;
-  }body.dark-mode .user-dropdown .user-menu .item {
+  }.dark-mode .user-dropdown .user-menu .item {
  color: #e0e0e0;
-  }body.dark-mode .user-dropdown .user-menu .item:hover {
+  }.dark-mode .user-dropdown .user-menu .item:hover {
  background: rgba(255,255,255,0.1);
  }.user-dropdown .dropdown-username {
  margin: 0 8px;
@@ -1814,7 +1842,7 @@ body {
  }:root {
  --perm-caret: #444;
  }/* light */
-  body.dark-mode {
+  .dark-mode {
  --perm-caret: #ccc;
  }/* dark */
  
@@ -1827,7 +1855,7 @@ body {
      background-color 160ms cubic-bezier(.2,.0,.2,1);
  }:root {
  --toggle-icon-color: #333;
-  }body.dark-mode {
+  }.dark-mode {
  --toggle-icon-color: #eee;
  }#zonesToggleFloating .material-icons,
  #zonesToggleFloating .material-icons-outlined,
--- a/public/index.html
+++ b/public/index.html
@@ -2,65 +2,37 @@
 <html lang="en">

 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>FileRise</title>
-
-  <!-- Icons -->
-  <link rel="icon" type="image/png" href="/assets/logo.png">
-  <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
-
-  <!-- App meta -->
-  <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">
-
-  <!-- Minimal critical CSS only (keeps CSP clean, no inline JS) -->
-  <style>
-    .main-wrapper{display:none}
-    #loadingOverlay{position:fixed;inset:0;background:var(--bg-color,#fff);z-index:9999;display:flex;align-items:center;justify-content:center}
+  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>FileRise</title>
+  <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">
+  <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">

-  <!-- CSS: preload, then promote via tiny external JS (no inline onload) -->
-  <link rel="preload" as="style" href="/vendor/bootstrap/4.5.2/bootstrap.min.css?v={{APP_QVER}}">
-  <link rel="preload" as="style" href="/css/styles.css?v={{APP_QVER}}">
-
-  <!-- Fonts: preload only those used above the fold -->
-  <link rel="preload" href="/fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2?v={{APP_QVER}}" as="font" type="font/woff2" crossorigin>
-  <link rel="preload" href="/fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2?v={{APP_QVER}}" as="font" type="font/woff2" crossorigin>
-  <!-- Do NOT preload material icons unless needed above the fold -->
-
-  <!-- Non-blocking stylesheet promotion (external to satisfy CSP) -->
-  <script src="/js/defer-css.js?v={{APP_QVER}}" defer></script>
  
-
-  <!-- Base CSS as a fallback if JS is disabled -->
-  <noscript>
-    <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}}">
-  </noscript>
-
-  <!-- Preload font CSS (non-blocking) -->
-  <link rel="preload" as="style" href="/css/vendor/roboto.css?v={{APP_QVER}}">
-  <link rel="preload" as="style" href="/css/vendor/material-icons.css?v={{APP_QVER}}">
-
-  <!-- Vendor JS (keep defer; they’re not modules) -->
+<!-- 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}}">
+  
+  <!-- Fonts (ok to keep as real preloads) -->
+  <link rel="preload" as="font" href="/fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2?v={{APP_QVER}}" type="font/woff2" crossorigin>
+  <link rel="preload" as="font" href="/fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2?v={{APP_QVER}}" type="font/woff2" crossorigin>
+  
+  <!-- Vendor & version (deferred) -->
  <script src="/vendor/dompurify/2.4.0/purify.min.js?v={{APP_QVER}}" defer></script>
-
-  <!-- IMPORTANT: Remove CodeMirror here; lazy-load it inside your editor route/module. -->
-
-  <!-- Version marker (non-blocking) -->
  <script src="/js/version.js?v={{APP_QVER}}" defer></script>
- 
-
-  <!-- App entry: start fetching early, execute after parse -->
-  <link rel="modulepreload" href="/js/main.js?v={{APP_QVER}}">
-  <script type="module" src="/js/main.js?v={{APP_QVER}}"></script>
-</head>
+  
+  <!-- App entry -->
+  <link rel="modulepreload" href="/js/main.js?v={{APP_QVER}}"><script type="module" src="/js/main.js?v={{APP_QVER}}"></script>
+  </head>

 <body>
+  <div id="appRoot" style="visibility:hidden">
  <header class="header-container">
+   
    <div class="header-left">
      <a href="index.html">
        <div class="header-logo">
@@ -68,19 +40,21 @@
  src="/assets/logo.svg?v={{APP_QVER}}"
  alt="FileRise"
  class="logo"
-  width="50" height="50"
+  width="50"
+  height="50"
  decoding="async"
-  fetchpriority="low"
+  fetchpriority="high"
 />
        </div>
      </a>
    </div>
+    
    <div class="header-title">
-      <h1 data-i18n-key="header_title">FileRise</h1>
+      <h1>FileRise</h1>
    </div>
    <div class="header-right">
      <div class="header-buttons-wrapper" style="display: flex; align-items: center; gap: 10px;">
-        <!-- Your header drop zone -->
+        
        <div id="headerDropArea" class="header-drop-zone"></div>
        <div class="header-buttons">
          <button id="changePasswordBtn" data-i18n-title="change_password" style="display: none;">
@@ -99,7 +73,7 @@
                <!-- Trash items will be loaded here -->
              </div>
              <div style="text-align: right;">
-                <button id="restoreSelectedBtn" class="btn btn-primary" data-i18n-key="restore_selected">Restore
+                <button id="restoreSelectedBtn" class="btn btn-primary" data-i18n-key="restore_selected"  style="display: none;">Restore
                  Selected</button>
                <button id="restoreAllBtn" class="btn btn-secondary" data-i18n-key="restore_all">Restore All</button>
                <button id="deleteTrashSelectedBtn" class="btn btn-warning" data-i18n-key="delete_selected_trash">Delete
@@ -115,7 +89,7 @@
          <button id="removeUserBtn" data-i18n-title="remove_user" style="display: none;">
            <i class="material-icons">person_remove</i>
          </button>
-          <button id="darkModeToggle" class="btn-icon" aria-label="Toggle dark mode">
+          <button id="darkModeToggle" class="btn-icon" aria-label="Toggle dark mode"  hidden>
            <span class="material-icons" id="darkModeIcon">
              dark_mode
            </span>
@@ -124,15 +98,18 @@
      </div>
    </div>
  </header>
-
+  
  <div id="loadingOverlay"></div>

  <!-- Custom Toast Container -->
  <div id="customToast"></div>
  <div id="hiddenCardsContainer" style="display:none;"></div>
-  <main id="main">
+  <main id="main" hidden>
  <div class="row mt-4" id="loginForm">
    <div class="col-12">
+      <div id="loginBox" class="login-box">
+        <div id="fr-login-tip" class="alert alert-info login-hint" role="status" aria-live="polite" style="display:none;"></div>
+  
      <form id="authForm" method="post">
        <div class="form-group">
          <label for="loginUsername" data-i18n-key="user">User:</label>
@@ -158,13 +135,14 @@
          HTTP
          Login</a>
      </div>
+      <div>
    </div>
  </div>
 </main>
  

  <!-- Main Wrapper: Hidden by default; remove "display: none;" after login -->
-  <div class="main-wrapper">
+  <div class="main-wrapper" hidden>
    <!-- Sidebar Drop Zone: Hidden until you drag a card (display controlled by JS) -->
    <div id="sidebarDropArea" class="drop-target-sidebar"></div>
    <!-- Main Column -->
@@ -505,7 +483,7 @@
      </div>
    </div>
  </div>
-
+</div>
 </body>

 </html>
--- a/public/js/adminPanel.js
+++ b/public/js/adminPanel.js
@@ -170,9 +170,9 @@ async function safeJson(res) {
        max-width: none !important;
      }
    }
-    body.dark-mode #adminPanelModal .modal-content { background:#2c2c2c !important; color:#e0e0e0 !important; border-color:#555 !important; }
-    body.dark-mode .form-control { background-color:#333; border-color:#555; color:#eee; }
-    body.dark-mode .form-control::placeholder { color:#888; }
+    .dark-mode #adminPanelModal .modal-content { background:#2c2c2c !important; color:#e0e0e0 !important; border-color:#555 !important; }
+    .dark-mode .form-control { background-color:#333; border-color:#555; color:#eee; }
+    .dark-mode .form-control::placeholder { color:#888; }

    .section-header {
      background:#f5f5f5; padding:10px 15px; cursor:pointer; border-radius:4px; font-weight:bold;
@@ -181,8 +181,8 @@ async function safeJson(res) {
    .section-header:first-of-type { margin-top:0; }
    .section-header.collapsed .material-icons { transform:rotate(-90deg); }
    .section-header .material-icons { transition:transform .3s; color:#444; }
-    body.dark-mode .section-header { background:#3a3a3a; color:#eee; }
-    body.dark-mode .section-header .material-icons { color:#ccc; }
+    .dark-mode .section-header { background:#3a3a3a; color:#eee; }
+    .dark-mode .section-header .material-icons { color:#ccc; }

    .section-content { display:none; margin-left:20px; margin-top:8px; margin-bottom:8px; }

@@ -193,7 +193,7 @@ async function safeJson(res) {
      border:2px solid transparent; transition:all .3s;
    }
    #adminPanelModal .editor-close-btn:hover { color:#fff; background:#ff4d4d; box-shadow:0 0 6px rgba(255,77,77,.8); transform:scale(1.05); }
-    body.dark-mode #adminPanelModal .editor-close-btn { background:rgba(0,0,0,0.6); color:#ff4d4d; }
+    .dark-mode #adminPanelModal .editor-close-btn { background:rgba(0,0,0,0.6); color:#ff4d4d; }

    .action-row { display:flex; justify-content:space-between; margin-top:15px; }

@@ -210,7 +210,7 @@ async function safeJson(res) {
      border-radius: 6px;
      padding: 0;
    }
-    body.dark-mode .folder-access-list { border-color:#555; }
+    .dark-mode .folder-access-list { border-color:#555; }

    .folder-access-header,
    .folder-access-row {
@@ -228,7 +228,7 @@ async function safeJson(res) {
      font-weight: 700;
      border-bottom: 1px solid rgba(0,0,0,0.12);
    }
-    body.dark-mode .folder-access-header { background:#2c2c2c; }
+    .dark-mode .folder-access-header { background:#2c2c2c; }

    .folder-access-row { border-bottom: 1px solid rgba(0,0,0,0.06); }
    .folder-access-row:last-child { border-bottom: none; }
@@ -257,8 +257,8 @@ async function safeJson(res) {
      color: #2064ff;
      margin-left: 6px;
    }
-    body.dark-mode .inherited-row { background: rgba(32,132,255,0.12); }
-    body.dark-mode .inherited-tag { background: rgba(32,132,255,0.2); color: #89b3ff; }
+    .dark-mode .inherited-row { background: rgba(32,132,255,0.12); }
+    .dark-mode .inherited-tag { background: rgba(32,132,255,0.2); color: #89b3ff; }

    @media (max-width: 900px) {
      .folder-access-list { --col-perm: 72px; --col-folder-min: 240px; }
@@ -274,7 +274,7 @@ async function safeJson(res) {
  /* nicer thin scrollbar (supported browsers) */
  .folder-cell::-webkit-scrollbar{ height:8px; }
  .folder-cell::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.25); border-radius:4px; }
-  body.dark-mode .folder-cell::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); }
+  .dark-mode .folder-cell::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); }

  /* Badge now doesn't clip; let the wrapper handle scroll */
  .folder-badge{
@@ -491,6 +491,7 @@ export function openAdminPanel() {
            { id: "headerSettings", label: t("header_settings") },
            { id: "loginOptions", label: t("login_options") },
            { id: "webdav", label: "WebDAV Access" },
+            { id: "onlyoffice", label: "ONLYOFFICE" },
            { id: "upload", label: t("shared_max_upload_size_bytes_title") },
            { id: "oidc", label: t("oidc_configuration") + " & TOTP" },
            { id: "shareLinks", label: t("manage_shared_links") },
@@ -514,7 +515,7 @@ export function openAdminPanel() {
        document.getElementById("closeAdminPanel").addEventListener("click", closeAdminPanel);
        document.getElementById("cancelAdminSettings").addEventListener("click", closeAdminPanel);

-        ["userManagement", "headerSettings", "loginOptions", "webdav", "upload", "oidc", "shareLinks", "sponsor"]
+        ["userManagement", "headerSettings", "loginOptions", "webdav", "onlyoffice", "upload", "oidc", "shareLinks", "sponsor"]
          .forEach(id => {
            document.getElementById(id + "Header")
              .addEventListener("click", () => toggleSection(id));
@@ -574,6 +575,312 @@ export function openAdminPanel() {
          </div>
        `;

+        // ONLYOFFICE Content
+        const hasOOSecret = !!(config.onlyoffice && config.onlyoffice.hasJwtSecret);
+        window.__HAS_OO_SECRET = hasOOSecret;
+        document.getElementById("onlyofficeContent").innerHTML = `
+  <div class="form-group">
+    <input type="checkbox" id="ooEnabled" />
+    <label for="ooEnabled">Enable ONLYOFFICE integration</label>
+  </div>
+
+  <div class="form-group">
+    <label for="ooDocsOrigin">Document Server Origin:</label>
+    <input type="url" id="ooDocsOrigin" class="form-control" placeholder="e.g. https://docs.example.com" />
+    <small class="text-muted">Must be reachable by your browser (for API.js) and by FileRise (for callbacks). Avoid “localhost”.</small>
+  </div>
+
+  ${renderMaskedInput({ id: "ooJwtSecret", label: "JWT Secret", hasValue: hasOOSecret, isSecret: true })}
+`;
+
+        wireReplaceButtons(document.getElementById("onlyofficeContent"));
+
+
+
+
+
+               // --- Test ONLYOFFICE block ---
+               const testBox = document.createElement("div");
+               testBox.className = "card";
+               testBox.style.marginTop = "12px";
+               testBox.innerHTML = `
+         <div class="card-body">
+           <div style="display:flex;gap:8px;align-items:center;margin-bottom:6px;">
+             <strong>Test ONLYOFFICE connection</strong>
+             <button type="button" id="ooTestBtn" class="btn btn-sm btn-primary">Run tests</button>
+             <span id="ooTestSpinner" style="display:none;">⏳</span>
+           </div>
+           <ul id="ooTestResults" class="list-unstyled" style="margin:0;"></ul>
+           <small class="text-muted">These tests check FileRise config, callback reachability, CSP/script loading, and iframe embedding.</small>
+         </div>
+       `;
+               document.getElementById("onlyofficeContent").appendChild(testBox);
+       
+               // Util: tiny UI helpers for results
+               function ooRow(label, status, detail = "") {
+                 const li = document.createElement("li");
+                 li.style.margin = "6px 0";
+                 const icon = status === "ok" ? "✅" : status === "warn" ? "⚠️" : "❌";
+                 li.innerHTML = `<span style="min-width:1.2em;display:inline-block">${icon}</span> <strong>${label}</strong>${detail ? ` — <span>${detail}</span>` : ""}`;
+                 return li;
+               }
+               function ooClear(el) { while (el.firstChild) el.removeChild(el.firstChild); }
+
+               // --- ONLYOFFICE URL sanitizers ---
+function getTrustedDocsOrigin(raw) {
+  try {
+    const u = new URL(String(raw || "").trim());
+    if (!/^https?:$/.test(u.protocol)) return null;     // only http/https
+    if (u.username || u.password) return null;          // no creds in URL
+    return u.origin;                                    // scheme://host[:port]
+  } catch {
+    return null;
+  }
+}
+
+function buildOnlyOfficeApiUrl(origin) {
+  // fixed path; caller already validated/normalized origin
+  const u = new URL('/web-apps/apps/api/documents/api.js', origin);
+  u.searchParams.set('probe', String(Date.now()));
+  return u.toString();
+}
+       
+              
+              // Probes that don’t explode your state
+async function ooProbeScript(docsOrigin) {
+  return new Promise(resolve => {
+    const base = getTrustedDocsOrigin(docsOrigin);
+    if (!base) { resolve({ ok: false }); return; }
+
+    const src = buildOnlyOfficeApiUrl(base);
+    const s = document.createElement('script');
+    s.id = 'ooProbeScript';
+    s.async = true;
+    s.src = src;
+
+    // If you set a CSP nonce in a <meta name="csp-nonce" content="...">, attach it:
+    const nonce = document.querySelector('meta[name="csp-nonce"]')?.content;
+    if (nonce) s.setAttribute('nonce', nonce);
+
+    const cleanup = () => { try { s.remove(); } catch {} };
+
+    s.onload  = () => { cleanup(); resolve({ ok: true  }); };
+    s.onerror = () => { cleanup(); resolve({ ok: false }); };
+
+    // codeql[js/xss-through-dom]: the origin is validated (http/https, no creds),
+    // and the path is fixed to ONLYOFFICE api.js via URL(), so this is safe.
+    document.head.appendChild(s);
+  });
+}
+async function ooProbeFrame(docsOrigin, timeoutMs = 4000) {
+  return new Promise(resolve => {
+    const base = getTrustedDocsOrigin(docsOrigin);
+    if (!base) { resolve({ ok: false }); return; }
+
+    const f = document.createElement('iframe');
+    f.id = 'ooProbeFrame';
+    f.src = base;                 // only the sanitized origin
+    f.style.display = 'none';
+
+    // Optional: keep it extra constrained while probing.
+    // If your DS needs broader privileges, you can drop sandbox.
+    // f.sandbox = 'allow-same-origin allow-scripts';
+
+    const cleanup = () => { try { f.remove(); } catch {} };
+    const t = setTimeout(() => { cleanup(); resolve({ ok: false, timeout: true }); }, timeoutMs);
+
+    f.onload  = () => { clearTimeout(t); cleanup(); resolve({ ok: true  }); };
+    f.onerror = () => { clearTimeout(t); cleanup(); resolve({ ok: false }); };
+
+    // codeql[js/xss-through-dom]: src is constrained to a validated http/https origin.
+    document.body.appendChild(f);
+  });
+}
+               // Main test runner
+               async function runOnlyOfficeTests() {
+                 const spinner = document.getElementById('ooTestSpinner');
+                 const out = document.getElementById('ooTestResults');
+                 const docsOrigin = (document.getElementById('ooDocsOrigin')?.value || '').trim();
+       
+                 spinner.style.display = 'inline';
+                 ooClear(out);
+       
+                 // 1) FileRise status
+                 let statusOk = false, statusJson = null;
+                 try {
+                   const r = await fetch('/api/onlyoffice/status.php', { credentials: 'include' });
+                   statusJson = await r.json().catch(() => ({}));
+                   if (r.ok) {
+                     if (statusJson.enabled) {
+                       out.appendChild(ooRow('FileRise status', 'ok', 'Enabled and ready'));
+                       statusOk = true;
+                     } else {
+                       // Disabled usually means missing secret or origin; we’ll dig deeper below.
+                       out.appendChild(ooRow('FileRise status', 'warn', 'Disabled — check JWT Secret and Document Server Origin'));
+                     }
+                   } else {
+                     out.appendChild(ooRow('FileRise status', 'fail', `HTTP ${r.status}`));
+                   }
+                 } catch (e) {
+                   out.appendChild(ooRow('FileRise status', 'fail', (e && e.message) || 'Network error'));
+                 }
+       
+                 // 2) Secret presence (fresh read)
+                 try {
+                   const cfg = await fetch('/api/admin/getConfig.php', { credentials: 'include', cache: 'no-store' }).then(r => r.json());
+                   const hasSecret = !!(cfg.onlyoffice && cfg.onlyoffice.hasJwtSecret);
+                   out.appendChild(ooRow('JWT secret saved', hasSecret ? 'ok' : 'fail', hasSecret ? 'Present' : 'Missing'));
+                 } catch {
+                   out.appendChild(ooRow('JWT secret saved', 'warn', 'Could not verify'));
+                 }
+       
+                 // 3) Callback reachable (basic ping)
+                 try {
+                   const r = await fetch('/api/onlyoffice/callback.php?ping=1', { credentials: 'include', cache: 'no-store' });
+                   if (r.ok) out.appendChild(ooRow('Callback endpoint', 'ok', 'Reachable'));
+                   else out.appendChild(ooRow('Callback endpoint', 'fail', `HTTP ${r.status}`));
+                 } catch {
+                   out.appendChild(ooRow('Callback endpoint', 'fail', 'Network error'));
+                 }
+       
+                 // Early sanity on origin
+                 if (!/^https?:\/\//i.test(docsOrigin)) {
+                   out.appendChild(ooRow('Document Server Origin', 'fail', 'Enter a valid http(s) origin (e.g., https://docs.example.com)'));
+                   spinner.style.display = 'none';
+                   return;
+                 }
+       
+                 // 4a) Can browser load api.js (also surfaces CSP script-src issues)
+                 const sRes = await ooProbeScript(docsOrigin);
+                 out.appendChild(ooRow('Load api.js', sRes.ok ? 'ok' : 'fail', sRes.ok ? 'Loaded' : 'Blocked (check CSP script-src and origin)'));
+       
+                 // 4b) Can browser embed DS in an iframe (CSP frame-src)
+                 const fRes = await ooProbeFrame(docsOrigin);
+                 out.appendChild(ooRow('Embed DS iframe', fRes.ok ? 'ok' : 'fail', fRes.ok ? 'Allowed' : 'Blocked (check CSP frame-src)'));
+       
+                 // Optional tip if we see common red flags
+                 if (!statusOk || !sRes.ok || !fRes.ok) {
+                   const tip = document.createElement('li');
+                   tip.style.marginTop = '8px';
+                   tip.innerHTML = "💡 <em>Tip:</em> Use the CSP helper above to include your Document Server in <code>script-src</code>, <code>connect-src</code>, and <code>frame-src</code>.";
+                   out.appendChild(tip);
+                 }
+       
+                 spinner.style.display = 'none';
+               }
+       
+               // Wire the button
+               document.getElementById('ooTestBtn')?.addEventListener('click', runOnlyOfficeTests);
+
+               
+
+        // Append CSP help box
+        // --- CSP help box (replace your whole block with this) ---
+        const ooSec = document.getElementById("onlyofficeContent");
+        const cspHelp = document.createElement("div");
+        cspHelp.className = "alert alert-info";
+        cspHelp.style.marginTop = "12px";
+        cspHelp.innerHTML = `
+  <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;">
+    <strong>Content-Security-Policy help</strong>
+    <button type="button" id="copyOoCsp" class="btn btn-sm btn-outline-secondary">Copy</button>
+    <button type="button" id="selectOoCsp" class="btn btn-sm btn-outline-secondary">Select</button>
+  </div>
+  <div class="form-text" style="margin-bottom:8px;">
+    Add/replace this line in <code>public/.htaccess</code> (Apache). It allows loading ONLYOFFICE's <code>api.js</code>,
+    embedding the editor iframe, and letting the script make XHR to your Document Server.
+  </div>
+  <pre id="ooCspSnippet" style="white-space:pre-wrap;user-select:text;padding:8px;border:1px solid #ccc;border-radius:6px;background:#f7f7f7;"></pre>
+  <div class="form-text" style="margin-top:8px;">
+    If you terminate SSL or set CSP at a reverse proxy (e.g. Nginx), update it there instead.
+    Also note: if your site is <code>https://</code>, your ONLYOFFICE server must be <code>https://</code> too,
+    otherwise the browser will block it as mixed content.
+  </div>
+  <details style="margin-top:8px;">
+    <summary>Nginx equivalent</summary>
+    <pre id="ooCspSnippetNginx" style="white-space:pre-wrap;user-select:text;padding:8px;border:1px solid #ccc;border-radius:6px;background:#f7f7f7; margin-top:6px;"></pre>
+  </details>
+`;
+        ooSec.appendChild(cspHelp);
+
+        const INLINE_SHA = "sha256-ajmGY+5VJOY6+8JHgzCqsqI8w9dCQfAmqIkFesOKItM=";
+
+        function buildCspApache(originRaw) {
+          const o = (originRaw || "https://your-onlyoffice-server.example.com").replace(/\/+$/, '');
+          const api = `${o}/web-apps/apps/api/documents/api.js`;
+          return `Header always set Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' '${INLINE_SHA}' ${o} ${api}; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' ${o}; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'; frame-src 'self' ${o}"`;
+        }
+        function buildCspNginx(originRaw) {
+          const o = (originRaw || "https://your-onlyoffice-server.example.com").replace(/\/+$/, '');
+          const api = `${o}/web-apps/apps/api/documents/api.js`;
+          return `add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' '${INLINE_SHA}' ${o} ${api}; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' ${o}; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'; frame-src 'self' ${o}" always;`;
+        }
+
+        const ooDocsInput = document.getElementById("ooDocsOrigin");
+        const cspPre = document.getElementById("ooCspSnippet");
+        const cspPreNgx = document.getElementById("ooCspSnippetNginx");
+
+        function refreshCsp() {
+          const raw = (ooDocsInput?.value || "").trim();
+          const base = getTrustedDocsOrigin(raw) || raw; // fall back to raw so users see their input
+          cspPre.textContent    = buildCspApache(base);
+          cspPreNgx.textContent = buildCspNginx(base);
+        }
+        ooDocsInput?.addEventListener("input", refreshCsp);
+        refreshCsp();
+
+        // ---- Copy helpers (with robust fallback) ----
+        async function copyToClipboard(text) {
+          // Best path: async clipboard API in a secure context (https/localhost)
+          if (navigator.clipboard && window.isSecureContext) {
+            try { await navigator.clipboard.writeText(text); return true; }
+            catch (_) { /* fall through */ }
+          }
+          // Fallback for http or blocked clipboard: hidden textarea + execCommand
+          try {
+            const ta = document.createElement('textarea');
+            ta.value = text;
+            ta.setAttribute('readonly', '');
+            ta.style.position = 'fixed';
+            ta.style.left = '-9999px';
+            document.body.appendChild(ta);
+            ta.select();
+            const ok = document.execCommand('copy'); // deprecated but still widely supported
+            document.body.removeChild(ta);
+            return ok;
+          } catch (_) {
+            return false;
+          }
+        }
+        function selectElementContents(el) {
+          const range = document.createRange();
+          range.selectNodeContents(el);
+          const sel = window.getSelection();
+          sel.removeAllRanges();
+          sel.addRange(range);
+        }
+
+        document.getElementById("copyOoCsp")?.addEventListener("click", async () => {
+          const txt = (cspPre.textContent || "").trim();
+          const ok = await copyToClipboard(txt);
+          if (ok) {
+            showToast("CSP line copied.");
+          } else {
+            // Auto-select so the user can Ctrl/Cmd+C as a last resort
+            try { selectElementContents(cspPre); } catch { }
+            const reason = window.isSecureContext ? "" : " (page is not HTTPS or localhost)";
+            showToast("Copy failed" + reason + ". Press Ctrl/Cmd+C to copy.");
+          }
+        });
+
+        document.getElementById("selectOoCsp")?.addEventListener("click", () => {
+          try { selectElementContents(cspPre); showToast("Selected — press Ctrl/Cmd+C"); }
+          catch { /* ignore */ }
+        });
+
+        document.getElementById("ooEnabled").checked = !!(config.onlyoffice && config.onlyoffice.enabled);
+        document.getElementById("ooDocsOrigin").value = (config.onlyoffice && config.onlyoffice.docsOrigin) ? config.onlyoffice.docsOrigin : "";
+
        const hasId = !!(config.oidc && config.oidc.hasClientId);
        const hasSecret = !!(config.oidc && config.oidc.hasClientSecret);

@@ -696,10 +1003,24 @@ export function openAdminPanel() {
        document.getElementById("authHeaderName").value = config.loginOptions.authHeaderName || "X-Remote-User";
        document.getElementById("enableWebDAV").checked = config.enableWebDAV === true;
        document.getElementById("sharedMaxUploadSize").value = config.sharedMaxUploadSize || "";
+        // remember lock for handleSave
+        window.__OO_LOCKED = !!(config.onlyoffice && config.onlyoffice.lockedByPhp);
+        if (window.__OO_LOCKED) {
+          const sec = document.getElementById("onlyofficeContent");
+          sec.querySelectorAll("input,button").forEach(el => el.disabled = true);
+          const note = document.createElement("div");
+          note.className = "form-text";
+          note.style.marginTop = "6px";
+          note.textContent = "Managed by config.php — edit ONLYOFFICE_* constants there.";
+          sec.appendChild(note);
+        }
        captureInitialAdminConfig();

      } else {
        mdl.style.display = "flex";
+        const hasId = !!(config.oidc && config.oidc.hasClientId);
+        const hasSecret = !!(config.oidc && config.oidc.hasClientSecret);
+
        document.getElementById("disableFormLogin").checked = config.loginOptions.disableFormLogin === true;
        document.getElementById("disableBasicAuth").checked = config.loginOptions.disableBasicAuth === true;
        document.getElementById("disableOIDCLogin").checked = config.loginOptions.disableOIDCLogin === true;
@@ -713,6 +1034,10 @@ export function openAdminPanel() {
        if (!hasId) idEl.value = window.currentOIDCConfig?.clientId || "";
        if (!hasSecret) secEl.value = window.currentOIDCConfig?.clientSecret || "";
        wireReplaceButtons(document.getElementById("oidcContent"));
+        document.getElementById("ooEnabled").checked = !!(config.onlyoffice && config.onlyoffice.enabled);
+        document.getElementById("ooDocsOrigin").value = (config.onlyoffice && config.onlyoffice.docsOrigin) ? config.onlyoffice.docsOrigin : "";
+        const ooCont = document.getElementById("onlyofficeContent");
+        if (ooCont) wireReplaceButtons(ooCont);
        document.getElementById("oidcClientSecret").value = window.currentOIDCConfig?.clientSecret || "";
        document.getElementById("oidcRedirectUri").value = window.currentOIDCConfig?.redirectUri || "";
        document.getElementById("globalOtpauthUrl").value = window.currentOIDCConfig?.globalOtpauthUrl || '';
@@ -752,6 +1077,30 @@ function handleSave() {
    payload.oidc.clientSecret = scEl.value.trim();
  }

+  const ooSecretEl = document.getElementById("ooJwtSecret");
+
+  payload.onlyoffice = {
+    enabled: document.getElementById("ooEnabled").checked,
+    docsOrigin: document.getElementById("ooDocsOrigin").value.trim()
+  };
+
+  if (ooSecretEl?.dataset.replace === '1' && ooSecretEl.value.trim() !== '') {
+    payload.onlyoffice.jwtSecret = ooSecretEl.value.trim();
+  }
+
+  // ---- ONLYOFFICE payload ----
+  if (!window.__OO_LOCKED) {
+    const ooSecretVal = (document.getElementById("ooJwtSecret")?.value || "").trim();
+    payload.onlyoffice = {
+      enabled: document.getElementById("ooEnabled").checked,
+      docsOrigin: document.getElementById("ooDocsOrigin").value.trim()
+    };
+    // If user typed a secret (non-empty), send it (server keeps it if non-empty)
+    if (ooSecretVal !== "") {
+      payload.onlyoffice.jwtSecret = ooSecretVal;
+    }
+  }
+
  fetch('/api/admin/updateConfig.php', {
    method: 'POST',
    credentials: 'include',
--- a/public/js/defer-css.js
+++ b/public/js/defer-css.js
@@ -1,20 +1,31 @@
-// Promote any preloaded styles to real stylesheets without inline handlers (CSP-safe)
-document.addEventListener('DOMContentLoaded', () => {
-  // Promote any preloaded core CSS
-  document.querySelectorAll('link[rel="preload"][as="style"][href]').forEach(link => {
-    const href = link.getAttribute('href');
-    if ([...document.querySelectorAll('link[rel="stylesheet"]')]
-          .some(s => s.getAttribute('href') === href)) return;
-    const sheet = document.createElement('link');
-    sheet.rel = 'stylesheet';
-    sheet.href = href;
-    document.head.appendChild(sheet);
-  });
+// /public/js/defer-css.js
+// Promote preloaded styles to real stylesheets (CSP-safe) and expose a load promise.
+(function () {
+  if (window.__CSS_PROMISE__) return;

+  var loads = [];

-  // Optionally load non-critical icon/extra font CSS after first paint:
-  const extra = document.createElement('link');
-  extra.rel = 'stylesheet';
-  extra.href = '/css/vendor/material-icons.css?v={{APP_QVER}}';
-  document.head.appendChild(extra);
-});
+  // Promote <link rel="preload" as="style"> IN-PLACE
+  var preloads = document.querySelectorAll('link[rel="preload"][as="style"]');
+  for (var i = 0; i < preloads.length; i++) {
+    var l = preloads[i];
+    // resolve when it finishes loading as a stylesheet
+    loads.push(new Promise(function (res) { l.addEventListener('load', res, { once: true }); }));
+    l.rel = 'stylesheet';
+    if (!l.media || l.media === 'print') l.media = 'all'; // be explicit
+    l.removeAttribute('as'); // keep some engines happy about "used" preload
+  }
+
+  // Also wait for any existing <link rel="stylesheet"> that haven't finished yet
+  var styles = document.querySelectorAll('link[rel="stylesheet"]');
+  for (var j = 0; j < styles.length; j++) {
+    var s = styles[j];
+    if (s.sheet) continue; // already applied
+    loads.push(new Promise(function (res) { s.addEventListener('load', res, { once: true }); }));
+  }
+
+  // Safari quirk: nudge layout so promoted sheets apply immediately
+  void document.documentElement.offsetHeight;
+
+  window.__CSS_PROMISE__ = Promise.all(loads);
+})();
--- a/public/js/fileEditor.js
+++ b/public/js/fileEditor.js
@@ -2,6 +2,7 @@
 import { escapeHTML, showToast } from './domUtils.js?v={{APP_QVER}}';
 import { loadFileList } from './fileListView.js?v={{APP_QVER}}';
 import { t } from './i18n.js?v={{APP_QVER}}';
+import { buildPreviewUrl } from './filePreview.js?v={{APP_QVER}}';

 // thresholds for editor behavior
 const EDITOR_PLAIN_THRESHOLD = 5 * 1024 * 1024;  // >5 MiB => force plain text, lighter settings
@@ -14,7 +15,7 @@ const CM_BASE = "/vendor/codemirror/5.65.5/";
 const coreUrl = (p) => `${CM_BASE}${p}?v={{APP_QVER}}`;

 const CORE = {
-  js:  coreUrl("codemirror.min.js"),
+  js: coreUrl("codemirror.min.js"),
  css: coreUrl("codemirror.min.css"),
  themeCss: coreUrl("theme/material-darker.min.css"),
 };
@@ -22,30 +23,30 @@ const CORE = {
 // Which mode file to load for a given name/mime
 const MODE_URL = {
  // core/common
-  "xml":        "mode/xml/xml.min.js?v={{APP_QVER}}",
-  "css":        "mode/css/css.min.js?v={{APP_QVER}}",
+  "xml": "mode/xml/xml.min.js?v={{APP_QVER}}",
+  "css": "mode/css/css.min.js?v={{APP_QVER}}",
  "javascript": "mode/javascript/javascript.min.js?v={{APP_QVER}}",

  // meta / combos
-  "htmlmixed":  "mode/htmlmixed/htmlmixed.min.js?v={{APP_QVER}}",
+  "htmlmixed": "mode/htmlmixed/htmlmixed.min.js?v={{APP_QVER}}",
  "application/x-httpd-php": "mode/php/php.min.js?v={{APP_QVER}}",

  // docs / data
-  "markdown":   "mode/markdown/markdown.min.js?v={{APP_QVER}}",
-  "yaml":       "mode/yaml/yaml.min.js?v={{APP_QVER}}",
+  "markdown": "mode/markdown/markdown.min.js?v={{APP_QVER}}",
+  "yaml": "mode/yaml/yaml.min.js?v={{APP_QVER}}",
  "properties": "mode/properties/properties.min.js?v={{APP_QVER}}",
-  "sql":        "mode/sql/sql.min.js?v={{APP_QVER}}",
+  "sql": "mode/sql/sql.min.js?v={{APP_QVER}}",

  // shells
-  "shell":      "mode/shell/shell.min.js?v={{APP_QVER}}",
+  "shell": "mode/shell/shell.min.js?v={{APP_QVER}}",

  // languages
-  "python":     "mode/python/python.min.js?v={{APP_QVER}}",
-  "text/x-csrc":    "mode/clike/clike.min.js?v={{APP_QVER}}",
-  "text/x-c++src":  "mode/clike/clike.min.js?v={{APP_QVER}}",
-  "text/x-java":    "mode/clike/clike.min.js?v={{APP_QVER}}",
-  "text/x-csharp":  "mode/clike/clike.min.js?v={{APP_QVER}}",
-  "text/x-kotlin":  "mode/clike/clike.min.js?v={{APP_QVER}}"
+  "python": "mode/python/python.min.js?v={{APP_QVER}}",
+  "text/x-csrc": "mode/clike/clike.min.js?v={{APP_QVER}}",
+  "text/x-c++src": "mode/clike/clike.min.js?v={{APP_QVER}}",
+  "text/x-java": "mode/clike/clike.min.js?v={{APP_QVER}}",
+  "text/x-csharp": "mode/clike/clike.min.js?v={{APP_QVER}}",
+  "text/x-kotlin": "mode/clike/clike.min.js?v={{APP_QVER}}"
 };

 // Mode dependency graph
@@ -64,6 +65,137 @@ function normalizeModeName(modeOption) {
  return name;
 }

+// ---- ONLYOFFICE integration -----------------------------------------------
+
+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 };
+
+async function fetchOnlyOfficeCapsOnce() {
+  if (__ooCaps.fetched) return __ooCaps;
+  try {
+    const r = await fetch('/api/onlyoffice/status.php', { credentials: 'include' });
+    if (r.ok) {
+      const j = await r.json();
+      __ooCaps.enabled = !!j.enabled;
+      __ooCaps.exts = new Set(Array.isArray(j.exts) ? j.exts : []);
+    }
+  } catch { /* ignore; keep defaults */ }
+  __ooCaps.fetched = true;
+  return __ooCaps;
+}
+
+async function shouldUseOnlyOffice(fileName) {
+  const { enabled, exts } = await fetchOnlyOfficeCapsOnce();
+  return enabled && exts.has(getExt(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 ----------------------------------------------
+
+
 const _loadedScripts = new Set();
 const _loadedCss = new Set();
 let _corePromise = null;
@@ -195,29 +327,48 @@ function observeModalResize(modal) {
 }
 export { observeModalResize };

-export function editFile(fileName, folder) {
+export async function editFile(fileName, folder) {
  // destroy any previous editor
  let existingEditor = document.getElementById("editorContainer");
  if (existingEditor) existingEditor.remove();

  const folderUsed = folder || window.currentFolder || "root";
-  const folderPath = folderUsed === "root"
-    ? "uploads/"
-    : "uploads/" + folderUsed.split("/").map(encodeURIComponent).join("/") + "/";
-  const fileUrl = folderPath + encodeURIComponent(fileName) + "?t=" + new Date().getTime();
+  const fileUrl = buildPreviewUrl(folderUsed, fileName);

-  fetch(fileUrl, { method: "HEAD" })
-    .then(response => {
-      const lenHeader = response.headers.get("content-length") ?? response.headers.get("Content-Length");
-      const sizeBytes = lenHeader ? parseInt(lenHeader, 10) : null;
+  if (await shouldUseOnlyOffice(fileName)) {
+    await openOnlyOffice(fileName, folderUsed);
+    return;
+  }

+  // Probe size safely via API. Prefer HEAD; if missing Content-Length, fall back to a 1-byte Range GET.
+  async function probeSize(url) {
+    try {
+      const h = await fetch(url, { method: "HEAD", credentials: "include" });
+      const len = h.headers.get("content-length") ?? h.headers.get("Content-Length");
+      if (len && !Number.isNaN(parseInt(len, 10))) return parseInt(len, 10);
+    } catch { }
+    try {
+      const r = await fetch(url, {
+        method: "GET",
+        headers: { Range: "bytes=0-0" },
+        credentials: "include"
+      });
+      // Content-Range: bytes 0-0/12345
+      const cr = r.headers.get("content-range") ?? r.headers.get("Content-Range");
+      const m = cr && cr.match(/\/(\d+)\s*$/);
+      if (m) return parseInt(m[1], 10);
+    } catch { }
+    return null;
+  }
+
+  probeSize(fileUrl)
+    .then(sizeBytes => {
      if (sizeBytes !== null && sizeBytes > EDITOR_BLOCK_THRESHOLD) {
        showToast("This file is larger than 10 MB and cannot be edited in the browser.");
        throw new Error("File too large.");
      }
-      return response;
+      return fetch(fileUrl, { credentials: "include" });
    })
-    .then(() => fetch(fileUrl))
    .then(response => {
      if (!response.ok) throw new Error("HTTP error! Status: " + response.status);
      const lenHeader = response.headers.get("content-length") ?? response.headers.get("Content-Length");
@@ -269,8 +420,8 @@ export function editFile(fileName, folder) {
      // Keep buttons responsive even before editor exists
      const decBtn = document.getElementById("decreaseFont");
      const incBtn = document.getElementById("increaseFont");
-      decBtn.addEventListener("click", () => {});
-      incBtn.addEventListener("click", () => {});
+      decBtn.addEventListener("click", () => { });
+      incBtn.addEventListener("click", () => { });

      // Theme + mode selection
      const isDarkMode = document.body.classList.contains("dark-mode");
--- a/public/js/fileListView.js
+++ b/public/js/fileListView.js
@@ -34,6 +34,25 @@ import {
  
  export let fileData = [];
  export let sortOrder = { column: "uploaded", ascending: true };
+
+
+
+    // onnlyoffice
+let OO_ENABLED = false;
+let OO_EXTS = new Set();
+
+export async function initOnlyOfficeCaps() {
+  try {
+    const r = await fetch('/api/onlyoffice/status.php', { credentials: 'include' });
+    if (!r.ok) throw 0;
+    const j = await r.json();
+    OO_ENABLED = !!j.enabled;
+    OO_EXTS = new Set(Array.isArray(j.exts) ? j.exts : []);
+  } catch {
+    OO_ENABLED = false;
+    OO_EXTS = new Set();
+  }
+}
  
  // Hide "Edit" for files >10 MiB
  const MAX_EDIT_BYTES = 10 * 1024 * 1024;
@@ -338,6 +357,7 @@ function searchFiles(searchTerm) {
  window.updateRowHighlight = updateRowHighlight;
  
  export async function loadFileList(folderParam) {
+    await initOnlyOfficeCaps(); 
    const reqId = ++__fileListReqSeq; // latest call wins
    const folder = folderParam || "root";
    const fileListContainer = document.getElementById("fileList");
@@ -1328,46 +1348,34 @@ function searchFiles(searchTerm) {
    if (!fileName || typeof fileName !== "string") return false;
    const dot = fileName.lastIndexOf(".");
    if (dot < 0) return false;
-  
    const ext = fileName.slice(dot + 1).toLowerCase();
  
-    const allowedExtensions = [
-      "txt", "text", "md", "markdown", "rst",
-      "html", "htm", "xhtml", "shtml",
-      "css", "scss", "sass", "less",
-      "js", "mjs", "cjs", "jsx",
-      "ts", "tsx",
-      "json", "jsonc", "ndjson",
-      "yml", "yaml", "toml", "xml", "plist",
-      "ini", "conf", "config", "cfg", "cnf", "properties", "props", "rc",
-      "env", "dotenv",
-      "csv", "tsv", "tab",
+    // Your CodeMirror text-based types
+    const textEditExts = new Set([
+      "txt","text","md","markdown","rst",
+      "html","htm","xhtml","shtml",
+      "css","scss","sass","less",
+      "js","mjs","cjs","jsx",
+      "ts","tsx",
+      "json","jsonc","ndjson",
+      "yml","yaml","toml","xml","plist",
+      "ini","conf","config","cfg","cnf","properties","props","rc",
+      "env","dotenv",
+      "csv","tsv","tab",
      "log",
-      "sh", "bash", "zsh", "ksh", "fish",
-      "bat", "cmd",
-      "ps1", "psm1", "psd1",
-      "py", "pyw",
-      "rb",
-      "pl", "pm",
-      "go",
-      "rs",
-      "java",
-      "kt", "kts",
-      "scala", "sc",
-      "groovy", "gradle",
-      "c", "h", "cpp", "cxx", "cc", "hpp", "hh", "hxx",
-      "m", "mm",
-      "swift",
-      "cs", "fs", "fsx",
-      "dart",
-      "lua",
-      "r", "rmd",
-      "sql",
-      "vue", "svelte",
-      "twig", "mustache", "hbs", "handlebars", "ejs", "pug", "jade"
-    ];
+      "sh","bash","zsh","ksh","fish",
+      "bat","cmd",
+      "ps1","psm1","psd1",
+      "py","pyw","rb","pl","pm","go","rs","java","kt","kts",
+      "scala","sc","groovy","gradle",
+      "c","h","cpp","cxx","cc","hpp","hh","hxx",
+      "m","mm","swift","cs","fs","fsx","dart","lua","r","rmd",
+      "sql","vue","svelte","twig","mustache","hbs","handlebars","ejs","pug","jade"
+    ]);
  
-    return allowedExtensions.includes(ext);
+    if (textEditExts.has(ext)) return true;            // CodeMirror
+    if (OO_ENABLED && OO_EXTS.has(ext)) return true;   // ONLYOFFICE types if enabled
+    return false;
  }
  
  // Expose global functions for pagination and preview.
--- a/public/js/fileMenu.js
+++ b/public/js/fileMenu.js
@@ -1,7 +1,7 @@
 // fileMenu.js
 import { updateRowHighlight, showToast } from './domUtils.js?v={{APP_QVER}}';
 import { handleDeleteSelected, handleCopySelected, handleMoveSelected, handleDownloadZipSelected, handleExtractZipSelected, renameFile, openCreateFileModal } from './fileActions.js?v={{APP_QVER}}';
-import { previewFile } from './filePreview.js?v={{APP_QVER}}';
+import { previewFile, buildPreviewUrl } from './filePreview.js?v={{APP_QVER}}';
 import { editFile } from './fileEditor.js?v={{APP_QVER}}';
 import { canEditFile, fileData } from './fileListView.js?v={{APP_QVER}}';
 import { openTagModal, openMultiTagModal } from './fileTags.js?v={{APP_QVER}}';
@@ -39,11 +39,11 @@ export function showFileContextMenu(x, y, menuItems) {
    });
    menu.appendChild(menuItem);
  });
-  
+
  menu.style.left = x + "px";
  menu.style.top = y + "px";
  menu.style.display = "block";
-  
+
  const menuRect = menu.getBoundingClientRect();
  const viewportHeight = window.innerHeight;
  if (menuRect.bottom > viewportHeight) {
@@ -62,7 +62,7 @@ export function hideFileContextMenu() {

 export function fileListContextMenuHandler(e) {
  e.preventDefault();
-  
+
  let row = e.target.closest("tr");
  if (row) {
    const checkbox = row.querySelector(".file-checkbox");
@@ -71,9 +71,9 @@ export function fileListContextMenuHandler(e) {
      updateRowHighlight(checkbox);
    }
  }
-  
+
  const selected = Array.from(document.querySelectorAll("#fileList .file-checkbox:checked")).map(chk => chk.value);
-  
+
  let menuItems = [
    { label: t("create_file"), action: () => openCreateFileModal() },
    { label: t("delete_selected"), action: () => { handleDeleteSelected(new Event("click")); } },
@@ -81,14 +81,14 @@ export function fileListContextMenuHandler(e) {
    { label: t("move_selected"), action: () => { handleMoveSelected(new Event("click")); } },
    { label: t("download_zip"), action: () => { handleDownloadZipSelected(new Event("click")); } }
  ];
-  
+
  if (selected.some(name => name.toLowerCase().endsWith(".zip"))) {
    menuItems.push({
      label: t("extract_zip"),
      action: () => { handleExtractZipSelected(new Event("click")); }
    });
  }
-  
+
  if (selected.length > 1) {
    menuItems.push({
      label: t("tag_selected"),
@@ -100,36 +100,33 @@ export function fileListContextMenuHandler(e) {
  }
  else if (selected.length === 1) {
    const file = fileData.find(f => f.name === selected[0]);
-    
+
    menuItems.push({
      label: t("preview"),
      action: () => {
        const folder = window.currentFolder || "root";
-        const folderPath = folder === "root"
-          ? "uploads/"
-          : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
-        previewFile(folderPath + encodeURIComponent(file.name) + "?t=" + new Date().getTime(), file.name);
+        previewFile(buildPreviewUrl(folder, file.name), file.name);
      }
    });
-    
+
    if (canEditFile(file.name)) {
      menuItems.push({
        label: t("edit"),
        action: () => { editFile(selected[0], window.currentFolder); }
      });
    }
-    
+
    menuItems.push({
      label: t("rename"),
      action: () => { renameFile(selected[0], window.currentFolder); }
    });
-    
+
    menuItems.push({
      label: t("tag_file"),
      action: () => { openTagModal(file); }
    });
  }
-  
+
  showFileContextMenu(e.clientX, e.clientY, menuItems);
 }

@@ -140,7 +137,7 @@ export function bindFileListContextMenu() {
  }
 }

-document.addEventListener("click", function(e) {
+document.addEventListener("click", function (e) {
  const menu = document.getElementById("fileContextMenu");
  if (menu && menu.style.display === "block") {
    hideFileContextMenu();
@@ -148,9 +145,9 @@ document.addEventListener("click", function(e) {
 });

 // Rebind context menu after file table render.
-(function() {
+(function () {
  const originalRenderFileTable = window.renderFileTable;
-  window.renderFileTable = function(folder) {
+  window.renderFileTable = function (folder) {
    originalRenderFileTable(folder);
    bindFileListContextMenu();
  };
--- a/public/js/filePreview.js
+++ b/public/js/filePreview.js
@@ -3,6 +3,12 @@ import { escapeHTML, showToast } from './domUtils.js?v={{APP_QVER}}';
 import { fileData } from './fileListView.js?v={{APP_QVER}}';
 import { t } from './i18n.js?v={{APP_QVER}}';

+// Build a preview URL that always goes through the API layer (respects ACLs/UPLOAD_DIR)
+export function buildPreviewUrl(folder, name) {
+  const f = (!folder || folder === '') ? 'root' : String(folder);
+  return `/api/file/download.php?folder=${encodeURIComponent(f)}&file=${encodeURIComponent(name)}&inline=1&t=${Date.now()}`;
+}
+
 export function openShareModal(file, folder) {
  // Remove any existing modal
  const existing = document.getElementById("shareModal");
@@ -92,10 +98,10 @@ export function openShareModal(file, folder) {

      if (sel.value === "custom") {
        value = parseInt(document.getElementById("customExpirationValue").value, 10);
-        unit  = document.getElementById("customExpirationUnit").value;
+        unit = document.getElementById("customExpirationUnit").value;
      } else {
        value = parseInt(sel.value, 10);
-        unit  = "minutes";
+        unit = "minutes";
      }

      const password = document.getElementById("sharePassword").value;
@@ -115,20 +121,20 @@ export function openShareModal(file, folder) {
          password
        })
      })
-      .then(res => res.json())
-      .then(data => {
-        if (data.token) {
-          const url = `${window.location.origin}/api/file/share.php?token=${encodeURIComponent(data.token)}`;
-          document.getElementById("shareLinkInput").value = url;
-          document.getElementById("shareLinkDisplay").style.display = "block";
-        } else {
-          showToast(t("error_generating_share") + ": " + (data.error||"Unknown"));
-        }
-      })
-      .catch(err => {
-        console.error(err);
-        showToast(t("error_generating_share"));
-      });
+        .then(res => res.json())
+        .then(data => {
+          if (data.token) {
+            const url = `${window.location.origin}/api/file/share.php?token=${encodeURIComponent(data.token)}`;
+            document.getElementById("shareLinkInput").value = url;
+            document.getElementById("shareLinkDisplay").style.display = "block";
+          } else {
+            showToast(t("error_generating_share") + ": " + (data.error || "Unknown"));
+          }
+        })
+        .catch(err => {
+          console.error(err);
+          showToast(t("error_generating_share"));
+        });
    });

  // Copy to clipboard
@@ -272,10 +278,7 @@ export function previewFile(fileUrl, fileName) {
        modal.galleryCurrentIndex = (modal.galleryCurrentIndex - 1 + modal.galleryImages.length) % modal.galleryImages.length;
        let newFile = modal.galleryImages[modal.galleryCurrentIndex];
        modal.querySelector("h4").textContent = newFile.name;
-        img.src = ((window.currentFolder === "root")
-          ? "uploads/"
-          : "uploads/" + window.currentFolder.split("/").map(encodeURIComponent).join("/") + "/")
-          + encodeURIComponent(newFile.name) + "?t=" + new Date().getTime();
+        img.src = buildPreviewUrl(window.currentFolder || 'root', newFile.name);
        // Reset transforms.
        img.dataset.scale = 1;
        img.dataset.rotate = 0;
@@ -355,10 +358,7 @@ export function previewFile(fileUrl, fileName) {
        modal.galleryCurrentIndex = (modal.galleryCurrentIndex + 1) % modal.galleryImages.length;
        let newFile = modal.galleryImages[modal.galleryCurrentIndex];
        modal.querySelector("h4").textContent = newFile.name;
-        img.src = ((window.currentFolder === "root")
-          ? "uploads/"
-          : "uploads/" + window.currentFolder.split("/").map(encodeURIComponent).join("/") + "/")
-          + encodeURIComponent(newFile.name) + "?t=" + new Date().getTime();
+        img.src = buildPreviewUrl(window.currentFolder || 'root', newFile.name);
        // Reset transforms.
        img.dataset.scale = 1;
        img.dataset.rotate = 0;
@@ -416,26 +416,26 @@ export function previewFile(fileUrl, fileName) {
    }
  } else {
    // Handle non-image file previews.
-  if (extension === "pdf") {
-    // build a cache‐busted URL
-    const separator = fileUrl.includes('?') ? '&' : '?';
-    const urlWithTs = fileUrl + separator + 't=' + Date.now();
-  
-    // open in a new tab (avoids CSP frame-ancestors)
-    window.open(urlWithTs, "_blank");
-  
-    // tear down the just-created modal
-    const modal = document.getElementById("filePreviewModal");
-    if (modal) modal.remove();
-  
-    // stop further preview logic
-    return;
-  } else if (/\.(mp4|mkv|webm|mov|ogv)$/i.test(fileName)) {
+    if (extension === "pdf") {
+      // build a cache‐busted URL
+      const separator = fileUrl.includes('?') ? '&' : '?';
+      const urlWithTs = fileUrl + separator + 't=' + Date.now();
+
+      // open in a new tab (avoids CSP frame-ancestors)
+      window.open(urlWithTs, "_blank");
+
+      // tear down the just-created modal
+      const modal = document.getElementById("filePreviewModal");
+      if (modal) modal.remove();
+
+      // stop further preview logic
+      return;
+    } else if (/\.(mp4|mkv|webm|mov|ogv)$/i.test(fileName)) {
      const video = document.createElement("video");
      video.src = fileUrl;
      video.controls = true;
      video.className = "image-modal-img";
-      
+
      const progressKey = 'videoProgress-' + fileUrl;
      video.addEventListener("loadedmetadata", () => {
        const savedTime = localStorage.getItem(progressKey);
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -67,32 +67,25 @@ function isDemoHost() {
 }

 function showLoginTip(message) {
-  const form = document.getElementById('loginForm');
-  if (!form) return;
-
-  let tip = document.getElementById('fr-login-tip');
-  if (!tip) {
-    tip = document.createElement('div');
-    tip.id = 'fr-login-tip';
-    tip.className = 'alert alert-info'; // fine even without Bootstrap
-    tip.style.marginTop = '8px';
-    form.prepend(tip);
-  }
-
-  // Clear & rebuild so we can add the demo hint cleanly
-  tip.textContent = '';
-  tip.append(document.createTextNode(message || ''));
-
-  if (isDemoHost()) {
-    const line = document.createElement('div');
-    line.style.marginTop = '6px';
-    const mk = (txt) => { const k = document.createElement('code'); k.textContent = txt; return k; };
-    line.append(
-      document.createTextNode('Demo login — user: '), mk('demo'),
-      document.createTextNode(' · pass: '), mk('demo')
-    );
+  const tip = document.getElementById('fr-login-tip');
+  if (!tip) return;
+  tip.innerHTML = '';                           // clear
+  if (message) tip.append(document.createTextNode(message));
+  if (location.hostname.replace(/^www\./, '') === 'demo.filerise.net') {
+    const line = document.createElement('div'); line.style.marginTop = '6px';
+    const mk = t => { const k = document.createElement('code'); k.textContent = t; return k; };
+    line.append(document.createTextNode('Demo login — user: '), mk('demo'),
+      document.createTextNode(' · pass: '), mk('demo'));
    tip.append(line);
  }
+  tip.style.display = 'block';                  // reveal without shifting layout
+}
+
+async function hideOverlaySmoothly(overlay) {
+  if (!overlay) return;
+  try { await document.fonts?.ready; } catch { }
+  await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+  overlay.style.display = 'none';
 }

 function wireModalEnterDefault() {
@@ -322,7 +315,6 @@ function applyDarkMode({ fromSystemChange = false } = {}) {
  let stored = null;
  try { stored = localStorage.getItem('darkMode'); } catch { }

-  // If no stored pref, fall back to system
  let isDark = (stored === null)
    ? (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
    : (stored === '1' || stored === 'true');
@@ -336,15 +328,26 @@ function applyDarkMode({ fromSystemChange = false } = {}) {
    el.setAttribute('data-theme', isDark ? 'dark' : 'light');
  });

+  // keep UA chrome & bg consistent post-toggle
+  const bg = isDark ? '#121212' : '#ffffff';
+  root.style.backgroundColor = bg;
+  root.style.colorScheme = isDark ? 'dark' : 'light';
+  if (body) {
+    body.style.backgroundColor = bg;
+    body.style.colorScheme = isDark ? 'dark' : 'light';
+  }
+  const mt = document.querySelector('meta[name="theme-color"]');
+  if (mt) mt.content = bg;
+  const mcs = document.querySelector('meta[name="color-scheme"]');
+  if (mcs) mcs.content = isDark ? 'dark light' : 'light dark';
+
  const btn = document.getElementById('darkModeToggle');
  const icon = document.getElementById('darkModeIcon');
  if (icon) icon.textContent = isDark ? 'light_mode' : 'dark_mode';
-
  if (btn) {
    const ttOn = (typeof t === 'function' ? t('switch_to_dark_mode') : 'Switch to dark mode');
    const ttOff = (typeof t === 'function' ? t('switch_to_light_mode') : 'Switch to light mode');
    const aria = (typeof t === 'function' ? (isDark ? t('light_mode') : t('dark_mode')) : (isDark ? 'Light mode' : 'Dark mode'));
-
    btn.classList.toggle('active', isDark);
    btn.setAttribute('aria-label', aria);
    btn.setAttribute('title', isDark ? ttOff : ttOn);
@@ -381,6 +384,9 @@ function bindDarkMode() {
  // ---------- tiny utils ----------
  const $ = (s, root = document) => root.querySelector(s);
  const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));
+  // Safe show/hide that work with both CSS and [hidden]
+  const unhide = (el) => { if (!el) return; el.removeAttribute('hidden'); el.style.display = ''; };
+  const hideEl = (el) => { if (!el) return; el.setAttribute('hidden', ''); el.style.display = 'none'; };
  const show = (el) => {
    if (!el) return;
    el.hidden = false; el.classList?.remove('d-none', 'hidden');
@@ -394,28 +400,88 @@ function bindDarkMode() {
  };

  // ---------- site config / auth ----------
-  function applySiteConfig(cfg) {
+  function applySiteConfig(cfg, { phase = 'final' } = {}) {
    try {
      const title = (cfg && cfg.header_title) ? String(cfg.header_title) : 'FileRise';
+  
+      // Always keep <title> correct early (no visual flicker)
      document.title = title;
-      const h1 = document.querySelector('.header-title h1'); if (h1) h1.textContent = title;
-
+  
+      // --- Login options (apply in BOTH phases so login page is correct) ---
      const lo = (cfg && cfg.loginOptions) ? cfg.loginOptions : {};
-      const disableForm = !!lo.disableFormLogin;
-      const disableOIDC = !!lo.disableOIDCLogin;
+      const disableForm  = !!lo.disableFormLogin;
+      const disableOIDC  = !!lo.disableOIDCLogin;
      const disableBasic = !!lo.disableBasicAuth;
-
-      const row = $('#loginForm'); if (row) row.style.display = disableForm ? 'none' : '';
-      const oidc = $('#oidcLoginBtn'); if (oidc) oidc.style.display = disableOIDC ? 'none' : '';
+  
+      const row = $('#loginForm');
+      if (row) {
+        if (disableForm) {
+          row.setAttribute('hidden', '');
+          row.style.display = ''; // don't leave display:none lying around
+        } else {
+          row.removeAttribute('hidden');
+          row.style.display = '';
+        }
+      }
+      const oidc  = $('#oidcLoginBtn'); if (oidc)  oidc.style.display  = disableOIDC ? 'none' : '';
      const basic = document.querySelector('a[href="/api/auth/login_basic.php"]');
      if (basic) basic.style.display = disableBasic ? 'none' : '';
+  
+      // --- Header <h1> only in the FINAL phase (prevents visible flips) ---
+      if (phase === 'final') {
+        const h1 = document.querySelector('.header-title h1');
+        if (h1) {
+          // prevent i18n or legacy from overwriting it
+          if (h1.hasAttribute('data-i18n-key')) h1.removeAttribute('data-i18n-key');
+  
+          if (h1.textContent !== title) h1.textContent = title;
+  
+          // lock it so late code can't stomp it
+          if (!h1.__titleLock) {
+            const mo = new MutationObserver(() => {
+              if (h1.textContent !== title) h1.textContent = title;
+            });
+            mo.observe(h1, { childList: true, characterData: true, subtree: true });
+            h1.__titleLock = mo;
+          }
+        }
+      }
    } catch { }
  }
+
+  async function readyToReveal() {
+    // Wait for CSS + fonts so the first revealed frame is fully styled
+    try { await (window.__CSS_PROMISE__ || Promise.resolve()); } catch { }
+    try { await document.fonts?.ready; } catch { }
+    // Give layout one paint to settle
+    await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)));
+  }
+
+  async function revealAppAndHideOverlay() {
+    const appRoot = document.getElementById('appRoot');
+    const overlay = document.getElementById('loadingOverlay');
+    await readyToReveal();
+    if (appRoot) appRoot.style.visibility = 'visible';
+    if (overlay) {
+      overlay.style.transition = 'opacity .18s ease-out';
+      overlay.style.opacity = '0';
+      setTimeout(() => { overlay.style.display = 'none'; }, 220);
+    }
+  }
+
  async function loadSiteConfig() {
    try {
      const r = await fetch('/api/siteConfig.php', { credentials: 'include' });
-      const j = await r.json().catch(() => ({})); applySiteConfig(j);
-    } catch { applySiteConfig({}); }
+      const j = await r.json().catch(() => ({}));
+      window.__FR_SITE_CFG__ = j || {};
+      // Early pass: title + login options (skip touching <h1> to avoid flicker)
+      applySiteConfig(window.__FR_SITE_CFG__, { phase: 'early' });
+      return window.__FR_SITE_CFG__;
+    } catch {
+      window.__FR_SITE_CFG__ = {};
+      applySiteConfig({}, { phase: 'early' });
+      return null;
+    }
  }
  async function primeCsrf() {
    try {
@@ -665,7 +731,6 @@ function bindDarkMode() {
  function forceLoginVisible() {
    show($('#main'));
    show($('#loginForm'));
-    hide($('.main-wrapper'));
    const hb = $('.header-buttons'); if (hb) hb.style.visibility = 'hidden';
    const ov = $('#loadingOverlay'); if (ov) ov.style.display = 'none';
  }
@@ -809,8 +874,7 @@ function bindDarkMode() {
      window.__FR_FLAGS.booted = true;
      ensureToastReady();
      // show chrome
-      const wrap = document.querySelector('.main-wrapper'); if (wrap) { wrap.hidden = false; wrap.classList?.remove('d-none', 'hidden'); wrap.style.display = 'block'; }
-      const lf = document.getElementById('loginForm'); if (lf) lf.style.display = 'none';
+
      const hb = document.querySelector('.header-buttons'); if (hb) hb.style.visibility = 'visible';
      const ov = document.getElementById('loadingOverlay'); if (ov) ov.style.display = 'flex';

@@ -825,6 +889,9 @@ function bindDarkMode() {
          window.__FR_AUTH_STATE = state;
        } catch { }

+        // authed → heavy boot path
+        document.body.classList.add('authed');
+
        // 1) i18n (safe)
        // i18n: honor saved language first, then apply translations
        try {
@@ -840,10 +907,20 @@ function bindDarkMode() {
        if (!window.__FR_FLAGS.initialized) {
          if (typeof app.loadCsrfToken === 'function') await app.loadCsrfToken();
          if (typeof app.initializeApp === 'function') app.initializeApp();
+          const darkBtn = document.getElementById('darkModeToggle');
+          if (darkBtn) {
+            darkBtn.removeAttribute('hidden');
+            darkBtn.style.setProperty('display', 'inline-flex', 'important'); // beats any CSS
+            darkBtn.style.visibility = ''; // just in case
+          }
+          const link = document.createElement('link');
+          link.rel = 'stylesheet';
+          link.href = '/css/vendor/material-icons.css?v={{APP_QVER}}';
+          document.head.appendChild(link);
+

          window.__FR_FLAGS.initialized = true;

-          // Show "Welcome back, <username>!" only once per tab-session
          try {
            if (!sessionStorage.getItem('__fr_welcomed')) {
              const name = (window.__FR_AUTH_STATE?.username) || localStorage.getItem('username') || '';
@@ -864,7 +941,7 @@ function bindDarkMode() {
            auth.applyProxyBypassUI && auth.applyProxyBypassUI();
            auth.updateAuthenticatedUI && auth.updateAuthenticatedUI(state);

-            // ⬇️ bind ALL the admin / change-password buttons once
+            //  bind ALL the admin / change-password buttons once
            if (!window.__FR_FLAGS.wired.authInit && typeof auth.initAuth === 'function') {
              try { auth.initAuth(); } catch (e) { console.warn('[auth] initAuth failed', e); }
              window.__FR_FLAGS.wired.authInit = true;
@@ -913,36 +990,71 @@ function bindDarkMode() {

  // ---------- entry (no flicker: decide state BEFORE showing login) ----------
  document.addEventListener('DOMContentLoaded', async () => {
-
-
    if (window.__FR_FLAGS.entryStarted) return;
    window.__FR_FLAGS.entryStarted = true;

+    // Always start clean
+    document.body.classList.remove('authed');
+
+    const overlay = document.getElementById('loadingOverlay');
+    const wrap = document.querySelector('.main-wrapper');   // app shell
+    const mainEl = document.getElementById('main');           // contains loginForm
+    const login = document.getElementById('loginForm');
+
    bindDarkMode();
    await loadSiteConfig();

    const { authed, setup } = await checkAuth();

-    if (setup) { await bootSetupWizard(); return; }
-    if (authed) { await bootHeavy(); return; }
+    if (setup) {
+      // Setup wizard runs inside app shell
+      unhide(wrap);
+      hideEl(login);
+      await bootSetupWizard();
+      await revealAppAndHideOverlay();

-    // login view
-    show(document.querySelector('#main'));
-    show(document.querySelector('#loginForm'));
-    (document.querySelector('.header-buttons') || {}).style && (document.querySelector('.header-buttons').style.visibility = 'hidden');
-    const ov = document.getElementById('loadingOverlay'); if (ov) ov.style.display = 'none';
+      return;
+    }
+
+    if (authed) {
+      // Authenticated path: show app, hide login
+      document.body.classList.add('authed');
+      unhide(wrap);            // works whether CSS or [hidden] was used
+      hideEl(login);
+      await bootHeavy();
+      await revealAppAndHideOverlay();
+      requestAnimationFrame(() => {
+        const pre = document.getElementById('pretheme-css');
+        if (pre) pre.remove();
+      });
+      return;
+    }
+
+    // ---- NOT AUTHED: show only the login view ----
+    hideEl(wrap);              // ensure app shell stays hidden while logged out
+    unhide(mainEl);
+    unhide(login);
+    if (login) login.style.display = '';
+    // …wire stuff…
+    applySiteConfig(window.__FR_SITE_CFG__ || {}, { phase: 'final' });
+    await revealAppAndHideOverlay();
+    const hb = document.querySelector('.header-buttons');
+    if (hb) hb.style.visibility = 'hidden';
+
+    // keep app cards inert while logged out (no layout poke)
    ['uploadCard', 'folderManagementCard'].forEach(id => {
      const el = document.getElementById(id);
      if (!el) return;
-      el.style.display = 'none';
      el.setAttribute('aria-hidden', 'true');
      try { el.inert = true; } catch { }
    });
+
    bindLogin();
    wireCreateDropdown();
    keepCreateDropdownWired();
    wireModalEnterDefault();
    showLoginTip('Please log in to continue');

-  }, { once: true }); // <— important
+    if (overlay) overlay.style.display = 'none';
+  }, { once: true });
 })();
--- a/public/js/version.js
+++ b/public/js/version.js
@@ -1,2 +1,2 @@
 // generated by CI
-window.APP_VERSION = 'v1.7.4';
+window.APP_VERSION = 'v1.8.1';
--- a/src/controllers/AdminController.php
+++ b/src/controllers/AdminController.php
@@ -5,11 +5,11 @@ require_once __DIR__ . '/../../config/config.php';
 require_once PROJECT_ROOT . '/src/models/AdminModel.php';

 class AdminController
-{ 
+{
    public function getConfig(): void
    {
        header('Content-Type: application/json; charset=utf-8');
-    
+
        $config = AdminModel::getConfig();
        if (isset($config['error'])) {
            http_response_code(500);
@@ -17,8 +17,24 @@ class AdminController
            echo json_encode(['error' => $config['error']], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
            return;
        }
-    
-        // Whitelisted public subset only
+
+        // ---- Effective ONLYOFFICE values (constants override adminConfig) ----
+        $ooCfg       = is_array($config['onlyoffice'] ?? null) ? $config['onlyoffice'] : [];
+        $effEnabled  = defined('ONLYOFFICE_ENABLED')
+            ? (bool) ONLYOFFICE_ENABLED
+            : (bool) ($ooCfg['enabled'] ?? false);
+
+        $effDocs     = defined('ONLYOFFICE_DOCS_ORIGIN') && ONLYOFFICE_DOCS_ORIGIN !== ''
+            ? (string) ONLYOFFICE_DOCS_ORIGIN
+            : (string) ($ooCfg['docsOrigin'] ?? '');
+
+        $hasSecret   = defined('ONLYOFFICE_JWT_SECRET')
+            ? (ONLYOFFICE_JWT_SECRET !== '')
+            : (!empty($ooCfg['jwtSecret']));
+
+        $publicOriginCfg = (string) ($ooCfg['publicOrigin'] ?? '');
+
+        // Whitelisted public subset only (+ ONLYOFFICE enabled flag)
        $public = [
            'header_title'        => (string)($config['header_title'] ?? 'FileRise'),
            'loginOptions'        => [
@@ -34,12 +50,16 @@ class AdminController
                'redirectUri' => (string)($config['oidc']['redirectUri'] ?? ''),
                // never include clientId/clientSecret
            ],
+            'onlyoffice' => [
+                // Public only needs to know if it’s on; no secrets/origins here.
+                'enabled' => $effEnabled,
+            ],
        ];
-    
+
        $isAdmin = !empty($_SESSION['authenticated']) && !empty($_SESSION['isAdmin']);
-    
+
        if ($isAdmin) {
-            // admin-only extras: presence flags + proxy options
+            // admin-only extras: presence flags + proxy options + ONLYOFFICE effective view
            $adminExtra = [
                'loginOptions' => array_merge($public['loginOptions'], [
                    'authBypass'     => (bool)($config['loginOptions']['authBypass'] ?? false),
@@ -49,12 +69,23 @@ class AdminController
                    'hasClientId'     => !empty($config['oidc']['clientId']),
                    'hasClientSecret' => !empty($config['oidc']['clientSecret']),
                ]),
+                'onlyoffice' => [
+                    'enabled'      => $effEnabled,
+                    'docsOrigin'   => $effDocs,                // effective (constants win)
+                    'publicOrigin' => $publicOriginCfg,        // optional override from adminConfig
+                    'hasJwtSecret' => (bool)$hasSecret,        // boolean only; never leak secret
+                    'lockedByPhp'  => (
+                        defined('ONLYOFFICE_ENABLED')
+                        || defined('ONLYOFFICE_DOCS_ORIGIN')
+                        || defined('ONLYOFFICE_JWT_SECRET')
+                    ),
+                ],
            ];
            header('Cache-Control: no-store'); // don’t cache admin config
            echo json_encode(array_merge($public, $adminExtra), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
            return;
        }
-    
+
        // Non-admins / unauthenticated: only the public subset
        header('Cache-Control: no-store');
        echo json_encode($public, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
@@ -221,6 +252,40 @@ class AdminController
        }

        // —– persist merged config —–
+                // ---- ONLYOFFICE: merge from payload (unless locked by PHP defines) ----
+                $ooLockedByPhp = (
+                    defined('ONLYOFFICE_ENABLED') ||
+                    defined('ONLYOFFICE_DOCS_ORIGIN') ||
+                    defined('ONLYOFFICE_JWT_SECRET') ||
+                    defined('ONLYOFFICE_PUBLIC_ORIGIN')
+                );
+        
+                if (!$ooLockedByPhp && isset($data['onlyoffice']) && is_array($data['onlyoffice'])) {
+                    $ooExisting = (isset($existing['onlyoffice']) && is_array($existing['onlyoffice']))
+                        ? $existing['onlyoffice'] : [];
+        
+                    $oo = $ooExisting;
+        
+                    if (array_key_exists('enabled', $data['onlyoffice'])) {
+                        $oo['enabled'] = filter_var($data['onlyoffice']['enabled'], FILTER_VALIDATE_BOOLEAN);
+                    }
+                    if (isset($data['onlyoffice']['docsOrigin'])) {
+                        $oo['docsOrigin'] = (string)$data['onlyoffice']['docsOrigin'];
+                    }
+                    if (isset($data['onlyoffice']['publicOrigin'])) {
+                        $oo['publicOrigin'] = (string)$data['onlyoffice']['publicOrigin'];
+                    }
+                    // Allow setting/changing the secret when NOT locked by PHP
+                    if (isset($data['onlyoffice']['jwtSecret'])) {
+                        $js = trim((string)$data['onlyoffice']['jwtSecret']);
+                        if ($js !== '') {
+                            $oo['jwtSecret'] = $js; // stored encrypted by AdminModel
+                        }
+                        // If blank, we leave existing secret unchanged (no implicit wipe).
+                    }
+        
+                    $merged['onlyoffice'] = $oo;
+                }
        $result = AdminModel::updateConfig($merged);
        if (isset($result['error'])) {
            http_response_code(500);
--- a/src/controllers/OnlyOfficeController.php
+++ b/src/controllers/OnlyOfficeController.php
@@ -0,0 +1,383 @@
+<?php
+// src/controllers/OnlyOfficeController.php
+declare(strict_types=1);
+
+require_once PROJECT_ROOT . '/src/models/AdminModel.php';
+require_once PROJECT_ROOT . '/src/lib/ACL.php';
+
+class OnlyOfficeController
+{
+
+
+// What FileRise will route to ONLYOFFICE at all (edit *or* view)
+private const OO_SUPPORTED_EXTS = [
+    'doc','docx','odt','rtf','txt',
+    'xls','xlsx','ods','csv',
+    'ppt','pptx','odp',
+    'pdf'
+  ];
+  
+  // Never editable via OO (we’ll always set edit=false for these)
+  private const OO_NEVER_EDIT = ['pdf'];
+  
+  // (Optional) More view-only types you can enable if you like
+  private const OO_VIEW_ONLY_EXTRAS = [
+    'djvu','xps','oxps','epub','fb2','pages','hwp','hwpx',
+    'vsdx','vsdm','vssx','vssm','vstx','vstm'
+  ];
+    /** Resolve effective secret: constants override adminConfig */
+    private function effectiveSecret(): string
+    {
+        $cfg = AdminModel::getConfig();
+        $oo  = is_array($cfg['onlyoffice'] ?? null) ? $cfg['onlyoffice'] : [];
+        if (defined('ONLYOFFICE_JWT_SECRET') && ONLYOFFICE_JWT_SECRET !== '') {
+            return (string)ONLYOFFICE_JWT_SECRET;
+        }
+        return (string)($oo['jwtSecret'] ?? '');
+    }
+
+    // --- lightweight logger ------------------------------------------------------
+private const OO_LOG_PATH = '/var/www/users/onlyoffice-cb.debug';
+
+private function ooDebug(): bool
+{
+    // Enable verbose logging by either constant or env var
+    if (defined('ONLYOFFICE_DEBUG') && ONLYOFFICE_DEBUG) return true;
+    return getenv('ONLYOFFICE_DEBUG') === '1';
+}
+
+/**
+ * @param 'error'|'warn'|'info'|'debug' $level
+ */
+private function ooLog(string $level, string $msg): void
+{
+    $level = strtolower($level);
+    $line  = '[OO-CB][' . strtoupper($level) . '] ' . $msg;
+
+    // Only emit to Apache on errors (keeps logs clean)
+    if ($level === 'error') {
+        error_log($line);
+    }
+
+    // If debug mode is on, mirror all levels to a local file
+    if ($this->ooDebug()) {
+        @file_put_contents(self::OO_LOG_PATH, '[' . date('c') . '] ' . $line . "\n", FILE_APPEND);
+    }
+}
+
+    /** Resolve effective docs origin (http/https root of OO Docs server) */
+    private function effectiveDocsOrigin(): string
+    {
+        $cfg = AdminModel::getConfig();
+        $oo  = is_array($cfg['onlyoffice'] ?? null) ? $cfg['onlyoffice'] : [];
+        if (defined('ONLYOFFICE_DOCS_ORIGIN') && ONLYOFFICE_DOCS_ORIGIN !== '') {
+            return (string)ONLYOFFICE_DOCS_ORIGIN;
+        }
+        if (!empty($oo['docsOrigin'])) return (string)$oo['docsOrigin'];
+        $env = getenv('ONLYOFFICE_DOCS_ORIGIN');
+        return $env ? (string)$env : '';
+    }
+
+    /** Resolve effective enabled flag (constants override adminConfig) */
+    private function effectiveEnabled(): bool
+    {
+        $cfg = AdminModel::getConfig();
+        $oo  = is_array($cfg['onlyoffice'] ?? null) ? $cfg['onlyoffice'] : [];
+        if (defined('ONLYOFFICE_ENABLED')) return (bool)ONLYOFFICE_ENABLED;
+        return !empty($oo['enabled']);
+    }
+
+    /** Optional explicit public origin; else infer from BASE_URL / request */
+    private function effectivePublicOrigin(): string
+    {
+        $cfg = AdminModel::getConfig();
+        $oo  = is_array($cfg['onlyoffice'] ?? null) ? $cfg['onlyoffice'] : [];
+
+        if (defined('ONLYOFFICE_PUBLIC_ORIGIN') && ONLYOFFICE_PUBLIC_ORIGIN !== '') {
+            return (string)ONLYOFFICE_PUBLIC_ORIGIN;
+        }
+        if (!empty($oo['publicOrigin'])) return (string)$oo['publicOrigin'];
+
+        // Try BASE_URL if it isn't a placeholder
+        if (defined('BASE_URL') && strpos((string)BASE_URL, 'yourwebsite') === false) {
+            $u = parse_url((string)BASE_URL);
+            if (!empty($u['scheme']) && !empty($u['host'])) {
+                return $u['scheme'].'://'.$u['host'].(isset($u['port'])?':'.$u['port']:'');
+            }
+        }
+        // Fallback to request (proxy aware)
+        $proto = $_SERVER['HTTP_X_FORWARDED_PROTO']
+            ?? ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http');
+        $host  = $_SERVER['HTTP_X_FORWARDED_HOST'] ?? ($_SERVER['HTTP_HOST'] ?? 'localhost');
+        return $proto.'://'.$host;
+    }
+
+    /** base64url encode/decode helpers */
+    private function b64uDec(string $s)
+    {
+        $s = strtr($s, '-_', '+/');
+        $pad = strlen($s) % 4;
+        if ($pad) $s .= str_repeat('=', 4 - $pad);
+        return base64_decode($s, true);
+    }
+    private function b64uEnc(string $s): string
+    {
+        return rtrim(strtr(base64_encode($s), '+/','-_'), '=');
+    }
+
+    /** GET /api/onlyoffice/status.php */
+    public function status(): void
+    {
+        header('Content-Type: application/json; charset=utf-8');
+        header('Cache-Control: no-store');
+
+        $enabled   = $this->effectiveEnabled();
+        $docsOrig  = $this->effectiveDocsOrigin();
+        $secret    = $this->effectiveSecret();
+
+        // 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);
+    }
+
+    /** GET /api/onlyoffice/config.php?folder=...&file=... */
+    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);
+
+        // 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; }
+
+        // Inputs
+        $folder = \ACL::normalizeFolder((string)($_GET['folder'] ?? 'root'));
+        $file   = basename((string)($_GET['file'] ?? ''));
+        if ($file === '') { http_response_code(400); echo '{"error":"Bad request"}'; return; }
+
+        // ACL
+        if (!\ACL::canRead($user, $perms, $folder)) { http_response_code(403); echo '{"error":"Forbidden"}'; return; }
+        $canEdit = \ACL::canEdit($user, $perms, $folder);
+
+        // 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; }
+
+        // Public origin
+        $publicOrigin = $this->effectivePublicOrigin();
+
+        // 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);
+
+        // 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;
+
+        // 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);
+
+        $docsApiJs  = $docsOrigin . '/web-apps/apps/api/documents/api.js';
+
+        $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',
+        ];
+
+        // 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;
+
+        echo json_encode($cfgOut, JSON_UNESCAPED_SLASHES);
+    }
+
+    /** POST /api/onlyoffice/callback.php?folder=...&file=...&exp=...&sig=... */
+    public function callback(): void
+{
+    header('Content-Type: application/json; charset=utf-8');
+
+    if (isset($_GET['ping'])) { echo '{"error":0}'; return; }
+
+    $secret = $this->effectiveSecret();
+    if ($secret === '') { http_response_code(500); $this->ooLog('error', 'missing secret'); echo '{"error":6}'; return; }
+
+    $folderRaw = (string)($_GET['folder'] ?? 'root');
+    $fileRaw   = (string)($_GET['file']   ?? '');
+    $exp       = (int)($_GET['exp']       ?? 0);
+    $sig       = (string)($_GET['sig']    ?? '');
+    $calc      = hash_hmac('sha256', "$folderRaw|$fileRaw|$exp", $secret);
+
+    // Debug-only preflight (no secrets; show short sigs)
+    if ($this->ooDebug()) {
+        $this->ooLog('debug', sprintf(
+            "PRE f='%s' n='%s' exp=%d sig[8]=%s calc[8]=%s",
+            $folderRaw, $fileRaw, $exp, substr($sig, 0, 8), substr($calc, 0, 8)
+        ));
+    }
+
+    $folder = \ACL::normalizeFolder($folderRaw);
+    $file   = basename($fileRaw);
+    if (!$exp || time() > $exp) { $this->ooLog('error', "expired exp for $folder/$file"); echo '{"error":6}'; return; }
+    if (!hash_equals($calc, $sig)) { $this->ooLog('error', "sig mismatch for $folder/$file"); echo '{"error":6}'; return; }
+
+    $raw  = file_get_contents('php://input') ?: '';
+    if ($this->ooDebug()) {
+        $this->ooLog('debug', 'BODY len=' . strlen($raw));
+    }
+
+    $body   = json_decode($raw, true) ?: [];
+    $status = (int)($body['status'] ?? 0);
+    $actor  = (string)($body['actions'][0]['userid'] ?? '');
+
+    $actorIsAdmin = (defined('DEFAULT_ADMIN_USER') && $actor !== '' && strcasecmp($actor, (string)DEFAULT_ADMIN_USER) === 0)
+                 || (strcasecmp($actor, 'admin') === 0);
+    $perms = $actorIsAdmin ? ['admin'=>true] : [];
+
+    $base = rtrim(UPLOAD_DIR, "/\\") . DIRECTORY_SEPARATOR;
+    $rel  = ($folder === 'root') ? '' : ($folder . '/');
+    $dir  = realpath($base . $rel) ?: ($base . $rel);
+    if (strpos($dir, realpath($base)) !== 0) { $this->ooLog('error', 'path escape'); echo '{"error":6}'; return; }
+
+    // Save-on statuses: 2/6/7
+    if (in_array($status, [2,6,7], true)) {
+        if (!$actor || !\ACL::canEdit($actor, $perms, $folder)) {
+            $this->ooLog('error', "ACL deny edit: actor='$actor' folder='$folder'");
+            echo '{"error":6}'; return;
+        }
+        $saveUrl = (string)($body['url'] ?? '');
+        if ($saveUrl === '') { $this->ooLog('error', "no url for status=$status"); echo '{"error":6}'; return; }
+
+        // fetch saved file
+        $data = null; $curlErr=''; $httpCode=0;
+        if (function_exists('curl_init')) {
+            $ch = curl_init($saveUrl);
+            curl_setopt_array($ch, [
+                CURLOPT_RETURNTRANSFER => true,
+                CURLOPT_FOLLOWLOCATION => true,
+                CURLOPT_CONNECTTIMEOUT => 10,
+                CURLOPT_TIMEOUT        => 45,
+                CURLOPT_HTTPHEADER     => ['Accept: */*','User-Agent: FileRise-ONLYOFFICE-Callback'],
+            ]);
+            $data = curl_exec($ch);
+            if ($data === false) $curlErr = curl_error($ch);
+            $httpCode = (int)curl_getinfo($ch, CURLINFO_HTTP_CODE);
+            curl_close($ch);
+            if ($data === false || $httpCode >= 400) {
+                $this->ooLog('error', "curl get failed ($httpCode) url=$saveUrl err=" . ($curlErr ?: 'n/a'));
+                $data = null;
+            }
+        }
+        if ($data === null) {
+            $ctx = stream_context_create(['http'=>['method'=>'GET','timeout'=>45,'header'=>"Accept: */*\r\n"]]);
+            $data = @file_get_contents($saveUrl, false, $ctx);
+            if ($data === false) { $this->ooLog('error', "stream get failed url=$saveUrl"); echo '{"error":6}'; return; }
+        }
+
+        if (!is_dir($dir)) { @mkdir($dir, 0775, true); }
+        $dest = rtrim($dir, "/\\") . DIRECTORY_SEPARATOR . $file;
+        if (@file_put_contents($dest, $data) === false) { $this->ooLog('error', "write failed: $dest"); echo '{"error":6}'; return; }
+
+        @touch($dest);
+
+        // Success: debug only
+        if ($this->ooDebug()) {
+            $this->ooLog('debug', "saved OK by '$actor' → $dest (" . strlen($data) . " bytes, status=$status)");
+        }
+        echo '{"error":0}'; return;
+    }
+
+    // Non-saving statuses: debug only
+    if ($this->ooDebug()) {
+        $this->ooLog('debug', "status=$status ack for $folder/$file by '$actor'");
+    }
+    echo '{"error":0}';
+}
+
+    /** GET /api/onlyoffice/signed-download.php?tok=... */
+    public function signedDownload(): void
+    {
+        header('X-Content-Type-Options: nosniff');
+        header('Cache-Control: no-store');
+
+        $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; }
+
+        $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; }
+
+        $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; }
+
+        $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);
+    }
+}
--- a/src/models/AdminModel.php
+++ b/src/models/AdminModel.php
@@ -62,27 +62,59 @@ class AdminModel
        return (int)$val;
    }

-    public static function buildPublicSubset(array $config): array
+    /** Allow only http(s) URLs; return '' for invalid input. */
+    private static function sanitizeHttpUrl($url): string
    {
-        return [
-            'header_title'        => $config['header_title'] ?? 'FileRise',
-            'loginOptions'        => [
-                'disableFormLogin' => (bool)($config['loginOptions']['disableFormLogin'] ?? false),
-                'disableBasicAuth' => (bool)($config['loginOptions']['disableBasicAuth'] ?? false),
-                'disableOIDCLogin' => (bool)($config['loginOptions']['disableOIDCLogin'] ?? false),
-                // do NOT include authBypass/authHeaderName here — admin-only
-            ],
-            'globalOtpauthUrl'    => $config['globalOtpauthUrl'] ?? '',
-            'enableWebDAV'        => (bool)($config['enableWebDAV'] ?? false),
-            'sharedMaxUploadSize' => (int)($config['sharedMaxUploadSize'] ?? 0),
-            'oidc' => [
-                'providerUrl' => (string)($config['oidc']['providerUrl'] ?? ''),
-                'redirectUri' => (string)($config['oidc']['redirectUri'] ?? ''),
-                // never include clientId / clientSecret
-            ],
-        ];
+        $url = trim((string)$url);
+        if ($url === '') return '';
+        $valid = filter_var($url, FILTER_VALIDATE_URL);
+        if (!$valid) return '';
+        $scheme = strtolower(parse_url($url, PHP_URL_SCHEME) ?: '');
+        return ($scheme === 'http' || $scheme === 'https') ? $url : '';
    }

+    public static function buildPublicSubset(array $config): array
+{
+    $public = [
+        'header_title'        => $config['header_title'] ?? 'FileRise',
+        'loginOptions'        => [
+            'disableFormLogin' => (bool)($config['loginOptions']['disableFormLogin'] ?? false),
+            'disableBasicAuth' => (bool)($config['loginOptions']['disableBasicAuth'] ?? false),
+            'disableOIDCLogin' => (bool)($config['loginOptions']['disableOIDCLogin'] ?? false),
+        ],
+        'globalOtpauthUrl'    => $config['globalOtpauthUrl'] ?? '',
+        'enableWebDAV'        => (bool)($config['enableWebDAV'] ?? false),
+        'sharedMaxUploadSize' => (int)($config['sharedMaxUploadSize'] ?? 0),
+        'oidc' => [
+            'providerUrl' => (string)($config['oidc']['providerUrl'] ?? ''),
+            'redirectUri' => (string)($config['oidc']['redirectUri'] ?? ''),
+        ],
+    ];
+
+    // NEW: include ONLYOFFICE minimal public flag
+    $ooEnabled = null;
+    if (isset($config['onlyoffice']['enabled'])) {
+        $ooEnabled = (bool)$config['onlyoffice']['enabled'];
+    } elseif (defined('ONLYOFFICE_ENABLED')) {
+        $ooEnabled = (bool)ONLYOFFICE_ENABLED;
+    }
+    if ($ooEnabled !== null) {
+        $public['onlyoffice'] = ['enabled' => $ooEnabled];
+    }
+    $locked = defined('ONLYOFFICE_ENABLED') || defined('ONLYOFFICE_JWT_SECRET')
+       || defined('ONLYOFFICE_DOCS_ORIGIN') || defined('ONLYOFFICE_PUBLIC_ORIGIN');
+
+if ($locked) {
+    $ooEnabled = defined('ONLYOFFICE_ENABLED') ? (bool)ONLYOFFICE_ENABLED : false;
+} else {
+    $ooEnabled = isset($config['onlyoffice']['enabled']) ? (bool)$config['onlyoffice']['enabled'] : false;
+}
+
+$public['onlyoffice'] = ['enabled' => $ooEnabled];
+
+    return $public;
+}
+
    /** Write USERS_DIR/siteConfig.json atomically (unencrypted). */
    public static function writeSiteConfig(array $publicSubset): array
    {
@@ -173,6 +205,28 @@ class AdminModel
            $configUpdate['loginOptions']['authHeaderName'] = trim($configUpdate['loginOptions']['authHeaderName']);
        }

+                // ---- ONLYOFFICE (persist, sanitize; keep secret unless explicitly replaced) ----
+                if (isset($configUpdate['onlyoffice']) && is_array($configUpdate['onlyoffice'])) {
+                    $oo = $configUpdate['onlyoffice'];
+        
+                    $norm = [
+                        'enabled'      => (bool)($oo['enabled'] ?? false),
+                        'docsOrigin'   => self::sanitizeHttpUrl($oo['docsOrigin'] ?? ''),
+                        'publicOrigin' => self::sanitizeHttpUrl($oo['publicOrigin'] ?? ''),
+                    ];
+        
+                    // Only accept a new secret if provided (non-empty). We do NOT clear on empty.
+                    if (array_key_exists('jwtSecret', $oo)) {
+                        $js = trim((string)$oo['jwtSecret']);
+                        if ($js !== '') {
+                            if (strlen($js) > 1024) $js = substr($js, 0, 1024);
+                            $norm['jwtSecret'] = $js; // will be encrypted with encryptData()
+                        }
+                    }
+        
+                    $configUpdate['onlyoffice'] = $norm;
+                }
+
        // Convert configuration to JSON.
        $plainTextConfig = json_encode($configUpdate, JSON_PRETTY_PRINT);
        if ($plainTextConfig === false) {
@@ -301,6 +355,19 @@ class AdminModel
                $config['sharedMaxUploadSize'] = (int)min((int)$config['sharedMaxUploadSize'], $maxBytes);
            }

+            // ---- Ensure ONLYOFFICE structure exists, sanitize values ----
+            if (!isset($config['onlyoffice']) || !is_array($config['onlyoffice'])) {
+                $config['onlyoffice'] = [
+                    'enabled'      => false,
+                    'docsOrigin'   => '',
+                    'publicOrigin' => '',
+                ];
+            } else {
+                $config['onlyoffice']['enabled']      = (bool)($config['onlyoffice']['enabled'] ?? false);
+                $config['onlyoffice']['docsOrigin']   = self::sanitizeHttpUrl($config['onlyoffice']['docsOrigin'] ?? '');
+                $config['onlyoffice']['publicOrigin'] = self::sanitizeHttpUrl($config['onlyoffice']['publicOrigin'] ?? '');
+            }
+
            return $config;
        }

@@ -320,7 +387,12 @@ class AdminModel
            ],
            'globalOtpauthUrl'      => "",
            'enableWebDAV'          => false,
-            'sharedMaxUploadSize'   => min(50 * 1024 * 1024, self::parseSize(TOTAL_UPLOAD_SIZE))
+            'sharedMaxUploadSize'   => min(50 * 1024 * 1024, self::parseSize(TOTAL_UPLOAD_SIZE)),
+            'onlyoffice'            => [
+                'enabled'      => false,
+                'docsOrigin'   => '',
+                'publicOrigin' => '',
+            ],
        ];
    }
-}
+}
Author	SHA1	Message	Date
github-actions[bot]	4bb9d81370	chore(release): set APP_VERSION to v1.8.1 [skip ci]	2025-11-03 21:59:58 +00:00
Ryan	29e0497730	release(v1.8.1): fix(security,onlyoffice): sanitize DS origin; safe api.js/iframe probes; better UX placeholder	2025-11-03 16:59:47 -05:00
github-actions[bot]	dd3a7a5145	chore(release): set APP_VERSION to v1.8.0 [skip ci]	2025-11-03 21:40:02 +00:00
Ryan	d00db803c3	release(v1.8.0): feat(onlyoffice): first-class ONLYOFFICE integration (view/edit), admin UI, API, CSP helpers Refs #37 — implements ONLYOFFICE integration suggested in the discussion; video progress saving will be tracked separately.	2025-11-03 16:39:48 -05:00
github-actions[bot]	77a94ecd85	chore(release): set APP_VERSION to v1.7.5 [skip ci]	2025-11-02 04:56:35 +00:00
Ryan	699873848e	release(v1.7.5): retrigger CI bump ensure up to date	2025-11-02 00:56:24 -04:00
Ryan	9cb12c11a6	release(v1.7.5): retrigger CI bump (no code changes)	2025-11-02 00:49:36 -04:00
Ryan	c08876380b	release(v1.7.5): retrigger CI bump; chore(ci): update bump workflow	2025-11-02 00:44:29 -04:00
Ryan	5b824888cb	release(v1.7.5): CSP hardening, API-backed previews, flicker-free theming, cache tuning & deploy script (closes #50 )	2025-11-02 00:32:04 -04:00
Ryan	b7d7f7c3ce	release(v1.7.5): CSP hardening, API-backed previews, flicker-free theming, cache tuning & deploy script (closes #50 )	2025-11-02 00:32:03 -04:00