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

- Lazy folder tree via /api/folder/listChildren.php with cursor pagination
- ACL-safe chevrons using hasSubfolders from server; no file-count leaks
- BFS smart initial folder selection + respect lastOpenedFolder
- Locked nodes are expandable but not selectable
- “Load more” UX (light & dark) for huge directories

Closes #66

.gitattributes

@@ -1,4 +1,40 @@
-public/api.html linguist-documentation
-public/openapi.json linguist-documentation
-resources/ export-ignore
-.github/ export-ignore
+# --- Docs that shouldn't count toward code stats
+public/api.php            linguist-documentation
+public/openapi.json       linguist-documentation
+openapi.json.dist         linguist-documentation
+SECURITY.md               linguist-documentation
+CHANGELOG.md              linguist-documentation
+CONTRIBUTING.md           linguist-documentation
+CODE_OF_CONDUCT.md        linguist-documentation
+LICENSE                   linguist-documentation
+README.md                 linguist-documentation
+
+# --- Vendored/minified stuff: exclude from Linguist
+public/vendor/**          linguist-vendored
+public/css/vendor/**      linguist-vendored
+public/fonts/**           linguist-vendored
+public/js/**/*.min.js     linguist-vendored
+public/**/*.min.css       linguist-vendored
+public/**/*.map           linguist-generated
+
+# --- Treat assets as binary (nicer diffs)
+*.png   -diff
+*.jpg   -diff
+*.jpeg  -diff
+*.gif   -diff
+*.webp  -diff
+*.svg   -diff
+*.ico   -diff
+*.woff  -diff
+*.woff2 -diff
+*.ttf   -diff
+*.otf   -diff
+*.zip   -diff
+
+# --- Keep these out of auto-generated source archives (OK to ignore)
+# Only ignore things you *never* need in release tarballs
+.github/           export-ignore
+resources/         export-ignore
+
+# --- Normalize text files
+* text=auto

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+---
+github: [error311]
+ko_fi: error311

.github/workflows/release-on-version.yml

@@ -0,0 +1,271 @@
+---
+name: Release on version.js update
+
+on:
+  workflow_run:
+    workflows: ["Bump version and sync Changelog to Docker Repo"]
+    types: [completed]
+    branches: [master]
+  workflow_dispatch:
+    inputs:
+      ref:
+        description: "Ref (branch/sha) to build from (default: master)"
+        required: false
+      version:
+        description: "Explicit version tag to release (e.g., v1.8.12). If empty, parse from public/js/version.js."
+        required: false
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    if: |
+      github.event_name == 'push' ||
+      github.event_name == 'workflow_dispatch'
+
+    concurrency:
+      group: release-${{ github.event_name }}-${{ github.run_id }}
+      cancel-in-progress: false
+
+    steps:
+      - name: Resolve source ref
+        id: pickref
+        shell: bash
+        run: |
+          set -euo pipefail
+          if [[ "${{ github.event_name }}" == "workflow_dispatch" ]]; then
+            if [[ -n "${{ github.event.inputs.ref }}" ]]; then
+              REF_IN="${{ github.event.inputs.ref }}"
+            else
+              REF_IN="master"
+            fi
+            if git ls-remote --exit-code --heads https://github.com/${{ github.repository }}.git "$REF_IN" >/dev/null 2>&1; then
+              REF="$REF_IN"
+            else
+              REF="$REF_IN"
+            fi
+          else
+            REF="${{ github.sha }}"
+          fi
+          echo "ref=$REF" >> "$GITHUB_OUTPUT"
+          echo "Using ref=$REF"
+
+      - name: Checkout chosen ref (full history + tags, no persisted token)
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ steps.pickref.outputs.ref }}
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Determine version
+        id: ver
+        shell: bash
+        run: |
+          set -euo pipefail
+          if [[ -n "${{ github.event.inputs.version || '' }}" ]]; then
+            VER="${{ github.event.inputs.version }}"
+          else
+            if [[ ! -f public/js/version.js ]]; then
+              echo "public/js/version.js not found; cannot auto-detect version." >&2
+              exit 1
+            fi
+            VER="$(grep -Eo "APP_VERSION\s*=\s*['\"]v[^'\"]+['\"]" public/js/version.js | sed -E "s/.*['\"](v[^'\"]+)['\"].*/\1/")"
+            if [[ -z "$VER" ]]; then
+              echo "Could not parse APP_VERSION from public/js/version.js" >&2
+              exit 1
+            fi
+          fi
+          echo "version=$VER" >> "$GITHUB_OUTPUT"
+          echo "Detected version: $VER"
+
+      - name: Skip if tag already exists
+        id: tagcheck
+        shell: bash
+        run: |
+          set -euo pipefail
+          if git rev-parse -q --verify "refs/tags/${{ steps.ver.outputs.version }}" >/dev/null; then
+            echo "exists=true" >> "$GITHUB_OUTPUT"
+            echo "Tag ${{ steps.ver.outputs.version }} already exists. Skipping release."
+          else
+            echo "exists=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Prepare stamp script
+        if: steps.tagcheck.outputs.exists == 'false'
+        shell: bash
+        run: |
+          set -euo pipefail
+          sed -i 's/\r$//' scripts/stamp-assets.sh || true
+          chmod +x scripts/stamp-assets.sh
+
+      - name: Build stamped staging tree
+        if: steps.tagcheck.outputs.exists == 'false'
+        shell: bash
+        run: |
+          set -euo pipefail
+          VER="${{ steps.ver.outputs.version }}"
+          rm -rf staging
+          rsync -a \
+            --exclude '.git' --exclude '.github' \
+            --exclude 'resources' \
+            --exclude '.dockerignore' --exclude '.gitattributes' --exclude '.gitignore' \
+            ./ staging/
+          bash ./scripts/stamp-assets.sh "${VER}" "$(pwd)/staging"
+
+      # --- PHP + Composer for vendor/ (production) ---
+      - name: Setup PHP
+        if: steps.tagcheck.outputs.exists == 'false'
+        id: php
+        uses: shivammathur/setup-php@v2
+        with:
+          php-version: '8.3'
+          tools: composer:v2
+          extensions: mbstring, json, curl, dom, fileinfo, openssl, zip
+          coverage: none
+          ini-values: memory_limit=-1
+
+      - name: Cache Composer downloads
+        if: steps.tagcheck.outputs.exists == 'false'
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.composer/cache
+            ~/.cache/composer
+          key: composer-${{ runner.os }}-php-${{ steps.php.outputs.php-version }}-${{ hashFiles('**/composer.lock') }}
+          restore-keys: |
+            composer-${{ runner.os }}-php-${{ steps.php.outputs.php-version }}-
+
+      - name: Install PHP dependencies into staging
+        if: steps.tagcheck.outputs.exists == 'false'
+        env:
+          COMPOSER_MEMORY_LIMIT: -1
+        shell: bash
+        run: |
+          set -euo pipefail
+          pushd staging >/dev/null
+          if [[ -f composer.json ]]; then
+            composer install \
+              --no-dev \
+              --prefer-dist \
+              --no-interaction \
+              --no-progress \
+              --optimize-autoloader \
+              --classmap-authoritative
+            test -f vendor/autoload.php || (echo "Composer install did not produce vendor/autoload.php" >&2; exit 1)
+          else
+            echo "No composer.json in staging; skipping vendor install."
+          fi
+          popd >/dev/null
+      # --- end Composer ---
+
+      - name: Verify placeholders removed (skip vendor/)
+        if: steps.tagcheck.outputs.exists == 'false'
+        shell: bash
+        run: |
+          set -euo pipefail
+          ROOT="$(pwd)/staging"
+          if grep -R -n -E "{{APP_QVER}}|{{APP_VER}}" "$ROOT" \
+              --exclude-dir=vendor --exclude-dir=vendor-bin \
+              --include='*.html' --include='*.php' --include='*.css' --include='*.js' 2>/dev/null; then
+            echo "Unreplaced placeholders found in staging." >&2
+            exit 1
+          fi
+          echo "OK: No unreplaced placeholders."
+
+      - name: Zip artifact (includes vendor/)
+        if: steps.tagcheck.outputs.exists == 'false'
+        shell: bash
+        run: |
+          set -euo pipefail
+          VER="${{ steps.ver.outputs.version }}"
+          (cd staging && zip -r "../FileRise-${VER}.zip" . >/dev/null)
+
+      - name: Compute SHA-256
+        if: steps.tagcheck.outputs.exists == 'false'
+        id: sum
+        shell: bash
+        run: |
+          set -euo pipefail
+          ZIP="FileRise-${{ steps.ver.outputs.version }}.zip"
+          SHA=$(shasum -a 256 "$ZIP" | awk '{print $1}')
+          echo "$SHA  $ZIP" > "${ZIP}.sha256"
+          echo "sha=$SHA" >> "$GITHUB_OUTPUT"
+          echo "Computed SHA-256: $SHA"
+
+      - name: Extract notes from CHANGELOG (optional)
+        if: steps.tagcheck.outputs.exists == 'false'
+        id: notes
+        shell: bash
+        run: |
+          set -euo pipefail
+          NOTES_PATH=""
+          if [[ -f CHANGELOG.md ]]; then
+            awk '
+              BEGIN{found=0}
+              /^## / && !found {found=1}
+              found && /^---$/ {exit}
+              found {print}
+            ' CHANGELOG.md > CHANGELOG_SNIPPET.md || true
+            sed -i -e :a -e '/^\n*$/{$d;N;ba' -e '}' CHANGELOG_SNIPPET.md || true
+            if [[ -s CHANGELOG_SNIPPET.md ]]; then
+              NOTES_PATH="CHANGELOG_SNIPPET.md"
+            fi
+          fi
+          echo "path=$NOTES_PATH" >> "$GITHUB_OUTPUT"
+
+      - name: Compute previous tag (for Full Changelog link)
+        if: steps.tagcheck.outputs.exists == 'false'
+        id: prev
+        shell: bash
+        run: |
+          set -euo pipefail
+          VER="${{ steps.ver.outputs.version }}"
+          PREV=$(git tag --list "v*" --sort=-v:refname | grep -v -F "$VER" | head -n1 || true)
+          if [[ -z "$PREV" ]]; then
+            PREV=$(git rev-list --max-parents=0 HEAD | tail -n1)
+          fi
+          echo "prev=$PREV" >> "$GITHUB_OUTPUT"
+          echo "Previous tag/baseline: $PREV"
+
+      - name: Build release body
+        if: steps.tagcheck.outputs.exists == 'false'
+        shell: bash
+        run: |
+          set -euo pipefail
+          VER="${{ steps.ver.outputs.version }}"
+          PREV="${{ steps.prev.outputs.prev }}"
+          REPO="${GITHUB_REPOSITORY}"
+          COMPARE_URL="https://github.com/${REPO}/compare/${PREV}...${VER}"
+          ZIP="FileRise-${VER}.zip"
+          SHA="${{ steps.sum.outputs.sha }}"
+          {
+            echo
+            if [[ -s CHANGELOG_SNIPPET.md ]]; then
+              cat CHANGELOG_SNIPPET.md
+              echo
+            fi
+            echo "## ${VER}"
+            echo "### Full Changelog"
+            echo "[${PREV} → ${VER}](${COMPARE_URL})"
+            echo
+            echo "### SHA-256 (zip)"
+            echo '```'
+            echo "${SHA}  ${ZIP}"
+            echo '```'
+          } > RELEASE_BODY.md
+          sed -n '1,200p' RELEASE_BODY.md
+
+      - name: Create GitHub Release
+        if: steps.tagcheck.outputs.exists == 'false'
+        uses: softprops/action-gh-release@v2
+        with:
+          tag_name: ${{ steps.ver.outputs.version }}
+          target_commitish: ${{ steps.pickref.outputs.ref }}
+          name: ${{ steps.ver.outputs.version }}
+          body_path: RELEASE_BODY.md
+          generate_release_notes: false
+          files: |
+            FileRise-${{ steps.ver.outputs.version }}.zip
+            FileRise-${{ steps.ver.outputs.version }}.zip.sha256

.github/workflows/sync-changelog.yml

@@ -1,44 +1,115 @@
 ---
-name: Sync Changelog to Docker Repo
+name: Bump version and sync Changelog to Docker Repo
 
 on:
   push:
     paths:
-      - 'CHANGELOG.md'
+      - "CHANGELOG.md"
+  workflow_dispatch: {}
 
 permissions:
   contents: write
 
+concurrency:
+  group: bump-and-sync-${{ github.ref }}
+  cancel-in-progress: false
+
 jobs:
-  sync:
+  bump_and_sync:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout FileRise
         uses: actions/checkout@v4
         with:
-          path: file-rise
+          fetch-depth: 0
+          ref: ${{ github.ref }}
+
+      - name: Extract version from commit message
+        id: ver
+        shell: bash
+        run: |
+          set -euo pipefail
+          MSG="${{ github.event.head_commit.message }}"
+          if [[ "$MSG" =~ release\((v[0-9]+\.[0-9]+\.[0-9]+)\) ]]; then
+            echo "version=${BASH_REMATCH[1]}" >> "$GITHUB_OUTPUT"
+            echo "Found version: ${BASH_REMATCH[1]}"
+          else
+            echo "version=" >> "$GITHUB_OUTPUT"
+            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
+        run: |
+          set -euo pipefail
+          cat > public/js/version.js <<'EOF'
+          // generated by CI
+          window.APP_VERSION = '${{ steps.ver.outputs.version }}';
+          EOF
+
+      - name: Commit version.js only
+        if: steps.ver.outputs.version != ''
+        shell: bash
+        run: |
+          set -euo pipefail
+          git config user.name  "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git add public/js/version.js
+          if git diff --cached --quiet; then
+            echo "No changes to commit"
+          else
+            git commit -m "chore(release): set APP_VERSION to ${{ steps.ver.outputs.version }} [skip ci]"
+            git push origin "${{ github.ref_name }}"
+          fi
 
       - name: Checkout filerise-docker
+        if: steps.ver.outputs.version != ''
         uses: actions/checkout@v4
         with:
           repository: error311/filerise-docker
           token: ${{ secrets.PAT_TOKEN }}
           path: docker-repo
+          fetch-depth: 0
 
-      - name: Copy CHANGELOG.md
+      - name: Copy CHANGELOG.md and write VERSION
+        if: steps.ver.outputs.version != ''
+        shell: bash
         run: |
-          cp file-rise/CHANGELOG.md docker-repo/CHANGELOG.md
+          set -euo pipefail
+          cp CHANGELOG.md docker-repo/CHANGELOG.md
+          echo "${{ steps.ver.outputs.version }}" > docker-repo/VERSION
 
-      - name: Commit & push
+      - name: Commit & push to docker repo
+        if: steps.ver.outputs.version != ''
         working-directory: docker-repo
+        shell: bash
         run: |
+          set -euo pipefail
           git config user.name  "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add CHANGELOG.md
+          git add CHANGELOG.md VERSION
           if git diff --cached --quiet; then
             echo "No changes to commit"
           else
-            git commit -m "chore: sync CHANGELOG.md from FileRise"
+            git commit -m "chore: sync CHANGELOG.md + VERSION (${{ steps.ver.outputs.version }}) from FileRise"
             git push origin main
           fi

README.md

@@ -4,55 +4,88 @@
 [![Docker pulls](https://img.shields.io/docker/pulls/error311/filerise-docker)](https://hub.docker.com/r/error311/filerise-docker)
 [![Docker CI](https://img.shields.io/github/actions/workflow/status/error311/filerise-docker/main.yml?branch=main&label=Docker%20CI)](https://github.com/error311/filerise-docker/actions/workflows/main.yml)
 [![CI](https://img.shields.io/github/actions/workflow/status/error311/FileRise/ci.yml?branch=master&label=CI)](https://github.com/error311/FileRise/actions/workflows/ci.yml)
-[![Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://demo.filerise.net) **demo / demo**
+[![Demo](https://img.shields.io/badge/demo-live-brightgreen)](https://demo.filerise.net)
 [![Release](https://img.shields.io/github/v/release/error311/FileRise?include_prereleases&sort=semver)](https://github.com/error311/FileRise/releases)
 [![License](https://img.shields.io/github/license/error311/FileRise)](LICENSE)
+[![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 web interface. **FileRise** is lightweight yet powerful: think of it as your personal cloud drive that you control. With drag-and-drop uploads, in-browser editing, secure user logins (with SSO and 2FA support), and one-click sharing, **FileRise** makes file management on your server a breeze.
+**Elevate your File Management** – A modern, self-hosted web file manager.  
+Upload, organize, and share files or folders through a sleek, responsive web interface.  
+**FileRise** is lightweight yet powerful — your personal cloud drive that you fully control.  
 
-> ⚠️ **Security fix in v1.5.0** — ACL hardening. If you’re on ≤1.4.x, please upgrade.
+Now featuring **Granular Access Control (ACL)** with per-folder permissions, inheritance, and live admin editing.  
+Grant precise capabilities like *view*, *upload*, *rename*, *delete*, or *manage* on a per-user, per-folder basis — enforced across the UI, API, and WebDAV.  
 
-**4/3/2025 Video demo:**
+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.
 
-<https://github.com/user-attachments/assets/221f6a53-85f5-48d4-9abe-89445e0af90e>
+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. Everything is enforced by the same per-folder ACLs across the UI and WebDAV.
 
-**Dark mode:**
-![Dark Header](https://raw.githubusercontent.com/error311/FileRise/refs/heads/master/resources/dark-header.png)
+**10/25/2025 Video demo:**
+
+<https://github.com/user-attachments/assets/a2240300-6348-4de7-b72f-1b85b7da3a08>
+
+![filerise-v1 9 0](https://github.com/user-attachments/assets/a346dd8a-eef1-4180-8140-4c1c08e6026e)
 
 ---
 
 ## Features at a Glance or [Full Features Wiki](https://github.com/error311/FileRise/wiki/Features)
 
-- 🚀 **Easy File Uploads:** Upload multiple files and folders via drag & drop or file picker. Supports large files with pause/resumable chunked uploads and shows real-time progress for each file. FileRise will pick up where it left off if your connection drops.
+- 🚀 **Easy File Uploads:** Upload multiple files and folders via drag & drop or file picker. Supports large files with resumable chunked uploads, pause/resume, and real-time progress. If your connection drops, FileRise resumes automatically.
 
-- 🗂️ **File Management:** Full set of file/folder operations – move or copy files (via intuitive drag-drop or dialogs), rename items, and delete in batches. You can download selected files as a ZIP archive or extract uploaded ZIP files server-side. Organize content with an interactive folder tree and breadcrumb navigation for quick jumps.
+- 🗂️ **File Management:** Full suite of operations — move/copy (via drag-drop or dialogs), rename, and batch delete. Download selected files as ZIPs or extract uploaded ZIPs server-side. Organize with an interactive folder tree and breadcrumbs for instant navigation.
 
-- 🗃️ **Folder Sharing & File Sharing:** Share entire folders via secure, expiring public links. Folder shares can be password-protected, and shared folders support file uploads from outside users with a separate, secure upload mechanism. Folder listings are paginated (10 items/page); file sizes are displayed in MB. Share individual files with one-time or expiring links (optional password protection).
+- 🗃️ **Folder & File Sharing:** Share folders or individual files with expiring, optionally password-protected links. Shared folders can accept external uploads (if enabled). Listings are paginated (10 items/page) with file sizes shown in MB.
 
-- 🔐 **Fine-grained Access Control (ACL):** Per-folder grants for **owners**, **read** (view all), **read_own** (own-only visibility), **write** (upload/edit), and **share**.  
-  - _Note:_ **write no longer implies read**. Grant **read** if uploaders should see all files; or **read_own** for self-only listings.  
-  - Enforced server-side across UI, API, and WebDAV. Includes an admin UI for bulk editing (atomic updates) and safe defaults.
+- 🔐 **Granular Access Control (ACL):**  
+  Per-folder permissions for **owners**, **view**, **view (own)**, **write**, **manage**, **share**, and extended granular capabilities.  
+  Each grant controls specific actions across the UI, API, and WebDAV:
 
-- 🔌 **WebDAV Support (ACL-aware):** Mount FileRise as a network drive **or use it headless from the CLI**. Standard WebDAV ops (upload / download / delete) work in Cyberduck, WinSCP, GNOME Files, Finder, etc., and you can script with `curl`. Listings require **read**; users with **read_own** only see their own files; writes require **write**.
+  | Permission | Description |
+  |-------------|-------------|
+  | **Manage (Owner)** | Full control of folder and subfolders. Can edit ACLs, rename/delete/create folders, and share items. Implies all other permissions for that folder and below. |
+  | **View (All)** | Allows viewing all files within the folder. Required for folder-level sharing. |
+  | **View (Own)** | Restricts visibility to files uploaded by the user only. Ideal for drop zones or limited-access users. |
+  | **Write** | Grants general write access — enables renaming, editing, moving, copying, deleting, and extracting files. |
+  | **Create** | Allows creating subfolders. Automatically granted to *Manage* users. |
+  | **Upload** | Allows uploading new files without granting full write privileges. |
+  | **Edit / Rename / Copy / Move / Delete / Extract** | Individually toggleable granular file operations. |
+  | **Share File / Share Folder** | Controls sharing capabilities. Folder shares require full View (All). |
 
-- 📚 **API Documentation:** Auto-generated OpenAPI spec (`openapi.json`) and interactive HTML docs (`api.html`) powered by Redoc.
+  - **Automatic Propagation:** Enabling **Manage** on a folder applies to all subfolders; deselecting subfolder permissions overrides inheritance in the UI.
 
-- 📝 **Built-in Editor & Preview:** View images, videos, audio, and PDFs inline with a preview modal. Edit text/code files in your browser with a CodeMirror-based editor with syntax highlighting and line numbers.
+  ACL enforcement is centralized and atomic across:
+  - **Admin Panel:** Interactive ACL editor with batch save and dynamic inheritance visualization.  
+  - **API Endpoints:** All file/folder operations validate server-side.  
+  - **WebDAV:** Uses the same ACL engine — View / Own determine listings, granular permissions control upload/edit/delete/create.
 
-- 🏷️ **Tags & Search:** Categorize your files with color-coded tags and locate them instantly using indexed real-time search. **Advanced Search** adds fuzzy matching across file names, tags, uploader fields, and within text file contents.
+- 🔌 **WebDAV (ACL-Aware):** Mount FileRise as a drive (Cyberduck, WinSCP, Finder, etc.) or access via `curl`.  
+  - Listings require **View** or **View (Own)**.  
+  - Uploads require **Upload**.  
+  - Overwrites require **Edit**.  
+  - Deletes require **Delete**.  
+  - Creating folders requires **Create** or **Manage**.  
+  - All ACLs and ownership rules are enforced exactly as in the web UI.
 
-- 🔒 **Auth & SSO:** Username/password login, optional TOTP 2FA, and OIDC (Google/Authentik/Keycloak). Per-user flags like **readOnly**/**disableUpload** still supported, but folder access is governed by the ACL above.
+- 📚 **API Documentation:** Auto-generated OpenAPI spec (`openapi.json`) with interactive HTML docs (`api.html`) via Redoc.
 
-- 🗑️ **Trash & Recovery:** Deleted items go to Trash first; **admins** can restore or empty. Old trash entries auto-purge (default 3 days).
+- 📝 **Built-in Editor & Preview:** Inline preview for images, video, audio, and PDFs. CodeMirror-based editor for text/code with syntax highlighting and line numbers.
 
-- 🎨 **Responsive UI (Dark/Light Mode):** Mobile-friendly layout with theme toggle. The interface remembers your preferences (layout, items per page, last visited folder, etc.).
+- 🧩 **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.
 
-- 🌐 **Internationalization & Localization:** Switch languages via the UI (English, Spanish, French, German). Contributions welcome.
+- 🏷️ **Tags & Search:** Add color-coded tags and search by name, tag, uploader, or content. Advanced fuzzy search indexes metadata and file contents.
 
-- ⚙️ **Lightweight & Self-Contained:** Runs on PHP **8.3+** with no external database. Single-folder install or Docker image. Low footprint; scales to thousands of files with pagination and sorting.
+- 🔒 **Authentication & SSO:** Username/password, optional TOTP 2FA, and OIDC (Google, Authentik, Keycloak).
+
+- 🗑️ **Trash & Recovery:** Deleted items move to Trash for recovery (default 3-day retention). Admins can restore or purge globally.
+
+- 🎨 **Responsive UI (Dark/Light Mode):** Modern, mobile-friendly design with persistent preferences (theme, layout, last folder, etc.).
+
+- 🌐 **Internationalization:** English, Spanish, French, German & Simplified Chinese available. Community translations welcome.
+
+- ⚙️ **Lightweight & Self-Contained:** Runs on PHP 8.3+, no external DB required. Single-folder or Docker deployment with minimal footprint, optimized for Unraid and self-hosting.
 
 (For full features and changelogs, see the [Wiki](https://github.com/error311/FileRise/wiki), [CHANGELOG](https://github.com/error311/FileRise/blob/master/CHANGELOG.md) or [Releases](https://github.com/error311/FileRise/releases).)
 
@@ -73,6 +106,22 @@ Deploy FileRise using the **Docker image** (quickest) or a **manual install** on
 
 ---
 
+### Environment variables
+
+| Variable | Default | Purpose |
+|---|---|---|
+| `TIMEZONE` | `UTC` | PHP/app timezone. |
+| `DATE_TIME_FORMAT` | `m/d/y  h:iA` | Display format used in UI. |
+| `TOTAL_UPLOAD_SIZE` | `5G` | Max combined upload per request (resumable). |
+| `SECURE` | `false` | Set `true` if served behind HTTPS proxy (affects link generation). |
+| `PERSISTENT_TOKENS_KEY` | *(required)* | Secret for “Remember Me” tokens. Change from the example! |
+| `PUID` / `PGID` | `1000` / `1000` | Map `www-data` to host uid:gid (Unraid: often `99:100`). |
+| `CHOWN_ON_START` | `true` | First run: try to chown mounted dirs to PUID:PGID. |
+| `SCAN_ON_START` | `true` | Reindex files added outside UI at boot. |
+| `SHARE_URL` | *(blank)* | Override base URL for share links; blank = auto-detect. |
+
+---
+
 ### 1) Running with Docker (Recommended)
 
 #### Pull the image
@@ -91,7 +140,7 @@ docker run -d \
   -e DATE_TIME_FORMAT="m/d/y  h:iA" \
   -e TOTAL_UPLOAD_SIZE="5G" \
   -e SECURE="false" \
-  -e PERSISTENT_TOKENS_KEY="please_change_this_@@" \
+  -e PERSISTENT_TOKENS_KEY="default_please_change_this_key" \
   -e PUID="1000" \
   -e PGID="1000" \
   -e CHOWN_ON_START="true" \
@@ -103,6 +152,8 @@ docker run -d \
   error311/filerise-docker:latest
 ```
 
+The app runs as www-data mapped to PUID/PGID. Ensure your mounted uploads/, users/, metadata/ are owned by PUID:PGID (e.g., chown -R 1000:1000 …), or set PUID/PGID to match existing host ownership (e.g., 99:100 on Unraid). On NAS/NFS, apply the ownership change on the host/NAS.
+
 This starts FileRise on port **8080** → visit `http://your-server-ip:8080`.
 
 **Notes**  
@@ -125,10 +176,10 @@ docker exec -it filerise id www-data
 Save as `docker-compose.yml`, then `docker-compose up -d`:
 
 ```yaml
-version: "3"
 services:
   filerise:
     image: error311/filerise-docker:latest
+    container_name: filerise
     ports:
       - "8080:80"
     environment:
@@ -136,7 +187,7 @@ services:
       DATE_TIME_FORMAT: "m/d/y  h:iA"
       TOTAL_UPLOAD_SIZE: "10G"
       SECURE: "false"
-      PERSISTENT_TOKENS_KEY: "please_change_this_@@"
+      PERSISTENT_TOKENS_KEY: "default_please_change_this_key"
       # Ownership & indexing
       PUID: "1000"              # Unraid users often use 99
       PGID: "1000"              # Unraid users often use 100
@@ -148,11 +199,14 @@ services:
       - ./uploads:/var/www/uploads
       - ./users:/var/www/users
       - ./metadata:/var/www/metadata
+    restart: unless-stopped
 ```
 
 Access at `http://localhost:8080` (or your server’s IP).  
 The example sets a custom `PERSISTENT_TOKENS_KEY`—change it to a strong random string.
 
+- “`CHOWN_ON_START=true` attempts to align ownership **inside the container**; if the host/NAS disallows changes, set the correct UID/GID on the host.”
+
 **First-time Setup**  
 On first launch, if no users exist, you’ll be prompted to create an **Admin account**. Then use **User Management** to add more users.
 
@@ -217,6 +271,13 @@ Browse to your FileRise URL; you’ll be prompted to create the Admin user on fi
 
 ---
 
+### 3) Admins
+
+> **Admins in ACL UI**
+> Admin accounts appear in the Folder Access and User Permissions modals as **read-only** with full access implied. This is by design—admins always have full control and are excluded from save payloads.
+
+---
+
 ## Unraid
 
 - Install from **Community Apps** → search **FileRise**.  
@@ -226,6 +287,16 @@ Browse to your FileRise URL; you’ll be prompted to create the Admin user on fi
 
 ---
 
+## Upgrade
+
+```bash
+docker pull error311/filerise-docker:latest
+docker stop filerise && docker rm filerise
+# re-run with the same -v and -e flags you used originally
+```
+
+---
+
 ## Quick-start: Mount via WebDAV
 
 Once FileRise is running, enable WebDAV in the admin panel.
@@ -253,27 +324,53 @@ https://your-host/webdav.php/
 - Check **Connect using different credentials**, then enter your FileRise username/password.
 - Click **Finish**.
 
-> **Important:**  
-> Windows requires HTTPS (SSL) for WebDAV connections by default.  
-> If your server uses plain HTTP, you must adjust a registry setting:
->
-> 1. Open **Registry Editor** (`regedit.exe`).
-> 2. Navigate to:
->
->    ```text
->    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\WebClient\Parameters
->    ```
->
-> 3. Find or create a `DWORD` value named **BasicAuthLevel**.
-> 4. Set its value to `2`.
-> 5. Restart the **WebClient** service or reboot.
-
 📖 See the full [WebDAV Usage Wiki](https://github.com/error311/FileRise/wiki/WebDAV) for SSL setup, HTTP workaround, and troubleshooting.
 
 ---
 
+## 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'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' 'sha256-ajmGY+5VJOY6+8JHgzCqsqI8w9dCQfAmqIkFesOKItM=' https://your-onlyoffice-server.example.com https://your-onlyoffice-server.example.com/web-apps/apps/api/documents/api.js; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' https://your-onlyoffice-server.example.com; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'; frame-src 'self' https://your-onlyoffice-server.example.com"
+   ```
+
+   **Nginx**
+
+   ```nginx
+   add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self' 'sha256-ajmGY+5VJOY6+8JHgzCqsqI8w9dCQfAmqIkFesOKItM=' https://your-onlyoffice-server.example.com https://your-onlyoffice-server.example.com/web-apps/apps/api/documents/api.js; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self'; connect-src 'self' https://your-onlyoffice-server.example.com; media-src 'self' blob:; worker-src 'self' blob:; form-action 'self'; frame-src 'self' https://your-onlyoffice-server.example.com" 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.
@@ -290,6 +387,8 @@ For more Q&A or to ask for help, open a Discussion or Issue.
 
 ## Security posture
 
+> ⚠️ **Security fix in v1.5.0** — ACL hardening. If you’re on ≤1.4.x, please upgrade.
+
 We practice responsible disclosure. All known security issues are fixed in **v1.5.0** (ACL hardening).
 Advisories: [GHSA-6p87-q9rh-95wh](https://github.com/error311/FileRise/security/advisories/GHSA-6p87-q9rh-95wh) (≤ 1.3.15), [GHSA-jm96-2w52-5qjj](https://github.com/error311/FileRise/security/advisories/GHSA-jm96-2w52-5qjj) (v1.4.0). Fixed in **v1.5.0**. Thanks to [@kiwi865](https://github.com/kiwi865) for reporting.
 If you’re running ≤1.4.x, please upgrade.
@@ -306,6 +405,17 @@ If you like FileRise, a ⭐ star on GitHub is much appreciated!
 
 ---
 
+## 💖 Sponsor FileRise
+
+If FileRise saves you time (or sparks joy 😄), please consider supporting ongoing development:
+
+- ❤️ [**GitHub Sponsors:**](https://github.com/sponsors/error311) recurring or one-time - helps fund new features and docs.
+- ☕ [**Ko-fi:**](https://ko-fi.com/error311) buy me a coffee.
+
+Every bit helps me keep FileRise fast, polished, and well-maintained. Thank you!
+
+---
+
 ## Community and Support
 
 - **Reddit:** [r/selfhosted: FileRise Discussion](https://www.reddit.com/r/selfhosted/comments/1kfxo9y/filerise_v131_major_updates_sneak_peek_at_whats/) – (Announcement and user feedback thread).
@@ -318,6 +428,13 @@ If you like FileRise, a ⭐ star on GitHub is much appreciated!
 
 ## Dependencies
 
+### ONLYOFFICE integration
+
+- **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)  
+- **Trademarks:** ONLYOFFICE is a trademark of Ascensio System SIA. FileRise is not affiliated with or endorsed by ONLYOFFICE.
+
 ### PHP Libraries
 
 - **[jumbojett/openid-connect-php](https://github.com/jumbojett/OpenID-Connect-PHP)** (v^1.0.0)
@@ -339,10 +456,14 @@ If you like FileRise, a ⭐ star on GitHub is much appreciated!
 
 ## Acknowledgments
 
-- Based on [uploader](https://github.com/sensboston/uploader) by @sensboston.
+- [uploader](https://github.com/sensboston/uploader) by @sensboston.
 
 ---
 
-## License
+## License & Credits
 
 MIT License – see [LICENSE](LICENSE).
+This project bundles third-party assets such as Bootstrap, CodeMirror, DOMPurify, Fuse.js, Resumable.js, and Google Fonts (Roboto, Material Icons).
+All third-party code and fonts remain under their original open-source licenses (MIT or Apache 2.0).
+
+See THIRD_PARTY.md and the /licenses directory for full license texts and attributions.

THIRD_PARTY.md

@@ -0,0 +1,47 @@
+# Third-Party Notices
+
+FileRise bundles the following third‑party assets. Each item lists the project, version, typical on-disk location in this repo, and its license.
+
+If you believe any attribution is missing or incorrect, please open an issue.
+
+---
+
+## Fonts
+
+- **Roboto (wght 400/500)** — Google Fonts  
+  **License:** Apache License 2.0  
+  **Files:** `public/css/vendor/roboto.css`, `public/fonts/roboto/*.woff2`
+
+- **Material Icons (ligature font)** — Google Fonts  
+  **License:** Apache License 2.0  
+  **Files:** `public/css/vendor/material-icons.css`, `public/fonts/material-icons/*.woff2`
+
+> Google fonts/icons © Google. Licensed under Apache 2.0. See `licenses/apache-2.0.txt`.
+
+---
+
+## CSS / JS Libraries (vendored)
+
+- **Bootstrap 4.5.2** — MIT License  
+  **Files:** `public/vendor/bootstrap/4.5.2/bootstrap.min.css`
+
+- **CodeMirror 5.65.5** — MIT License  
+  **Files:** `public/vendor/codemirror/5.65.5/*`
+
+- **DOMPurify 2.4.0** — Apache License 2.0  
+  **Files:** `public/vendor/dompurify/2.4.0/purify.min.js`
+
+- **Fuse.js 6.6.2** — Apache License 2.0  
+  **Files:** `public/vendor/fuse/6.6.2/fuse.min.js`
+
+- **Resumable.js 1.1.0** — MIT License  
+  **Files:** `public/vendor/resumable/1.1.0/resumable.min.js`
+
+- **ReDoc (redoc.standalone.js)** — MIT License  
+  **Files:** `public/vendor/redoc/redoc.standalone.js`  
+  **Notes:** Self-hosted to comply with `script-src 'self'` CSP.
+
+> MIT-licensed code: see `licenses/mit.txt`.  
+> Apache-2.0–licensed code: see `licenses/apache-2.0.txt`.
+
+---

codeql-config.yml

@@ -0,0 +1,12 @@
+---
+name: FileRise CodeQL config
+paths:
+  - public/js
+  - api
+paths-ignore:
+  - public/vendor/**
+  - public/css/vendor/**
+  - public/fonts/**
+  - public/**/*.min.js
+  - public/**/*.min.css
+  - public/**/*.map

config/config.php

@@ -1,22 +1,6 @@
 <?php
 // config.php
 
-// Prevent caching
-header("Cache-Control: no-cache, must-revalidate");
-header("Pragma: no-cache");
-header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
-header("Expires: 0");
-
-// Security headers
-header('X-Content-Type-Options: nosniff');
-header("X-Frame-Options: SAMEORIGIN");
-header("Referrer-Policy: no-referrer-when-downgrade");
-header("Permissions-Policy: geolocation=(), microphone=(), camera=()");
-header("X-XSS-Protection: 1; mode=block");
-if (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') {
-    header("Strict-Transport-Security: max-age=31536000; includeSubDomains; preload");
-}
-
 // Define constants
 define('PROJECT_ROOT', dirname(__DIR__));
 define('UPLOAD_DIR',    '/var/www/uploads/');
@@ -40,6 +24,18 @@ if (!defined('DEFAULT_CAN_SHARE'))        define('DEFAULT_CAN_SHARE', true);
 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);
+*/
+
+if (!defined('OIDC_TOKEN_ENDPOINT_AUTH_METHOD')) {
+    define('OIDC_TOKEN_ENDPOINT_AUTH_METHOD', 'client_secret_basic'); // default
+}
 
 // Encryption helpers
 function encryptData($data, $encryptionKey)

licenses/NOTICE_GOOGLE_FONTS.txt

@@ -0,0 +1,5 @@
+Google Fonts & Icons NOTICE
+
+This product bundles font files from Google Fonts (Roboto, Material Icons, and/or Material Symbols).
+Copyright 2012–present Google Inc. All Rights Reserved.
+Licensed under the Apache License, Version 2.0 (see ../apache-2.0.txt).

licenses/apache-2.0.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

licenses/mit.txt

@@ -0,0 +1,19 @@
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

public/.htaccess

@@ -1,75 +1,128 @@
-# -----------------------------
-# 1) Prevent directory listings
-# -----------------------------
-Options -Indexes
-
-# -----------------------------
-# Default index files
-# -----------------------------
+# --------------------------------
+# FileRise portable .htaccess
+# --------------------------------
+Options -Indexes -Multiviews
 DirectoryIndex index.html
 
-# -----------------------------
-# Deny access to hidden files
-# -----------------------------
-<FilesMatch "^\.">
-  Require all denied
-</FilesMatch>
+# Allow PATH_INFO for routes like /webdav.php/foo/bar
+AcceptPathInfo On
 
-# -----------------------------
-# Enforce HTTPS (optional)
-# -----------------------------
+# ---------------- Security: dotfiles ----------------
+<IfModule mod_authz_core.c>
+  # Block direct access to dotfiles like .env, .gitignore, etc.
+  <FilesMatch "^\..*">
+    Require all denied
+  </FilesMatch>
+</IfModule>
+
+# ---------------- Rewrites ----------------
+<IfModule mod_rewrite.c>
 RewriteEngine On
-#RewriteCond %{HTTPS} off
+
+# 0) Let ACME http-01 pass BEFORE any other rule (needed for auto-renew)
+RewriteCond %{REQUEST_URI} ^/.well-known/acme-challenge/
+RewriteRule - - [L]
+
+# 1) Block hidden files/dirs anywhere EXCEPT .well-known (path-aware)
+#    Prevents requests like /.env, /.git/config, /.ssh/id_rsa, etc.
+RewriteRule "(^|/)\.(?!well-known/)" - [F]
+
+# 2) Deny direct access to PHP except the API endpoints and WebDAV front controller
+#    - allow /api/*.php (API endpoints)
+#    - allow /api.php     (ReDoc/spec page)
+#    - allow /webdav.php  (SabreDAV front)
+RewriteCond %{REQUEST_URI} !^/api/ [NC]
+RewriteCond %{REQUEST_URI} !^/api\.php$ [NC]
+RewriteCond %{REQUEST_URI} !^/webdav\.php$ [NC]
+RewriteRule \.php$ - [F,L]
+
+# 3) Never redirect local/dev hosts
+RewriteCond %{HTTP_HOST} ^(localhost|127\.0\.0\.1|fr\.local|192\.168\.[0-9]+\.[0-9]+)$ [NC]
+RewriteRule ^ - [L]
+
+# 4) 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]
 
-<IfModule mod_headers.c>
-    # Allow requests from a specific origin
-    #Header set Access-Control-Allow-Origin "https://demo.filerise.net"
-    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
-    Header set Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With, X-CSRF-Token"
-    Header set Access-Control-Allow-Credentials "true"
+# 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]
+
+# 5) Mark versioned assets (?v=...) with env flag for caching rules below
+RewriteCond %{QUERY_STRING} (^|&)v= [NC]
+RewriteRule ^ - [E=IS_VER:1]
 </IfModule>
 
+# ---------------- MIME types ----------------
+<IfModule mod_mime.c>
+  AddType font/woff2 .woff2
+  AddType font/woff  .woff
+  AddType image/svg+xml .svg
+  AddType application/javascript .mjs
+</IfModule>
+
+# ---------------- Security headers ----------------
 <IfModule mod_headers.c>
-  # Prevent clickjacking
   Header always set X-Frame-Options "SAMEORIGIN"
-  # Block XSS
   Header always set X-XSS-Protection "1; mode=block"
-  # No MIME sniffing
   Header always set X-Content-Type-Options "nosniff"
+  Header always set Referrer-Policy "strict-origin-when-cross-origin"
+  Header always set Permissions-Policy "geolocation=(), microphone=(), camera=()"
+  Header always set X-Download-Options "noopen"
+  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 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 ----------------
 <IfModule mod_headers.c>
-  # HTML: always revalidate
-  <FilesMatch "\.(html|htm)$">
+  # 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: 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>
-  # JS/CSS: short‑term cache, revalidate regularly
-  <FilesMatch "\.(js|css)$">
-    Header set Cache-Control "public, max-age=3600, must-revalidate"
+
+  # JS/CSS: long cache if ?v= present, else 1h
+  <FilesMatch "\.(?:m?js|css)$">
+    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>
+
+  # 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=31536000, immutable" env=IS_VER
+    Header set Cache-Control "public, max-age=604800" env=!IS_VER
   </FilesMatch>
 </IfModule>
 
-# -----------------------------
-# Additional Security Headers
-# -----------------------------
-<IfModule mod_headers.c>
-    # Enforce HTTPS for a year with subdomains and preload option.
-    Header always set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
-    # Set a Referrer Policy.
-    Header always set Referrer-Policy "strict-origin-when-cross-origin"
-    # Permissions Policy: disable features you don't need.
-    Header always set Permissions-Policy "geolocation=(), microphone=(), camera=()"
-    # IE-specific header to prevent downloads from opening in IE.
-    Header always set X-Download-Options "noopen"
-    # Expect-CT header for Certificate Transparency (optional).
-    Header always set Expect-CT "max-age=86400, enforce"
+# ---------------- Compression ----------------
+<IfModule mod_brotli.c>
+  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 method
-# -----------------------------
+# ---------------- Disable TRACE ----------------
+<IfModule mod_rewrite.c>
 RewriteCond %{REQUEST_METHOD} ^TRACE
-RewriteRule .* - [F]
+RewriteRule .* - [F]
+</IfModule>

public/api.php

@@ -19,13 +19,11 @@ if (isset($_GET['spec'])) {
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <title>FileRise API Docs</title>
-  <script defer src="https://cdn.redoc.ly/redoc/latest/bundles/redoc.standalone.js"
-          integrity="sha384-70P5pmIdaQdVbxvjhrcTDv1uKcKqalZ3OHi7S2J+uzDl0PW8dO6L+pHOpm9EEjGJ"
-          crossorigin="anonymous"></script>
-  <script defer src="/js/redoc-init.js"></script>
+  <script defer src="/vendor/redoc/redoc.standalone.js?v={{APP_QVER}}"></script>
+  <script defer src="/js/redoc-init.js?v={{APP_QVER}}"></script>
 </head>
 <body>
-  <redoc spec-url="api.php?spec=1"></redoc>
+  <redoc spec-url="/api.php?spec=1"></redoc>
   <div id="redoc-container"></div>
 </body>
 </html>

public/api/admin/acl/getGrants.php

@@ -1,28 +1,5 @@
 <?php
 // public/api/admin/acl/getGrants.php
-
-/**
- * @OA\Get(
- *   path="/api/admin/acl/getGrants.php",
- *   summary="Get ACL grants for a user",
- *   tags={"Admin","ACL"},
- *   security={{"cookieAuth":{}}},
- *   @OA\Parameter(name="user", in="query", required=true, @OA\Schema(type="string")),
- *   @OA\Response(
- *     response=200,
- *     description="Map of folder → grant flags",
- *     @OA\JsonContent(
- *       type="object",
- *       required={"grants"},
- *       @OA\Property(property="grants", ref="#/components/schemas/GrantsMap")
- *     )
- *   ),
- *   @OA\Response(response=400, description="Invalid user"),
- *   @OA\Response(response=401, description="Unauthorized")
- * )
- */
-
-
 declare(strict_types=1);
 
 require_once __DIR__ . '/../../../../config/config.php';
@@ -32,7 +9,6 @@ require_once PROJECT_ROOT . '/src/models/FolderModel.php';
 if (session_status() !== PHP_SESSION_ACTIVE) session_start();
 header('Content-Type: application/json');
 
-// Admin only
 if (empty($_SESSION['authenticated']) || empty($_SESSION['isAdmin'])) {
   http_response_code(401); echo json_encode(['error'=>'Unauthorized']); exit;
 }
@@ -55,7 +31,7 @@ try {
 } catch (Throwable $e) { /* ignore */ }
 
 if (empty($folders)) {
-  $aclPath = META_DIR . 'folder_acl.json';
+  $aclPath = rtrim(META_DIR, "/\\") . DIRECTORY_SEPARATOR . 'folder_acl.json';
   if (is_file($aclPath)) {
     $data = json_decode((string)@file_get_contents($aclPath), true);
     if (is_array($data['folders'] ?? null)) {
@@ -74,29 +50,36 @@ $has = function(array $arr, string $u): bool {
 
 $out = [];
 foreach ($folderList as $f) {
-  $rec = ACL::explicit($f); // owners, read, write, share, read_own
+  $rec = ACL::explicitAll($f); // legacy + granular
 
-  $isOwner   = $has($rec['owners'],   $user);
-  $canUpload = $isOwner || $has($rec['write'], $user);
-
-  // IMPORTANT: full view only if owner or explicit read
+  $isOwner    = $has($rec['owners'], $user);
   $canViewAll = $isOwner || $has($rec['read'], $user);
-
-  // own-only view reflects explicit read_own (we keep it separate even if they have full view)
   $canViewOwn = $has($rec['read_own'], $user);
+  $canShare   = $isOwner || $has($rec['share'], $user);
+  $canUpload  = $isOwner || $has($rec['write'], $user) || $has($rec['upload'], $user);
 
-  // Share only if owner or explicit share
-  $canShare = $isOwner || $has($rec['share'], $user);
-
-  if ($canViewAll || $canViewOwn || $canUpload || $isOwner || $canShare) {
+  if ($canViewAll || $canViewOwn || $canUpload || $canShare || $isOwner
+      || $has($rec['create'],$user) || $has($rec['edit'],$user) || $has($rec['rename'],$user)
+      || $has($rec['copy'],$user) || $has($rec['move'],$user) || $has($rec['delete'],$user)
+      || $has($rec['extract'],$user) || $has($rec['share_file'],$user) || $has($rec['share_folder'],$user)) {
     $out[$f] = [
-      'view'    => $canViewAll,
-      'viewOwn' => $canViewOwn,
-      'upload'  => $canUpload,
-      'manage'  => $isOwner,
-      'share'   => $canShare,
+      'view'        => $canViewAll,
+      'viewOwn'     => $canViewOwn,
+      'write'       => $has($rec['write'], $user) || $isOwner,
+      'manage'      => $isOwner,
+      'share'       => $canShare, // legacy
+      'create'      => $isOwner || $has($rec['create'], $user),
+      'upload'      => $isOwner || $has($rec['upload'], $user) || $has($rec['write'],$user),
+      'edit'        => $isOwner || $has($rec['edit'], $user)   || $has($rec['write'],$user),
+      'rename'      => $isOwner || $has($rec['rename'], $user) || $has($rec['write'],$user),
+      'copy'        => $isOwner || $has($rec['copy'], $user)   || $has($rec['write'],$user),
+      'move'        => $isOwner || $has($rec['move'], $user)   || $has($rec['write'],$user),
+      'delete'      => $isOwner || $has($rec['delete'], $user) || $has($rec['write'],$user),
+      'extract'     => $isOwner || $has($rec['extract'], $user)|| $has($rec['write'],$user),
+      'shareFile'   => $isOwner || $has($rec['share_file'], $user) || $has($rec['share'],$user),
+      'shareFolder' => $isOwner || $has($rec['share_folder'], $user) || $has($rec['share'],$user),
     ];
   }
 }
 
-echo json_encode(['grants' => $out], JSON_UNESCAPED_SLASHES);
+echo json_encode(['grants' => $out], JSON_UNESCAPED_SLASHES);

public/api/admin/acl/saveGrants.php

@@ -1,27 +1,5 @@
 <?php
 // public/api/admin/acl/saveGrants.php
-
-/**
- * @OA\Post(
- *   path="/api/admin/acl/saveGrants.php",
- *   summary="Save ACL grants (single-user or batch)",
- *   tags={"Admin","ACL"},
- *   security={{"cookieAuth":{}}},
- *   @OA\RequestBody(
- *     required=true,
- *     description="Either {user,grants} or {changes:[{user,grants}]}",
- *     @OA\JsonContent(oneOf={
- *       @OA\Schema(ref="#/components/schemas/SaveGrantsSingle"),
- *       @OA\Schema(ref="#/components/schemas/SaveGrantsBatch")
- *     })
- *   ),
- *   @OA\Response(response=200, description="Saved"),
- *   @OA\Response(response=400, description="Invalid payload"),
- *   @OA\Response(response=401, description="Unauthorized"),
- *   @OA\Response(response=403, description="Invalid CSRF")
- * )
- */
-
 declare(strict_types=1);
 
 require_once __DIR__ . '/../../../../config/config.php';
@@ -47,22 +25,38 @@ if (empty($_SESSION['csrf_token']) || $csrf !== $_SESSION['csrf_token']) {
 }
 
 // ---- Helpers ---------------------------------------------------------------
-/**
- * Sanitize a grants map to allowed flags only:
- * view | viewOwn | upload | manage | share
- */
+function normalize_caps(array $row): array {
+  // booleanize known keys
+  $bool = function($v){ return !empty($v) && $v !== 'false' && $v !== 0; };
+  $k = [
+    'view','viewOwn','upload','manage','share',
+    'create','edit','rename','copy','move','delete','extract',
+    'shareFile','shareFolder','write'
+  ];
+  $out = [];
+  foreach ($k as $kk) $out[$kk] = $bool($row[$kk] ?? false);
+
+  // BUSINESS RULES:
+  // A) Share Folder REQUIRES View (all). If shareFolder is true but view is false, force view=true.
+  if ($out['shareFolder'] && !$out['view']) {
+    $out['view'] = true;
+  }
+
+  // B) Share File requires at least View (own). If neither view nor viewOwn set, set viewOwn=true.
+  if ($out['shareFile'] && !$out['view'] && !$out['viewOwn']) {
+    $out['viewOwn'] = true;
+  }
+
+  // C) "write" does NOT imply view. It also does not imply granular here; ACL expands legacy write if present.
+  return $out;
+}
+
 function sanitize_grants_map(array $grants): array {
-  $allowed = ['view','viewOwn','upload','manage','share'];
   $out = [];
   foreach ($grants as $folder => $caps) {
     if (!is_string($folder)) $folder = (string)$folder;
     if (!is_array($caps))    $caps   = [];
-    $row = [];
-    foreach ($allowed as $k) {
-      $row[$k] = !empty($caps[$k]);
-    }
-    // include folder even if all false (signals "remove all for this user on this folder")
-    $out[$folder] = $row;
+    $out[$folder] = normalize_caps($caps);
   }
   return $out;
 }
@@ -124,4 +118,4 @@ if (isset($in['changes']) && is_array($in['changes'])) {
 
 // ---- Fallback --------------------------------------------------------------
 http_response_code(400);
-echo json_encode(['error' => 'Invalid payload: expected {user,grants} or {changes:[{user,grants}]}']);
+echo json_encode(['error' => 'Invalid payload: expected {user,grants} or {changes:[{user,grants}]}']);

public/api/file/downloadZipFile.php

@@ -0,0 +1,24 @@
+<?php
+// public/api/file/downloadZipFile.php
+
+/**
+ * @OA\Get(
+ *   path="/api/file/downloadZipFile.php",
+ *   summary="Download a finished ZIP by token",
+ *   description="Streams the zip once; token is one-shot.",
+ *   operationId="downloadZipFile",
+ *   tags={"Files"},
+ *   security={{"cookieAuth": {}}},
+ *   @OA\Parameter(name="k", in="query", required=true, @OA\Schema(type="string"), description="Job token"),
+ *   @OA\Parameter(name="name", in="query", required=false, @OA\Schema(type="string"), description="Suggested filename"),
+ *   @OA\Response(response=200, description="ZIP stream"),
+ *   @OA\Response(response=401, description="Unauthorized"),
+ *   @OA\Response(response=404, description="Not found")
+ * )
+ */
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/FileController.php';
+
+$controller = new FileController();
+$controller->downloadZipFile();

public/api/file/zipStatus.php

@@ -0,0 +1,23 @@
+<?php
+// public/api/file/zipStatus.php
+
+/**
+ * @OA\Get(
+ *   path="/api/file/zipStatus.php",
+ *   summary="Check status of a background ZIP build",
+ *   description="Returns status for the authenticated user's token.",
+ *   operationId="zipStatus",
+ *   tags={"Files"},
+ *   security={{"cookieAuth": {}}},
+ *   @OA\Parameter(name="k", in="query", required=true, @OA\Schema(type="string"), description="Job token"),
+ *   @OA\Response(response=200, description="Status payload"),
+ *   @OA\Response(response=401, description="Unauthorized"),
+ *   @OA\Response(response=404, description="Not found")
+ * )
+ */
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/FileController.php';
+
+$controller = new FileController();
+$controller->zipStatus();

public/api/folder/capabilities.php

@@ -1,172 +1,18 @@
 <?php
-// public/api/folder/capabilities.php
-
-/**
- * @OA\Get(
- *   path="/api/folder/capabilities.php",
- *   summary="Get effective capabilities for the current user in a folder",
- *   description="Computes the caller's capabilities for a given folder by combining account flags (readOnly/disableUpload), ACL grants (read/write/share), and the user-folder-only scope. Returns booleans indicating what the user can do.",
- *   operationId="getFolderCapabilities",
- *   tags={"Folders"},
- *   security={{"cookieAuth": {}}},
- *
- *   @OA\Parameter(
- *     name="folder",
- *     in="query",
- *     required=false,
- *     description="Target folder path. Defaults to 'root'. Supports nested paths like 'team/reports'.",
- *     @OA\Schema(type="string"),
- *     example="projects/acme"
- *   ),
- *
- *   @OA\Response(
- *     response=200,
- *     description="Capabilities computed successfully.",
- *     @OA\JsonContent(
- *       type="object",
- *       required={"user","folder","isAdmin","flags","canView","canUpload","canCreate","canRename","canDelete","canMoveIn","canShare"},
- *       @OA\Property(property="user", type="string", example="alice"),
- *       @OA\Property(property="folder", type="string", example="projects/acme"),
- *       @OA\Property(property="isAdmin", type="boolean", example=false),
- *       @OA\Property(
- *         property="flags",
- *         type="object",
- *         required={"folderOnly","readOnly","disableUpload"},
- *         @OA\Property(property="folderOnly", type="boolean", example=false),
- *         @OA\Property(property="readOnly", type="boolean", example=false),
- *         @OA\Property(property="disableUpload", type="boolean", example=false)
- *       ),
- *       @OA\Property(property="owner", type="string", nullable=true, example="alice"),
- *       @OA\Property(property="canView",   type="boolean", example=true,  description="User can view items in this folder."),
- *       @OA\Property(property="canUpload", type="boolean", example=true,  description="User can upload/edit/rename/move/delete items (i.e., WRITE)."),
- *       @OA\Property(property="canCreate", type="boolean", example=true,  description="User can create subfolders here."),
- *       @OA\Property(property="canRename", type="boolean", example=true,  description="User can rename items here."),
- *       @OA\Property(property="canDelete", type="boolean", example=true,  description="User can delete items here."),
- *       @OA\Property(property="canMoveIn", type="boolean", example=true,  description="User can move items into this folder."),
- *       @OA\Property(property="canShare",  type="boolean", example=false, description="User can create share links for this folder.")
- *     )
- *   ),
- *   @OA\Response(response=400, description="Invalid folder name."),
- *   @OA\Response(response=401, ref="#/components/responses/Unauthorized")
- * )
- */
-
-
-if (session_status() !== PHP_SESSION_ACTIVE) session_start();
+declare(strict_types=1);
+header('Content-Type: application/json; charset=utf-8');
+header('Cache-Control: no-store');
 
 require_once __DIR__ . '/../../../config/config.php';
-require_once PROJECT_ROOT . '/src/lib/ACL.php';
-require_once PROJECT_ROOT . '/src/models/UserModel.php';
-require_once PROJECT_ROOT . '/src/models/FolderModel.php';
+require_once PROJECT_ROOT . '/src/controllers/FolderController.php';
 
-header('Content-Type: application/json');
+if (session_status() !== PHP_SESSION_ACTIVE) session_start();
+$username = (string)($_SESSION['username'] ?? '');
+if ($username === '') { http_response_code(401); echo json_encode(['error'=>'Unauthorized']); exit; }
+@session_write_close();
 
-// --- auth ---
-$username = $_SESSION['username'] ?? '';
-if ($username === '') {
-  http_response_code(401);
-  echo json_encode(['error' => 'Unauthorized']);
-  exit;
-}
+$folder = isset($_GET['folder']) ? (string)$_GET['folder'] : 'root';
+$folder = str_replace('\\', '/', trim($folder));
+$folder = ($folder === '' || strcasecmp($folder, 'root') === 0) ? 'root' : trim($folder, '/');
 
-// --- helpers ---
-function loadPermsFor(string $u): array {
-  try {
-    if (function_exists('loadUserPermissions')) {
-      $p = loadUserPermissions($u);
-      return is_array($p) ? $p : [];
-    }
-    if (class_exists('userModel') && method_exists('userModel', 'getUserPermissions')) {
-      $all = userModel::getUserPermissions();
-      if (is_array($all)) {
-        if (isset($all[$u])) return (array)$all[$u];
-        $lk = strtolower($u);
-        if (isset($all[$lk])) return (array)$all[$lk];
-      }
-    }
-  } catch (Throwable $e) {}
-  return [];
-}
-
-function isAdminUser(string $u, array $perms): bool {
-  if (!empty($perms['admin']) || !empty($perms['isAdmin'])) return true;
-  if (!empty($_SESSION['isAdmin']) && $_SESSION['isAdmin'] === true) return true;
-  $role = $_SESSION['role'] ?? null;
-  if ($role === 'admin' || $role === '1' || $role === 1) return true;
-  if ($u) {
-    $r = userModel::getUserRole($u);
-    if ($r === '1') return true;
-  }
-  return false;
-}
-
-function inUserFolderScope(string $folder, string $u, array $perms, bool $isAdmin): bool {
-  if ($isAdmin) return true;
-  $folderOnly = !empty($perms['folderOnly']) || !empty($perms['userFolderOnly']) || !empty($perms['UserFolderOnly']);
-  if (!$folderOnly) return true;
-  $f = trim($folder);
-  if ($f === '' || strcasecmp($f, 'root') === 0) return false; // non-admin folderOnly: not root
-  return ($f === $u) || (strpos($f, $u . '/') === 0);
-}
-
-// --- inputs ---
-$folder = isset($_GET['folder']) ? trim((string)$_GET['folder']) : 'root';
-// validate folder path: allow "root" or nested segments matching REGEX_FOLDER_NAME
-if ($folder !== 'root') {
-  $parts = array_filter(explode('/', trim($folder, "/\\ ")));
-  if (empty($parts)) {
-    http_response_code(400);
-    echo json_encode(['error' => 'Invalid folder name.']);
-    exit;
-  }
-  foreach ($parts as $seg) {
-    if (!preg_match(REGEX_FOLDER_NAME, $seg)) {
-      http_response_code(400);
-      echo json_encode(['error' => 'Invalid folder name.']);
-      exit;
-    }
-  }
-  $folder = implode('/', $parts);
-}
-
-$perms   = loadPermsFor($username);
-$isAdmin = isAdminUser($username, $perms);
-
-// base permissions via ACL
-$canRead   = $isAdmin || ACL::canRead($username, $perms, $folder);
-$canWrite  = $isAdmin || ACL::canWrite($username, $perms, $folder);
-$canShare  = $isAdmin || ACL::canShare($username, $perms, $folder);
-
-// scope + flags
-$inScope         = inUserFolderScope($folder, $username, $perms, $isAdmin);
-$readOnly        = !empty($perms['readOnly']);
-$disableUpload   = !empty($perms['disableUpload']);
-
-$canUpload       = $canWrite && !$readOnly && !$disableUpload && $inScope;
-$canCreateFolder = $canWrite && !$readOnly && $inScope;
-$canRename       = $canWrite && !$readOnly && $inScope;
-$canDelete       = $canWrite && !$readOnly && $inScope;
-$canMoveIn       = $canWrite && !$readOnly && $inScope;
-
-// (optional) owner info if you need it client-side
-$owner = FolderModel::getOwnerFor($folder);
-
-// output
-echo json_encode([
-  'user'        => $username,
-  'folder'      => $folder,
-  'isAdmin'     => $isAdmin,
-  'flags'       => [
-    'folderOnly'    => !empty($perms['folderOnly']) || !empty($perms['userFolderOnly']) || !empty($perms['UserFolderOnly']),
-    'readOnly'      => $readOnly,
-    'disableUpload' => $disableUpload,
-  ],
-  'owner'      => $owner,
-  'canView'    => $canRead,
-  'canUpload'  => $canUpload,
-  'canCreate'  => $canCreateFolder,
-  'canRename'  => $canRename,
-  'canDelete'  => $canDelete,
-  'canMoveIn'  => $canMoveIn,
-  'canShare'   => $canShare,
-], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
+echo json_encode(FolderController::capabilities($folder, $username), JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);

public/api/folder/getFolderColors.php

@@ -0,0 +1,17 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/FolderController.php';
+
+if (session_status() !== PHP_SESSION_ACTIVE) { @session_start(); }
+
+try {
+    $ctl = new FolderController();
+    $ctl->getFolderColors();   // echoes JSON + status codes
+} catch (Throwable $e) {
+    error_log('getFolderColors failed: ' . $e->getMessage());
+    http_response_code(500);
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode(['error' => 'Internal server error']);
+}

public/api/folder/isEmpty.php

@@ -0,0 +1,28 @@
+<?php
+// Fast ACL-aware peek for tree icons/chevrons
+declare(strict_types=1);
+header('Content-Type: application/json; charset=utf-8');
+header('Cache-Control: no-store');
+header('X-Content-Type-Options: nosniff');
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/FolderController.php';
+
+if (session_status() !== PHP_SESSION_ACTIVE) session_start();
+if (empty($_SESSION['authenticated'])) { http_response_code(401); echo json_encode(['error'=>'Unauthorized']); exit; }
+
+$username = (string)($_SESSION['username'] ?? '');
+$perms = [
+  'role'        => $_SESSION['role']        ?? null,
+  'admin'       => $_SESSION['admin']       ?? null,
+  'isAdmin'     => $_SESSION['isAdmin']     ?? null,
+  'folderOnly'  => $_SESSION['folderOnly']  ?? null,
+  'readOnly'    => $_SESSION['readOnly']    ?? null,
+];
+@session_write_close();
+
+$folder = isset($_GET['folder']) ? (string)$_GET['folder'] : 'root';
+$folder = str_replace('\\', '/', trim($folder));
+$folder = ($folder === '' || strcasecmp($folder, 'root') === 0) ? 'root' : trim($folder, '/');
+
+echo json_encode(FolderController::stats($folder, $username, $perms), JSON_UNESCAPED_SLASHES);

public/api/folder/listChildren.php

@@ -0,0 +1,31 @@
+<?php
+declare(strict_types=1);
+header('Content-Type: application/json; charset=utf-8');
+header('Cache-Control: no-store');
+header('X-Content-Type-Options: nosniff');
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/FolderController.php';
+
+if (session_status() !== PHP_SESSION_ACTIVE) session_start();
+if (empty($_SESSION['authenticated'])) { http_response_code(401); echo json_encode(['error'=>'Unauthorized']); exit; }
+
+$username = (string)($_SESSION['username'] ?? '');
+$perms = [
+  'role'        => $_SESSION['role']        ?? null,
+  'admin'       => $_SESSION['admin']       ?? null,
+  'isAdmin'     => $_SESSION['isAdmin']     ?? null,
+  'folderOnly'  => $_SESSION['folderOnly']  ?? null,
+  'readOnly'    => $_SESSION['readOnly']    ?? null,
+];
+@session_write_close();
+
+$folder = isset($_GET['folder']) ? (string)$_GET['folder'] : 'root';
+$folder = str_replace('\\', '/', trim($folder));
+$folder = ($folder === '' || strcasecmp($folder, 'root') === 0) ? 'root' : trim($folder, '/');
+
+$limit  = max(1, min(2000, (int)($_GET['limit'] ?? 500)));
+$cursor = isset($_GET['cursor']) && $_GET['cursor'] !== '' ? (string)$_GET['cursor'] : null;
+
+$res = FolderController::listChildren($folder, $username, $perms, $cursor, $limit);
+echo json_encode($res, JSON_UNESCAPED_SLASHES);

public/api/folder/moveFolder.php

@@ -0,0 +1,9 @@
+<?php
+// public/api/folder/moveFolder.php
+declare(strict_types=1);
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/FolderController.php';
+
+$controller = new FolderController();
+$controller->moveFolder();

public/api/folder/saveFolderColor.php

@@ -0,0 +1,17 @@
+<?php
+declare(strict_types=1);
+
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/FolderController.php';
+
+if (session_status() !== PHP_SESSION_ACTIVE) { @session_start(); }
+
+try {
+    $ctl = new FolderController();
+    $ctl->saveFolderColor();   // validates method + CSRF, does ACL, echoes JSON
+} catch (Throwable $e) {
+    error_log('saveFolderColor failed: ' . $e->getMessage());
+    http_response_code(500);
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode(['error' => 'Internal server error']);
+}

public/api/media/getProgress.php

@@ -0,0 +1,7 @@
+<?php
+// public/api/media/getProgress.php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/MediaController.php';
+
+$ctl = new MediaController();
+$ctl->getProgress();

public/api/media/getViewedMap.php

@@ -0,0 +1,7 @@
+<?php
+// public/api/media/getViewedMap.php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/MediaController.php';
+
+$ctl = new MediaController();
+$ctl->getViewedMap();

public/api/media/updateProgress.php

@@ -0,0 +1,7 @@
+<?php
+// public/api/media/updateProgress.php
+require_once __DIR__ . '/../../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/MediaController.php';
+
+$ctl = new MediaController();
+$ctl->updateProgress();

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();

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();

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();

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();

public/api/siteConfig.php

@@ -0,0 +1,9 @@
+<?php
+// public/api/siteConfig.php
+
+
+require_once __DIR__ . '/../../config/config.php';
+require_once PROJECT_ROOT . '/src/controllers/UserController.php';
+
+$userController = new UserController();
+$userController->siteConfig();

public/css/vendor/material-icons.css

@@ -0,0 +1,24 @@
+/* fallback */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/fonts/material-icons/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2?v={{APP_QVER}}') format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}

public/css/vendor/roboto.css

@@ -0,0 +1,44 @@
+/* Roboto Regular 400 — latin-ext */
+@font-face{
+  font-family:'Roboto';
+  font-style:normal;
+  font-weight:400;
+  font-display:swap;
+  src:url('/fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2?v={{APP_QVER}}') format('woff2');
+  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+/* Roboto Regular 400 — latin */
+@font-face{
+  font-family:'Roboto';
+  font-style:normal;
+  font-weight:400;
+  font-display:swap;
+  src:url('/fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2?v={{APP_QVER}}') format('woff2');
+  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+/* Roboto Medium 500 — latin-ext */
+@font-face{
+  font-family:'Roboto';
+  font-style:normal;
+  font-weight:500;
+  font-display:swap;
+  src:url('/fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2?v={{APP_QVER}}') format('woff2');
+  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
+}
+/* Roboto Medium 500 — latin */
+@font-face{
+  font-family:'Roboto';
+  font-style:normal;
+  font-weight:500;
+  font-display:swap;
+  src:url('/fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2?v={{APP_QVER}}') format('woff2');
+  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* sensible stack so Chinese falls back cleanly */
+:root{
+  --ui-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI",
+             "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",
+             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+}
+body{ font-family: var(--ui-font); }

public/index.html

@@ -2,142 +2,67 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>FileRise</title>
-  <link rel="icon" type="image/png" href="/assets/logo.png">
-  <link rel="icon" type="image/svg+xml" href="/assets/logo.svg">
-  <meta name="csrf-token" content="">
-  <meta name="share-url" content="">
-  <style>
-    /* hide the app shell until JS says otherwise */
-    .main-wrapper {
-      display: none;
-    }
-
-    /* full-screen white overlay while we check auth */
-    #loadingOverlay {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 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>
+  <meta name="theme-color" content="#0b5ed7">
+  <script>(function(){try{var s=localStorage.getItem('darkMode');var isDark=(s===null)?(window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches):(s==='1'||s==='true');var root=document.documentElement;root.setAttribute('data-theme',isDark?'dark':'light');root.classList.toggle('dark-mode',isDark);var bg=isDark?'#121212':'#ffffff';root.style.backgroundColor=bg;root.style.colorScheme=isDark?'dark':'light';root.style.setProperty('--pre-bg',bg);var m=document.querySelector('meta[name="theme-color"]');if(m)m.setAttribute('content',bg);}catch(e){}})();</script>
+  <style id="pretheme-css">
+    html,body,#loadingOverlay{background:var(--pre-bg,#ffffff) !important;}
   </style>
-  <!-- Google Fonts and Material Icons -->
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-  <!-- Bootstrap CSS -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
-    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.css"
-    integrity="sha384-zaeBlB/vwYsDRSlFajnDd7OydJ0cWk+c2OWybl3eSUf6hW2EbhlCsQPqKr3gkznT" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/theme/material-darker.min.css"
-    integrity="sha384-eZTPTN0EvJdn23s24UDYJmUM2T7C2ZFa3qFLypeBruJv8mZeTusKUAO/j5zPAQ6l" crossorigin="anonymous">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/codemirror.min.js"
-    integrity="sha384-UXbkZAbZYZ/KCAslc6UO4d6UHNKsOxZ/sqROSQaPTZCuEIKhfbhmffQ64uXFOcma"
-    crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/xml/xml.min.js"
-    integrity="sha384-xPpkMo5nDgD98fIcuRVYhxkZV6/9Y4L8s3p0J5c4MxgJkyKJ8BJr+xfRkq7kn6Tw"
-    crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/css/css.min.js"
-    integrity="sha384-to8njsu2GAiXQnY/aLGzz0DIY/SFSeSDodtvSl869n2NmsBdHOTZNNqbEBPYh7Pa"
-    crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/javascript/javascript.min.js"
-    integrity="sha384-kmQrbJf09Uo1WRLMDVGoVG3nM6F48frIhcj7f3FDUjeRzsiHwyBWDjMUIttnIeAf"
-    crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"
-    integrity="sha384-EXTg7rRfdTPZWoKVCslusAAev2TYw76fm+Wox718iEtFQ+gdAdAc5Z/ndLHSo4mq"
-    crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"
-    integrity="sha384-Tsl3d5pUAO7a13enIvSsL3O0/95nsthPJiPto5NtLuY8w3+LbZOpr3Fl2MNmrh1E"
-    crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"
-    integrity="sha384-zPE55eyESN+FxCWGEnlNxGyAPJud6IZ6TtJmXb56OFRGhxZPN4akj9rjA3gw5Qqa"
-    crossorigin="anonymous"></script>
-  <link rel="stylesheet" href="css/styles.css" />
+  <!-- Favicons (ordered: SVG -> PNGs -> ICO) -->
+  <link rel="icon" href="/assets/logo.svg?v={{APP_QVER}}" type="image/svg+xml" sizes="any">
+  <link rel="icon" href="/assets/logo.png?v={{APP_QVER}}" type="image/png" sizes="512x512">
+  <link rel="icon" href="/assets/logo-32.png?v={{APP_QVER}}" type="image/png" sizes="32x32">
+  <link rel="icon" href="/assets/logo-16.png?v={{APP_QVER}}" type="image/png" sizes="16x16">
+  <link rel="shortcut icon" href="/assets/favicon.ico?v={{APP_QVER}}">
+  
+  <meta name="description" content="FileRise is a fast, self-hosted file manager with granular per-folder ACLs, drag-and-drop folder moves, WebDAV, tagging, and a clean UI.">
+  <meta name="csrf-token" content=""><meta name="share-url" content=""><meta name="color-scheme" content="light dark">
+  <link rel="manifest" href="/manifest.webmanifest?v={{APP_QVER}}">
+  <link rel="apple-touch-icon" href="/assets/icons/icon-192.png?v={{APP_QVER}}">
+  
+  <!-- Critical CSS -->
+  <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>
+  <script src="/js/version.js?v={{APP_QVER}}" defer></script>
+  
+  <!-- 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">
-          <svg version="1.1" id="filingCabinetLogo" xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 64 64" xml:space="preserve">
-            <defs>
-              <!-- Gradient for the cabinet body -->
-              <linearGradient id="cabinetGradient" x1="0%" y1="0%" x2="0%" y2="100%">
-                <stop offset="0%" style="stop-color:#2196F3;stop-opacity:1" />
-                <stop offset="100%" style="stop-color:#1976D2;stop-opacity:1" />
-              </linearGradient>
-              <!-- Drop shadow filter with animated attributes for a lifting effect -->
-              <filter id="shadowFilter" x="-20%" y="-20%" width="140%" height="140%">
-                <feDropShadow id="dropShadow" dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.2">
-                  <!-- Animate the vertical offset: from 2 to 1 (as it rises), hold, then back to 2 -->
-                  <animate attributeName="dy" values="2;1;1;2" keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
-                  <!-- Animate the blur similarly: from 2 to 1.5 then back to 2 -->
-                  <animate attributeName="stdDeviation" values="2;1.5;1.5;2" keyTimes="0;0.2;0.8;1" dur="5s"
-                    fill="freeze" />
-                </feDropShadow>
-              </filter>
-            </defs>
-            <style type="text/css">
-              /* Cabinet with gradient, white outline, and drop shadow */
-              .cabinet {
-                fill: url(#cabinetGradient);
-                stroke: white;
-                stroke-width: 2;
-              }
-
-              .divider {
-                stroke: #1565C0;
-                stroke-width: 1.5;
-              }
-
-              .drawer {
-                fill: #FFFFFF;
-              }
-
-              .handle {
-                fill: #1565C0;
-              }
-            </style>
-            <!-- Group that will animate upward and then back down once -->
-            <g id="cabinetGroup">
-              <!-- Cabinet Body with rounded corners, white outline, and drop shadow -->
-              <rect x="4" y="4" width="56" height="56" rx="6" ry="6" class="cabinet" filter="url(#shadowFilter)" />
-              <!-- Divider lines for drawers -->
-              <line x1="5" y1="22" x2="59" y2="22" class="divider" />
-              <line x1="5" y1="34" x2="59" y2="34" class="divider" />
-              <!-- Drawers with Handles -->
-              <rect x="8" y="24" width="48" height="6" rx="1" ry="1" class="drawer" />
-              <circle cx="54" cy="27" r="1.5" class="handle" />
-              <rect x="8" y="36" width="48" height="6" rx="1" ry="1" class="drawer" />
-              <circle cx="54" cy="39" r="1.5" class="handle" />
-              <rect x="8" y="48" width="48" height="6" rx="1" ry="1" class="drawer" />
-              <circle cx="54" cy="51" r="1.5" class="handle" />
-              <!-- Additional detail: a small top handle on the cabinet door -->
-              <rect x="28" y="10" width="8" height="4" rx="1" ry="1" fill="#1565C0" />
-              <!-- Animate transform: rises by 2 pixels over 1s, holds for 3s, then falls over 1s (total 5s) -->
-              <animateTransform attributeName="transform" type="translate" values="0 0; 0 -2; 0 -2; 0 0"
-                keyTimes="0;0.2;0.8;1" dur="5s" fill="freeze" />
-            </g>
-          </svg>
+          <img
+  src="/assets/logo.svg?v={{APP_QVER}}"
+  alt="FileRise"
+  class="logo"
+  width="50"
+  height="50"
+  decoding="async"
+  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;">
@@ -172,7 +97,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>
@@ -181,15 +106,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" 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>
@@ -199,7 +127,7 @@
           <label for="loginPassword" data-i18n-key="password">Password:</label>
           <input type="password" class="form-control" id="loginPassword" name="password" required />
         </div>
-        <button type="submit" class="btn btn-primary btn-block btn-login" data-i18n-key="login">Login</button>
+        <button type="submit" class="btn btn-primary btn-block btn-login" data-i18n-key="login" data-default>Login</button>
         <div class="form-group remember-me-container">
           <input type="checkbox" id="rememberMeCheckbox" name="remember_me" />
           <label for="rememberMeCheckbox" data-i18n-key="remember_me">Remember me</label>
@@ -215,11 +143,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 -->
@@ -286,9 +217,27 @@
                           </div>
                         </div>
                       </div>
+                      <button id="moveFolderBtn" class="btn btn-warning ml-2" data-i18n-title="move_folder">
+                        <i class="material-icons">drive_file_move</i>
+                      </button>
+                      <!-- MOVE FOLDER MODAL (place near your other folder modals) -->
+                      <div id="moveFolderModal" class="modal" style="display:none;">
+                        <div class="modal-content">
+                          <h4 data-i18n-key="move_folder_title">Move Folder</h4>
+                          <p data-i18n-key="move_folder_message">Select a destination folder to move the current folder
+                            into:</p>
+                          <select id="moveFolderTarget" class="form-control modal-input"></select>
+                          <div class="modal-footer" style="margin-top:15px; text-align:right;">
+                            <button id="cancelMoveFolder" class="btn btn-secondary"
+                              data-i18n-key="cancel">Cancel</button>
+                            <button id="confirmMoveFolder" class="btn btn-primary" data-i18n-key="move" data-default>Move</button>
+                          </div>
+                        </div>
+                      </div>
                       <button id="renameFolderBtn" class="btn btn-warning ml-2" data-i18n-title="rename_folder">
                         <i class="material-icons">drive_file_rename_outline</i>
                       </button>
+
                       <div id="renameFolderModal" class="modal">
                         <div class="modal-content">
                           <h4 data-i18n-key="rename_folder_title">Rename Folder</h4>
@@ -299,10 +248,13 @@
                             <button id="cancelRenameFolder" class="btn btn-secondary"
                               data-i18n-key="cancel">Cancel</button>
                             <button id="submitRenameFolder" class="btn btn-primary"
-                              data-i18n-key="rename">Rename</button>
+                              data-i18n-key="rename" data-default>Rename</button>
                           </div>
                         </div>
                       </div>
+                      <button id="colorFolderBtn" class="btn btn-color-folder ml-2" data-i18n-title="color_folder" title="Color folder">
+                        <i class="material-icons">palette</i>
+                      </button>
 
                       <button id="shareFolderBtn" class="btn btn-secondary ml-2" data-i18n-title="share_folder">
                         <i class="material-icons">share</i>
@@ -319,20 +271,30 @@
                             <button id="cancelDeleteFolder" class="btn btn-secondary"
                               data-i18n-key="cancel">Cancel</button>
                             <button id="confirmDeleteFolder" class="btn btn-danger"
-                              data-i18n-key="delete">Delete</button>
+                              data-i18n-key="delete" data-default>Delete</button>
                           </div>
                         </div>
                       </div>
                     </div>
                     <div id="folderHelpTooltip" class="folder-help-tooltip"
-                      style="display: none; position: absolute; top: 50px; right: 15px; background: #fff; border: 1px solid #ccc; padding: 10px; z-index: 1000; box-shadow: 2px 2px 6px rgba(0,0,0,0.2);">
-                      <ul class="folder-help-list" style="margin: 0; padding-left: 20px;">
-                        <li data-i18n-key="folder_help_item_1">Click on a folder in the tree to view its files.</li>
-                        <li data-i18n-key="folder_help_item_2">Use [-] to collapse and [+] to expand folders.</li>
-                        <li data-i18n-key="folder_help_item_3">Select a folder and click "Create Folder" to add a
-                          subfolder.</li>
-                        <li data-i18n-key="folder_help_item_4">To rename or delete a folder, select it and then click
-                          the appropriate button.</li>
+                      style="display:none;position:absolute;top:50px;right:15px;background:#fff;border:1px solid #ccc;padding:10px;z-index:1000;box-shadow:2px 2px 6px rgba(0,0,0,0.2);border-radius:8px;max-width:320px;line-height:1.35;">
+                    <style>
+                        /* Dark mode polish */
+                        body.dark-mode #folderHelpTooltip {
+                          background:#2c2c2c; border-color:#555; color:#e8e8e8; box-shadow:2px 2px 10px rgba(0,0,0,.5);
+                        }
+                        #folderHelpTooltip .folder-help-list { margin:0; padding-left:18px; }
+                        #folderHelpTooltip .folder-help-list li { margin:6px 0; }
+                      </style>
+                      <ul class="folder-help-list">
+                        <li data-i18n-key="folder_help_click_view">Click a folder in the tree to view its files.</li>
+                        <li data-i18n-key="folder_help_expand_chevrons">Use chevrons to expand/collapse. Locked folders (padlock) can expand but can’t be opened.</li>
+                        <li data-i18n-key="folder_help_context_menu">Right-click a folder for quick actions: Create, Move, Rename, Share, Color, Delete.</li>
+                        <li data-i18n-key="folder_help_drag_drop">Drag a folder onto another folder <em>or</em> a breadcrumb to move it.</li>
+                        <li data-i18n-key="folder_help_load_more">For long lists, click “Load more” to fetch the next page of folders.</li>
+                        <li data-i18n-key="folder_help_last_folder">Your last opened folder is remembered. If you lose access, we pick the first allowed folder automatically.</li>
+                        <li data-i18n-key="folder_help_breadcrumbs">Use the breadcrumb to jump up the path. You can also drop onto a breadcrumb.</li>
+                        <li data-i18n-key="folder_help_permissions">Buttons enable/disable based on your permissions for the selected folder.</li>
                       </ul>
                     </div>
                   </div>
@@ -355,7 +317,7 @@
                   selected files?</p>
                 <div class="modal-footer">
                   <button id="cancelDeleteFiles" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
-                  <button id="confirmDeleteFiles" class="btn btn-danger" data-i18n-key="delete">Delete</button>
+                  <button id="confirmDeleteFiles" class="btn btn-danger" data-i18n-key="delete" data-default>Delete</button>
                 </div>
               </div>
             </div>
@@ -369,7 +331,7 @@
                 <select id="copyTargetFolder" class="form-control modal-input"></select>
                 <div class="modal-footer">
                   <button id="cancelCopyFiles" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
-                  <button id="confirmCopyFiles" class="btn btn-primary" data-i18n-key="copy">Copy</button>
+                  <button id="confirmCopyFiles" class="btn btn-primary" data-i18n-key="copy" data-default>Copy</button>
                 </div>
               </div>
             </div>
@@ -383,58 +345,41 @@
                 <select id="moveTargetFolder" class="form-control modal-input"></select>
                 <div class="modal-footer">
                   <button id="cancelMoveFiles" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
-                  <button id="confirmMoveFiles" class="btn btn-primary" data-i18n-key="move">Move</button>
+                  <button id="confirmMoveFiles" class="btn btn-primary" data-i18n-key="move" data-default>Move</button>
                 </div>
               </div>
             </div>
             <button id="downloadZipBtn" class="btn action-btn" style="display: none;" disabled
               data-i18n-key="download_zip">Download ZIP</button>
-            <button id="extractZipBtn" class="btn action-btn btn-sm btn-info" data-i18n-title="extract_zip"
+            <button id="extractZipBtn" class="btn action-btn btn-sm btn-info"  style="display: none;" disabled
               data-i18n-key="extract_zip_button">Extract Zip</button>
               <div id="createDropdown" class="dropdown-container" style="position:relative; display:inline-block;">
-                <button id="createBtn"  class="btn action-btn" data-i18n-key="create">
-                  ${t('create')} <span class="material-icons" style="font-size:16px;vertical-align:middle;">arrow_drop_down</span>
+                <button id="createBtn" class="btn action-btn" type="button" style="display:none;" aria-haspopup="true" aria-expanded="false">
+                  <span data-i18n-key="create">Create</span>
+                  <span class="material-icons" style="font-size:16px;vertical-align:middle;">arrow_drop_down</span>
                 </button>
-                <ul
-                  id="createMenu"
-                  class="dropdown-menu"
-                  style="
-                    display: none;
-                    position: absolute;
-                    top: 100%;
-                    left: 0;
-                    margin: 4px 0 0;
-                    padding: 0;
-                    list-style: none;
-                    background: #fff;
-                    border: 1px solid #ccc;
-                    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
-                    z-index: 1000;
-                    min-width: 140px;
-                  "
-                >
-                  <li id="createFileOption" class="dropdown-item" data-i18n-key="create_file" style="padding:8px 12px; cursor:pointer;">
-                    ${t('create_file')}
+                <ul id="createMenu" class="dropdown-menu" style="display:none; position:absolute; top:100%; left:0; margin:4px 0 0; padding:0; list-style:none; background:#fff; border:1px solid #ccc; box-shadow:0 2px 6px rgba(0,0,0,0.2); z-index:10010; min-width:160px;">
+                  <li id="createFileOption" class="dropdown-item" style="padding:8px 12px; cursor:pointer;">
+                    <span data-i18n-key="create_file">Create file</span>
                   </li>
-                  <li id="createFolderOption" class="dropdown-item" data-i18n-key="create_folder" style="padding:8px 12px; cursor:pointer;">
-                    ${t('create_folder')}
+                  <li id="createFolderOption" class="dropdown-item" style="padding:8px 12px; cursor:pointer;">
+                    <span data-i18n-key="create_folder">Create folder</span>
                   </li>
+                  <li id="uploadOption" class="dropdown-item" style="padding:8px 12px; cursor:pointer;">
+                    <span data-i18n-key="upload">Upload file(s)</span>
+                  </li>
+                  
                 </ul>
               </div>
             <!-- Create File Modal -->
             <div id="createFileModal" class="modal" style="display:none;">
               <div class="modal-content">
                 <h4 data-i18n-key="create_new_file">Create New File</h4>
-                <input
-                  type="text"
-                  id="createFileNameInput"
-                  class="form-control"
-                  placeholder="Enter filename…"
-                  data-i18n-placeholder="newfile_placeholder"
-                />
+                <input type="text" id="createFileNameInput" class="form-control" placeholder="Enter filename…"
+                  data-i18n-placeholder="newfile_placeholder" />
                 <div class="modal-footer" style="margin-top:1rem; text-align:right;">
                   <button id="cancelCreateFile" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
-                  <button id="confirmCreateFile" class="btn btn-primary" data-i18n-key="create">Create</button>
+                  <button id="confirmCreateFile" class="btn btn-primary" data-i18n-key="create" data-default>Create</button>
                 </div>
               </div>
             </div>
@@ -446,7 +391,7 @@
                   placeholder="files.zip" />
                 <div class="modal-footer" style="margin-top:15px; text-align:right;">
                   <button id="cancelDownloadZip" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
-                  <button id="confirmDownloadZip" class="btn btn-primary" data-i18n-key="download">Download</button>
+                  <button id="confirmDownloadZip" class="btn btn-primary" data-i18n-key="download" data-default>Download</button>
                 </div>
               </div>
             </div>
@@ -484,14 +429,14 @@
         placeholder="Filename" />
       <div style="margin-top: 15px; text-align: right;">
         <button id="cancelDownloadFile" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
-        <button id="confirmSingleDownloadButton" class="btn btn-primary" data-i18n-key="download">Download</button>
+        <button id="confirmSingleDownloadButton" class="btn btn-primary" data-i18n-key="download" data-default>Download</button>
       </div>
     </div>
   </div>
 
   <!-- Change Password, Add User, Remove User, Rename File, and Custom Confirm Modals (unchanged) -->
   <div id="changePasswordModal" class="modal" style="display:none;">
-    <div class="modal-content" style="max-width:400px; margin:auto;">
+    <div class="modal-content" style="text-align: center; padding: 20px;">
       <span id="closeChangePasswordModal" class="editor-close-btn">&times;</span>
       <h3 data-i18n-key="change_password_title">Change Password</h3>
       <input type="password" id="oldPassword" class="form-control" data-i18n-placeholder="old_password"
@@ -500,7 +445,7 @@
         placeholder="New Password" style="width:100%; margin: 5px 0;" />
       <input type="password" id="confirmPassword" class="form-control" data-i18n-placeholder="confirm_new_password"
         placeholder="Confirm New Password" style="width:100%; margin: 5px 0;" />
-      <button id="saveNewPasswordBtn" class="btn btn-primary" data-i18n-key="save" style="width:100%;">Save</button>
+      <button id="saveNewPasswordBtn" class="btn btn-primary" data-i18n-key="save" style="width:100%;" data-default>Save</button>
     </div>
   </div>
   <div id="addUserModal" class="modal" style="display:none;">
@@ -525,13 +470,33 @@
             Cancel
           </button>
           <!-- Save becomes type="submit" -->
-          <button type="submit" id="saveUserBtn" class="btn btn-primary" data-i18n-key="save_user">
+          <button type="submit" id="saveUserBtn" class="btn btn-primary" data-i18n-key="save_user" data-default>
             Save User
           </button>
         </div>
       </form>
     </div>
   </div>
+
+<div id="fileContextMenu" class="filr-menu" hidden role="menu" aria-label="File actions">
+  <button type="button" class="mi" data-action="create_file"     data-when="always"><i class="material-icons">note_add</i><span>Create file</span></button>
+  <div class="sep" data-when="always"></div>
+
+  <button type="button" class="mi" data-action="delete_selected" data-when="any"><i class="material-icons">delete</i><span>Delete selected</span></button>
+  <button type="button" class="mi" data-action="copy_selected"   data-when="any"><i class="material-icons">content_copy</i><span>Copy selected</span></button>
+  <button type="button" class="mi" data-action="move_selected"   data-when="any"><i class="material-icons">drive_file_move</i><span>Move selected</span></button>
+  <button type="button" class="mi" data-action="download_zip"    data-when="any"><i class="material-icons">archive</i><span>Download as ZIP</span></button>
+  <button type="button" class="mi" data-action="extract_zip"     data-when="zip"><i class="material-icons">unarchive</i><span>Extract ZIP</span></button>
+
+  <div class="sep" data-when="any"></div>
+
+  <button type="button" class="mi" data-action="tag_selected"    data-when="many"><i class="material-icons">sell</i><span>Tag selected</span></button>
+
+  <button type="button" class="mi" data-action="preview"         data-when="one"><i class="material-icons">visibility</i><span>Preview</span></button>
+  <button type="button" class="mi" data-action="edit"            data-when="can-edit"><i class="material-icons">edit</i><span>Edit</span></button>
+  <button type="button" class="mi" data-action="rename"          data-when="one"><i class="material-icons">drive_file_rename_outline</i><span>Rename</span></button>
+  <button type="button" class="mi" data-action="tag_file"        data-when="one"><i class="material-icons">sell</i><span>Tag file</span></button>
+</div>
   <div id="removeUserModal" class="modal" style="display:none;">
     <div class="modal-content">
       <h3 data-i18n-key="remove_user_title">Remove User</h3>
@@ -550,7 +515,7 @@
         placeholder="Enter new file name" style="margin-top:10px;" />
       <div style="margin-top:15px; text-align:right;">
         <button id="cancelRenameFile" class="btn btn-secondary" data-i18n-key="cancel">Cancel</button>
-        <button id="submitRenameFile" class="btn btn-primary" data-i18n-key="rename">Rename</button>
+        <button id="submitRenameFile" class="btn btn-primary" data-i18n-key="rename" data-default>Rename</button>
       </div>
     </div>
   </div>
@@ -558,12 +523,24 @@
     <div class="modal-content">
       <p id="confirmMessage"></p>
       <div class="modal-actions">
-        <button id="confirmYesBtn" class="btn btn-primary" data-i18n-key="yes">Yes</button>
+        <button id="confirmYesBtn" class="btn btn-primary" data-i18n-key="yes" data-default>Yes</button>
         <button id="confirmNoBtn" class="btn btn-secondary" data-i18n-key="no">No</button>
       </div>
     </div>
   </div>
-  <script type="module" src="js/main.js"></script>
+  <!-- Upload Modal -->
+<div id="uploadModal" class="modal" style="display:none;">
+  <div class="modal-content" style="max-width:900px;width:92vw;">
+    <div class="modal-header" style="display:flex;justify-content:space-between;align-items:center;">
+      <h3 style="margin:0;">Upload</h3>
+      <span id="closeUploadModal" class="editor-close-btn" role="button" aria-label="Close">&times;</span>
+    </div>
+    <div class="modal-body">
+      <!-- we will MOVE #uploadCard into here while open -->
+      <div id="uploadModalBody"></div>
+    </div>
+  </div>
+</div>
+</div>
 </body>
-
 </html>

public/js/appCore.js

@@ -0,0 +1,219 @@
+// /js/appCore.js
+import { showToast } from './domUtils.js?v={{APP_QVER}}';
+import { t } from './i18n.js?v={{APP_QVER}}';
+import { loadFolderTree } from './folderManager.js?v={{APP_QVER}}';
+import { setupTrashRestoreDelete } from './trashRestoreDelete.js?v={{APP_QVER}}';
+import { initDragAndDrop, loadSidebarOrder, loadHeaderOrder } from './dragAndDrop.js?v={{APP_QVER}}';
+import { initTagSearch } from './fileTags.js?v={{APP_QVER}}';
+import { initFileActions, openUploadModal } from './fileActions.js?v={{APP_QVER}}';
+import { initUpload } from './upload.js?v={{APP_QVER}}';
+import { loadAdminConfigFunc } from './auth.js?v={{APP_QVER}}';
+
+window.__pendingDropData = null;
+
+function waitFor(selector, timeout = 1200) {
+  return new Promise(resolve => {
+    const t0 = performance.now();
+    (function tick() {
+      const el = document.querySelector(selector);
+      if (el) return resolve(el);
+      if (performance.now() - t0 >= timeout) return resolve(null);
+      requestAnimationFrame(tick);
+    })();
+  });
+}
+
+// Keep a bound handle to the native fetch so wrappers elsewhere never recurse
+const _nativeFetch = window.fetch.bind(window);
+
+/* =========================
+   CSRF UTILITIES (shared)
+   ========================= */
+export function setCsrfToken(token) {
+  if (!token) return;
+  window.csrfToken = token;
+  localStorage.setItem('csrf', token);
+
+  // meta tag for easy access in other places
+  let meta = document.querySelector('meta[name="csrf-token"]');
+  if (!meta) {
+    meta = document.createElement('meta');
+    meta.name = 'csrf-token';
+    document.head.appendChild(meta);
+  }
+  meta.content = token;
+}
+
+export function getCsrfToken() {
+  return window.csrfToken || localStorage.getItem('csrf') || '';
+}
+
+/**
+ * Bootstrap/refresh CSRF from the server.
+ * Uses the native fetch to avoid wrapper loops and accepts rotated tokens via header.
+ */
+export async function loadCsrfToken() {
+  const res = await _nativeFetch('/api/auth/token.php', { method: 'GET', credentials: 'include' });
+
+  // header-based rotation
+  const hdr = res.headers.get('X-CSRF-Token');
+  if (hdr) setCsrfToken(hdr);
+
+  // body (if provided)
+  let body = {};
+  try { body = await res.json(); } catch { /* token endpoint may return empty */ }
+
+  const token = body.csrf_token || getCsrfToken();
+  setCsrfToken(token);
+
+  // share-url meta should reflect the actual origin
+  const actualShare = window.location.origin;
+  let shareMeta = document.querySelector('meta[name="share-url"]');
+  if (!shareMeta) {
+    shareMeta = document.createElement('meta');
+    shareMeta.name = 'share-url';
+    document.head.appendChild(shareMeta);
+  }
+  shareMeta.content = actualShare;
+
+  return { csrf_token: token, share_url: actualShare };
+}
+
+/* =========================
+   APP INIT (shared)
+   ========================= */
+export function initializeApp() {
+  const saved = parseInt(localStorage.getItem('rowHeight') || '48', 10);
+  document.documentElement.style.setProperty('--file-row-height', saved + 'px');
+
+  const last = localStorage.getItem('lastOpenedFolder');
+  window.currentFolder = last ? last : "root";
+
+  const stored = localStorage.getItem('showFoldersInList');
+  window.showFoldersInList = stored === null ? true : stored === 'true';
+
+  // Load public site config early (safe subset)
+  loadAdminConfigFunc();
+
+  // Enable tag search UI; initial file list load is controlled elsewhere
+  initTagSearch();
+
+
+  // Hook DnD relay from fileList area into upload area
+  const fileListArea = document.getElementById('fileList');
+
+  if (fileListArea) {
+    let hoverTimer = null;
+
+    fileListArea.addEventListener('dragover', e => {
+      e.preventDefault();
+      fileListArea.classList.add('drop-hover');
+      // (optional) auto-open after brief hover so users see the drop target
+      if (!hoverTimer) {
+        hoverTimer = setTimeout(() => {
+          if (typeof window.openUploadModal === 'function') window.openUploadModal();
+        }, 400);
+      }
+    });
+
+    fileListArea.addEventListener('dragleave', () => {
+      fileListArea.classList.remove('drop-hover');
+      if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = null; }
+    });
+
+    fileListArea.addEventListener('drop', async e => {
+      e.preventDefault();
+      fileListArea.classList.remove('drop-hover');
+      if (hoverTimer) { clearTimeout(hoverTimer); hoverTimer = null; }
+
+      // 1) open the same modal that the Create menu uses
+      openUploadModal();
+      // 2) wait until the upload area exists *in the modal*, then relay the drop
+      //    Prefer a scoped selector first to avoid duplicate IDs.
+      const uploadArea =
+        (await waitFor('#uploadModal #uploadDropArea')) ||
+        (await waitFor('#uploadDropArea'));
+      if (!uploadArea) return;
+
+      try {
+        // Many browsers make dataTransfer read-only; we try the direct attach first
+        const relay = new DragEvent('drop', { bubbles: true, cancelable: true });
+        Object.defineProperty(relay, 'dataTransfer', { value: e.dataTransfer });
+        uploadArea.dispatchEvent(relay);
+      } catch {
+        // Fallback: stash DataTransfer and fire a plain event; handler will read the stash
+        window.__pendingDropData = e.dataTransfer || null;
+        uploadArea.dispatchEvent(new Event('drop', { bubbles: true, cancelable: true }));
+      }
+    });
+  }
+
+  // App subsystems
+  initDragAndDrop();
+  loadSidebarOrder();
+  loadHeaderOrder();
+  initFileActions();
+  initUpload();
+  loadFolderTree();
+
+  // Only run trash/restore for admins
+  const isAdmin =
+    localStorage.getItem('isAdmin') === '1' || localStorage.getItem('isAdmin') === 'true';
+  if (isAdmin) {
+    setupTrashRestoreDelete();
+  }
+
+  // Small help tooltip toggle
+  const helpBtn = document.getElementById("folderHelpBtn");
+  const helpTooltip = document.getElementById("folderHelpTooltip");
+  if (helpBtn && helpTooltip) {
+    helpBtn.addEventListener("click", () => {
+      helpTooltip.style.display =
+        helpTooltip.style.display === "block" ? "none" : "block";
+    });
+  }
+}
+
+/* =========================
+   LOGOUT (shared)
+   ========================= */
+export function triggerLogout() {
+  const clearWelcomeFlags = () => {
+    try {
+      // one-per-tab toast guard
+      sessionStorage.removeItem('__fr_welcomed');
+      // if you also used the per-user (all-tabs) guard, clear that too:
+      const u = localStorage.getItem('username') || '';
+      if (u) localStorage.removeItem(`__fr_welcomed_${u}`);
+    } catch { }
+  };
+
+  _nativeFetch("/api/auth/logout.php", {
+    method: "POST",
+    credentials: "include",
+    headers: { "X-CSRF-Token": getCsrfToken() }
+  })
+    .then(() => {
+      clearWelcomeFlags();
+      window.location.reload(true);
+    })
+    .catch(() => {
+      // even if the request fails, clear the flags so the next login can toast
+      clearWelcomeFlags();
+      window.location.reload(true);
+    });
+}
+
+/* =========================
+   Global UX guard (unchanged)
+   ========================= */
+window.addEventListener("unhandledrejection", (ev) => {
+  const msg = (ev?.reason && ev.reason.message) || "";
+  if (msg === "auth") {
+    showToast(t("please_sign_in_again") || "Please sign in again.", "error");
+    ev.preventDefault();
+  } else if (msg === "forbidden") {
+    showToast(t("no_access_to_resource") || "You don’t have access to that.", "error");
+    ev.preventDefault();
+  }
+});

public/js/auth.js

@@ -1,15 +1,15 @@
-import { sendRequest } from './networkUtils.js';
-import { t, applyTranslations } from './i18n.js';
+import { sendRequest } from './networkUtils.js?v={{APP_QVER}}';
+import { t, applyTranslations } from './i18n.js?v={{APP_QVER}}';
 import {
   toggleVisibility,
   showToast as originalShowToast,
   attachEnterKeyListener,
   showCustomConfirmModal
-} from './domUtils.js';
-import { loadFileList } from './fileListView.js';
-import { initFileActions } from './fileActions.js';
-import { renderFileTable } from './fileListView.js';
-import { loadFolderTree } from './folderManager.js';
+} from './domUtils.js?v={{APP_QVER}}';
+import { loadFileList } from './fileListView.js?v={{APP_QVER}}';
+import { initFileActions } from './fileActions.js?v={{APP_QVER}}';
+import { renderFileTable } from './fileListView.js?v={{APP_QVER}}';
+import { loadFolderTree } from './folderManager.js?v={{APP_QVER}}';
 import {
   openTOTPLoginModal as originalOpenTOTPLoginModal,
   openUserPanel,
@@ -17,9 +17,9 @@ import {
   closeTOTPModal,
   setLastLoginData,
   openApiModal
-} from './authModals.js';
-import { openAdminPanel } from './adminPanel.js';
-import { initializeApp, triggerLogout } from './main.js';
+} from './authModals.js?v={{APP_QVER}}';
+import { openAdminPanel } from './adminPanel.js?v={{APP_QVER}}';
+import { initializeApp, triggerLogout } from './appCore.js?v={{APP_QVER}}';
 
 // Production OIDC configuration (override via API as needed)
 const currentOIDCConfig = {
@@ -31,6 +31,49 @@ const currentOIDCConfig = {
 };
 window.currentOIDCConfig = currentOIDCConfig;
 
+
+
+(function installToastFilter() {
+  const isDemoHost = location.hostname.toLowerCase() === 'demo.filerise.net';
+
+  window.__FR_TOAST_FILTER__ = function (msgKeyOrText) {
+    // Suppress the nag while doing TOTP step-up
+    if (window.pendingTOTP && (msgKeyOrText === 'please_log_in_to_continue' ||
+      /please log in/i.test(String(msgKeyOrText)))) {
+      return null; // suppress
+    }
+
+    // Demo host
+    if (isDemoHost && (msgKeyOrText === 'please_log_in_to_continue' ||
+      /please log in/i.test(String(msgKeyOrText)))) {
+      return "Demo site — use:\nUsername: demo\nPassword: demo";
+    }
+
+    // Try to translate keys; pass through plain text
+    try {
+      const maybe = t(msgKeyOrText);
+      if (typeof maybe === 'string' && maybe !== msgKeyOrText) return maybe;
+    } catch { }
+    return msgKeyOrText;
+  };
+})();
+
+function queueWelcomeToast(name) {
+  const uname = String(name || '').trim().slice(0, 80);
+  if (!uname) return;
+  // show immediately (if we don’t reload instantly)
+  try {
+    window.dispatchEvent(new CustomEvent('filerise:toast', {
+      detail: { message: `Welcome back, ${uname}!`, duration: 2000 }
+    }));
+  } catch { }
+
+  // and persist for after-reload (flushed by main.js on boot)
+  try {
+    sessionStorage.setItem('welcomeMessage', `Welcome back, ${uname}!`);
+  } catch { }
+}
+
 /* ----------------- TOTP & Toast Overrides ----------------- */
 // detect if we’re in a pending‑TOTP state
 window.pendingTOTP = new URLSearchParams(window.location.search).get('totp_required') === '1';
@@ -72,45 +115,51 @@ const originalFetch = window.fetch;
  * @param {object} options
  * @returns {Promise<Response>}
  */
+
 export async function fetchWithCsrf(url, options = {}) {
-  // 1) Merge in credentials + header
-  options = {
-    credentials: 'include',
-    ...options,
-  };
+  const original = window.fetch.bind(window);
+  const wantJson = (options.headers && /json/i.test(options.headers['Content-Type'] || '')) || typeof options.body === 'string' && options.body.trim().startsWith('{');
+
+  options = { credentials: 'include', ...options };
   options.headers = {
-    ...(options.headers || {}),
-    'X-CSRF-Token': window.csrfToken,
+    'Accept': 'application/json',
+    ...(options.headers || {})
   };
-
-  // 2) First attempt
-  let res = await originalFetch(url, options);
-
-  // 3) If we got a 403, try to refresh token & retry
-  if (res.status === 403) {
-    // 3a) See if the server gave us a new token header
-    let newToken = res.headers.get('X-CSRF-Token');
-    // 3b) Otherwise fall back to the /api/auth/token endpoint
-    if (!newToken) {
-      const tokRes = await originalFetch('/api/auth/token.php', { credentials: 'include' });
-      if (tokRes.ok) {
-        const body = await tokRes.json();
-        newToken = body.csrf_token;
-      }
-    }
-    if (newToken) {
-      // 3c) Update global + meta
-      window.csrfToken = newToken;
-      const meta = document.querySelector('meta[name="csrf-token"]');
-      if (meta) meta.content = newToken;
-
-      // 3d) Retry the original request with the new token
-      options.headers['X-CSRF-Token'] = newToken;
-      res = await originalFetch(url, options);
-    }
+  if (window.csrfToken) {
+    options.headers['X-CSRF-Token'] = window.csrfToken;
   }
 
-  // 4) Return the real Response—no body peeking here!
+  async function retryWithFreshCsrf(asFormFallback = false) {
+    const tokRes = await original('/api/auth/token.php', { credentials: 'include' });
+    if (tokRes.ok) {
+      const body = await tokRes.json().catch(() => ({}));
+      if (body?.csrf_token) {
+        window.csrfToken = body.csrf_token;
+        const meta = document.querySelector('meta[name="csrf-token"]');
+        if (meta) meta.content = body.csrf_token;
+        options.headers['X-CSRF-Token'] = body.csrf_token;
+      }
+    }
+    if (asFormFallback && wantJson) {
+      // convert JSON body into x-www-form-urlencoded
+      const orig = options.body && typeof options.body === 'string' ? JSON.parse(options.body) : {};
+      options.body = toFormBody(orig);
+      options.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+    }
+    return original(url, options);
+  }
+
+  let res = await original(url, options);
+
+  // If API doesn’t like JSON or token is stale
+  if (res.status === 400 || res.status === 403 || res.status === 415) {
+    // 1) retry with fresh CSRF keeping same encoding
+    res = await retryWithFreshCsrf(false);
+    if (!res.ok && wantJson) {
+      // 2) retry again as form-encoded
+      res = await retryWithFreshCsrf(true);
+    }
+  }
   return res;
 }
 
@@ -180,7 +229,7 @@ function updateLoginOptionsUIFromStorage() {
 }
 
 export function loadAdminConfigFunc() {
-  return fetch("/api/admin/getConfig.php", { credentials: "include" })
+  return fetch("/api/siteConfig.php", { credentials: "include" })
     .then(async (response) => {
       // If a proxy or some edge returns 204/empty, handle gracefully
       let config = {};
@@ -191,13 +240,13 @@ export function loadAdminConfigFunc() {
 
       document.title = headerTitle;
       const lo = config.loginOptions || {};
-      localStorage.setItem("disableFormLogin",  String(!!lo.disableFormLogin));
-      localStorage.setItem("disableBasicAuth",  String(!!lo.disableBasicAuth));
-      localStorage.setItem("disableOIDCLogin",  String(!!lo.disableOIDCLogin));
-      localStorage.setItem("globalOtpauthUrl",  config.globalOtpauthUrl || "otpauth://totp/{label}?secret={secret}&issuer=FileRise");
+      localStorage.setItem("disableFormLogin", String(!!lo.disableFormLogin));
+      localStorage.setItem("disableBasicAuth", String(!!lo.disableBasicAuth));
+      localStorage.setItem("disableOIDCLogin", String(!!lo.disableOIDCLogin));
+      localStorage.setItem("globalOtpauthUrl", config.globalOtpauthUrl || "otpauth://totp/{label}?secret={secret}&issuer=FileRise");
       // These may be absent for non-admins; default them
-      localStorage.setItem("authBypass",        String(!!lo.authBypass));
-      localStorage.setItem("authHeaderName",    lo.authHeaderName || "X-Remote-User");
+      localStorage.setItem("authBypass", String(!!lo.authBypass));
+      localStorage.setItem("authHeaderName", lo.authHeaderName || "X-Remote-User");
 
       updateLoginOptionsUIFromStorage();
 
@@ -253,14 +302,14 @@ export async function updateAuthenticatedUI(data) {
   if (loading) loading.remove();
 
   // 2) Show main UI
-  document.querySelector('.main-wrapper').style.display    = '';
-  document.getElementById('loginForm').style.display       = 'none';
+  document.querySelector('.main-wrapper').style.display = '';
+  document.getElementById('loginForm').style.display = 'none';
   toggleVisibility("loginForm", false);
   toggleVisibility("mainOperations", true);
   toggleVisibility("uploadFileForm", true);
   toggleVisibility("fileListContainer", true);
-  attachEnterKeyListener("removeUserModal",   "deleteUserBtn");
-  attachEnterKeyListener("changePasswordModal","saveNewPasswordBtn");
+  attachEnterKeyListener("removeUserModal", "deleteUserBtn");
+  attachEnterKeyListener("changePasswordModal", "saveNewPasswordBtn");
   document.querySelector(".header-buttons").style.visibility = "visible";
 
   // 3) Persist auth flags (unchanged)
@@ -271,9 +320,9 @@ export async function updateAuthenticatedUI(data) {
     localStorage.setItem("username", data.username);
   }
   if (typeof data.folderOnly !== "undefined") {
-    localStorage.setItem("folderOnly",   data.folderOnly   ? "true" : "false");
-    localStorage.setItem("readOnly",     data.readOnly     ? "true" : "false");
-    localStorage.setItem("disableUpload",data.disableUpload? "true" : "false");
+    localStorage.setItem("folderOnly", data.folderOnly ? "true" : "false");
+    localStorage.setItem("readOnly", data.readOnly ? "true" : "false");
+    localStorage.setItem("disableUpload", data.disableUpload ? "true" : "false");
   }
 
   // 4) Fetch up-to-date profile picture — ALWAYS overwrite localStorage
@@ -282,7 +331,7 @@ export async function updateAuthenticatedUI(data) {
 
   // 5) Build / update header buttons
   const headerButtons = document.querySelector(".header-buttons");
-  const firstButton   = headerButtons.firstElementChild;
+  const firstButton = headerButtons.firstElementChild;
 
   // a) restore-from-trash for admins
   if (data.isAdmin) {
@@ -290,8 +339,8 @@ export async function updateAuthenticatedUI(data) {
     if (!r) {
       r = document.createElement("button");
       r.id = "restoreFilesBtn";
-      r.classList.add("btn","btn-warning");
-      r.setAttribute("data-i18n-title","trash_restore_delete");
+      r.classList.add("btn", "btn-warning");
+      r.setAttribute("data-i18n-title", "trash_restore_delete");
       r.innerHTML = '<i class="material-icons">restore_from_trash</i>';
       if (firstButton) insertAfter(r, firstButton);
       else headerButtons.appendChild(r);
@@ -308,8 +357,8 @@ export async function updateAuthenticatedUI(data) {
     if (!a) {
       a = document.createElement("button");
       a.id = "adminPanelBtn";
-      a.classList.add("btn","btn-info");
-      a.setAttribute("data-i18n-title","admin_panel");
+      a.classList.add("btn", "btn-info");
+      a.setAttribute("data-i18n-title", "admin_panel");
       a.innerHTML = '<i class="material-icons">admin_panel_settings</i>';
       insertAfter(a, document.getElementById("restoreFilesBtn"));
       a.addEventListener("click", openAdminPanel);
@@ -330,19 +379,19 @@ export async function updateAuthenticatedUI(data) {
       : `<i class="material-icons">account_circle</i>`;
 
     // fallback username if missing
-    const usernameText = data.username 
-      || localStorage.getItem("username") 
+    const usernameText = data.username
+      || localStorage.getItem("username")
       || "";
 
     if (!dd) {
       dd = document.createElement("div");
-      dd.id    = "userDropdown";
+      dd.id = "userDropdown";
       dd.classList.add("user-dropdown");
 
       // toggle button
       const toggle = document.createElement("button");
-      toggle.id    = "userDropdownToggle";
-      toggle.classList.add("btn","btn-user");
+      toggle.id = "userDropdownToggle";
+      toggle.classList.add("btn", "btn-user");
       toggle.setAttribute("title", t("user_settings"));
       toggle.innerHTML = `
         ${avatarHTML}
@@ -464,6 +513,14 @@ function checkAuthentication(showLoginToast = true) {
         }
         updateAuthenticatedUI(data);
         return data;
+
+        // at the end of updateAuthenticatedUI(data)
+        if (!window.__FR_FLAGS?.initialized && typeof initializeApp === 'function') {
+          initializeApp();
+          window.__FR_FLAGS.initialized = true;
+        }
+        if (typeof applyTranslations === 'function') applyTranslations();
+        if (typeof updateLoginOptionsUIFromStorage === 'function') updateLoginOptionsUIFromStorage();
       } else {
         const overlay = document.getElementById('loadingOverlay');
         if (overlay) overlay.remove();
@@ -484,53 +541,162 @@ function checkAuthentication(showLoginToast = true) {
 }
 
 /* ----------------- Authentication Submission ----------------- */
+async function primeCsrfStrict() {
+  const r = await fetch('/api/auth/token.php', { credentials: 'include' });
+  const j = await r.json().catch(() => ({}));
+  if (!r.ok || !j.csrf_token) throw new Error('CSRF missing');
+  window.csrfToken = j.csrf_token;
+  const m = document.querySelector('meta[name="csrf-token"]');
+  if (m) m.content = j.csrf_token;
+}
+
+function toFormBody(obj) {
+  const p = new URLSearchParams();
+  for (const [k, v] of Object.entries(obj || {})) p.set(k, v == null ? '' : String(v));
+  return p.toString();
+}
+
+async function safeJson(res) {
+  const ct = res.headers.get('content-type') || '';
+  if (!/application\/json/i.test(ct)) return null;
+  try { return await res.clone().json(); } catch { return null; }
+}
+
+async function sniffTOTP(res, bodyMaybe) {
+  if (res.headers.get('X-TOTP-Required') === '1') return true;
+  if (res.redirected && /[?&]totp_required=1\b/.test(res.url)) return true;
+  const body = bodyMaybe ?? await safeJson(res);
+  if (body && (body.totp_required || body.error === 'TOTP_REQUIRED')) return true;
+  try {
+    const txt = await res.clone().text();
+    if (/\btotp_required\s*=\s*1\b/i.test(txt)) return true;
+  } catch { }
+  return false;
+}
+
+async function isAuthedNow() {
+  try {
+    const r = await fetch('/api/auth/checkAuth.php', { credentials: 'include' });
+    const j = await r.json().catch(() => ({}));
+    return !!j.authenticated;
+  } catch { return false; }
+}
+
+function rafTick(times = 2) {
+  return new Promise(res => {
+    const step = () => { if (--times <= 0) res(); else requestAnimationFrame(step); };
+    requestAnimationFrame(step);
+  });
+}
+
+async function fetchAuthSnapshot() {
+  try {
+    const r = await fetch('/api/auth/checkAuth.php', { credentials: 'include' });
+    return await r.json();
+  } catch { return {}; }
+}
+
+async function syncPermissionsToLocalStorage() {
+  try {
+    const r = await fetch('/api/getUserPermissions.php', { credentials: 'include' });
+    const perm = await r.json();
+    if (perm && typeof perm === 'object') {
+      localStorage.setItem('folderOnly', perm.folderOnly ? 'true' : 'false');
+      localStorage.setItem('readOnly', perm.readOnly ? 'true' : 'false');
+      localStorage.setItem('disableUpload', perm.disableUpload ? 'true' : 'false');
+    }
+  } catch { /* non-fatal */ }
+}
+
+// ——— main ———
+let __loginInFlight = false;
+
 async function submitLogin(data) {
-  setLastLoginData(data);
-  window.__lastLoginData = data;
+  if (__loginInFlight) return;
+  __loginInFlight = true;
+
+  const payload = {
+    username: String(data.username || '').trim(),
+    password: String(data.password || '').trim(),
+    remember_me: data.remember_me ? 1 : 0
+  };
+
+  setLastLoginData(payload);
+  window.__lastLoginData = payload;
 
   try {
-    // ─── 1) Get CSRF for the initial auth call ───
-    let res = await fetch("/api/auth/token.php", { credentials: "include" });
-    if (!res.ok) throw new Error("Could not fetch CSRF token");
-    window.csrfToken = (await res.json()).csrf_token;
+    await primeCsrfStrict();
 
-    // ─── 2) Send credentials ───
-    const response = await sendRequest(
-      "/api/auth/auth.php",
-      "POST",
-      data,
-      { "X-CSRF-Token": window.csrfToken }
-    );
+    // Attempt #1 — JSON
+    let res = await fetchWithCsrf('/api/auth/auth.php', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+    let body = await safeJson(res);
 
-    // ─── 3a) Full login (no TOTP) ───
-    if (response.success || response.status === "ok") {
-      sessionStorage.setItem("welcomeMessage", "Welcome back, " + data.username + "!");
-      // … fetch permissions & reload …
+    // TOTP requested?
+    if (await sniffTOTP(res, body)) {
+      try { await primeCsrfStrict(); } catch { }
+      window.pendingTOTP = true;
       try {
-        const perm = await sendRequest("/api/getUserPermissions.php", "GET");
-        if (perm && typeof perm === "object") {
-          localStorage.setItem("folderOnly", perm.folderOnly ? "true" : "false");
-          localStorage.setItem("readOnly", perm.readOnly ? "true" : "false");
-          localStorage.setItem("disableUpload", perm.disableUpload ? "true" : "false");
-        }
+        const auth = await import('/js/auth.js?v={{APP_QVER}}');
+        if (typeof auth.openTOTPLoginModal === 'function') auth.openTOTPLoginModal();
       } catch { }
-      return window.location.reload();
+      return;
     }
 
-    // ─── 3b) TOTP required ───
-    if (response.totp_required) {
-      // **Refresh** CSRF before the TOTP verify call
-      res = await fetch("/api/auth/token.php", { credentials: "include" });
-      if (res.ok) {
-        window.csrfToken = (await res.json()).csrf_token;
-      }
-      // now open the modal—any totp_verify fetch from here on will use the new token
-      return openTOTPLoginModal();
+    // Full success (no TOTP)
+    if (body && (body.success || body.status === 'ok' || body.authenticated)) {
+
+      await syncPermissionsToLocalStorage();
+      return afterLogin();
     }
 
-    // ─── 3c) Too many attempts ───
-    if (response.error && response.error.includes("Too many failed login attempts")) {
-      showToast(response.error);
+    // Cookie set but non-JSON body — double check session
+    if (!body && await isAuthedNow()) {
+
+      await syncPermissionsToLocalStorage();
+
+      return afterLogin();
+    }
+
+    // Attempt #2 — form fallback
+    res = await fetchWithCsrf('/api/auth/auth.php', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Accept': 'application/json' },
+      body: toFormBody(payload)
+    });
+    body = await safeJson(res);
+
+    if (await sniffTOTP(res, body)) {
+      try { await primeCsrfStrict(); } catch { }
+      window.pendingTOTP = true;
+      try {
+        const auth = await import('/js/auth.js?v={{APP_QVER}}');
+        if (typeof auth.openTOTPLoginModal === 'function') auth.openTOTPLoginModal();
+      } catch { }
+      return;
+    }
+
+    if (body && (body.success || body.status === 'ok' || body.authenticated)) {
+      await syncPermissionsToLocalStorage();
+
+      return afterLogin();
+    }
+
+    if (!body && await isAuthedNow()) {
+
+      await syncPermissionsToLocalStorage();
+
+      return afterLogin();
+    }
+
+    // Rate limit still respected
+    if (body?.error && /Too many failed login attempts/i.test(body.error)) {
+      showToast(body.error);
       const btn = document.querySelector("#authForm button[type='submit']");
       if (btn) {
         btn.disabled = true;
@@ -542,12 +708,12 @@ async function submitLogin(data) {
       return;
     }
 
-    // ─── 3d) Other failures ───
-    showToast("Login failed: " + (response.error || "Unknown error"));
+    showToast('Login failed' + (body?.error ? `: ${body.error}` : ''));
 
-  } catch (err) {
-    const msg = err.message || err.error || "Unknown error";
-    showToast(`Login failed: ${msg}`);
+  } catch (e) {
+    showToast('Login failed: ' + (e.message || 'Unknown error'));
+  } finally {
+    __loginInFlight = false;
   }
 }
 
@@ -763,4 +929,4 @@ document.addEventListener("DOMContentLoaded", function () {
   }
 });
 
-export { initAuth, checkAuthentication };
+export { initAuth, checkAuthentication, openTOTPLoginModal };

public/js/authModals.js

@@ -1,7 +1,7 @@
-import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js';
-import { sendRequest } from './networkUtils.js';
-import { t, applyTranslations, setLocale } from './i18n.js';
-import { loadAdminConfigFunc, updateAuthenticatedUI } from './auth.js';
+import { showToast, toggleVisibility, attachEnterKeyListener } from './domUtils.js?v={{APP_QVER}}';
+import { sendRequest } from './networkUtils.js?v={{APP_QVER}}';
+import { t, applyTranslations, setLocale } from './i18n.js?v={{APP_QVER}}';
+import { loadAdminConfigFunc, updateAuthenticatedUI } from './auth.js?v={{APP_QVER}}';
 
 let lastLoginData = null;
 export function setLastLoginData(data) {
@@ -195,7 +195,6 @@ export async function openUserPanel() {
     color:      ${isDark ? '#e0e0e0' : '#000'};
     padding: 20px;
     max-width: 600px; width:90%;
-    border-radius: 8px;
     overflow-y: auto; max-height: 500px;
     border: ${isDark ? '1px solid #444' : '1px solid #ccc'};
     box-sizing: border-box;
@@ -328,10 +327,19 @@ export async function openUserPanel() {
     const langSel = document.createElement('select');
     langSel.id = 'languageSelector';
     langSel.className = 'form-select';
-    ['en', 'es', 'fr', 'de'].forEach(code => {
+    const languages = [
+      { code: 'en',    labelKey: 'english',             fallback: 'English' },
+      { code: 'es',    labelKey: 'spanish',             fallback: 'Español' },
+      { code: 'fr',    labelKey: 'french',              fallback: 'Français' },
+      { code: 'de',    labelKey: 'german',              fallback: 'Deutsch' },
+      { code: 'zh-CN', labelKey: 'chinese_simplified',  fallback: '简体中文' },
+    ];
+    
+    languages.forEach(({ code, labelKey, fallback }) => {
       const opt = document.createElement('option');
       opt.value = code;
-      opt.textContent = t(code === 'en' ? 'english' : code === 'es' ? 'spanish' : code === 'fr' ? 'french' : 'german');
+      // use i18n if available, otherwise fallback
+      opt.textContent = (typeof t === 'function' ? t(labelKey) : '') || fallback;
       langSel.appendChild(opt);
     });
     langSel.value = localStorage.getItem('language') || 'en';

public/js/defer-css.js

@@ -0,0 +1,31 @@
+// /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 = [];
+
+  // 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);
+})();

public/js/domUtils.js

@@ -1,6 +1,6 @@
 // domUtils.js
-import { t } from './i18n.js';
-import { openDownloadModal } from './fileActions.js';
+import { t } from './i18n.js?v={{APP_QVER}}';
+import { openDownloadModal } from './fileActions.js?v={{APP_QVER}}';
 
 // Basic DOM Helpers
 export function toggleVisibility(elementId, shouldShow) {
@@ -156,7 +156,7 @@ export function buildSearchAndPaginationControls({ currentPage, totalPages, sear
 
 export function buildFileTableHeader(sortOrder) {
   return `
-    <table class="table">
+    <table class="table filr-table table-hover table-striped">
       <thead>
         <tr>
           <th class="checkbox-col"><input type="checkbox" id="selectAll"></th>
@@ -283,9 +283,9 @@ export function updateRowHighlight(checkbox) {
   const row = checkbox.closest('tr');
   if (!row) return;
   if (checkbox.checked) {
-    row.classList.add('row-selected');
+    row.classList.add('row-selected', 'selected');
   } else {
-    row.classList.remove('row-selected');
+    row.classList.remove('row-selected', 'selected');
   }
 }
 

public/js/fileActions.js

@@ -1,8 +1,9 @@
 // fileActions.js
-import { showToast, attachEnterKeyListener } from './domUtils.js';
-import { loadFileList } from './fileListView.js';
-import { formatFolderName } from './fileListView.js';
-import { t } from './i18n.js';
+import { showToast, attachEnterKeyListener } from './domUtils.js?v={{APP_QVER}}';
+import { loadFileList } from './fileListView.js?v={{APP_QVER}}';
+import { formatFolderName } from './fileListView.js?v={{APP_QVER}}';
+import { refreshFolderIcon } from './folderManager.js?v={{APP_QVER}}';
+import { t } from './i18n.js?v={{APP_QVER}}';
 
 export function handleDeleteSelected(e) {
   e.preventDefault();
@@ -12,7 +13,6 @@ export function handleDeleteSelected(e) {
     showToast("no_files_selected");
     return;
   }
-
   window.filesToDelete = Array.from(checkboxes).map(chk => chk.value);
   const count = window.filesToDelete.length;
   document.getElementById("deleteFilesMessage").textContent = t("confirm_delete_files", { count: count });
@@ -20,6 +20,52 @@ export function handleDeleteSelected(e) {
   attachEnterKeyListener("deleteFilesModal", "confirmDeleteFiles");
 }
 
+
+  // --- Upload modal "portal" support ---
+  let _uploadCardSentinel = null;
+
+  export function openUploadModal() {
+    const modal = document.getElementById('uploadModal');
+    const body  = document.getElementById('uploadModalBody');
+    const card  = document.getElementById('uploadCard'); // <-- your existing card
+    window.openUploadModal = openUploadModal;
+    window.__pendingDropData = null;
+    if (!modal || !body || !card) {
+      console.warn('Upload modal or upload card not found');
+      return;
+    }
+  
+    // Create a hidden sentinel so we can put the card back in place later
+    if (!_uploadCardSentinel) {
+      _uploadCardSentinel = document.createElement('div');
+      _uploadCardSentinel.id = 'uploadCardSentinel';
+      _uploadCardSentinel.style.display = 'none';
+      card.parentNode.insertBefore(_uploadCardSentinel, card);
+    }
+  
+    // Move the actual card node into the modal (keeps all existing listeners)
+    body.appendChild(card);
+  
+    // Show modal
+    modal.style.display = 'block';
+  
+    // Focus the chooser for quick keyboard flow
+    setTimeout(() => {
+      const chooseBtn = document.getElementById('customChooseBtn');
+      if (chooseBtn) chooseBtn.focus();
+    }, 50);
+  }
+  
+  export function closeUploadModal() {
+    const modal = document.getElementById('uploadModal');
+    const card  = document.getElementById('uploadCard');
+  
+    if (_uploadCardSentinel && _uploadCardSentinel.parentNode && card) {
+      _uploadCardSentinel.parentNode.insertBefore(card, _uploadCardSentinel);
+    }
+    if (modal) modal.style.display = 'none';
+  }
+
 document.addEventListener("DOMContentLoaded", function () {
   const cancelDelete = document.getElementById("cancelDeleteFiles");
   if (cancelDelete) {
@@ -31,6 +77,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
   const confirmDelete = document.getElementById("confirmDeleteFiles");
   if (confirmDelete) {
+    confirmDelete.setAttribute("data-default", "");
     confirmDelete.addEventListener("click", function () {
       fetch("/api/file/deleteFiles.php", {
         method: "POST",
@@ -46,6 +93,7 @@ document.addEventListener("DOMContentLoaded", function () {
           if (data.success) {
             showToast("Selected files deleted successfully!");
             loadFileList(window.currentFolder);
+            refreshFolderIcon(window.currentFolder);
           } else {
             showToast("Error: " + (data.error || "Could not delete files"));
           }
@@ -118,7 +166,7 @@ export async function handleCreateFile(e) {
       method: 'POST',
       credentials: 'include',
       headers: {
-        'Content-Type':'application/json',
+        'Content-Type': 'application/json',
         'X-CSRF-Token': window.csrfToken
       },
       // ⚠️ must send `name`, not `filename`
@@ -128,6 +176,7 @@ export async function handleCreateFile(e) {
     if (!js.success) throw new Error(js.error);
     showToast(t('file_created'));
     loadFileList(folder);
+    refreshFolderIcon(folder);
   } catch (err) {
     showToast(err.message || t('error_creating_file'));
   } finally {
@@ -138,7 +187,7 @@ export async function handleCreateFile(e) {
 document.addEventListener('DOMContentLoaded', () => {
   const cancel = document.getElementById('cancelCreateFile');
   const confirm = document.getElementById('confirmCreateFile');
-  if (cancel)  cancel.addEventListener('click', () => document.getElementById('createFileModal').style.display = 'none');
+  if (cancel) cancel.addEventListener('click', () => document.getElementById('createFileModal').style.display = 'none');
   if (confirm) confirm.addEventListener('click', handleCreateFile);
 });
 
@@ -264,7 +313,7 @@ document.addEventListener("DOMContentLoaded", () => {
   const cancelZipBtn = document.getElementById("cancelDownloadZip");
   const confirmZipBtn = document.getElementById("confirmDownloadZip");
   const cancelCreate = document.getElementById('cancelCreateFile');
-  
+
   if (cancelCreate) {
     cancelCreate.addEventListener('click', () => {
       document.getElementById('createFileModal').style.display = 'none';
@@ -299,12 +348,13 @@ document.addEventListener("DOMContentLoaded", () => {
         }
         showToast(t('file_created_successfully'));
         loadFileList(window.currentFolder);
+        refreshFolderIcon(folder);
       } catch (err) {
         console.error(err);
         showToast(err.message || t('error_creating_file'));
       }
     });
-    attachEnterKeyListener('createFileModal','confirmCreateFile');
+    attachEnterKeyListener('createFileModal', 'confirmCreateFile');
   }
 
   // 1) Cancel button hides the name modal
@@ -316,66 +366,191 @@ document.addEventListener("DOMContentLoaded", () => {
 
   // 2) Confirm button kicks off the zip+download
   if (confirmZipBtn) {
+    confirmZipBtn.setAttribute("data-default", "");
     confirmZipBtn.addEventListener("click", async () => {
       // a) Validate ZIP filename
       let zipName = document.getElementById("zipFileNameInput").value.trim();
-      if (!zipName) {
-        showToast("Please enter a name for the zip file.");
-        return;
-      }
-      if (!zipName.toLowerCase().endsWith(".zip")) {
-        zipName += ".zip";
-      }
+      if (!zipName) { showToast("Please enter a name for the zip file."); return; }
+      if (!zipName.toLowerCase().endsWith(".zip")) zipName += ".zip";
 
-      // b) Hide the name‐input modal, show the spinner modal
+      // b) Hide the name‐input modal, show the progress modal
       zipNameModal.style.display = "none";
       progressModal.style.display = "block";
 
-      // c) (Optional) update the “Preparing…” text if you gave it an ID
+      // c) Title text (optional)
       const titleEl = document.getElementById("downloadProgressTitle");
       if (titleEl) titleEl.textContent = `Preparing ${zipName}…`;
 
-      try {
-        // d) POST and await the ZIP blob
-        const res = await fetch("/api/file/downloadZip.php", {
-          method: "POST",
-          credentials: "include",
-          headers: {
-            "Content-Type": "application/json",
-            "X-CSRF-Token": window.csrfToken
-          },
-          body: JSON.stringify({
-            folder: window.currentFolder || "root",
-            files: window.filesToDownload
-          })
-        });
-        if (!res.ok) {
-          const txt = await res.text();
-          throw new Error(txt || `Status ${res.status}`);
-        }
-
-        const blob = await res.blob();
-        if (!blob || blob.size === 0) {
-          throw new Error("Received empty ZIP file.");
-        }
-
-        // e) Hand off to the browser’s download manager
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement("a");
-        a.href = url;
-        a.download = zipName;
-        document.body.appendChild(a);
-        a.click();
-        URL.revokeObjectURL(url);
-        a.remove();
-
-      } catch (err) {
-        console.error("Error downloading ZIP:", err);
-        showToast("Error: " + err.message);
-      } finally {
-        // f) Always hide spinner modal
-        progressModal.style.display = "none";
+      // d) Queue the job
+      const res = await fetch("/api/file/downloadZip.php", {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+        body: JSON.stringify({ folder: window.currentFolder || "root", files: window.filesToDownload })
+      });
+      const jsr = await res.json().catch(() => ({}));
+      if (!res.ok || !jsr.ok) {
+        const msg = (jsr && jsr.error) ? jsr.error : `Status ${res.status}`;
+        throw new Error(msg);
       }
+      const token = jsr.token;
+      const statusUrl = jsr.statusUrl;
+      const downloadUrl = jsr.downloadUrl + "&name=" + encodeURIComponent(zipName);
+
+      // Ensure a progress UI exists in the modal
+      function ensureZipProgressUI() {
+        const modalEl = document.getElementById("downloadProgressModal");
+        if (!modalEl) {
+          // really shouldn't happen, but fall back to body
+          console.warn("downloadProgressModal not found; falling back to document.body");
+        }
+        // Prefer a dedicated content node inside the modal
+        let host =
+          (modalEl && modalEl.querySelector("#downloadProgressContent")) ||
+          (modalEl && modalEl.querySelector(".modal-body")) ||
+          (modalEl && modalEl.querySelector(".rise-modal-body")) ||
+          (modalEl && modalEl.querySelector(".modal-content")) ||
+          (modalEl && modalEl.querySelector(".content")) ||
+          null;
+
+        // If no suitable container, create one inside the modal
+        if (!host) {
+          host = document.createElement("div");
+          host.id = "downloadProgressContent";
+          (modalEl || document.body).appendChild(host);
+        }
+
+        // Helper: ensure/move an element with given id into host
+        function ensureInHost(id, tag, init) {
+          let el = document.getElementById(id);
+          if (el && el.parentElement !== host) host.appendChild(el); // move if it exists elsewhere
+          if (!el) {
+            el = document.createElement(tag);
+            el.id = id;
+            if (typeof init === "function") init(el);
+            host.appendChild(el);
+          }
+          return el;
+        }
+
+        // Title
+        const title = ensureInHost("downloadProgressTitle", "div", (el) => {
+          el.style.marginBottom = "8px";
+          el.textContent = "Preparing…";
+        });
+
+        // Progress bar (native <progress>)
+        const bar = (function () {
+          let el = document.getElementById("downloadProgressBar");
+          if (el && el.parentElement !== host) host.appendChild(el); // move into modal
+          if (!el) {
+            el = document.createElement("progress");
+            el.id = "downloadProgressBar";
+            host.appendChild(el);
+          }
+          el.max = 100;
+          el.value = 0;
+          el.style.display = "";     // override any inline display:none
+          el.style.width = "100%";
+          el.style.height = "1.1em";
+          return el;
+        })();
+
+        // Text line
+        const text = ensureInHost("downloadProgressText", "div", (el) => {
+          el.style.marginTop = "8px";
+          el.style.fontSize = "0.9rem";
+          el.style.whiteSpace = "nowrap";
+          el.style.overflow = "hidden";
+          el.style.textOverflow = "ellipsis";
+        });
+
+        // Optional spinner hider
+        const hideSpinner = () => {
+          const sp = document.getElementById("downloadSpinner");
+          if (sp) sp.style.display = "none";
+        };
+
+        return { bar, text, title, hideSpinner };
+      }
+
+      function humanBytes(n) {
+        if (!Number.isFinite(n) || n < 0) return "";
+        const u = ["B", "KB", "MB", "GB", "TB"]; let i = 0, x = n;
+        while (x >= 1024 && i < u.length - 1) { x /= 1024; i++; }
+        return x.toFixed(x >= 10 || i === 0 ? 0 : 1) + " " + u[i];
+      }
+      function mmss(sec) {
+        sec = Math.max(0, sec | 0);
+        const m = (sec / 60) | 0, s = sec % 60;
+        return `${m}:${s.toString().padStart(2, '0')}`;
+      }
+
+      const ui = ensureZipProgressUI();
+      const t0 = Date.now();
+
+      // e) Poll until ready
+      while (true) {
+        await new Promise(r => setTimeout(r, 1200));
+        const s = await fetch(`${statusUrl}&_=${Date.now()}`, {
+          credentials: "include", cache: "no-store",
+        }).then(r => r.json());
+
+        if (s.error) throw new Error(s.error);
+        if (ui.title) ui.title.textContent = `Preparing ${zipName}…`;
+
+        // --- RENDER PROGRESS ---
+        if (typeof s.pct === "number" && ui.bar && ui.text) {
+          if ((s.phase !== 'finalizing') && (s.pct < 99)) {
+            ui.hideSpinner && ui.hideSpinner();
+            const filesDone = s.filesDone ?? 0;
+            const filesTotal = s.filesTotal ?? 0;
+            const bytesDone = s.bytesDone ?? 0;
+            const bytesTotal = s.bytesTotal ?? 0;
+
+            // Determinate 0–98% while enumerating
+            const pct = Math.max(0, Math.min(98, s.pct | 0));
+            if (!ui.bar.hasAttribute("value")) ui.bar.value = 0;
+            ui.bar.value = pct;
+            ui.text.textContent =
+              `${pct}% — ${filesDone}/${filesTotal} files, ${humanBytes(bytesDone)} / ${humanBytes(bytesTotal)}`;
+          } else {
+            // FINALIZING: keep progress at 100% and show timer + selected totals
+            if (!ui.bar.hasAttribute("value")) ui.bar.value = 100;
+            ui.bar.value = 100; // lock at 100 during finalizing
+            const since = s.finalizeAt ? Math.max(0, (Date.now() / 1000 | 0) - (s.finalizeAt | 0)) : 0;
+            const selF = s.selectedFiles ?? s.filesTotal ?? 0;
+            const selB = s.selectedBytes ?? s.bytesTotal ?? 0;
+            ui.text.textContent = `Finalizing… ${mmss(since)} — ${selF} file${selF === 1 ? '' : 's'}, ~${humanBytes(selB)}`;
+          }
+        } else if (ui.text) {
+          ui.text.textContent = "Still preparing…";
+        }
+        // --- /RENDER ---
+
+        if (s.ready) {
+          // Snap to 100 and close modal just before download
+          if (ui.bar) { ui.bar.max = 100; ui.bar.value = 100; }
+          progressModal.style.display = "none";
+          await new Promise(r => setTimeout(r, 0));
+          break;
+        }
+        if (Date.now() - t0 > 15 * 60 * 1000) throw new Error("Timed out preparing ZIP");
+      }
+
+      // f) Trigger download
+      const a = document.createElement("a");
+      a.href = downloadUrl;
+      a.download = zipName;
+      a.style.display = "none";
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+
+      // g) Reset for next time
+      if (ui.bar) ui.bar.value = 0;
+      if (ui.text) ui.text.textContent = "";
+      if (Array.isArray(window.filesToDownload)) window.filesToDownload = [];
     });
   }
 });
@@ -478,6 +653,7 @@ document.addEventListener("DOMContentLoaded", function () {
   }
   const confirmCopy = document.getElementById("confirmCopyFiles");
   if (confirmCopy) {
+    confirmCopy.setAttribute("data-default", "");
     confirmCopy.addEventListener("click", function () {
       const targetFolder = document.getElementById("copyTargetFolder").value;
       if (!targetFolder) {
@@ -506,6 +682,7 @@ document.addEventListener("DOMContentLoaded", function () {
           if (data.success) {
             showToast("Selected files copied successfully!", 5000);
             loadFileList(window.currentFolder);
+            refreshFolderIcon(targetFolder);
           } else {
             showToast("Error: " + (data.error || "Could not copy files"), 5000);
           }
@@ -529,6 +706,7 @@ document.addEventListener("DOMContentLoaded", function () {
   }
   const confirmMove = document.getElementById("confirmMoveFiles");
   if (confirmMove) {
+    confirmMove.setAttribute("data-default", "");
     confirmMove.addEventListener("click", function () {
       const targetFolder = document.getElementById("moveTargetFolder").value;
       if (!targetFolder) {
@@ -557,6 +735,8 @@ document.addEventListener("DOMContentLoaded", function () {
           if (data.success) {
             showToast("Selected files moved successfully!");
             loadFileList(window.currentFolder);
+            refreshFolderIcon(targetFolder);
+            refreshFolderIcon(window.currentFolder);
           } else {
             showToast("Error: " + (data.error || "Could not move files"));
           }
@@ -598,6 +778,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const submitBtn = document.getElementById("submitRenameFile");
   if (submitBtn) {
+    submitBtn.setAttribute("data-default", "");
     submitBtn.addEventListener("click", function () {
       const newName = document.getElementById("newFileName").value.trim();
       if (!newName || newName === window.fileToRename) {
@@ -689,10 +870,11 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 document.addEventListener('DOMContentLoaded', () => {
-  const btn      = document.getElementById('createBtn');
-  const menu     = document.getElementById('createMenu');
-  const fileOpt  = document.getElementById('createFileOption');
-  const folderOpt= document.getElementById('createFolderOption');
+  const btn = document.getElementById('createBtn');
+  const menu = document.getElementById('createMenu');
+  const fileOpt = document.getElementById('createFileOption');
+  const folderOpt = document.getElementById('createFolderOption');
+  const uploadOpt = document.getElementById('uploadOption'); // NEW
 
   // Toggle dropdown on click
   btn.addEventListener('click', (e) => {
@@ -717,6 +899,32 @@ document.addEventListener('DOMContentLoaded', () => {
   document.addEventListener('click', () => {
     menu.style.display = 'none';
   });
+  if (uploadOpt) {
+    uploadOpt.addEventListener('click', () => {
+      if (menu) menu.style.display = 'none';
+      openUploadModal();
+    });
+  }
+
+  // Close buttons / backdrop
+  const upModal = document.getElementById('uploadModal');
+  const closeX  = document.getElementById('closeUploadModal');
+
+  if (closeX) closeX.addEventListener('click', closeUploadModal);
+
+  // click outside content to close
+  if (upModal) {
+    upModal.addEventListener('click', (e) => {
+      if (e.target === upModal) closeUploadModal();
+    });
+  }
+
+  // ESC to close
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && upModal && upModal.style.display === 'block') {
+      closeUploadModal();
+    }
+  });
 });
 
 window.renameFile = renameFile;

public/js/fileDragDrop.js

@@ -1,125 +1,164 @@
 // fileDragDrop.js
-import { showToast } from './domUtils.js';
-import { loadFileList } from './fileListView.js';
+import { showToast } from './domUtils.js?v={{APP_QVER}}';
+import { loadFileList } from './fileListView.js?v={{APP_QVER}}';
 
-export function fileDragStartHandler(event) {
-  const row = event.currentTarget;
-  let fileNames = [];
-
-  const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
-  if (selectedCheckboxes.length > 1) {
-    selectedCheckboxes.forEach(chk => {
-      const parentRow = chk.closest("tr");
-      if (parentRow) {
-        const cell = parentRow.querySelector("td:nth-child(2)");
-        if (cell) {
-          let rawName = cell.textContent.trim();
-          const tagContainer = cell.querySelector(".tag-badges");
-          if (tagContainer) {
-            const tagText = tagContainer.innerText.trim();
-            if (rawName.endsWith(tagText)) {
-              rawName = rawName.slice(0, -tagText.length).trim();
-            }
-          }
-          fileNames.push(rawName);
-        }
-      }
-    });
-  } else {
-    const fileNameCell = row.querySelector("td:nth-child(2)");
-    if (fileNameCell) {
-      let rawName = fileNameCell.textContent.trim();
-      const tagContainer = fileNameCell.querySelector(".tag-badges");
-      if (tagContainer) {
-        const tagText = tagContainer.innerText.trim();
-        if (rawName.endsWith(tagText)) {
-          rawName = rawName.slice(0, -tagText.length).trim();
-        }
-      }
-      fileNames.push(rawName);
-    }
-  }
-
-  if (fileNames.length === 0) return;
-
-  const dragData = fileNames.length === 1 
-    ? { fileName: fileNames[0], sourceFolder: window.currentFolder || "root" }
-    : { files: fileNames, sourceFolder: window.currentFolder || "root" };
-
-  event.dataTransfer.setData("application/json", JSON.stringify(dragData));
-
-  let dragImage = document.createElement("div");
-  dragImage.style.display = "inline-flex";
-  dragImage.style.width = "auto";
-  dragImage.style.maxWidth = "fit-content";
-  dragImage.style.padding = "6px 10px";
-  dragImage.style.backgroundColor = "#333";
-  dragImage.style.color = "#fff";
-  dragImage.style.border = "1px solid #555";
-  dragImage.style.borderRadius = "4px";
-  dragImage.style.alignItems = "center";
-  dragImage.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.3)";
-  const icon = document.createElement("span");
-  icon.className = "material-icons";
-  icon.textContent = "insert_drive_file";
-  icon.style.marginRight = "4px";
-  const label = document.createElement("span");
-  label.textContent = fileNames.length === 1 ? fileNames[0] : fileNames.length + " files";
-  dragImage.appendChild(icon);
-  dragImage.appendChild(label);
-  
-  document.body.appendChild(dragImage);
-  event.dataTransfer.setDragImage(dragImage, 5, 5);
-  setTimeout(() => {
-    document.body.removeChild(dragImage);
-  }, 0);
+/* ---------------- helpers ---------------- */
+function getRowEl(el) {
+  return el?.closest('tr[data-file-name], .gallery-card[data-file-name]') || null;
+}
+function getNameFromAny(el) {
+  const row = getRowEl(el);
+  if (!row) return null;
+  // 1) canonical
+  const n = row.getAttribute('data-file-name');
+  if (n) return n;
+  // 2) filename-only span
+  const span = row.querySelector('.filename-text');
+  if (span) return span.textContent.trim();
+  return null;
+}
+function getSelectedFileNames() {
+  const boxes = Array.from(document.querySelectorAll('#fileList .file-checkbox:checked'));
+  const names = boxes.map(cb => getNameFromAny(cb)).filter(Boolean);
+  // de-dup just in case
+  return Array.from(new Set(names));
+}
+function makeDragImage(labelText, iconName = 'insert_drive_file') {
+  const wrap = document.createElement('div');
+  Object.assign(wrap.style, {
+    display: 'inline-flex',
+    maxWidth: '420px',
+    padding: '6px 10px',
+    backgroundColor: '#333',
+    color: '#fff',
+    border: '1px solid #555',
+    borderRadius: '6px',
+    alignItems: 'center',
+    gap: '6px',
+    boxShadow: '2px 2px 6px rgba(0,0,0,0.3)',
+    fontSize: '12px',
+    pointerEvents: 'none'
+  });
+  const icon = document.createElement('span');
+  icon.className = 'material-icons';
+  icon.textContent = iconName;
+  const label = document.createElement('span');
+  // trim long single-name labels
+  const txt = String(labelText || '');
+  label.textContent = txt.length > 60 ? (txt.slice(0, 57) + '…') : txt;
+  wrap.appendChild(icon);
+  wrap.appendChild(label);
+  document.body.appendChild(wrap);
+  return wrap;
 }
 
+/* ---------------- drag start (rows/cards) ---------------- */
+export function fileDragStartHandler(event) {
+  const row = getRowEl(event.currentTarget);
+  if (!row) return;
+
+  // Use current selection if present; otherwise drag just this row’s file
+  let names = getSelectedFileNames();
+  if (names.length === 0) {
+    const single = getNameFromAny(row);
+    if (single) names = [single];
+  }
+  if (names.length === 0) return;
+
+  const sourceFolder = window.currentFolder || 'root';
+  const payload = { files: names, sourceFolder };
+
+  // primary payload
+  event.dataTransfer.setData('application/json', JSON.stringify(payload));
+  // fallback (lets some environments read something human)
+  event.dataTransfer.setData('text/plain', names.join('\n'));
+
+  // nicer drag image
+  const dragLabel = (names.length === 1) ? names[0] : `${names.length} files`;
+  const ghost = makeDragImage(dragLabel, names.length === 1 ? 'insert_drive_file' : 'folder');
+  event.dataTransfer.setDragImage(ghost, 6, 6);
+  // clean up the ghost as soon as the browser has captured it
+  setTimeout(() => { try { document.body.removeChild(ghost); } catch { } }, 0);
+}
+
+/* ---------------- folder targets ---------------- */
 export function folderDragOverHandler(event) {
   event.preventDefault();
-  event.currentTarget.classList.add("drop-hover");
+  event.currentTarget.classList.add('drop-hover');
 }
-
 export function folderDragLeaveHandler(event) {
-  event.currentTarget.classList.remove("drop-hover");
+  event.currentTarget.classList.remove('drop-hover');
 }
 
-export function folderDropHandler(event) {
+export async function folderDropHandler(event) {
   event.preventDefault();
-  event.currentTarget.classList.remove("drop-hover");
-  const dropFolder = event.currentTarget.getAttribute("data-folder");
-  let dragData;
+  event.currentTarget.classList.remove('drop-hover');
+
+  const dropFolder = event.currentTarget.getAttribute('data-folder')
+    || event.currentTarget.getAttribute('data-dest-folder')
+    || 'root';
+
+  // parse drag payload
+  let dragData = null;
   try {
-    dragData = JSON.parse(event.dataTransfer.getData("application/json"));
-  } catch (e) {
-    console.error("Invalid drag data");
+    const raw = event.dataTransfer.getData('application/json') || '{}';
+    dragData = JSON.parse(raw);
+  } catch {
+    // ignore
+  }
+  if (!dragData) {
+    showToast('Invalid drag data.');
     return;
   }
-  if (!dragData || !dragData.fileName) return;
-  fetch("/api/file/moveFiles.php", {
-    method: "POST",
-    credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-Token": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
-    },
-    body: JSON.stringify({
-      source: dragData.sourceFolder,
-      files: [dragData.fileName],
-      destination: dropFolder
-    })
-  })
-    .then(response => response.json())
-    .then(data => {
-      if (data.success) {
-        showToast(`File "${dragData.fileName}" moved successfully to ${dropFolder}!`);
-        loadFileList(dragData.sourceFolder);
-      } else {
-        showToast("Error moving file: " + (data.error || "Unknown error"));
-      }
-    })
-    .catch(error => {
-      console.error("Error moving file via drop:", error);
-      showToast("Error moving file.");
+
+  // normalize names
+  let names = Array.isArray(dragData.files) ? dragData.files.slice()
+    : dragData.fileName ? [dragData.fileName]
+      : [];
+  names = names.filter(v => typeof v === 'string' && v.length > 0);
+
+  if (names.length === 0) {
+    showToast('No files to move.');
+    return;
+  }
+
+  const sourceFolder = dragData.sourceFolder || (window.currentFolder || 'root');
+  if (dropFolder === sourceFolder) {
+    showToast('Source and destination are the same.');
+    return;
+  }
+
+  // POST move
+  try {
+    const res = await fetch('/api/file/moveFiles.php', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+        'X-CSRF-Token': window.csrfToken
+      },
+      body: JSON.stringify({
+        source: sourceFolder,
+        files: names,
+        destination: dropFolder
+      })
     });
+    const data = await res.json().catch(() => ({}));
+
+    if (res.ok && data && data.success) {
+      const msg = (names.length === 1)
+        ? `Moved "${names[0]}" to ${dropFolder}.`
+        : `Moved ${names.length} files to ${dropFolder}.`;
+      showToast(msg);
+      // Refresh whatever view the user is currently looking at
+      loadFileList(window.currentFolder || sourceFolder);
+    } else {
+      const err = (data && (data.error || data.message)) || `HTTP ${res.status}`;
+      showToast('Error moving file(s): ' + err);
+    }
+  } catch (e) {
+    console.error('Error moving file(s):', e);
+    showToast('Error moving file(s).');
+  }
 }

public/js/fileEditor.js

@@ -1,147 +1,503 @@
 // fileEditor.js
-import { escapeHTML, showToast } from './domUtils.js';
-import { loadFileList } from './fileListView.js';
-import { t } from './i18n.js';
+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
 const EDITOR_BLOCK_THRESHOLD = 10 * 1024 * 1024; // >10 MiB => block editing
 
-// Lazy-load CodeMirror modes on demand
-const CM_CDN = "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/";
-const MODE_URL = {
-  // core you've likely already loaded:
-  "xml": "mode/xml/xml.min.js",
-  "css": "mode/css/css.min.js",
-  "javascript": "mode/javascript/javascript.min.js",
+// ==== CodeMirror lazy loader ===============================================
+const CM_BASE = "/vendor/codemirror/5.65.5/";
 
-  // extras you may want on-demand:
-  "htmlmixed": "mode/htmlmixed/htmlmixed.min.js",
-  "application/x-httpd-php": "mode/php/php.min.js",
-  "php": "mode/php/php.min.js",
-  "markdown": "mode/markdown/markdown.min.js",
-  "python": "mode/python/python.min.js",
-  "sql": "mode/sql/sql.min.js",
-  "shell": "mode/shell/shell.min.js",
-  "yaml": "mode/yaml/yaml.min.js",
-  "properties": "mode/properties/properties.min.js",
-  "text/x-csrc": "mode/clike/clike.min.js",
-  "text/x-c++src": "mode/clike/clike.min.js",
-  "text/x-java": "mode/clike/clike.min.js",
-  "text/x-csharp": "mode/clike/clike.min.js",
-  "text/x-kotlin": "mode/clike/clike.min.js"
+// Stamp-friendly helpers (the stamper will replace {{APP_QVER}})
+const coreUrl = (p) => `${CM_BASE}${p}?v={{APP_QVER}}`;
+
+const CORE = {
+  js: coreUrl("codemirror.min.js"),
+  css: coreUrl("codemirror.min.css"),
+  themeCss: coreUrl("theme/material-darker.min.css"),
 };
 
-function loadScriptOnce(url) {
-  return new Promise((resolve, reject) => {
-    const key = `cm:${url}`;
-    let s = document.querySelector(`script[data-key="${key}"]`);
-    if (s) {
-      if (s.dataset.loaded === "1") return resolve();
-      s.addEventListener("load", () => resolve());
-      s.addEventListener("error", reject);
-      return;
+// 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}}",
+  "javascript": "mode/javascript/javascript.min.js?v={{APP_QVER}}",
+
+  // meta / combos
+  "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}}",
+  "properties": "mode/properties/properties.min.js?v={{APP_QVER}}",
+  "sql": "mode/sql/sql.min.js?v={{APP_QVER}}",
+
+  // shells
+  "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}}"
+};
+
+// Mode dependency graph
+const MODE_DEPS = {
+  "htmlmixed": ["xml", "javascript", "css"],
+  "application/x-httpd-php": ["htmlmixed", "text/x-csrc"], // php overlays + clike bits
+  "markdown": ["xml"]
+};
+
+// Map any mime/alias to the key we use in MODE_URL
+function normalizeModeName(modeOption) {
+  const name = typeof modeOption === "string" ? modeOption : (modeOption && modeOption.name);
+  if (!name) return null;
+  if (name === "text/html") return "htmlmixed";          // CodeMirror uses htmlmixed for HTML
+  if (name === "php") return "application/x-httpd-php";  // prefer the full mime
+  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, docsOrigin: null };
+
+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 : []);
+      __ooCaps.docsOrigin = j.docsOrigin || null; // harmless if server doesn't send it
     }
-    s = document.createElement("script");
+  } 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 || ''); }
+
+// ---- script/css single-load with timeout guards ----
+const _loadedScripts = new Set();
+const _loadedCss = new Set();
+let _corePromise = null;
+
+function loadScriptOnce(url, timeoutMs = 12000) {
+  return new Promise((resolve, reject) => {
+    if (_loadedScripts.has(url)) return resolve();
+    const s = document.createElement("script");
+    const timer = setTimeout(() => {
+      try { s.remove(); } catch { }
+      reject(new Error(`Timeout loading: ${url}`));
+    }, timeoutMs);
     s.src = url;
-    s.defer = true;
-    s.dataset.key = key;
-    s.addEventListener("load", () => { s.dataset.loaded = "1"; resolve(); });
-    s.addEventListener("error", reject);
+    s.async = true;
+    s.onload = () => { clearTimeout(timer); _loadedScripts.add(url); resolve(); };
+    s.onerror = () => { clearTimeout(timer); reject(new Error(`Load failed: ${url}`)); };
     document.head.appendChild(s);
   });
 }
 
-async function ensureModeLoaded(modeOption) {
-  if (!window.CodeMirror) return; // CM core must be present
-  const name = typeof modeOption === "string" ? modeOption : (modeOption && modeOption.name);
-  if (!name) return;
-  // Already registered?
-  if ((CodeMirror.modes && CodeMirror.modes[name]) || (CodeMirror.mimeModes && CodeMirror.mimeModes[name])) {
-    return;
-  }
-  const url = MODE_URL[name];
-  if (!url) return; // unknown -> fallback to text/plain
-  // Dependencies (htmlmixed needs xml/css/js; php highlighting with HTML also benefits from htmlmixed)
-  if (name === "htmlmixed") {
-    await Promise.all([
-      ensureModeLoaded("xml"),
-      ensureModeLoaded("css"),
-      ensureModeLoaded("javascript")
-    ]);
-  }
-  if (name === "application/x-httpd-php") {
-    await ensureModeLoaded("htmlmixed");
-  }
-  await loadScriptOnce(CM_CDN + url);
+function loadCssOnce(href) {
+  return new Promise((resolve, reject) => {
+    if (_loadedCss.has(href)) return resolve();
+    const l = document.createElement("link");
+    l.rel = "stylesheet";
+    l.href = href;
+    l.onload = () => { _loadedCss.add(href); resolve(); };
+    l.onerror = () => reject(new Error(`Load failed: ${href}`));
+    document.head.appendChild(l);
+  });
 }
 
+async function ensureCore() {
+  if (_corePromise) return _corePromise;
+  _corePromise = (async () => {
+    // load CSS first to avoid FOUC
+    await loadCssOnce(CORE.css);
+    await loadCssOnce(CORE.themeCss);
+    if (!window.CodeMirror) {
+      await loadScriptOnce(CORE.js);
+    }
+  })();
+  return _corePromise;
+}
+
+async function loadSingleMode(name) {
+  const rel = MODE_URL[name];
+  if (!rel) return;
+  const url = rel.startsWith("http") ? rel : (rel.startsWith("/") ? rel : (CM_BASE + rel));
+  await loadScriptOnce(url);
+}
+
+function isModeRegistered(name) {
+  return !!(
+    (window.CodeMirror?.modes && window.CodeMirror.modes[name]) ||
+    (window.CodeMirror?.mimeModes && window.CodeMirror.mimeModes[name])
+  );
+}
+
+async function ensureModeLoaded(modeOption) {
+  await ensureCore();
+  const name = normalizeModeName(modeOption);
+  if (!name) return;
+  if (isModeRegistered(name)) return;
+  const deps = MODE_DEPS[name] || [];
+  for (const d of deps) {
+    if (!isModeRegistered(d)) await loadSingleMode(d);
+  }
+  await loadSingleMode(name);
+}
+
+// Public helper for callers (we keep your existing function name in use):
+const MODE_LOAD_TIMEOUT_MS = 300; // allow closing immediately; don't wait forever
+// ==== /CodeMirror lazy loader ===============================================
+
+// ---- OO preconnect / prewarm ----
+function injectOOPreconnect(origin) {
+  try {
+    if (!origin || !isAbsoluteHttpUrl(origin)) return;
+    const make = (rel) => { const l = document.createElement('link'); l.rel = rel; l.href = origin; return l; };
+    document.head.appendChild(make('dns-prefetch'));
+    document.head.appendChild(make('preconnect'));
+  } catch { }
+}
+
+async function ensureOnlyOfficeApi(srcFromConfig, originFromConfig) {
+  // Prefer explicit src; else derive from origin; else fall back to window/global or default prefix path
+  let src = srcFromConfig;
+  if (!src) {
+    if (originFromConfig && isAbsoluteHttpUrl(originFromConfig)) {
+      src = originFromConfig.replace(/\/$/, '') + '/web-apps/apps/api/documents/api.js';
+    } else {
+      src = window.ONLYOFFICE_API_SRC || '/onlyoffice/web-apps/apps/api/documents/api.js';
+    }
+  }
+  if (window.DocsAPI && typeof window.DocsAPI.DocEditor === 'function') return;
+  // Try once; if it times out and we derived from origin, fall back to the default prefix path
+  try {
+    console.time('oo:api.js');
+    await loadScriptOnce(src);
+  } catch (e) {
+    if (src !== '/onlyoffice/web-apps/apps/api/documents/api.js') {
+      await loadScriptOnce('/onlyoffice/web-apps/apps/api/documents/api.js');
+    } else {
+      throw e;
+    }
+  } finally {
+    console.timeEnd('oo:api.js');
+  }
+}
+
+// ===== ONLYOFFICE: full-screen modal + warm on every click =====
+const ALWAYS_WARM_OO = true;      // warm EVERY time
+const OO_WARM_MS     = 300;
+
+function ensureOoModalCss() {
+  const prev = document.getElementById('ooEditorModalCss');
+  if (prev) return;
+
+  const style = document.createElement('style');
+  style.id = 'ooEditorModalCss';
+  style.textContent = `
+    #ooEditorModal{
+      --oo-header-h: 40px;
+      --oo-header-pad-v: 12px;
+      --oo-header-pad-h: 18px;
+      --oo-logo-h: 26px; /* tweak logo size */
+    }
+
+    #ooEditorModal{
+      position:fixed!important; inset:0!important; margin:0!important; padding:0!important;
+      display:flex!important; flex-direction:column!important; z-index:2147483646!important;
+      background:var(--oo-modal-bg,#111)!important;
+    }
+
+    /* Header: logo (left) + title (fill) + absolute close (right) */
+    #ooEditorModal .editor-header{
+      position:relative; display:flex; align-items:center; gap:12px;
+      min-height:var(--oo-header-h);
+      padding:var(--oo-header-pad-v) var(--oo-header-pad-h);
+      padding-right: calc(var(--oo-header-pad-h) + 64px); /* room for 32px round close */
+      border-bottom:1px solid rgba(0,0,0,.15);
+      box-sizing:border-box;
+    }
+
+    #ooEditorModal .editor-logo{
+      height:var(--oo-logo-h); width:auto; flex:0 0 auto;
+      display:block; user-select:none; -webkit-user-drag:none;
+    }
+
+    #ooEditorModal .editor-title{
+      margin:0; font-size:18px; font-weight:700; line-height:1.2;
+      overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
+      flex:1 1 auto;
+    }
+
+    /* Your scoped close button style */
+    #ooEditorModal .editor-close-btn{
+      position:absolute; top:5px; right:10px;
+      display:flex; justify-content:center; align-items:center;
+      font-size:20px; font-weight:bold; cursor:pointer; z-index:1000;
+      width:32px; height:32px; border-radius:50%; text-align:center; line-height:30px;
+      color:#ff4d4d; background-color:rgba(255,255,255,.9); border:2px solid transparent;
+      transition:all .3s ease-in-out;
+    }
+    #ooEditorModal .editor-close-btn:hover{
+      color:#fff; background-color:#ff4d4d;
+      box-shadow:0 0 6px rgba(255,77,77,.8); transform:scale(1.05);
+    }
+    .dark-mode #ooEditorModal .editor-close-btn{ background-color:rgba(0,0,0,.7); color:#ff6666; }
+    .dark-mode #ooEditorModal .editor-close-btn:hover{ background-color:#ff6666; color:#000; }
+
+    #ooEditorModal .editor-body{
+      position:relative!important; flex:1 1 auto!important; min-height:0!important; overflow:hidden!important;
+    }
+    #ooEditorModal #oo-editor{ width:100%!important; height:100%!important; }
+
+    #ooEditorModal .oo-warm-overlay{
+      position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
+      background:rgba(0,0,0,.14); z-index:5; font-weight:600; font-size:14px;
+    }
+
+    html.oo-lock, body.oo-lock{ height:100%!important; overflow:hidden!important; }
+  `;
+  document.head.appendChild(style);
+}
+
+// Theme-aware background so there’s no white/gray edge
+function applyModalBg(modal){
+  const isDark = document.documentElement.classList.contains('dark-mode')
+    || /^(1|true)$/i.test(localStorage.getItem('darkMode') || '');
+  const cs = getComputedStyle(document.documentElement);
+  const bg = (cs.getPropertyValue('--bg-color') || cs.getPropertyValue('--pre-bg') || '').trim()
+           || (isDark ? '#121212' : '#ffffff');
+  modal.style.setProperty('--oo-modal-bg', bg);
+}
+
+function lockPageScroll(on){
+  [document.documentElement, document.body].forEach(el => el.classList.toggle('oo-lock', !!on));
+}
+
+function ensureOoFullscreenModal(){
+  ensureOoModalCss();
+  let modal = document.getElementById('ooEditorModal');
+  if (!modal){
+    modal = document.createElement('div');
+    modal.id = 'ooEditorModal';
+    modal.innerHTML = `
+      <div class="editor-header">
+        <img class="editor-logo" src="/assets/logo.svg" alt="FileRise logo" />
+        <h3 class="editor-title"></h3>
+        <button id="closeEditorX" class="editor-close-btn" aria-label="${t("close") || "Close"}">&times;</button>
+      </div>
+      <div class="editor-body">
+        <div id="oo-editor"></div>
+      </div>
+    `;
+    document.body.appendChild(modal);
+  } else {
+    modal.querySelector('.editor-body').innerHTML = `<div id="oo-editor"></div>`;
+    // ensure logo exists and is placed before title when reusing
+    const header = modal.querySelector('.editor-header');
+    if (!header.querySelector('.editor-logo')){
+      const img = document.createElement('img');
+      img.className = 'editor-logo';
+      img.src = '/assets/logo.svg';
+      img.alt = 'FileRise logo';
+      header.insertBefore(img, header.querySelector('.editor-title'));
+    } else {
+      // make sure order is logo -> title
+      const logo = header.querySelector('.editor-logo');
+      const title = header.querySelector('.editor-title');
+      if (logo.nextElementSibling !== title){
+        header.insertBefore(logo, title);
+      }
+    }
+  }
+  applyModalBg(modal);
+  modal.style.display = 'flex';
+  modal.focus();
+  lockPageScroll(true);
+  return modal;
+}
+
+// Overlay lives INSIDE the modal body
+function setOoBusy(modal, on, label='Preparing editor…'){
+  if (!modal) return;
+  const body = modal.querySelector('.editor-body');
+  let ov = body.querySelector('.oo-warm-overlay');
+  if (on){
+    if (!ov){
+      ov = document.createElement('div');
+      ov.className = 'oo-warm-overlay';
+      ov.textContent = label;
+      body.appendChild(ov);
+    }
+  } else if (ov){
+    ov.remove();
+  }
+}
+
+// Hidden warm-up DocEditor (creates DS session/cache) then destroys
+async function warmDocServerOnce(cfg){
+  let host = null, warmEditor = null;
+  try{
+    host = document.createElement('div');
+    host.id = 'oo-warm-' + Math.random().toString(36).slice(2);
+    Object.assign(host.style, {
+      position:'absolute', left:'-99999px', top:'0', width:'2px', height:'2px', overflow:'hidden'
+    });
+    document.body.appendChild(host);
+
+    const warmCfg = JSON.parse(JSON.stringify(cfg));
+    warmCfg.events = Object.assign({}, warmCfg.events, { onAppReady(){}, onDocumentReady(){} });
+
+    warmEditor = new window.DocsAPI.DocEditor(host.id, warmCfg);
+    await new Promise(res => setTimeout(res, OO_WARM_MS));
+  }catch{} finally{
+    try{ warmEditor?.destroyEditor?.(); }catch{}
+    try{ host?.remove(); }catch{}
+  }
+}
+
+// Full-screen OO open with hidden warm-up EVERY click, then real editor
+async function openOnlyOffice(fileName, folder){
+  let editor = null;
+  let removeThemeListener = () => {};
+  let cfg = null;
+  let userClosed = false;
+
+  // Build our full-screen modal
+  const modal = ensureOoFullscreenModal();
+  const titleEl = modal.querySelector('.editor-title');
+  if (titleEl) titleEl.innerHTML = `${t("editing")}: ${escapeHTML(fileName)}`;
+
+  const destroy = (removeModal = true) => {
+    try { editor?.destroyEditor?.(); } catch {}
+    try { removeThemeListener(); } catch {}
+    if (removeModal) { try { modal.remove(); } catch {} }
+    lockPageScroll(false);
+  };
+  const onClose = () => { userClosed = true; destroy(true); };
+
+  modal.querySelector('#closeEditorX')?.addEventListener('click', onClose);
+  modal.addEventListener('keydown', (e) => { if (e.key === 'Escape') onClose(); });
+
+  try{
+    // 1) Fetch config
+    const url = `/api/onlyoffice/config.php?folder=${encodeURIComponent(folder)}&file=${encodeURIComponent(fileName)}`;
+    const resp = await fetch(url, { credentials: 'include' });
+    const text = await resp.text();
+
+    try { cfg = JSON.parse(text); } catch {
+      throw new Error(`ONLYOFFICE config parse failed (HTTP ${resp.status}). First 120 chars: ${text.slice(0,120)}`);
+    }
+    if (!resp.ok) throw new Error(cfg?.error || `ONLYOFFICE config HTTP ${resp.status}`);
+
+    // 2) Preconnect + load DocsAPI
+    injectOOPreconnect(cfg.documentServerOrigin || null);
+    await ensureOnlyOfficeApi(cfg.docs_api_js, cfg.documentServerOrigin);
+
+    // 3) Theme + base events
+    const isDark = document.documentElement.classList.contains('dark-mode')
+      || /^(1|true)$/i.test(localStorage.getItem('darkMode') || '');
+    cfg.events = (cfg.events && typeof cfg.events === 'object') ? cfg.events : {};
+    cfg.editorConfig = cfg.editorConfig || {};
+    cfg.editorConfig.customization = Object.assign(
+      {}, cfg.editorConfig.customization, { uiTheme: isDark ? 'theme-dark' : 'theme-light' }
+    );
+    cfg.events.onRequestClose = () => onClose();
+
+    // 4) Warm EVERY click 
+    if (ALWAYS_WARM_OO && !userClosed){
+      setOoBusy(modal, true);          // overlay INSIDE modal body
+      await warmDocServerOnce(cfg);
+      if (userClosed) return;
+    }
+
+    // 5) Launch visible editor in full-screen modal
+    cfg.events.onDocumentReady = () => { setOoBusy(modal, false); };
+    editor = new window.DocsAPI.DocEditor('oo-editor', cfg);
+
+    // Live theme switching + keep modal bg in sync
+    const darkToggle = document.getElementById('darkModeToggle');
+    const onDarkToggle = () => {
+      const nowDark = document.documentElement.classList.contains('dark-mode');
+      if (editor && typeof editor.setTheme === 'function') {
+        editor.setTheme(nowDark ? 'dark' : 'light');
+      }
+      applyModalBg(modal);
+    };
+    if (darkToggle) {
+      darkToggle.addEventListener('click', onDarkToggle);
+      removeThemeListener = () => darkToggle.removeEventListener('click', onDarkToggle);
+    }
+  }catch(e){
+    console.error('[ONLYOFFICE] failed to open:', e);
+    showToast((e && e.message) ? e.message : 'Unable to open ONLYOFFICE editor.');
+    destroy(true);
+  }
+}
+// ---- /ONLYOFFICE integration ----------------------------------------------
+
+// ==== Editor (CodeMirror) path =============================================
+
 function getModeForFile(fileName) {
   const dot = fileName.lastIndexOf(".");
   const ext = dot >= 0 ? fileName.slice(dot + 1).toLowerCase() : "";
 
   switch (ext) {
-    // markup
     case "html":
-    case "htm":
-      return "text/html";                 // ensureModeLoaded will map to htmlmixed
-    case "xml":
-      return "xml";
+    case "htm": return "text/html";
+    case "xml": return "xml";
     case "md":
-    case "markdown":
-      return "markdown";
+    case "markdown": return "markdown";
     case "yml":
-    case "yaml":
-      return "yaml";
-
-    // styles & scripts
-    case "css":
-      return "css";
-    case "js":
-      return "javascript";
-    case "json":
-      return { name: "javascript", json: true };
-
-    // server / langs
-    case "php":
-      return "application/x-httpd-php";
-    case "py":
-      return "python";
-    case "sql":
-      return "sql";
+    case "yaml": return "yaml";
+    case "css": return "css";
+    case "js": return "javascript";
+    case "json": return { name: "javascript", json: true };
+    case "php": return "application/x-httpd-php";
+    case "py": return "python";
+    case "sql": return "sql";
     case "sh":
     case "bash":
     case "zsh":
-    case "bat":
-      return "shell";
-
-    // config-y files
+    case "bat": return "shell";
     case "ini":
     case "conf":
     case "config":
-    case "properties":
-      return "properties";
-
-    // C-family / JVM
+    case "properties": return "properties";
     case "c":
-    case "h":
-      return "text/x-csrc";
+    case "h": return "text/x-csrc";
     case "cpp":
     case "cxx":
     case "hpp":
     case "hh":
-    case "hxx":
-      return "text/x-c++src";
-    case "java":
-      return "text/x-java";
-    case "cs":
-      return "text/x-csharp";
+    case "hxx": return "text/x-c++src";
+    case "java": return "text/x-java";
+    case "cs": return "text/x-csharp";
     case "kt":
-    case "kts":
-      return "text/x-kotlin";
-
-    default:
-      return "text/plain";
+    case "kts": return "text/x-kotlin";
+    default: return "text/plain";
   }
 }
 export { getModeForFile };
@@ -158,138 +514,192 @@ export { adjustEditorSize };
 
 function observeModalResize(modal) {
   if (!modal) return;
-  const resizeObserver = new ResizeObserver(() => {
-    adjustEditorSize();
-  });
+  const resizeObserver = new ResizeObserver(() => adjustEditorSize());
   resizeObserver.observe(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();
-  }
+  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");
+      if (!response.ok) throw new Error("HTTP error! Status: " + response.status);
+      const lenHeader = response.headers.get("content-length") ?? response.headers.get("Content-Length");
       const sizeBytes = lenHeader ? parseInt(lenHeader, 10) : null;
       return Promise.all([response.text(), sizeBytes]);
     })
     .then(([content, sizeBytes]) => {
-      const forcePlainText =
-        sizeBytes !== null && sizeBytes > EDITOR_PLAIN_THRESHOLD;
+      const forcePlainText = sizeBytes !== null && sizeBytes > EDITOR_PLAIN_THRESHOLD;
 
+      // --- Build modal immediately and wire close controls BEFORE any async loads ---
       const modal = document.createElement("div");
       modal.id = "editorContainer";
       modal.classList.add("modal", "editor-modal");
+      modal.setAttribute("tabindex", "-1"); // for Escape handling
       modal.innerHTML = `
-      <div class="editor-header">
-        <h3 class="editor-title">${t("editing")}: ${escapeHTML(fileName)}${
-          forcePlainText ? " <span style='font-size:.8em;opacity:.7'>(plain text mode)</span>" : ""
-        }</h3>
-        <div class="editor-controls">
-           <button id="decreaseFont" class="btn btn-sm btn-secondary">${t("decrease_font")}</button>
-           <button id="increaseFont" class="btn btn-sm btn-secondary">${t("increase_font")}</button>
+        <div class="editor-header">
+          <h3 class="editor-title">
+            ${t("editing")}: ${escapeHTML(fileName)}
+            ${forcePlainText ? " <span style='font-size:.8em;opacity:.7'>(plain text mode)</span>" : ""}
+          </h3>
+          <div class="editor-controls">
+            <button id="decreaseFont" class="btn btn-sm btn-secondary">${t("decrease_font")}</button>
+            <button id="increaseFont" class="btn btn-sm btn-secondary">${t("increase_font")}</button>
+          </div>
+          <button id="closeEditorX" class="editor-close-btn" aria-label="${t("close")}">&times;</button>
         </div>
-        <button id="closeEditorX" class="editor-close-btn">&times;</button>
-      </div>
-      <textarea id="fileEditor" class="editor-textarea">${escapeHTML(content)}</textarea>
-      <div class="editor-footer">
-        <button id="saveBtn" class="btn btn-primary">${t("save")}</button>
-        <button id="closeBtn" class="btn btn-secondary">${t("close")}</button>
-      </div>
-    `;
+        <textarea id="fileEditor" class="editor-textarea">${escapeHTML(content)}</textarea>
+        <div class="editor-footer">
+          <button id="saveBtn" class="btn btn-primary" data-default disabled>${t("save")} </button>
+          <button id="closeBtn" class="btn btn-secondary">${t("close")}</button>
+        </div>
+      `;
       document.body.appendChild(modal);
       modal.style.display = "block";
+      modal.focus();
 
-      const isDarkMode = document.body.classList.contains("dark-mode");
-      const theme = isDarkMode ? "material-darker" : "default";
-
-      // choose mode + lighter settings for large files
-      const mode = forcePlainText ? "text/plain" : getModeForFile(fileName);
-      const cmOptions = {
-        lineNumbers: !forcePlainText,
-        mode: mode,
-        theme: theme,
-        viewportMargin: forcePlainText ? 20 : Infinity,
-        lineWrapping: false,
+      let canceled = false;
+      const doClose = () => {
+        canceled = true;
+        window.currentEditor = null;
+        modal.remove();
       };
 
-      // ✅ LOAD MODE FIRST, THEN INSTANTIATE CODEMIRROR
-      ensureModeLoaded(mode).finally(() => {
-        const editor = CodeMirror.fromTextArea(
+      // Wire close actions right away
+      modal.addEventListener("keydown", (e) => { if (e.key === "Escape") doClose(); });
+      document.getElementById("closeEditorX").addEventListener("click", doClose);
+      document.getElementById("closeBtn").addEventListener("click", doClose);
+
+      // Keep buttons responsive even before editor exists
+      const decBtn = document.getElementById("decreaseFont");
+      const incBtn = document.getElementById("increaseFont");
+      decBtn.addEventListener("click", () => { });
+      incBtn.addEventListener("click", () => { });
+
+      // Theme + mode selection
+      const isDarkMode = document.body.classList.contains("dark-mode");
+      const theme = isDarkMode ? "material-darker" : "default";
+      const desiredMode = forcePlainText ? "text/plain" : getModeForFile(fileName);
+
+      // Start core+mode loading (don’t block closing)
+      const modePromise = (async () => {
+        await ensureCore();                 // load CM core + CSS
+        if (!forcePlainText) {
+          await ensureModeLoaded(desiredMode); // then load the needed mode + deps
+        }
+      })();
+
+      // Wait up to MODE_LOAD_TIMEOUT_MS; then proceed with whatever is available
+      const timeout = new Promise((res) => setTimeout(res, MODE_LOAD_TIMEOUT_MS));
+
+      Promise.race([modePromise, timeout]).then(() => {
+        if (canceled) return;
+
+        if (!window.CodeMirror) {
+          // Core not present: keep plain <textarea>; enable Save and bail gracefully
+          document.getElementById("saveBtn").disabled = false;
+          observeModalResize(modal);
+          return;
+        }
+
+        const normName = normalizeModeName(desiredMode) || "text/plain";
+        const initialMode = (forcePlainText || !isModeRegistered(normName)) ? "text/plain" : desiredMode;
+
+        const cm = window.CodeMirror.fromTextArea(
           document.getElementById("fileEditor"),
-          cmOptions
+          {
+            lineNumbers: !forcePlainText,
+            mode: initialMode,
+            theme,
+            viewportMargin: forcePlainText ? 20 : Infinity,
+            lineWrapping: false
+          }
         );
+        window.currentEditor = cm;
 
-        window.currentEditor = editor;
-
-        setTimeout(() => {
-          adjustEditorSize();
-        }, 50);
-
+        setTimeout(adjustEditorSize, 50);
         observeModalResize(modal);
 
+        // Font controls (now that editor exists)
         let currentFontSize = 14;
-        editor.getWrapperElement().style.fontSize = currentFontSize + "px";
-        editor.refresh();
+        const wrapper = cm.getWrapperElement();
+        wrapper.style.fontSize = currentFontSize + "px";
+        cm.refresh();
 
-        document.getElementById("closeEditorX").addEventListener("click", function () {
-          modal.remove();
-        });
-
-        document.getElementById("decreaseFont").addEventListener("click", function () {
+        decBtn.addEventListener("click", function () {
           currentFontSize = Math.max(8, currentFontSize - 2);
-          editor.getWrapperElement().style.fontSize = currentFontSize + "px";
-          editor.refresh();
+          wrapper.style.fontSize = currentFontSize + "px";
+          cm.refresh();
         });
-
-        document.getElementById("increaseFont").addEventListener("click", function () {
+        incBtn.addEventListener("click", function () {
           currentFontSize = Math.min(32, currentFontSize + 2);
-          editor.getWrapperElement().style.fontSize = currentFontSize + "px";
-          editor.refresh();
+          wrapper.style.fontSize = currentFontSize + "px";
+          cm.refresh();
         });
 
-        document.getElementById("saveBtn").addEventListener("click", function () {
+        // Save
+        const saveBtn = document.getElementById("saveBtn");
+        saveBtn.disabled = false;
+        saveBtn.addEventListener("click", function () {
           saveFile(fileName, folderUsed);
         });
 
-        document.getElementById("closeBtn").addEventListener("click", function () {
-          modal.remove();
-        });
-
+        // Theme switch
         function updateEditorTheme() {
           const isDark = document.body.classList.contains("dark-mode");
-          editor.setOption("theme", isDark ? "material-darker" : "default");
+          cm.setOption("theme", isDark ? "material-darker" : "default");
         }
         const toggle = document.getElementById("darkModeToggle");
         if (toggle) toggle.addEventListener("click", updateEditorTheme);
+
+        // If we started in plain text due to timeout, flip to the real mode once it arrives
+        modePromise.then(() => {
+          if (!canceled && !forcePlainText) {
+            const nn = normalizeModeName(desiredMode);
+            if (nn && isModeRegistered(nn)) {
+              cm.setOption("mode", desiredMode);
+            }
+          }
+        }).catch(() => { /* stay in plain text */ });
       });
     })
     .catch(error => {
@@ -298,7 +708,6 @@ export function editFile(fileName, folder) {
     });
 }
 
-
 export function saveFile(fileName, folder) {
   const editor = window.currentEditor;
   if (!editor) {

public/js/fileManager.js

@@ -1,10 +1,10 @@
 // fileManager.js
-import './fileListView.js';
-import './filePreview.js';
-import './fileEditor.js';
-import './fileDragDrop.js';
-import './fileMenu.js';
-import { initFileActions } from './fileActions.js';
+import './fileListView.js?v={{APP_QVER}}';
+import './filePreview.js?v={{APP_QVER}}';
+import './fileEditor.js?v={{APP_QVER}}';
+import './fileDragDrop.js?v={{APP_QVER}}';
+import './fileMenu.js?v={{APP_QVER}}';
+import { initFileActions } from './fileActions.js?v={{APP_QVER}}';
 
 // Initialize file action buttons.
 document.addEventListener("DOMContentLoaded", function () {
@@ -14,7 +14,7 @@ document.addEventListener("DOMContentLoaded", function () {
 // Attach folder drag-and-drop support for folder tree nodes.
 document.addEventListener("DOMContentLoaded", function () {
   document.querySelectorAll(".folder-option").forEach(el => {
-    import('./fileDragDrop.js').then(module => {
+    import('./fileDragDrop.js?v={{APP_QVER}}').then(module => {
       el.addEventListener("dragover", module.folderDragOverHandler);
       el.addEventListener("dragleave", module.folderDragLeaveHandler);
       el.addEventListener("drop", module.folderDropHandler);
@@ -32,7 +32,7 @@ document.addEventListener("keydown", function(e) {
     const selectedCheckboxes = document.querySelectorAll("#fileList .file-checkbox:checked");
     if (selectedCheckboxes.length > 0) {
       e.preventDefault();
-      import('./fileActions.js').then(module => {
+      import('./fileActions.js?v={{APP_QVER}}').then(module => {
         module.handleDeleteSelected(new Event("click"));
       });
     }

public/js/fileMenu.js

@@ -1,157 +1,246 @@
 // fileMenu.js
-import { updateRowHighlight, showToast } from './domUtils.js';
-import { handleDeleteSelected, handleCopySelected, handleMoveSelected, handleDownloadZipSelected, handleExtractZipSelected, renameFile, openCreateFileModal } from './fileActions.js';
-import { previewFile } from './filePreview.js';
-import { editFile } from './fileEditor.js';
-import { canEditFile, fileData } from './fileListView.js';
-import { openTagModal, openMultiTagModal } from './fileTags.js';
-import { t } from './i18n.js';
+import { t } from './i18n.js?v={{APP_QVER}}';
+import { updateRowHighlight } from './domUtils.js?v={{APP_QVER}}';
+import {
+  handleDeleteSelected, handleCopySelected, handleMoveSelected,
+  handleDownloadZipSelected, handleExtractZipSelected,
+  renameFile, openCreateFileModal
+} from './fileActions.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}}';
+import { escapeHTML } from './domUtils.js?v={{APP_QVER}}';
 
-export function showFileContextMenu(x, y, menuItems) {
-  let menu = document.getElementById("fileContextMenu");
-  if (!menu) {
-    menu = document.createElement("div");
-    menu.id = "fileContextMenu";
-    menu.style.position = "fixed";
-    menu.style.backgroundColor = "#fff";
-    menu.style.border = "1px solid #ccc";
-    menu.style.boxShadow = "2px 2px 6px rgba(0,0,0,0.2)";
-    menu.style.zIndex = "9999";
-    menu.style.padding = "5px 0";
-    menu.style.minWidth = "150px";
-    document.body.appendChild(menu);
-  }
-  menu.innerHTML = "";
-  menuItems.forEach(item => {
-    let menuItem = document.createElement("div");
-    menuItem.textContent = item.label;
-    menuItem.style.padding = "5px 15px";
-    menuItem.style.cursor = "pointer";
-    menuItem.addEventListener("mouseover", () => {
-      menuItem.style.backgroundColor = document.body.classList.contains("dark-mode") ? "#444" : "#f0f0f0";
-    });
-    menuItem.addEventListener("mouseout", () => {
-      menuItem.style.backgroundColor = "";
-    });
-    menuItem.addEventListener("click", () => {
-      item.action();
-      hideFileContextMenu();
-    });
-    menu.appendChild(menuItem);
+const MENU_ID = 'fileContextMenu';
+
+function qMenu() { return document.getElementById(MENU_ID); }
+function setText(btn, key) { btn.querySelector('span').textContent = t(key); }
+
+// One-time: localize labels
+function localizeMenu() {
+  const m = qMenu(); if (!m) return;
+  const map = {
+    'create_file': 'create_file',
+    'delete_selected': 'delete_selected',
+    'copy_selected': 'copy_selected',
+    'move_selected': 'move_selected',
+    'download_zip': 'download_zip',
+    'extract_zip': 'extract_zip',
+    'tag_selected': 'tag_selected',
+    'preview': 'preview',
+    'edit': 'edit',
+    'rename': 'rename',
+    'tag_file': 'tag_file'
+  };
+  Object.entries(map).forEach(([action, key]) => {
+    const el = m.querySelector(`.mi[data-action="${action}"]`);
+    if (el) setText(el, key);
   });
-  
-  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) {
-    let newTop = viewportHeight - menuRect.height;
-    if (newTop < 0) newTop = 0;
-    menu.style.top = newTop + "px";
+}
+
+// Show/hide items based on selection state
+function configureVisibility({ any, one, many, anyZip, canEdit }) {
+  const m = qMenu(); if (!m) return;
+
+  const show = (sel, on) => sel.forEach(el => el.hidden = !on);
+
+  show(m.querySelectorAll('[data-when="always"]'), true);
+  show(m.querySelectorAll('[data-when="any"]'),   any);
+  show(m.querySelectorAll('[data-when="one"]'),   one);
+  show(m.querySelectorAll('[data-when="many"]'),  many);
+  show(m.querySelectorAll('[data-when="zip"]'),   anyZip);
+  show(m.querySelectorAll('[data-when="can-edit"]'), canEdit);
+
+  // Hide separators at edges or duplicates
+  cleanupSeparators(m);
+}
+
+function cleanupSeparators(menu) {
+  const kids = Array.from(menu.children);
+  let lastWasSep = true; // leading seps hidden
+  kids.forEach((el, i) => {
+    if (el.classList.contains('sep')) {
+      const hide = lastWasSep || (i === kids.length - 1);
+      el.hidden = hide || el.hidden; // keep hidden if already hidden by state
+      lastWasSep = !el.hidden;
+    } else if (!el.hidden) {
+      lastWasSep = false;
+    }
+  });
+}
+
+// Position menu within viewport
+function placeMenu(x, y) {
+  const m = qMenu(); if (!m) return;
+
+  // make visible to measure
+  m.hidden = false;
+  m.style.left = '0px';
+  m.style.top  = '0px';
+
+  // force a max-height via CSS fallback if styles didn't load yet
+  const pad = 8;
+  const vh = window.innerHeight, vw = window.innerWidth;
+  const mh = Math.min(vh - pad*2, 600); // JS fallback limit
+  m.style.maxHeight = mh + 'px';
+
+  // measure now that it's flow-visible
+  const r0 = m.getBoundingClientRect();
+  let nx = x, ny = y;
+
+  // If it would overflow right, shift left
+  if (nx + r0.width > vw - pad) nx = Math.max(pad, vw - r0.width - pad);
+  // If it would overflow bottom, try placing it above the cursor
+  if (ny + r0.height > vh - pad) {
+    const above = y - r0.height - 4;
+    ny = (above >= pad) ? above : Math.max(pad, vh - r0.height - pad);
   }
+
+  // Guard top/left minimums
+  nx = Math.max(pad, nx);
+  ny = Math.max(pad, ny);
+
+  m.style.left = `${nx}px`;
+  m.style.top  = `${ny}px`;
 }
 
 export function hideFileContextMenu() {
-  const menu = document.getElementById("fileContextMenu");
-  if (menu) {
-    menu.style.display = "none";
-  }
+  const m = qMenu();
+  if (m) m.hidden = true;
+}
+
+function currentSelection() {
+  const checks = Array.from(document.querySelectorAll('#fileList .file-checkbox'));
+  // checkbox values are ESCAPED names (because buildFileTableRow used safeFileName)
+  const selectedEsc = checks.filter(cb => cb.checked).map(cb => cb.value);
+  const escSet = new Set(selectedEsc);
+
+  // map back to real file objects by comparing escaped(f.name)
+  const files = fileData.filter(f => escSet.has(escapeHTML(f.name)));
+
+  const any  = files.length > 0;
+  const one  = files.length === 1;
+  const many = files.length > 1;
+  const anyZip = files.some(f => f.name.toLowerCase().endsWith('.zip'));
+  const file = one ? files[0] : null;
+  const canEditFlag = !!(file && canEditFile(file.name));
+
+  // also return the raw names if any caller needs them
+  return {
+    files,                   // <— real file objects for modals
+    all: files.map(f => f.name),
+    any, one, many, anyZip,
+    file,
+    canEdit: canEditFlag
+  };
 }
 
 export function fileListContextMenuHandler(e) {
   e.preventDefault();
-  
-  let row = e.target.closest("tr");
+
+  // Check row if needed
+  const row = e.target.closest('tr');
   if (row) {
-    const checkbox = row.querySelector(".file-checkbox");
-    if (checkbox && !checkbox.checked) {
-      checkbox.checked = true;
-      updateRowHighlight(checkbox);
+    const cb = row.querySelector('.file-checkbox');
+    if (cb && !cb.checked) {
+      cb.checked = true;
+      updateRowHighlight(cb);
     }
   }
-  
-  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")); } },
-    { label: t("copy_selected"), action: () => { handleCopySelected(new Event("click")); } },
-    { 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"),
-      action: () => {
-        const files = fileData.filter(f => selected.includes(f.name));
-        openMultiTagModal(files);
-      }
-    });
-  }
-  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);
-      }
-    });
-    
-    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);
+
+  const state = currentSelection();
+  configureVisibility(state);
+  placeMenu(e.clientX, e.clientY);
+
+  // Stash for click handlers
+  window.__filr_ctx_state = state;
 }
 
+// --- add near top ---
+let __ctxBoundOnce = false;
+
+function docClickClose(ev) {
+  const m = qMenu(); if (!m || m.hidden) return;
+  if (!m.contains(ev.target)) hideFileContextMenu();
+}
+function docKeyClose(ev) {
+  if (ev.key === 'Escape') hideFileContextMenu();
+}
+
+function menuClickDelegate(ev) {
+  const btn = ev.target.closest('.mi[data-action]');
+  if (!btn) return;
+  ev.stopPropagation();
+
+  // CLOSE MENU FIRST so it can’t overlay the modal
+  hideFileContextMenu();
+
+  const action = btn.dataset.action;
+  const s = window.__filr_ctx_state || currentSelection();
+  const folder = window.currentFolder || 'root';
+
+  switch (action) {
+    case 'create_file': openCreateFileModal(); break;
+    case 'delete_selected': handleDeleteSelected(new Event('click')); break;
+    case 'copy_selected':   handleCopySelected(new Event('click'));   break;
+    case 'move_selected':   handleMoveSelected(new Event('click'));   break;
+    case 'download_zip':    handleDownloadZipSelected(new Event('click')); break;
+    case 'extract_zip':     handleExtractZipSelected(new Event('click'));  break;
+
+    case 'tag_selected':
+      openMultiTagModal(s.files);  // s.files are the real file objects
+      break;
+
+    case 'preview':
+      if (s.file) previewFile(buildPreviewUrl(folder, s.file.name), s.file.name);
+      break;
+
+    case 'edit':
+      if (s.file && s.canEdit) editFile(s.file.name, folder);
+      break;
+
+    case 'rename':
+      if (s.file) renameFile(s.file.name, folder);
+      break;
+
+    case 'tag_file':
+      if (s.file) openTagModal(s.file);
+      break;
+  }
+}
+
+// keep your renderFileTable wrapper as-is
+
 export function bindFileListContextMenu() {
-  const fileListContainer = document.getElementById("fileList");
-  if (fileListContainer) {
-    fileListContainer.oncontextmenu = fileListContextMenuHandler;
+  const container = document.getElementById('fileList');
+  const menu = qMenu();
+  if (!container || !menu) return;
+
+  localizeMenu();
+
+  // Open on right click in the table
+  container.oncontextmenu = fileListContextMenuHandler;
+
+  // Bind once
+  if (!__ctxBoundOnce) {
+    document.addEventListener('click', docClickClose);
+    document.addEventListener('keydown', docKeyClose);
+    menu.addEventListener('click', menuClickDelegate); // handles actions
+    __ctxBoundOnce = true;
   }
 }
 
-document.addEventListener("click", function(e) {
-  const menu = document.getElementById("fileContextMenu");
-  if (menu && menu.style.display === "block") {
-    hideFileContextMenu();
+// Rebind after table render (keeps your original behavior)
+(function () {
+  const orig = window.renderFileTable;
+  if (typeof orig === 'function') {
+    window.renderFileTable = function (folder) {
+      orig(folder);
+      bindFileListContextMenu();
+    };
+  } else {
+    // If not present yet, bind once DOM is ready
+    document.addEventListener('DOMContentLoaded', bindFileListContextMenu, { once: true });
   }
-});
-
-// Rebind context menu after file table render.
-(function() {
-  const originalRenderFileTable = window.renderFileTable;
-  window.renderFileTable = function(folder) {
-    originalRenderFileTable(folder);
-    bindFileListContextMenu();
-  };
 })();

public/js/filePreview.js

@@ -1,14 +1,19 @@
 // filePreview.js
-import { escapeHTML, showToast } from './domUtils.js';
-import { fileData } from './fileListView.js';
-import { t } from './i18n.js';
+import { escapeHTML, showToast } from './domUtils.js?v={{APP_QVER}}';
+import { t } from './i18n.js?v={{APP_QVER}}';
+import { fileData, setFileProgressBadge, setFileWatchedBadge } from './fileListView.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()}`;
+}
+
+/* -------------------------------- Share modal (existing) -------------------------------- */
 export function openShareModal(file, folder) {
-  // Remove any existing modal
   const existing = document.getElementById("shareModal");
   if (existing) existing.remove();
 
-  // Build the modal
   const modal = document.createElement("div");
   modal.id = "shareModal";
   modal.classList.add("modal");
@@ -45,18 +50,9 @@ export function openShareModal(file, folder) {
         </div>
 
         <p style="margin-top:15px;">${t("password_optional")}</p>
-        <input
-          type="text"
-          id="sharePassword"
-          placeholder="${t("password_optional")}"
-          style="width:100%;padding:5px;"
-        />
+        <input type="text" id="sharePassword" placeholder="${t("password_optional")}" style="width:100%;padding:5px;"/>
 
-        <button
-          id="generateShareLinkBtn"
-          class="btn btn-primary"
-          style="margin-top:15px;"
-        >
+        <button id="generateShareLinkBtn" class="btn btn-primary" style="margin-top:15px;">
           ${t("generate_share_link")}
         </button>
 
@@ -73,48 +69,32 @@ export function openShareModal(file, folder) {
   document.body.appendChild(modal);
   modal.style.display = "block";
 
-  // Close handler
-  document.getElementById("closeShareModal")
-    .addEventListener("click", () => modal.remove());
+  document.getElementById("closeShareModal").addEventListener("click", () => modal.remove());
+  document.getElementById("shareExpiration").addEventListener("change", e => {
+    const container = document.getElementById("customExpirationContainer");
+    container.style.display = e.target.value === "custom" ? "block" : "none";
+  });
 
-  // Show/hide custom-duration inputs
-  document.getElementById("shareExpiration")
-    .addEventListener("change", e => {
-      const container = document.getElementById("customExpirationContainer");
-      container.style.display = e.target.value === "custom" ? "block" : "none";
-    });
+  document.getElementById("generateShareLinkBtn").addEventListener("click", () => {
+    const sel = document.getElementById("shareExpiration");
+    let value, unit;
 
-  // Generate share link
-  document.getElementById("generateShareLinkBtn")
-    .addEventListener("click", () => {
-      const sel = document.getElementById("shareExpiration");
-      let value, unit;
+    if (sel.value === "custom") {
+      value = parseInt(document.getElementById("customExpirationValue").value, 10);
+      unit = document.getElementById("customExpirationUnit").value;
+    } else {
+      value = parseInt(sel.value, 10);
+      unit = "minutes";
+    }
 
-      if (sel.value === "custom") {
-        value = parseInt(document.getElementById("customExpirationValue").value, 10);
-        unit  = document.getElementById("customExpirationUnit").value;
-      } else {
-        value = parseInt(sel.value, 10);
-        unit  = "minutes";
-      }
+    const password = document.getElementById("sharePassword").value;
 
-      const password = document.getElementById("sharePassword").value;
-
-      fetch("/api/file/createShareLink.php", {
-        method: "POST",
-        credentials: "include",
-        headers: {
-          "Content-Type": "application/json",
-          "X-CSRF-Token": window.csrfToken
-        },
-        body: JSON.stringify({
-          folder,
-          file: file.name,
-          expirationValue: value,
-          expirationUnit: unit,
-          password
-        })
-      })
+    fetch("/api/file/createShareLink.php", {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+      body: JSON.stringify({ folder, file: file.name, expirationValue: value, expirationUnit: unit, password })
+    })
       .then(res => res.json())
       .then(data => {
         if (data.token) {
@@ -122,349 +102,562 @@ export function openShareModal(file, folder) {
           document.getElementById("shareLinkInput").value = url;
           document.getElementById("shareLinkDisplay").style.display = "block";
         } else {
-          showToast(t("error_generating_share") + ": " + (data.error||"Unknown"));
+          showToast(t("error_generating_share") + ": " + (data.error || "Unknown"));
         }
       })
       .catch(err => {
         console.error(err);
         showToast(t("error_generating_share"));
       });
-    });
+  });
 
-  // Copy to clipboard
-  document.getElementById("copyShareLinkBtn")
-    .addEventListener("click", () => {
-      const input = document.getElementById("shareLinkInput");
-      input.select();
-      document.execCommand("copy");
-      showToast(t("link_copied"));
-    });
+  document.getElementById("copyShareLinkBtn").addEventListener("click", () => {
+    const input = document.getElementById("shareLinkInput");
+    input.select();
+    document.execCommand("copy");
+    showToast(t("link_copied"));
+  });
 }
 
-export function previewFile(fileUrl, fileName) {
-  let modal = document.getElementById("filePreviewModal");
-  if (!modal) {
-    modal = document.createElement("div");
-    modal.id = "filePreviewModal";
-    Object.assign(modal.style, {
-      position: "fixed",
-      top: "0",
-      left: "0",
-      width: "100vw",
-      height: "100vh",
-      backgroundColor: "rgba(0,0,0,0.7)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex: "1000"
-    });
-    modal.innerHTML = `
-      <div class="modal-content image-preview-modal-content" style="position: relative; max-width: 90vw; max-height: 90vh;">
-        <span id="closeFileModal" class="close-image-modal" style="position: absolute; top: 10px; right: 10px; font-size: 24px; cursor: pointer;">&times;</span>
-        <h4 class="image-modal-header"></h4>
-        <div class="file-preview-container" style="position: relative; text-align: center;"></div>
-      </div>`;
-    document.body.appendChild(modal);
+/* -------------------------------- Media modal viewer -------------------------------- */
+const IMG_RE = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i;
+const VID_RE = /\.(mp4|mkv|webm|mov|ogv)$/i;
+const AUD_RE = /\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i;
+const ARCH_RE = /\.(zip|rar|7z|gz|bz2|xz|tar)$/i;
+const CODE_RE = /\.(js|mjs|ts|tsx|json|yml|yaml|xml|html?|css|scss|less|php|py|rb|go|rs|c|cpp|h|hpp|java|cs|sh|bat|ps1)$/i;
+const TXT_RE  = /\.(txt|rtf|md|log)$/i;
 
-    function closeModal() {
-      const mediaElements = modal.querySelectorAll("video, audio");
-      mediaElements.forEach(media => {
-        media.pause();
-        if (media.tagName.toLowerCase() !== 'video') {
-          try { media.currentTime = 0; } catch (e) { }
-        }
-      });
-      modal.remove();
-    }
+function getIconForFile(name) {
+  const lower = (name || '').toLowerCase();
+  if (IMG_RE.test(lower)) return 'image';
+  if (VID_RE.test(lower)) return 'ondemand_video';
+  if (AUD_RE.test(lower)) return 'audiotrack';
+  if (lower.endsWith('.pdf')) return 'picture_as_pdf';
+  if (ARCH_RE.test(lower)) return 'archive';
+  if (CODE_RE.test(lower)) return 'code';
+  if (TXT_RE.test(lower)) return 'description';
+  return 'insert_drive_file';
+}
 
-    document.getElementById("closeFileModal").addEventListener("click", closeModal);
-    modal.addEventListener("click", function (e) {
-      if (e.target === modal) {
-        closeModal();
-      }
-    });
+function ensureMediaModal() {
+  let overlay = document.getElementById("filePreviewModal");
+  if (overlay) return overlay;
+
+  overlay = document.createElement("div");
+  overlay.id = "filePreviewModal";
+  Object.assign(overlay.style, {
+    position: "fixed",
+    inset: "0",
+    width: "100vw",
+    height: "100vh",
+    backgroundColor: "rgba(0,0,0,0.7)",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    zIndex: "1000"
+  });
+
+  const root   = document.documentElement;
+  const styles = getComputedStyle(root);
+  const isDark = root.classList.contains('dark-mode');
+  const panelBg = styles.getPropertyValue('--panel-bg').trim() || styles.getPropertyValue('--bg-color').trim() || (isDark ? '#2c2c2c' : '#ffffff');
+  const textCol = styles.getPropertyValue('--text-color').trim() || (isDark ? '#eaeaea' : '#111111');
+
+  const navBg     = isDark ? 'rgba(255,255,255,.28)' : 'rgba(0,0,0,.45)';
+  const navFg     = '#fff';
+  const navBorder = isDark ? 'rgba(255,255,255,.35)' : 'rgba(0,0,0,.25)';
+
+  // fixed top bar; pad-right to avoid overlap with absolute close “×”
+  overlay.innerHTML = `
+    <div class="modal-content media-modal" style="
+      position: relative;
+      max-width: 92vw;
+      width: 92vw;
+      max-height: 92vh;
+      height: 92vh;
+      box-sizing: border-box;
+      background: ${panelBg};
+      color: ${textCol};
+      overflow: hidden;
+      border-radius: 10px;
+      display:flex; flex-direction:column;
+    ">
+      <!-- Top bar -->
+      <div class="media-topbar" style="
+        flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
+        height:44px; padding:6px 12px; padding-right:56px; gap:10px;
+        border-bottom:1px solid ${isDark ? 'rgba(255,255,255,.12)' : 'rgba(0,0,0,.08)'};
+        background:${panelBg};
+      ">
+        <div class="media-title" style="display:flex; align-items:center; gap:8px; min-width:0;">
+          <span class="material-icons title-icon" style="
+            width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center;
+            font-size:22px; line-height:1; opacity:${isDark ? '0.96' : '0.9'};">
+            insert_drive_file
+          </span>
+          <div class="title-text" style="font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"></div>
+        </div>
+        <div class="media-right" style="display:flex; align-items:center; gap:8px;">
+          <span class="status-chip" style="
+   display:none; padding:4px 8px; border-radius:999px; font-size:12px; line-height:1;
+   border:1px solid transparent; background:transparent; color:inherit;"></span>
+          <div class="action-group" style="display:flex; gap:8px; align-items:center;"></div>
+        </div>
+      </div>
+
+      <!-- Stage -->
+      <div class="media-stage" style="position:relative; flex:1 1 auto; display:flex; align-items:center; justify-content:center; overflow:hidden;">
+        <div class="file-preview-container" style="position:relative; text-align:center; flex:1; min-width:0;"></div>
+
+        <!-- prev/next = rounded rectangles with centered glyphs -->
+        <button class="nav-left"  aria-label="${t('previous')||'Previous'}" style="
+          position:absolute; left:8px; top:50%; transform:translateY(-50%);
+          height:56px; min-width:48px; padding:0 14px;
+          display:flex; align-items:center; justify-content:center;
+          font-size:38px; line-height:0;
+          background:${navBg}; color:${navFg}; border:1px solid ${navBorder};
+          text-shadow: 0 1px 2px rgba(0,0,0,.6);
+          border-radius:12px; cursor:pointer; display:none; z-index:1001; backdrop-filter: blur(2px);
+          box-shadow: 0 2px 8px rgba(0,0,0,.35);">‹</button>
+        <button class="nav-right" aria-label="${t('next')||'Next'}" style="
+          position:absolute; right:8px; top:50%; transform:translateY(-50%);
+          height:56px; min-width:48px; padding:0 14px;
+          display:flex; align-items:center; justify-content:center;
+          font-size:38px; line-height:0;
+          background:${navBg}; color:${navFg}; border:1px solid ${navBorder};
+          text-shadow: 0 1px 2px rgba(0,0,0,.6);
+          border-radius:12px; cursor:pointer; display:none; z-index:1001; backdrop-filter: blur(2px);
+          box-shadow: 0 2px 8px rgba(0,0,0,.35);">›</button>
+      </div>
+
+      <!-- Absolute close “×” (like original), themed + hover behavior -->
+      <span id="closeFileModal" class="close-image-modal" title="${t('close')}" style="
+        position:absolute; top:8px; right:10px; z-index:1002;
+        width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
+        font-size:22px; cursor:pointer; user-select:none; border-radius:50%; transition:all .15s ease;
+      ">&times;</span>
+    </div>`;
+
+  document.body.appendChild(overlay);
+
+  // theme the close “×” for visibility + hover rules that match your site:
+  const closeBtn = overlay.querySelector("#closeFileModal");
+  function paintCloseBase() {
+    closeBtn.style.backgroundColor = 'transparent';
+    closeBtn.style.color = '#e11d48'; // base red X
+    closeBtn.style.boxShadow = 'none';
   }
-  modal.querySelector("h4").textContent = fileName;
-  const container = modal.querySelector(".file-preview-container");
-  container.innerHTML = "";
+  function onCloseHoverEnter() {
+    const dark = document.documentElement.classList.contains('dark-mode');
+    closeBtn.style.backgroundColor = '#ef4444'; // red fill
+    closeBtn.style.color = dark ? '#000' : '#fff'; // X: black in dark / white in light
+    closeBtn.style.boxShadow = '0 0 6px rgba(239,68,68,.6)';
+  }
+  function onCloseHoverLeave() { paintCloseBase(); }
+  paintCloseBase();
+  closeBtn.addEventListener('mouseenter', onCloseHoverEnter);
+  closeBtn.addEventListener('mouseleave', onCloseHoverLeave);
 
-  const extension = fileName.split('.').pop().toLowerCase();
-  const isImage = /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(fileName);
+  function closeModal() {
+    try { overlay.querySelectorAll("video,audio").forEach(m => { try{m.pause()}catch(_){}}); } catch {}
+    if (overlay._onKey) window.removeEventListener('keydown', overlay._onKey);
+    overlay.remove();
+  }
+  closeBtn.addEventListener("click", closeModal);
+  overlay.addEventListener("click", (e) => { if (e.target === overlay) closeModal(); });
+
+  return overlay;
+}
+
+function setTitle(overlay, name) {
+  const textEl = overlay.querySelector('.title-text');
+  const iconEl = overlay.querySelector('.title-icon');
+  if (textEl) {
+    textEl.textContent = name || '';
+    textEl.setAttribute('title', name || '');
+  }
+  if (iconEl) {
+    iconEl.textContent = getIconForFile(name);
+    // keep the icon legible in both themes
+    const dark = document.documentElement.classList.contains('dark-mode');
+    iconEl.style.color = dark ? '#f5f5f5' : '#111111';
+    iconEl.style.opacity = dark ? '0.96' : '0.9';
+  }
+}
+
+// Topbar icon (theme-aware) used for image tools + video actions
+function makeTopIcon(name, title) {
+  const b = document.createElement('button');
+  b.className = 'material-icons';
+  b.textContent = name;
+  b.title = title;
+
+  const dark = document.documentElement.classList.contains('dark-mode');
+
+  Object.assign(b.style, {
+    width: '32px',
+    height: '32px',
+    borderRadius: '8px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: dark ? '1px solid rgba(255,255,255,.25)' : '1px solid rgba(0,0,0,.15)',
+    background: dark ? 'rgba(255,255,255,.14)' : 'rgba(0,0,0,.08)',
+    cursor: 'pointer',
+    fontSize: '20px',
+    lineHeight: '1',
+    color: dark ? '#f5f5f5' : '#111',
+    boxShadow: dark ? '0 1px 2px rgba(0,0,0,.6)' : '0 1px 1px rgba(0,0,0,.08)'
+  });
+
+  b.addEventListener('mouseenter', () => {
+    const darkNow = document.documentElement.classList.contains('dark-mode');
+    b.style.background = darkNow ? 'rgba(255,255,255,.22)' : 'rgba(0,0,0,.14)';
+  });
+  b.addEventListener('mouseleave', () => {
+    const darkNow = document.documentElement.classList.contains('dark-mode');
+    b.style.background = darkNow ? 'rgba(255,255,255,.14)' : 'rgba(0,0,0,.08)';
+  });
+
+  return b;
+}
+
+function setNavVisibility(overlay, showPrev, showNext) {
+  const prev = overlay.querySelector('.nav-left');
+  const next = overlay.querySelector('.nav-right');
+  prev.style.display = showPrev ? 'flex' : 'none';
+  next.style.display = showNext ? 'flex' : 'none';
+}
+
+function setRowWatchedBadge(name, watched) {
+  try {
+    const cell = document.querySelector(`tr[data-file-name="${CSS.escape(name)}"] .name-cell`);
+    if (!cell) return;
+    const old = cell.querySelector('.status-badge.watched');
+    if (watched) {
+      if (!old) {
+        const b = document.createElement('span');
+        b.className = 'status-badge watched';
+        b.textContent = t("watched") || t("viewed") || "Watched";
+        b.style.marginLeft = "6px";
+        cell.appendChild(b);
+      }
+    } else if (old) {
+      old.remove();
+    }
+  } catch {}
+}
+
+/* -------------------------------- Entry -------------------------------- */
+export function previewFile(fileUrl, fileName) {
+  const overlay    = ensureMediaModal();
+  const container  = overlay.querySelector(".file-preview-container");
+  const actionWrap = overlay.querySelector(".media-right .action-group");
+  const statusChip = overlay.querySelector(".media-right .status-chip");
+
+  // replace nav buttons to clear old listeners
+  let prevBtn = overlay.querySelector('.nav-left');
+  let nextBtn = overlay.querySelector('.nav-right');
+  const newPrev = prevBtn.cloneNode(true);
+  const newNext = nextBtn.cloneNode(true);
+  prevBtn.replaceWith(newPrev);
+  nextBtn.replaceWith(newNext);
+  prevBtn = newPrev; nextBtn = newNext;
+
+  // reset
+  container.innerHTML = "";
+  actionWrap.innerHTML = "";
+  if (statusChip) statusChip.style.display = 'none';
+  if (overlay._onKey) window.removeEventListener('keydown', overlay._onKey);
+  overlay._onKey = null;
+
+  const folder = window.currentFolder || 'root';
+  const name   = fileName;
+  const lower  = (name || '').toLowerCase();
+  const isImage = IMG_RE.test(lower);
+  const isVideo = VID_RE.test(lower);
+  const isAudio = AUD_RE.test(lower);
+
+  setTitle(overlay, name);
+
+  /* -------------------- IMAGES -------------------- */
   if (isImage) {
-    // Create the image element with default transform data.
     const img = document.createElement("img");
     img.src = fileUrl;
     img.className = "image-modal-img";
-    img.style.maxWidth = "80vw";
-    img.style.maxHeight = "80vh";
+    img.style.maxWidth  = "88vw";
+    img.style.maxHeight = "88vh";
     img.style.transition = "transform 0.3s ease";
     img.dataset.scale = 1;
     img.dataset.rotate = 0;
-    img.style.position = 'relative';
-    img.style.zIndex = '1';
+    container.appendChild(img);
 
-    // Filter gallery images for navigation.
-    const images = fileData.filter(file => /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name));
+    // topbar-aligned, theme-aware icons
+    const zoomInBtn   = makeTopIcon('zoom_in',      t('zoom_in')       || 'Zoom In');
+    const zoomOutBtn  = makeTopIcon('zoom_out',     t('zoom_out')      || 'Zoom Out');
+    const rotateLeft  = makeTopIcon('rotate_left',  t('rotate_left')   || 'Rotate Left');
+    const rotateRight = makeTopIcon('rotate_right', t('rotate_right')  || 'Rotate Right');
+    actionWrap.appendChild(zoomInBtn);
+    actionWrap.appendChild(zoomOutBtn);
+    actionWrap.appendChild(rotateLeft);
+    actionWrap.appendChild(rotateRight);
 
-    // Create a flex wrapper to hold left panel, center image, and right panel.
-    const wrapper = document.createElement('div');
-    wrapper.className = 'image-wrapper';
-    wrapper.style.display = 'flex';
-    wrapper.style.alignItems = 'center';
-    wrapper.style.justifyContent = 'center';
-    wrapper.style.position = 'relative';
+    zoomInBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let s = parseFloat(img.dataset.scale) || 1; s += 0.1;
+      img.dataset.scale = s;
+      img.style.transform = `scale(${s}) rotate(${img.dataset.rotate}deg)`;
+    });
+    zoomOutBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let s = parseFloat(img.dataset.scale) || 1; s = Math.max(0.1, s - 0.1);
+      img.dataset.scale = s;
+      img.style.transform = `scale(${s}) rotate(${img.dataset.rotate}deg)`;
+    });
+    rotateLeft.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let r = parseFloat(img.dataset.rotate) || 0; r = (r - 90 + 360) % 360;
+      img.dataset.rotate = r;
+      img.style.transform = `scale(${img.dataset.scale}) rotate(${r}deg)`;
+    });
+    rotateRight.addEventListener('click', (e) => {
+      e.stopPropagation();
+      let r = parseFloat(img.dataset.rotate) || 0; r = (r + 90) % 360;
+      img.dataset.rotate = r;
+      img.style.transform = `scale(${img.dataset.scale}) rotate(${r}deg)`;
+    });
 
-    // --- Left Panel: Contains Zoom controls (top) and Prev button (bottom) ---
-    const leftPanel = document.createElement('div');
-    leftPanel.className = 'left-panel';
-    leftPanel.style.display = 'flex';
-    leftPanel.style.flexDirection = 'column';
-    leftPanel.style.justifyContent = 'space-between';
-    leftPanel.style.alignItems = 'center';
-    leftPanel.style.width = '60px';
-    leftPanel.style.height = '100%';
-    leftPanel.style.zIndex = '10';
+    const images = (Array.isArray(fileData) ? fileData : []).filter(f => IMG_RE.test(f.name));
+    overlay.mediaType  = 'image';
+    overlay.mediaList  = images;
+    overlay.mediaIndex = Math.max(0, images.findIndex(f => f.name === name));
+    setNavVisibility(overlay, images.length > 1, images.length > 1);
 
-    // Top container for zoom buttons.
-    const leftTop = document.createElement('div');
-    leftTop.style.display = 'flex';
-    leftTop.style.flexDirection = 'column';
-    leftTop.style.gap = '4px';
-    // Zoom In button.
-    const zoomInBtn = document.createElement('button');
-    zoomInBtn.className = 'material-icons zoom_in';
-    zoomInBtn.title = 'Zoom In';
-    zoomInBtn.style.background = 'transparent';
-    zoomInBtn.style.border = 'none';
-    zoomInBtn.style.cursor = 'pointer';
-    zoomInBtn.textContent = 'zoom_in';
-    // Zoom Out button.
-    const zoomOutBtn = document.createElement('button');
-    zoomOutBtn.className = 'material-icons zoom_out';
-    zoomOutBtn.title = 'Zoom Out';
-    zoomOutBtn.style.background = 'transparent';
-    zoomOutBtn.style.border = 'none';
-    zoomOutBtn.style.cursor = 'pointer';
-    zoomOutBtn.textContent = 'zoom_out';
-    leftTop.appendChild(zoomInBtn);
-    leftTop.appendChild(zoomOutBtn);
-    leftPanel.appendChild(leftTop);
+    const navigate = (dir) => {
+      if (!overlay.mediaList || overlay.mediaList.length < 2) return;
+      overlay.mediaIndex = (overlay.mediaIndex + dir + overlay.mediaList.length) % overlay.mediaList.length;
+      const newFile = overlay.mediaList[overlay.mediaIndex].name;
+      setTitle(overlay, newFile);
+      img.dataset.scale = 1;
+      img.dataset.rotate = 0;
+      img.style.transform = 'scale(1) rotate(0deg)';
+      img.src = buildPreviewUrl(folder, newFile);
+    };
 
-    // Bottom container for prev button.
-    const leftBottom = document.createElement('div');
-    leftBottom.style.display = 'flex';
-    leftBottom.style.justifyContent = 'center';
-    leftBottom.style.alignItems = 'center';
-    leftBottom.style.width = '100%';
     if (images.length > 1) {
-      const prevBtn = document.createElement("button");
-      prevBtn.textContent = "‹";
-      prevBtn.className = "gallery-nav-btn";
-      prevBtn.style.background = 'transparent';
-      prevBtn.style.border = 'none';
-      prevBtn.style.color = 'white';
-      prevBtn.style.fontSize = '48px';
-      prevBtn.style.cursor = 'pointer';
-      prevBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        // Safety check:
-        if (!modal.galleryImages || modal.galleryImages.length === 0) return;
-        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();
-        // Reset transforms.
-        img.dataset.scale = 1;
-        img.dataset.rotate = 0;
-        img.style.transform = 'scale(1) rotate(0deg)';
-      });
-      leftBottom.appendChild(prevBtn);
-    } else {
-      // Insert an empty placeholder for consistent layout.
-      leftBottom.innerHTML = '&nbsp;';
+      prevBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(-1); });
+      nextBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(+1); });
+      const onKey = (e) => {
+        if (!document.body.contains(overlay)) { window.removeEventListener("keydown", onKey); return; }
+        if (e.key === "ArrowLeft")  navigate(-1);
+        if (e.key === "ArrowRight") navigate(+1);
+      };
+      window.addEventListener("keydown", onKey);
+      overlay._onKey = onKey;
     }
-    leftPanel.appendChild(leftBottom);
 
-    // --- Center Panel: Contains the image ---
-    const centerPanel = document.createElement('div');
-    centerPanel.className = 'center-image-container';
-    centerPanel.style.flexGrow = '1';
-    centerPanel.style.textAlign = 'center';
-    centerPanel.style.position = 'relative';
-    centerPanel.style.zIndex = '1';
-    centerPanel.appendChild(img);
+    overlay.style.display = "flex";
+    return;
+  }
 
-    // --- Right Panel: Contains Rotate controls (top) and Next button (bottom) ---
-    const rightPanel = document.createElement('div');
-    rightPanel.className = 'right-panel';
-    rightPanel.style.display = 'flex';
-    rightPanel.style.flexDirection = 'column';
-    rightPanel.style.justifyContent = 'space-between';
-    rightPanel.style.alignItems = 'center';
-    rightPanel.style.width = '60px';
-    rightPanel.style.height = '100%';
-    rightPanel.style.zIndex = '10';
-
-    // Top container for rotate buttons.
-    const rightTop = document.createElement('div');
-    rightTop.style.display = 'flex';
-    rightTop.style.flexDirection = 'column';
-    rightTop.style.gap = '4px';
-    // Rotate Left button.
-    const rotateLeftBtn = document.createElement('button');
-    rotateLeftBtn.className = 'material-icons rotate_left';
-    rotateLeftBtn.title = 'Rotate Left';
-    rotateLeftBtn.style.background = 'transparent';
-    rotateLeftBtn.style.border = 'none';
-    rotateLeftBtn.style.cursor = 'pointer';
-    rotateLeftBtn.textContent = 'rotate_left';
-    // Rotate Right button.
-    const rotateRightBtn = document.createElement('button');
-    rotateRightBtn.className = 'material-icons rotate_right';
-    rotateRightBtn.title = 'Rotate Right';
-    rotateRightBtn.style.background = 'transparent';
-    rotateRightBtn.style.border = 'none';
-    rotateRightBtn.style.cursor = 'pointer';
-    rotateRightBtn.textContent = 'rotate_right';
-    rightTop.appendChild(rotateLeftBtn);
-    rightTop.appendChild(rotateRightBtn);
-    rightPanel.appendChild(rightTop);
-
-    // Bottom container for next button.
-    const rightBottom = document.createElement('div');
-    rightBottom.style.display = 'flex';
-    rightBottom.style.justifyContent = 'center';
-    rightBottom.style.alignItems = 'center';
-    rightBottom.style.width = '100%';
-    if (images.length > 1) {
-      const nextBtn = document.createElement("button");
-      nextBtn.textContent = "›";
-      nextBtn.className = "gallery-nav-btn";
-      nextBtn.style.background = 'transparent';
-      nextBtn.style.border = 'none';
-      nextBtn.style.color = 'white';
-      nextBtn.style.fontSize = '48px';
-      nextBtn.style.cursor = 'pointer';
-      nextBtn.addEventListener("click", function (e) {
-        e.stopPropagation();
-        // Safety check:
-        if (!modal.galleryImages || modal.galleryImages.length === 0) return;
-        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();
-        // Reset transforms.
-        img.dataset.scale = 1;
-        img.dataset.rotate = 0;
-        img.style.transform = 'scale(1) rotate(0deg)';
-      });
-      rightBottom.appendChild(nextBtn);
-    } else {
-      // Insert a placeholder so that center remains properly aligned.
-      rightBottom.innerHTML = '&nbsp;';
-    }
-    rightPanel.appendChild(rightBottom);
-
-    // Assemble panels into the wrapper.
-    wrapper.appendChild(leftPanel);
-    wrapper.appendChild(centerPanel);
-    wrapper.appendChild(rightPanel);
-    container.appendChild(wrapper);
-
-    // --- Set up zoom controls event listeners ---
-    zoomInBtn.addEventListener('click', function (e) {
-      e.stopPropagation();
-      let scale = parseFloat(img.dataset.scale) || 1;
-      scale += 0.1;
-      img.dataset.scale = scale;
-      img.style.transform = 'scale(' + scale + ') rotate(' + img.dataset.rotate + 'deg)';
-    });
-    zoomOutBtn.addEventListener('click', function (e) {
-      e.stopPropagation();
-      let scale = parseFloat(img.dataset.scale) || 1;
-      scale = Math.max(0.1, scale - 0.1);
-      img.dataset.scale = scale;
-      img.style.transform = 'scale(' + scale + ') rotate(' + img.dataset.rotate + 'deg)';
-    });
-
-    // Attach rotation control listeners (always present now).
-    rotateLeftBtn.addEventListener('click', function (e) {
-      e.stopPropagation();
-      let rotate = parseFloat(img.dataset.rotate) || 0;
-      rotate = (rotate - 90 + 360) % 360;
-      img.dataset.rotate = rotate;
-      img.style.transform = 'scale(' + img.dataset.scale + ') rotate(' + rotate + 'deg)';
-    });
-    rotateRightBtn.addEventListener('click', function (e) {
-      e.stopPropagation();
-      let rotate = parseFloat(img.dataset.rotate) || 0;
-      rotate = (rotate + 90) % 360;
-      img.dataset.rotate = rotate;
-      img.style.transform = 'scale(' + img.dataset.scale + ') rotate(' + rotate + 'deg)';
-    });
-
-    // Save gallery details if there is more than one image.
-    if (images.length > 1) {
-      modal.galleryImages = images;
-      modal.galleryCurrentIndex = images.findIndex(f => f.name === fileName);
-    }
-  } else {
-    // Handle non-image file previews.
-  if (extension === "pdf") {
-    // build a cache‐busted URL
+  /* -------------------- PDF => new tab -------------------- */
+  if (lower.endsWith('.pdf')) {
     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
+    overlay.remove();
     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);
-        if (savedTime) {
-          video.currentTime = parseFloat(savedTime);
+  }
+
+  /* -------------------- VIDEOS -------------------- */
+  if (isVideo) {
+    let video = document.createElement("video"); // let so we can rebind
+    video.controls = true;
+    video.style.maxWidth  = "88vw";
+    video.style.maxHeight = "88vh";
+    video.style.objectFit = "contain";
+    container.appendChild(video);
+
+    // Top-right action icons (Material icons, theme-aware)
+    const markBtnIcon  = makeTopIcon('check_circle', t("mark_as_viewed") || "Mark as viewed");
+    const clearBtnIcon = makeTopIcon('restart_alt',  t("clear_progress") || "Clear progress");
+    actionWrap.appendChild(markBtnIcon);
+    actionWrap.appendChild(clearBtnIcon);
+
+    const videos = (Array.isArray(fileData) ? fileData : []).filter(f => VID_RE.test(f.name));
+    overlay.mediaType  = 'video';
+    overlay.mediaList  = videos;
+    overlay.mediaIndex = Math.max(0, videos.findIndex(f => f.name === name));
+    setNavVisibility(overlay, videos.length > 1, videos.length > 1);
+
+    const setVideoSrc = (nm) => { video.src = buildPreviewUrl(folder, nm); setTitle(overlay, nm); };
+
+    const SAVE_INTERVAL_MS = 5000;
+    let lastSaveAt = 0;
+    let pending = false;
+
+    async function getProgress(nm) {
+      try {
+        const res = await fetch(`/api/media/getProgress.php?folder=${encodeURIComponent(folder)}&file=${encodeURIComponent(nm)}&t=${Date.now()}`, { credentials: "include" });
+        const data = await res.json();
+        return data && data.state ? data.state : null;
+      } catch { return null; }
+    }
+    async function sendProgress({nm, seconds, duration, completed, clear}) {
+      try {
+        pending = true;
+        const res = await fetch("/api/media/updateProgress.php", {
+          method: "POST",
+          credentials: "include",
+          headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+          body: JSON.stringify({ folder, file: nm, seconds, duration, completed, clear })
+        });
+        const data = await res.json();
+        pending = false;
+        return data;
+      } catch (e) { pending = false; console.error(e); return null; }
+    }
+    const lsKey = (nm) => `videoProgress-${folder}/${nm}`;
+
+    function renderStatus(state) {
+      if (!statusChip) return;
+      // Completed
+      if (state && state.completed) {
+        statusChip.textContent = (t('viewed') || 'Viewed') + ' ✓';
+        statusChip.style.display = 'inline-block';
+        statusChip.style.borderColor = 'rgba(34,197,94,.45)';
+        statusChip.style.background  = 'rgba(34,197,94,.15)';
+        statusChip.style.color       = '#22c55e';
+        markBtnIcon.style.display  = 'none';
+        clearBtnIcon.style.display = '';
+        clearBtnIcon.title = t('reset_progress') || t('clear_progress') || 'Reset';
+        return;
+      }
+      // In progress
+      if (state && Number.isFinite(state.seconds) && Number.isFinite(state.duration) && state.duration > 0) {
+        const pct = Math.max(1, Math.min(99, Math.round((state.seconds / state.duration) * 100)));
+        statusChip.textContent = `${pct}%`;
+        statusChip.style.display = 'inline-block';
+        const dark = document.documentElement.classList.contains('dark-mode');
+ const ORANGE_HEX = '#ea580c'; // darker orange (works in light/dark)
+ statusChip.style.color       = ORANGE_HEX;
+ statusChip.style.borderColor = dark ? 'rgba(234,88,12,.55)' : 'rgba(234,88,12,.45)';  // #ea580c @ different alphas
+ statusChip.style.background  = dark ? 'rgba(234,88,12,.18)' : 'rgba(234,88,12,.12)';
+        markBtnIcon.style.display  = '';
+        clearBtnIcon.style.display = '';
+        clearBtnIcon.title = t('reset_progress') || t('clear_progress') || 'Reset';
+        return;
+      }
+      // No progress
+      statusChip.style.display = 'none';
+      markBtnIcon.style.display  = '';
+      clearBtnIcon.style.display = 'none';
+    }
+
+    function bindVideoEvents(nm) {
+      const nv = video.cloneNode(true);
+      video.replaceWith(nv);
+      video = nv;
+
+      video.addEventListener("loadedmetadata", async () => {
+        try {
+          const state = await getProgress(nm);
+          if (state && Number.isFinite(state.seconds) && state.seconds > 0 && state.seconds < (video.duration || Infinity)) {
+            video.currentTime = state.seconds;
+            const seconds = Math.floor(video.currentTime || 0);
+            const duration = Math.floor(video.duration || 0);
+            setFileProgressBadge(nm, seconds, duration);
+            showToast((t("resumed_from") || "Resumed from") + " " + Math.floor(state.seconds) + "s");
+          } else {
+            const ls = localStorage.getItem(lsKey(nm));
+            if (ls) video.currentTime = parseFloat(ls);
+          }
+          renderStatus(state || null);
+        } catch {
+          renderStatus(null);
         }
       });
-      video.addEventListener("timeupdate", () => {
-        localStorage.setItem(progressKey, video.currentTime);
+
+      video.addEventListener("timeupdate", async () => {
+        const now = Date.now();
+        if ((now - lastSaveAt) < SAVE_INTERVAL_MS || pending) return;
+        lastSaveAt = now;
+        const seconds = Math.floor(video.currentTime || 0);
+        const duration = Math.floor(video.duration || 0);
+        sendProgress({ nm, seconds, duration });
+        setFileProgressBadge(nm, seconds, duration);
+        try { localStorage.setItem(lsKey(nm), String(seconds)); } catch {}
+        renderStatus({ seconds, duration, completed: false });
       });
-      video.addEventListener("ended", () => {
-        localStorage.removeItem(progressKey);
+
+      video.addEventListener("ended", async () => {
+        const duration = Math.floor(video.duration || 0);
+        await sendProgress({ nm, seconds: duration, duration, completed: true });
+        try { localStorage.removeItem(lsKey(nm)); } catch {}
+        showToast(t("marked_viewed") || "Marked as viewed");
+        setFileWatchedBadge(nm, true);
+        renderStatus({ seconds: duration, duration, completed: true });
       });
-      container.appendChild(video);
-    } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(fileName)) {
-      const audio = document.createElement("audio");
-      audio.src = fileUrl;
-      audio.controls = true;
-      audio.className = "audio-modal";
-      audio.style.maxWidth = "80vw";
-      container.appendChild(audio);
-    } else {
-      container.textContent = "Preview not available for this file type.";
+
+      markBtnIcon.onclick = async () => {
+        const duration = Math.floor(video.duration || 0);
+        await sendProgress({ nm, seconds: duration, duration, completed: true });
+        showToast(t("marked_viewed") || "Marked as viewed");
+        setFileWatchedBadge(nm, true);
+        renderStatus({ seconds: duration, duration, completed: true });
+      };
+      clearBtnIcon.onclick = async () => {
+        await sendProgress({ nm, seconds: 0, duration: null, completed: false, clear: true });
+        try { localStorage.removeItem(lsKey(nm)); } catch {}
+        showToast(t("progress_cleared") || "Progress cleared");
+        setFileWatchedBadge(nm, false);
+        renderStatus(null);
+      };
     }
+
+    const navigate = (dir) => {
+      if (!overlay.mediaList || overlay.mediaList.length < 2) return;
+      overlay.mediaIndex = (overlay.mediaIndex + dir + overlay.mediaList.length) % overlay.mediaList.length;
+      const nm = overlay.mediaList[overlay.mediaIndex].name;
+      setVideoSrc(nm);
+      bindVideoEvents(nm);
+    };
+
+    if (videos.length > 1) {
+      prevBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(-1); });
+      nextBtn.addEventListener('click', (e) => { e.stopPropagation(); navigate(+1); });
+      const onKey = (e) => {
+        if (!document.body.contains(overlay)) { window.removeEventListener("keydown", onKey); return; }
+        if (e.key === "ArrowLeft")  navigate(-1);
+        if (e.key === "ArrowRight") navigate(+1);
+      };
+      window.addEventListener("keydown", onKey);
+      overlay._onKey = onKey;
+    }
+
+    setVideoSrc(name);
+    renderStatus(null);
+    bindVideoEvents(name);
+    overlay.style.display = "flex";
+    return;
+  }
+
+  /* -------------------- AUDIO / OTHER -------------------- */
+  if (isAudio) {
+    const audio = document.createElement("audio");
+    audio.src = fileUrl;
+    audio.controls = true;
+    audio.className = "audio-modal";
+    audio.style.maxWidth = "88vw";
+    container.appendChild(audio);
+    overlay.style.display = "flex";
+  } else {
+    container.textContent = t("preview_not_available") || "Preview not available for this file type.";
+    overlay.style.display = "flex";
   }
-  modal.style.display = "flex";
 }
 
-// Preserve original functionality.
+/* -------------------------------- Small display helper -------------------------------- */
 export function displayFilePreview(file, container) {
   const actualFile = file.file || file;
   if (!(actualFile instanceof File)) {
@@ -472,10 +665,9 @@ export function displayFilePreview(file, container) {
     return;
   }
   container.style.display = "inline-block";
-  while (container.firstChild) {
-    container.removeChild(container.firstChild);
-  }
-  if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(actualFile.name)) {
+  while (container.firstChild) container.removeChild(container.firstChild);
+
+  if (IMG_RE.test(actualFile.name)) {
     const img = document.createElement("img");
     img.src = URL.createObjectURL(actualFile);
     img.classList.add("file-preview-img");
@@ -488,5 +680,6 @@ export function displayFilePreview(file, container) {
   }
 }
 
+// expose for HTML onclick usage
 window.previewFile = previewFile;
 window.openShareModal = openShareModal;

public/js/fileTags.js

@@ -1,172 +1,214 @@
-// fileTags.js
-// This module provides functions for opening the tag modal,
-// adding tags to files (with a global tag store for reuse),
-// updating the file row display with tag badges,
-// filtering the file list by tag, and persisting tag data.
-import { escapeHTML } from './domUtils.js';
-import { t } from './i18n.js';
-import { renderFileTable, renderGalleryView } from './fileListView.js';
+// fileTags.js (drop-in fix: single-instance modals, idempotent bindings)
+import { escapeHTML } from './domUtils.js?v={{APP_QVER}}';
+import { t } from './i18n.js?v={{APP_QVER}}';
+import { renderFileTable, renderGalleryView } from './fileListView.js?v={{APP_QVER}}';
 
-export function openTagModal(file) {
-  // Create the modal element.
-  let modal = document.createElement('div');
-  modal.id = 'tagModal';
-  modal.className = 'modal';
-  modal.innerHTML = `
-    <div class="modal-content" style="width: 450px; max-width:90vw;">
-      <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
-        <h3 style="
-            margin:0;
-            display:inline-block;
-            max-width: calc(100% - 40px);
-            overflow:hidden;
-            text-overflow:ellipsis;
-            white-space:nowrap;
-          ">
-          ${t("tag_file")}: ${escapeHTML(file.name)}
-        </h3>
-        <span id="closeTagModal" class="editor-close-btn">&times;</span>
-      </div>
-      <div class="modal-body" style="margin-top:10px;">
-        <label for="tagNameInput">${t("tag_name")}</label>
-        <input type="text" id="tagNameInput" placeholder="Enter tag name" style="width:100%; padding:5px;"/>
-        <br><br>
-        <label for="tagColorInput">${t("tag_name")}</label>
-        <input type="color" id="tagColorInput" value="#ff0000" style="width:100%; padding:5px;"/>
-        <br><br>
-        <div id="customTagDropdown" style="max-height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px; padding:5px;">
-          <!-- Custom tag options will be populated here -->
-        </div>
-        <br>
-        <div style="text-align:right;">
-          <button id="saveTagBtn" class="btn btn-primary">${t("save_tag")}</button>
-        </div>
-        <div id="currentTags" style="margin-top:10px; font-size:0.9em;">
-          <!-- Existing tags will be listed here -->
-        </div>
-      </div>
-    </div>
-  `;
-  document.body.appendChild(modal);
-  modal.style.display = 'block';
+// -------------------- state --------------------
+let __singleInit = false;
+let __multiInit  = false;
+let currentFile = null;
 
-  updateCustomTagDropdown();
-
-  document.getElementById('closeTagModal').addEventListener('click', () => {
-    modal.remove();
-  });
-
-  updateTagModalDisplay(file);
-
-  document.getElementById('tagNameInput').addEventListener('input', (e) => {
-    updateCustomTagDropdown(e.target.value);
-  });
-
-  document.getElementById('saveTagBtn').addEventListener('click', () => {
-    const tagName = document.getElementById('tagNameInput').value.trim();
-    const tagColor = document.getElementById('tagColorInput').value;
-    if (!tagName) {
-      alert('Please enter a tag name.');
-      return;
-    }
-    addTagToFile(file, { name: tagName, color: tagColor });
-    updateTagModalDisplay(file);
-    updateFileRowTagDisplay(file);
-    saveFileTags(file);
-    if (window.viewMode === 'gallery') {
-      renderGalleryView(window.currentFolder);
-    } else {
-      renderFileTable(window.currentFolder);
-    }
-    document.getElementById('tagNameInput').value = '';
-    updateCustomTagDropdown();
-  });
+// Global store (preserve existing behavior)
+window.globalTags = window.globalTags || [];
+if (localStorage.getItem('globalTags')) {
+  try { window.globalTags = JSON.parse(localStorage.getItem('globalTags')); } catch (e) {}
 }
 
-/**
- * Open a modal to tag multiple files.
- * @param {Array} files - Array of file objects to tag.
- */
-export function openMultiTagModal(files) {
-  let modal = document.createElement('div');
-  modal.id = 'multiTagModal';
-  modal.className = 'modal';
-  modal.innerHTML = `
-    <div class="modal-content" style="width: 450px; max-width:90vw;">
-      <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
-        <h3 style="margin:0;">Tag Selected Files (${files.length})</h3>
-        <span id="closeMultiTagModal" class="editor-close-btn">&times;</span>
-      </div>
-      <div class="modal-body" style="margin-top:10px;">
-        <label for="multiTagNameInput">Tag Name:</label>
-        <input type="text" id="multiTagNameInput" placeholder="Enter tag name" style="width:100%; padding:5px;"/>
-        <br><br>
-        <label for="multiTagColorInput">Tag Color:</label>
-        <input type="color" id="multiTagColorInput" value="#ff0000" style="width:100%; padding:5px;"/>
-        <br><br>
-        <div id="multiCustomTagDropdown" style="max-height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px; padding:5px;">
-          <!-- Custom tag options will be populated here -->
-        </div>
-        <br>
-        <div style="text-align:right;">
-          <button id="saveMultiTagBtn" class="btn btn-primary">Save Tag to Selected</button>
+// -------------------- ensure DOM (create-once-if-missing) --------------------
+function ensureSingleTagModal() {
+  // de-dupe if something already injected multiples
+  const all = document.querySelectorAll('#tagModal');
+  if (all.length > 1) [...all].slice(0, -1).forEach(n => n.remove());
+
+  let modal = document.getElementById('tagModal');
+  if (!modal) {
+    document.body.insertAdjacentHTML('beforeend', `
+      <div id="tagModal" class="modal" style="display:none">
+        <div class="modal-content" style="width:450px; max-width:90vw;">
+          <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
+            <h3 id="tagModalTitle" style="margin:0; max-width:calc(100% - 40px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
+              ${t('tag_file')}
+            </h3>
+            <span id="closeTagModal" class="editor-close-btn">×</span>
+          </div>
+          <div class="modal-body" style="margin-top:10px;">
+            <label for="tagNameInput">${t('tag_name')}</label>
+            <input type="text" id="tagNameInput" placeholder="${t('tag_name')}" style="width:100%; padding:5px;"/>
+            <br><br>
+            <label for="tagColorInput">${t('tag_color') || 'Tag Color'}</label>
+            <input type="color" id="tagColorInput" value="#ff0000" style="width:100%; padding:5px;"/>
+            <br><br>
+            <div id="customTagDropdown" style="max-height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px; padding:5px;"></div>
+            <br>
+            <div style="text-align:right;">
+              <button id="saveTagBtn" class="btn btn-primary" type="button">${t('save_tag')}</button>
+            </div>
+            <div id="currentTags" style="margin-top:10px; font-size:.9em;"></div>
+          </div>
         </div>
       </div>
-    </div>
-  `;
-  document.body.appendChild(modal);
-  modal.style.display = 'block';
+    `);
+    modal = document.getElementById('tagModal');
+  }
+  return modal;
+}
 
-  updateMultiCustomTagDropdown();
+function ensureMultiTagModal() {
+  const all = document.querySelectorAll('#multiTagModal');
+  if (all.length > 1) [...all].slice(0, -1).forEach(n => n.remove());
 
-  document.getElementById('closeMultiTagModal').addEventListener('click', () => {
-    modal.remove();
+  let modal = document.getElementById('multiTagModal');
+  if (!modal) {
+    document.body.insertAdjacentHTML('beforeend', `
+      <div id="multiTagModal" class="modal" style="display:none">
+        <div class="modal-content" style="width:450px; max-width:90vw;">
+          <div class="modal-header" style="display:flex; justify-content:space-between; align-items:center;">
+            <h3 id="multiTagTitle" style="margin:0;"></h3>
+            <span id="closeMultiTagModal" class="editor-close-btn">×</span>
+          </div>
+          <div class="modal-body" style="margin-top:10px;">
+            <label for="multiTagNameInput">${t('tag_name')}</label>
+            <input type="text" id="multiTagNameInput" placeholder="${t('tag_name')}" style="width:100%; padding:5px;"/>
+            <br><br>
+            <label for="multiTagColorInput">${t('tag_color') || 'Tag Color'}</label>
+            <input type="color" id="multiTagColorInput" value="#ff0000" style="width:100%; padding:5px;"/>
+            <br><br>
+            <div id="multiCustomTagDropdown" style="max-height:150px; overflow-y:auto; border:1px solid #ccc; margin-top:5px; padding:5px;"></div>
+            <br>
+            <div style="text-align:right;">
+              <button id="saveMultiTagBtn" class="btn btn-primary" type="button">${t('save_tag') || 'Save Tag'}</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `);
+    modal = document.getElementById('multiTagModal');
+  }
+  return modal;
+}
+
+// -------------------- init (bind once) --------------------
+function initSingleModalOnce() {
+  if (__singleInit) return;
+  const modal = ensureSingleTagModal();
+  const closeBtn = document.getElementById('closeTagModal');
+  const saveBtn  = document.getElementById('saveTagBtn');
+  const nameInp  = document.getElementById('tagNameInput');
+
+  // Close handlers
+  closeBtn?.addEventListener('click', hideTagModal);
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') hideTagModal(); });
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) hideTagModal(); // click backdrop
   });
 
-  document.getElementById('multiTagNameInput').addEventListener('input', (e) => {
-    updateMultiCustomTagDropdown(e.target.value);
+  // Input filter for dropdown
+  nameInp?.addEventListener('input', (e) => updateCustomTagDropdown(e.target.value));
+
+  // Save handler
+  saveBtn?.addEventListener('click', () => {
+    const tagName = (document.getElementById('tagNameInput')?.value || '').trim();
+    const tagColor = document.getElementById('tagColorInput')?.value || '#ff0000';
+    if (!tagName) { alert(t('enter_tag_name') || 'Please enter a tag name.'); return; }
+    if (!currentFile) return;
+
+    addTagToFile(currentFile, { name: tagName, color: tagColor });
+    updateTagModalDisplay(currentFile);
+    updateFileRowTagDisplay(currentFile);
+    saveFileTags(currentFile);
+
+    if (window.viewMode === 'gallery') renderGalleryView(window.currentFolder);
+    else renderFileTable(window.currentFolder);
+
+    const inp = document.getElementById('tagNameInput');
+    if (inp) inp.value = '';
+    updateCustomTagDropdown('');
   });
 
-  document.getElementById('saveMultiTagBtn').addEventListener('click', () => {
-    const tagName = document.getElementById('multiTagNameInput').value.trim();
-    const tagColor = document.getElementById('multiTagColorInput').value;
-    if (!tagName) {
-      alert('Please enter a tag name.');
-      return;
-    }
+  __singleInit = true;
+}
+
+function initMultiModalOnce() {
+  if (__multiInit) return;
+  const modal   = ensureMultiTagModal();
+  const closeBtn = document.getElementById('closeMultiTagModal');
+  const saveBtn  = document.getElementById('saveMultiTagBtn');
+  const nameInp  = document.getElementById('multiTagNameInput');
+
+  closeBtn?.addEventListener('click', hideMultiTagModal);
+  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') hideMultiTagModal(); });
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) hideMultiTagModal();
+  });
+
+  nameInp?.addEventListener('input', (e) => updateMultiCustomTagDropdown(e.target.value));
+
+  saveBtn?.addEventListener('click', () => {
+    const tagName  = (document.getElementById('multiTagNameInput')?.value || '').trim();
+    const tagColor = document.getElementById('multiTagColorInput')?.value || '#ff0000';
+    if (!tagName) { alert(t('enter_tag_name') || 'Please enter a tag name.'); return; }
+
+    const files = (window.__multiTagFiles || []);
     files.forEach(file => {
       addTagToFile(file, { name: tagName, color: tagColor });
       updateFileRowTagDisplay(file);
       saveFileTags(file);
     });
-    modal.remove();
-    if (window.viewMode === 'gallery') {
-      renderGalleryView(window.currentFolder);
-    } else {
-      renderFileTable(window.currentFolder);
-    }
+
+    hideMultiTagModal();
+    if (window.viewMode === 'gallery') renderGalleryView(window.currentFolder);
+    else renderFileTable(window.currentFolder);
   });
+
+  __multiInit = true;
 }
 
-/**
- * Update the custom dropdown for multi-tag modal.
- * Similar to updateCustomTagDropdown but includes a remove icon.
- */
+// -------------------- open/close APIs --------------------
+export function openTagModal(file) {
+  initSingleModalOnce();
+  const modal = document.getElementById('tagModal');
+  const title = document.getElementById('tagModalTitle');
+
+  currentFile = file || null;
+  if (title) title.textContent = `${t('tag_file')}: ${file ? escapeHTML(file.name) : ''}`;
+  updateCustomTagDropdown('');
+  updateTagModalDisplay(file);
+  modal.style.display = 'block';
+}
+
+export function hideTagModal() {
+  const modal = document.getElementById('tagModal');
+  if (modal) modal.style.display = 'none';
+}
+
+export function openMultiTagModal(files) {
+  initMultiModalOnce();
+  const modal = document.getElementById('multiTagModal');
+  const title = document.getElementById('multiTagTitle');
+  window.__multiTagFiles = Array.isArray(files) ? files : [];
+  if (title) title.textContent = `${t('tag_selected') || 'Tag Selected'} (${window.__multiTagFiles.length})`;
+  updateMultiCustomTagDropdown('');
+  modal.style.display = 'block';
+}
+
+export function hideMultiTagModal() {
+  const modal = document.getElementById('multiTagModal');
+  if (modal) modal.style.display = 'none';
+}
+
+// -------------------- dropdown + UI helpers --------------------
 function updateMultiCustomTagDropdown(filterText = "") {
   const dropdown = document.getElementById("multiCustomTagDropdown");
   if (!dropdown) return;
   dropdown.innerHTML = "";
   let tags = window.globalTags || [];
-  if (filterText) {
-    tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase()));
-  }
+  if (filterText) tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase()));
   if (tags.length > 0) {
     tags.forEach(tag => {
       const item = document.createElement("div");
       item.style.cursor = "pointer";
       item.style.padding = "5px";
       item.style.borderBottom = "1px solid #eee";
-      // Display colored square and tag name with remove icon.
       item.innerHTML = `
         <span style="display:inline-block; width:16px; height:16px; background-color:${tag.color}; border:1px solid #ccc; margin-right:5px; vertical-align:middle;"></span>
         ${escapeHTML(tag.name)}
@@ -174,8 +216,10 @@ function updateMultiCustomTagDropdown(filterText = "") {
       `;
       item.addEventListener("click", function(e) {
         if (e.target.classList.contains("global-remove")) return;
-        document.getElementById("multiTagNameInput").value = tag.name;
-        document.getElementById("multiTagColorInput").value = tag.color;
+        const n = document.getElementById("multiTagNameInput");
+        const c = document.getElementById("multiTagColorInput");
+        if (n) n.value = tag.name;
+        if (c) c.value = tag.color;
       });
       item.querySelector('.global-remove').addEventListener("click", function(e){
         e.stopPropagation();
@@ -184,7 +228,7 @@ function updateMultiCustomTagDropdown(filterText = "") {
       dropdown.appendChild(item);
     });
   } else {
-    dropdown.innerHTML = "<div style='padding:5px;'>No tags available</div>";
+    dropdown.innerHTML = `<div style="padding:5px;">${t('no_tags_available') || 'No tags available'}</div>`;
   }
 }
 
@@ -193,9 +237,7 @@ function updateCustomTagDropdown(filterText = "") {
   if (!dropdown) return;
   dropdown.innerHTML = "";
   let tags = window.globalTags || [];
-  if (filterText) {
-    tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase()));
-  }
+  if (filterText) tags = tags.filter(tag => tag.name.toLowerCase().includes(filterText.toLowerCase()));
   if (tags.length > 0) {
     tags.forEach(tag => {
       const item = document.createElement("div");
@@ -209,8 +251,10 @@ function updateCustomTagDropdown(filterText = "") {
       `;
       item.addEventListener("click", function(e){
         if (e.target.classList.contains('global-remove')) return;
-        document.getElementById("tagNameInput").value = tag.name;
-        document.getElementById("tagColorInput").value = tag.color;
+        const n = document.getElementById("tagNameInput");
+        const c = document.getElementById("tagColorInput");
+        if (n) n.value = tag.name;
+        if (c) c.value = tag.color;
       });
       item.querySelector('.global-remove').addEventListener("click", function(e){
         e.stopPropagation();
@@ -219,16 +263,16 @@ function updateCustomTagDropdown(filterText = "") {
       dropdown.appendChild(item);
     });
   } else {
-    dropdown.innerHTML = "<div style='padding:5px;'>No tags available</div>";
+    dropdown.innerHTML = `<div style="padding:5px;">${t('no_tags_available') || 'No tags available'}</div>`;
   }
 }
-    
+
 // Update the modal display to show current tags on the file.
 function updateTagModalDisplay(file) {
   const container = document.getElementById('currentTags');
   if (!container) return;
-  container.innerHTML = '<strong>Current Tags:</strong> ';
-  if (file.tags && file.tags.length > 0) {
+  container.innerHTML = `<strong>${t('current_tags') || 'Current Tags'}:</strong> `;
+  if (file?.tags?.length) {
     file.tags.forEach(tag => {
       const tagElem = document.createElement('span');
       tagElem.textContent = tag.name;
@@ -239,102 +283,65 @@ function updateTagModalDisplay(file) {
       tagElem.style.borderRadius = '3px';
       tagElem.style.display = 'inline-block';
       tagElem.style.position = 'relative';
-      
       const removeIcon = document.createElement('span');
       removeIcon.textContent = ' ✕';
       removeIcon.style.fontWeight = 'bold';
       removeIcon.style.marginLeft = '3px';
       removeIcon.style.cursor = 'pointer';
-      
       removeIcon.addEventListener('click', (e) => {
         e.stopPropagation();
         removeTagFromFile(file, tag.name);
       });
-      
       tagElem.appendChild(removeIcon);
       container.appendChild(tagElem);
     });
   } else {
-    container.innerHTML += 'None';
+    container.innerHTML += (t('none') || 'None');
   }
 }
 
 function removeTagFromFile(file, tagName) {
-  file.tags = file.tags.filter(t => t.name.toLowerCase() !== tagName.toLowerCase());
+  file.tags = (file.tags || []).filter(tg => tg.name.toLowerCase() !== tagName.toLowerCase());
   updateTagModalDisplay(file);
   updateFileRowTagDisplay(file);
   saveFileTags(file);
 }
 
-/**
- * Remove a tag from the global tag store.
- * This function updates window.globalTags and calls the backend endpoint
- * to remove the tag from the persistent store.
- */
 function removeGlobalTag(tagName) {
-  window.globalTags = window.globalTags.filter(t => t.name.toLowerCase() !== tagName.toLowerCase());
+  window.globalTags = (window.globalTags || []).filter(t => t.name.toLowerCase() !== tagName.toLowerCase());
   localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
   updateCustomTagDropdown();
   updateMultiCustomTagDropdown();
   saveGlobalTagRemoval(tagName);
 }
 
-// NEW: Save global tag removal to the server.
 function saveGlobalTagRemoval(tagName) {
   fetch("/api/file/saveFileTag.php", {
     method: "POST",
     credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-Token": window.csrfToken
-    },
-    body: JSON.stringify({
-      folder: "root",
-      file: "global",
-      deleteGlobal: true,
-      tagToDelete: tagName,
-      tags: []
-    })
+    headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
+    body: JSON.stringify({ folder: "root", file: "global", deleteGlobal: true, tagToDelete: tagName, tags: [] })
   })
-    .then(response => response.json())
-    .then(data => {
-      if (data.success) {
-        console.log("Global tag removed:", tagName);
-        if (data.globalTags) {
-          window.globalTags = data.globalTags;
-          localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
-          updateCustomTagDropdown();
-          updateMultiCustomTagDropdown();
-        }
-      } else {
-        console.error("Error removing global tag:", data.error);
-      }
-    })
-    .catch(err => {
-      console.error("Error removing global tag:", err);
-    });
+  .then(r => r.json())
+  .then(data => {
+    if (data.success && data.globalTags) {
+      window.globalTags = data.globalTags;
+      localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
+      updateCustomTagDropdown();
+      updateMultiCustomTagDropdown();
+    } else if (!data.success) {
+      console.error("Error removing global tag:", data.error);
+    }
+  })
+  .catch(err => console.error("Error removing global tag:", err));
 }
-  
-// Global store for reusable tags.
-window.globalTags = window.globalTags || [];
-if (localStorage.getItem('globalTags')) {
-  try {
-    window.globalTags = JSON.parse(localStorage.getItem('globalTags'));
-  } catch (e) { }
-}
-  
-// New function to load global tags from the server's persistent JSON.
+
+// -------------------- exports kept from your original --------------------
 export function loadGlobalTags() {
   fetch("/api/file/getFileTag.php", { credentials: "include" })
-    .then(response => {
-      if (!response.ok) {
-        // If the file doesn't exist, assume there are no global tags.
-        return [];
-      }
-      return response.json();
-    })
+    .then(r => r.ok ? r.json() : [])
     .then(data => {
-      window.globalTags = data;
+      window.globalTags = data || [];
       localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
       updateCustomTagDropdown();
       updateMultiCustomTagDropdown();
@@ -346,142 +353,113 @@ export function loadGlobalTags() {
       updateMultiCustomTagDropdown();
     });
 }
-  
 loadGlobalTags();
-  
-// Add (or update) a tag in the file object.
+
 export function addTagToFile(file, tag) {
-  if (!file.tags) {
-    file.tags = [];
-  }
-  const exists = file.tags.find(t => t.name.toLowerCase() === tag.name.toLowerCase());
-  if (exists) {
-    exists.color = tag.color;
-  } else {
-    file.tags.push(tag);
-  }
-  const globalExists = window.globalTags.find(t => t.name.toLowerCase() === tag.name.toLowerCase());
+  if (!file.tags) file.tags = [];
+  const exists = file.tags.find(tg => tg.name.toLowerCase() === tag.name.toLowerCase());
+  if (exists) exists.color = tag.color; else file.tags.push(tag);
+
+  const globalExists = (window.globalTags || []).find(tg => tg.name.toLowerCase() === tag.name.toLowerCase());
   if (!globalExists) {
     window.globalTags.push(tag);
     localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
   }
 }
-  
-// Update the file row (in table view) to show tag badges.
+
 export function updateFileRowTagDisplay(file) {
   const rows = document.querySelectorAll(`[id^="file-row-${encodeURIComponent(file.name)}"]`);
-  console.log('Updating tags for rows:', rows);
   rows.forEach(row => {
     let cell = row.querySelector('.file-name-cell');
-    if (cell) {
-      let badgeContainer = cell.querySelector('.tag-badges');
-      if (!badgeContainer) {
-        badgeContainer = document.createElement('div');
-        badgeContainer.className = 'tag-badges';
-        badgeContainer.style.display = 'inline-block';
-        badgeContainer.style.marginLeft = '5px';
-        cell.appendChild(badgeContainer);
-      }
-      badgeContainer.innerHTML = '';
-      if (file.tags && file.tags.length > 0) {
-        file.tags.forEach(tag => {
-          const badge = document.createElement('span');
-          badge.textContent = tag.name;
-          badge.style.backgroundColor = tag.color;
-          badge.style.color = '#fff';
-          badge.style.padding = '2px 4px';
-          badge.style.marginRight = '2px';
-          badge.style.borderRadius = '3px';
-          badge.style.fontSize = '0.8em';
-          badge.style.verticalAlign = 'middle';
-          badgeContainer.appendChild(badge);
-        });
-      }
+    if (!cell) return;
+    let badgeContainer = cell.querySelector('.tag-badges');
+    if (!badgeContainer) {
+      badgeContainer = document.createElement('div');
+      badgeContainer.className = 'tag-badges';
+      badgeContainer.style.display = 'inline-block';
+      badgeContainer.style.marginLeft = '5px';
+      cell.appendChild(badgeContainer);
     }
+    badgeContainer.innerHTML = '';
+    (file.tags || []).forEach(tag => {
+      const badge = document.createElement('span');
+      badge.textContent = tag.name;
+      badge.style.backgroundColor = tag.color;
+      badge.style.color = '#fff';
+      badge.style.padding = '2px 4px';
+      badge.style.marginRight = '2px';
+      badge.style.borderRadius = '3px';
+      badge.style.fontSize = '0.8em';
+      badge.style.verticalAlign = 'middle';
+      badgeContainer.appendChild(badge);
+    });
   });
 }
-  
+
 export function initTagSearch() {
   const searchInput = document.getElementById('searchInput');
-  if (searchInput) {
-    let tagSearchInput = document.getElementById('tagSearchInput');
-    if (!tagSearchInput) {
-      tagSearchInput = document.createElement('input');
-      tagSearchInput.id = 'tagSearchInput';
-      tagSearchInput.placeholder = 'Filter by tag';
-      tagSearchInput.style.marginLeft = '10px';
-      tagSearchInput.style.padding = '5px';
-      searchInput.parentNode.insertBefore(tagSearchInput, searchInput.nextSibling);
-      tagSearchInput.addEventListener('input', () => {
-        window.currentTagFilter = tagSearchInput.value.trim().toLowerCase();
-        if (window.currentFolder) {
-          renderFileTable(window.currentFolder);
-        }
-      });
-    }
-  }
-}
-  
-export function filterFilesByTag(files) {
-  if (window.currentTagFilter && window.currentTagFilter !== '') {
-    return files.filter(file => {
-      if (file.tags && file.tags.length > 0) {
-        return file.tags.some(tag => tag.name.toLowerCase().includes(window.currentTagFilter));
-      }
-      return false;
+  if (!searchInput) return;
+  let tagSearchInput = document.getElementById('tagSearchInput');
+  if (!tagSearchInput) {
+    tagSearchInput = document.createElement('input');
+    tagSearchInput.id = 'tagSearchInput';
+    tagSearchInput.placeholder = t('filter_by_tag') || 'Filter by tag';
+    tagSearchInput.style.marginLeft = '10px';
+    tagSearchInput.style.padding = '5px';
+    searchInput.parentNode.insertBefore(tagSearchInput, searchInput.nextSibling);
+    tagSearchInput.addEventListener('input', () => {
+      window.currentTagFilter = tagSearchInput.value.trim().toLowerCase();
+      if (window.currentFolder) renderFileTable(window.currentFolder);
     });
   }
-  return files;
 }
-  
+
+export function filterFilesByTag(files) {
+  const q = (window.currentTagFilter || '').trim().toLowerCase();
+  if (!q) return files;
+  return files.filter(file => (file.tags || []).some(tag => tag.name.toLowerCase().includes(q)));
+}
+
 function updateGlobalTagList() {
   const dataList = document.getElementById("globalTagList");
-  if (dataList) {
-    dataList.innerHTML = "";
-    window.globalTags.forEach(tag => {
-      const option = document.createElement("option");
-      option.value = tag.name;
-      dataList.appendChild(option);
-    });
-  }
+  if (!dataList) return;
+  dataList.innerHTML = "";
+  (window.globalTags || []).forEach(tag => {
+    const option = document.createElement("option");
+    option.value = tag.name;
+    dataList.appendChild(option);
+  });
 }
-  
+
 export function saveFileTags(file, deleteGlobal = false, tagToDelete = null) {
   const folder = file.folder || "root";
-  const payload = {
-    folder: folder,
-    file: file.name,
-    tags: file.tags
-  };
-  if (deleteGlobal && tagToDelete) {
-    payload.file = "global";
-    payload.deleteGlobal = true;
-    payload.tagToDelete = tagToDelete;
-  }
+  const payload = deleteGlobal && tagToDelete ? {
+    folder: "root",
+    file: "global",
+    deleteGlobal: true,
+    tagToDelete,
+    tags: []
+  } : { folder, file: file.name, tags: file.tags };
+
   fetch("/api/file/saveFileTag.php", {
     method: "POST",
     credentials: "include",
-    headers: {
-      "Content-Type": "application/json",
-      "X-CSRF-Token": window.csrfToken
-    },
+    headers: { "Content-Type": "application/json", "X-CSRF-Token": window.csrfToken },
     body: JSON.stringify(payload)
   })
-    .then(response => response.json())
+    .then(r => r.json())
     .then(data => {
       if (data.success) {
-        console.log("Tags saved:", data);
         if (data.globalTags) {
           window.globalTags = data.globalTags;
           localStorage.setItem('globalTags', JSON.stringify(window.globalTags));
           updateCustomTagDropdown();
           updateMultiCustomTagDropdown();
         }
+        updateGlobalTagList();
       } else {
         console.error("Error saving tags:", data.error);
       }
     })
-    .catch(err => {
-      console.error("Error saving tags:", err);
-    });
+    .catch(err => console.error("Error saving tags:", err));
 }

public/js/folderShareModal.js

@@ -1,6 +1,6 @@
 // js/folderShareModal.js
-import { escapeHTML, showToast } from './domUtils.js';
-import { t } from './i18n.js';
+import { escapeHTML, showToast } from './domUtils.js?v={{APP_QVER}}';
+import { t } from './i18n.js?v={{APP_QVER}}';
 
 export function openFolderShareModal(folder) {
   // Remove any existing modal

public/js/i18n.js

@@ -216,6 +216,7 @@ const translations = {
     "spanish": "Spanish",
     "french": "French",
     "german": "German",
+    "chinese_simplified": "Chinese (Simplified)",
     "use_totp_code_instead": "Use TOTP Code instead",
     "submit_recovery_code": "Submit Recovery Code",
     "please_enter_recovery_code": "Please enter your recovery code.",
@@ -246,7 +247,7 @@ const translations = {
     "login_options": "Login Options",
     "disable_login_form": "Disable Login Form",
     "disable_basic_http_auth": "Disable Basic HTTP Auth",
-    "disable_oidc_login": "Disable OIDC Login",
+    "disable_oidc_login": "Disable OIDC Login (OIDC Config Required to enable)",
     "save_settings": "Save Settings",
     "at_least_one_login_method": "At least one login method must remain enabled.",
     "settings_updated_successfully": "Settings updated successfully.",
@@ -275,7 +276,61 @@ const translations = {
     "newfile_placeholder": "New file name",
     "file_created_successfully": "File created successfully!",
     "error_creating_file": "Error creating file",
-    "file_created":          "File created successfully!"
+    "file_created": "File created successfully!",
+    "no_access_to_resource": "You do not have access to this resource.",
+    "can_share": "Can Share",
+    "bypass_ownership": "Bypass Ownership",
+    "error_loading_user_grants": "Error loading user grants",
+    "click_to_edit": "Click to edit",
+    "folder_access": "Folder Access",
+    "move_folder": "Move Folder",
+    "move_folder_message": "Select a destination folder to move this folder to:",
+    "move_folder_title": "Move this folder",
+    "move_folder_success": "Folder moved successfully.",
+    "move_folder_error": "Error moving folder.",
+    "move_folder_invalid": "Invalid source or destination folder.",
+    "move_folder_denied": "You do not have permission to move this folder.",
+    "move_folder_same_dest": "Destination cannot be the source or one of its subfolders.",
+    "move_folder_same_owner": "Source and destination must have the same owner.",
+    "move_folder_confirm": "Are you sure you want to move this folder?",
+    "move_folder_select_dest": "Select a destination folder",
+    "move_folder_select_dest_help": "Choose where this folder should be moved to.",
+    "acl_move_folder_label": "Move Folder (source)",
+    "acl_move_folder_help": "Allows moving this folder to a different parent. Requires Manage or Ownership on the folder.",
+    "acl_move_in_label": "Allow Moves Into This Folder (destination)",
+    "acl_move_in_help": "Allows items or folders from elsewhere to be moved into this folder. Requires Manage on the destination folder.",
+    "acl_move_folder_info": "Moving folders is restricted to folder owners or managers. Destination folders must also allow moves in.",
+    "context_move_folder": "Move Folder...",
+    "context_move_here": "Move Here",
+    "context_move_cancel": "Cancel Move",
+    "mark_as_viewed": "Mark as viewed",
+    "viewed": "Viewed",
+    "resumed_from": "Resumed from",
+    "clear_progress": "Clear progress",
+    "marked_viewed": "Marked as viewed",
+    "progress_cleared": "Progress cleared",
+    "previous": "Previous",
+    "next": "Next",
+    "watched": "Watched",
+    "reset_progress": "Reset Progress",
+    "color_folder": "Color folder",
+    "choose_color": "Choose a color",
+    "reset_default": "Reset",
+    "save_color": "Save",
+    "folder_color_saved": "Folder color saved.",
+    "folder_color_cleared": "Folder color reset.",
+    "load_more": "Load more",
+    "loading": "Loading...",
+    "no_access": "You do not have access to this resource.",
+    "please_select_valid_folder": "Please select a valid folder.",
+    "folder_help_click_view": "Click a folder in the tree to view its files.",
+    "folder_help_expand_chevrons": "Use chevrons to expand/collapse. Locked folders (padlock) can expand but can’t be opened.",
+    "folder_help_context_menu": "Right-click a folder for quick actions: Create, Move, Rename, Share, Color, Delete.",
+    "folder_help_drag_drop": "Drag a folder onto another folder or a breadcrumb to move it.",
+    "folder_help_load_more": "For long lists, click “Load more” to fetch the next page of folders.",
+    "folder_help_last_folder": "Your last opened folder is remembered. If you lose access, we pick the first allowed folder automatically.",
+    "folder_help_breadcrumbs": "Use the breadcrumb to jump up the path. You can also drop onto a breadcrumb.",
+    "folder_help_permissions": "Buttons enable/disable based on your permissions for the selected folder."
   },
   es: {
     "please_log_in_to_continue": "Por favor, inicie sesión para continuar.",
@@ -458,6 +513,7 @@ const translations = {
     "spanish": "Español",
     "french": "Francés",
     "german": "Alemán",
+    "chinese_simplified": "Chino (simplificado)",
     "use_totp_code_instead": "Usar código TOTP en su lugar",
     "submit_recovery_code": "Enviar código de recuperación",
     "please_enter_recovery_code": "Por favor, ingrese su código de recuperación.",
@@ -686,6 +742,7 @@ const translations = {
     "spanish": "Espagnol",
     "french": "Français",
     "german": "Allemand",
+    "chinese_simplified": "Chinois (simplifié)",
     "use_totp_code_instead": "Utiliser le code TOTP à la place",
     "submit_recovery_code": "Soumettre le code de récupération",
     "please_enter_recovery_code": "Veuillez entrer votre code de récupération.",
@@ -923,6 +980,7 @@ const translations = {
     "spanish": "Spanisch",
     "french": "Französisch",
     "german": "Deutsch",
+    "chinese_simplified": "Chinesisch (vereinfacht)",
     "use_totp_code_instead": "Stattdessen TOTP-Code verwenden",
     "submit_recovery_code": "Wiederherstellungscode absenden",
     "please_enter_recovery_code": "Bitte geben Sie Ihren Wiederherstellungscode ein.",
@@ -972,7 +1030,275 @@ const translations = {
     "show": "Zeige",
     "items_per_page": "elemente pro seite",
     "columns": "Spalten"
+  },
+  "zh-CN": {
+    "please_log_in_to_continue": "请登录以继续。",
+    "no_files_selected": "未选择文件。",
+    "confirm_delete_files": "确定要删除所选的 {count} 个文件吗？",
+    "element_not_found": "未找到 ID 为 \"{id}\" 的元素。",
+    "search_placeholder": "搜索文件、标签和上传者…",
+    "search_placeholder_advanced": "高级搜索：文件、标签、上传者和内容…",
+    "basic_search_tooltip": "基础搜索：按文件名、标签和上传者搜索。",
+    "advanced_search_tooltip": "高级搜索：包括文件内容、文件名、标签和上传者。",
+    "file_name": "文件名",
+    "date_modified": "修改日期",
+    "upload_date": "上传日期",
+    "file_size": "文件大小",
+    "uploader": "上传者",
+    "enter_totp_code": "输入 TOTP 验证码",
+    "use_recovery_code_instead": "改用恢复代码",
+    "enter_recovery_code": "输入恢复代码",
+    "editing": "正在编辑",
+    "decrease_font": "A-",
+    "increase_font": "A+",
+    "save": "保存",
+    "close": "关闭",
+    "no_files_found": "未找到文件。",
+    "switch_to_table_view": "切换到表格视图",
+    "switch_to_gallery_view": "切换到图库视图",
+    "share_file": "分享文件",
+    "set_expiration": "设置到期时间：",
+    "password_optional": "密码（可选）：",
+    "generate_share_link": "生成分享链接",
+    "shareable_link": "可分享链接：",
+    "copy_link": "复制链接",
+    "tag_file": "标记文件",
+    "tag_name": "标签名称：",
+    "tag_color": "标签颜色：",
+    "save_tag": "保存标签",
+    "light_mode": "浅色模式",
+    "dark_mode": "深色模式",
+    "upload_instruction": "将文件/文件夹拖到此处，或点击“选择文件”",
+    "no_files_selected_default": "未选择文件",
+    "choose_files": "选择文件",
+    "delete_selected": "删除所选",
+    "copy_selected": "复制所选",
+    "move_selected": "移动所选",
+    "tag_selected": "标记所选",
+    "download_zip": "下载 ZIP",
+    "extract_zip": "解压 ZIP",
+    "preview": "预览",
+    "edit": "编辑",
+    "rename": "重命名",
+    "trash_empty": "回收站为空。",
+    "no_trash_selected": "未选择要还原的回收站项目。",
+
+    "title": "FileRise",
+    "header_title": "FileRise",
+    "header_title_text": "标题文本",
+    "logout": "退出登录",
+    "change_password": "更改密码",
+    "restore_text": "还原或",
+    "delete_text": "删除回收站项目",
+    "restore_selected": "还原所选",
+    "restore_all": "全部还原",
+    "delete_selected_trash": "删除所选",
+    "delete_all": "全部删除",
+    "upload_header": "上传文件/文件夹",
+
+    "folder_navigation": "文件夹导航与管理",
+    "create_folder": "创建文件夹",
+    "create_folder_title": "创建文件夹",
+    "enter_folder_name": "输入文件夹名称",
+    "cancel": "取消",
+    "create": "创建",
+    "rename_folder": "重命名文件夹",
+    "rename_folder_title": "重命名文件夹",
+    "rename_folder_placeholder": "输入新的文件夹名称",
+    "delete_folder": "删除文件夹",
+    "delete_folder_title": "删除文件夹",
+    "delete_folder_message": "确定要删除此文件夹吗？",
+    "folder_help": "文件夹帮助",
+    "folder_help_item_1": "点击文件夹以查看其中的文件。",
+    "folder_help_item_2": "使用 [-] 折叠，使用 [+] 展开文件夹。",
+    "folder_help_item_3": "选择一个文件夹并点击“创建文件夹”以添加子文件夹。",
+    "folder_help_item_4": "要重命名或删除文件夹，请选择后点击相应按钮。",
+
+    "actions": "操作",
+    "file_list_title": "文件列表（根目录）",
+    "files_in": "文件位于",
+    "delete_files": "删除文件",
+    "delete_selected_files_title": "删除所选文件",
+    "delete_files_message": "确定要删除所选文件吗？",
+    "copy_files": "复制文件",
+    "copy_files_title": "复制所选文件",
+    "copy_files_message": "选择目标文件夹以复制所选文件：",
+    "move_files": "移动文件",
+    "move_files_title": "移动所选文件",
+    "move_files_message": "选择目标文件夹以移动所选文件：",
+    "move": "移动",
+    "extract_zip_button": "解压 ZIP",
+    "download_zip_title": "将所选文件打包为 ZIP 下载",
+    "download_zip_prompt": "输入 ZIP 文件名：",
+    "zip_placeholder": "files.zip",
+    "share": "分享",
+    "total_files": "文件总数",
+    "total_size": "总大小",
+    "prev": "上一页",
+    "next": "下一页",
+    "page": "第",
+    "of": "页，共",
+
+    "login": "登录",
+    "remember_me": "记住我",
+    "login_oidc": "使用 OIDC 登录",
+    "basic_http_login": "使用基本 HTTP 登录",
+
+    "change_password_title": "更改密码",
+    "old_password": "旧密码",
+    "new_password": "新密码",
+    "confirm_new_password": "确认新密码",
+
+    "create_new_user_title": "创建新用户",
+    "username": "用户名：",
+    "password": "密码：",
+    "enter_password": "密码",
+    "preparing_download": "正在准备下载…",
+    "download_file": "下载文件",
+    "confirm_or_change_filename": "确认或修改下载文件名：",
+    "filename": "文件名",
+    "download": "下载",
+    "grant_admin": "授予管理员权限",
+    "save_user": "保存用户",
+
+    "remove_user_title": "删除用户",
+    "select_user_remove": "选择要删除的用户：",
+    "delete_user": "删除用户",
+
+    "rename_file_title": "重命名文件",
+    "rename_file_placeholder": "输入新的文件名",
+
+    "share_folder": "分享文件夹",
+    "allow_uploads": "允许上传",
+    "share_link_generated": "已生成分享链接",
+    "error_generating_share_link": "生成分享链接时出错",
+    "custom": "自定义",
+    "duration": "持续时间",
+    "seconds": "秒",
+    "minutes": "分钟",
+    "hours": "小时",
+    "days": "天",
+    "custom_duration_warning": "⚠️ 使用较长的到期时间可能存在安全风险，请谨慎使用。",
+
+    "folder_share": "分享文件夹",
+
+    "yes": "是",
+    "no": "否",
+    "unsaved_changes_confirm": "您有未保存的更改，确定要关闭而不保存吗？",
+    "delete": "删除",
+    "upload": "上传",
+    "copy": "复制",
+    "extract": "解压",
+    "user": "用户：",
+    "unknown_error": "未知错误",
+    "link_copied": "链接已复制到剪贴板",
+    "weeks": "周",
+    "months": "月",
+
+    "dark_mode_toggle": "深色模式",
+    "light_mode_toggle": "浅色模式",
+    "switch_to_light_mode": "切换到浅色模式",
+    "switch_to_dark_mode": "切换到深色模式",
+
+    "header_settings": "标题设置",
+    "shared_max_upload_size_bytes_title": "共享最大上传大小",
+    "shared_max_upload_size_bytes": "共享最大上传大小（字节）",
+    "max_bytes_shared_uploads_note": "请输入共享文件夹上传的最大允许字节数",
+    "manage_shared_links": "管理分享链接",
+    "folder_shares": "文件夹分享",
+    "file_shares": "文件分享",
+    "loading": "正在加载…",
+    "error_loading_share_links": "加载分享链接时出错",
+    "share_deleted_successfully": "分享已成功删除",
+    "error_deleting_share": "删除分享时出错",
+    "password_protected": "受密码保护",
+    "no_shared_links_available": "暂无可用的分享链接",
+
+    "admin_panel": "管理员面板",
+    "user_panel": "用户面板",
+    "user_settings": "用户设置",
+    "save_profile_picture": "保存头像",
+    "please_select_picture": "请选择图片",
+    "profile_picture_updated": "头像已更新",
+    "error_updating_picture": "更新头像时出错",
+    "trash_restore_delete": "回收站恢复/删除",
+    "totp_settings": "TOTP 设置",
+    "enable_totp": "启用 TOTP",
+    "language": "语言",
+    "select_language": "选择语言",
+    "english": "英语",
+    "spanish": "西班牙语",
+    "french": "法语",
+    "german": "德语",
+    "chinese_simplified": "简体中文",
+    "use_totp_code_instead": "改用 TOTP 验证码",
+    "submit_recovery_code": "提交恢复代码",
+    "please_enter_recovery_code": "请输入您的恢复代码。",
+    "recovery_code_verification_failed": "恢复代码验证失败",
+    "error_verifying_recovery_code": "验证恢复代码时出错",
+    "totp_verification_failed": "TOTP 验证失败",
+    "error_verifying_totp_code": "验证 TOTP 代码时出错",
+    "totp_setup": "TOTP 设置",
+    "scan_qr_code": "请使用验证器应用扫描此二维码。",
+    "enter_totp_confirmation": "输入应用生成的 6 位验证码以确认设置：",
+    "confirm": "确认",
+    "please_enter_valid_code": "请输入有效的 6 位验证码。",
+    "totp_enabled_successfully": "TOTP 启用成功。",
+    "error_generating_recovery_code": "生成恢复代码时出错",
+    "error_loading_qr_code": "加载二维码时出错。",
+    "error_disabling_totp_setting": "禁用 TOTP 设置时出错",
+    "user_management": "用户管理",
+    "add_user": "添加用户",
+    "remove_user": "删除用户",
+    "user_permissions": "用户权限",
+    "oidc_configuration": "OIDC 配置",
+    "oidc_provider_url": "OIDC 提供者 URL",
+    "oidc_client_id": "OIDC 客户端 ID",
+    "oidc_client_secret": "OIDC 客户端密钥",
+    "oidc_redirect_uri": "OIDC 重定向 URI",
+    "global_totp_settings": "全局 TOTP 设置",
+    "global_otpauth_url": "全局 OTPAuth URL",
+    "login_options": "登录选项",
+    "disable_login_form": "禁用登录表单",
+    "disable_basic_http_auth": "禁用基本 HTTP 认证",
+    "disable_oidc_login": "禁用 OIDC 登录",
+    "save_settings": "保存设置",
+    "at_least_one_login_method": "至少保留一种登录方式。",
+    "settings_updated_successfully": "设置已成功更新。",
+    "error_updating_settings": "更新设置时出错",
+    "user_permissions_updated_successfully": "用户权限已成功更新。",
+    "error_updating_permissions": "更新权限时出错",
+    "no_users_found": "未找到用户。",
+    "user_folder_only": "仅限用户文件夹",
+    "read_only": "只读",
+    "disable_upload": "禁用上传",
+    "error_loading_users": "加载用户时出错",
+    "save_permissions": "保存权限",
+    "your_recovery_code": "您的恢复代码",
+    "please_save_recovery_code": "请妥善保存此代码。此代码仅显示一次且只能使用一次。",
+    "ok": "确定",
+    "show": "显示",
+    "items_per_page": "每页项目数",
+    "columns": "列",
+    "row_height": "行高",
+    "api_docs": "API 文档",
+    "show_folders_above_files": "在文件上方显示文件夹",
+    "display": "显示",
+    "create_file": "创建文件",
+    "create_new_file": "创建新文件",
+    "enter_file_name": "输入文件名",
+    "newfile_placeholder": "新文件名",
+    "file_created_successfully": "文件创建成功！",
+    "error_creating_file": "创建文件时出错",
+    "file_created": "文件创建成功！",
+    "no_access_to_resource": "您无权访问此资源。",
+    "can_share": "可分享",
+    "bypass_ownership": "绕过所有权限制",
+    "error_loading_user_grants": "加载用户授权时出错",
+    "click_to_edit": "点击编辑",
+    "folder_access": "文件夹访问"
   }
+
 };
 
 let currentLocale = 'en';

public/js/mobile/switcher.js

@@ -0,0 +1,365 @@
+(function(){
+  const isCap = !!window.Capacitor || /Capacitor/i.test(navigator.userAgent);
+  if (!isCap) return;
+  // NOTE: allow running inside Capacitor (origin "capacitor://localhost")
+
+  const Plugins = (window.Capacitor && window.Capacitor.Plugins) || {};
+  const Pref = Plugins.Preferences ? {
+    get:   ({key}) => Plugins.Preferences.get({key}),
+    set:   ({key,value}) => Plugins.Preferences.set({key,value}),
+    remove:({key}) => Plugins.Preferences.remove({key})
+  } : {
+    get:    async ({key}) => ({ value: localStorage.getItem(key) || null }),
+    set:    async ({key,value}) => localStorage.setItem(key, value),
+    remove: async ({key}) => localStorage.removeItem(key)
+  };
+  const Http = (Plugins.Http || Plugins.CapacitorHttp) || null;
+
+  const K_INST='fr_instances_v1', K_ACTIVE='fr_active_v1', K_STATUS='fr_status_v1';
+
+  const $ = s => document.querySelector(s);
+
+  // Safe element builder: attributes only, children as nodes/strings (no innerHTML)
+  const el = (tag, attrs = {}, children = []) => {
+    const n = document.createElement(tag);
+    for (const k in attrs) n.setAttribute(k, attrs[k]);
+    (Array.isArray(children) ? children : [children]).forEach(c => {
+      if (c == null) return;
+      n.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
+    });
+    return n;
+  };
+
+  // Normalize to http(s), strip creds, collapse trailing slashes
+  const normalize = (u) => {
+    if (!u) return '';
+    let v = u.trim();
+    if (!/^https?:\/\//i.test(v)) v = 'https://' + v;
+    try {
+      const url = new URL(v);
+      if (!/^https?:$/.test(url.protocol)) return '';
+      url.username = '';
+      url.password = '';
+      url.pathname = url.pathname.replace(/\/+$/,'');
+      return url.toString();
+    } catch { return ''; }
+  };
+
+  // Append/overwrite a query param safely on a normalized URL
+  const withParam = (base, k, v) => {
+    try {
+      const u = new URL(normalize(base));
+      u.searchParams.set(k, v);
+      return u.toString();
+    } catch { return ''; }
+  };
+
+  const host = u => {
+    try { return new URL(normalize(u)).hostname; } catch { return ''; }
+  };
+  const originOf = u => {
+    try { return new URL(normalize(u)).origin; } catch { return ''; }
+  };
+  const faviconUrl = u => {
+    try { const x = new URL(normalize(u)); return x.origin + '/favicon.ico'; } catch { return ''; }
+  };
+  const initialsIcon = (hn='FR') => {
+    const t=(hn||'FR').replace(/^www\./,'').slice(0,2).toUpperCase();
+    const svg=`<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64'>
+      <rect width='100%' height='100%' rx='12' ry='12' fill='#2196F3'/>
+      <text x='50%' y='54%' text-anchor='middle' font-family='system-ui,-apple-system,Segoe UI,Roboto,sans-serif'
+            font-size='28' font-weight='700' fill='#fff'>${t}</text></svg>`;
+    return 'data:image/svg+xml;utf8,'+encodeURIComponent(svg);
+  };
+
+  async function getStatusCache(){
+    const raw=(await Pref.get({key:K_STATUS})).value;
+    try { return raw ? JSON.parse(raw) : {}; } catch { return {}; }
+  }
+  async function writeStatus(origin, ok){
+    const cache=await getStatusCache();
+    cache[origin]={ ok, ts: Date.now() };
+    await Pref.set({key:K_STATUS, value:JSON.stringify(cache)});
+  }
+
+  async function verifyFileRise(u, timeout=5000){
+    if (!u || !Http) return {ok:false};
+    const base = normalize(u), org = originOf(base);
+    const tryJson = async (url, validate) => {
+      try{
+        const r = await Http.get({ url, connectTimeout:timeout, readTimeout:timeout, headers:{'Accept':'application/json','Cache-Control':'no-cache'} });
+        if (r && r.data) {
+          const j = (typeof r.data === 'string') ? JSON.parse(r.data) : r.data;
+          return !!validate(j);
+        }
+      }catch(_){}
+      return false;
+    };
+    if (await tryJson(org + '/siteConfig.json', j => j && (j.appTitle || j.headerTitle || j.auth || j.oidc || j.basicAuth))) return {ok:true, origin:org};
+    if (await tryJson(org + '/api/ping.php',    j => j && (j.ok===true || j.status==='ok' || j.pong || j.app==='FileRise'))) return {ok:true, origin:org};
+    if (await tryJson(org + '/api/version.php', j => j && (j.version || j.app==='FileRise'))) return {ok:true, origin:org};
+    try{
+      const r = await Http.get({ url: org+'/', connectTimeout:timeout, readTimeout:timeout, headers:{'Cache-Control':'no-cache'} });
+      if (typeof r.data === 'string' && /FileRise/i.test(r.data)) return {ok:true, origin:org};
+    }catch(_){}
+    return {ok:false, origin:org};
+  }
+
+  async function probeReachable(u, timeout=3000){
+    try{
+      const base = new URL(normalize(u)).origin, ico=base+'/favicon.ico';
+      if (Http){
+        try{ const r=await Http.get({ url: ico, connectTimeout:timeout, readTimeout:timeout, headers:{'Cache-Control':'no-cache'} });
+             if (r && typeof r.status==='number' && r.status<500) return true; }catch(e){}
+        try{ const r2=await Http.get({ url: base+'/', connectTimeout:timeout, readTimeout:timeout, headers:{'Cache-Control':'no-cache'} });
+             if (r2 && typeof r2.status==='number' && r2.status<500) return true; }catch(e){}
+        return false;
+      }
+      return await new Promise(res=>{
+        const img=new Image(), t=setTimeout(()=>done(false), timeout);
+        function done(ok){ clearTimeout(t); img.onload=img.onerror=null; res(ok); }
+        img.onload=()=>done(true); img.onerror=()=>done(false);
+        img.src = ico + (ico.includes('?')?'&':'?') + '__fr=' + Date.now();
+      });
+    }catch{ return false; }
+  }
+
+  async function loadInstances(){
+    const raw=(await Pref.get({key:K_INST})).value;
+    try { return raw ? JSON.parse(raw) : []; } catch { return []; }
+  }
+  async function saveInstances(list){
+    await Pref.set({key:K_INST, value:JSON.stringify(list)});
+  }
+  async function getActive(){ return (await Pref.get({key:K_ACTIVE})).value }
+  async function setActive(id){ await Pref.set({key:K_ACTIVE, value:id||''}) }
+
+  // ---- Styles (slide-up sheet + disabled buttons + safe-area) ----
+  if (!$('#frx-mobile-style')) {
+    const css = `
+      .frx-fab { position:fixed; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); width:52px; height:52px; border-radius:26px;
+        background: linear-gradient(180deg,#64B5F6,#2196F3 65%,#1976D2); color:#fff; display:grid; place-items:center;
+        box-shadow:0 10px 22px rgba(33,150,243,.38); z-index:2147483647; cursor:pointer; user-select:none; }
+      .frx-fab:active { transform: translateY(1px) scale(.98); }
+      .frx-fab svg { width:26px; height:26px; fill:white }
+      .frx-scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2147483645;opacity:0;visibility:hidden;transition:opacity .24s ease}
+      .frx-scrim.show{opacity:1;visibility:visible}
+      .frx-sheet{position:fixed;left:0;right:0;bottom:0;background:#0f172a;color:#e5e7eb;
+        border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -10px 30px rgba(0,0,0,.3);
+        z-index:2147483646;transform:translateY(100%);opacity:0;visibility:hidden;
+        transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; will-change:transform}
+      .frx-sheet.show{transform:translateY(0);opacity:1;visibility:visible}
+      .frx-sheet .hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
+      .frx-title{display:flex;align-items:center;gap:10px;font-weight:800}
+      .frx-title img{width:22px;height:22px}
+      .frx-list{max-height:60vh;overflow:auto;padding:8px 12px}
+      .frx-chip{border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;margin:8px 4px;background:rgba(255,255,255,.04)}
+      .frx-chip.active{outline:3px solid rgba(33,150,243,.35); border-color:#2196F3}
+      .frx-top{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px}
+      .frx-left{display:flex;gap:10px;align-items:center}
+      .frx-ico{width:20px;height:20px;border-radius:6px;overflow:hidden;background:#fff;display:grid;place-items:center}
+      .frx-ico img{width:100%;height:100%;object-fit:cover;display:block}
+      .frx-name{font-weight:800}
+      .frx-host{font-size:12px;opacity:.8;margin-top:2px}
+      .frx-status{display:flex;align-items:center;gap:6px;font-size:12px;opacity:.9}
+      .frx-dot{width:10px;height:10px;border-radius:50%;}
+      .frx-dot.on{background:#10B981;box-shadow:0 0 0 3px rgba(16,185,129,.18)}
+      .frx-dot.off{background:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}
+      .frx-actions{display:flex;gap:8px;flex-wrap:wrap}
+      .frx-btn{appearance:none;border:0;border-radius:10px;padding:10px 12px;font-weight:700;cursor:pointer;transition:.15s ease opacity, .15s ease filter}
+      .frx-btn[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(20%)}
+      .frx-primary{background:linear-gradient(180deg,#64B5F6,#2196F3);color:#fff}
+      .frx-ghost{background:transparent;color:#cbd5e1;border:1px solid rgba(255,255,255,.12)}
+      .frx-danger{background:transparent;color:#f44336;border:1px solid rgba(244,67,54,.45)}
+      .frx-row{display:flex;gap:8px;align-items:center}
+      .frx-field{display:grid;gap:6px;margin:8px 4px}
+      .frx-input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:transparent;color:inherit}
+      .frx-footer{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid rgba(255,255,255,.08)}
+      @media (pointer:coarse) { .frx-fab { width:58px; height:58px; border-radius:29px; } }
+    `;
+    document.head.appendChild(el('style',{id:'frx-mobile-style'}, css));
+  }
+
+  // ---- DOM skeleton (no innerHTML) ----
+  const scrim = el('div',{class:'frx-scrim', id:'frx-scrim'});
+  const sheet = el('div',{class:'frx-sheet', id:'frx-sheet'});
+  const hdr = el('div',{class:'hdr'});
+  const title = el('div',{class:'frx-title'});
+  const logo = el('img',{src:'/assets/logo.svg', alt:'FileRise'});
+  // inline handler via property, not attribute
+  logo.onerror = function(){ this.style.display='none'; };
+  title.append(logo, el('span',{},'FileRise Switcher'));
+  const hdrBtns = el('div',{class:'frx-row'},[
+    el('button',{class:'frx-btn frx-ghost', id:'frx-home'},'Home'),
+    el('button',{class:'frx-btn frx-ghost', id:'frx-close'},'Close')
+  ]);
+  hdr.append(title, hdrBtns);
+
+  const list = el('div',{class:'frx-list', id:'frx-list'});
+  const formWrap = el('div',{style:'padding:10px 12px'},[
+    el('div',{class:'frx-field'},[
+      el('input',{class:'frx-input', id:'frx-name', placeholder:'Display name (optional)'}),
+      el('input',{class:'frx-input', id:'frx-url',  placeholder:'https://files.example.com'})
+    ])
+  ]);
+  const footer = el('div',{class:'frx-footer'},[
+    el('button',{class:'frx-btn frx-ghost', id:'frx-add-cancel'},'Close'),
+    el('button',{class:'frx-btn frx-primary', id:'frx-add-save'},'+ Add server')
+  ]);
+  sheet.append(hdr, list, formWrap, footer);
+
+  const fab = el('div',{class:'frx-fab', id:'frx-fab', title:'Switch server'},[
+    el('svg',{viewBox:'0 0 24 24'},[ el('path',{d:'M7 7h10v2H7V7zm0 4h10v2H7v-2zm0 4h10v2H7v-2z'}) ])
+  ]);
+
+  document.body.appendChild(scrim);
+  document.body.appendChild(sheet);
+  document.body.appendChild(fab);
+
+  function show(){ scrim.classList.add('show'); sheet.classList.add('show'); fab.style.display='none'; }
+  function hide(){ scrim.classList.remove('show'); sheet.classList.remove('show'); fab.style.display='grid'; }
+  $('#frx-close').addEventListener('click', hide);
+  $('#frx-add-cancel').addEventListener('click', hide);
+  $('#frx-home').addEventListener('click', ()=>{ try{ location.href='capacitor://localhost/index.html'; }catch{} });
+  scrim.addEventListener('click', hide);
+  document.addEventListener('keydown', e=>{ if(e.key==='Escape') hide(); });
+
+  function chipNode(item, isActive){
+    const hv = host(item.url);
+    const node = el('div',{class:'frx-chip'+(isActive?' active':''), 'data-id':item.id});
+
+    const top  = el('div',{class:'frx-top'});
+    const left = el('div',{class:'frx-left'});
+
+    const ico  = el('div',{class:'frx-ico'});
+    const img  = new Image();
+    img.alt=''; img.src=item.favicon||faviconUrl(item.url)||initialsIcon(hv);
+    img.onerror=()=>{ img.onerror=null; img.src=initialsIcon(hv); };
+    ico.appendChild(img);
+
+    const txt  = el('div',{},[
+      el('div',{class:'frx-name'}, (item.name || hv)),
+      el('div',{class:'frx-host'}, hv)
+    ]);
+
+    left.appendChild(ico);
+    left.appendChild(txt);
+
+    const dot = el('span',{class:'frx-dot', id:`frx-dot-${item.id}`});
+    const lbl = el('span',{id:`frx-lbl-${item.id}`}, 'Checking…');
+    const status = el('div',{class:'frx-status'}, [dot, lbl]);
+
+    top.appendChild(left);
+    top.appendChild(status);
+
+    const actions = el('div',{class:'frx-actions'});
+    const bOpen = el('button',{class:'frx-btn frx-primary', 'data-act':'open', disabled:true}, 'Open');
+    const bRen  = el('button',{class:'frx-btn frx-ghost',   'data-act':'rename'}, 'Rename');
+    const bDel  = el('button',{class:'frx-btn frx-danger',  'data-act':'remove'}, 'Remove');
+    actions.appendChild(bOpen); actions.appendChild(bRen); actions.appendChild(bDel);
+
+    node.appendChild(top);
+    node.appendChild(actions);
+    return node;
+  }
+
+  async function renderList(){
+    const listEl=$('#frx-list'); listEl.textContent='';
+    const list=await loadInstances(); const active=await getActive();
+    const cache=await getStatusCache();
+
+    list.sort((a,b)=>(b.lastUsed||0)-(a.lastUsed||0)).forEach(item=>{
+      const chip = chipNode(item, item.id===active);
+      const o = originOf(item.url), cached = cache[o];
+      const dot = chip.querySelector(`#frx-dot-${item.id}`);
+      const lbl = chip.querySelector(`#frx-lbl-${item.id}`);
+      const openBtn = chip.querySelector('[data-act="open"]');
+
+      if (cached){
+        dot.classList.add(cached.ok ? 'on':'off');
+        lbl.textContent = cached.ok ? 'Online' : 'Offline';
+        openBtn.disabled = !cached.ok;
+      } else {
+        lbl.textContent = 'Unknown';
+        openBtn.disabled = true;
+      }
+
+      chip.addEventListener('click', async (e)=>{
+        const act = e.target?.dataset?.act;
+        if (!act) return;
+
+        if (act==='open'){
+          if (openBtn.disabled) return;
+          await setActive(item.id);
+          const dest = withParam(item.url, 'frapp', '1');
+          if (dest) window.location.replace(dest);
+        } else if (act==='rename'){
+          const nn=prompt('New display name:', item.name || host(item.url));
+          if (nn!=null){
+            const L=await loadInstances(); const it=L.find(x=>x.id===item.id);
+            if (it){ it.name=nn.trim().slice(0,120); it.lastUsed=Date.now(); await saveInstances(L); renderList(); }
+          }
+        } else if (act==='remove'){
+          if (!confirm('Remove this server?')) return;
+          let L=await loadInstances(); L=L.filter(x=>x.id!==item.id); await saveInstances(L);
+          const a=await getActive(); if (a===item.id) await setActive(L[0]?.id||''); renderList();
+        }
+      });
+
+      listEl.appendChild(chip);
+
+      // Live refresh (best effort)
+      (async ()=>{
+        const ok = await probeReachable(item.url, 2500);
+        const d = document.getElementById(`frx-dot-${item.id}`);
+        const l = document.getElementById(`frx-lbl-${item.id}`);
+        const b = chip.querySelector('[data-act="open"]');
+        if (d && l && b){
+          d.classList.remove('on','off');
+          d.classList.add(ok?'on':'off');
+          l.textContent = ok ? 'Online' : 'Offline';
+          b.disabled = !ok;
+        }
+        const o2 = originOf(item.url); if (o2) writeStatus(o2, ok);
+      })();
+    });
+  }
+
+  $('#frx-add-save').addEventListener('click', async ()=>{
+    const name = $('#frx-name').value.trim();
+    const url  = $('#frx-url').value.trim();
+    if (!url) { alert('Enter a valid URL'); return; }
+
+    // Verify: must be FileRise
+    const vf = await verifyFileRise(url);
+    if (!vf.ok) { alert('That address does not look like a FileRise server.'); return; }
+
+    let L = await loadInstances();
+    const h  = host(url);
+    const dupe = L.find(i => host(i.url)===h);
+    const inst = dupe || { id:'i'+Math.random().toString(36).slice(2)+Date.now().toString(36) };
+    inst.name = name || inst.name || h;
+    inst.url  = normalize(url);
+    inst.favicon = faviconUrl(url);
+    inst.lastUsed = Date.now();
+    if (!dupe) L.push(inst);
+    await saveInstances(L);
+    await setActive(inst.id);
+
+    if (vf.origin) await writeStatus(vf.origin, true);
+
+    const dest = withParam(inst.url, 'frapp', '1');
+    if (dest) window.location.replace(dest);
+  });
+
+  fab.addEventListener('click', async ()=>{ await renderList(); show(); });
+
+  // Ensure zoom gestures work if the host page tried to disable them
+  (function ensureZoomable(){
+    let m = document.querySelector('meta[name=viewport]');
+    const desired = 'width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=yes, minimum-scale=1, maximum-scale=5';
+    if (!m){ m = document.createElement('meta'); m.setAttribute('name','viewport'); document.head.appendChild(m); }
+    const c = m.getAttribute('content') || '';
+    if (/user-scalable=no|maximum-scale=1/.test(c)) m.setAttribute('content', desired);
+  })();
+})();

public/js/pwa/register-sw.js

@@ -0,0 +1,5 @@
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', () => {
+      navigator.serviceWorker.register('/sw.js?v={{APP_QVER}}').catch(() => {});
+    });
+  }

public/js/pwa/sw.js

@@ -0,0 +1,9 @@
+// public/js/pwa/sw.js
+const SW_VERSION = '{{APP_QVER}}';
+const STATIC_CACHE = `fr-static-${SW_VERSION}`;
+const STATIC_ASSETS = [
+  '/', '/index.html',
+  '/css/styles.css?v={{APP_QVER}}',
+  '/js/main.js?v={{APP_QVER}}',
+  '/assets/logo.svg?v={{APP_QVER}}'
+];

public/js/trashRestoreDelete.js

@@ -1,9 +1,9 @@
 // trashRestoreDelete.js
-import { sendRequest } from './networkUtils.js';
-import { toggleVisibility, showToast } from './domUtils.js';
-import { loadFileList } from './fileListView.js';
-import { loadFolderTree } from './folderManager.js';
-import { t } from './i18n.js';
+import { sendRequest } from './networkUtils.js?v={{APP_QVER}}';
+import { toggleVisibility, showToast } from './domUtils.js?v={{APP_QVER}}';
+import { loadFileList } from './fileListView.js?v={{APP_QVER}}';
+import { loadFolderTree, refreshFolderIcon } from './folderManager.js?v={{APP_QVER}}';
+import { t } from './i18n.js?v={{APP_QVER}}';
 
 function showConfirm(message, onConfirm) {
     const modal = document.getElementById("customConfirmModal");
@@ -89,6 +89,7 @@ export function setupTrashRestoreDelete() {
                     toggleVisibility("restoreFilesModal", false);
                     loadFileList(window.currentFolder);
                     loadFolderTree(window.currentFolder);
+                    refreshFolderIcon(window.currentFolder);
                 })
                 .catch(err => {
                     console.error("Error restoring files:", err);

public/js/upload.js

@@ -1,9 +1,180 @@
-import { initFileActions } from './fileActions.js';
-import { displayFilePreview } from './filePreview.js';
-import { showToast, escapeHTML } from './domUtils.js';
-import { loadFolderTree } from './folderManager.js';
-import { loadFileList } from './fileListView.js';
-import { t } from './i18n.js';
+import { initFileActions } from './fileActions.js?v={{APP_QVER}}';
+import { displayFilePreview } from './filePreview.js?v={{APP_QVER}}';
+import { showToast, escapeHTML } from './domUtils.js?v={{APP_QVER}}';
+import { loadFolderTree } from './folderManager.js?v={{APP_QVER}}';
+import { loadFileList } from './fileListView.js?v={{APP_QVER}}';
+import { refreshFolderIcon } from './folderManager.js?v={{APP_QVER}}';
+import { t } from './i18n.js?v={{APP_QVER}}';
+
+// --- Lightweight tracking of in-progress resumable uploads (per user) ---
+const RESUMABLE_DRAFTS_KEY = 'filr_resumable_drafts_v1';
+
+function getCurrentUserKey() {
+  // Try a few globals; fall back to browser profile
+  const u =
+    (window.currentUser && String(window.currentUser)) ||
+    (window.appUser && String(window.appUser)) ||
+    (window.username && String(window.username)) ||
+    '';
+  return u || 'anon';
+}
+
+function loadResumableDraftsAll() {
+  try {
+    const raw = localStorage.getItem(RESUMABLE_DRAFTS_KEY);
+    if (!raw) return {};
+    const parsed = JSON.parse(raw);
+    return (parsed && typeof parsed === 'object') ? parsed : {};
+  } catch (e) {
+    console.warn('Failed to read resumable drafts from localStorage', e);
+    return {};
+  }
+}
+
+function saveResumableDraftsAll(all) {
+  try {
+    localStorage.setItem(RESUMABLE_DRAFTS_KEY, JSON.stringify(all));
+  } catch (e) {
+    console.warn('Failed to persist resumable drafts to localStorage', e);
+  }
+}
+
+function getUserDraftContext() {
+  const all = loadResumableDraftsAll();
+  const userKey = getCurrentUserKey();
+  if (!all[userKey] || typeof all[userKey] !== 'object') {
+    all[userKey] = {};
+  }
+  const drafts = all[userKey];
+  return { all, userKey, drafts };
+}
+
+// Upsert / update a record for this resumable file
+function upsertResumableDraft(file, percent) {
+  if (!file || !file.uniqueIdentifier) return;
+
+  const { all, userKey, drafts } = getUserDraftContext();
+  const id     = file.uniqueIdentifier;
+  const folder = window.currentFolder || 'root';
+  const name   = file.fileName || file.name || 'Unnamed file';
+  const size   = file.size || 0;
+
+  const prev = drafts[id] || {};
+  const p    = Math.max(0, Math.min(100, Math.floor(percent || 0)));
+
+  // Avoid hammering localStorage if nothing substantially changed
+  if (prev.lastPercent !== undefined && Math.abs(p - prev.lastPercent) < 1) {
+    return;
+  }
+
+  drafts[id] = {
+    identifier: id,
+    fileName: name,
+    size,
+    folder,
+    lastPercent: p,
+    updatedAt: Date.now()
+  };
+
+  all[userKey] = drafts;
+  saveResumableDraftsAll(all);
+}
+
+// Remove a single draft by identifier
+function clearResumableDraft(identifier) {
+  if (!identifier) return;
+  const { all, userKey, drafts } = getUserDraftContext();
+  if (drafts[identifier]) {
+    delete drafts[identifier];
+    all[userKey] = drafts;
+    saveResumableDraftsAll(all);
+  }
+}
+
+// Optionally clear all drafts for the current folder (used on full success)
+function clearResumableDraftsForFolder(folder) {
+  const { all, userKey, drafts } = getUserDraftContext();
+  const f = folder || 'root';
+  let changed = false;
+  for (const [id, rec] of Object.entries(drafts)) {
+    if (!rec || typeof rec !== 'object') continue;
+    if (rec.folder === f) {
+      delete drafts[id];
+      changed = true;
+    }
+  }
+  if (changed) {
+    all[userKey] = drafts;
+    saveResumableDraftsAll(all);
+  }
+}
+
+// Show a small banner if there is any in-progress resumable upload for this folder
+function showResumableDraftBanner() {
+  const uploadCard = document.getElementById('uploadCard');
+  if (!uploadCard) return;
+
+  // Remove any existing banner first
+  const existing = document.getElementById('resumableDraftBanner');
+  if (existing && existing.parentNode) {
+    existing.parentNode.removeChild(existing);
+  }
+
+  const { drafts } = getUserDraftContext();
+  const folder = window.currentFolder || 'root';
+
+  const candidates = Object.values(drafts)
+    .filter(d =>
+      d &&
+      d.folder === folder &&
+      typeof d.lastPercent === 'number' &&
+      d.lastPercent > 0 &&
+      d.lastPercent < 100
+    )
+    .sort((a, b) => (b.updatedAt || 0) - (a.updatedAt || 0));
+
+  if (!candidates.length) {
+    return; // nothing to show
+  }
+
+  const latest = candidates[0];
+  const count = candidates.length;
+
+  const countText =
+    count === 1
+      ? 'You have a partially uploaded file'
+      : `You have ${count} partially uploaded files. Latest:`;
+
+  const banner = document.createElement('div');
+  banner.id = 'resumableDraftBanner';
+  banner.className = 'upload-resume-banner';
+  banner.innerHTML = `
+    <div class="upload-resume-banner-inner">
+      <span class="material-icons" style="vertical-align:middle;margin-right:6px;">cloud_upload</span>
+      <span class="upload-resume-text">
+        ${countText}
+        <strong>${escapeHTML(latest.fileName)}</strong>
+        (~${latest.lastPercent}%).
+        Choose it again from your device to resume.
+      </span>
+      <button type="button" class="upload-resume-dismiss-btn">Dismiss</button>
+    </div>
+  `;
+
+  const dismissBtn = banner.querySelector('.upload-resume-dismiss-btn');
+  if (dismissBtn) {
+    dismissBtn.addEventListener('click', () => {
+      // Clear all resumable hints for this folder when the user dismisses.
+      clearResumableDraftsForFolder(folder);
+      if (banner.parentNode) {
+        banner.parentNode.removeChild(banner);
+      }
+    });
+  }
+
+  // Insert at top of uploadCard
+  uploadCard.insertBefore(banner, uploadCard.firstChild);
+}
 
 /* -----------------------------------------------------
    Helpers for Drag–and–Drop Folder Uploads (Original Code)
@@ -36,6 +207,38 @@ function traverseFileTreePromise(item, path = "") {
   });
 }
 
+// --- Lazy loader for Resumable.js (no CSP inline, cached, safe) ---
+const RESUMABLE_SRC = '/vendor/resumable/1.1.0/resumable.min.js?v={{APP_QVER}}';
+let _resumableLoadPromise = null;
+
+function loadScriptOnce(src) {
+  if (loadScriptOnce._cache?.has(src)) return loadScriptOnce._cache.get(src);
+  loadScriptOnce._cache = loadScriptOnce._cache || new Map();
+  const p = new Promise((resolve, reject) => {
+    const s = document.createElement('script');
+    s.src = src;
+    s.async = true;
+    s.onload = resolve;
+    s.onerror = () => reject(new Error(`Failed to load ${src}`));
+    document.head.appendChild(s);
+  });
+  loadScriptOnce._cache.set(src, p);
+  return p;
+}
+
+function lazyLoadResumable() {
+  if (window.Resumable) return Promise.resolve(window.Resumable);
+  if (!_resumableLoadPromise) {
+    _resumableLoadPromise = loadScriptOnce(RESUMABLE_SRC).then(() => window.Resumable);
+  }
+  return _resumableLoadPromise;
+}
+
+// Optional: let main.js prefetch it in the background
+export function warmUpResumable() {
+  lazyLoadResumable().catch(() => {/* ignore warm-up failure */});
+}
+
 // Recursively retrieve files from DataTransfer items.
 function getFilesFromDataTransferItems(items) {
   const promises = [];
@@ -161,91 +364,91 @@ function createFileEntry(file) {
   const removeBtn = document.createElement("button");
   removeBtn.classList.add("remove-file-btn");
   removeBtn.textContent = "×";
-// In your remove button event listener, replace the fetch call with:
-removeBtn.addEventListener("click", function (e) {
-  e.stopPropagation();
-  const uploadIndex = file.uploadIndex;
-  window.selectedFiles = window.selectedFiles.filter(f => f.uploadIndex !== uploadIndex);
-  
-  // Cancel the file upload if possible.
-  if (typeof file.cancel === "function") {
-    file.cancel();
-    console.log("Canceled file upload:", file.fileName);
-  }
-  
-  // Remove file from the resumable queue.
-  if (resumableInstance && typeof resumableInstance.removeFile === "function") {
-    resumableInstance.removeFile(file);
-  }
-  
-  // Call our helper repeatedly to remove the chunk folder.
-  if (file.uniqueIdentifier) {
-    removeChunkFolderRepeatedly(file.uniqueIdentifier, window.csrfToken, 3, 1000);
-  }
-  
-  li.remove();
-  updateFileInfoCount();
-});
+  // In your remove button event listener, replace the fetch call with:
+  removeBtn.addEventListener("click", function (e) {
+    e.stopPropagation();
+    const uploadIndex = file.uploadIndex;
+    window.selectedFiles = window.selectedFiles.filter(f => f.uploadIndex !== uploadIndex);
+
+    // Cancel the file upload if possible.
+    if (typeof file.cancel === "function") {
+      file.cancel();
+      console.log("Canceled file upload:", file.fileName);
+    }
+
+    // Remove file from the resumable queue.
+    if (resumableInstance && typeof resumableInstance.removeFile === "function") {
+      resumableInstance.removeFile(file);
+    }
+
+    // Call our helper repeatedly to remove the chunk folder.
+    if (file.uniqueIdentifier) {
+      removeChunkFolderRepeatedly(file.uniqueIdentifier, window.csrfToken, 3, 1000);
+    }
+
+    li.remove();
+    updateFileInfoCount();
+  });
   li.removeBtn = removeBtn;
   li.appendChild(removeBtn);
 
   // Add pause/resume/restart button if the file supports pause/resume.
-// Conditionally add the pause/resume button only if file.pause is available
-// Pause/Resume button (for resumable file–picker uploads)
-if (typeof file.pause === "function") {
-  const pauseResumeBtn = document.createElement("button");
-  pauseResumeBtn.setAttribute("type", "button"); // not a submit button
-  pauseResumeBtn.classList.add("pause-resume-btn");
-  // Start with pause icon and disable button until upload starts
-  pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
-  pauseResumeBtn.disabled = true; 
-  pauseResumeBtn.addEventListener("click", function (e) {
-    e.stopPropagation();
-    if (file.isError) {
-      // If the file previously failed, try restarting upload.
-      if (typeof file.retry === "function") {
-        file.retry();
-        file.isError = false;
-        pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
-      }
-    } else if (!file.paused) {
-      // Pause the upload (if possible)
-      if (typeof file.pause === "function") {
-        file.pause();
-        file.paused = true;
-        pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">play_circle_outline</span>';
-      } else {
-      }
-    } else if (file.paused) {
-      // Resume sequence: first call to resume (or upload() fallback)
-      if (typeof file.resume === "function") {
-        file.resume();
-      } else {
-        resumableInstance.upload();
-      }
-      // After a short delay, pause again then resume
-      setTimeout(() => {
+  // Conditionally add the pause/resume button only if file.pause is available
+  // Pause/Resume button (for resumable file–picker uploads)
+  if (typeof file.pause === "function") {
+    const pauseResumeBtn = document.createElement("button");
+    pauseResumeBtn.setAttribute("type", "button"); // not a submit button
+    pauseResumeBtn.classList.add("pause-resume-btn");
+    // Start with pause icon and disable button until upload starts
+    pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+    pauseResumeBtn.disabled = true;
+    pauseResumeBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      if (file.isError) {
+        // If the file previously failed, try restarting upload.
+        if (typeof file.retry === "function") {
+          file.retry();
+          file.isError = false;
+          pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+        }
+      } else if (!file.paused) {
+        // Pause the upload (if possible)
         if (typeof file.pause === "function") {
           file.pause();
+          file.paused = true;
+          pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">play_circle_outline</span>';
+        } else {
+        }
+      } else if (file.paused) {
+        // Resume sequence: first call to resume (or upload() fallback)
+        if (typeof file.resume === "function") {
+          file.resume();
         } else {
           resumableInstance.upload();
         }
+        // After a short delay, pause again then resume
         setTimeout(() => {
-          if (typeof file.resume === "function") {
-            file.resume();
+          if (typeof file.pause === "function") {
+            file.pause();
           } else {
             resumableInstance.upload();
           }
+          setTimeout(() => {
+            if (typeof file.resume === "function") {
+              file.resume();
+            } else {
+              resumableInstance.upload();
+            }
+          }, 100);
         }, 100);
-      }, 100);
-      file.paused = false;
-      pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
-    } else {
-      console.error("Pause/resume function not available for file", file);
-    }
-  });
-  li.appendChild(pauseResumeBtn);
-}
+        file.paused = false;
+        pauseResumeBtn.innerHTML = '<span class="material-icons pauseResumeBtn">pause_circle_outline</span>';
+      } else {
+        console.error("Pause/resume function not available for file", file);
+      }
+    });
+    li.appendChild(pauseResumeBtn);
+  }
 
   // Preview element
   const preview = document.createElement("div");
@@ -401,29 +604,49 @@ function processFiles(filesInput) {
    Resumable.js Integration for File Picker Uploads
    (Only files chosen via file input use Resumable; folder uploads use original code.)
 ----------------------------------------------------- */
-const useResumable = true; // Enable resumable for file picker uploads
-let resumableInstance;
-function initResumableUpload() {
-  resumableInstance = new Resumable({
-    target: "/api/upload/upload.php",
-    query: { folder: window.currentFolder || "root", upload_token: window.csrfToken },
-    chunkSize: 1.5 * 1024 * 1024, // 1.5 MB chunks
-    simultaneousUploads: 3,
-    forceChunkSize: true,
-    testChunks: false,
-    throttleProgressCallbacks: 1,
-    withCredentials: true,
-    headers: { 'X-CSRF-Token': window.csrfToken },
-    query: {
-      folder: window.currentFolder || "root",
-      upload_token: window.csrfToken   // still as a fallback
-    }
+const useResumable = true;
+let resumableInstance = null;
+let _pendingPickedFiles = [];   // files picked before library/instance ready
+let _resumableReady = false;
+
+// Make init async-safe; it resolves when Resumable is constructed
+async function initResumableUpload() {
+  if (resumableInstance) return;
+  // Load the library if needed
+  const ResumableCtor = await lazyLoadResumable().catch(err => {
+    console.error('Failed to load Resumable.js:', err);
+    return null;
   });
+  if (!ResumableCtor) return;
+
+  // Construct the instance once
+  if (!resumableInstance) {
+    resumableInstance = new ResumableCtor({
+      target: "/api/upload/upload.php",
+      chunkSize: 1.5 * 1024 * 1024,
+      simultaneousUploads: 3,
+      forceChunkSize: true,
+      testChunks: true,
+      withCredentials: true,
+      headers: { 'X-CSRF-Token': window.csrfToken },
+      query: () => ({
+        folder: window.currentFolder || "root",
+        upload_token: window.csrfToken
+      })
+    });
+  }
+
+  // keep query fresh when folder changes (call this from your folder nav code)
+  function updateResumableQuery() {
+    if (!resumableInstance) return;
+    resumableInstance.opts.headers['X-CSRF-Token'] = window.csrfToken;
+    resumableInstance.opts.query.folder = window.currentFolder || 'root';
+    resumableInstance.opts.query.upload_token = window.csrfToken;
+  }
 
   const fileInput = document.getElementById("file");
   if (fileInput) {
-    // Assign Resumable to file input for file picker uploads.
-    resumableInstance.assignBrowse(fileInput);
+    
     fileInput.addEventListener("change", function () {
       for (let i = 0; i < fileInput.files.length; i++) {
         resumableInstance.addFile(fileInput.files[i]);
@@ -432,6 +655,7 @@ function initResumableUpload() {
   }
 
   resumableInstance.on("fileAdded", function (file) {
+
     // Initialize custom paused flag
     file.paused = false;
     file.uploadIndex = file.uniqueIdentifier;
@@ -439,6 +663,11 @@ function initResumableUpload() {
       window.selectedFiles = [];
     }
     window.selectedFiles.push(file);
+
+    // Track as in-progress draft at 0%
+    upsertResumableDraft(file, 0);
+    showResumableDraftBanner();
+
     const progressContainer = document.getElementById("uploadProgressContainer");
 
     // Check if a wrapper already exists; if not, create one with a UL inside.
@@ -461,16 +690,49 @@ function initResumableUpload() {
     li.dataset.uploadIndex = file.uniqueIdentifier;
     list.appendChild(li);
     updateFileInfoCount();
+    updateResumableQuery();
   });
 
-  resumableInstance.on("fileProgress", function(file) {
+  resumableInstance.on("fileProgress", function (file) {
     const progress = file.progress(); // value between 0 and 1
-    const percent = Math.floor(progress * 100);
-    const li = document.querySelector(`li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`);
+    let percent = Math.floor(progress * 100);
+  
+    // Never persist a full 100% from progress alone.
+    // If the tab dies here, we still want it to look resumable.
+    if (percent >= 100) percent = 99;
+  
+    const li = document.querySelector(
+      `li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`
+    );
     if (li && li.progressBar) {
       if (percent < 99) {
         li.progressBar.style.width = percent + "%";
-        
+  
+        const elapsed = (Date.now() - li.startTime) / 1000;
+        let speed = "";
+        if (elapsed > 0) {
+          const bytesUploaded = progress * file.size;
+          const spd = bytesUploaded / elapsed;
+          if (spd < 1024)      speed = spd.toFixed(0) + " B/s";
+          else if (spd < 1048576) speed = (spd / 1024).toFixed(1) + " KB/s";
+          else                     speed = (spd / 1048576).toFixed(1) + " MB/s";
+        }
+        li.progressBar.innerText = percent + "% (" + speed + ")";
+      } else {
+        li.progressBar.style.width = "100%";
+        li.progressBar.innerHTML =
+          '<i class="material-icons spinning" style="vertical-align: middle;">autorenew</i>';
+      }
+  
+      const pauseResumeBtn = li.querySelector(".pause-resume-btn");
+      if (pauseResumeBtn) {
+        pauseResumeBtn.disabled = false;
+      }
+    }
+    if (li && li.progressBar) {
+      if (percent < 99) {
+        li.progressBar.style.width = percent + "%";
+
         // Calculate elapsed time and speed.
         const elapsed = (Date.now() - li.startTime) / 1000;
         let speed = "";
@@ -491,16 +753,17 @@ function initResumableUpload() {
         li.progressBar.style.width = "100%";
         li.progressBar.innerHTML = '<i class="material-icons spinning" style="vertical-align: middle;">autorenew</i>';
       }
-      
+
       // Enable the pause/resume button once progress starts.
       const pauseResumeBtn = li.querySelector(".pause-resume-btn");
       if (pauseResumeBtn) {
         pauseResumeBtn.disabled = false;
       }
     }
+    upsertResumableDraft(file, percent);
   });
-  
-  resumableInstance.on("fileSuccess", function(file, message) {
+
+  resumableInstance.on("fileSuccess", function (file, message) {
     // Try to parse JSON response
     let data;
     try {
@@ -508,18 +771,18 @@ function initResumableUpload() {
     } catch (e) {
       data = null;
     }
-  
+
     // 1) Soft‐fail CSRF? then update token & retry this file
     if (data && data.csrf_expired) {
       // Update global and Resumable headers
       window.csrfToken = data.csrf_token;
       resumableInstance.opts.headers['X-CSRF-Token'] = data.csrf_token;
-      resumableInstance.opts.query.upload_token        = data.csrf_token;
+      resumableInstance.opts.query.upload_token = data.csrf_token;
       // Retry this chunk/file
       file.retry();
-      return; 
+      return;
     }
-  
+
     // 2) Otherwise treat as real success:
     const li = document.querySelector(
       `li.upload-progress-item[data-upload-index="${file.uniqueIdentifier}"]`
@@ -531,13 +794,16 @@ function initResumableUpload() {
       const pauseResumeBtn = li.querySelector(".pause-resume-btn");
       if (pauseResumeBtn) pauseResumeBtn.style.display = "none";
       const removeBtn = li.querySelector(".remove-file-btn");
-      if (removeBtn)   removeBtn.style.display = "none";
+      if (removeBtn) removeBtn.style.display = "none";
       setTimeout(() => li.remove(), 5000);
     }
-  
+    refreshFolderIcon(window.currentFolder);
     loadFileList(window.currentFolder);
+    // This file finished successfully, remove its draft record
+    clearResumableDraft(file.uniqueIdentifier);
+    showResumableDraftBanner();
   });
-  
+
 
 
   resumableInstance.on("fileError", function (file, message) {
@@ -553,18 +819,22 @@ function initResumableUpload() {
       pauseResumeBtn.disabled = false;
     }
     showToast("Error uploading file: " + file.fileName);
+    // Treat errored file as no longer resumable (for now) and clear its hint
+    showResumableDraftBanner();
   });
 
-  resumableInstance.on("complete", function () {
+    resumableInstance.on("complete", function () {
     // If any file is marked with an error, leave the list intact.
-    const hasError = window.selectedFiles.some(f => f.isError);
+    const hasError = Array.isArray(window.selectedFiles) && window.selectedFiles.some(f => f.isError);
     if (!hasError) {
       // All files succeeded—clear the file input and progress container after 5 seconds.
       setTimeout(() => {
         const fileInput = document.getElementById("file");
         if (fileInput) fileInput.value = "";
         const progressContainer = document.getElementById("uploadProgressContainer");
-        progressContainer.innerHTML = "";
+        if (progressContainer) {
+          progressContainer.innerHTML = "";
+        }
         window.selectedFiles = [];
         adjustFolderHelpExpansionClosed();
         const fileInfoContainer = document.getElementById("fileInfoContainer");
@@ -573,23 +843,66 @@ function initResumableUpload() {
         }
         const dropArea = document.getElementById("uploadDropArea");
         if (dropArea) setDropAreaDefault();
+
+        // IMPORTANT: clear Resumable's internal file list so the next upload
+        // doesn't think there are still resumable files queued.
+        if (resumableInstance) {
+          // cancel() after completion just resets internal state; no chunks are deleted server-side.
+          resumableInstance.cancel();
+        }
+        clearResumableDraftsForFolder(window.currentFolder || 'root');
+        showResumableDraftBanner();
       }, 5000);
     } else {
       showToast("Some files failed to upload. Please check the list.");
     }
   });
+
+  _resumableReady = true;
+  if (_pendingPickedFiles.length) {
+    updateResumableQuery();
+    for (const f of _pendingPickedFiles) resumableInstance.addFile(f);
+    _pendingPickedFiles = [];
+  }
+
 }
 
 /* -----------------------------------------------------
    XHR-based submitFiles for Drag–and–Drop (Folder) Uploads
 ----------------------------------------------------- */
 function submitFiles(allFiles) {
-  const folderToUse = window.currentFolder || "root";
+  const folderToUse = (() => {
+    const f = window.currentFolder || "root";
+    try { return decodeURIComponent(f); } catch { return f; }
+  })();
+
   const progressContainer = document.getElementById("uploadProgressContainer");
   const fileInput = document.getElementById("file");
+  if (!progressContainer) {
+    console.warn("submitFiles called but #uploadProgressContainer not found");
+    return;
+  }
+
+  // --- Ensure there are progress list items for these files ---
+  let listItems = progressContainer.querySelectorAll("li.upload-progress-item");
+
+  if (!listItems.length) {
+    // Guarantee each file has a stable uploadIndex
+    allFiles.forEach((file, index) => {
+      if (file.uploadIndex === undefined || file.uploadIndex === null) {
+        file.uploadIndex = index;
+      }
+    });
+
+    // Build the UI rows for these files
+    // This will also set window.selectedFiles and fileInfoContainer, etc.
+    processFiles(allFiles);
+
+    // Re-query now that processFiles has populated the DOM
+    listItems = progressContainer.querySelectorAll("li.upload-progress-item");
+  }
 
   const progressElements = {};
-  const listItems = progressContainer.querySelectorAll("li.upload-progress-item");
   listItems.forEach(item => {
     progressElements[item.dataset.uploadIndex] = item;
   });
@@ -615,7 +928,7 @@ function submitFiles(allFiles) {
       if (e.lengthComputable) {
         currentPercent = Math.round((e.loaded / e.total) * 100);
         const li = progressElements[file.uploadIndex];
-        if (li) {
+        if (li && li.progressBar) {
           const elapsed = (Date.now() - li.startTime) / 1000;
           let speed = "";
           if (elapsed > 0) {
@@ -637,7 +950,7 @@ function submitFiles(allFiles) {
       } catch (e) {
         jsonResponse = null;
       }
-    
+
       // ─── Soft-fail CSRF: retry this upload ───────────────────────
       if (jsonResponse && jsonResponse.csrf_expired) {
         console.warn("CSRF expired during upload, retrying chunk", file.uploadIndex);
@@ -650,48 +963,55 @@ function submitFiles(allFiles) {
         xhr.send(formData);
         return;  // skip the "finishedCount++" and error/success logic for now
       }
-    
-      // ─── Normal success/error handling ────────────────────────────  
+
+      // ─── Normal success/error handling ────────────────────────────
       const li = progressElements[file.uploadIndex];
-    
+
       if (xhr.status >= 200 && xhr.status < 300 && (!jsonResponse || !jsonResponse.error)) {
         // real success
-        if (li) {
+        if (li && li.progressBar) {
           li.progressBar.style.width = "100%";
           li.progressBar.innerText = "Done";
           if (li.removeBtn) li.removeBtn.style.display = "none";
         }
         uploadResults[file.uploadIndex] = true;
+
       } else {
         // real failure
-        if (li) {
+        if (li && li.progressBar) {
           li.progressBar.innerText = "Error";
         }
         allSucceeded = false;
       }
+
       if (file.isClipboard) {
         setTimeout(() => {
           window.selectedFiles = [];
           updateFileInfoCount();
-          const progressContainer = document.getElementById("uploadProgressContainer");
-          if (progressContainer) progressContainer.innerHTML = "";
-          const fileInfoContainer = document.getElementById("fileInfoContainer");
-          if (fileInfoContainer) {
-            fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
+          const pc = document.getElementById("uploadProgressContainer");
+          if (pc) pc.innerHTML = "";
+          const fic = document.getElementById("fileInfoContainer");
+          if (fic) {
+            fic.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
           }
         }, 5000);
       }
-    
-      // ─── Only now count this chunk as finished ───────────────────
+
+      // ─── Only now count this upload as finished ───────────────────
       finishedCount++;
       if (finishedCount === allFiles.length) {
-        refreshFileList(allFiles, uploadResults, progressElements);
+        const succeededCount = uploadResults.filter(Boolean).length;
+        const failedCount = allFiles.length - succeededCount;
+
+        setTimeout(() => {
+          refreshFileList(allFiles, uploadResults, progressElements);
+        }, 250);
       }
     });
 
     xhr.addEventListener("error", function () {
       const li = progressElements[file.uploadIndex];
-      if (li) {
+      if (li && li.progressBar) {
         li.progressBar.innerText = "Error";
       }
       uploadResults[file.uploadIndex] = false;
@@ -699,12 +1019,15 @@ function submitFiles(allFiles) {
       finishedCount++;
       if (finishedCount === allFiles.length) {
         refreshFileList(allFiles, uploadResults, progressElements);
+        // Immediate summary toast based on actual XHR outcomes
+        const succeededCount = uploadResults.filter(Boolean).length;
+        const failedCount = allFiles.length - succeededCount;
       }
     });
 
     xhr.addEventListener("abort", function () {
       const li = progressElements[file.uploadIndex];
-      if (li) {
+      if (li && li.progressBar) {
         li.progressBar.innerText = "Aborted";
       }
       uploadResults[file.uploadIndex] = false;
@@ -725,41 +1048,61 @@ function submitFiles(allFiles) {
     loadFileList(folderToUse)
       .then(serverFiles => {
         initFileActions();
-        serverFiles = (serverFiles || []).map(item => item.name.trim().toLowerCase());
+        // Be tolerant to API shapes: string or object with name/fileName/filename
+        serverFiles = (serverFiles || [])
+          .map(item => {
+            if (typeof item === 'string') return item;
+            const n = item?.name ?? item?.fileName ?? item?.filename ?? '';
+            return String(n);
+          })
+          .map(s => s.trim().toLowerCase())
+          .filter(Boolean);
+
         let overallSuccess = true;
+        let succeeded = 0;
+
         allFiles.forEach(file => {
           const clientFileName = file.name.trim().toLowerCase();
           const li = progressElements[file.uploadIndex];
-          if (!uploadResults[file.uploadIndex] || !serverFiles.includes(clientFileName)) {
-            if (li) {
+          const hadRelative = !!(file.webkitRelativePath || file.customRelativePath);
+
+          if (!uploadResults[file.uploadIndex] ||
+              (!hadRelative && !serverFiles.includes(clientFileName))) {
+            if (li && li.progressBar) {
               li.progressBar.innerText = "Error";
             }
             overallSuccess = false;
           } else if (li) {
+            succeeded++;
+
             // Schedule removal of successful file entry after 5 seconds.
             setTimeout(() => {
               li.remove();
               delete progressElements[file.uploadIndex];
               updateFileInfoCount();
-              const progressContainer = document.getElementById("uploadProgressContainer");
-              if (progressContainer && progressContainer.querySelectorAll("li.upload-progress-item").length === 0) {
-                const fileInput = document.getElementById("file");
-                if (fileInput) fileInput.value = "";
-                progressContainer.innerHTML = "";
+              const pc = document.getElementById("uploadProgressContainer");
+              if (pc && pc.querySelectorAll("li.upload-progress-item").length === 0) {
+                const fi = document.getElementById("file");
+                if (fi) fi.value = "";
+                pc.innerHTML = "";
                 adjustFolderHelpExpansionClosed();
-                const fileInfoContainer = document.getElementById("fileInfoContainer");
-                if (fileInfoContainer) {
-                  fileInfoContainer.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
+                const fic = document.getElementById("fileInfoContainer");
+                if (fic) {
+                  fic.innerHTML = `<span id="fileInfoDefault">No files selected</span>`;
                 }
                 const dropArea = document.getElementById("uploadDropArea");
                 if (dropArea) setDropAreaDefault();
+                window.selectedFiles = [];
               }
             }, 5000);
           }
         });
-        
+
         if (!overallSuccess) {
-          showToast("Some files failed to upload. Please check the list.");
+          const failed = allFiles.length - succeeded;
+          showToast(`${failed} file(s) failed, ${succeeded} succeeded. Please check the list.`);
+        } else {
+          showToast(`${succeeded} file(s) succeeded. Please check the list.`);
         }
       })
       .catch(error => {
@@ -804,7 +1147,8 @@ function initUpload() {
     dropArea.addEventListener("drop", function (e) {
       e.preventDefault();
       dropArea.style.backgroundColor = "";
-      const dt = e.dataTransfer;
+      const dt = e.dataTransfer || window.__pendingDropData || null;
+       window.__pendingDropData = null;
       if (dt.items && dt.items.length > 0) {
         getFilesFromDataTransferItems(dt.items).then(files => {
           if (files.length > 0) {
@@ -822,33 +1166,68 @@ function initUpload() {
   }
 
   if (fileInput) {
-    fileInput.addEventListener("change", function () {
+    fileInput.addEventListener("change", async function () {
+      const files = Array.from(fileInput.files || []);
+      if (!files.length) return;
+
       if (useResumable) {
-        // For file picker, if resumable is enabled, let it handle the files.
-        for (let i = 0; i < fileInput.files.length; i++) {
-          resumableInstance.addFile(fileInput.files[i]);
+        // New resumable batch: reset selectedFiles so the count is correct
+        window.selectedFiles = [];
+
+        // Ensure the lib/instance exists
+        if (!_resumableReady) await initResumableUpload();
+        if (resumableInstance) {
+          for (const f of files) {
+            resumableInstance.addFile(f);
+          }
+        } else {
+          // If Resumable failed to load, fall back to XHR
+          processFiles(files);
         }
       } else {
-        processFiles(fileInput.files);
+        // Non-resumable: normal XHR path, drag-and-drop etc.
+        processFiles(files);
       }
     });
   }
 
   if (uploadForm) {
-    uploadForm.addEventListener("submit", function (e) {
+    uploadForm.addEventListener("submit", async function (e) {
       e.preventDefault();
-      const files = window.selectedFiles || (fileInput ? fileInput.files : []);
-      if (!files || files.length === 0) {
+
+      const files =
+        (Array.isArray(window.selectedFiles) && window.selectedFiles.length)
+          ? window.selectedFiles
+          : (fileInput ? Array.from(fileInput.files || []) : []);
+
+      if (!files || !files.length) {
         showToast("No files selected.");
         return;
       }
-      // If files come from file picker (no relative path), use Resumable.
-      if (useResumable && (!files[0].customRelativePath || files[0].customRelativePath === "")) {
-        // Ensure current folder is updated.
-        resumableInstance.opts.query.folder = window.currentFolder || "root";
-        resumableInstance.upload();
-        showToast("Resumable upload started...");
+
+      // If we have any files queued in Resumable, treat this as a resumable upload.
+      const hasResumableFiles =
+        useResumable &&
+        resumableInstance &&
+        Array.isArray(resumableInstance.files) &&
+        resumableInstance.files.length > 0;
+
+      if (hasResumableFiles) {
+        if (!_resumableReady) await initResumableUpload();
+        if (resumableInstance) {
+          // Keep folder/token fresh
+          resumableInstance.opts.query.folder = window.currentFolder || "root";
+          resumableInstance.opts.query.upload_token = window.csrfToken;
+          resumableInstance.opts.headers['X-CSRF-Token'] = window.csrfToken;
+
+          resumableInstance.upload();
+          showToast("Resumable upload started...");
+        } else {
+          // Hard fallback – should basically never happen
+          submitFiles(files);
+        }
       } else {
+        // No resumable queue → drag-and-drop / paste / simple input → XHR path
         submitFiles(files);
       }
     });
@@ -857,6 +1236,7 @@ function initUpload() {
   if (useResumable) {
     initResumableUpload();
   }
+  showResumableDraftBanner();
 }
 
 export { initUpload };

public/js/version.js

@@ -0,0 +1,2 @@
+// generated by CI
+window.APP_VERSION = 'v1.9.7';

public/manifest.webmanifest

@@ -0,0 +1,14 @@
+{
+    "name": "FileRise",
+    "short_name": "FileRise",
+    "start_url": "/?pwa=1",
+    "scope": "/",
+    "display": "standalone",
+    "background_color": "#111111",
+    "theme_color": "#0b5ed7",
+    "icons": [
+      { "src": "/assets/icons/icon-192.png?v={{APP_QVER}}", "sizes": "192x192", "type": "image/png" },
+      { "src": "/assets/icons/icon-512.png?v={{APP_QVER}}", "sizes": "512x512", "type": "image/png" },
+      { "src": "/assets/icons/maskable-512.png?v={{APP_QVER}}", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
+    ]
+  }

public/sw.js

@@ -0,0 +1,6 @@
+// Root-scoped stub. Keeps the worker’s scope at “/” level
+try {
+  self.importScripts('/js/pwa/sw.js?v={{APP_QVER}}');
+} catch (_) {
+  // no-op
+}

public/vendor/bootstrap/4.5.2/LICENSE

@@ -0,0 +1,21 @@
+Bootstrap 4.5.2 — MIT
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

public/vendor/codemirror/5.65.5/LICENSE

@@ -0,0 +1,21 @@
+CodeMirror 5.65.5 — MIT
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

public/vendor/codemirror/5.65.5/mode/htmlmixed/htmlmixed.min.js

@@ -0,0 +1 @@
+!function(t){"object"==typeof exports&&"object"==typeof module?t(require("../../lib/codemirror"),require("../xml/xml"),require("../javascript/javascript"),require("../css/css")):"function"==typeof define&&define.amd?define(["../../lib/codemirror","../xml/xml","../javascript/javascript","../css/css"],t):t(CodeMirror)}(function(m){"use strict";var l={script:[["lang",/(javascript|babel)/i,"javascript"],["type",/^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i,"javascript"],["type",/./,"text/plain"],[null,null,"javascript"]],style:[["lang",/^css$/i,"css"],["type",/^(text\/)?(x-)?(stylesheet|css)$/i,"css"],["type",/./,"text/plain"],[null,null,"css"]]};var a={};function d(t,e){e=t.match(a[t=e]||(a[t]=new RegExp("\\s+"+t+"\\s*=\\s*('|\")?([^'\"]+)('|\")?\\s*")));return e?/^\s*(.*?)\s*$/.exec(e[2])[1]:""}function g(t,e){return new RegExp((e?"^":"")+"</\\s*"+t+"\\s*>","i")}function o(t,e){for(var a in t)for(var n=e[a]||(e[a]=[]),l=t[a],o=l.length-1;0<=o;o--)n.unshift(l[o])}m.defineMode("htmlmixed",function(i,t){var c=m.getMode(i,{name:"xml",htmlMode:!0,multilineTagIndentFactor:t.multilineTagIndentFactor,multilineTagIndentPastTag:t.multilineTagIndentPastTag,allowMissingTagName:t.allowMissingTagName}),s={},e=t&&t.tags,a=t&&t.scriptTypes;if(o(l,s),e&&o(e,s),a)for(var n=a.length-1;0<=n;n--)s.script.unshift(["type",a[n].matches,a[n].mode]);function u(t,e){var a,o,r,n=c.token(t,e.htmlState),l=/\btag\b/.test(n);return l&&!/[<>\s\/]/.test(t.current())&&(a=e.htmlState.tagName&&e.htmlState.tagName.toLowerCase())&&s.hasOwnProperty(a)?e.inTag=a+" ":e.inTag&&l&&/>$/.test(t.current())?(a=/^([\S]+) (.*)/.exec(e.inTag),e.inTag=null,l=">"==t.current()&&function(t,e){for(var a=0;a<t.length;a++){var n=t[a];if(!n[0]||n[1].test(d(e,n[0])))return n[2]}}(s[a[1]],a[2]),l=m.getMode(i,l),o=g(a[1],!0),r=g(a[1],!1),e.token=function(t,e){return t.match(o,!1)?(e.token=u,e.localState=e.localMode=null):(a=t,n=r,t=e.localMode.token(t,e.localState),e=a.current(),-1<(l=e.search(n))?a.backUp(e.length-l):e.match(/<\/?$/)&&(a.backUp(e.length),a.match(n,!1)||a.match(e)),t);var a,n,l},e.localMode=l,e.localState=m.startState(l,c.indent(e.htmlState,"",""))):e.inTag&&(e.inTag+=t.current(),t.eol()&&(e.inTag+=" ")),n}return{startState:function(){return{token:u,inTag:null,localMode:null,localState:null,htmlState:m.startState(c)}},copyState:function(t){var e;return t.localState&&(e=m.copyState(t.localMode,t.localState)),{token:t.token,inTag:t.inTag,localMode:t.localMode,localState:e,htmlState:m.copyState(c,t.htmlState)}},token:function(t,e){return e.token(t,e)},indent:function(t,e,a){return!t.localMode||/^\s*<\//.test(e)?c.indent(t.htmlState,e,a):t.localMode.indent?t.localMode.indent(t.localState,e,a):m.Pass},innerMode:function(t){return{state:t.localState||t.htmlState,mode:t.localMode||c}}}},"xml","javascript","css"),m.defineMIME("text/html","htmlmixed")});

public/vendor/codemirror/5.65.5/mode/properties/properties.min.js

@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(e){"use strict";e.defineMode("properties",function(){return{token:function(e,i){var t=e.sol()||i.afterSection,n=e.eol();if(i.afterSection=!1,t&&(i.nextMultiline?(i.inMultiline=!0,i.nextMultiline=!1):i.position="def"),n&&!i.nextMultiline&&(i.inMultiline=!1,i.position="def"),t)for(;e.eatSpace(););n=e.next();return!t||"#"!==n&&"!"!==n&&";"!==n?t&&"["===n?(i.afterSection=!0,e.skipTo("]"),e.eat("]"),"header"):"="===n||":"===n?(i.position="quote",null):("\\"===n&&"quote"===i.position&&e.eol()&&(i.nextMultiline=!0),i.position):(i.position="comment",e.skipToEnd(),"comment")},startState:function(){return{position:"def",nextMultiline:!1,inMultiline:!1,afterSection:!1}}}}),e.defineMIME("text/x-properties","properties"),e.defineMIME("text/x-ini","properties")});

public/vendor/codemirror/5.65.5/mode/shell/shell.min.js

@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(s){"use strict";s.defineMode("shell",function(){var o={};function e(e,t){for(var n=0;n<t.length;n++)o[t[n]]=e}var t=["true","false"],n=["if","then","do","else","elif","while","until","for","in","esac","fi","fin","fil","done","exit","set","unset","export","function"],r=["ab","awk","bash","beep","cat","cc","cd","chown","chmod","chroot","clear","cp","curl","cut","diff","echo","find","gawk","gcc","get","git","grep","hg","kill","killall","ln","ls","make","mkdir","openssl","mv","nc","nl","node","npm","ping","ps","restart","rm","rmdir","sed","service","sh","shopt","shred","source","sort","sleep","ssh","start","stop","su","sudo","svn","tee","telnet","top","touch","vi","vim","wall","wc","wget","who","write","yes","zsh"];function i(e,t){if(e.eatSpace())return null;var n,r=e.sol(),i=e.next();if("\\"===i)return e.next(),null;if("'"===i||'"'===i||"`"===i)return t.tokens.unshift(f(i,"`"===i?"quote":"string")),l(e,t);if("#"===i)return r&&e.eat("!")?(e.skipToEnd(),"meta"):(e.skipToEnd(),"comment");if("$"===i)return t.tokens.unshift(u),l(e,t);if("+"===i||"="===i)return"operator";if("-"===i)return e.eat("-"),e.eatWhile(/\w/),"attribute";if("<"==i){if(e.match("<<"))return"operator";r=e.match(/^<-?\s*['"]?([^'"]*)['"]?/);if(r)return t.tokens.unshift((n=r[1],function(e,t){return e.sol()&&e.string==n&&t.tokens.shift(),e.skipToEnd(),"string-2"})),"string-2"}if(/\d/.test(i)&&(e.eatWhile(/\d/),e.eol()||!/\w/.test(e.peek())))return"number";e.eatWhile(/[\w-]/);t=e.current();return"="===e.peek()&&/\w+/.test(t)?"def":o.hasOwnProperty(t)?o[t]:null}function f(i,o){var s="("==i?")":"{"==i?"}":i;return function(e,t){for(var n,r=!1;null!=(n=e.next());){if(n===s&&!r){t.tokens.shift();break}if("$"===n&&!r&&"'"!==i&&e.peek()!=s){r=!0,e.backUp(1),t.tokens.unshift(u);break}if(!r&&i!==s&&n===i)return t.tokens.unshift(f(i,o)),l(e,t);if(!r&&/['"]/.test(n)&&!/['"]/.test(i)){t.tokens.unshift(function(n,r){return function(e,t){return t.tokens[0]=f(n,r),e.next(),l(e,t)}}(n,"string")),e.backUp(1);break}r=!r&&"\\"===n}return o}}s.registerHelper("hintWords","shell",t.concat(n,r)),e("atom",t),e("keyword",n),e("builtin",r);var u=function(e,t){1<t.tokens.length&&e.eat("$");var n=e.next();return/['"({]/.test(n)?(t.tokens[0]=f(n,"("==n?"quote":"{"==n?"def":"string"),l(e,t)):(/\d/.test(n)||e.eatWhile(/\w/),t.tokens.shift(),"def")};function l(e,t){return(t.tokens[0]||i)(e,t)}return{startState:function(){return{tokens:[]}},token:l,closeBrackets:"()[]{}''\"\"``",lineComment:"#",fold:"brace"}}),s.defineMIME("text/x-sh","shell"),s.defineMIME("application/x-sh","shell")});

public/vendor/codemirror/5.65.5/mode/yaml/yaml.min.js

@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(e){"use strict";e.defineMode("yaml",function(){var n=new RegExp("\\b(("+["true","false","on","off","yes","no"].join(")|(")+"))$","i");return{token:function(e,i){var t=e.peek(),r=i.escaped;if(i.escaped=!1,"#"==t&&(0==e.pos||/\s/.test(e.string.charAt(e.pos-1))))return e.skipToEnd(),"comment";if(e.match(/^('([^']|\\.)*'?|"([^"]|\\.)*"?)/))return"string";if(i.literal&&e.indentation()>i.keyCol)return e.skipToEnd(),"string";if(i.literal&&(i.literal=!1),e.sol()){if(i.keyCol=0,i.pair=!1,i.pairStart=!1,e.match("---"))return"def";if(e.match("..."))return"def";if(e.match(/\s*-\s+/))return"meta"}if(e.match(/^(\{|\}|\[|\])/))return"{"==t?i.inlinePairs++:"}"==t?i.inlinePairs--:"["==t?i.inlineList++:i.inlineList--,"meta";if(0<i.inlineList&&!r&&","==t)return e.next(),"meta";if(0<i.inlinePairs&&!r&&","==t)return i.keyCol=0,i.pair=!1,i.pairStart=!1,e.next(),"meta";if(i.pairStart){if(e.match(/^\s*(\||\>)\s*/))return i.literal=!0,"meta";if(e.match(/^\s*(\&|\*)[a-z0-9\._-]+\b/i))return"variable-2";if(0==i.inlinePairs&&e.match(/^\s*-?[0-9\.\,]+\s?$/))return"number";if(0<i.inlinePairs&&e.match(/^\s*-?[0-9\.\,]+\s?(?=(,|}))/))return"number";if(e.match(n))return"keyword"}return!i.pair&&e.match(/^\s*(?:[,\[\]{}&*!|>'"%@`][^\s'":]|[^,\[\]{}#&*!|>'"%@`])[^#]*?(?=\s*:($|\s))/)?(i.pair=!0,i.keyCol=e.indentation(),"atom"):i.pair&&e.match(/^:\s*/)?(i.pairStart=!0,"meta"):(i.pairStart=!1,i.escaped="\\"==t,e.next(),null)},startState:function(){return{pair:!1,pairStart:!1,keyCol:0,inlinePairs:0,inlineList:0,literal:!1,escaped:!1}},lineComment:"#",fold:"indent"}}),e.defineMIME("text/x-yaml","yaml"),e.defineMIME("text/yaml","yaml")});