fix(decrypt,addons): dark-mode email body + mobile decrypt overhaul (#212)

rubenhensen · web-flow · commit e970f91f00b6 · 2026-05-12T12:34:14.000+02:00
* fix: dark-mode email body legibility and cross-subdomain visited flag - EmailView: render decrypted email in a forced light-themed iframe so emails that hardcode dark text on no background stay legible when the host page is in dark mode (#159). - Marketing page: store the returning-visitor flag in a cookie scoped to the registrable domain so it carries across postguard.eu subdomains instead of being trapped per-origin in localStorage (#208). * fix(decrypt): theme-aware plain-text rendering, leave HTML emails alone Previously the iframe forced a light surface unconditionally. That fixed the original dark-mode bug for HTML emails (which set their own dark text on no background), but it also overrode the site theme for plain- text emails — leaving them stuck in light mode forever. - HTML emails: don't touch the styling. Email designs are self-contained. - Plain-text emails: wrap the text in <pre> and inject body styles that follow the host theme (background, color, color-scheme), reactively switching when the user toggles the theme via a MutationObserver on the <html> class. * fix(decrypt): mobile-friendly upload affordance, hide desktop-only banner On mobile the "install Thunderbird/Outlook extension" banner is irrelevant, and the dashed "drop the postguard.encrypted file here" zone implies a drag-and-drop interaction that isn't available on touch. - Hide the extension banner under 768px. - Restyle the upload label as a solid primary button on mobile and swap its text to "Upload \"postguard.encrypted\"" so it reads as a tappable action rather than a drop target. The underlying <input type="file"> already opens the native picker on tap. - Add the new fallback.upload i18n key in EN and NL. * fix(decrypt): single-screen list/reader flow on mobile On a phone the side-by-side panels squeezed both lists and the email view into ~40vh slices. Switch to a phone-style two-step flow instead. - Inbox view: full-screen panel with search/cog at the top, email list filling the middle, and the upload button pinned to the bottom (via flex order — desktop layout is unchanged). - Reader view: clicking an email or hitting Decrypt swaps to a full-screen right panel with a "Back to inbox" button up top. - "Back" resets currSelected and hashMode so the effect collapses currRight back to Nothing, restoring the list view. - Add fallback.back i18n key in EN and NL. * fix(decrypt,addons): anchor mobile flex heights, drop left-border accents - decrypt mobile: anchor .fallback-page to the viewport height and add min-height:0 + explicit flex bases to the panel/list chain so the email list can shrink instead of growing to fit content and pushing the upload button below the fold. - ListView: replace the 3px left-border selected accent with a solid primary-coloured background and white text — clearer affordance and drops the "AI-template" stripe look. - Addons callout: drop the left-border stripe in favour of a full bordered, slightly muted amber card. * revert: drop pg_visited cookie migration (#208) Cookies cannot be shared across different registrable domains (e.g. postguard.eu ↔ postguard.nl), so the cookie-scoped flag only solved the subdomain case — which already worked well enough via the existing localStorage approach for our deployed surfaces. Cross-TLD sharing would require either consolidating to a single canonical domain or a third-party tracker iframe, neither of which is in scope. Revert to localStorage and close #208. * fix(decrypt): plain-text emails in monospace, define semibold token Two notes from the dobby review. - Define --pg-font-weight-semibold in global.scss. It was referenced in five places (Header, marketing root, marketing layout, blog post page, and the new .mobile-back button) but never declared, silently falling back to 400. Mapping it to 600 matches the existing --medium token. - Switch the plain-text email <pre> to a monospace face. text/plain bodies routinely rely on column alignment (ASCII tables, quoted replies with leading '>', signatures), which broke under system-ui. Drop the font-family from <body> so it doesn't shadow the <pre>. * refactor(styles): consolidate font-weight-semibold into font-weight-medium Both pointed at 600, so there were two tokens for one value. Drop the just-added --pg-font-weight-semibold and migrate the existing five callers (Header, marketing root + layout, blog post page, decrypt .mobile-back) to --pg-font-weight-medium.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -116,7 +116,7 @@
         color: white;
         border-radius: var(--pg-border-radius-sm);
         text-decoration: none;
-        font-weight: var(--pg-font-weight-semibold);
+        font-weight: var(--pg-font-weight-medium);
         font-size: var(--pg-font-size-sm);
         transition: opacity 0.2s ease;
         white-space: nowrap;
diff --git a/src/lib/components/fallback/EmailView.svelte b/src/lib/components/fallback/EmailView.svelte
@@ -1,5 +1,6 @@
 <script>
     import { run } from 'svelte/legacy'
+    import { onMount } from 'svelte'
 
     import * as email from './email'
     import { emails, currSelected } from './../fallback/stores.js'
@@ -9,6 +10,17 @@
 
     let parsed = $state()
     let date = $state()
+    let isDark = $state(false)
+
+    onMount(() => {
+        const html = document.documentElement
+        isDark = html.classList.contains('dark')
+        const obs = new MutationObserver(() => {
+            isDark = html.classList.contains('dark')
+        })
+        obs.observe(html, { attributes: true, attributeFilter: ['class'] })
+        return () => obs.disconnect()
+    })
 
     run(() => {
         if ($currSelected >= 0) {
@@ -21,6 +33,33 @@
             }
         }
     })
+
+    function escapeHtml(s) {
+        return s
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+    }
+
+    // HTML emails carry their own design — leave their styling untouched.
+    // Plain-text emails have no styling of their own, so mirror the site
+    // theme so the text stays legible when dark mode is toggled, and use
+    // a monospace face — that's what real mail clients render text/plain
+    // in, and ASCII tables / signatures / quoted replies rely on it.
+    let bodyDoc = $derived.by(() => {
+        if (!parsed) return ''
+        if (parsed.html) {
+            return `<!doctype html><html><body style="margin:1rem">${parsed.html}</body></html>`
+        }
+        const bg = isDark ? '#061b2d' : '#ffffff'
+        const fg = isDark ? '#ffffff' : '#030e17'
+        const scheme = isDark ? 'dark' : 'light'
+        const text = escapeHtml(parsed.text ?? '')
+        const bodyStyle = `margin:1rem;background:${bg};color:${fg};color-scheme:${scheme};font-size:13px;line-height:1.5`
+        const preStyle =
+            'margin:0;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace'
+        return `<!doctype html><html><body style="${bodyStyle}"><pre style="${preStyle}">${text}</pre></body></html>`
+    })
 </script>
 
 {#if parsed}
@@ -69,11 +108,7 @@
         </div>
 
         <div class="email-body">
-            <iframe
-                srcdoc={`<style>body{margin:1rem}</style>${parsed.html ?? parsed.text ?? ''}`}
-                title="Mail message"
-                sandbox=""
-            ></iframe>
+            <iframe srcdoc={bodyDoc} title="Mail message" sandbox=""></iframe>
         </div>
 
         {#if parsed.attachments && parsed.attachments.length > 0}
diff --git a/src/lib/components/fallback/ListView.svelte b/src/lib/components/fallback/ListView.svelte
@@ -75,17 +75,23 @@
         gap: 0.15rem;
         padding: 0.75rem 1rem;
         border-bottom: 1px solid var(--pg-input-normal);
-        border-left: 3px solid transparent;
         text-align: left;
-        transition: background 0.15s ease;
+        transition:
+            background 0.15s ease,
+            color 0.15s ease;
 
         &:hover {
             background: var(--pg-soft-background);
         }
 
         &.selected {
-            background: var(--pg-general-background);
-            border-left-color: var(--pg-primary);
+            background: var(--pg-primary);
+            color: white;
+
+            .email-sender,
+            .email-date {
+                color: rgba(255, 255, 255, 0.85);
+            }
         }
 
         &:focus-visible {
diff --git a/src/lib/locales/en.json b/src/lib/locales/en.json
@@ -98,6 +98,8 @@
             "privacy": "Your emails are stored only in your browser. Clear them anytime in settings."
         },
         "drop": "Drop the \"postguard.encrypted\" attachment here",
+        "upload": "Upload \"postguard.encrypted\"",
+        "back": "Back to inbox",
         "search": "Search decrypted mails...",
         "decrypt": {
             "helper": "Decrypt this mail by showing who you are with <i class=\"yivi-web-logo\">Yivi</i>",
diff --git a/src/lib/locales/nl.json b/src/lib/locales/nl.json
@@ -98,6 +98,8 @@
             "privacy": "Je e-mails worden alleen in je browser opgeslagen. Verwijder ze op elk moment via instellingen."
         },
         "drop": "Selecteer \"postguard.encrypted\" attachment hier",
+        "upload": "Upload \"postguard.encrypted\"",
+        "back": "Terug naar inbox",
         "search": "Zoek in ontsleutelde mails...",
         "decrypt": {
             "helper": "Ontsleutel deze email door te laten zien wie je bent met <i class=\"yivi-web-logo\">Yivi</i>",
diff --git a/src/routes/(app)/decrypt/+page.svelte b/src/routes/(app)/decrypt/+page.svelte
@@ -47,6 +47,15 @@
         currRight = RIGHTMODES.Decrypt
     }
 
+    function backToList() {
+        // On mobile the list and reader are stacked single-screen flows;
+        // resetting both selection and hashMode collapses currRight back to
+        // Nothing via the effect above, which hides the reader panel.
+        currSelected.set(-1)
+        hashMode = false
+        currRight = RIGHTMODES.Nothing
+    }
+
     function fromUrlSafeBase64(urlSafe) {
         let base64 = urlSafe.replace(/-/g, '+').replace(/_/g, '/')
         const pad = base64.length % 4
@@ -129,7 +138,10 @@
         <span>{$_('fallback.extensionPrompt')}</span>
         <a href={resolve('/addons/')}>{$_('fallback.extensionLink')}</a>
     </div>
-    <div class="fallback-container">
+    <div
+        class="fallback-container"
+        class:mobile-reading={currRight !== RIGHTMODES.Nothing}
+    >
         <div class="left-panel">
             {#if !hashMode}
                 <label class="upload-area">
@@ -138,11 +150,16 @@
                         width="28px"
                         aria-hidden="true"
                     />
-                    <span>{$_('fallback.drop')}</span>
+                    <span class="upload-text upload-text-desktop"
+                        >{$_('fallback.drop')}</span
+                    >
+                    <span class="upload-text upload-text-mobile"
+                        >{$_('fallback.upload')}</span
+                    >
                     <input
                         type="file"
                         onchange={onFile}
-                        aria-label={$_('fallback.drop')}
+                        aria-label={$_('fallback.upload')}
                     />
                 </label>
             {/if}
@@ -180,6 +197,12 @@
         </div>
 
         <div class="right-panel">
+            {#if currRight !== RIGHTMODES.Nothing}
+                <button class="mobile-back" type="button" onclick={backToList}>
+                    <Icon icon="mdi:arrow-left" width="20px" />
+                    <span>{$_('fallback.back')}</span>
+                </button>
+            {/if}
             {#if currRight === RIGHTMODES.MailView}
                 <EmailView />
             {:else if currRight === RIGHTMODES.Nothing}
@@ -242,7 +265,7 @@
 
         a {
             color: var(--pg-primary);
-            font-weight: var(--pg-font-weight-semibold);
+            font-weight: var(--pg-font-weight-medium);
             text-decoration: none;
 
             &:hover {
@@ -294,6 +317,14 @@
         }
     }
 
+    .upload-text-mobile {
+        display: none;
+    }
+
+    .mobile-back {
+        display: none;
+    }
+
     .search-bar {
         display: flex;
         align-items: center;
@@ -377,7 +408,7 @@
 
         h2 {
             font-size: var(--pg-font-size-lg);
-            font-weight: var(--pg-font-weight-semibold);
+            font-weight: var(--pg-font-weight-medium);
             margin: 0 0 0.75rem;
         }
 
@@ -411,22 +442,96 @@
 
     @media only screen and (max-width: 768px) {
         .fallback-page {
-            height: auto;
-            min-height: calc(100vh - 52px);
+            height: calc(100vh - 52px);
+            min-height: 0;
+            padding: 0;
+        }
+
+        .extension-banner {
+            display: none;
+        }
+
+        .upload-area {
+            flex: 0 0 auto;
+            flex-direction: row;
+            padding: 0.75rem 1rem;
+            margin: 0.75rem 1rem;
+            border-style: solid;
+            border-color: var(--pg-primary);
+            background: var(--pg-primary);
+            color: white;
+            order: 3;
+
+            &:hover {
+                color: white;
+                opacity: 0.9;
+            }
+        }
+
+        .upload-text-desktop {
+            display: none;
+        }
+
+        .upload-text-mobile {
+            display: inline;
+        }
+
+        .search-bar {
+            order: 1;
+            padding-top: 0.75rem;
+            flex: 0 0 auto;
+        }
+
+        .email-list-area {
+            order: 2;
+            flex: 1 1 0;
+            min-height: 0;
         }
 
         .fallback-container {
             flex-direction: column;
-            height: auto;
+            height: 100%;
+            gap: 0;
+            flex: 1;
+            min-height: 0;
         }
 
         .left-panel {
-            flex: none;
-            max-height: 40vh;
+            flex: 1 1 0;
+            min-height: 0;
+            max-height: none;
+            border: none;
+            border-radius: 0;
         }
 
         .right-panel {
-            min-height: 50vh;
+            min-height: 0;
+            border: none;
+            border-radius: 0;
+            flex: 1 1 0;
+        }
+
+        // Single-screen flow: list view OR reader view, never both.
+        .fallback-container.mobile-reading .left-panel {
+            display: none;
+        }
+
+        .fallback-container:not(.mobile-reading) .right-panel {
+            display: none;
+        }
+
+        .mobile-back {
+            all: unset;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 0.4rem;
+            padding: 0.75rem 1rem;
+            font-size: var(--pg-font-size-sm);
+            font-weight: var(--pg-font-weight-medium);
+            color: var(--pg-primary);
+            border-bottom: 1px solid var(--pg-input-normal);
+            flex-shrink: 0;
         }
     }
 </style>
diff --git a/src/routes/(marketing)/+layout.svelte b/src/routes/(marketing)/+layout.svelte
@@ -120,7 +120,7 @@
         padding: 0.5rem 1rem;
         background: var(--pg-primary);
         color: var(--pg-on-primary);
-        font-weight: var(--pg-font-weight-semibold);
+        font-weight: var(--pg-font-weight-medium);
         text-decoration: none;
         z-index: 1000;
         transform: translateY(-200%);
@@ -156,7 +156,7 @@
     .footer-col {
         h4 {
             font-size: var(--pg-font-size-sm);
-            font-weight: var(--pg-font-weight-semibold);
+            font-weight: var(--pg-font-weight-medium);
             color: var(--pg-text);
             margin: 0 0 0.75rem;
         }
@@ -193,7 +193,7 @@
         a {
             color: var(--pg-text-secondary);
             text-decoration: none;
-            font-weight: var(--pg-font-weight-semibold);
+            font-weight: var(--pg-font-weight-medium);
 
             &:hover {
                 color: var(--pg-primary);
diff --git a/src/routes/(marketing)/+page.svelte b/src/routes/(marketing)/+page.svelte
diff --git a/src/routes/(marketing)/addons/+page.svelte b/src/routes/(marketing)/addons/+page.svelte
diff --git a/src/routes/(marketing)/blog/[slug]/+page.svelte b/src/routes/(marketing)/blog/[slug]/+page.svelte
