From 37f2b00debf03c868af011c05b2fd509936dc951 Mon Sep 17 00:00:00 2001
From: keboss-m <85340750+keboss-m@users.noreply.github.com>
Date: Mon, 1 Jun 2026 12:53:46 +0300
Subject: [PATCH] Fix docx download: use native <a download> links instead of
 JS iframe method

---
 backend/static/app.js     | 28 +++++++++++++---------------
 backend/static/styles.css |  7 +++++--
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/backend/static/app.js b/backend/static/app.js
index c30f4a0..fb1e977 100644
--- a/backend/static/app.js
+++ b/backend/static/app.js
@@ -233,6 +233,17 @@ class TranscriptionApp {
             const isMd = file.ext === '.md';
             const isDocx = file.ext === '.docx';
             const icon = isMd ? '📝' : isDocx ? '📄' : '📎';
+            const downloadUrl = `/api/files/download?path=${encodeURIComponent(file.path)}`;
+
+            if (isDocx) {
+                return `
+                    <a href="${downloadUrl}" download="${this.escapeHtml(file.name)}" class="file-item file-download">
+                        <span class="file-icon">${icon}</span>
+                        <span class="file-name">${this.escapeHtml(file.name)}</span>
+                        <span class="file-size">${this.formatBytes(file.size)}</span>
+                    </a>
+                `;
+            }
 
             return `
                 <div class="file-item" data-path="${this.escapeHtml(file.path)}" data-ext="${file.ext}">
@@ -293,7 +304,7 @@ class TranscriptionApp {
 
     attachFileItemListeners() {
         const container = document.getElementById('fileTree');
-        container.querySelectorAll('.file-item').forEach(item => {
+        container.querySelectorAll('.file-item:not(.file-download)').forEach(item => {
             item.addEventListener('click', (e) => {
                 e.stopPropagation();
                 const path = item.dataset.path;
@@ -365,22 +376,9 @@ class TranscriptionApp {
         } else if (ext === '.docx') {
             viewer.innerHTML = `
                 <div class="file-preview">
-                    <p>⬇️ Скачивание DOCX...</p>
+                    <p>⬇️ Нажмите на файл слева для скачивания DOCX</p>
                 </div>
             `;
-            // iframe method — работает без user-gesture restrictions
-            const iframe = document.createElement('iframe');
-            iframe.style.display = 'none';
-            iframe.src = `/api/files/download?path=${encodeURIComponent(path)}`;
-            document.body.appendChild(iframe);
-            setTimeout(() => {
-                iframe.remove();
-                viewer.innerHTML = `
-                    <div class="file-preview">
-                        <p>✅ Файл скачан</p>
-                    </div>
-                `;
-            }, 3000);
         }
     }
 
diff --git a/backend/static/styles.css b/backend/static/styles.css
index df021b9..c3633b4 100644
--- a/backend/static/styles.css
+++ b/backend/static/styles.css
@@ -292,11 +292,14 @@ header h1 {
     cursor: default;
 }
 
-.file-item.clickable {
+.file-item.clickable, .file-download {
     cursor: pointer;
+    text-decoration: none;
+    color: inherit;
+    display: flex;
 }
 
-.file-item.clickable:hover {
+.file-item.clickable:hover, .file-download:hover {
     background: var(--bg-hover);
 }