Benachrichtigungsglocke fuer ungelesene E-Mails

Neue Antworten werden meist automatisch einer Bewerbung zugeordnet und tauchten daher nie im Postfach auf - man bemerkte sie nicht. Eine Glocke im Header zeigt jetzt auf jeder Seite die Zahl ungelesener empfangener E-Mails (inkl. zugeordneter Antworten) und listet sie in einem Dropdown mit Absender, Betreff, Auszug und Link zur Bewerbung bzw. zum Postfach. - GET /api/notifications: Anzahl + neueste ungelesene Nachrichten. - POST /api/emails/mark-all-read: alle als gelesen markieren. - Postfach-Ansicht markiert unverknuepfte Mails als gelesen (leert die Glocke), zugeordnete Antworten werden beim Oeffnen der Bewerbung gelesen. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
E-Mails als HTML anzeigen; Antworten zitieren Vornachricht (auch KI)
2026-07-04 23:39:05 +02:00 · 2026-07-04 23:06:59 +02:00
5 changed files with 266 additions and 12 deletions
@@ -175,5 +175,6 @@ module.exports = {
  fromField,
  fromAddress,
  textToHtml,
+  htmlToText,
  config: cfg,
 };
@@ -101,6 +101,58 @@ if (!fs.existsSync(emailAnhaengeDir)) {
  fs.mkdirSync(emailAnhaengeDir, { recursive: true });
 }

+// --- E-mail display + reply helpers --------------------------------------
+// A stored message is rendered as HTML when we have an HTML body (or the plain
+// body is actually HTML markup — some senders put HTML in the text/plain part).
+// Otherwise it is shown as plain text. HTML is displayed inside a sandboxed
+// iframe (see the views), so scripts never run.
+function looksLikeHtml(s) {
+  return /<(?:!doctype|html|body|div|table|p|br|span|a|img|ul|ol|h[1-6])\b|<\/[a-z]/i.test(String(s || ''));
+}
+function emailDisplayHtml(e) {
+  if (e.body_html && e.body_html.trim()) return e.body_html;
+  if (e.body_text && looksLikeHtml(e.body_text)) return e.body_text;
+  return null;
+}
+// Wrap raw e-mail HTML in a minimal document for the sandboxed iframe: a white
+// background, readable defaults, images constrained to the width and links that
+// open in a new tab. No scripts are enabled by the iframe sandbox.
+function buildEmailSrcdoc(html) {
+  return '<!doctype html><html><head><meta charset="utf-8">' +
+    '<meta name="referrer" content="no-referrer"><base target="_blank">' +
+    '<style>html,body{margin:0;padding:10px;background:#fff;color:#111;' +
+    'font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;' +
+    'word-break:break-word;overflow-wrap:anywhere}' +
+    'img{max-width:100%!important;height:auto}table{max-width:100%!important}' +
+    'a{color:#2563eb}*{max-width:100%}</style></head><body>' +
+    String(html || '') + '</body></html>';
+}
+// Plain-text version of a message body, used as the source for reply quoting.
+function emailPlainText(e) {
+  const html = emailDisplayHtml(e);
+  if (html && (!e.body_text || looksLikeHtml(e.body_text))) return mailer.htmlToText(html);
+  return String(e.body_text || '');
+}
+// Build a mail-client style quote of a received message: an attribution line
+// followed by the original body with every line prefixed by "> ".
+function buildReplyQuote(e) {
+  const d = e.email_date ? new Date(e.email_date) : null;
+  const when = d && !isNaN(d.getTime()) ? d.toLocaleString('de-DE') : '';
+  const who = String(e.from_addr || '').trim();
+  const src = emailPlainText(e).replace(/\r\n/g, '\n').replace(/\s+$/, '');
+  const quoted = src.split('\n').map((l) => '> ' + l).join('\n');
+  const attribution = who ? `Am ${when} schrieb ${who}:` : (when ? `Am ${when}:` : '');
+  return (attribution ? attribution + '\n\n' : '') + quoted;
+}
+// Attach display fields (and, for received mail, a reply quote) to each row.
+function decorateEmails(emails) {
+  emails.forEach((e) => {
+    const html = emailDisplayHtml(e);
+    e.display_srcdoc = html ? buildEmailSrcdoc(html) : null;
+    if (e.direction !== 'out') e.reply_quote = buildReplyQuote(e);
+  });
+}
+
 // Directory for static extra attachments (e.g. Zeugnisse) the user uploads once
 // and that are sent along with every generated application.
 const basisAnhaengeDir = path.join(dataDir, 'basis_anhaenge');
@@ -1187,6 +1239,8 @@ initializeDatabase().then(() => {
          const m = String(e.from_addr || '').match(/<([^>]+)>/);
          e.from_addr_clean = m ? m[1] : String(e.from_addr || '').trim();
        });
+        // HTML rendering (sandboxed iframe) + a quote of each received message.
+        decorateEmails(emails);
        // Mark received messages as read now that they are shown.
        await dbRun("UPDATE emails SET seen = 1 WHERE bewerbung_id = ? AND direction = 'in' AND seen = 0", [id]);
      }
@@ -1334,12 +1388,13 @@ initializeDatabase().then(() => {
      const settings = await dbGet('SELECT * FROM settings WHERE id = 1');

      const draft = await generateEmailReply({
-        incoming: { from: orig.from_addr, subject: orig.subject, text: orig.body_text },
+        incoming: { from: orig.from_addr, subject: orig.subject, text: emailPlainText(orig) },
        job: { firma: bewerbung.firma, stelle: bewerbung.stelle },
        settings,
        hinweise: String(req.body.hinweise || ''),
      });
-      res.json(draft);
+      // Include the quoted original so the reply reads like a mail-client thread.
+      res.json({ ...draft, quote: buildReplyQuote(orig) });
    } catch (error) {
      console.error('Error drafting AI reply:', error);
      res.status(500).json({ error: error.message || 'Serverfehler' });
@@ -1390,6 +1445,11 @@ initializeDatabase().then(() => {
        const byEmail = {};
        atts.forEach((a) => { (byEmail[a.email_id] = byEmail[a.email_id] || []).push(a); });
        emails.forEach((e) => { e.anhaenge = byEmail[e.id] || []; });
+        decorateEmails(emails);
+        // These are read now that they are shown — clears them from the bell.
+        // (The `seen` values above are captured pre-update, so the "Neu" badge
+        // still renders on this view.)
+        await dbRun("UPDATE emails SET seen = 1 WHERE bewerbung_id IS NULL AND direction = 'in' AND seen = 0");
      }
      // Applications the user can assign an e-mail to (newest first).
      const bewerbungen = await dbAll(
@@ -1446,7 +1506,7 @@ initializeDatabase().then(() => {
    }
  });

-  // Count of unlinked e-mails — drives the header badge on every page.
+  // Count of unlinked e-mails — drives the "Postfach" header badge on every page.
  app.get('/api/emails/unassigned-count', async (req, res) => {
    try {
      const row = await dbGet('SELECT COUNT(*) as count FROM emails WHERE bewerbung_id IS NULL');
@@ -1456,6 +1516,54 @@ initializeDatabase().then(() => {
    }
  });

+  // Unread received e-mails — drives the notification bell on every page. Returns
+  // the total unread count plus the newest few as a ready-to-render list. Replies
+  // auto-assigned to an application carry a link to that application; unassigned
+  // mail links to the Postfach.
+  app.get('/api/notifications', async (req, res) => {
+    try {
+      const cntRow = await dbGet(
+        "SELECT COUNT(*) AS count FROM emails WHERE direction = 'in' AND seen = 0"
+      );
+      const rows = await dbAll(
+        `SELECT e.id, e.from_addr, e.subject, e.body_text, e.body_html, e.email_date, e.bewerbung_id,
+                b.firma, b.stelle
+           FROM emails e LEFT JOIN bewerbungen b ON b.id = e.bewerbung_id
+          WHERE e.direction = 'in' AND e.seen = 0
+          ORDER BY datetime(e.email_date) DESC, e.id DESC
+          LIMIT 30`
+      );
+      const items = rows.map((e) => {
+        const fromName = String(e.from_addr || '').replace(/<[^>]*>/, '').replace(/"/g, '').trim()
+          || String(e.from_addr || '').trim();
+        const snippet = emailPlainText(e).replace(/\s+/g, ' ').trim().slice(0, 140);
+        return {
+          id: e.id,
+          from: fromName || '(unbekannt)',
+          subject: e.subject || '(kein Betreff)',
+          snippet,
+          date: e.email_date || null,
+          bewerbung_id: e.bewerbung_id || null,
+          kontext: e.bewerbung_id ? [e.firma, e.stelle].filter(Boolean).join(' · ') : '',
+          url: e.bewerbung_id ? ('/bewerbung/' + e.bewerbung_id + '#korrespondenz') : '/postfach',
+        };
+      });
+      res.json({ count: cntRow ? cntRow.count : 0, items });
+    } catch (error) {
+      res.status(500).json({ count: 0, items: [] });
+    }
+  });
+
+  // Mark every received e-mail as read (clears the notification bell).
+  app.post('/api/emails/mark-all-read', async (req, res) => {
+    try {
+      await dbRun("UPDATE emails SET seen = 1 WHERE direction = 'in' AND seen = 0");
+      res.json({ ok: true });
+    } catch (error) {
+      res.status(500).json({ ok: false });
+    }
+  });
+
  // Add a timeline entry (status change with date + comment)
  app.post('/bewerbung/:id/verlauf', async (req, res) => {
    try {
@@ -336,7 +336,13 @@
                                    <span class="text-xs text-gray-500 dark:text-gray-400 shrink-0"><%= e.email_date ? new Date(e.email_date).toLocaleString('de-DE') : '' %></span>
                                </div>
                                <p class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1"><%= e.subject || '(kein Betreff)' %></p>
+                                <% if (e.display_srcdoc) { %>
+                                    <iframe class="email-html-frame w-full border border-gray-200 dark:border-gray-600 rounded bg-white" style="height:6rem"
+                                        sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" referrerpolicy="no-referrer"
+                                        srcdoc="<%= e.display_srcdoc %>"></iframe>
+                                <% } else { %>
                                    <p class="whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300"><%= e.body_text || '' %></p>
+                                <% } %>

                                <% if (e.anhaenge && e.anhaenge.length) { %>
                                    <div class="mt-2 flex flex-wrap gap-2">
@@ -369,8 +375,8 @@
                                                <span class="ai-reply-label">KI-Antwort generieren</span>
                                            </button>
                                        </div>
-                                        <textarea name="body" rows="8" required
-                                            class="reply-body w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white text-sm leading-relaxed"></textarea>
+                                        <textarea name="body" rows="12" required
+                                            class="reply-body w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white text-sm leading-relaxed"><%= e.reply_quote ? '\n\n' + e.reply_quote : '' %></textarea>
                                        <div class="flex justify-end mt-2">
                                            <button type="submit" class="inline-flex items-center gap-1.5 px-4 py-2 text-sm bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">Antwort senden</button>
                                        </div>
@@ -688,11 +694,36 @@
                } catch (e) { /* clipboard blocked — ignore */ }
            });

+            // Size a sandboxed e-mail iframe to its content height. The sandbox
+            // enables allow-same-origin (but not allow-scripts), so scripts in the
+            // mail never run, yet we can still measure the rendered document.
+            function fitFrame(f) {
+                try {
+                    const doc = f.contentDocument || (f.contentWindow && f.contentWindow.document);
+                    if (!doc || !doc.body) return;
+                    const h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
+                    if (h > 0) f.style.height = (h + 6) + 'px';
+                } catch (e) { /* cross-origin (shouldn't happen) — leave default height */ }
+            }
+            document.querySelectorAll('.email-html-frame').forEach((f) => {
+                f.addEventListener('load', () => fitFrame(f));
+                fitFrame(f);
+                // Late reflow once embedded images have loaded.
+                setTimeout(() => fitFrame(f), 400);
+                setTimeout(() => fitFrame(f), 1500);
+            });
+
            // Toggle inline reply forms under received e-mails.
            document.querySelectorAll('.reply-toggle').forEach((btn) => {
                btn.addEventListener('click', () => {
                    const form = document.getElementById(btn.dataset.target);
-                    if (form) form.classList.toggle('hidden');
+                    if (!form) return;
+                    form.classList.toggle('hidden');
+                    // On open, put the cursor above the quoted text.
+                    if (!form.classList.contains('hidden')) {
+                        const ta = form.querySelector('.reply-body');
+                        if (ta) { ta.focus(); try { ta.setSelectionRange(0, 0); } catch (e) {} ta.scrollTop = 0; }
+                    }
                });
            });

@@ -715,7 +746,12 @@
                        if (!res.ok) throw new Error(data.error || 'Fehler');
                        const body = form.querySelector('.reply-body');
                        const subject = form.querySelector('.reply-subject');
-                        if (body && data.text) body.value = data.text;
+                        if (body && data.text) {
+                            // Generated reply on top, quoted original beneath — like a mail client.
+                            body.value = data.text + (data.quote ? '\n\n' + data.quote : '');
+                            body.focus();
+                            try { body.setSelectionRange(data.text.length, data.text.length); } catch (e) {}
+                        }
                        if (subject && data.betreff) subject.value = data.betreff;
                    } catch (e) {
                        alert('KI-Antwort fehlgeschlagen: ' + e.message);
@@ -9,6 +9,26 @@
            </a>
            
            <div class="flex items-center space-x-4">
+                <!-- Notification bell: unread received e-mails (incl. auto-assigned replies) -->
+                <div class="relative" id="notifWrap">
+                    <button id="notifBtn" type="button"
+                        class="relative flex items-center p-2 rounded-full bg-white/20 hover:bg-white/30 transition-colors text-white"
+                        aria-label="Benachrichtigungen" title="Ungelesene E-Mails">
+                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
+                        </svg>
+                        <span id="notifBadge" class="hidden absolute -top-1 -right-1 min-w-[18px] h-[18px] px-1 flex items-center justify-center rounded-full bg-red-500 text-white text-[10px] font-bold ring-2 ring-blue-800 dark:ring-gray-900">0</span>
+                    </button>
+                    <div id="notifPanel" class="hidden absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] max-h-96 overflow-y-auto rounded-lg bg-white dark:bg-gray-800 shadow-2xl ring-1 ring-black/10 dark:ring-white/10 z-50 text-left">
+                        <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-100 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800">
+                            <span class="text-sm font-semibold text-gray-800 dark:text-white">Benachrichtigungen</span>
+                            <button id="notifMarkAll" type="button" class="hidden text-xs text-blue-600 dark:text-blue-400 hover:underline">Alle gelesen</button>
+                        </div>
+                        <ul id="notifList" class="divide-y divide-gray-100 dark:divide-gray-700"></ul>
+                        <div id="notifEmpty" class="px-4 py-8 text-center text-sm text-gray-400 dark:text-gray-500">Keine ungelesenen Nachrichten</div>
+                    </div>
+                </div>
+
                <!-- Postfach (unlinked incoming e-mails) link -->
                <a href="/postfach"
                   class="relative flex items-center gap-1.5 px-3 py-2 rounded-md bg-white/20 hover:bg-white/30 transition-colors text-white text-sm font-medium"
@@ -83,6 +103,71 @@
        </div>
    </div>
    <script>
+        // Notification bell: unread received e-mails (new replies + orphan mail).
+        (function () {
+            var btn = document.getElementById('notifBtn');
+            var panel = document.getElementById('notifPanel');
+            var badge = document.getElementById('notifBadge');
+            var list = document.getElementById('notifList');
+            var empty = document.getElementById('notifEmpty');
+            var markAll = document.getElementById('notifMarkAll');
+            if (!btn) return;
+            function esc(s) { var d = document.createElement('div'); d.textContent = (s == null ? '' : String(s)); return d.innerHTML; }
+            function fmtDate(d) {
+                if (!d) return '';
+                try {
+                    var dt = new Date(d), diff = (Date.now() - dt.getTime()) / 1000;
+                    if (diff < 60) return 'gerade eben';
+                    if (diff < 3600) return Math.floor(diff / 60) + ' Min.';
+                    if (diff < 86400) return Math.floor(diff / 3600) + ' Std.';
+                    return dt.toLocaleDateString('de-DE');
+                } catch (e) { return ''; }
+            }
+            function render(data) {
+                var items = (data && data.items) || [], count = (data && data.count) || 0;
+                if (count > 0) { badge.textContent = count > 99 ? '99+' : count; badge.classList.remove('hidden'); }
+                else { badge.classList.add('hidden'); }
+                list.innerHTML = '';
+                if (!items.length) { empty.classList.remove('hidden'); markAll.classList.add('hidden'); return; }
+                empty.classList.add('hidden'); markAll.classList.remove('hidden');
+                items.forEach(function (it) {
+                    var li = document.createElement('li');
+                    var a = document.createElement('a');
+                    a.href = it.url;
+                    a.className = 'block px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/60 transition-colors';
+                    a.innerHTML =
+                        '<div class="flex items-center justify-between gap-2">'
+                        + '<span class="text-sm font-medium text-gray-800 dark:text-gray-100 truncate">' + esc(it.from) + '</span>'
+                        + '<span class="text-[11px] text-gray-400 shrink-0">' + esc(fmtDate(it.date)) + '</span>'
+                        + '</div>'
+                        + '<div class="text-sm text-gray-700 dark:text-gray-200 truncate">' + esc(it.subject) + '</div>'
+                        + (it.snippet ? '<div class="text-xs text-gray-500 dark:text-gray-400 truncate mt-0.5">' + esc(it.snippet) + '</div>' : '')
+                        + (it.kontext ? '<div class="text-[11px] text-blue-600 dark:text-blue-400 truncate mt-0.5">' + esc(it.kontext) + '</div>' : '');
+                    li.appendChild(a); list.appendChild(li);
+                });
+            }
+            function load() {
+                fetch('/api/notifications', { cache: 'no-store' })
+                    .then(function (r) { return r.json(); }).then(render).catch(function () { /* ignore */ });
+            }
+            btn.addEventListener('click', function (e) {
+                e.stopPropagation();
+                panel.classList.toggle('hidden');
+                if (!panel.classList.contains('hidden')) load();
+            });
+            document.addEventListener('click', function (e) {
+                if (!panel.classList.contains('hidden') && !panel.contains(e.target) && !btn.contains(e.target)) {
+                    panel.classList.add('hidden');
+                }
+            });
+            markAll.addEventListener('click', function (e) {
+                e.preventDefault(); e.stopPropagation();
+                fetch('/api/emails/mark-all-read', { method: 'POST' })
+                    .then(function () { render({ count: 0, items: [] }); }).catch(function () { /* ignore */ });
+            });
+            load();
+            setInterval(load, 60000);
+        })();
        // Populate the Postfach badge with the count of unlinked incoming e-mails.
        (function () {
            fetch('/api/emails/unassigned-count').then(function (r) { return r.json(); }).then(function (d) {
@@ -60,11 +60,17 @@
                                    <span class="text-xs text-gray-500 dark:text-gray-400 shrink-0"><%= e.email_date ? new Date(e.email_date).toLocaleString('de-DE') : '' %></span>
                                </div>
                                <p class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1"><%= e.subject || '(kein Betreff)' %></p>
+                                <% if (e.display_srcdoc) { %>
+                                    <iframe class="email-html-frame w-full border border-gray-200 dark:border-gray-600 rounded bg-white" style="height:6rem"
+                                        sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox" referrerpolicy="no-referrer"
+                                        srcdoc="<%= e.display_srcdoc %>"></iframe>
+                                <% } else { %>
                                    <p class="email-body whitespace-pre-wrap break-words text-sm leading-relaxed text-gray-700 dark:text-gray-300 max-h-40 overflow-hidden"><%= e.body_text || '' %></p>
                                    <% if (e.body_text && e.body_text.length > 600) { %>
                                    <button type="button" class="email-toggle text-xs text-blue-600 hover:text-blue-800 dark:text-blue-400 hover:underline mt-1"
                                        data-expanded="false">Vollständig anzeigen</button>
                                    <% } %>
+                                <% } %>

                                <% if (e.anhaenge && e.anhaenge.length) { %>
                                    <div class="mt-2 flex flex-wrap gap-2">
@@ -146,6 +152,24 @@
            const cy = document.getElementById('currentYear');
            if (cy) cy.textContent = new Date().getFullYear();

+            // Size each sandboxed e-mail iframe to its rendered content. The
+            // sandbox omits allow-scripts, so mail scripts never run; allow-same-
+            // origin lets us measure the document height.
+            function fitFrame(f) {
+                try {
+                    var doc = f.contentDocument || (f.contentWindow && f.contentWindow.document);
+                    if (!doc || !doc.body) return;
+                    var h = Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight);
+                    if (h > 0) f.style.height = (h + 6) + 'px';
+                } catch (e) { /* leave default height */ }
+            }
+            document.querySelectorAll('.email-html-frame').forEach(function (f) {
+                f.addEventListener('load', function () { fitFrame(f); });
+                fitFrame(f);
+                setTimeout(function () { fitFrame(f); }, 400);
+                setTimeout(function () { fitFrame(f); }, 1500);
+            });
+
            // Expand/collapse the full e-mail body for each card.
            document.querySelectorAll('.email-toggle').forEach(function (btn) {
                btn.addEventListener('click', function () {