[Fix]: Bring back performance

Oooopsie

application/imap-service.js

@@ -344,7 +344,14 @@ class ImapService extends EventEmitter {
         } catch {
             // Do nothing
         }
-        const date = headerPart.date[0]
+        const rawDate = headerPart.date && headerPart.date[0] ? headerPart.date[0] : undefined
+        let date
+        if (rawDate) {
+            const m = moment.parseZone(rawDate)
+            date = m.toDate()
+        } else {
+            date = new Date()
+        }
         const { uid } = message.attributes
 
         return Mail.create(to, from, date, subject, uid)

infrastructure/web/public/javascripts/inbox-init.js

@@ -8,56 +8,11 @@ document.addEventListener('DOMContentLoaded', () => {
         enableNewMessageNotifications(address, true);
     }
 
-    // Copy address on click
-    const copyAddress = document.getElementById('copyAddress');
-    const copyFeedback = document.getElementById('copyFeedback');
-    if (copyAddress) {
-        copyAddress.addEventListener('click', () => {
-            navigator.clipboard.writeText(copyAddress.textContent.trim()).then(() => {
-                if (copyFeedback) {
-                    copyFeedback.style.display = 'inline';
-                    setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
+    // Initialize expiry timers via utils
+    if (window.utils && typeof window.utils.initExpiryTimers === 'function') {
+        window.utils.initExpiryTimers(expiryTime, expiryUnit);
     }
-            });
-        });
+    if (window.utils && typeof window.utils.formatEmailDates === 'function') {
+        window.utils.formatEmailDates();
     }
-
-    // Expiry timer for each email
-    function getExpiryMs(time, unit) {
-        switch (unit) {
-            case 'minutes':
-                return time * 60 * 1000;
-            case 'hours':
-                return time * 60 * 60 * 1000;
-            case 'days':
-                return time * 24 * 60 * 60 * 1000;
-            default:
-                return 48 * 60 * 60 * 1000; // fallback 48h
-        }
-    }
-
-    function updateExpiryTimers() {
-        const timers = document.querySelectorAll('.expiry-timer');
-        timers.forEach(el => {
-            const dateStr = el.dataset.date;
-            if (!dateStr) return;
-            const mailDate = new Date(dateStr);
-            // Use config-driven expiry
-            const expiry = new Date(mailDate.getTime() + getExpiryMs(expiryTime, expiryUnit));
-            const now = new Date();
-            let diff = Math.floor((expiry - now) / 1000);
-            if (diff <= 0) {
-                el.textContent = 'Expired';
-                el.style.color = '#b00';
-                return;
-            }
-            const hours = Math.floor(diff / 3600);
-            diff %= 3600;
-            const minutes = Math.floor(diff / 60);
-            const seconds = diff % 60;
-            el.textContent = `Expires in ${hours}h ${minutes}m ${seconds}s`;
-        });
-    }
-    setInterval(updateExpiryTimers, 1000);
-    updateExpiryTimers();
 });

infrastructure/web/public/javascripts/lock-modals.js

@@ -1,136 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    // Lock modal elements
-    const lockModal = document.getElementById('lockModal');
-    const lockBtn = document.getElementById('lockBtn');
-    const closeLock = document.getElementById('closeLock');
-    const lockForm = document.querySelector('#lockModal form');
-
-    // Unlock modal elements
-    const unlockModal = document.getElementById('unlockModal');
-    const unlockBtn = document.getElementById('unlockBtn');
-    const closeUnlock = document.getElementById('closeUnlock');
-
-    // Remove lock modal elements
-    const removeLockModal = document.getElementById('removeLockModal');
-    const removeLockBtn = document.getElementById('removeLockBtn');
-    const closeRemoveLock = document.getElementById('closeRemoveLock');
-    const cancelRemoveLock = document.getElementById('cancelRemoveLock');
-
-    // Open/close helpers
-    const openModal = function(modal) { if (modal) modal.style.display = 'block'; };
-    const closeModal = function(modal) { if (modal) modal.style.display = 'none'; };
-
-    // Protect / Lock modal logic
-    if (lockBtn) {
-        lockBtn.onclick = function(e) {
-            e.preventDefault();
-            openModal(lockModal);
-        };
-    }
-    if (closeLock) {
-        closeLock.onclick = function() {
-            closeModal(lockModal);
-        };
-    }
-
-    if (lockForm) {
-        lockForm.addEventListener('submit', function(e) {
-            const pwElement = document.getElementById('lockPassword');
-            const cfElement = document.getElementById('lockConfirm');
-            const pw = pwElement ? pwElement.value : '';
-            const cf = cfElement ? cfElement.value : '';
-            const err = document.getElementById('lockErrorInline');
-            const serverErr = document.getElementById('lockServerError');
-            if (serverErr) serverErr.style.display = 'none';
-
-            if (pw !== cf) {
-                e.preventDefault();
-                if (err) {
-                    err.textContent = 'Passwords do not match.';
-                    err.style.display = 'block';
-                }
-                return;
-            }
-            if (pw.length < 8) {
-                e.preventDefault();
-                if (err) {
-                    err.textContent = 'Password must be at least 8 characters.';
-                    err.style.display = 'block';
-                }
-                return;
-            }
-            if (err) err.style.display = 'none';
-        });
-    }
-
-    // Auto-open lock modal if server provided an error (via data attribute)
-    if (lockModal) {
-        const lockErrorValue = (lockModal.dataset.lockError || '').trim();
-        if (lockErrorValue) {
-            openModal(lockModal);
-            const err = document.getElementById('lockErrorInline');
-            const serverErr = document.getElementById('lockServerError');
-            if (serverErr) serverErr.style.display = 'none';
-
-            if (err) {
-                if (lockErrorValue === 'locking_disabled_for_example') {
-                    err.textContent = 'Locking is disabled for the example inbox.';
-                } else if (lockErrorValue === 'invalid') {
-                    err.textContent = 'Please provide a valid password.';
-                } else if (lockErrorValue === 'server_error') {
-                    err.textContent = 'A server error occurred. Please try again.';
-                } else if (lockErrorValue === 'remove_failed') {
-                    err.textContent = 'Failed to remove lock. Please try again.';
-                } else {
-                    err.textContent = 'An error occurred. Please try again.';
-                }
-                err.style.display = 'block';
-            }
-        }
-    }
-
-    // Unlock modal logic
-    if (unlockBtn) {
-        unlockBtn.onclick = function(e) {
-            e.preventDefault();
-            openModal(unlockModal);
-        };
-    }
-    if (closeUnlock) {
-        closeUnlock.onclick = function() {
-            closeModal(unlockModal);
-        };
-    }
-
-    if (unlockModal) {
-        const unlockErrorValue = (unlockModal.dataset.unlockError || '').trim();
-        if (unlockErrorValue) {
-            openModal(unlockModal);
-        }
-    }
-
-    // Remove lock modal logic
-    if (removeLockBtn) {
-        removeLockBtn.onclick = function(e) {
-            e.preventDefault();
-            openModal(removeLockModal);
-        };
-    }
-    if (closeRemoveLock) {
-        closeRemoveLock.onclick = function() {
-            closeModal(removeLockModal);
-        };
-    }
-    if (cancelRemoveLock) {
-        cancelRemoveLock.onclick = function() {
-            closeModal(removeLockModal);
-        };
-    }
-
-    // Close modals when clicking outside
-    window.onclick = function(e) {
-        if (e.target === lockModal) closeModal(lockModal);
-        if (e.target === unlockModal) closeModal(unlockModal);
-        if (e.target === removeLockModal) closeModal(removeLockModal);
-    };
-});

infrastructure/web/public/javascripts/utils.js

@@ -0,0 +1,240 @@
+// Consolidated utilities: date formatting and lock modals
+document.addEventListener('DOMContentLoaded', () => {
+    function getExpiryMs(time, unit) {
+        switch (unit) {
+            case 'minutes':
+                return time * 60 * 1000;
+            case 'hours':
+                return time * 60 * 60 * 1000;
+            case 'days':
+                return time * 24 * 60 * 60 * 1000;
+            default:
+                return 48 * 60 * 60 * 1000; // fallback 48h
+        }
+    }
+
+    function initExpiryTimers(expiryTime, expiryUnit) {
+        // Cache timer elements on init instead of querying every second
+        let timers = document.querySelectorAll('.expiry-timer');
+        if (timers.length === 0) return; // Don't set interval if no timers exist
+
+        function updateExpiryTimers() {
+            const now = new Date();
+            timers.forEach(el => {
+                const dateStr = el.dataset.date;
+                if (!dateStr) return;
+                const mailDate = new Date(dateStr);
+                // Clamp future-dated mails to now to avoid exceeding configured expiry
+                const baseMs = Math.min(mailDate.getTime(), now.getTime());
+                const expiry = new Date(baseMs + getExpiryMs(expiryTime, expiryUnit));
+                let diff = Math.floor((expiry - now) / 1000);
+                if (diff <= 0) {
+                    el.textContent = 'Expired';
+                    el.style.color = '#b00';
+                    return;
+                }
+                const hours = Math.floor(diff / 3600);
+                diff %= 3600;
+                const minutes = Math.floor(diff / 60);
+                const seconds = diff % 60;
+                el.textContent = `Expires in ${hours}h ${minutes}m ${seconds}s`;
+            });
+        }
+        updateExpiryTimers(); // Call once immediately
+        setInterval(updateExpiryTimers, 1000); // Then every second
+    }
+
+    function formatEmailDates() {
+        const dateEls = document.querySelectorAll('.email-date[data-date]');
+        dateEls.forEach(el => {
+            const dateStr = el.dataset.date;
+            if (!dateStr) return;
+            const d = new Date(dateStr);
+            try {
+                const formatted = d.toLocaleString(undefined, {
+                    year: 'numeric',
+                    month: 'short',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit'
+                });
+                el.textContent = formatted;
+            } catch (_) {
+                el.textContent = d.toString();
+            }
+        });
+    }
+
+    function formatMailDate() {
+        const el = document.querySelector('.mail-date[data-date]');
+        if (!el) return;
+        const dateStr = el.dataset.date;
+        if (!dateStr) return;
+        const d = new Date(dateStr);
+        try {
+            const formatted = d.toLocaleString(undefined, {
+                year: 'numeric',
+                month: 'short',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit'
+            });
+            el.textContent = formatted;
+        } catch (_) {
+            el.textContent = d.toString();
+        }
+    }
+
+    function initLockModals() {
+        const lockModal = document.getElementById('lockModal');
+        const lockBtn = document.getElementById('lockBtn');
+        const closeLock = document.getElementById('closeLock');
+        const lockForm = document.querySelector('#lockModal form');
+
+        const unlockModal = document.getElementById('unlockModal');
+        const unlockBtn = document.getElementById('unlockBtn');
+        const closeUnlock = document.getElementById('closeUnlock');
+
+        const removeLockModal = document.getElementById('removeLockModal');
+        const removeLockBtn = document.getElementById('removeLockBtn');
+        const closeRemoveLock = document.getElementById('closeRemoveLock');
+        const cancelRemoveLock = document.getElementById('cancelRemoveLock');
+
+        const openModal = function(modal) { if (modal) modal.style.display = 'block'; };
+        const closeModal = function(modal) { if (modal) modal.style.display = 'none'; };
+
+        if (lockBtn) {
+            lockBtn.onclick = function(e) {
+                e.preventDefault();
+                openModal(lockModal);
+            };
+        }
+        if (closeLock) {
+            closeLock.onclick = function() { closeModal(lockModal); };
+        }
+
+        if (lockForm) {
+            lockForm.addEventListener('submit', function(e) {
+                const pwElement = document.getElementById('lockPassword');
+                const cfElement = document.getElementById('lockConfirm');
+                const pw = pwElement ? pwElement.value : '';
+                const cf = cfElement ? cfElement.value : '';
+                const err = document.getElementById('lockErrorInline');
+                const serverErr = document.getElementById('lockServerError');
+                if (serverErr) serverErr.style.display = 'none';
+
+                if (pw !== cf) {
+                    e.preventDefault();
+                    if (err) {
+                        err.textContent = 'Passwords do not match.';
+                        err.style.display = 'block';
+                    }
+                    return;
+                }
+                if (pw.length < 8) {
+                    e.preventDefault();
+                    if (err) {
+                        err.textContent = 'Password must be at least 8 characters.';
+                        err.style.display = 'block';
+                    }
+                    return;
+                }
+                if (err) err.style.display = 'none';
+            });
+        }
+
+        if (lockModal) {
+            const lockErrorValue = (lockModal.dataset.lockError || '').trim();
+            if (lockErrorValue) {
+                openModal(lockModal);
+                const err = document.getElementById('lockErrorInline');
+                const serverErr = document.getElementById('lockServerError');
+                if (serverErr) serverErr.style.display = 'none';
+                if (err) {
+                    if (lockErrorValue === 'locking_disabled_for_example') {
+                        err.textContent = 'Locking is disabled for the example inbox.';
+                    } else if (lockErrorValue === 'invalid_password') {
+                        err.textContent = 'Please provide a valid password.';
+                    } else if (lockErrorValue === 'server_error') {
+                        err.textContent = 'A server error occurred. Please try again.';
+                    } else if (lockErrorValue === 'remove_failed') {
+                        err.textContent = 'Failed to remove lock. Please try again.';
+                    } else {
+                        err.textContent = 'An error occurred. Please try again.';
+                    }
+                    err.style.display = 'block';
+                }
+            }
+        }
+
+        if (unlockBtn) {
+            unlockBtn.onclick = function(e) {
+                e.preventDefault();
+                openModal(unlockModal);
+            };
+        }
+        if (closeUnlock) {
+            closeUnlock.onclick = function() { closeModal(unlockModal); };
+        }
+        if (unlockModal) {
+            const unlockErrorValue = (unlockModal.dataset.unlockError || '').trim();
+            if (unlockErrorValue) { openModal(unlockModal); }
+        }
+
+        if (removeLockBtn) {
+            removeLockBtn.onclick = function(e) {
+                e.preventDefault();
+                openModal(removeLockModal);
+            };
+        }
+        if (closeRemoveLock) {
+            closeRemoveLock.onclick = function() { closeModal(removeLockModal); };
+        }
+        if (cancelRemoveLock) {
+            cancelRemoveLock.onclick = function() { closeModal(removeLockModal); };
+        }
+
+        window.onclick = function(e) {
+            if (e.target === lockModal) closeModal(lockModal);
+            if (e.target === unlockModal) closeModal(unlockModal);
+            if (e.target === removeLockModal) closeModal(removeLockModal);
+        };
+    }
+
+    function initCopyAddress() {
+        const copyAddress = document.getElementById('copyAddress');
+        const copyFeedback = document.getElementById('copyFeedback');
+        if (!copyAddress) return;
+        copyAddress.addEventListener('click', () => {
+            const text = copyAddress.textContent ? copyAddress.textContent.trim() : '';
+            navigator.clipboard.writeText(text).then(() => {
+                if (copyFeedback) {
+                    copyFeedback.style.display = 'inline';
+                    setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
+                }
+            }).catch(() => {
+                // Fallback for older browsers
+                try {
+                    const range = document.createRange();
+                    range.selectNode(copyAddress);
+                    const sel = window.getSelection();
+                    sel.removeAllRanges();
+                    sel.addRange(range);
+                    document.execCommand('copy');
+                    sel.removeAllRanges();
+                    if (copyFeedback) {
+                        copyFeedback.style.display = 'inline';
+                        setTimeout(() => { copyFeedback.style.display = 'none'; }, 1200);
+                    }
+                } catch (_) {}
+            });
+        });
+    }
+
+    // Expose utilities and run them
+    window.utils = { formatEmailDates, formatMailDate, initLockModals, initCopyAddress, initExpiryTimers };
+    formatEmailDates();
+    formatMailDate();
+    initLockModals();
+    initCopyAddress();
+});

infrastructure/web/public/stylesheets/custom.css

@@ -6,8 +6,6 @@ body {
     flex-direction: column;
     background: linear-gradient( 135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), #131516;
     color: #cccccc;
-    backdrop-filter: blur(18px) saturate(120%);
-    -webkit-backdrop-filter: blur(18px) saturate(120%);
     border: 1px solid rgba(255, 255, 255, 0.12);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
 }
@@ -91,6 +89,7 @@ text-muted {
 }
 
 .action-links {
+    margin-bottom: 15px;
     float: right;
     justify-content: flex-end;
     /* aligns all links to the right */
@@ -109,7 +108,6 @@ text-muted {
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.15);
-    backdrop-filter: blur(10px);
     position: relative;
     overflow: hidden;
     text-decoration: none;
@@ -162,8 +160,6 @@ select:hover {
     max-width: 600px;
     margin: auto;
     background: linear-gradient( 135deg, rgba(155, 77, 202, 0.12), rgba(155, 77, 202, 0.04)), rgba(255, 255, 255, 0.04);
-    backdrop-filter: blur(20px) saturate(125%);
-    -webkit-backdrop-filter: blur(20px) saturate(125%);
     border-radius: 22px;
     border: 1px solid rgba(155, 77, 202, 0.25);
     padding: 40px 36px;
@@ -239,8 +235,6 @@ select:hover {
     color: #fff;
     background: rgba(155, 77, 202, 0.2);
     border: 1px solid rgba(155, 77, 202, 0.35);
-    backdrop-filter: blur(12px) saturate(120%);
-    -webkit-backdrop-filter: blur(12px) saturate(120%);
     box-shadow: 0 8px 20px rgba(155, 77, 202, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
     cursor: pointer;
     transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
@@ -319,7 +313,6 @@ label {
 }
 
 .email-card {
-    backdrop-filter: blur(20px);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 24px;
@@ -416,7 +409,6 @@ label {
 
 .empty-card {
     background: rgba(255, 255, 255, 0.03);
-    backdrop-filter: blur(20px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 50px;
@@ -450,7 +442,6 @@ label {
 
 .mail-header {
     background: rgba(255, 255, 255, 0.03);
-    backdrop-filter: blur(20px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 30px;
@@ -480,7 +471,6 @@ label {
 
 .mail-content {
     background: rgba(255, 255, 255, 0.02);
-    backdrop-filter: blur(15px);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.06);
     padding: 30px;
@@ -493,7 +483,6 @@ label {
     border: 1px solid rgba(255, 255, 255, 0.1);
     width: 100%;
     min-height: 40vh;
-    backdrop-filter: blur(10px);
 }
 
 .mail-text-content {
@@ -513,7 +502,6 @@ label {
 
 .mail-attachments {
     background: rgba(255, 255, 255, 0.03);
-    backdrop-filter: blur(20px);
     border-radius: 18px;
     border: 1px solid rgba(255, 255, 255, 0.08);
     padding: 25px;
@@ -680,3 +668,59 @@ label {
 .email-expiry .expiry-timer[style*="color: #b00"] {
     color: #b00 !important;
 }
+
+
+/* Raw mail view */
+
+.raw-container {
+    max-width: 1500px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.raw-mail {
+    background: rgba(0, 0, 0, 0.35);
+    color: #e0e0e0;
+    padding: 20px;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    white-space: pre-wrap;
+    word-break: break-word;
+    overflow-x: auto;
+    font-family: Consolas, 'Courier New', monospace;
+    font-size: 0.95rem;
+}
+
+.raw-tabs {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.raw-tab-button {
+    padding: 8px 14px;
+    border-radius: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    background: rgba(255, 255, 255, 0.05);
+    color: #e0e0e0;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.raw-tab-button.active {
+    background: rgba(155, 77, 202, 0.25);
+    border-color: rgba(155, 77, 202, 0.4);
+    color: #fff;
+}
+
+.raw-tab-button:hover {
+    border-color: rgba(155, 77, 202, 0.5);
+}
+
+.raw-panels {
+    position: relative;
+}
+
+.raw-mail.hidden {
+    display: none;
+}

infrastructure/web/routes/inbox.js

@@ -252,13 +252,33 @@ router.get(
                 true
             )
             if (mail) {
-                mail = mail.replace(/(?:\r\n|\r|\n)/g, '<br>')
+                const decodeQuotedPrintable = (input) => {
+                    if (!input) return '';
+                    // Remove soft line breaks
+                    let cleaned = input.replace(/=\r?\n/g, '');
+                    // Decode =XX hex escapes
+                    cleaned = cleaned.replace(/=([0-9A-Fa-f]{2})/g, (_, hex) => {
+                        try {
+                            return String.fromCharCode(parseInt(hex, 16));
+                        } catch {
+                            return '=' + hex;
+                        }
+                    });
+                    return cleaned;
+                };
+
+                const decodedMail = decodeQuotedPrintable(mail);
+
+                // Keep raw content but add literal newlines after <br> tags for readability
+                const rawMail = mail.replace(/<br\s*\/?\s*>/gi, '<br>\n');
+
                 // Emails are immutable, cache if found
                 res.set('Cache-Control', 'private, max-age=600')
                 debug(`Rendering raw email view for UID ${req.params.uid}`)
                 res.render('raw', {
                     title: req.params.uid + " | raw | " + req.params.address,
-                    mail,
+                    mail: rawMail,
+                    decoded: decodedMail,
                     totalcount: totalcount
                 })
             } else {

infrastructure/web/views/inbox.twig

@@ -21,8 +21,8 @@
 {% endblock %}
 
 {% block body %}
+    <script src="/javascripts/utils.js" defer></script>
     <script src="/javascripts/inbox-init.js" defer data-address="{{ address }}" data-expiry-time="{{ expiryTime }}" data-expiry-unit="{{ expiryUnit }}"></script>
-    <script src="/javascripts/lock-modals.js" defer></script>
     <div class="inbox-container">
         <div class="inbox-header">
             <h1 class="inbox-title" id="copyAddress" title="Click to copy address">{{ address }}</h1>
@@ -38,12 +38,12 @@
                                 <div class="sender-name">{{ mail.from[0].name }}</div>
                                 <div class="sender-email">{{ mail.from[0].address }}</div>
                             </div>
-                            <div class="email-date">{{ mail.date | date }}</div>
+                            <div class="email-date" data-date="{{ mail.date|date('c') }}"></div>
                         </div>
                         <div class="email-subject-row">
                             <div class="email-subject">{{ mail.subject }}</div>
                             <div class="email-expiry">
-                                <span class="expiry-timer" data-date="{{ mail.date|date('Y-m-d\TH:i:s\Z') }}">Expires in ...</span>
+                                <span class="expiry-timer" data-date="{{ mail.date|date('c') }}">Expires in ...</span>
                             </div>
                         </div>
                     </div>

infrastructure/web/views/mail.twig

@@ -14,12 +14,13 @@
 {% endblock %}
 
 {% block body %}
+    <script src="/javascripts/utils.js" defer></script>
     <div class="mail-container">
         <div class="mail-header">
             <h1 class="mail-subject">{{ mail.subject }}</h1>
             <div class="mail-meta">
                 <div class="mail-from">From: {{ mail.from.text }}</div>
-                <div class="mail-date">{{ mail.date | date }}</div>
+                <div class="mail-date" data-date="{{ mail.date|date('c') }}"></div>
             </div>
         </div>
 

infrastructure/web/views/raw.twig

@@ -1,19 +1,31 @@
+{% extends 'layout.twig' %}
+
+{% block header %}{% endblock %}
+
 {% block body %}
-    <head>
-        <title>{{ title }}</title>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
-        <meta name="darkreader-lock">
-        <meta name="description" content="Dont give shady companies your real email. Use 48hr.email to protect your privacy!">
-        <meta property="og:image" content="/images/logo.png">
-
-        <link rel="shortcut icon" href="/images/logo.ico">
-        <link rel='stylesheet' href='/dependencies/milligram.css' />
-        <link rel='stylesheet' href='/stylesheets/custom.css' />
-
-        <script src="/socket.io/socket.io.js" defer="true"></script>
-        <script src="/javascripts/notifications.js" defer="true"></script>
-
-    </head>
-    {{ mail | raw }}
+    <div class="raw-container">
+        <div class="raw-tabs">
+            <button class="raw-tab-button active" data-target="raw">Raw (escaped)</button>
+            <button class="raw-tab-button" data-target="decoded">Decoded (quoted-printable)</button>
+        </div>
+        <div class="raw-panels">
+            <pre class="raw-mail" data-panel="raw">{{ mail | e }}</pre>
+            <pre class="raw-mail hidden" data-panel="decoded">{{ decoded | e }}</pre>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            const buttons = document.querySelectorAll('.raw-tab-button');
+            const panels = document.querySelectorAll('.raw-mail[data-panel]');
+            buttons.forEach(btn => {
+                btn.addEventListener('click', () => {
+                    const target = btn.dataset.target;
+                    buttons.forEach(b => b.classList.toggle('active', b === btn));
+                    panels.forEach(p => p.classList.toggle('hidden', p.dataset.panel !== target));
+                });
+            });
+        });
+    </script>
 {% endblock %}
+
+{% block footer %}{% endblock %}