From 1ca8110d56c24a45f3a243830c8791f6bd84b944 Mon Sep 17 00:00:00 2001
From: Rafael Foster <rafaelgfoster@gmail.com>
Date: Wed, 29 Apr 2026 06:27:37 -0300
Subject: [PATCH] fix(documents): improve upload modal and document theme

---
 public/components/modal.js  | 20 +++++++++-
 public/locales/ar.json      |  5 ++-
 public/locales/de.json      |  5 ++-
 public/locales/el.json      |  5 ++-
 public/locales/en.json      |  5 ++-
 public/locales/es.json      |  5 ++-
 public/locales/fr.json      |  5 ++-
 public/locales/hi.json      |  5 ++-
 public/locales/it.json      |  5 ++-
 public/locales/ja.json      |  5 ++-
 public/locales/pt.json      |  5 ++-
 public/locales/ru.json      |  5 ++-
 public/locales/sv.json      |  5 ++-
 public/locales/tr.json      |  5 ++-
 public/locales/uk.json      |  5 ++-
 public/locales/zh.json      |  5 ++-
 public/pages/documents.js   | 46 ++++++++++++++++++++++-
 public/styles/documents.css | 75 +++++++++++++++++++++++++++++++++++--
 public/styles/tokens.css    |  4 +-
 public/sw.js                |  8 ++--
 20 files changed, 200 insertions(+), 28 deletions(-)

diff --git a/public/components/modal.js b/public/components/modal.js
index 4dcb51f..c124191 100644
--- a/public/components/modal.js
+++ b/public/components/modal.js
@@ -105,7 +105,7 @@ function trapFocus(container) {
 // --------------------------------------------------------
 
 function serializeForm(container) {
-  const inputs = container.querySelectorAll('input, select, textarea');
+  const inputs = container.querySelectorAll('input:not([type="file"]), select, textarea');
   return Array.from(inputs).map((el) => `${el.name || el.id}=${el.value}`).join('&');
 }
 
@@ -327,17 +327,33 @@ export async function closeModal({ force = false } = {}) {
   if (!force) {
     const panel = activeOverlay.querySelector('.modal-panel');
     if (panel && isFormDirty(panel)) {
+      const dirtyOverlay = activeOverlay;
+      const dirtySnapshot = _initialFormSnapshot;
       let confirmed;
       try {
+        activeOverlay = null;
+        _isClosing = false;
         confirmed = await confirmModal(t('modal.unsavedChanges'), {
           danger: false,
           confirmLabel: t('modal.discardChanges'),
         });
       } catch (err) {
+        activeOverlay = dirtyOverlay;
+        _initialFormSnapshot = dirtySnapshot;
         _isClosing = false;
         throw err;
       }
-      if (!confirmed) { _isClosing = false; return; }
+      activeOverlay = dirtyOverlay;
+      _initialFormSnapshot = dirtySnapshot;
+      if (!confirmed) {
+        document.body.style.overflow = 'hidden';
+        if (window.oikos?.setThemeColor) {
+          window.oikos.setThemeColor(OVERLAY_THEME_COLOR, OVERLAY_THEME_COLOR);
+        }
+        _isClosing = false;
+        return;
+      }
+      _isClosing = true;
     }
   }
 
diff --git a/public/locales/ar.json b/public/locales/ar.json
index 25ac6a0..30cbf0c 100644
--- a/public/locales/ar.json
+++ b/public/locales/ar.json
@@ -955,6 +955,9 @@
       "taxes": "ضرائب",
       "work": "عمل",
       "other": "أخرى"
-    }
+    },
+    "dropzoneTitle": "أفلت الملف هنا أو انقر للاختيار",
+    "dropzoneHint": "اسحب ملفًا إلى هذه المنطقة أو استخدم محدد الملفات.",
+    "selectedFileLabel": "المحدد: {{name}}"
   }
 }
diff --git a/public/locales/de.json b/public/locales/de.json
index 01cb775..b60674f 100644
--- a/public/locales/de.json
+++ b/public/locales/de.json
@@ -993,6 +993,9 @@
       "taxes": "Steuern",
       "work": "Arbeit",
       "other": "Sonstiges"
-    }
+    },
+    "dropzoneTitle": "Datei hier ablegen oder klicken",
+    "dropzoneHint": "Ziehe eine Datei in diesen Bereich oder nutze die Dateiauswahl.",
+    "selectedFileLabel": "Ausgewählt: {{name}}"
   }
 }
diff --git a/public/locales/el.json b/public/locales/el.json
index 434d361..27e250f 100644
--- a/public/locales/el.json
+++ b/public/locales/el.json
@@ -955,6 +955,9 @@
       "taxes": "Φόροι",
       "work": "Εργασία",
       "other": "Άλλο"
-    }
+    },
+    "dropzoneTitle": "Αφήστε το αρχείο εδώ ή κάντε κλικ για επιλογή",
+    "dropzoneHint": "Σύρετε ένα αρχείο σε αυτήν την περιοχή ή χρησιμοποιήστε τον επιλογέα αρχείων.",
+    "selectedFileLabel": "Επιλέχθηκε: {{name}}"
   }
 }
diff --git a/public/locales/en.json b/public/locales/en.json
index de7002a..77a4869 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -979,6 +979,9 @@
       "taxes": "Taxes",
       "work": "Work",
       "other": "Other"
-    }
+    },
+    "dropzoneTitle": "Drop file here or click to choose",
+    "dropzoneHint": "Drag a file into this area, or use the file picker.",
+    "selectedFileLabel": "Selected: {{name}}"
   }
 }
diff --git a/public/locales/es.json b/public/locales/es.json
index b75d023..63f2403 100644
--- a/public/locales/es.json
+++ b/public/locales/es.json
@@ -955,6 +955,9 @@
       "taxes": "Impuestos",
       "work": "Trabajo",
       "other": "Otros"
-    }
+    },
+    "dropzoneTitle": "Suelta el archivo aquí o haz clic para elegir",
+    "dropzoneHint": "Arrastra un archivo a esta área o usa el selector de archivos.",
+    "selectedFileLabel": "Seleccionado: {{name}}"
   }
 }
diff --git a/public/locales/fr.json b/public/locales/fr.json
index 552f271..5f2d9bc 100644
--- a/public/locales/fr.json
+++ b/public/locales/fr.json
@@ -955,6 +955,9 @@
       "taxes": "Impôts",
       "work": "Travail",
       "other": "Autre"
-    }
+    },
+    "dropzoneTitle": "Déposez le fichier ici ou cliquez pour choisir",
+    "dropzoneHint": "Glissez un fichier dans cette zone ou utilisez le sélecteur.",
+    "selectedFileLabel": "Sélectionné : {{name}}"
   }
 }
diff --git a/public/locales/hi.json b/public/locales/hi.json
index 6fd8ecc..0140a78 100644
--- a/public/locales/hi.json
+++ b/public/locales/hi.json
@@ -955,6 +955,9 @@
       "taxes": "कर",
       "work": "काम",
       "other": "अन्य"
-    }
+    },
+    "dropzoneTitle": "फ़ाइल यहाँ छोड़ें या चुनने के लिए क्लिक करें",
+    "dropzoneHint": "फ़ाइल को इस क्षेत्र में खींचें या फ़ाइल पिकर का उपयोग करें।",
+    "selectedFileLabel": "चयनित: {{name}}"
   }
 }
diff --git a/public/locales/it.json b/public/locales/it.json
index 76aa5a9..a186987 100644
--- a/public/locales/it.json
+++ b/public/locales/it.json
@@ -955,6 +955,9 @@
       "taxes": "Tasse",
       "work": "Lavoro",
       "other": "Altro"
-    }
+    },
+    "dropzoneTitle": "Rilascia il file qui o fai clic per scegliere",
+    "dropzoneHint": "Trascina un file in quest’area oppure usa il selettore.",
+    "selectedFileLabel": "Selezionato: {{name}}"
   }
 }
diff --git a/public/locales/ja.json b/public/locales/ja.json
index 0f952a0..af14261 100644
--- a/public/locales/ja.json
+++ b/public/locales/ja.json
@@ -955,6 +955,9 @@
       "taxes": "税金",
       "work": "仕事",
       "other": "その他"
-    }
+    },
+    "dropzoneTitle": "ここにファイルをドロップ、またはクリックして選択",
+    "dropzoneHint": "この領域にファイルをドラッグするか、ファイル選択を使用します。",
+    "selectedFileLabel": "選択済み: {{name}}"
   }
 }
diff --git a/public/locales/pt.json b/public/locales/pt.json
index e4c743a..cc192bc 100644
--- a/public/locales/pt.json
+++ b/public/locales/pt.json
@@ -961,6 +961,9 @@
       "taxes": "Impostos",
       "work": "Trabalho",
       "other": "Outros"
-    }
+    },
+    "dropzoneTitle": "Solte o arquivo aqui ou clique para escolher",
+    "dropzoneHint": "Arraste um arquivo para esta area, ou use o seletor de arquivos.",
+    "selectedFileLabel": "Selecionado: {{name}}"
   }
 }
diff --git a/public/locales/ru.json b/public/locales/ru.json
index bde9516..cbde67e 100644
--- a/public/locales/ru.json
+++ b/public/locales/ru.json
@@ -955,6 +955,9 @@
       "taxes": "Налоги",
       "work": "Работа",
       "other": "Другое"
-    }
+    },
+    "dropzoneTitle": "Перетащите файл сюда или нажмите для выбора",
+    "dropzoneHint": "Перетащите файл в эту область или используйте выбор файла.",
+    "selectedFileLabel": "Выбрано: {{name}}"
   }
 }
diff --git a/public/locales/sv.json b/public/locales/sv.json
index ee548b6..22ccc90 100644
--- a/public/locales/sv.json
+++ b/public/locales/sv.json
@@ -955,6 +955,9 @@
       "taxes": "Skatter",
       "work": "Arbete",
       "other": "Övrigt"
-    }
+    },
+    "dropzoneTitle": "Släpp filen här eller klicka för att välja",
+    "dropzoneHint": "Dra en fil till området eller använd filväljaren.",
+    "selectedFileLabel": "Vald: {{name}}"
   }
 }
diff --git a/public/locales/tr.json b/public/locales/tr.json
index 775d548..9129103 100644
--- a/public/locales/tr.json
+++ b/public/locales/tr.json
@@ -955,6 +955,9 @@
       "taxes": "Vergiler",
       "work": "İş",
       "other": "Diğer"
-    }
+    },
+    "dropzoneTitle": "Dosyayı buraya bırakın veya seçmek için tıklayın",
+    "dropzoneHint": "Bir dosyayı bu alana sürükleyin veya dosya seçiciyi kullanın.",
+    "selectedFileLabel": "Seçildi: {{name}}"
   }
 }
diff --git a/public/locales/uk.json b/public/locales/uk.json
index 4c100a7..e0c66de 100644
--- a/public/locales/uk.json
+++ b/public/locales/uk.json
@@ -963,6 +963,9 @@
       "taxes": "Податки",
       "work": "Робота",
       "other": "Інше"
-    }
+    },
+    "dropzoneTitle": "Перетягніть файл сюди або натисніть для вибору",
+    "dropzoneHint": "Перетягніть файл у цю область або скористайтеся вибором файлу.",
+    "selectedFileLabel": "Вибрано: {{name}}"
   }
 }
diff --git a/public/locales/zh.json b/public/locales/zh.json
index 77645ce..730b037 100644
--- a/public/locales/zh.json
+++ b/public/locales/zh.json
@@ -955,6 +955,9 @@
       "taxes": "税务",
       "work": "工作",
       "other": "其他"
-    }
+    },
+    "dropzoneTitle": "将文件拖到此处或点击选择",
+    "dropzoneHint": "将文件拖入此区域，或使用文件选择器。",
+    "selectedFileLabel": "已选择：{{name}}"
   }
 }
diff --git a/public/pages/documents.js b/public/pages/documents.js
index 464de01..57cf30d 100644
--- a/public/pages/documents.js
+++ b/public/pages/documents.js
@@ -277,7 +277,15 @@ function openDocumentModal(doc = null) {
         ${!isEdit ? `
         <div class="form-group">
           <label class="label" for="document-file">${t('documents.fileLabel')}</label>
-          <input class="input" id="document-file" type="file" required>
+          <label class="document-dropzone" id="document-dropzone" for="document-file">
+            <input class="sr-only" id="document-file" type="file" required>
+            <span class="document-dropzone__icon">
+              <i data-lucide="file-up" aria-hidden="true"></i>
+            </span>
+            <span class="document-dropzone__title">${t('documents.dropzoneTitle')}</span>
+            <span class="document-dropzone__hint">${t('documents.dropzoneHint')}</span>
+            <span class="document-dropzone__file" id="document-selected-file" hidden></span>
+          </label>
           <p class="document-form__hint">${t('documents.fileHint')}</p>
         </div>` : ''}
         <div class="modal-grid modal-grid--2">
@@ -314,11 +322,47 @@ function openDocumentModal(doc = null) {
       const syncVisibility = () => { picker.hidden = visibility.value !== 'restricted'; };
       visibility.addEventListener('change', syncVisibility);
       syncVisibility();
+      bindDropzone(panel);
       form.addEventListener('submit', (event) => saveDocument(event, doc));
     },
   });
 }
 
+function bindDropzone(panel) {
+  const dropzone = panel.querySelector('#document-dropzone');
+  const input = panel.querySelector('#document-file');
+  const selected = panel.querySelector('#document-selected-file');
+  if (!dropzone || !input || !selected) return;
+
+  const syncSelectedFile = () => {
+    const file = input.files?.[0];
+    selected.hidden = !file;
+    selected.textContent = file ? t('documents.selectedFileLabel', { name: file.name }) : '';
+  };
+
+  input.addEventListener('change', syncSelectedFile);
+  ['dragenter', 'dragover'].forEach((eventName) => {
+    dropzone.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      dropzone.classList.add('document-dropzone--active');
+    });
+  });
+  ['dragleave', 'drop'].forEach((eventName) => {
+    dropzone.addEventListener(eventName, (event) => {
+      event.preventDefault();
+      dropzone.classList.remove('document-dropzone--active');
+    });
+  });
+  dropzone.addEventListener('drop', (event) => {
+    const file = event.dataTransfer?.files?.[0];
+    if (!file) return;
+    const transfer = new DataTransfer();
+    transfer.items.add(file);
+    input.files = transfer.files;
+    syncSelectedFile();
+  });
+}
+
 async function saveDocument(event, doc) {
   event.preventDefault();
   const form = event.target;
diff --git a/public/styles/documents.css b/public/styles/documents.css
index bbcf63d..045a88d 100644
--- a/public/styles/documents.css
+++ b/public/styles/documents.css
@@ -33,18 +33,19 @@
 
 .documents-toolbar__search-icon {
   position: absolute;
-  left: var(--space-3);
+  left: var(--space-4);
   top: 50%;
-  width: 16px;
-  height: 16px;
+  width: 18px;
+  height: 18px;
   transform: translateY(-50%);
   color: var(--color-text-tertiary);
+  pointer-events: none;
 }
 
 .documents-toolbar__search-input {
   width: 100%;
   min-height: var(--target-base);
-  padding: 0 var(--space-3) 0 var(--space-9);
+  padding: 0 var(--space-3) 0 calc(var(--space-10) + var(--space-1));
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   background: var(--color-surface-2);
@@ -223,7 +224,73 @@
   font-size: var(--text-xs);
 }
 
+.document-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-height: 148px;
+  padding: var(--space-5);
+  border: 1.5px dashed color-mix(in srgb, var(--module-accent) 48%, var(--color-border));
+  border-radius: var(--radius-md);
+  background: color-mix(in srgb, var(--module-accent) 7%, var(--color-surface));
+  color: var(--color-text-secondary);
+  text-align: center;
+  cursor: pointer;
+  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
+}
+
+.document-dropzone:hover,
+.document-dropzone--active {
+  border-color: var(--module-accent);
+  background: color-mix(in srgb, var(--module-accent) 12%, var(--color-surface));
+}
+
+.document-dropzone--active {
+  transform: translateY(-1px);
+}
+
+.document-dropzone__icon {
+  width: 42px;
+  height: 42px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  color: var(--module-accent);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-sm);
+}
+
+.document-dropzone__icon svg {
+  width: 22px;
+  height: 22px;
+}
+
+.document-dropzone__title {
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+
+.document-dropzone__hint,
+.document-dropzone__file {
+  max-width: 100%;
+  font-size: var(--text-xs);
+  overflow-wrap: anywhere;
+}
+
+.document-dropzone__file {
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  color: var(--module-accent);
+  background: color-mix(in srgb, var(--module-accent) 14%, transparent);
+  font-weight: var(--font-weight-semibold);
+}
+
 .document-member-picker {
+  margin-top: var(--space-2);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--radius-md);
   padding: var(--space-3);
diff --git a/public/styles/tokens.css b/public/styles/tokens.css
index bd5112a..3dc1a57 100644
--- a/public/styles/tokens.css
+++ b/public/styles/tokens.css
@@ -172,8 +172,8 @@
   --module-birthdays:  var(--_module-birthdays);   /* Rose - Geburtstage */
   --_module-budget:    #0F766E;
   --module-budget:     var(--_module-budget);      /* Teal-700 - Finanzen, Stabilität */
-  --_module-documents: #475569;
-  --module-documents:  var(--_module-documents);    /* Slate - private family records */
+  --_module-documents: #1D4ED8;
+  --module-documents:  var(--_module-documents);    /* Blue - secure family documents */
   --_module-settings:   #6E7781;
   --module-settings:    var(--_module-settings);   /* Grau - Konfiguration */
   --_module-reminders:  #0E7490;
diff --git a/public/sw.js b/public/sw.js
index c7e5e5f..1fbec0c 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -13,10 +13,10 @@
  *   → bypassCacheUntil (in-memory + Cache API für SW-Restart-Robustheit)
  */
 
-const SHELL_CACHE   = 'oikos-shell-v67';
-const PAGES_CACHE   = 'oikos-pages-v62';
-const LOCALES_CACHE = 'oikos-locales-v11';
-const ASSETS_CACHE  = 'oikos-assets-v62';
+const SHELL_CACHE   = 'oikos-shell-v68';
+const PAGES_CACHE   = 'oikos-pages-v63';
+const LOCALES_CACHE = 'oikos-locales-v12';
+const ASSETS_CACHE  = 'oikos-assets-v63';
 const BYPASS_CACHE  = 'oikos-bypass-flag';
 const ALL_CACHES    = [SHELL_CACHE, PAGES_CACHE, LOCALES_CACHE, ASSETS_CACHE];