chore: update version number to 0.1.82

feat(calendar): order calendars by sortOrder and move them from the drawer

App.tsx

@@ -8,7 +8,7 @@ import {
 } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator, type NativeStackScreenProps } from '@react-navigation/native-stack';
-import { Mail, Calendar, BookUser, HardDrive, Settings } from 'lucide-react-native';
+import { Mail, Calendar, BookUser, HardDrive, Settings } from './src/components/icons';
 
 import { startLiveUpdates, type LiveUpdatesHandle } from './src/api/push-stream';
 import { jmapClient } from './src/api/jmap-client';

VERSION

@@ -1 +1 @@
-0.1.76
+0.1.82

android/app/src/main/java/com/anonymous/bulwarkmobile/BulwarkFcmPackage.kt

@@ -15,6 +15,7 @@ class BulwarkFcmPackage : ReactPackage {
             add(BulwarkClientCertModule(reactContext))
             add(BulwarkDeviceSyncModule(reactContext))
             add(BulwarkWidgetsModule(reactContext))
+            add(BulwarkPdfModule(reactContext))
             // The bridge registers React Native's own module under this name.
             if (ReactNativeNewArchitectureFeatureFlags.enableBridgelessArchitecture()) {
                 add(BulwarkHeadlessJsTaskSupportModule(reactContext))

android/app/src/main/java/com/anonymous/bulwarkmobile/BulwarkPdfModule.kt

@@ -0,0 +1,143 @@
+package com.anonymous.bulwarkmobile
+
+import android.graphics.Bitmap
+import android.graphics.Color
+import android.graphics.pdf.PdfRenderer
+import android.net.Uri
+import android.os.ParcelFileDescriptor
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.Promise
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReactContextBaseJavaModule
+import com.facebook.react.bridge.ReactMethod
+import java.io.File
+import java.io.FileOutputStream
+import java.util.concurrent.Executors
+
+/**
+ * Renders PDF pages to PNG files for the in-app file preview, with the
+ * platform's own PdfRenderer: Android has no PDF view, and its WebView
+ * doesn't show PDFs either. The preview draws the pages in a WebView of
+ * its own so they zoom, asking for each page as it scrolls into view.
+ *
+ * PdfRenderer is not thread-safe and allows one open page at a time, so
+ * every call runs on one background thread, and the open document is kept
+ * between calls for the file the preview shows.
+ */
+class BulwarkPdfModule(reactContext: ReactApplicationContext) : ReactContextBaseJavaModule(reactContext) {
+
+    private val worker = Executors.newSingleThreadExecutor { r -> Thread(r, "BulwarkPdf").apply { isDaemon = true } }
+    private var openPath: String? = null
+    private var descriptor: ParcelFileDescriptor? = null
+    private var renderer: PdfRenderer? = null
+
+    override fun getName(): String = "BulwarkPdf"
+
+    override fun invalidate() {
+        worker.execute { closeDocument() }
+        worker.shutdown()
+        super.invalidate()
+    }
+
+    /** Page count and each page's size in points: `{ pages: [{ width, height }] }`. */
+    @ReactMethod
+    fun open(fileUri: String, promise: Promise) {
+        worker.execute {
+            try {
+                val doc = document(fileUri)
+                val pages = Arguments.createArray()
+                for (i in 0 until doc.pageCount) {
+                    doc.openPage(i).use { page ->
+                        pages.pushMap(Arguments.createMap().apply {
+                            putInt("width", page.width)
+                            putInt("height", page.height)
+                        })
+                    }
+                }
+                promise.resolve(Arguments.createMap().apply { putArray("pages", pages) })
+            } catch (e: SecurityException) {
+                // Password-protected; PdfRenderer can't open those.
+                closeDocument()
+                promise.reject("E_PDF_PROTECTED", e.message, e)
+            } catch (e: Throwable) {
+                closeDocument()
+                promise.reject("E_PDF_OPEN", e.message, e)
+            }
+        }
+    }
+
+    /** Render one page `width` pixels wide into `outUri` (a PNG). Resolves with the file URI. */
+    @ReactMethod
+    fun renderPage(fileUri: String, index: Int, width: Int, outUri: String, promise: Promise) {
+        worker.execute {
+            try {
+                val doc = document(fileUri)
+                if (index < 0 || index >= doc.pageCount) throw IndexOutOfBoundsException("page $index")
+                doc.openPage(index).use { page ->
+                    val w = width.coerceIn(1, MAX_PAGE_PX)
+                    val h = (w.toLong() * page.height / page.width.coerceAtLeast(1)).toInt().coerceIn(1, MAX_PAGE_PX * 2)
+                    val bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
+                    try {
+                        // Pages are transparent where nothing is drawn.
+                        bitmap.eraseColor(Color.WHITE)
+                        page.render(bitmap, null, null, PdfRenderer.Page.RENDER_MODE_FOR_DISPLAY)
+                        val out = fileOf(outUri)
+                        // The preview's folder is gone once it closed; a page
+                        // still queued then must not bring it back.
+                        if (out.parentFile?.isDirectory != true) throw IllegalStateException("preview closed")
+                        FileOutputStream(out).use { stream -> bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream) }
+                    } finally {
+                        bitmap.recycle()
+                    }
+                }
+                promise.resolve(outUri)
+            } catch (e: Throwable) {
+                promise.reject("E_PDF_RENDER", e.message, e)
+            }
+        }
+    }
+
+    /** Close the document the preview showed. */
+    @ReactMethod
+    fun close(fileUri: String, promise: Promise) {
+        worker.execute {
+            if (openPath == fileOf(fileUri).absolutePath) closeDocument()
+            promise.resolve(null)
+        }
+    }
+
+    private fun document(fileUri: String): PdfRenderer {
+        val path = fileOf(fileUri).absolutePath
+        renderer?.let { if (openPath == path) return it }
+        closeDocument()
+        val fd = ParcelFileDescriptor.open(File(path), ParcelFileDescriptor.MODE_READ_ONLY)
+        try {
+            val doc = PdfRenderer(fd)
+            descriptor = fd
+            renderer = doc
+            openPath = path
+            return doc
+        } catch (e: Throwable) {
+            fd.close()
+            throw e
+        }
+    }
+
+    private fun closeDocument() {
+        try { renderer?.close() } catch (_: Throwable) {}
+        try { descriptor?.close() } catch (_: Throwable) {}
+        renderer = null
+        descriptor = null
+        openPath = null
+    }
+
+    private fun fileOf(uri: String): File {
+        val path = if (uri.startsWith("file:")) Uri.parse(uri).path else uri
+        return File(path ?: throw IllegalArgumentException("not a file: $uri"))
+    }
+
+    companion object {
+        // A 4096 px page bitmap is 64 MB; keep well below.
+        private const val MAX_PAGE_PX = 2480
+    }
+}

app.config.js

@@ -99,6 +99,9 @@ module.exports = {
     ],
     extra: {
       commit: COMMIT,
+      // Settings → About → Source code. A modified build sets SOURCE_CODE_URL
+      // to where its own source is (AGPL §13); the default is upstream.
+      sourceCodeUrl: process.env.SOURCE_CODE_URL || 'https://github.com/bulwarkmail/native',
     },
   },
 };

babel.config.js

@@ -10,6 +10,5 @@ module.exports = function babelConfig(api) {
   api.cache(true);
   return {
     presets: [presetExpo],
-    plugins: [require.resolve('./scripts/babel-plugin-lucide-imports')],
   };
 };

docs/parity/03-email-viewer.md

@@ -175,7 +175,7 @@ RN has a solid single-message reader (WebView body with CSP, shrink-to-fit + pin
   - What RN does: single tap follows the global `mailAttachmentAction`; `jszip` is already a dependency (`package.json:36`) but unused for mail.
   - Fix hint: long-press sheet with "Open / Save / Share"; a "Download all" entry building the zip with `jszip` into `Paths.cache` then sharing.
 
-- [x] **In-app attachment preview (images, PDF, text, audio/video) is absent; iOS "Preview" is just the share sheet — fixed in d2ed27f** — `P3` — `partial`
+- [x] **In-app attachment preview (images, PDF, text, audio/video) is absent; iOS "Preview" is just the share sheet — fixed in d2ed27f; audio/video, HTML, Markdown, SVG, Android PDFs and ZIPs since 0.1.80-0.1.82** — `P3` — `partial`
   - What WEB does: `FilePreviewModal` for images/PDF (bytes handed to pdf.js, #871)/text/markdown/audio/video/eml, script-bearing types forced to download (`components/mail/mail-app.tsx:2887-2935`, `lib/file-preview.ts:29-92`).
   - What RN does: Android hands the file to an external viewer via `ACTION_VIEW`, iOS opens the share sheet (`src/lib/email-export.ts:64-79`, `115-141`); nothing is previewed inside the app.
   - Fix hint: for images/PDF/text open a modal `WebView` on the cached `file://` (or use `expo-file-system`'s `File.uri` with a QuickLook bridge on iOS); keep the external-viewer path as fallback.

docs/parity/07-filters-vacation-files.md

@@ -110,7 +110,7 @@ Filters: RN carries a byte-for-byte port of WEB's Sieve parser/generator/tests a
   - What RN does: `getDocumentAsync({ multiple: false })` (`src/screens/FilesScreen.tsx:357-360`); uploading the same name twice creates two nodes with the same name.
   - Fix hint: `multiple: true` + sequential upload loop; reuse WEB's `getUniqueName` against `visibleFiles`.
 
-- [x] **No in-app preview (image/text/markdown/PDF/audio/video/eml)** — `P2` — `missing` — done in 409cdb1 (images, text and source files, `.eml`, and PDFs on iOS open in the reader's preview; PDFs on Android, audio, video, HTML and Markdown still go to another app)
+- [x] **No in-app preview (image/text/markdown/PDF/audio/video/eml)** — `P2` — `missing` — done in 409cdb1 (images, text and source files, `.eml`, and PDFs on iOS open in the reader's preview); since 0.1.80/0.1.81 also audio, video, SVG/ICO, HTML, Markdown, PDFs on Android (native `PdfRenderer`) and ZIP listings, through the one preview the reader, list, Files and compose share (`src/components/email/use-file-preview.ts`)
   - What WEB does: `ImagePreviewModal` and `FilePreviewModal` (text, markdown, PDF incl. mobile pdf.js viewer, audio, video, EML) chosen via `getFilePreviewKind` (`lib/file-preview.ts:29-68`; `components/files/file-preview-modal.tsx`, `image-preview-modal.tsx`, `pdf-mobile-viewer.tsx`; `files-app.tsx:487-495`, `690-708`).
   - What RN does: tapping a file calls `shareAttachment` which downloads to cache and hands off to the OS share/viewer sheet (`src/screens/FilesScreen.tsx:248-258`; `src/lib/email-export.ts` "preview" variant). Works but there is no inline viewer and no "recent files" tracking.
   - Fix hint: reuse whatever attachment viewer the mail area has (image modal / WebView for text+PDF); N/A if the team decides the OS viewer is the mobile answer - then close this item.

locales/rn/ar.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "فتح في تطبيق",
       "pdf_external": "تُفتح ملفات PDF في عارض PDF على هذا الجهاز.",
-      "unsupported": "لا توجد معاينة لهذا النوع من الملفات."
+      "unsupported": "لا توجد معاينة لهذا النوع من الملفات.",
+      "media_unsupported": "لا يمكن تشغيل هذا الملف هنا.",
+      "pdf_protected": "ملف PDF هذا محمي بكلمة مرور. افتحه في تطبيق آخر لإدخال كلمة المرور.",
+      "pdf_unreadable": "لا يمكن عرض ملف PDF هذا هنا.",
+      "archive_files": "{count, plural, zero {لا ملفات} one {ملف واحد} two {ملفان} few {# ملفات} many {# ملفًا} other {# ملف}}",
+      "archive_first_files": "أول {count} ملف",
+      "archive_protected": "هذا الأرشيف محمي بكلمة مرور. افتحه في تطبيق آخر لإدخال كلمة المرور.",
+      "archive_unreadable": "لا يمكن فتح هذا الأرشيف هنا."
     },
     "received_via": "إلى {name}",
     "remove_color": "إزالة الوسم",

locales/rn/ca.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Obre en una aplicació",
       "pdf_external": "Els PDF s'obren amb el visualitzador de PDF d'aquest dispositiu.",
-      "unsupported": "No hi ha previsualització per a aquest tipus de fitxer."
+      "unsupported": "No hi ha previsualització per a aquest tipus de fitxer.",
+      "media_unsupported": "Aquest fitxer no es pot reproduir aquí.",
+      "pdf_protected": "Aquest PDF està protegit amb contrasenya. Obre'l en una altra aplicació per introduir-la.",
+      "pdf_unreadable": "Aquest PDF no es pot mostrar aquí.",
+      "archive_files": "{count, plural, one {# fitxer} other {# fitxers}}",
+      "archive_first_files": "Els primers {count} fitxers",
+      "archive_protected": "Aquest arxiu està protegit amb contrasenya. Obre'l en una altra aplicació per introduir-la.",
+      "archive_unreadable": "Aquest arxiu no es pot obrir aquí."
     },
     "received_via": "per a {name}",
     "remove_color": "Elimina l'etiqueta",

locales/rn/cs.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Otevřít v aplikaci",
       "pdf_external": "Soubory PDF se otevírají v prohlížeči PDF na tomto zařízení.",
-      "unsupported": "Pro tento typ souboru není náhled k dispozici."
+      "unsupported": "Pro tento typ souboru není náhled k dispozici.",
+      "media_unsupported": "Tento soubor zde nelze přehrát.",
+      "pdf_protected": "Toto PDF je chráněné heslem. Otevřete ho v jiné aplikaci a zadejte heslo.",
+      "pdf_unreadable": "Toto PDF zde nelze zobrazit.",
+      "archive_files": "{count, plural, one {# soubor} few {# soubory} many {# souboru} other {# souborů}}",
+      "archive_first_files": "Prvních {count} souborů",
+      "archive_protected": "Tento archiv je chráněný heslem. Otevřete ho v jiné aplikaci a zadejte heslo.",
+      "archive_unreadable": "Tento archiv zde nelze otevřít."
     },
     "received_via": "pro {name}",
     "remove_color": "Odebrat štítek",

locales/rn/da.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Åbn i app",
       "pdf_external": "PDF'er åbnes i din PDF-fremviser på denne enhed.",
-      "unsupported": "Ingen forhåndsvisning for denne filtype."
+      "unsupported": "Ingen forhåndsvisning for denne filtype.",
+      "media_unsupported": "Denne fil kan ikke afspilles her.",
+      "pdf_protected": "Denne PDF er beskyttet med adgangskode. Åbn den i en anden app for at indtaste adgangskoden.",
+      "pdf_unreadable": "Denne PDF kan ikke vises her.",
+      "archive_files": "{count, plural, one {# fil} other {# filer}}",
+      "archive_first_files": "De første {count} filer",
+      "archive_protected": "Dette arkiv er beskyttet med adgangskode. Åbn det i en anden app for at indtaste adgangskoden.",
+      "archive_unreadable": "Dette arkiv kan ikke åbnes her."
     },
     "received_via": "til {name}",
     "remove_color": "Fjern tag",

locales/rn/de.json

@@ -413,7 +413,14 @@
     "preview": {
       "open_external": "In App öffnen",
       "pdf_external": "PDFs werden in Ihrem PDF-Viewer auf diesem Gerät geöffnet.",
-      "unsupported": "Keine Vorschau für diesen Dateityp."
+      "unsupported": "Keine Vorschau für diesen Dateityp.",
+      "media_unsupported": "Diese Datei kann hier nicht abgespielt werden.",
+      "pdf_protected": "Diese PDF ist passwortgeschützt. Öffne sie in einer anderen App, um das Passwort einzugeben.",
+      "pdf_unreadable": "Diese PDF kann hier nicht angezeigt werden.",
+      "archive_files": "{count, plural, one {# Datei} other {# Dateien}}",
+      "archive_first_files": "Die ersten {count} Dateien",
+      "archive_protected": "Dieses Archiv ist passwortgeschützt. Öffne es in einer anderen App, um das Passwort einzugeben.",
+      "archive_unreadable": "Dieses Archiv kann hier nicht geöffnet werden."
     },
     "received_via": "an {name}",
     "remove_color": "Label entfernen",
@@ -648,12 +655,14 @@
       },
       "toolbar_labels": {
         "description_mobile": "Textbeschriftungen neben den Symbolleistensymbolen anzeigen."
-      }
+      },
+      "description_mobile": "Passe an, wie die App aussieht"
     },
     "badges": {
       "experimental": "Experimentell",
       "not_implemented": "Nicht implementiert",
-      "unavailable": "Nicht verfügbar"
+      "unavailable": "Nicht verfügbar",
+      "not_on_server": "Nicht auf diesem Server"
     },
     "contacts": {
       "book_count": "{count, plural, one {# Kontakt} other {# Kontakte}}",
@@ -996,7 +1005,15 @@
       "window": "Zeitraum",
       "window_24h": "Letzte 24 Stunden",
       "window_days": "Letzte {count} Tage",
-      "window_desc": "Wie weit zurück zwischengespeichert wird, gemessen am Empfangsdatum der Nachricht."
+      "window_desc": "Wie weit zurück zwischengespeichert wird, gemessen am Empfangsdatum der Nachricht.",
+      "description_short": "Neue Nachrichten auf dem Telefon behalten, damit sie auch ohne Verbindung aufgehen.",
+      "keep_24h": "24 Stunden",
+      "keep_days": "{count} Tage",
+      "keep_from": "Mails der letzten",
+      "messages_offline": "{count, plural, one {# Nachricht offline} other {# Nachrichten offline}}",
+      "synced": "Synchronisiert {when}",
+      "use_at_most": "Höchstens belegen",
+      "used_of": "{used} von {limit} MB"
     },
     "plugins": {
       "mobile_description": "Plugins laufen im Webmail und erweitern es im Browser.",
@@ -1104,7 +1121,10 @@
     "tabs": {
       "plugins": "Plugins",
       "themes": "Designs",
-      "updates": "Updates"
+      "updates": "Updates",
+      "storage": "Speicher & Sicherung",
+      "about": "Über",
+      "troubleshooting": "Fehlerbehebung"
     },
     "templates": {
       "delete_confirm": "\"{name}\" endgültig löschen?",
@@ -1128,6 +1148,86 @@
       "warnings": {
         "date_format": "Datumsangaben müssen das Format \"YYYY-MM-DD\" oder \"YYYY-MM-DD HH:MM\" haben"
       }
+    },
+    "about": {
+      "check_now": "Jetzt prüfen",
+      "checked_at": "Geprüft {when}",
+      "licences": "Open-Source-Lizenzen",
+      "licences_desc": "AGPL-3.0 für die App und die Bibliotheken, die sie nutzt",
+      "never_checked": "Noch nicht geprüft",
+      "privacy": "Datenschutz",
+      "privacy_desc": "Was auf diesem Telefon bleibt und was an deinen Server geht",
+      "report_problem": "Problem melden",
+      "report_problem_desc": "Öffnet ein Issue auf GitHub mit eingetragener Version",
+      "server": "Server",
+      "server_value": "{host} · angemeldet als {user}",
+      "source_code": "Quellcode",
+      "this_device": "Dieses Gerät",
+      "this_device_desc": "Womit die App verbunden ist und wo du Hilfe bekommst.",
+      "up_to_date": "Aktuell",
+      "updates": "Updates"
+    },
+    "backup": {
+      "description": "Übertrage deine Einstellungen auf ein anderes Telefon oder ins Webmail.",
+      "export_import": "Exportieren oder importieren",
+      "export_import_desc": "Eine JSON-Datei im selben Format wie im Webmail",
+      "reset": "Zurücksetzen",
+      "reset_desc": "Zurück auf die Standardwerte; Mails bleiben",
+      "title": "Einstellungen sichern"
+    },
+    "licences": {
+      "app_desc": "Die App ist freie Software unter der {licence}. Du darfst sie nutzen, untersuchen, weitergeben und ändern.",
+      "libraries": "Bibliotheken",
+      "libraries_desc": "Open-Source-Code, mit dem die App gebaut ist.",
+      "read_licence": "Den vollständigen Lizenztext lesen"
+    },
+    "privacy": {
+      "favicons": "Absendersymbole für geschäftliche Mails kommen vom Symboldienst von DuckDuckGo, der dabei die Domain des Absenders sieht. Ausschalten kannst du sie unter Darstellung → Absender-Favicons.",
+      "no_tracking": "Die App hat keine Analyse und keine Werbung.",
+      "other_title": "Weitere Verbindungen",
+      "phone_backup": "Nichts davon landet in der Cloud-Sicherung von Android.",
+      "phone_secure": "Deine Anmeldedaten liegen im sicheren Speicher des Systems. Einstellungen, der Offline-Cache und noch nicht synchronisierte Änderungen liegen im Speicher der App.",
+      "phone_title": "Auf diesem Telefon",
+      "push": "Wenn Benachrichtigungen an sind, meldet dein Server dem Push-Relay ({relay}), dass sich etwas geändert hat, und das Relay weckt die App über {service}. Das Relay sieht ein Gerätetoken und eine Änderungsmarke, nie deine Mails. Unter Benachrichtigungen kannst du ein eigenes Relay eintragen.",
+      "push_title": "Push-Benachrichtigungen",
+      "server": "Mails, Kalender, Kontakte und Dateien werden von deinem Server geladen und dort gespeichert. Außer den Verbindungen unten spricht die App nur mit deinem Server.",
+      "server_title": "Dein Mailserver",
+      "service_apple": "den Push-Dienst von Apple",
+      "service_google": "den Push-Dienst von Google",
+      "updates": "Die App fragt bei GitHub nach der neuesten Version, um dir Updates anzuzeigen.",
+      "updates_android": "Die App fragt bei GitHub nach der neuesten Version, um dir Updates anzuzeigen. Ausschalten kannst du das unter Updates."
+    },
+    "summary": {
+      "events_off": "Termine aus",
+      "events_on": "Termine an",
+      "mail_off": "Mail aus",
+      "mail_on": "Mail an",
+      "offline_off": "Offline-Mails aus",
+      "offline_on": "Offline-Mails an · {days, plural, one {# Tag} other {# Tage}}, {mb} MB",
+      "version": "Version {version}",
+      "week_starts": "Woche beginnt {day}",
+      "layout": "Schnellaktionen, Wischen, Reihenfolge",
+      "reading": "Gelesen-Status, Löschen, Anhänge",
+      "composing": "Signatur, Sendeverzögerung, Entwürfe",
+      "identities": "Adressen, von denen du sendest",
+      "vacation": "Automatische Antwort bei Abwesenheit",
+      "filters": "Regeln für eingehende Mails",
+      "templates": "Wiederverwendbare Nachrichten",
+      "folders": "Anlegen, umbenennen, Rollen",
+      "keywords": "Namen und Farben der Tags",
+      "downloads": "Dateinamen für gespeicherte Mails",
+      "security": "Passwort, Zwei-Faktor, App-Passwörter",
+      "content_senders": "Externe Bilder, vertrauenswürdige Absender",
+      "contacts": "Adressbücher, Sortierung",
+      "files": "Ansicht, Sortierung, Vorschaubilder",
+      "sidebar_apps": "Web-Apps im Seitenmenü",
+      "updates": "Neue Versionen installieren"
+    },
+    "troubleshooting": {
+      "cache_desc": "Wenn eine Liste veraltet oder falsch aussieht.",
+      "cache_title": "Zwischengespeicherte Daten",
+      "row_desc": "Daten neu laden, Debug-Protokoll",
+      "title": "Fehlerbehebung"
     }
   },
   "sidebar": {

locales/rn/en.json

@@ -424,7 +424,14 @@
     "preview": {
       "open_external": "Open in app",
       "pdf_external": "PDFs open in your PDF viewer on this device.",
-      "unsupported": "No preview for this file type."
+      "unsupported": "No preview for this file type.",
+      "media_unsupported": "This file can't be played here.",
+      "pdf_protected": "This PDF is password-protected. Open it in another app to enter the password.",
+      "pdf_unreadable": "This PDF can't be shown here.",
+      "archive_files": "{count, plural, one {# file} other {# files}}",
+      "archive_first_files": "The first {count} files",
+      "archive_protected": "This archive is password-protected. Open it in another app to enter the password.",
+      "archive_unreadable": "This archive can't be opened here."
     },
     "received_via": "to {name}",
     "remove_color": "Remove tag",
@@ -627,6 +634,24 @@
     "send_now_failed": "Could not send now"
   },
   "settings": {
+    "about": {
+      "check_now": "Check now",
+      "checked_at": "Checked {when}",
+      "licences": "Open-source licences",
+      "licences_desc": "AGPL-3.0 for the app, and the libraries it uses",
+      "never_checked": "Not checked yet",
+      "privacy": "Privacy",
+      "privacy_desc": "What stays on this phone and what goes to your server",
+      "report_problem": "Report a problem",
+      "report_problem_desc": "Opens an issue on GitHub with the version filled in",
+      "server": "Server",
+      "server_value": "{host} · signed in as {user}",
+      "source_code": "Source code",
+      "this_device": "This device",
+      "this_device_desc": "What the app is connected to and how to get help.",
+      "up_to_date": "Up to date",
+      "updates": "Updates"
+    },
     "account": {
       "accounts": {
         "description_mobile": "Reorder how accounts appear in the account switcher, pick the default, or sign one out.",
@@ -653,6 +678,7 @@
       }
     },
     "appearance": {
+      "description_mobile": "Customize how the app looks",
       "language": {
         "restart_for_direction": "Restart the app to apply the new text direction.",
         "system_default": "System default"
@@ -661,9 +687,18 @@
         "description_mobile": "Display text labels next to toolbar icons."
       }
     },
+    "backup": {
+      "description": "Move your settings to another phone or the webmail.",
+      "export_import": "Export or import",
+      "export_import_desc": "A JSON file, same format as the webmail",
+      "reset": "Reset",
+      "reset_desc": "Back to the defaults; mail stays",
+      "title": "Settings backup"
+    },
     "badges": {
       "experimental": "Experimental",
       "not_implemented": "Not implemented",
+      "not_on_server": "Not on this server",
       "unavailable": "Unavailable"
     },
     "contacts": {
@@ -928,6 +963,12 @@
       "unified_cross_account": "Unified views across accounts",
       "unified_cross_account_description": "Combine every signed-in account in \"All inboxes\". Off keeps the unified views inside the active account and its shared folders."
     },
+    "licences": {
+      "app_desc": "The app is free software under the {licence}. You can use, study, share and change it.",
+      "libraries": "Libraries",
+      "libraries_desc": "Open-source code the app is built with.",
+      "read_licence": "Read the full licence text"
+    },
     "message_list_order": {
       "description": "Which messages come first in the list. Newest first is the tie-breaker within each group; the header toggle still flips oldest/newest.",
       "preset_chronological": "Newest first",
@@ -993,23 +1034,31 @@
       "clear_title": "Clear offline mail",
       "days_ago": "{count} d ago",
       "description": "Download recent messages so they open instantly and remain readable without a connection. Bodies only — attachments are still fetched on demand.",
+      "description_short": "Keep recent messages on this phone so they open without a connection.",
       "downloading": "Downloading {completed}/{total}…",
       "enabled": "Cache recent mail",
       "enabled_desc": "When on, the app keeps message bodies for the selected window on this device.",
       "hours_ago": "{count} h ago",
       "just_now": "just now",
+      "keep_24h": "24 hours",
+      "keep_days": "{count} days",
+      "keep_from": "Keep mail from the last",
       "last_sync": "Last sync {when}",
       "last_sync_failed": "Last sync failed: {message}",
       "max_size": "Maximum size",
       "max_size_desc": "Oldest messages are removed when the cache grows past this.",
+      "messages_offline": "{count, plural, one {# message offline} other {# messages offline}}",
       "minutes_ago": "{count} min ago",
       "never": "never",
       "nothing_cached": "Nothing cached yet",
       "queued_changes": "{count, plural, one {# change} other {# changes}} waiting to sync",
       "scanning": "Scanning recent mail…",
       "sync_now": "Sync now",
+      "synced": "Synced {when}",
       "syncing": "Syncing…",
       "title": "Offline mail",
+      "use_at_most": "Use at most",
+      "used_of": "{used} of {limit} MB",
       "window": "Window",
       "window_24h": "Last 24 hours",
       "window_days": "Last {count} days",
@@ -1019,6 +1068,22 @@
       "mobile_description": "Plugins run inside the webmail and extend it in the browser.",
       "mobile_explainer": "The mobile app has no plugin runtime. Install and manage plugins from the webmail under Settings → Plugins; themes and filters they provide are not applied here."
     },
+    "privacy": {
+      "favicons": "Sender icons for business mail come from DuckDuckGo's icon service, which sees the sender's domain. Turn them off under Appearance → Sender favicons.",
+      "no_tracking": "The app has no analytics and no ads.",
+      "other_title": "Other connections",
+      "phone_backup": "None of it goes into Android's cloud backup.",
+      "phone_secure": "Your sign-in details are kept in the system's secure storage. Settings, the offline mail cache and changes waiting to sync are kept in the app's own storage.",
+      "phone_title": "On this phone",
+      "push": "When notifications are on, your server tells the push relay ({relay}) that something changed, and the relay wakes the app through {service}. The relay sees a device token and a change marker, never your mail. You can use your own relay under Notifications.",
+      "push_title": "Push notifications",
+      "server": "Mail, calendars, contacts and files are loaded from your server and saved back to it. Apart from the connections below, the app talks only to your server.",
+      "server_title": "Your mail server",
+      "service_apple": "Apple's push service",
+      "service_google": "Google's push service",
+      "updates": "The app asks GitHub for the latest release to tell you about updates.",
+      "updates_android": "The app asks GitHub for the latest release to tell you about updates. Turn that off under Updates."
+    },
     "security": {
       "client_cert": {
         "active": "Active: {alias}",
@@ -1118,10 +1183,39 @@
       "mobile_description": "Sign and encrypt mail with S/MIME certificates.",
       "mobile_explainer": "S/MIME is not available in the mobile app yet. Manage keys and certificates in the webmail; signed messages are shown without verification here."
     },
+    "summary": {
+      "events_off": "events off",
+      "events_on": "events on",
+      "mail_off": "Mail off",
+      "mail_on": "Mail on",
+      "offline_off": "Offline mail off",
+      "offline_on": "Offline mail on · {days, plural, one {# day} other {# days}}, {mb} MB",
+      "version": "Version {version}",
+      "week_starts": "week starts {day}",
+      "layout": "Quick actions, swipes, list order",
+      "reading": "Read status, delete, attachments",
+      "composing": "Signature, send delay, drafts",
+      "identities": "Addresses you send from",
+      "vacation": "Automatic reply while away",
+      "filters": "Rules for incoming mail",
+      "templates": "Reusable messages",
+      "folders": "Create, rename, roles",
+      "keywords": "Tag names and colours",
+      "downloads": "File names for saved mail",
+      "security": "Password, two-factor, app passwords",
+      "content_senders": "Remote images, trusted senders",
+      "contacts": "Address books, sorting",
+      "files": "View, sorting, thumbnails",
+      "sidebar_apps": "Web apps in the side menu",
+      "updates": "Install new versions"
+    },
     "tabs": {
       "plugins": "Plugins",
       "themes": "Themes",
-      "updates": "Updates"
+      "updates": "Updates",
+      "storage": "Storage & backup",
+      "about": "About",
+      "troubleshooting": "Troubleshooting"
     },
     "templates": {
       "delete_confirm": "Permanently delete \"{name}\"?",
@@ -1141,6 +1235,12 @@
       "mobile_description": "Pick a colour theme. Themes follow the light/dark setting from Appearance; custom theme packages are managed in the webmail.",
       "title": "Themes"
     },
+    "troubleshooting": {
+      "cache_desc": "When a list looks stale or wrong.",
+      "cache_title": "Cached data",
+      "row_desc": "Refresh cached data, debug logging",
+      "title": "Troubleshooting"
+    },
     "vacation": {
       "warnings": {
         "date_format": "Dates must be \"YYYY-MM-DD\" or \"YYYY-MM-DD HH:MM\""

locales/rn/es.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Abrir en una app",
       "pdf_external": "Los PDF se abren en el visor de PDF de este dispositivo.",
-      "unsupported": "No hay vista previa para este tipo de archivo."
+      "unsupported": "No hay vista previa para este tipo de archivo.",
+      "media_unsupported": "Este archivo no se puede reproducir aquí.",
+      "pdf_protected": "Este PDF está protegido con contraseña. Ábrelo en otra aplicación para introducirla.",
+      "pdf_unreadable": "Este PDF no se puede mostrar aquí.",
+      "archive_files": "{count, plural, one {# archivo} other {# archivos}}",
+      "archive_first_files": "Los primeros {count} archivos",
+      "archive_protected": "Este archivo comprimido está protegido con contraseña. Ábrelo en otra aplicación para introducirla.",
+      "archive_unreadable": "Este archivo comprimido no se puede abrir aquí."
     },
     "received_via": "para {name}",
     "remove_color": "Eliminar etiqueta",

locales/rn/fa.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "باز کردن در برنامه",
       "pdf_external": "فایل‌های PDF در نمایشگر PDF این دستگاه باز می‌شوند.",
-      "unsupported": "برای این نوع فایل پیش‌نمایشی وجود ندارد."
+      "unsupported": "برای این نوع فایل پیش‌نمایشی وجود ندارد.",
+      "media_unsupported": "این فایل اینجا پخش نمی‌شود.",
+      "pdf_protected": "این PDF با رمز عبور محافظت شده است. برای وارد کردن رمز، آن را در برنامهٔ دیگری باز کنید.",
+      "pdf_unreadable": "این PDF اینجا نمایش داده نمی‌شود.",
+      "archive_files": "{count, plural, one {# فایل} other {# فایل}}",
+      "archive_first_files": "{count} فایل نخست",
+      "archive_protected": "این بایگانی با رمز عبور محافظت شده است. برای وارد کردن رمز، آن را در برنامهٔ دیگری باز کنید.",
+      "archive_unreadable": "این بایگانی اینجا باز نمی‌شود."
     },
     "received_via": "به {name}",
     "remove_color": "حذف برچسب",

locales/rn/fr.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Ouvrir dans une app",
       "pdf_external": "Les PDF s'ouvrent dans votre lecteur PDF sur cet appareil.",
-      "unsupported": "Aucun aperçu pour ce type de fichier."
+      "unsupported": "Aucun aperçu pour ce type de fichier.",
+      "media_unsupported": "Ce fichier ne peut pas être lu ici.",
+      "pdf_protected": "Ce PDF est protégé par un mot de passe. Ouvrez-le dans une autre application pour le saisir.",
+      "pdf_unreadable": "Ce PDF ne peut pas être affiché ici.",
+      "archive_files": "{count, plural, one {# fichier} other {# fichiers}}",
+      "archive_first_files": "Les {count} premiers fichiers",
+      "archive_protected": "Cette archive est protégée par un mot de passe. Ouvrez-la dans une autre application pour le saisir.",
+      "archive_unreadable": "Cette archive ne peut pas être ouverte ici."
     },
     "received_via": "à {name}",
     "remove_color": "Retirer l'étiquette",

locales/rn/he.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "פתח באפליקציה",
       "pdf_external": "קובצי PDF נפתחים במציג ה-PDF במכשיר זה.",
-      "unsupported": "אין תצוגה מקדימה לסוג קובץ זה."
+      "unsupported": "אין תצוגה מקדימה לסוג קובץ זה.",
+      "media_unsupported": "לא ניתן להפעיל את הקובץ הזה כאן.",
+      "pdf_protected": "קובץ ה-PDF הזה מוגן בסיסמה. פתחו אותו באפליקציה אחרת כדי להזין את הסיסמה.",
+      "pdf_unreadable": "לא ניתן להציג את קובץ ה-PDF הזה כאן.",
+      "archive_files": "{count, plural, one {קובץ אחד} two {שני קבצים} other {# קבצים}}",
+      "archive_first_files": "{count} הקבצים הראשונים",
+      "archive_protected": "הארכיון הזה מוגן בסיסמה. פתחו אותו באפליקציה אחרת כדי להזין את הסיסמה.",
+      "archive_unreadable": "לא ניתן לפתוח את הארכיון הזה כאן."
     },
     "received_via": "אל {name}",
     "remove_color": "הסר תג",

locales/rn/hu.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Megnyitás alkalmazásban",
       "pdf_external": "A PDF-fájlok az eszköz PDF-megjelenítőjében nyílnak meg.",
-      "unsupported": "Ehhez a fájltípushoz nincs előnézet."
+      "unsupported": "Ehhez a fájltípushoz nincs előnézet.",
+      "media_unsupported": "Ez a fájl itt nem játszható le.",
+      "pdf_protected": "Ez a PDF jelszóval védett. Nyisd meg egy másik alkalmazásban a jelszó megadásához.",
+      "pdf_unreadable": "Ez a PDF itt nem jeleníthető meg.",
+      "archive_files": "{count, plural, one {# fájl} other {# fájl}}",
+      "archive_first_files": "Az első {count} fájl",
+      "archive_protected": "Ez az archívum jelszóval védett. Nyisd meg egy másik alkalmazásban a jelszó megadásához.",
+      "archive_unreadable": "Ez az archívum itt nem nyitható meg."
     },
     "received_via": "címzett: {name}",
     "remove_color": "Címke eltávolítása",

locales/rn/it.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Apri in un'app",
       "pdf_external": "I PDF si aprono nel lettore PDF di questo dispositivo.",
-      "unsupported": "Nessuna anteprima per questo tipo di file."
+      "unsupported": "Nessuna anteprima per questo tipo di file.",
+      "media_unsupported": "Questo file non può essere riprodotto qui.",
+      "pdf_protected": "Questo PDF è protetto da password. Aprilo in un'altra app per inserirla.",
+      "pdf_unreadable": "Questo PDF non può essere visualizzato qui.",
+      "archive_files": "{count, plural, one {# file} other {# file}}",
+      "archive_first_files": "I primi {count} file",
+      "archive_protected": "Questo archivio è protetto da password. Aprilo in un'altra app per inserirla.",
+      "archive_unreadable": "Questo archivio non può essere aperto qui."
     },
     "received_via": "a {name}",
     "remove_color": "Rimuovi etichetta",

locales/rn/ja.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "アプリで開く",
       "pdf_external": "PDF はこのデバイスの PDF ビューアーで開きます。",
-      "unsupported": "このファイル形式はプレビューできません。"
+      "unsupported": "このファイル形式はプレビューできません。",
+      "media_unsupported": "このファイルはここでは再生できません。",
+      "pdf_protected": "このPDFはパスワードで保護されています。パスワードを入力するには別のアプリで開いてください。",
+      "pdf_unreadable": "このPDFはここでは表示できません。",
+      "archive_files": "{count, plural, other {# 個のファイル}}",
+      "archive_first_files": "最初の {count} 個のファイル",
+      "archive_protected": "このアーカイブはパスワードで保護されています。パスワードを入力するには別のアプリで開いてください。",
+      "archive_unreadable": "このアーカイブはここでは開けません。"
     },
     "received_via": "{name}宛",
     "remove_color": "ラベルを削除",

locales/rn/ko.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "앱에서 열기",
       "pdf_external": "PDF는 이 기기의 PDF 뷰어에서 열려요.",
-      "unsupported": "이 파일 형식은 미리보기를 지원하지 않아요."
+      "unsupported": "이 파일 형식은 미리보기를 지원하지 않아요.",
+      "media_unsupported": "이 파일은 여기서 재생할 수 없습니다.",
+      "pdf_protected": "이 PDF는 암호로 보호되어 있습니다. 암호를 입력하려면 다른 앱에서 여세요.",
+      "pdf_unreadable": "이 PDF는 여기서 표시할 수 없습니다.",
+      "archive_files": "{count, plural, other {파일 #개}}",
+      "archive_first_files": "처음 {count}개 파일",
+      "archive_protected": "이 압축 파일은 암호로 보호되어 있습니다. 암호를 입력하려면 다른 앱에서 여세요.",
+      "archive_unreadable": "이 압축 파일은 여기서 열 수 없습니다."
     },
     "received_via": "받는 사람: {name}",
     "remove_color": "태그 제거",

locales/rn/lv.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Atvērt lietotnē",
       "pdf_external": "PDF faili tiek atvērti šīs ierīces PDF skatītājā.",
-      "unsupported": "Šim faila tipam nav priekšskatījuma."
+      "unsupported": "Šim faila tipam nav priekšskatījuma.",
+      "media_unsupported": "Šo failu šeit nevar atskaņot.",
+      "pdf_protected": "Šis PDF ir aizsargāts ar paroli. Atveriet to citā lietotnē, lai ievadītu paroli.",
+      "pdf_unreadable": "Šo PDF šeit nevar parādīt.",
+      "archive_files": "{count, plural, zero {# failu} one {# fails} other {# faili}}",
+      "archive_first_files": "Pirmie {count} faili",
+      "archive_protected": "Šis arhīvs ir aizsargāts ar paroli. Atveriet to citā lietotnē, lai ievadītu paroli.",
+      "archive_unreadable": "Šo arhīvu šeit nevar atvērt."
     },
     "received_via": "kam: {name}",
     "remove_color": "Noņemt tagu",

locales/rn/mn.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Апп-д нээх",
       "pdf_external": "PDF файлууд энэ төхөөрөмжийн PDF үзэгчид нээгдэнэ.",
-      "unsupported": "Энэ төрлийн файлыг урьдчилан харах боломжгүй."
+      "unsupported": "Энэ төрлийн файлыг урьдчилан харах боломжгүй.",
+      "media_unsupported": "Энэ файлыг энд тоглуулах боломжгүй.",
+      "pdf_protected": "Энэ PDF нууц үгээр хамгаалагдсан. Нууц үг оруулахын тулд өөр апп-аар нээнэ үү.",
+      "pdf_unreadable": "Энэ PDF-ийг энд харуулах боломжгүй.",
+      "archive_files": "{count, plural, one {# файл} other {# файл}}",
+      "archive_first_files": "Эхний {count} файл",
+      "archive_protected": "Энэ архив нууц үгээр хамгаалагдсан. Нууц үг оруулахын тулд өөр апп-аар нээнэ үү.",
+      "archive_unreadable": "Энэ архивыг энд нээх боломжгүй."
     },
     "received_via": "Хэнд: {name}",
     "remove_color": "Тагийг хасах",

locales/rn/nb.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Åpne i app",
       "pdf_external": "PDF-filer åpnes i PDF-leseren på denne enheten.",
-      "unsupported": "Ingen forhåndsvisning for denne filtypen."
+      "unsupported": "Ingen forhåndsvisning for denne filtypen.",
+      "media_unsupported": "Denne filen kan ikke spilles av her.",
+      "pdf_protected": "Denne PDF-en er passordbeskyttet. Åpne den i en annen app for å skrive inn passordet.",
+      "pdf_unreadable": "Denne PDF-en kan ikke vises her.",
+      "archive_files": "{count, plural, one {# fil} other {# filer}}",
+      "archive_first_files": "De første {count} filene",
+      "archive_protected": "Dette arkivet er passordbeskyttet. Åpne det i en annen app for å skrive inn passordet.",
+      "archive_unreadable": "Dette arkivet kan ikke åpnes her."
     },
     "received_via": "til {name}",
     "remove_color": "Fjern etiketten",

locales/rn/nl.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Openen in app",
       "pdf_external": "PDF's worden geopend in de PDF-viewer op dit apparaat.",
-      "unsupported": "Geen voorbeeld voor dit bestandstype."
+      "unsupported": "Geen voorbeeld voor dit bestandstype.",
+      "media_unsupported": "Dit bestand kan hier niet worden afgespeeld.",
+      "pdf_protected": "Deze pdf is beveiligd met een wachtwoord. Open hem in een andere app om het wachtwoord in te voeren.",
+      "pdf_unreadable": "Deze pdf kan hier niet worden weergegeven.",
+      "archive_files": "{count, plural, one {# bestand} other {# bestanden}}",
+      "archive_first_files": "De eerste {count} bestanden",
+      "archive_protected": "Dit archief is beveiligd met een wachtwoord. Open het in een andere app om het wachtwoord in te voeren.",
+      "archive_unreadable": "Dit archief kan hier niet worden geopend."
     },
     "received_via": "aan {name}",
     "remove_color": "Label verwijderen",

locales/rn/pl.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Otwórz w aplikacji",
       "pdf_external": "Pliki PDF otwierają się w przeglądarce PDF na tym urządzeniu.",
-      "unsupported": "Brak podglądu dla tego typu pliku."
+      "unsupported": "Brak podglądu dla tego typu pliku.",
+      "media_unsupported": "Tego pliku nie można tutaj odtworzyć.",
+      "pdf_protected": "Ten plik PDF jest chroniony hasłem. Otwórz go w innej aplikacji, aby wpisać hasło.",
+      "pdf_unreadable": "Tego pliku PDF nie można tutaj wyświetlić.",
+      "archive_files": "{count, plural, one {# plik} few {# pliki} many {# plików} other {# pliku}}",
+      "archive_first_files": "Pierwsze {count} plików",
+      "archive_protected": "To archiwum jest chronione hasłem. Otwórz je w innej aplikacji, aby wpisać hasło.",
+      "archive_unreadable": "Tego archiwum nie można tutaj otworzyć."
     },
     "received_via": "do {name}",
     "remove_color": "Usuń etykietę",

locales/rn/pt.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Abrir em outro app",
       "pdf_external": "PDFs são abertos no leitor de PDF deste dispositivo.",
-      "unsupported": "Sem pré-visualização para este tipo de arquivo."
+      "unsupported": "Sem pré-visualização para este tipo de arquivo.",
+      "media_unsupported": "Este ficheiro não pode ser reproduzido aqui.",
+      "pdf_protected": "Este PDF está protegido por palavra-passe. Abra-o noutra aplicação para a introduzir.",
+      "pdf_unreadable": "Este PDF não pode ser mostrado aqui.",
+      "archive_files": "{count, plural, one {# ficheiro} other {# ficheiros}}",
+      "archive_first_files": "Os primeiros {count} ficheiros",
+      "archive_protected": "Este arquivo está protegido por palavra-passe. Abra-o noutra aplicação para a introduzir.",
+      "archive_unreadable": "Este arquivo não pode ser aberto aqui."
     },
     "received_via": "para {name}",
     "remove_color": "Remover etiqueta",

locales/rn/ro.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Deschideți într-o aplicație",
       "pdf_external": "Fișierele PDF se deschid în vizualizatorul PDF de pe acest dispozitiv.",
-      "unsupported": "Nu există previzualizare pentru acest tip de fișier."
+      "unsupported": "Nu există previzualizare pentru acest tip de fișier.",
+      "media_unsupported": "Acest fișier nu poate fi redat aici.",
+      "pdf_protected": "Acest PDF este protejat cu parolă. Deschide-l în altă aplicație pentru a introduce parola.",
+      "pdf_unreadable": "Acest PDF nu poate fi afișat aici.",
+      "archive_files": "{count, plural, one {# fișier} few {# fișiere} other {# de fișiere}}",
+      "archive_first_files": "Primele {count} fișiere",
+      "archive_protected": "Această arhivă este protejată cu parolă. Deschide-o în altă aplicație pentru a introduce parola.",
+      "archive_unreadable": "Această arhivă nu poate fi deschisă aici."
     },
     "received_via": "către {name}",
     "remove_color": "Eliminați eticheta",

locales/rn/ru.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Открыть в приложении",
       "pdf_external": "PDF-файлы открываются в программе просмотра PDF на этом устройстве.",
-      "unsupported": "Для этого типа файлов нет предпросмотра."
+      "unsupported": "Для этого типа файлов нет предпросмотра.",
+      "media_unsupported": "Этот файл нельзя воспроизвести здесь.",
+      "pdf_protected": "Этот PDF защищён паролем. Откройте его в другом приложении, чтобы ввести пароль.",
+      "pdf_unreadable": "Этот PDF нельзя показать здесь.",
+      "archive_files": "{count, plural, one {# файл} few {# файла} many {# файлов} other {# файла}}",
+      "archive_first_files": "Первые {count} файлов",
+      "archive_protected": "Этот архив защищён паролем. Откройте его в другом приложении, чтобы ввести пароль.",
+      "archive_unreadable": "Этот архив нельзя открыть здесь."
     },
     "received_via": "на {name}",
     "remove_color": "Убрать тег",

locales/rn/sk.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Otvoriť v aplikácii",
       "pdf_external": "Súbory PDF sa otvárajú v prehliadači PDF na tomto zariadení.",
-      "unsupported": "Pre tento typ súboru nie je k dispozícii náhľad."
+      "unsupported": "Pre tento typ súboru nie je k dispozícii náhľad.",
+      "media_unsupported": "Tento súbor tu nie je možné prehrať.",
+      "pdf_protected": "Toto PDF je chránené heslom. Otvorte ho v inej aplikácii a zadajte heslo.",
+      "pdf_unreadable": "Toto PDF tu nie je možné zobraziť.",
+      "archive_files": "{count, plural, one {# súbor} few {# súbory} many {# súboru} other {# súborov}}",
+      "archive_first_files": "Prvých {count} súborov",
+      "archive_protected": "Tento archív je chránený heslom. Otvorte ho v inej aplikácii a zadajte heslo.",
+      "archive_unreadable": "Tento archív tu nie je možné otvoriť."
     },
     "received_via": "pre {name}",
     "remove_color": "Odstrániť štítok",

locales/rn/tr.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Uygulamada aç",
       "pdf_external": "PDF dosyaları bu cihazdaki PDF görüntüleyicide açılır.",
-      "unsupported": "Bu dosya türü için önizleme yok."
+      "unsupported": "Bu dosya türü için önizleme yok.",
+      "media_unsupported": "Bu dosya burada oynatılamıyor.",
+      "pdf_protected": "Bu PDF parola korumalı. Parolayı girmek için başka bir uygulamada açın.",
+      "pdf_unreadable": "Bu PDF burada gösterilemiyor.",
+      "archive_files": "{count, plural, one {# dosya} other {# dosya}}",
+      "archive_first_files": "İlk {count} dosya",
+      "archive_protected": "Bu arşiv parola korumalı. Parolayı girmek için başka bir uygulamada açın.",
+      "archive_unreadable": "Bu arşiv burada açılamıyor."
     },
     "received_via": "alıcı: {name}",
     "remove_color": "Etiketi kaldır",

locales/rn/uk.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "Відкрити в застосунку",
       "pdf_external": "PDF-файли відкриваються в переглядачі PDF на цьому пристрої.",
-      "unsupported": "Для цього типу файлів немає попереднього перегляду."
+      "unsupported": "Для цього типу файлів немає попереднього перегляду.",
+      "media_unsupported": "Цей файл не можна відтворити тут.",
+      "pdf_protected": "Цей PDF захищено паролем. Відкрийте його в іншому застосунку, щоб ввести пароль.",
+      "pdf_unreadable": "Цей PDF не можна показати тут.",
+      "archive_files": "{count, plural, one {# файл} few {# файли} many {# файлів} other {# файлу}}",
+      "archive_first_files": "Перші {count} файлів",
+      "archive_protected": "Цей архів захищено паролем. Відкрийте його в іншому застосунку, щоб ввести пароль.",
+      "archive_unreadable": "Цей архів не можна відкрити тут."
     },
     "received_via": "на {name}",
     "remove_color": "Прибрати тег",

locales/rn/zh-TW.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "在應用程式中開啟",
       "pdf_external": "PDF 會在此裝置的 PDF 檢視器中開啟。",
-      "unsupported": "無法預覽此檔案類型。"
+      "unsupported": "無法預覽此檔案類型。",
+      "media_unsupported": "無法在此播放這個檔案。",
+      "pdf_protected": "此 PDF 受密碼保護。請在其他應用程式中開啟以輸入密碼。",
+      "pdf_unreadable": "無法在此顯示這個 PDF。",
+      "archive_files": "{count, plural, other {# 個檔案}}",
+      "archive_first_files": "前 {count} 個檔案",
+      "archive_protected": "此壓縮檔受密碼保護。請在其他應用程式中開啟以輸入密碼。",
+      "archive_unreadable": "無法在此開啟這個壓縮檔。"
     },
     "received_via": "寄給 {name}",
     "remove_color": "移除標籤",

locales/rn/zh.json

@@ -407,7 +407,14 @@
     "preview": {
       "open_external": "在应用中打开",
       "pdf_external": "PDF 将在此设备的 PDF 查看器中打开。",
-      "unsupported": "无法预览此类文件。"
+      "unsupported": "无法预览此类文件。",
+      "media_unsupported": "无法在此播放该文件。",
+      "pdf_protected": "此 PDF 受密码保护。请在其他应用中打开以输入密码。",
+      "pdf_unreadable": "无法在此显示该 PDF。",
+      "archive_files": "{count, plural, other {# 个文件}}",
+      "archive_first_files": "前 {count} 个文件",
+      "archive_protected": "此压缩包受密码保护。请在其他应用中打开以输入密码。",
+      "archive_unreadable": "无法在此打开该压缩包。"
     },
     "received_via": "发给 {name}",
     "remove_color": "删除标签",

metro.config.js

@@ -2,19 +2,4 @@ const { getDefaultConfig } = require('expo/metro-config');
 
 const config = getDefaultConfig(__dirname);
 
-// babel.config.js rewrites lucide-react-native imports to per-icon modules
-// under dist/ (scripts/babel-plugin-lucide-imports.js). The package's
-// `exports` map only lists its barrel, so resolve those paths as plain files
-// instead of letting Metro warn about every one of them.
-const LUCIDE_DEEP_IMPORT = 'lucide-react-native/dist/';
-const upstreamResolveRequest = config.resolver.resolveRequest;
-
-config.resolver.resolveRequest = (context, moduleName, platform) => {
-  const resolve = upstreamResolveRequest ?? context.resolveRequest;
-  if (moduleName.startsWith(LUCIDE_DEEP_IMPORT)) {
-    return resolve({ ...context, unstable_enablePackageExports: false }, moduleName, platform);
-  }
-  return resolve(context, moduleName, platform);
-};
-
 module.exports = config;

package-lock.json

@@ -1,12 +1,13 @@
 {
   "name": "bulwark-mobile",
-  "version": "0.1.76",
+  "version": "0.1.82",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bulwark-mobile",
-      "version": "0.1.76",
+      "version": "0.1.82",
+      "hasInstallScript": true,
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@react-native-async-storage/async-storage": "2.2.0",
@@ -33,7 +34,6 @@
         "expo-status-bar": "~3.0.9",
         "expo-web-browser": "~15.0.8",
         "jszip": "^3.10.1",
-        "lucide-react-native": "^1.7.0",
         "postal-mime": "^3.0.0",
         "react": "19.1.0",
         "react-native": "0.81.5",
@@ -7790,17 +7790,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-react-native": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/lucide-react-native/-/lucide-react-native-1.7.0.tgz",
-      "integrity": "sha512-wGJY5nosSawh028jg8r1ZKqnGPDIVfIL9xvKOs4wPYFQHeJMHsADYm/lmuFYXMXXatSkHhpsCjeqIRgeFGzf8g==",
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-native": "*",
-        "react-native-svg": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"
-      }
-    },
     "node_modules/magic-string": {
       "version": "0.30.21",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulwark-mobile",
-  "version": "0.1.76",
+  "version": "0.1.82",
   "license": "AGPL-3.0-only",
   "main": "index.ts",
   "scripts": {
@@ -43,7 +43,6 @@
     "expo-status-bar": "~3.0.9",
     "expo-web-browser": "~15.0.8",
     "jszip": "^3.10.1",
-    "lucide-react-native": "^1.7.0",
     "postal-mime": "^3.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",

patches/postal-mime+3.0.0.patch

@@ -0,0 +1,82 @@
+diff --git a/node_modules/postal-mime/src/base64-decoder.js b/node_modules/postal-mime/src/base64-decoder.js
+index 93c2aea..ba6e3f1 100644
+--- a/node_modules/postal-mime/src/base64-decoder.js
++++ b/node_modules/postal-mime/src/base64-decoder.js
+@@ -1,4 +1,4 @@
+-import { decodeBase64, blobToArrayBuffer } from './decode-strings.js';
++import { decodeBase64, concatChunks } from './decode-strings.js';
+ 
+ export default class Base64Decoder {
+     constructor(opts) {
+@@ -49,6 +49,6 @@ export default class Base64Decoder {
+     finalize() {
+         this.flushRemainder();
+ 
+-        return blobToArrayBuffer(new Blob(this.chunks, { type: 'application/octet-stream' }));
++        return concatChunks(this.chunks);
+     }
+ }
+diff --git a/node_modules/postal-mime/src/decode-strings.js b/node_modules/postal-mime/src/decode-strings.js
+index a5e058e..f255e8d 100644
+--- a/node_modules/postal-mime/src/decode-strings.js
++++ b/node_modules/postal-mime/src/decode-strings.js
+@@ -145,6 +145,23 @@ export function getDecoder(charset) {
+  * @param {Blob} blob Blob to convert
+  * @returns {ArrayBuffer} Converted value
+  */
++// React Native's Blob cannot be built from ArrayBuffers or typed arrays, so
++// the decoders join their chunks here instead of through a Blob.
++export function concatChunks(chunks) {
++    const parts = chunks.map(chunk => {
++        if (typeof chunk === 'string') return textEncoder.encode(chunk);
++        if (chunk instanceof ArrayBuffer) return new Uint8Array(chunk);
++        return new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength);
++    });
++    const out = new Uint8Array(parts.reduce((n, part) => n + part.byteLength, 0));
++    let pos = 0;
++    for (const part of parts) {
++        out.set(part, pos);
++        pos += part.byteLength;
++    }
++    return out.buffer;
++}
++
+ export async function blobToArrayBuffer(blob) {
+     if ('arrayBuffer' in blob) {
+         return await blob.arrayBuffer();
+diff --git a/node_modules/postal-mime/src/pass-through-decoder.js b/node_modules/postal-mime/src/pass-through-decoder.js
+index ad1c222..1e1d012 100644
+--- a/node_modules/postal-mime/src/pass-through-decoder.js
++++ b/node_modules/postal-mime/src/pass-through-decoder.js
+@@ -1,4 +1,4 @@
+-import { blobToArrayBuffer } from './decode-strings.js';
++import { concatChunks } from './decode-strings.js';
+ 
+ export default class PassThroughDecoder {
+     constructor() {
+@@ -12,6 +12,6 @@ export default class PassThroughDecoder {
+ 
+     finalize() {
+         // convert an array of arraybuffers into a blob and then back into a single arraybuffer
+-        return blobToArrayBuffer(new Blob(this.chunks, { type: 'application/octet-stream' }));
++        return concatChunks(this.chunks);
+     }
+ }
+diff --git a/node_modules/postal-mime/src/qp-decoder.js b/node_modules/postal-mime/src/qp-decoder.js
+index adee72c..3973673 100644
+--- a/node_modules/postal-mime/src/qp-decoder.js
++++ b/node_modules/postal-mime/src/qp-decoder.js
+@@ -1,4 +1,4 @@
+-import { blobToArrayBuffer, hexNibble } from './decode-strings.js';
++import { concatChunks, hexNibble } from './decode-strings.js';
+ 
+ const CHR_EQUALS = 0x3d;
+ const CHR_LF = 0x0a;
+@@ -83,6 +83,6 @@ export default class QPDecoder {
+         this.flushBuffer();
+ 
+         // convert an array of arraybuffers into a blob and then back into a single arraybuffer
+-        return blobToArrayBuffer(new Blob(this.chunks, { type: 'application/octet-stream' }));
++        return concatChunks(this.chunks);
+     }
+ }

scripts/babel-plugin-lucide-imports.js

@@ -1,91 +0,0 @@
-// Babel plugin: rewrite named imports from the `lucide-react-native` barrel to
-// the per-icon modules they re-export, so the bundle only contains (and the
-// app only evaluates) the icons it uses. The barrel re-exports all ~1,700
-// icons, and Metro has no tree shaking, so one `import { Mail }` used to pull
-// in and run every icon at startup.
-//
-//   import { Mail, Trash2 as Bin } from 'lucide-react-native';
-// becomes
-//   import Mail from 'lucide-react-native/dist/esm/icons/mail.js';
-//   import Bin from 'lucide-react-native/dist/esm/icons/trash-2.js';
-//
-// The name -> file table is read from the package's own ESM barrel, so icon
-// aliases (`MailIcon`, `LucideMail`, renamed icons) resolve exactly as they do
-// through the barrel. metro.config.js resolves these deep paths, which the
-// package's `exports` map does not list.
-const fs = require('node:fs');
-const path = require('node:path');
-
-const PACKAGE = 'lucide-react-native';
-const ESM_DIR = 'dist/esm';
-
-/** Map every name the barrel exports to `{ source, imported }`. */
-function loadExportMap() {
-  // `main` is dist/cjs/lucide-react-native.js; the ESM tree sits next to it.
-  const pkgDir = path.resolve(path.dirname(require.resolve(PACKAGE)), '..', '..');
-  const barrel = fs.readFileSync(path.join(pkgDir, ESM_DIR, `${PACKAGE}.js`), 'utf8');
-  const map = new Map();
-  for (const m of barrel.matchAll(/export\s*\{([^}]*)\}\s*from\s*'\.\/([^']+)'/g)) {
-    const source = `${PACKAGE}/${ESM_DIR}/${m[2]}`;
-    for (const spec of m[1].split(',')) {
-      const [imported, exported = imported] = spec.trim().split(/\s+as\s+/);
-      if (imported) map.set(exported, { source, imported });
-    }
-  }
-  if (map.size === 0) {
-    throw new Error(`${PACKAGE}: could not read the export list from its ESM barrel`);
-  }
-  return map;
-}
-
-let exportMap = null;
-function getExportMap() {
-  if (!exportMap) exportMap = loadExportMap();
-  return exportMap;
-}
-
-// A value-less binding (only used as a type) is dropped by the TypeScript
-// transform anyway; treat it the same way instead of failing the build.
-function isOnlyUsedAsType(importPath, localName) {
-  const binding = importPath.scope.getBinding(localName);
-  if (!binding) return true;
-  return binding.referencePaths.every((ref) => Boolean(ref.findParent((p) => p.isTSType())));
-}
-
-function lucideImportsPlugin({ types: t }) {
-  return {
-    name: 'lucide-direct-imports',
-    visitor: {
-      ImportDeclaration(importPath) {
-        const { node } = importPath;
-        if (node.source.value !== PACKAGE || node.importKind === 'type') return;
-        // Side-effect, default and namespace imports keep using the barrel.
-        if (node.specifiers.length === 0) return;
-        if (!node.specifiers.every((s) => t.isImportSpecifier(s))) return;
-
-        const map = getExportMap();
-        const replacements = [];
-        for (const spec of node.specifiers) {
-          if (spec.importKind === 'type') continue;
-          const name = t.isIdentifier(spec.imported) ? spec.imported.name : spec.imported.value;
-          const target = map.get(name);
-          if (!target) {
-            if (isOnlyUsedAsType(importPath, spec.local.name)) continue;
-            throw importPath.buildCodeFrameError(`${PACKAGE} has no export named "${name}"`);
-          }
-          const local = t.identifier(spec.local.name);
-          const specifier = target.imported === 'default'
-            ? t.importDefaultSpecifier(local)
-            : t.importSpecifier(local, t.identifier(target.imported));
-          replacements.push(t.importDeclaration([specifier], t.stringLiteral(target.source)));
-        }
-        if (replacements.length === 0) importPath.remove();
-        else importPath.replaceWithMultiple(replacements);
-      },
-    },
-  };
-}
-
-module.exports = lucideImportsPlugin;
-module.exports.loadExportMap = loadExportMap;
-module.exports.PACKAGE = PACKAGE;

scripts/generate-icons.mjs

@@ -0,0 +1,241 @@
+// Writes src/components/icons/index.ts from Tabler's outline path data.
+//
+// The app draws the same icon set as the webmail (Tabler Icons, MIT) under the
+// names it used when it was on Lucide, so screens import `{ Mail, Trash2 }`
+// from components/icons. Only the glyphs listed in MAP ship in the bundle.
+//
+//   node scripts/generate-icons.mjs [path/to/tabler-nodes-outline.json]
+//
+// The default path is the webmail checkout this repo usually sits in
+// (repos/react-native inside jmap-webmail), whose node_modules has
+// @tabler/icons. Add a line to MAP to make a new icon importable.
+
+import { readFileSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
+const SOURCE = process.argv[2]
+  ?? join(ROOT, '..', '..', 'node_modules', '@tabler', 'icons', 'tabler-nodes-outline.json');
+
+// App name -> Tabler outline name. Where the webmail (components/icons) maps
+// the same name, this uses its choice.
+const MAP = {
+  AlarmClock: 'alarm',
+  AlertCircle: 'alert-circle',
+  AlertTriangle: 'alert-triangle',
+  AlignCenter: 'align-center',
+  AlignLeft: 'align-left',
+  AlignRight: 'align-right',
+  Archive: 'archive',
+  ArrowDown: 'arrow-down',
+  ArrowDownWideNarrow: 'sort-descending',
+  ArrowLeft: 'arrow-left',
+  ArrowRight: 'arrow-right',
+  ArrowUp: 'arrow-up',
+  ArrowUpDown: 'arrows-sort',
+  ArrowUpNarrowWide: 'sort-ascending',
+  Ban: 'ban',
+  Bell: 'bell',
+  BellRing: 'bell-ringing',
+  Bold: 'bold',
+  Book: 'book-2',
+  BookOpen: 'book',
+  BookUser: 'address-book',
+  Bug: 'bug',
+  Building: 'building',
+  Cake: 'cake',
+  Calendar: 'calendar',
+  CalendarDays: 'calendar-month',
+  CalendarPlus: 'calendar-plus',
+  Camera: 'camera',
+  Check: 'check',
+  CheckCheck: 'checks',
+  CheckCircle: 'circle-check',
+  CheckCircle2: 'circle-check',
+  CheckSquare: 'square-check',
+  ChevronDown: 'chevron-down',
+  ChevronLeft: 'chevron-left',
+  ChevronRight: 'chevron-right',
+  ChevronUp: 'chevron-up',
+  CircleCheck: 'circle-check',
+  ClipboardPaste: 'clipboard-text',
+  Clock: 'clock',
+  CloudDownload: 'cloud-download',
+  CloudOff: 'cloud-off',
+  Code: 'code',
+  Columns3: 'columns-3',
+  Columns4: 'layout-columns',
+  Copy: 'copy',
+  Database: 'database',
+  Download: 'download',
+  Edit2: 'pencil',
+  Eraser: 'eraser',
+  ExternalLink: 'external-link',
+  Eye: 'eye',
+  EyeOff: 'eye-off',
+  File: 'file',
+  FileArchive: 'file-zip',
+  FileAudio: 'file-music',
+  FileCode: 'file-code',
+  FileCode2: 'file-code-2',
+  FileImage: 'photo',
+  FileInput: 'file-import',
+  FileSpreadsheet: 'file-spreadsheet',
+  FileText: 'file-text',
+  FileVideo: 'video',
+  Filter: 'filter',
+  Flag: 'flag',
+  FlaskConical: 'flask',
+  Folder: 'folder',
+  FolderArchive: 'archive',
+  FolderInput: 'folder-down',
+  FolderOpen: 'folder-open',
+  FolderPlus: 'folder-plus',
+  FolderSync: 'folders',
+  Forward: 'arrow-forward-up',
+  Globe: 'world',
+  Grid3x3: 'grid-dots',
+  GripVertical: 'grip-vertical',
+  HardDrive: 'server-2',
+  Heading1: 'h-1',
+  Heading2: 'h-2',
+  Heart: 'heart',
+  HelpCircle: 'help-circle',
+  Highlighter: 'highlight',
+  Image: 'photo',
+  Import: 'file-import',
+  Inbox: 'inbox',
+  Info: 'info-circle',
+  Italic: 'italic',
+  Key: 'key',
+  KeyRound: 'key',
+  Languages: 'language',
+  Layers: 'stack',
+  LayoutGrid: 'layout-grid',
+  LayoutTemplate: 'template',
+  Link2: 'link',
+  Link2Off: 'unlink',
+  List: 'list',
+  ListChecks: 'list-check',
+  ListOrdered: 'list-numbers',
+  Lock: 'lock',
+  LogOut: 'logout',
+  Mail: 'mail',
+  MailCheck: 'mail-check',
+  MailMinus: 'mail-minus',
+  MailOpen: 'mail-opened',
+  Mails: 'inbox',
+  MapPin: 'map-pin',
+  Maximize2: 'maximize',
+  Menu: 'menu-2',
+  MessageSquare: 'message',
+  Minus: 'minus',
+  Monitor: 'device-desktop',
+  Moon: 'moon',
+  MoreHorizontal: 'dots',
+  MoreVertical: 'dots-vertical',
+  MoveVertical: 'arrows-vertical',
+  Palette: 'palette',
+  Palmtree: 'beach',
+  PanelLeftClose: 'layout-sidebar-left-collapse',
+  PanelRight: 'layout-sidebar-right',
+  Paperclip: 'paperclip',
+  PenLine: 'pencil',
+  PenSquare: 'edit',
+  Pencil: 'pencil',
+  Phone: 'phone',
+  Pin: 'pinned',
+  PinOff: 'pinned-off',
+  Plus: 'plus',
+  Puzzle: 'puzzle',
+  QrCode: 'qrcode',
+  Quote: 'quote',
+  Redo2: 'arrow-forward',
+  RefreshCw: 'refresh',
+  RemoveFormatting: 'clear-formatting',
+  Repeat: 'repeat',
+  Reply: 'arrow-back-up',
+  ReplyAll: 'arrow-back-up-double',
+  RotateCcw: 'rotate',
+  Rows2: 'layout-rows',
+  Rss: 'rss',
+  Save: 'device-floppy',
+  ScanSearch: 'zoom-scan',
+  Scale: 'scale',
+  Search: 'search',
+  Send: 'send',
+  Server: 'server',
+  Settings: 'settings',
+  Share2: 'share-2',
+  Shield: 'shield',
+  ShieldAlert: 'shield-exclamation',
+  ShieldCheck: 'shield-check',
+  ShieldQuestion: 'shield-question',
+  Shuffle: 'arrows-shuffle',
+  Smartphone: 'device-mobile',
+  Square: 'square',
+  SquareCheck: 'square-check',
+  SquarePen: 'edit',
+  Star: 'star',
+  StickyNote: 'note',
+  Strikethrough: 'strikethrough',
+  Sun: 'sun',
+  Table: 'table',
+  Tag: 'tag',
+  Tags: 'tags',
+  Terminal: 'terminal',
+  Trash: 'trash',
+  Trash2: 'trash',
+  Type: 'typography',
+  Underline: 'underline',
+  Undo2: 'arrow-back',
+  Upload: 'upload',
+  User: 'user',
+  UserCircle: 'user-circle',
+  UserMinus: 'user-minus',
+  UserPen: 'user-edit',
+  UserPlus: 'user-plus',
+  UserRound: 'user',
+  UserRoundPlus: 'user-plus',
+  Users: 'users',
+  Video: 'video',
+  X: 'x',
+  XCircle: 'circle-x',
+};
+
+function main() {
+  const nodes = JSON.parse(readFileSync(SOURCE, 'utf8'));
+  const glyphs = new Map();
+  const missing = [];
+  for (const [appName, tabler] of Object.entries(MAP)) {
+    const icon = nodes[tabler];
+    if (!icon) { missing.push(`${appName} -> ${tabler}`); continue; }
+    const paths = icon.map(([tag, attrs]) => {
+      if (tag !== 'path') throw new Error(`${tabler}: unexpected <${tag}>`);
+      return attrs.d;
+    });
+    glyphs.set(tabler, paths);
+  }
+  if (missing.length) throw new Error(`Not in Tabler: ${missing.join(', ')}`);
+
+  const lines = [
+    '// Generated by scripts/generate-icons.mjs from @tabler/icons (MIT).',
+    '// Do not edit by hand: add the icon to MAP in the script and run it.',
+    '',
+    "import { makeIcon } from './icon';",
+    '',
+    "export type { AppIcon, IconProps } from './icon';",
+    '',
+    'const G = {',
+    ...[...glyphs.keys()].sort().map((k) => `  '${k}': ${JSON.stringify(glyphs.get(k))},`),
+    '} as const;',
+    '',
+    ...Object.entries(MAP).map(([a, t]) => `export const ${a} = makeIcon('${a}', G['${t}']);`),
+    '',
+  ];
+  writeFileSync(join(ROOT, 'src', 'components', 'icons', 'index.ts'), lines.join('\n'));
+  console.log(`${Object.keys(MAP).length} names, ${glyphs.size} glyphs`);
+}
+
+main();

scripts/generate-licences.mjs

@@ -0,0 +1,46 @@
+// Writes src/lib/licences.json: the libraries the app ships (the runtime
+// dependencies in package.json) with their licence, for Settings → About →
+// Open-source licences. Run after adding or upgrading a dependency:
+//
+//   node scripts/generate-licences.mjs
+//
+// The test in src/lib/__tests__/licences.test.ts fails when a dependency is
+// missing from the list.
+
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const ROOT = join(dirname(fileURLToPath(import.meta.url)), '..');
+const pkg = JSON.parse(readFileSync(join(ROOT, 'package.json'), 'utf8'));
+
+// Code that isn't an npm dependency but ships in the app.
+const VENDORED = [
+  { name: 'Tabler Icons', version: '', license: 'MIT', url: 'https://tabler.io/icons' },
+];
+
+function repoUrl(meta) {
+  const repo = typeof meta.repository === 'string' ? meta.repository : meta.repository?.url;
+  const url = meta.homepage || repo || '';
+  return url
+    .replace(/^git\+/, '')
+    .replace(/^git:\/\//, 'https://')
+    .replace(/^github:/, 'https://github.com/')
+    .replace(/\.git$/, '')
+    .replace(/#.*$/, '');
+}
+
+const libraries = Object.keys(pkg.dependencies).sort().map((name) => {
+  const file = join(ROOT, 'node_modules', name, 'package.json');
+  if (!existsSync(file)) throw new Error(`${name} is not installed`);
+  const meta = JSON.parse(readFileSync(file, 'utf8'));
+  const license = typeof meta.license === 'string' ? meta.license : meta.license?.type ?? 'See package';
+  return { name, version: meta.version, license, url: repoUrl(meta) };
+});
+
+const out = {
+  app: { name: pkg.name, license: pkg.license },
+  libraries: [...libraries, ...VENDORED],
+};
+writeFileSync(join(ROOT, 'src', 'lib', 'licences.json'), `${JSON.stringify(out, null, 2)}\n`);
+console.log(`${out.libraries.length} libraries`);

src/api/__tests__/email-draft-blobs.test.ts

@@ -0,0 +1,138 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('../jmap-client', () => ({
+  jmapClient: {
+    accountId: 'acc-1',
+    request: vi.fn(),
+    getMaxCallsInRequest: vi.fn(() => 16),
+    getMaxObjectsInGet: vi.fn(() => 500),
+    getMaxObjectsInSet: vi.fn(() => 500),
+  },
+}));
+
+import { jmapClient } from '../jmap-client';
+import { saveDraftVersion, type OutgoingAttachment, type OutgoingEmail } from '../email';
+import { initialDraftPartBlobState, liveBlobId, rebaseDraftPartBlobs } from '../../lib/draft-part-blobs';
+
+const mockRequest = jmapClient.request as ReturnType<typeof vi.fn>;
+
+/**
+ * A tiny server with Stalwart's blob semantics, as measured on 0.16.22 (2026-10-14):
+ * an email's part blobIds are derived from that email and stop resolving the
+ * moment it is destroyed ("blobId … does not exist on this server"); creating
+ * an email copies the referenced bytes into new parts with new blobIds.
+ */
+function fakeStalwart() {
+  let seq = 0;
+  const emails = new Map<string, Array<{ blobId: string; name: string; size: number; cid?: string; type: string }>>();
+  const live = (blobId: string) => [...emails.values()].some((parts) => parts.some((p) => p.blobId === blobId));
+  const seed = (id: string, parts: OutgoingAttachment[]) => {
+    emails.set(id, parts.map((p) => ({ blobId: p.blobId, name: p.name, size: p.size ?? 0, cid: p.cid, type: p.type })));
+  };
+  mockRequest.mockImplementation(async (calls: Array<[string, Record<string, any>, string]>) => {
+    const out: Array<[string, unknown, string]> = [];
+    let createdId: string | undefined;
+    for (const [method, args, callId] of calls) {
+      if (method === 'Email/set' && args.create) {
+        const create = args.create.draft;
+        const dead = (create.attachments ?? []).find((a: { blobId: string }) => !live(a.blobId));
+        if (dead) {
+          out.push(['Email/set', { notCreated: { draft: {
+            type: 'blobNotFound', description: `blobId ${dead.blobId} does not exist on this server.`,
+          } } }, callId]);
+          continue;
+        }
+        createdId = `e${++seq}`;
+        emails.set(createdId, (create.attachments ?? []).map((a: OutgoingAttachment, i: number) => ({
+          blobId: `${createdId}-part${i}`, name: a.name, size: a.size ?? 0, cid: a.cid ? `<${a.cid}>` : undefined, type: a.type,
+        })));
+        out.push(['Email/set', { created: { draft: { id: createdId } } }, callId]);
+      } else if (method === 'Email/set' && args.destroy) {
+        for (const id of args.destroy) emails.delete(id);
+        out.push(['Email/set', { destroyed: args.destroy }, callId]);
+      } else if (method === 'Email/get') {
+        if (!createdId || args.ids?.[0] !== '#draft') {
+          out.push(['error', { type: 'invalidResultReference' }, callId]);
+          continue;
+        }
+        out.push(['Email/get', { list: [{ id: createdId, attachments: emails.get(createdId) }] }, callId]);
+      }
+    }
+    return { methodResponses: out };
+  });
+  return { seed, emails };
+}
+
+const IMG_A: OutgoingAttachment = { blobId: 'd0-part-a', name: 'schema-a.png', size: 136574, type: 'image/png', disposition: 'inline', cid: 'a@undust.co' };
+const IMG_B: OutgoingAttachment = { blobId: 'd0-part-b', name: 'schema-b.png', size: 175155, type: 'image/png', disposition: 'inline', cid: 'b@undust.co' };
+
+const draftWith = (attachments: OutgoingAttachment[]): OutgoingEmail => ({
+  from: [{ email: 'me@undust.co' }],
+  to: [{ email: 'test@example.invalid' }],
+  subject: 'RE: draft with two inline images',
+  htmlBody: '<p>x <img src="cid:a@undust.co"> <img src="cid:b@undust.co"></p>',
+  textBody: 'x',
+  attachments,
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('saveDraftVersion', () => {
+  it('reads the new version\'s parts back in the same request, by creation id', async () => {
+    fakeStalwart().seed('d0', [IMG_A]);
+    const saved = await saveDraftVersion(draftWith([IMG_A]), 'drafts', 'd0');
+    const calls = mockRequest.mock.calls[0][0];
+    expect(calls.map((c: [string]) => c[0])).toEqual(['Email/set', 'Email/get']);
+    expect(calls[1][1].ids).toEqual(['#draft']);
+    expect(saved.id).toBe('e1');
+    expect(saved.attachments.map((a) => a.blobId)).toEqual(['e1-part0']);
+  });
+
+  it('destroys the previous version only after the new one exists', async () => {
+    fakeStalwart().seed('d0', [IMG_A]);
+    await saveDraftVersion(draftWith([IMG_A]), 'drafts', 'd0');
+    const destroyCall = mockRequest.mock.calls[1][0][0];
+    expect(destroyCall[0]).toBe('Email/set');
+    expect(destroyCall[1].destroy).toEqual(['d0']);
+  });
+
+  it('still returns the id when the read-back fails', async () => {
+    mockRequest.mockResolvedValueOnce({ methodResponses: [
+      ['Email/set', { created: { draft: { id: 'e9' } } }, '0'],
+      ['error', { type: 'serverFail' }, '1'],
+    ] });
+    const saved = await saveDraftVersion(draftWith([]), 'drafts');
+    expect(saved).toEqual({ id: 'e9', attachments: [] });
+  });
+});
+
+describe('re-opened draft with inline images: save, save again, send', () => {
+  // What ComposeScreen does: buildOutgoing maps each held blobId through the
+  // state, saveDraftOnce rebases it on the parts read back.
+  async function editSession(rebase: boolean) {
+    const server = fakeStalwart();
+    server.seed('d0', [IMG_A, IMG_B]); // the draft as deposited (IMAP APPEND or an earlier save)
+    let state = initialDraftPartBlobState();
+    let draftId = 'd0';
+    const outgoing = () => draftWith([IMG_A, IMG_B].map((a) => ({ ...a, blobId: liveBlobId(state, a.blobId) })));
+    for (let i = 0; i < 2; i++) {
+      const sent = outgoing();
+      const saved = await saveDraftVersion(sent, 'drafts', draftId);
+      draftId = saved.id;
+      if (rebase) state = rebaseDraftPartBlobs(state, sent.attachments ?? [], saved.attachments);
+    }
+    return { server, draftId };
+  }
+
+  it('reproduces the bug without the rebase: the second save references the destroyed draft\'s parts', async () => {
+    await expect(editSession(false)).rejects.toThrow('blobId d0-part-a does not exist on this server.');
+  });
+
+  it('keeps every save (and so the send, which builds the same attachments) on live blobs', async () => {
+    const { server, draftId } = await editSession(true);
+    expect([...server.emails.keys()]).toEqual([draftId]);
+    expect(server.emails.get(draftId)!.map((p) => p.name)).toEqual(['schema-a.png', 'schema-b.png']);
+  });
+});

src/api/__tests__/live-stalwart.test.ts

@@ -22,6 +22,8 @@ import {
   getFullEmails,
   getThreadsHeaders,
   createDraft,
+  saveDraftVersion,
+  destroyEmails,
   sendEmail,
   markAsSpam,
   undoSpam,
@@ -33,6 +35,9 @@ import {
   EMAIL_FULL_PROPERTIES,
 } from '../email';
 import { getIdentities } from '../identity';
+import { uploadBytes } from '../blob';
+import { initialDraftPartBlobState, liveBlobId, rebaseDraftPartBlobs } from '../../lib/draft-part-blobs';
+import type { OutgoingAttachment } from '../email';
 import { getCalendars, queryEvents, createEvent, deleteEvents } from '../calendar';
 import { getAddressBooks, createContact, deleteContacts } from '../contacts';
 
@@ -192,6 +197,44 @@ live('live Stalwart', () => {
       await destroyEmails([id]);
     }, 60_000);
 
+    it('keeps a re-opened draft with an inline image saveable across saves (#849 part blobs)', async () => {
+      // A 1x1 PNG uploaded once; D0 stands for the draft as it sits on the server.
+      const png = Uint8Array.from(atob('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=='), (c) => c.charCodeAt(0));
+      const up = await uploadBytes(png, 'image/png');
+      const base = {
+        from: [{ email: USER }],
+        to: [{ email: 'test@example.invalid' }],
+        subject: '[TEST bulwark-blob — supprimable]',
+        htmlBody: '<p>live <img src="cid:img1@live.test"></p>',
+        textBody: 'live',
+      };
+      const img = (blobId: string): OutgoingAttachment => ({
+        blobId, type: 'image/png', name: 'img1.png', size: png.byteLength, disposition: 'inline', cid: 'img1@live.test',
+      });
+      const d0 = await saveDraftVersion({ ...base, attachments: [img(up.blobId)] }, drafts);
+      const created = [d0.id];
+      try {
+        // Re-open D0: the composer holds D0's part blobId.
+        const seeded = d0.attachments[0].blobId;
+        let state = initialDraftPartBlobState();
+        let draftId = d0.id;
+        for (let i = 0; i < 2; i++) {
+          const sent = [img(liveBlobId(state, seeded))];
+          const saved = await saveDraftVersion({ ...base, attachments: sent }, drafts, draftId);
+          created.push(saved.id);
+          draftId = saved.id;
+          state = rebaseDraftPartBlobs(state, sent, saved.attachments);
+        }
+        // Without the rebase the seeded part blob is gone with D0.
+        await expect(saveDraftVersion({ ...base, attachments: [img(seeded)] }, drafts))
+          .rejects.toThrow(/does not exist|blobNotFound/);
+        const [last] = await getFullEmails([draftId]);
+        expect(last.attachments?.[0]?.cid).toContain('img1@live.test');
+      } finally {
+        await destroyEmails(created).catch(() => undefined);
+      }
+    }, 90_000);
+
     it('sends through Drafts and files into Sent only after submission (#188)', async () => {
       const identities = await getIdentities();
       expect(identities.length).toBeGreaterThan(0);

src/api/email.ts

@@ -1679,31 +1679,64 @@ export async function sendEmail(
   };
 }
 
+/** A saved draft version and the attachment parts the server built for it. */
+export interface SavedDraftVersion {
+  id: string;
+  /**
+   * Attachment and inline parts of the new version, with their blobIds. A
+   * part's blobId only lives as long as this version: re-opened drafts must
+   * send these (not the previous version's) on their next save or send.
+   * Empty when the server did not answer the read-back.
+   */
+  attachments: Attachment[];
+}
+
+const DRAFT_PART_BODY_PROPERTIES = ['partId', 'blobId', 'size', 'name', 'type', 'cid', 'disposition'];
+
 /**
  * Save a draft into the Drafts folder (`$draft` + `$seen`). When `previousDraftId`
  * is given it is destroyed only AFTER the replacement was created (#849): a
  * combined create+destroy would delete the last good copy when the create
- * fails (e.g. blobNotFound on a re-opened draft's attachments). Returns the
- * new draft id.
+ * fails (e.g. blobNotFound on a re-opened draft's attachments). The new
+ * version's attachment parts are read back in the same request, so the
+ * composer can re-point its draft-part blobIds before the old version (and
+ * its part blobs) is destroyed.
  */
-export async function createDraft(
+export async function saveDraftVersion(
   email: OutgoingEmail,
   draftsMailboxId: string,
   previousDraftId?: string,
   accountIdOverride?: string,
-): Promise<string> {
+): Promise<SavedDraftVersion> {
   const accountId = accountIdOverride ?? jmapClient.accountId;
   const emailCreate = buildEmailCreate(email);
   emailCreate.mailboxIds = { [draftsMailboxId]: true };
   emailCreate.keywords = { $seen: true, $draft: true };
   const res = await jmapClient.request([
     ['Email/set', { accountId, create: { draft: emailCreate } }, '0'],
+    // `#draft` is the creation id (RFC 8620 §5.3). Stalwart 0.16 does not
+    // resolve a result reference into an Email/set `created` map
+    // (invalidResultReference), but it does resolve the creation id.
+    ['Email/get', {
+      accountId,
+      ids: ['#draft'],
+      properties: ['id', 'attachments'],
+      bodyProperties: DRAFT_PART_BODY_PROPERTIES,
+    }, '1'],
   ]);
   const body = requireMethodResult(res, '0', 'Email/set');
   const notCreated = body.notCreated?.draft as { description?: string; type?: string } | undefined;
   if (notCreated) throw new Error(notCreated.description || notCreated.type || 'Failed to save draft');
   const id = body.created?.draft?.id as string | undefined;
   if (!id) throw new Error('Draft save returned no id');
+  let attachments: Attachment[] = [];
+  try {
+    const got = requireMethodResult(res, '1', 'Email/get');
+    const saved = (got.list as Array<{ id: string; attachments?: Attachment[] }> | undefined)?.find((e) => e.id === id);
+    attachments = (saved?.attachments ?? []).filter((a) => !!a.blobId);
+  } catch (err) {
+    console.warn('[email] could not read back the saved draft parts:', err);
+  }
   if (previousDraftId && previousDraftId !== id) {
     try {
       await destroyEmails([previousDraftId], accountId);
@@ -1711,7 +1744,17 @@ export async function createDraft(
       console.warn('[email] failed to destroy previous draft version:', err);
     }
   }
-  return id;
+  return { id, attachments };
+}
+
+/** {@link saveDraftVersion} for callers that only need the new draft id. */
+export async function createDraft(
+  email: OutgoingEmail,
+  draftsMailboxId: string,
+  previousDraftId?: string,
+  accountIdOverride?: string,
+): Promise<string> {
+  return (await saveDraftVersion(email, draftsMailboxId, previousDraftId, accountIdOverride)).id;
 }
 
 export interface ScheduledEmail {

src/components/Badge.tsx

@@ -1,20 +1,25 @@
 import React from 'react';
 import { View, Text, StyleSheet, ViewStyle } from 'react-native';
-import { radius, typography, type ThemePalette } from '../theme/tokens';
+import { radius, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 
 interface BadgeProps {
+  /** Sentence case ("Not on this server"); badges are never upper case. */
   children: string;
   variant?: 'default' | 'primary' | 'destructive' | 'outline' | 'muted';
   style?: ViewStyle;
 }
 
+/**
+ * A small status pill. The default is the webmail's outline badge: hairline
+ * border, muted 12px text. The tinted variants keep the same size.
+ */
 export default function Badge({ children, variant = 'default', style }: BadgeProps) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   return (
     <View style={[styles.base, styles[`bg_${variant}` as const], style]}>
-      <Text style={[styles.text, styles[`text_${variant}` as const]]}>
+      <Text style={[styles.text, styles[`text_${variant}` as const]]} numberOfLines={1}>
         {children}
       </Text>
     </View>
@@ -25,23 +30,24 @@ function makeStyles(c: ThemePalette) {
   return StyleSheet.create({
     base: {
       borderRadius: radius.full,
+      borderWidth: 1,
+      borderColor: 'transparent',
       paddingHorizontal: 8,
-      paddingVertical: 2,
+      paddingVertical: 1,
       alignSelf: 'flex-start',
     },
-    text: { ...typography.caption, fontWeight: '500' },
+    text: { fontSize: 12, lineHeight: 16 },
 
-    bg_default:     { backgroundColor: c.surface },
-    bg_primary:     { backgroundColor: c.primaryBg },
+    bg_default:     { borderColor: c.border },
+    bg_outline:     { borderColor: c.border },
+    bg_primary:     { backgroundColor: c.accent },
     bg_destructive: { backgroundColor: c.errorBg },
-    bg_outline:     { backgroundColor: 'transparent', borderWidth: 1, borderColor: c.border },
     bg_muted:       { backgroundColor: c.muted },
 
-    text_default:     { color: c.text },
-    text_primary:     { color: c.primary },
+    text_default:     { color: c.mutedForeground },
+    text_outline:     { color: c.mutedForeground },
+    text_primary:     { color: c.accentForeground },
     text_destructive: { color: c.error },
-    text_outline:     { color: c.text },
     text_muted:       { color: c.mutedForeground },
   });
 }
-

src/components/Button.tsx

@@ -1,9 +1,19 @@
 import React from 'react';
 import { Pressable, Text, StyleSheet, ViewStyle, ActivityIndicator } from 'react-native';
-import { spacing, radius, typography, componentSizes, type ThemePalette } from '../theme/tokens';
+import { spacing, radius, componentSizes, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 
-type ButtonVariant = 'default' | 'ghost' | 'outline' | 'destructive';
+/**
+ * The webmail's standard-theme buttons (components/ui/button.tsx):
+ * - default: bg-primary text-primary-foreground
+ * - secondary: bg-muted text-foreground
+ * - outline: border, transparent
+ * - ghost: no border or fill until pressed
+ * - destructive: red fill, white text
+ * - destructiveOutline: red border and text, for a reset in a settings row
+ * All 36 dp tall (lg 44 for a page's main action), radius 6, 14px medium.
+ */
+type ButtonVariant = 'default' | 'secondary' | 'ghost' | 'outline' | 'destructive' | 'destructiveOutline';
 type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
 
 interface ButtonProps {
@@ -19,8 +29,8 @@ interface ButtonProps {
   accessibilityLabel?: string;
 }
 
-// Extra touch area so even the small sizes reach a 48 dp target.
-const HIT_SLOP: Record<ButtonSize, number> = { sm: 6, md: 4, lg: 2, icon: 4 };
+// Extra touch area so every size reaches a 48 dp target.
+const HIT_SLOP: Record<ButtonSize, number> = { sm: 6, md: 6, lg: 2, icon: 4 };
 
 export default function Button({
   variant = 'default',
@@ -36,6 +46,9 @@ export default function Button({
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const isDisabled = disabled || loading;
+  const spinnerColor = variant === 'default'
+    ? c.primaryForeground
+    : variant === 'destructive' ? '#ffffff' : c.text;
 
   return (
     <Pressable
@@ -55,15 +68,12 @@ export default function Button({
       accessibilityState={{ disabled: isDisabled, busy: loading }}
     >
       {loading ? (
-        <ActivityIndicator
-          size="small"
-          color={variant === 'default' ? c.primaryForeground : c.primary}
-        />
+        <ActivityIndicator size="small" color={spinnerColor} />
       ) : (
         <>
           {icon}
           {typeof children === 'string' ? (
-            <Text style={[styles.text, styles[`text_${variant}` as const], isDisabled && styles.textDisabled]}>
+            <Text style={[styles.text, styles[`text_${variant}` as const]]} numberOfLines={1}>
               {children}
             </Text>
           ) : (
@@ -79,30 +89,36 @@ function makeStyles(c: ThemePalette) {
   return StyleSheet.create({
     base: {
       flexDirection: 'row', alignItems: 'center', justifyContent: 'center',
-      borderRadius: radius.md, gap: spacing.sm,
+      borderRadius: radius.sm, gap: spacing.sm,
     },
-    text: { ...typography.bodyMedium },
+    text: { fontSize: 14, fontWeight: '500', lineHeight: 20 },
     disabled: { opacity: 0.5 },
-    textDisabled: { opacity: 0.5 },
 
-    size_sm:   { height: componentSizes.buttonSm, paddingHorizontal: spacing.md },
-    size_md:   { height: componentSizes.buttonMd, paddingHorizontal: spacing.lg, paddingVertical: spacing.sm },
-    size_lg:   { height: componentSizes.buttonLg, paddingHorizontal: spacing.xxxl },
+    // minHeight, so a larger system font grows the button instead of clipping.
+    size_sm:   { minHeight: componentSizes.buttonSm, paddingHorizontal: spacing.md },
+    size_md:   { minHeight: componentSizes.buttonSm, paddingHorizontal: 14 },
+    size_lg:   { minHeight: componentSizes.buttonLg, paddingHorizontal: spacing.xxl },
     size_icon: { height: componentSizes.buttonMd, width: componentSizes.buttonMd, paddingHorizontal: 0 },
 
-    bg_default:     { backgroundColor: c.primary, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 1, elevation: 1 },
-    bg_ghost:       { backgroundColor: 'transparent' },
-    bg_outline:     { backgroundColor: c.background, borderWidth: 1, borderColor: c.border },
-    bg_destructive: { backgroundColor: c.error, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.05, shadowRadius: 1, elevation: 1 },
+    bg_default:            { backgroundColor: c.primary },
+    bg_secondary:          { backgroundColor: c.muted },
+    bg_ghost:              { backgroundColor: 'transparent' },
+    bg_outline:            { backgroundColor: 'transparent', borderWidth: 1, borderColor: c.border },
+    bg_destructive:        { backgroundColor: c.error },
+    bg_destructiveOutline: { backgroundColor: 'transparent', borderWidth: 1, borderColor: c.error },
 
-    pressed_default:     { backgroundColor: c.primaryDark, shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 2, elevation: 2 },
-    pressed_ghost:       { backgroundColor: c.accent },
-    pressed_outline:     { backgroundColor: c.accent },
-    pressed_destructive: { opacity: 0.9 },
+    pressed_default:            { opacity: 0.9 },
+    pressed_secondary:          { opacity: 0.8 },
+    pressed_ghost:              { backgroundColor: c.muted },
+    pressed_outline:            { backgroundColor: c.muted },
+    pressed_destructive:        { opacity: 0.9 },
+    pressed_destructiveOutline: { backgroundColor: c.errorBg },
 
-    text_default:     { color: c.primaryForeground },
-    text_ghost:       { color: c.text },
-    text_outline:     { color: c.text },
-    text_destructive: { color: c.errorForeground },
+    text_default:            { color: c.primaryForeground },
+    text_secondary:          { color: c.text },
+    text_ghost:              { color: c.text },
+    text_outline:            { color: c.text },
+    text_destructive:        { color: '#ffffff' },
+    text_destructiveOutline: { color: c.error },
   });
 }

src/components/Dialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, Modal, TextInput, type TextInputProps } from 'react-native';
-import { AlertTriangle } from 'lucide-react-native';
+import { AlertTriangle } from './icons';
 import Button from './Button';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
@@ -72,7 +72,7 @@ export default function Dialog({
                 value={input.value}
                 onChangeText={input.onChangeText}
                 placeholder={input.placeholder}
-                placeholderTextColor={c.textMuted}
+                placeholderTextColor={c.mutedForeground}
                 autoFocus
                 onSubmitEditing={confirmDisabled ? undefined : onConfirm}
                 accessibilityLabel={input.placeholder ?? title}
@@ -143,15 +143,17 @@ function makeStyles(c: ThemePalette) {
     color: c.mutedForeground,  // text-muted-foreground
     marginTop: spacing.sm,
   },
+  // The shared Input look: 40 dp, transparent, radius 6.
   input: {
     ...typography.body,
     color: c.text,
-    backgroundColor: c.surface,
+    backgroundColor: 'transparent',
     borderWidth: 1,
     borderColor: c.border,
     borderRadius: radius.sm,
     paddingHorizontal: spacing.md,
-    paddingVertical: 10,
+    paddingVertical: 0,
+    minHeight: 40,
     marginTop: spacing.md,
   },
   footer: {

src/components/EmailBodyView.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, Linking, Platform, Text, Pressable, useWindowDimensio
 import { WebView, type WebViewMessageEvent } from 'react-native-webview';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { Image as ImageIcon, ShieldCheck } from 'lucide-react-native';
+import { Image as ImageIcon, ShieldCheck } from './icons';
 import type { Email } from '../api/types';
 import { extractCidRefs } from '../lib/email-html';
 import { hasTruncatedDisplayedBody, pickEmailBody, selectRenderableHtml } from '../lib/email-body';

src/components/IdentitySheet.tsx

@@ -3,7 +3,7 @@ import {
   View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { X, Check, Mail } from 'lucide-react-native';
+import { X, Check, Mail } from './icons';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import { useSheetDrag } from '../lib/use-sheet-drag';

src/components/Input.tsx

@@ -14,13 +14,12 @@ interface InputProps extends TextInputProps {
 }
 
 /**
- * Matches webmail input.tsx:
- * - h-10 w-full rounded-md border border-input bg-background
- * - px-3 py-2 text-sm text-foreground
- * - placeholder:text-muted-foreground
- * - hover:border-muted-foreground
- * - focus:ring-2 ring-ring border-ring
- * - disabled:opacity-50
+ * Matches webmail input.tsx in the standard theme:
+ * - h-10 rounded-md border border-input, transparent background
+ * - px-3 text-sm text-foreground, placeholder in muted-foreground
+ * - focus: border-ring
+ * - disabled: opacity-50
+ * - label above in text-sm font-medium text-foreground
  */
 export default function Input({
   label,
@@ -50,7 +49,7 @@ export default function Input({
           ref={ref}
           {...props}
           style={[styles.input, style]}
-          placeholderTextColor={c.textMuted}
+          placeholderTextColor={c.mutedForeground}
           onFocus={(e) => { setFocused(true); props.onFocus?.(e); }}
           onBlur={(e) => { setFocused(false); props.onBlur?.(e); }}
         />
@@ -65,8 +64,8 @@ function makeStyles(c: ThemePalette) {
   return StyleSheet.create({
   label: {
     ...typography.bodyMedium,
-    color: c.textSecondary,
-    marginBottom: spacing.sm,
+    color: c.text,
+    marginBottom: 6,
   },
   inputWrapper: {
     flexDirection: 'row',
@@ -75,12 +74,12 @@ function makeStyles(c: ThemePalette) {
     borderWidth: 1,
     borderColor: c.border,            // border-input
     borderRadius: radius.sm,               // rounded-md = 6px
-    backgroundColor: c.background,    // bg-background
+    backgroundColor: 'transparent',
     paddingHorizontal: spacing.md,         // px-3 = 12px
   },
+  // Colour only, so focusing doesn't shift the text by a pixel.
   inputFocused: {
-    borderColor: c.borderFocus,       // border-ring (blue-500)
-    borderWidth: 2,
+    borderColor: c.borderFocus,
   },
   inputError: {
     borderColor: c.error,

src/components/MoveSheet.tsx

@@ -5,8 +5,8 @@ import {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   Inbox, Send, File as FileIcon, Trash2, Ban, Archive, Folder,
-  X, Check, type LucideIcon,
-} from 'lucide-react-native';
+  X, Check, type AppIcon,
+} from './icons';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import { buildMailboxTree, flattenVisible, type MailboxNode } from '../lib/mailbox-tree';
@@ -17,7 +17,7 @@ import type { Mailbox } from '../api/types';
 import { MODAL_ORIENTATIONS } from '../lib/modal-orientations';
 import { useSheetInsets } from '../lib/use-layout';
 
-function moveTargetIcon(role: string | null | undefined, name: string): LucideIcon {
+function moveTargetIcon(role: string | null | undefined, name: string): AppIcon {
   const lower = name.toLowerCase();
   if (role === 'inbox' || lower.includes('inbox')) return Inbox;
   if (role === 'sent' || lower.includes('sent')) return Send;

src/components/OfflineBanner.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { CloudOff } from 'lucide-react-native';
+import { CloudOff } from './icons';
 import { useNetworkStore } from '../stores/network-store';
 import { useOutboxStore } from '../stores/outbox-store';
 import { useLocaleStore } from '../stores/locale-store';

src/components/OfflineCacheBanner.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { CloudDownload, X } from 'lucide-react-native';
+import { CloudDownload, X } from './icons';
 import { useOfflineCacheStore } from '../stores/offline-cache-store';
 import { useUpdatesStore } from '../stores/updates-store';
 import { formatBytes } from '../lib/offline-sync';

src/components/PasteSignInLinkModal.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import * as Clipboard from 'expo-clipboard';
-import { ClipboardPaste, X } from 'lucide-react-native';
+import { ClipboardPaste, X } from './icons';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import Button from './Button';

src/components/PushOnboardingPrompt.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, Text, StyleSheet, Pressable, Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useFloatingCardFrame } from '../lib/use-layout';
-import { BellRing, X } from 'lucide-react-native';
+import { BellRing, X } from './icons';
 import Button from './Button';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';

src/components/QrScanModal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, Text, Pressable, StyleSheet, Modal, Platform, Linking } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { CameraView, useCameraPermissions, type BarcodeScanningResult } from 'expo-camera';
-import { X } from 'lucide-react-native';
+import { X } from './icons';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors, useResolvedTheme } from '../theme/colors';
 import Button from './Button';

src/components/RichTextEditor.tsx

@@ -78,10 +78,16 @@ interface Props {
   onSelectionChange?: (state: RichTextSelectionState) => void;
   onFocus?: () => void;
   onBlur?: () => void;
+  /**
+   * Android: the page undid a caret-reveal pan of `dy` px (dp) inside the
+   * WebView. The host should scroll its ScrollView down by `dy` so the caret
+   * stays visible (see `pinVisualViewport` in editor-html).
+   */
+  onViewportShift?: (dy: number) => void;
 }
 
 const RichTextEditor = React.forwardRef<RichTextEditorHandle, Props>(function RichTextEditor(
-  { initialHtml = '', placeholder = '', blockRemoteImages = false, onChange, onSelectionChange, onFocus, onBlur },
+  { initialHtml = '', placeholder = '', blockRemoteImages = false, onChange, onSelectionChange, onFocus, onBlur, onViewportShift },
   ref,
 ) {
   const c = useColors();
@@ -92,6 +98,8 @@ const RichTextEditor = React.forwardRef<RichTextEditorHandle, Props>(function Ri
   const onSelectionRef = React.useRef(onSelectionChange);
   const onFocusRef = React.useRef(onFocus);
   const onBlurRef = React.useRef(onBlur);
+  const onViewportShiftRef = React.useRef(onViewportShift);
+  onViewportShiftRef.current = onViewportShift;
   onChangeRef.current = onChange;
   onSelectionRef.current = onSelectionChange;
   onFocusRef.current = onFocus;
@@ -100,7 +108,9 @@ const RichTextEditor = React.forwardRef<RichTextEditorHandle, Props>(function Ri
   // Build the source HTML once. Theming changes won't auto-rebuild the page,
   // which is fine: themes change rarely and the user can recompose if needed.
   const html = React.useMemo(
-    () => buildEditorHtml({ initialHtml, placeholder, c, blockRemoteImages }),
+    () => buildEditorHtml({
+      initialHtml, placeholder, c, blockRemoteImages, pinVisualViewport: Platform.OS === 'android',
+    }),
     // c reference changes per theme switch but we don't want to lose user
     // edits on a theme change. Bake in the initial colors only.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -224,6 +234,11 @@ const RichTextEditor = React.forwardRef<RichTextEditorHandle, Props>(function Ri
       case 'blur':
         onBlurRef.current?.();
         break;
+      case 'viewportShift': {
+        const dy = typeof data.payload === 'number' ? data.payload : Number(data.payload);
+        if (Number.isFinite(dy) && dy !== 0) onViewportShiftRef.current?.(dy);
+        break;
+      }
     }
   };
 

src/components/SidebarDrawer.tsx

@@ -10,8 +10,8 @@ import {
   Folder, FolderOpen, ChevronDown, ChevronRight, X, Settings, LogOut, Check, Plus,
   Clock, Layers, Users, Tag, Mails, MailOpen, StickyNote, AlarmClock, Flag,
   CheckCheck, Eraser, FolderPlus, Pencil, AlertTriangle, UserMinus,
-  type LucideIcon,
-} from 'lucide-react-native';
+  type AppIcon,
+} from './icons';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import { useAnimDuration } from '../theme/dynamic';
@@ -65,7 +65,7 @@ function iconFor(
   name: string | undefined,
   hasChildren: boolean,
   isExpanded: boolean,
-): LucideIcon {
+): AppIcon {
   switch (role) {
     case 'inbox': return Inbox;
     case 'sent': return Send;
@@ -224,7 +224,7 @@ function SidebarRow({
 interface SheetAction {
   key: string;
   label: string;
-  icon: LucideIcon;
+  icon: AppIcon;
   destructive?: boolean;
   onPress: () => void;
 }
@@ -685,7 +685,7 @@ export default function SidebarDrawer({ visible, onClose, docked = false }: Side
     };
   }, [mailboxes, accountSnapshots, activeAccountId, unifiedCrossAccount, includeGroupInUnified]);
 
-  const unifiedIcon = (role: UnifiedRole): LucideIcon => iconFor(role, undefined, false, false);
+  const unifiedIcon = (role: UnifiedRole): AppIcon => iconFor(role, undefined, false, false);
 
   const slideX = React.useRef(new Animated.Value(-Dimensions.get('window').width)).current;
   const overlayOpacity = React.useRef(new Animated.Value(0)).current;
@@ -1459,10 +1459,9 @@ function makeStyles(c: ThemePalette) {
     color: c.text,
   },
   rowLabelAccount: {
-    ...typography.caption,
-    fontWeight: '600',
-    textTransform: 'uppercase',
-    letterSpacing: 0.5,
+    fontSize: 13,
+    lineHeight: 18,
+    fontWeight: '500',
     color: c.textSecondary,
   },
   counts: {

src/components/SwipeableRow.tsx

@@ -4,8 +4,8 @@ import {
 } from 'react-native';
 import {
   Archive, Trash2, ShieldAlert, ShieldCheck, MailOpen, Mail, Star, Pin, PinOff, FolderInput,
-  type LucideIcon,
-} from 'lucide-react-native';
+  type AppIcon,
+} from './icons';
 import { typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import { useLocaleStore } from '../stores/locale-store';
@@ -43,7 +43,7 @@ export interface SwipeContext {
 // Distance the row flies off-screen by before the action callback fires.
 const EXIT_DISTANCE = 600;
 
-const ACTION_META: Record<Exclude<SwipeAction, 'none'>, { icon: LucideIcon; bg: string; defaultLabel: string }> = {
+const ACTION_META: Record<Exclude<SwipeAction, 'none'>, { icon: AppIcon; bg: string; defaultLabel: string }> = {
   archive: { icon: Archive,      bg: '#1d4ed8', defaultLabel: 'Archive' },
   delete:  { icon: Trash2,       bg: '#b91c1c', defaultLabel: 'Delete' },
   spam:    { icon: ShieldAlert,  bg: '#a16207', defaultLabel: 'Spam' },
@@ -68,7 +68,7 @@ function actionLabel(action: SwipeAction, context: SwipeContext, t: Translate):
   }
 }
 
-function actionIcon(action: Exclude<SwipeAction, 'none'>, context: SwipeContext): LucideIcon {
+function actionIcon(action: Exclude<SwipeAction, 'none'>, context: SwipeContext): AppIcon {
   if (action === 'spam' && context.inJunk) return ShieldCheck;
   if (action === 'read' && !context.unread) return Mail;
   if (action === 'pin' && context.pinned) return PinOff;

src/components/TagSheet.tsx

@@ -3,7 +3,7 @@ import {
   View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { X, Check, Tag } from 'lucide-react-native';
+import { X, Check, Tag } from './icons';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import { useSheetDrag } from '../lib/use-sheet-drag';

src/components/TemplateSheet.tsx

@@ -3,7 +3,7 @@ import {
   View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing, TextInput,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { X, Star, FileText } from 'lucide-react-native';
+import { X, Star, FileText } from './icons';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';
 import { useColors } from '../theme/colors';
 import { useSheetDrag } from '../lib/use-sheet-drag';

src/components/ToastHost.tsx

@@ -5,7 +5,7 @@ import {
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useFloatingCardFrame } from '../lib/use-layout';
-import { AlertCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react-native';
+import { AlertCircle, AlertTriangle, CheckCircle2, Info } from './icons';
 import { spacing, radius, type ThemePalette } from '../theme/tokens';
 import { useColors, useResolvedTheme } from '../theme/colors';
 import { useShouldAnimate } from '../theme/dynamic';

src/components/ToggleSwitch.tsx

@@ -12,11 +12,9 @@ interface ToggleSwitchProps {
 }
 
 /**
- * Matches webmail ToggleSwitch:
- * - h-6 w-11 rounded-full
- * - checked: bg-primary, unchecked: bg-muted
- * - thumb: h-4 w-4 rounded-full bg-background
- * - translate-x-6 (checked) / translate-x-1 (unchecked)
+ * The webmail switch in the standard theme: a 44 x 24 track, bg-primary when
+ * on (knob in primary-foreground), bg-muted when off (knob in background).
+ * The knob is 20 dp with 2 dp of track around it.
  */
 export default function ToggleSwitch({ value, onValueChange, disabled = false, accessibilityLabel }: ToggleSwitchProps) {
   const c = useColors();
@@ -38,7 +36,8 @@ export default function ToggleSwitch({ value, onValueChange, disabled = false, a
       <View
         style={[
           styles.thumb,
-          { transform: [{ translateX: value ? 24 : 4 }] },
+          value ? styles.thumbOn : styles.thumbOff,
+          { transform: [{ translateX: value ? 22 : 2 }] },
         ]}
       />
     </Pressable>
@@ -60,9 +59,14 @@ function makeStyles(c: ThemePalette) {
     backgroundColor: c.muted,
   },
   thumb: {
-    width: componentSizes.toggleThumb,    // h-4 w-4 = 16
+    width: componentSizes.toggleThumb,
     height: componentSizes.toggleThumb,
     borderRadius: radius.full,
+  },
+  thumbOn: {
+    backgroundColor: c.primaryForeground,
+  },
+  thumbOff: {
     backgroundColor: c.background,
   },
   disabled: {

src/components/UpdateBanner.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable, Linking } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Download, ShieldAlert, X } from 'lucide-react-native';
+import { Download, ShieldAlert, X } from './icons';
 import { useUpdatesStore } from '../stores/updates-store';
 import { useLocaleStore } from '../stores/locale-store';
 import { spacing, radius, typography, type ThemePalette } from '../theme/tokens';

src/components/__tests__/settings-i18n.test.ts

@@ -8,7 +8,7 @@ import { findUntranslatedLiterals } from './untranslated-literals';
 // Pane file (relative to src/components/) → texts that stay as they are on
 // purpose: product names, units, format patterns and sample data.
 const TRANSLATED_PANES: Record<string, string[]> = {
-  'settings/AboutDataSettings.tsx': ['MB', 'GitHub'],
+  'settings/AboutSettings.tsx': [],
   'settings/AccountSecuritySettings.tsx': ['AES-128', 'AES-256'],
   'settings/AccountSettings.tsx': [],
   'settings/AppearanceSettings.tsx': [],
@@ -31,12 +31,14 @@ const TRANSLATED_PANES: Record<string, string[]> = {
   'settings/LanguageSettings.tsx': [],
   'settings/LayoutSettings.tsx': [],
   'settings/NotificationSettings.tsx': [],
-  'settings/PluginsSettings.tsx': [],
+  'settings/LicencesSettings.tsx': ['GNU Affero General Public License v3.0'],
+  'settings/PrivacySettings.tsx': [],
   'settings/ReadingSettings.tsx': [],
   'settings/SidebarAppsSettings.tsx': ['https://example.com'],
-  'settings/SmimeSettings.tsx': [],
+  'settings/StorageSettings.tsx': ['MB'],
   'settings/TemplateSettings.tsx': ['JSON', '{"templates": [...]}'],
   'settings/ThemesSettings.tsx': [],
+  'settings/TroubleshootingSettings.tsx': [],
   'settings/UpdatesSettings.tsx': [],
   'settings/VacationSettings.tsx': ['YYYY-MM-DD HH:MM'],
   'settings/settings-section.tsx': [],

src/components/calendar/CalendarEditSheet.tsx

@@ -10,7 +10,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import { Check } from 'lucide-react-native';
+import { Check } from '../icons';
 import type { Calendar } from '../../api/types';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';

src/components/calendar/CalendarFab.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
-import { CalendarPlus, CircleCheck, Plus } from 'lucide-react-native';
+import { CalendarPlus, CircleCheck, Plus } from '../icons';
 import { componentSizes, radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useAnimDuration } from '../../theme/dynamic';

src/components/calendar/CalendarShareSheet.tsx

@@ -11,7 +11,7 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import { Trash2, UserPlus, Users } from 'lucide-react-native';
+import { Trash2, UserPlus, Users } from '../icons';
 import { getPrincipals, ownPrincipalId } from '../../api/files';
 import type { Calendar, CalendarRights, Principal } from '../../api/types';
 import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';

src/components/calendar/CalendarSidebarDrawer.tsx

@@ -12,9 +12,9 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import {
-  Check, X, Upload, Rss, Shuffle, Star, Plus, Pencil, Share2, Eraser, Trash2, RefreshCw,
-  type LucideIcon,
-} from 'lucide-react-native';
+  Check, X, Upload, Rss, Shuffle, Star, Plus, Pencil, Share2, Eraser, Trash2, RefreshCw, ArrowUp, ArrowDown,
+  type AppIcon,
+} from '../icons';
 import type { Calendar } from '../../api/types';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
@@ -29,7 +29,7 @@ import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
 export interface DrawerViewOption {
   key: string;
   label: string;
-  Icon: LucideIcon;
+  Icon: AppIcon;
 }
 
 interface CalendarSidebarDrawerProps {
@@ -55,6 +55,9 @@ interface CalendarSidebarDrawerProps {
   onShare?: (calendar: Calendar) => void;
   onClear?: (calendar: Calendar) => void;
   onDelete?: (calendar: Calendar) => void;
+  // Move one of the user's own calendars next to `targetId`, a neighbour in
+  // the same section (before it when moving up, after it when moving down).
+  onMove?: (calendar: Calendar, targetId: string) => void;
   // Client-side iCal subscriptions are managed from the subscriptions sheet.
   isSubscriptionCalendar?: (calendarId: string) => boolean;
 }
@@ -79,6 +82,7 @@ export function CalendarSidebarDrawer({
   onShare,
   onClear,
   onDelete,
+  onMove,
   isSubscriptionCalendar,
 }: CalendarSidebarDrawerProps) {
   const c = useColors();
@@ -148,6 +152,7 @@ export function CalendarSidebarDrawer({
     onShare,
     onClear,
     onDelete,
+    onMove,
     isSubscriptionCalendar,
   };
 
@@ -284,6 +289,7 @@ function Section({
   onShare,
   onClear,
   onDelete,
+  onMove,
   isSubscriptionCalendar,
 }: {
   title: string;
@@ -299,11 +305,14 @@ function Section({
   onShare?: (calendar: Calendar) => void;
   onClear?: (calendar: Calendar) => void;
   onDelete?: (calendar: Calendar) => void;
+  onMove?: (calendar: Calendar, targetId: string) => void;
   isSubscriptionCalendar?: (calendarId: string) => boolean;
 }) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const t = useLocaleStore((s) => s.t);
+  // Neighbours a calendar can move past: the server calendars of this section.
+  const orderable = calendars.filter((cal) => cal.id !== BIRTHDAY_CALENDAR_ID);
   return (
     <View style={styles.section}>
       <Text style={styles.sectionTitle}>{title}</Text>
@@ -320,7 +329,11 @@ function Section({
         const canClear = !!onClear && isOwn && isWritableCalendar(cal);
         // Like webmail: the default calendar and shared calendars can't be deleted.
         const canDelete = !!onDelete && isOwn && !cal.isDefault && (!cal.myRights || cal.myRights.mayDelete !== false);
-        const hasActions = canSetDefault || canRecolor || canRename || canShare || canClear || canDelete;
+        const orderIndex = orderable.indexOf(cal);
+        const previousId = isOwn && orderIndex > 0 ? orderable[orderIndex - 1].id : undefined;
+        const nextId = isOwn && orderIndex >= 0 ? orderable[orderIndex + 1]?.id : undefined;
+        const canMove = !!onMove && (!!previousId || !!nextId);
+        const hasActions = canSetDefault || canRecolor || canRename || canShare || canClear || canDelete || canMove;
         const expanded = expandedId === cal.id && hasActions;
         return (
           <View key={cal.id}>
@@ -355,6 +368,27 @@ function Section({
 
             {expanded && (
               <View style={styles.actionsPanel}>
+                {/* The panel stays open so a calendar can be moved several places. */}
+                {canMove && previousId && (
+                  <Pressable
+                    onPress={() => onMove!(cal, previousId)}
+                    style={({ pressed }) => [styles.panelRow, pressed && styles.rowPressed]}
+                    accessibilityRole="button"
+                  >
+                    <ArrowUp size={16} color={c.textSecondary} />
+                    <Text style={styles.panelRowText}>{t('settings.account.accounts.move_up', 'Move up')}</Text>
+                  </Pressable>
+                )}
+                {canMove && nextId && (
+                  <Pressable
+                    onPress={() => onMove!(cal, nextId)}
+                    style={({ pressed }) => [styles.panelRow, pressed && styles.rowPressed]}
+                    accessibilityRole="button"
+                  >
+                    <ArrowDown size={16} color={c.textSecondary} />
+                    <Text style={styles.panelRowText}>{t('settings.account.accounts.move_down', 'Move down')}</Text>
+                  </Pressable>
+                )}
                 {canSetDefault && (
                   <Pressable
                     onPress={() => { onExpand(null); onSetDefault!(cal); }}

src/components/calendar/EventCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
-import { Clock, MapPin, Users } from 'lucide-react-native';
+import { Clock, MapPin, Users } from '../icons';
 import { format } from 'date-fns';
 import type { Calendar, CalendarEvent } from '../../api/types';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';

src/components/calendar/EventDetailSheet.tsx

@@ -35,7 +35,7 @@ import {
   Users,
   Video,
   X,
-} from 'lucide-react-native';
+} from '../icons';
 import { format, type Locale } from 'date-fns';
 import type { Calendar, CalendarEvent } from '../../api/types';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';

src/components/calendar/EventModal.tsx

@@ -7,7 +7,6 @@ import {
   TextInput,
   Pressable,
   StyleSheet,
-  Switch,
   Platform,
   Alert as NativeAlert,
 } from 'react-native';
@@ -25,7 +24,7 @@ import {
   Users,
   Trash2,
   AlignLeft,
-} from 'lucide-react-native';
+} from '../icons';
 import { addHours, addMinutes, format } from 'date-fns';
 import type {
   Alert,
@@ -70,6 +69,7 @@ import { ParticipantInput } from './ParticipantInput';
 import { useContactNameResolver } from '../../lib/contact-name-resolver';
 import { RecurrenceEditor } from './RecurrenceEditor';
 import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
+import ToggleSwitch from '../ToggleSwitch';
 
 type RecurrenceOption = 'none' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'custom';
 
@@ -459,7 +459,7 @@ export function EventModal({
             value={title}
             onChangeText={setTitle}
             placeholder={t('calendar.form.title', 'Title')}
-            placeholderTextColor={c.textMuted}
+            placeholderTextColor={c.mutedForeground}
             style={styles.titleInput}
           />
 
@@ -515,12 +515,10 @@ export function EventModal({
           <Section icon={<Clock size={16} color={c.textMuted} />} label={t('calendar.form.time', 'Time')}>
             <View style={styles.allDayRow}>
               <Text style={styles.fieldText}>{t('calendar.form.all_day_event', 'All-day event')}</Text>
-              <Switch
+              <ToggleSwitch
                 value={allDay}
                 onValueChange={setAllDay}
                 accessibilityLabel={t('calendar.form.all_day_event', 'All-day event')}
-                thumbColor={allDay ? c.primary : c.textMuted}
-                trackColor={{ false: c.surface, true: c.primaryBg }}
               />
             </View>
 
@@ -673,7 +671,7 @@ export function EventModal({
                   keyboardType="number-pad"
                   style={styles.customAmountInput}
                   placeholder="30"
-                  placeholderTextColor={c.textMuted}
+                  placeholderTextColor={c.mutedForeground}
                 />
                 <View style={styles.customUnits}>
                   {(['minutes', 'hours', 'days', 'weeks'] as ReminderUnit[]).map((unit) => (
@@ -708,7 +706,7 @@ export function EventModal({
               value={location}
               onChangeText={setLocation}
               placeholder={t('calendar.form.location_placeholder', 'Place or address')}
-              placeholderTextColor={c.textMuted}
+              placeholderTextColor={c.mutedForeground}
               style={styles.fieldButton}
             />
           </Section>
@@ -718,7 +716,7 @@ export function EventModal({
               value={videoUrl}
               onChangeText={setVideoUrl}
               placeholder="https://meet.example.com/…"
-              placeholderTextColor={c.textMuted}
+              placeholderTextColor={c.mutedForeground}
               autoCapitalize="none"
               autoCorrect={false}
               keyboardType="url"
@@ -734,7 +732,7 @@ export function EventModal({
               value={description}
               onChangeText={setDescription}
               placeholder={t('calendar.form.description_placeholder', 'Notes, agenda…')}
-              placeholderTextColor={c.textMuted}
+              placeholderTextColor={c.mutedForeground}
               multiline
               style={styles.descriptionInput}
             />
@@ -756,12 +754,10 @@ export function EventModal({
                 <Text style={[styles.fieldText, { flex: 1 }]}>
                   {t('calendar.participants.send_invitations', 'Send invitations to participants')}
                 </Text>
-                <Switch
+                <ToggleSwitch
                   value={sendInvitations}
                   onValueChange={setSendInvitations}
                   accessibilityLabel={t('calendar.participants.send_invitations', 'Send invitations to participants')}
-                  thumbColor={sendInvitations ? c.primary : c.textMuted}
-                  trackColor={{ false: c.surface, true: c.primaryBg }}
                 />
               </View>
             )}
@@ -913,7 +909,7 @@ function makeStyles(c: ThemePalette) {
     borderRadius: radius.sm,
     borderWidth: 1,
     borderColor: c.border,
-    backgroundColor: c.surface,
+    backgroundColor: c.background,
     justifyContent: 'center',
   },
   fieldText: { ...typography.body, color: c.text },
@@ -930,7 +926,7 @@ function makeStyles(c: ThemePalette) {
     borderRadius: radius.sm,
     borderWidth: 1,
     borderColor: c.border,
-    backgroundColor: c.surface,
+    backgroundColor: c.background,
   },
   reminderRemove: { padding: 2 },
   customReminderRow: {
@@ -939,7 +935,7 @@ function makeStyles(c: ThemePalette) {
     borderWidth: 1,
     borderColor: c.border,
     borderRadius: radius.sm,
-    backgroundColor: c.surface,
+    backgroundColor: c.background,
   },
   customAmountInput: {
     ...typography.body,
@@ -975,7 +971,7 @@ function makeStyles(c: ThemePalette) {
     borderWidth: 1,
     borderColor: c.border,
     borderRadius: radius.sm,
-    backgroundColor: c.surface,
+    backgroundColor: c.popover,
     overflow: 'hidden',
   },
   popoverRow: {
@@ -997,7 +993,7 @@ function makeStyles(c: ThemePalette) {
     paddingHorizontal: spacing.md,
     paddingVertical: spacing.xs,
     borderRadius: radius.sm,
-    backgroundColor: c.surface,
+    backgroundColor: c.background,
     borderWidth: 1,
     borderColor: c.border,
   },
@@ -1009,7 +1005,7 @@ function makeStyles(c: ThemePalette) {
     borderRadius: radius.sm,
     borderWidth: 1,
     borderColor: c.border,
-    backgroundColor: c.surface,
+    backgroundColor: c.background,
   },
   dateLabel: { ...typography.body, color: c.textSecondary, flex: 1 },
   datePickers: { flexDirection: 'row', gap: spacing.sm },
@@ -1030,7 +1026,7 @@ function makeStyles(c: ThemePalette) {
     borderRadius: radius.sm,
     borderWidth: 1,
     borderColor: c.border,
-    backgroundColor: c.surface,
+    backgroundColor: c.background,
     color: c.text,
     ...typography.body,
     textAlignVertical: 'top',

src/components/calendar/ICalImportSheet.tsx

@@ -3,7 +3,7 @@ import {
   View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing, Alert, ActivityIndicator,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Upload, X, Check, CalendarPlus, AlertTriangle, Clock } from 'lucide-react-native';
+import { Upload, X, Check, CalendarPlus, AlertTriangle, Clock } from '../icons';
 import { format, parseISO } from 'date-fns';
 import type { Calendar, CalendarEvent } from '../../api/types';
 import { uploadBlob } from '../../api/blob';

src/components/calendar/ICalSubscriptionSheet.tsx

@@ -3,7 +3,7 @@ import {
   View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing, TextInput, ActivityIndicator, Alert,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
-import { X, Plus, RefreshCw, Trash2, Rss, AlertTriangle } from 'lucide-react-native';
+import { X, Plus, RefreshCw, Trash2, Rss, AlertTriangle } from '../icons';
 import { formatDistanceToNow } from 'date-fns';
 import Button from '../Button';
 import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';

src/components/calendar/ParticipantInput.tsx

@@ -7,7 +7,7 @@ import {
   TextInput,
   ScrollView,
 } from 'react-native';
-import { X } from 'lucide-react-native';
+import { X } from '../icons';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useContactsStore } from '../../stores/contacts-store';

src/components/calendar/RecurrenceEditor.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, TextInput, Pressable, StyleSheet, Platform } from 'react-native';
 import DateTimePicker from '@react-native-community/datetimepicker';
-import { ChevronDown } from 'lucide-react-native';
+import { ChevronDown } from '../icons';
 import { format, parseISO } from 'date-fns';
 import type { RecurrenceRule } from '../../api/types';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';

src/components/calendar/RecurrenceScopeDialog.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, View, Text, Pressable, StyleSheet } from 'react-native';
-import { Repeat, Trash2 } from 'lucide-react-native';
+import { Repeat, Trash2 } from '../icons';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useLocaleStore } from '../../stores/locale-store';

src/components/calendar/TasksSheet.tsx

@@ -24,7 +24,7 @@ import {
   Plus,
   Trash2,
   X,
-} from 'lucide-react-native';
+} from '../icons';
 import { format, isBefore, startOfDay } from 'date-fns';
 import type { Calendar, CalendarEvent } from '../../api/types';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
@@ -530,7 +530,7 @@ function makeStyles(c: ThemePalette) {
       borderRadius: radius.sm,
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.sm,
-      backgroundColor: c.surface,
+      backgroundColor: c.background,
     },
     addBtn: {
       width: 38,
@@ -552,7 +552,7 @@ function makeStyles(c: ThemePalette) {
       borderRadius: radius.sm,
       paddingHorizontal: spacing.md,
       paddingVertical: spacing.sm,
-      backgroundColor: c.surface,
+      backgroundColor: c.background,
       textAlignVertical: 'top',
     },
     editorRow: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm, flexWrap: 'wrap' },

src/components/contacts/AddressBookPickerSheet.tsx

@@ -3,7 +3,7 @@ import {
   View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing, TextInput, Alert,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { BookUser, X, Check, Plus } from 'lucide-react-native';
+import { BookUser, X, Check, Plus } from '../icons';
 import { spacing, radius, typography, componentSizes, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useSheetDrag } from '../../lib/use-sheet-drag';

src/components/contacts/ContactActivity.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ActivityIndicator, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { Mail as MailIcon, CalendarDays } from 'lucide-react-native';
+import { Mail as MailIcon, CalendarDays } from '../icons';
 import { format, isAfter, parseISO, type Locale } from 'date-fns';
 import type { ContactCard, Email, CalendarEvent } from '../../api/types';
 import type { RootStackParamList } from '../../navigation/types';

src/components/contacts/ContactImportSheet.tsx

@@ -4,7 +4,7 @@ import {
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import * as FileSystem from 'expo-file-system/legacy';
-import { Upload, X, Check, FileText, AlertTriangle, BookUser } from 'lucide-react-native';
+import { Upload, X, Check, FileText, AlertTriangle, BookUser } from '../icons';
 import type { ContactCard } from '../../api/types';
 import { parseVCard, detectDuplicates } from '../../lib/vcard';
 import { getContactDisplayName, getContactPrimaryEmail } from '../../lib/contact-utils';

src/components/contacts/ContactListRow.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable, Image } from 'react-native';
-import { Check, Users } from 'lucide-react-native';
+import { Check, Users } from '../icons';
 import type { ContactCard } from '../../api/types';
 import {
   getContactDisplayName,
@@ -136,6 +136,6 @@ function makeStyles(c: ThemePalette) {
   info: { flex: 1, minWidth: 0 },
   name: { ...typography.bodyMedium, color: c.text },
   subtitle: { ...typography.caption, color: c.textMuted, marginTop: 1 },
-  tertiary: { ...typography.small, color: c.textSecondary, marginTop: 1 },
+  tertiary: { ...typography.caption, color: c.mutedForeground, marginTop: 1 },
   });
 }

src/components/contacts/ContactPickerSheet.tsx

@@ -4,7 +4,7 @@ import {
   Animated, Dimensions, Easing,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { Search, X, Check } from 'lucide-react-native';
+import { Search, X, Check } from '../icons';
 import type { ContactCard } from '../../api/types';
 import {
   useContactsStore,

src/components/contacts/ContactsSidebarDrawer.tsx

@@ -7,7 +7,7 @@ import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import {
   X, Users, Tag, BookUser, Inbox, ChevronDown, ChevronRight, Plus, Share2, Check,
-} from 'lucide-react-native';
+} from '../icons';
 import type { RootStackParamList } from '../../navigation/types';
 import type { AddressBook } from '../../api/types';
 import type { ContactCategory } from '../../stores/contacts-store';

src/components/contacts/FieldBlock.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
-import { Plus, X } from 'lucide-react-native';
+import { Plus, X } from '../icons';
 import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useLocaleStore } from '../../stores/locale-store';

src/components/contacts/TagAssignSheet.tsx

@@ -3,7 +3,7 @@ import {
   View, Text, StyleSheet, ScrollView, Pressable, Modal, Animated, Easing, TextInput,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Tag, X, Plus } from 'lucide-react-native';
+import { Tag, X, Plus } from '../icons';
 import { spacing, radius, typography, componentSizes, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useSheetDrag } from '../../lib/use-sheet-drag';

src/components/email/ActionSheet.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable, Modal, Animated, Easing } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { X } from 'lucide-react-native';
+import { X } from '../icons';
 import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useSheetDrag } from '../../lib/use-sheet-drag';

src/components/email/AddressActionSheet.tsx

@@ -3,7 +3,7 @@ import { Alert } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import * as Clipboard from 'expo-clipboard';
-import { Copy, PenSquare, UserRound, UserRoundPlus } from 'lucide-react-native';
+import { Copy, PenSquare, UserRound, UserRoundPlus } from '../icons';
 import type { EmailAddress } from '../../api/types';
 import type { RootStackParamList } from '../../navigation/types';
 import { useContactsStore } from '../../stores/contacts-store';

src/components/email/AttachmentChips.tsx

@@ -1,23 +1,22 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable, ActivityIndicator, Alert } from 'react-native';
-import { Paperclip, Download, Eye, ExternalLink, Save, Share2, FolderArchive } from 'lucide-react-native';
-import type { File } from 'expo-file-system';
+import { Paperclip, Download, Eye, ExternalLink, Save, Share2, FolderArchive } from '../icons';
 import type { Attachment, Email } from '../../api/types';
 import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useSettingsStore } from '../../stores/settings-store';
 import { useLocaleStore } from '../../stores/locale-store';
 import {
-  shareAttachment, downloadAttachment, shareAttachmentViaSheet, fetchBlobBytes,
-  shareBytes, shareLocalFile, cachePreviewFile, writePreviewFile, discardPreviewFile,
+  shareAttachment, downloadAttachment, shareAttachmentViaSheet, fetchBlobBytes, shareBytes, attachmentSaveName,
 } from '../../lib/email-export';
 import {
-  getAttachmentDisplayName, visibleAttachments, previewKindFor, formatSize,
+  getAttachmentDisplayName, visibleAttachments, formatSize,
 } from '../../lib/attachment-display';
 import { emailExportFilename } from '../../lib/download-filename';
 import { ActionSheet, type ActionSheetItem } from './ActionSheet';
-import { AttachmentPreviewModal, type PreviewItem } from './AttachmentPreviewModal';
-import { emlPreviewFromBytes, type ExtractedAttachment } from './use-body-override';
+import { AttachmentPreviewModal } from './AttachmentPreviewModal';
+import type { ExtractedAttachment } from './use-body-override';
+import { previewKindOf, useFilePreview, type PreviewSource } from './use-file-preview';
 
 interface Props {
   email: Email;
@@ -65,24 +64,7 @@ export function AttachmentChips({ email, jmapAccountId, calendarBannerShown, tne
   const [expanded, setExpanded] = React.useState(false);
   const [busyKey, setBusyKey] = React.useState<string | null>(null);
   const [sheetItem, setSheetItem] = React.useState<Item | null>(null);
-  const [preview, setPreview] = React.useState<PreviewItem | null>(null);
-  const [previewLoading, setPreviewLoading] = React.useState(false);
-  const previewSource = React.useRef<Item | null>(null);
-  // The file the open preview shows, in a temp folder of its own: images are
-  // cached by path, so two attachments both called "image001.png" must not
-  // share one. Deleted when the preview closes, unless it went to another
-  // app, which may still be reading it; the stale-export sweep gets that one.
-  const previewFile = React.useRef<{ file: File; handedOff: boolean } | null>(null);
-  // Bumped whenever a preview ends, so a download that finishes after its
-  // preview was closed is dropped instead of reopening it.
-  const previewSeq = React.useRef(0);
-  const endPreview = React.useCallback(() => {
-    previewSeq.current += 1;
-    const open = previewFile.current;
-    previewFile.current = null;
-    if (open && !open.handedOff) discardPreviewFile(open.file);
-  }, []);
-  React.useEffect(() => endPreview, [endPreview]);
+  const preview = useFilePreview();
 
   const items = React.useMemo<Item[]>(() => {
     const blobs = visibleAttachments(email, { hideInlineImageAttachments, calendarBannerShown, tnefUnpacked })
@@ -134,49 +116,29 @@ export function AttachmentChips({ email, jmapAccountId, calendarBannerShown, tne
     else await shareBytes(item.part.bytes, item.name, item.type, { forceSheet: true });
   }, t('email_viewer.attachment_failed', 'Could not share attachment'));
 
-  const showPreview = (item: Item) => {
-    const kind = previewKindFor({ name: item.name, type: item.type });
-    if (kind === 'none') { void open(item); return; }
-    previewSource.current = item;
-    endPreview();
-    const seq = previewSeq.current;
-    const stillOpen = () => seq === previewSeq.current;
-    setPreviewLoading(true);
-    setPreview(null);
-    void (async () => {
-      try {
-        if (kind === 'text' || kind === 'eml') {
-          const bytes = item.kind === 'blob'
-            ? await fetchBlobBytes(item.att.blobId, item.att.name, item.att.type, jmapAccountId)
-            : item.part.bytes;
-          const next: PreviewItem = kind === 'eml'
-            ? { kind, name: item.name, mimeType: item.type, eml: await emlPreviewFromBytes(bytes) }
-            : { kind, name: item.name, mimeType: item.type, text: new TextDecoder('utf-8').decode(bytes) };
-          if (stillOpen()) setPreview(next);
-          return;
-        }
-        const file = item.kind === 'blob'
-          ? await cachePreviewFile(item.att.blobId, item.name, item.type, jmapAccountId)
-          : writePreviewFile(item.part.bytes, item.name, item.type);
-        if (!stillOpen()) {
-          discardPreviewFile(file);
-          return;
-        }
-        previewFile.current = { file, handedOff: false };
-        setPreview({ kind, name: item.name, mimeType: item.type, fileUri: file.uri });
-      } catch (e) {
-        if (!stillOpen()) return;
-        setPreview(null);
-        Alert.alert(t('email_viewer.attachment_failed', 'Could not open attachment'), e instanceof Error ? e.message : String(e));
-      } finally {
-        if (stillOpen()) setPreviewLoading(false);
-      }
-    })();
-  };
+  const sourceOf = (item: Item): PreviewSource => (item.kind === 'blob'
+    ? {
+      from: 'blob',
+      blobId: item.att.blobId,
+      accountId: jmapAccountId,
+      email,
+      name: item.name,
+      type: item.type,
+      size: item.size,
+      saveName: attachmentSaveName(email, item.att.name, item.att.type),
+    }
+    : { from: 'bytes', bytes: item.part.bytes, name: item.name, type: item.type, size: item.size });
+
+  // The in-app preview where the type has one, else straight to another app.
+  const showPreview = (item: Item) => run(
+    item.key,
+    () => preview.open(sourceOf(item)),
+    t('email_viewer.attachment_failed', 'Could not open attachment'),
+  );
 
   const onTap = (item: Item) => {
     if (mailAttachmentAction === 'download') void save(item);
-    else showPreview(item);
+    else void showPreview(item);
   };
 
   const downloadAll = () => run('__all__', async () => {
@@ -204,11 +166,11 @@ export function AttachmentChips({ email, jmapAccountId, calendarBannerShown, tne
 
   const visible = expanded ? items : items.slice(0, 3);
   const sheetActions: ActionSheetItem[] = sheetItem ? [
-    ...(previewKindFor({ name: sheetItem.name, type: sheetItem.type }) !== 'none' ? [{
+    ...(previewKindOf(sheetItem) !== 'none' ? [{
       key: 'preview',
       label: t('email_viewer.attachment_actions.preview', 'Preview'),
       icon: <Eye size={18} color={c.textSecondary} />,
-      onPress: () => { const it = sheetItem; setSheetItem(null); showPreview(it); },
+      onPress: () => { const it = sheetItem; setSheetItem(null); void showPreview(it); },
     }] : []),
     {
       key: 'open',
@@ -278,36 +240,7 @@ export function AttachmentChips({ email, jmapAccountId, calendarBannerShown, tne
         onClose={() => setSheetItem(null)}
       />
 
-      <AttachmentPreviewModal
-        item={preview}
-        loading={previewLoading}
-        onClose={() => {
-          endPreview();
-          setPreview(null);
-          setPreviewLoading(false);
-        }}
-        onOpenExternal={() => {
-          const it = previewSource.current;
-          if (!it) return;
-          if (preview?.fileUri && it.kind === 'blob') {
-            void run(it.key, () => shareAttachment(it.att.blobId, it.att.name, it.att.type, email, jmapAccountId), t('email_viewer.attachment_failed', 'Could not open attachment'));
-          } else {
-            void open(it);
-          }
-        }}
-        onShare={() => {
-          const it = previewSource.current;
-          if (!it) return;
-          const open = previewFile.current;
-          if (open) {
-            // The receiving app may keep reading it after the sheet closes.
-            open.handedOff = true;
-            void shareLocalFile(open.file, it.type, it.name, { forceSheet: true, keep: true }).catch(() => undefined);
-          } else {
-            void share(it);
-          }
-        }}
-      />
+      <AttachmentPreviewModal {...preview.modalProps} />
     </View>
   );
 }

src/components/email/AttachmentPreviewModal.tsx

@@ -1,29 +1,44 @@
 import React from 'react';
 import {
-  View, Text, StyleSheet, Modal, Pressable, ScrollView, Image, ActivityIndicator, Platform, useWindowDimensions,
+  View, Text, StyleSheet, Modal, Pressable, ScrollView, Image, ActivityIndicator, Platform, PixelRatio, Alert,
+  useWindowDimensions,
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { WebView } from 'react-native-webview';
-import { X, ExternalLink, Share2, Download } from 'lucide-react-native';
+import { WebView, type WebViewMessageEvent } from 'react-native-webview';
+import { X, ExternalLink, Share2, Download } from '../icons';
 import type { Email } from '../../api/types';
 import { spacing, radius, typography, componentSizes, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 import { useLocaleStore } from '../../stores/locale-store';
+import { useSettingsStore } from '../../stores/settings-store';
 import EmailBodyView from '../EmailBodyView';
-import type { PreviewKind } from '../../lib/attachment-display';
+import {
+  handoffMimeType, needsNativeImageDecoder, needsWebImageViewer, type PreviewKind,
+} from '../../lib/file-preview';
+import { pdfPageFileName, renderPdfPage } from '../../lib/pdf-pages';
+import type { ZipArchive } from '../../lib/zip-preview';
+import { formatFullDateTime } from '../../lib/email-date';
 import type { EmlPreview } from './use-body-override';
+import { useFilePreview } from './use-file-preview';
+import { ArchiveSummary, PreviewPartList, type PreviewPart } from './PreviewPartList';
 import { MODAL_ORIENTATIONS } from '../../lib/modal-orientations';
 
 export interface PreviewItem {
   kind: PreviewKind;
   name: string;
   mimeType: string;
-  /** Local file:// URI for images and PDFs. */
+  /** Local file:// URI of the downloaded copy (images, PDFs, media). */
   fileUri?: string;
+  /** The viewer page next to the file (images, video, audio, Android's PDFs); see preview-viewer-html. */
+  viewerUri?: string;
   /** Decoded text for text-like parts. */
   text?: string;
+  /** The document for HTML and Markdown files, shown through the mail sanitiser. */
+  html?: string;
   /** Parsed embedded message for .eml previews. */
   eml?: EmlPreview;
+  /** A ZIP's directory, for archive previews. */
+  archive?: ZipArchive;
   /** Replaces "No preview for this file type." on the fallback screen (e.g. the file is too large). */
   notice?: string;
 }
@@ -34,7 +49,7 @@ interface Props {
   /** Header title while the item is still loading. */
   title?: string;
   onClose: () => void;
-  /** Hand the file to an external app (PDF on Android, unsupported types, the header's Open button). */
+  /** Hand the file to another app (types without a preview, the header's Open button). */
   onOpenExternal: () => void;
   onShare: () => void;
   /** Save a copy; adds a Download button to the header. */
@@ -43,11 +58,93 @@ interface Props {
   docked?: boolean;
 }
 
+interface ViewerWebViewProps {
+  uri: string;
+  background: string;
+  onFailed: () => void;
+  /** Messages other than 'error'. */
+  onMessage?: (data: string) => void;
+  webRef?: React.Ref<WebView>;
+}
+
 /**
- * In-app preview for images, PDFs (iOS renders them in the WebView; Android
- * has no built-in PDF renderer, so it offers the external viewer), text and
- * embedded messages. Anything else goes to the external viewer / share sheet.
- * Used by the reader's attachment chips and the Files tab.
+ * A local page in a WebView that may read only its own folder: the image,
+ * media and PDF viewers. It posts 'error' when the file doesn't decode.
+ */
+function ViewerWebView({ uri, background, onFailed, onMessage, webRef }: ViewerWebViewProps) {
+  const folder = uri.slice(0, uri.lastIndexOf('/') + 1);
+  const handleMessage = (e: WebViewMessageEvent) => {
+    if (e.nativeEvent.data === 'error') onFailed();
+    else onMessage?.(e.nativeEvent.data);
+  };
+  return (
+    <WebView
+      ref={webRef}
+      source={{ uri }}
+      originWhitelist={['file://*']}
+      allowFileAccess
+      allowingReadAccessToURL={folder}
+      javaScriptEnabled
+      domStorageEnabled={false}
+      cacheEnabled={false}
+      incognito
+      allowsInlineMediaPlayback
+      mediaPlaybackRequiresUserAction={false}
+      allowsFullscreenVideo
+      allowsPictureInPictureMediaPlayback
+      allowsAirPlayForMediaPlayback
+      setSupportMultipleWindows={false}
+      setBuiltInZoomControls
+      setDisplayZoomControls={false}
+      overScrollMode="never"
+      bounces={false}
+      onShouldStartLoadWithRequest={(req) => req.url === uri}
+      onMessage={handleMessage}
+      onError={onFailed}
+      style={[viewerStyles.fill, { backgroundColor: background }]}
+      containerStyle={{ backgroundColor: background }}
+    />
+  );
+}
+
+// Pages are rendered half again as wide as the screen's pixels, so text stays
+// sharp at the first zoom step; PdfRenderer's bitmap is capped natively.
+const PDF_PAGE_OVERSAMPLE = 1.5;
+
+/**
+ * Android's PDF view: the viewer page asks for each page as it comes near
+ * the screen, and the page is rendered next to it by the platform's
+ * PdfRenderer (pdf-pages.ts).
+ */
+function PdfPagesView({ fileUri, viewerUri, background, onFailed }: {
+  fileUri: string;
+  viewerUri: string;
+  background: string;
+  onFailed: () => void;
+}) {
+  const ref = React.useRef<WebView>(null);
+  const { width } = useWindowDimensions();
+  const pagePx = PixelRatio.getPixelSizeForLayoutSize(Math.min(width, 1000)) * PDF_PAGE_OVERSAMPLE;
+  const folder = viewerUri.slice(0, viewerUri.lastIndexOf('/') + 1);
+  const onMessage = (data: string) => {
+    const m = /^page:(\d+)$/.exec(data);
+    if (!m) return;
+    const index = Number(m[1]);
+    const name = pdfPageFileName(index);
+    renderPdfPage(fileUri, index, pagePx, folder + name)
+      .then(() => ref.current?.injectJavaScript(`window.__pdfPage(${index}, ${JSON.stringify(name)});true;`))
+      .catch(() => undefined);
+  };
+  return <ViewerWebView webRef={ref} uri={viewerUri} background={background} onFailed={onFailed} onMessage={onMessage} />;
+}
+
+/**
+ * In-app preview for images, PDFs (iOS's WebView shows them, Android renders the pages), video
+ * and audio (the WebView's player), text, Markdown and HTML documents,
+ * embedded messages and ZIP archives. The files inside an archive or a
+ * message open in a preview of their own on top. Files that don't decode,
+ * and types without a preview, offer another app instead. Used by every
+ * place that opens a file.
  */
 export function AttachmentPreviewModal({
   item, loading, title, onClose, onOpenExternal, onShare, onDownload, docked = false,
@@ -55,32 +152,88 @@ export function AttachmentPreviewModal({
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const t = useLocaleStore((s) => s.t);
+  const locale = useLocaleStore((s) => s.locale);
+  const timeFormat = useSettingsStore((s) => s.timeFormat);
   const { width } = useWindowDimensions();
-  // An image the platform can't decode would stay blank; fall back to the
-  // external viewer instead. Keyed by URI so the next item starts clean.
-  const [failedImageUri, setFailedImageUri] = React.useState<string | null>(null);
+  // Files inside this one (archive entries, an .eml's attachments).
+  const nested = useFilePreview();
+  const { open: openNested } = nested;
+  const openPart = React.useCallback(async (part: PreviewPart) => {
+    try {
+      const bytes = await part.read();
+      await openNested({
+        from: 'bytes',
+        bytes,
+        name: part.name,
+        type: part.type || handoffMimeType(part.name, ''),
+        size: bytes.byteLength,
+      });
+    } catch (e) {
+      Alert.alert(t('email_viewer.attachment_failed', 'Could not open attachment'), e instanceof Error ? e.message : String(e));
+    }
+  }, [openNested, t]);
+  const archive = item?.kind === 'archive' ? item.archive : undefined;
+  const archiveParts = React.useMemo<PreviewPart[]>(() => {
+    if (!archive) return [];
+    return archive.entries.map((entry) => ({
+      key: entry.path,
+      name: entry.name,
+      folder: entry.folder,
+      size: entry.size,
+      read: () => archive.read(entry.path),
+    }));
+  }, [archive]);
+  const emlAttachments = item?.kind === 'eml' ? item.eml?.attachments : undefined;
+  const emlParts = React.useMemo<PreviewPart[]>(() => (emlAttachments ?? []).map((att, i) => ({
+    key: `${i}-${att.name}`,
+    name: att.name,
+    type: att.type,
+    size: att.size,
+    read: async () => att.bytes,
+  })), [emlAttachments]);
+  // Which viewers failed for the open file, keyed by its URI so the next one
+  // starts clean: React Native's Image falls back to the WebView viewer, and
+  // a WebView that can't decode the file falls back to another app.
+  const [failed, setFailed] = React.useState<{ uri: string; native?: boolean; web?: boolean } | null>(null);
+  const markFailed = React.useCallback((uri: string | undefined, which: 'native' | 'web') => {
+    if (!uri) return;
+    setFailed((prev) => ({ ...(prev?.uri === uri ? prev : {}), uri, [which]: true }));
+  }, []);
   // The image fits the area it is shown in (a pane, a landscape window),
   // not a box derived from the window width that ran past the screen.
   const [imageArea, setImageArea] = React.useState<{ width: number; height: number } | null>(null);
 
-  const emlEmail = React.useMemo<Email | null>(() => {
-    if (!item?.eml) return null;
+  const docEmail = React.useMemo<Email | null>(() => {
+    if (!item || (!item.eml && item.html == null)) return null;
     return {
-      id: `eml-preview-${item.name}`,
+      id: `file-preview-${item.kind}-${item.fileUri ?? item.name}`,
       threadId: '',
       mailboxIds: {},
       keywords: {},
       size: 0,
-      receivedAt: item.eml.date ?? new Date().toISOString(),
+      receivedAt: item.eml?.date ?? new Date().toISOString(),
       hasAttachment: false,
-      subject: item.eml.subject,
+      subject: item.eml?.subject ?? item.name,
     };
   }, [item]);
 
-  const imageFailed = item?.kind === 'image' && !!item.fileUri && failedImageUri === item.fileUri;
-  const pdfInline = item?.kind === 'pdf' && Platform.OS === 'ios' && !!item.fileUri;
+  const failure = item?.fileUri && failed?.uri === item.fileUri ? failed : null;
+  // Android's WebView zooms; React Native's Image there doesn't. iOS zooms
+  // the native image in its ScrollView. Each side's gaps go to the other.
+  const imageInWeb = item?.kind === 'image' && !!item.viewerUri && !failure?.web && (
+    failure?.native
+    || (Platform.OS === 'android' ? !needsNativeImageDecoder(item) : needsWebImageViewer(item))
+  );
+  const imageFailed = item?.kind === 'image' && (
+    !!failure?.web && (!!failure.native || !item.viewerUri || needsWebImageViewer(item))
+    || (!!failure?.native && !item.viewerUri)
+  );
+  const mediaFailed = (item?.kind === 'video' || item?.kind === 'audio') && !!failure?.web;
+  const pdfInline = item?.kind === 'pdf' && !!item.fileUri && (Platform.OS === 'ios' || !!item.viewerUri) && !failure?.web;
   // The fallback screen has its own Open button; the header adds one elsewhere.
-  const showsFallback = !!item && (item.kind === 'none' || (item.kind === 'pdf' && !pdfInline) || imageFailed);
+  const showsFallback = !!item && (
+    item.kind === 'none' || (item.kind === 'pdf' && !pdfInline) || imageFailed || mediaFailed
+  );
 
   const renderFallback = (message: string) => (
     <View style={styles.centered}>
@@ -92,6 +245,14 @@ export function AttachmentPreviewModal({
     </View>
   );
 
+  const renderDocument = (header?: React.ReactNode, footer?: React.ReactNode) => (
+    <ScrollView style={styles.flex}>
+      {header}
+      {docEmail && <EmailBodyView email={docEmail} bodyOverride={{ html: item?.html ?? item?.eml?.html, text: item?.eml?.text }} />}
+      {footer}
+    </ScrollView>
+  );
+
   const renderBody = () => {
     if (loading || !item) {
       return (
@@ -105,6 +266,16 @@ export function AttachmentPreviewModal({
         if (imageFailed) {
           return renderFallback(t('email_viewer.preview.unsupported', 'No preview for this file type.'));
         }
+        if (imageInWeb && item.viewerUri) {
+          return (
+            <ViewerWebView
+              key={item.viewerUri}
+              uri={item.viewerUri}
+              background={c.background}
+              onFailed={() => markFailed(item.fileUri, 'web')}
+            />
+          );
+        }
         return (
           <ScrollView
             style={styles.flex}
@@ -124,11 +295,35 @@ export function AttachmentPreviewModal({
                 : { width: width - spacing.lg * 2, height: width * 1.2 }}
               resizeMode="contain"
               accessibilityLabel={item.name}
-              onError={() => setFailedImageUri(item.fileUri ?? null)}
+              onError={() => markFailed(item.fileUri, 'native')}
             />
           </ScrollView>
         );
+      case 'video':
+      case 'audio':
+        if (mediaFailed || !item.viewerUri) {
+          return renderFallback(t('email_viewer.preview.media_unsupported', "This file can't be played here."));
+        }
+        return (
+          <ViewerWebView
+            key={item.viewerUri}
+            uri={item.viewerUri}
+            background={item.kind === 'video' ? '#000' : c.background}
+            onFailed={() => markFailed(item.fileUri, 'web')}
+          />
+        );
       case 'pdf':
+        if (pdfInline && item.fileUri && item.viewerUri) {
+          return (
+            <PdfPagesView
+              key={item.viewerUri}
+              fileUri={item.fileUri}
+              viewerUri={item.viewerUri}
+              background={c.surface}
+              onFailed={() => markFailed(item.fileUri, 'web')}
+            />
+          );
+        }
         if (pdfInline && item.fileUri) {
           return (
             <WebView
@@ -143,32 +338,45 @@ export function AttachmentPreviewModal({
             />
           );
         }
-        return renderFallback(t('email_viewer.preview.pdf_external', 'PDFs open in your PDF viewer on this device.'));
+        return renderFallback(t('email_viewer.preview.pdf_unreadable', "This PDF can't be shown here."));
       case 'text':
         return (
           <ScrollView style={styles.flex} contentContainerStyle={styles.textScroll}>
             <Text selectable style={styles.text}>{item.text ?? ''}</Text>
           </ScrollView>
         );
+      case 'html':
+      case 'markdown':
+        return renderDocument();
       case 'eml':
+        return renderDocument(
+          <View style={styles.emlHeader}>
+            <Text style={styles.emlSubject}>{item.eml?.subject || t('email_viewer.no_subject', '(No Subject)')}</Text>
+            {item.eml?.from ? <Text style={styles.emlMeta}>{item.eml.from}</Text> : null}
+            {item.eml?.date ? <Text style={styles.emlMeta}>{formatFullDateTime(item.eml.date, timeFormat, locale) || item.eml.date}</Text> : null}
+          </View>,
+          emlParts.length > 0 ? (
+            <PreviewPartList
+              inline
+              parts={emlParts}
+              onOpen={openPart}
+              header={<ArchiveSummary count={emlParts.length} truncated={false} />}
+            />
+          ) : null,
+        );
+      case 'archive':
+        if (!item.archive) break;
         return (
-          <ScrollView style={styles.flex}>
-            <View style={styles.emlHeader}>
-              <Text style={styles.emlSubject}>{item.eml?.subject || t('email_viewer.no_subject', '(No Subject)')}</Text>
-              {item.eml?.from ? <Text style={styles.emlMeta}>{item.eml.from}</Text> : null}
-              {item.eml?.date ? <Text style={styles.emlMeta}>{item.eml.date}</Text> : null}
-            </View>
-            {emlEmail && (
-              <EmailBodyView
-                email={emlEmail}
-                bodyOverride={{ html: item.eml?.html, text: item.eml?.text }}
-              />
-            )}
-          </ScrollView>
+          <PreviewPartList
+            parts={archiveParts}
+            onOpen={openPart}
+            header={<ArchiveSummary count={archiveParts.length} truncated={item.archive.truncated} />}
+          />
         );
       default:
-        return renderFallback(item.notice ?? t('email_viewer.preview.unsupported', 'No preview for this file type.'));
+        break;
     }
+    return renderFallback(item.notice ?? t('email_viewer.preview.unsupported', 'No preview for this file type.'));
   };
 
   const content = (
@@ -219,6 +427,7 @@ export function AttachmentPreviewModal({
           </Pressable>
         </View>
         {renderBody()}
+        {nested.modalProps.item || nested.modalProps.loading ? <AttachmentPreviewModal {...nested.modalProps} /> : null}
       </SafeAreaView>
   );
   if (docked) return item || loading ? content : null;
@@ -229,6 +438,8 @@ export function AttachmentPreviewModal({
   );
 }
 
+const viewerStyles = StyleSheet.create({ fill: { flex: 1 } });
+
 function makeStyles(c: ThemePalette) {
   return StyleSheet.create({
     container: { flex: 1, backgroundColor: c.background },

src/components/email/CalendarInvitationBanner.tsx

@@ -4,7 +4,7 @@ import { openExternalUrl } from '../../lib/open-url';
 import {
   CalendarPlus, Check, HelpCircle, X, MapPin, Video, Clock, CalendarDays, AlertTriangle,
   ShieldCheck, ShieldAlert, ChevronDown,
-} from 'lucide-react-native';
+} from '../icons';
 import { format, parseISO } from 'date-fns';
 import type { Calendar, Email, CalendarEvent } from '../../api/types';
 import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';

src/components/email/ListAttachmentChips.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alert, Pressable, StyleSheet, Text, View } from 'react-native';
-import { File as FileIcon, FileArchive, FileImage, FileSpreadsheet, FileText } from 'lucide-react-native';
+import { File as FileIcon, FileArchive, FileImage, FileSpreadsheet, FileText } from '../icons';
 import type { Attachment, Email, Mailbox } from '../../api/types';
 import { getEmailAttachments } from '../../api/email';
 import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
@@ -15,9 +15,10 @@ import {
   attachmentKind, realAttachments, requestListAttachments, shortAttachmentName,
   type AttachmentKind, type LoadListAttachments,
 } from '../../lib/list-attachments';
-import { getAttachmentDisplayName, previewKindFor } from '../../lib/attachment-display';
-import { cacheBlobFile, downloadAttachment, fetchBlobBytes, shareAttachment, shareLocalFile } from '../../lib/email-export';
-import { AttachmentPreviewModal, type PreviewItem } from './AttachmentPreviewModal';
+import { getAttachmentDisplayName } from '../../lib/attachment-display';
+import { attachmentSaveName, downloadAttachment } from '../../lib/email-export';
+import { AttachmentPreviewModal } from './AttachmentPreviewModal';
+import { useFilePreview } from './use-file-preview';
 
 /** How many chips a row shows before collapsing the rest into a count. */
 const MAX_CHIPS = 2;
@@ -124,26 +125,16 @@ export interface ListAttachmentOpenerHandle {
   open: (email: Email, attachment: Attachment, accountId?: string) => void;
 }
 
-interface OpenTarget {
-  email: Email;
-  attachment: Attachment;
-  accountId?: string;
-  name: string;
-  type: string;
-}
-
 /**
  * Opens a list-row attachment the way the reader's chips do: the "attachment
- * click action" setting either saves it or previews it in-app (images, PDFs,
- * text), and anything that can't be previewed goes to the platform viewer.
- * Holds the preview modal, so the list itself never re-renders for it.
+ * click action" setting either saves it or previews it in-app, and anything
+ * that can't be previewed goes to another app. Holds the preview modal, so
+ * the list itself never re-renders for it.
  */
 export const ListAttachmentOpener = React.forwardRef<ListAttachmentOpenerHandle>(
   function ListAttachmentOpener(_props, ref) {
     const t = useLocaleStore((s) => s.t);
-    const [preview, setPreview] = React.useState<PreviewItem | null>(null);
-    const [loading, setLoading] = React.useState(false);
-    const target = React.useRef<OpenTarget | null>(null);
+    const preview = useFilePreview();
     const busy = React.useRef(false);
 
     const run = React.useCallback(async (fn: () => Promise<void>) => {
@@ -161,59 +152,27 @@ export const ListAttachmentOpener = React.forwardRef<ListAttachmentOpenerHandle>
       }
     }, [t]);
 
-    const openExternal = React.useCallback((it: OpenTarget) => run(
-      () => shareAttachment(it.attachment.blobId, it.attachment.name, it.attachment.type, it.email, it.accountId),
-    ), [run]);
-
+    const { open: openPreview } = preview;
     React.useImperativeHandle(ref, () => ({
       open: (email, attachment, accountId) => {
-        if (busy.current) return;
-        const name = getAttachmentDisplayName(attachment.name, attachment.type);
-        const type = attachment.type || 'application/octet-stream';
-        const it: OpenTarget = { email, attachment, accountId, name, type };
-        target.current = it;
-
         if (useSettingsStore.getState().mailAttachmentAction === 'download') {
           void run(() => downloadAttachment(attachment.blobId, attachment.name, attachment.type, email, accountId));
           return;
         }
-        const kind = previewKindFor({ name, type });
-        if (kind !== 'image' && kind !== 'pdf' && kind !== 'text') {
-          void openExternal(it);
-          return;
-        }
-        setPreview(null);
-        setLoading(true);
-        void run(async () => {
-          try {
-            if (kind === 'text') {
-              const bytes = await fetchBlobBytes(attachment.blobId, attachment.name, attachment.type, accountId);
-              setPreview({ kind, name, mimeType: type, text: new TextDecoder('utf-8').decode(bytes) });
-            } else {
-              const file = await cacheBlobFile(attachment.blobId, name, type, accountId);
-              setPreview({ kind, name, mimeType: type, fileUri: file.uri });
-            }
-          } finally {
-            setLoading(false);
-          }
-        });
+        void run(() => openPreview({
+          from: 'blob',
+          blobId: attachment.blobId,
+          accountId,
+          email,
+          name: getAttachmentDisplayName(attachment.name, attachment.type),
+          type: attachment.type || 'application/octet-stream',
+          size: attachment.size,
+          saveName: attachmentSaveName(email, attachment.name, attachment.type),
+        }));
       },
-    }), [run, openExternal]);
+    }), [run, openPreview]);
 
-    return (
-      <AttachmentPreviewModal
-        item={preview}
-        loading={loading}
-        onClose={() => { setPreview(null); setLoading(false); }}
-        onOpenExternal={() => { if (target.current) void openExternal(target.current); }}
-        onShare={() => {
-          const it = target.current;
-          if (!it || !preview?.fileUri) return;
-          const { File } = require('expo-file-system') as typeof import('expo-file-system');
-          void shareLocalFile(new File(preview.fileUri), it.type, it.name, { forceSheet: true }).catch(() => undefined);
-        }}
-      />
-    );
+    return <AttachmentPreviewModal {...preview.modalProps} />;
   },
 );
 

src/components/email/MessageHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
 import {
   Star, ChevronDown, ChevronUp, Reply, Forward, ShieldCheck, ShieldAlert, ShieldQuestion, Lock,
-} from 'lucide-react-native';
+} from '../icons';
 import type { Email, EmailAddress, Identity } from '../../api/types';
 import { spacing, radius, typography, componentSizes, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';

src/components/email/PreviewPartList.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { ActivityIndicator, FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
+import {
+  File as FileIcon, FileArchive, FileAudio, FileImage, FileSpreadsheet, FileText, FileVideo,
+} from '../icons';
+import { formatSize } from '../../lib/attachment-display';
+import { filePreviewKind, handoffMimeType } from '../../lib/file-preview';
+import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
+import { useColors } from '../../theme/colors';
+import { useLocaleStore } from '../../stores/locale-store';
+
+/** A file inside a file: an archive entry or an attachment of an .eml. */
+export interface PreviewPart {
+  key: string;
+  name: string;
+  /** Folder inside an archive, '' at the top. */
+  folder?: string;
+  type?: string;
+  size?: number;
+  read: () => Promise<Uint8Array>;
+}
+
+function iconFor(part: PreviewPart) {
+  const type = part.type || handoffMimeType(part.name, '');
+  if (/\.(xlsx?|ods|csv|tsv|numbers)$/i.test(part.name)) return FileSpreadsheet;
+  if (/\.(zip|7z|rar|gz|tgz|tar|bz2|xz)$/i.test(part.name)) return FileArchive;
+  // Platform-independent: the icon names the format, not what plays here.
+  switch (filePreviewKind({ name: part.name, type }, { platform: 'android' })) {
+    case 'image': return FileImage;
+    case 'video': return FileVideo;
+    case 'audio': return FileAudio;
+    case 'none': return /^(application\/(msword|vnd\.|rtf)|text\/)/.test(type) ? FileText : FileIcon;
+    default: return FileText;
+  }
+}
+
+interface Props {
+  parts: PreviewPart[];
+  /** Opens a part; the row shows a spinner until the promise settles. */
+  onOpen: (part: PreviewPart) => Promise<void>;
+  /** Above the rows (an .eml's body, an archive's summary). */
+  header?: React.ReactElement;
+  /** Renders as a plain column inside a parent ScrollView instead of a list of its own. */
+  inline?: boolean;
+}
+
+/**
+ * The files inside an archive or an embedded message, each opening in the
+ * file preview like any attachment.
+ */
+export function PreviewPartList({ parts, onOpen, header, inline = false }: Props) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const [busy, setBusy] = React.useState<string | null>(null);
+
+  const open = (part: PreviewPart) => {
+    if (busy) return;
+    setBusy(part.key);
+    onOpen(part).finally(() => setBusy(null));
+  };
+
+  const renderRow = (part: PreviewPart) => {
+    const Icon = iconFor(part);
+    return (
+      <Pressable
+        key={part.key}
+        style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+        onPress={() => open(part)}
+        disabled={!!busy}
+        accessibilityRole="button"
+        accessibilityLabel={part.name}
+      >
+        <View style={styles.icon}>
+          {busy === part.key ? <ActivityIndicator size="small" color={c.textMuted} /> : <Icon size={20} color={c.textMuted} />}
+        </View>
+        <View style={styles.text}>
+          <Text style={styles.name} numberOfLines={1}>{part.name}</Text>
+          {part.folder ? <Text style={styles.folder} numberOfLines={1}>{part.folder}</Text> : null}
+        </View>
+        {part.size != null ? <Text style={styles.size}>{formatSize(part.size) || '0 B'}</Text> : null}
+      </Pressable>
+    );
+  };
+
+  if (inline) {
+    return (
+      <View style={styles.inline}>
+        {header}
+        {parts.map(renderRow)}
+      </View>
+    );
+  }
+  return (
+    <FlatList
+      style={styles.list}
+      data={parts}
+      keyExtractor={(p) => p.key}
+      renderItem={({ item }) => renderRow(item)}
+      ListHeaderComponent={header}
+      initialNumToRender={30}
+    />
+  );
+}
+
+/** The summary line above an archive's entries. */
+export function ArchiveSummary({ count, truncated }: { count: number; truncated: boolean }) {
+  const c = useColors();
+  const styles = React.useMemo(() => makeStyles(c), [c]);
+  const t = useLocaleStore((s) => s.t);
+  return (
+    <Text style={styles.summary}>
+      {truncated
+        ? t('email_viewer.preview.archive_first_files', 'The first {count} files', { count })
+        : t('email_viewer.preview.archive_files', '{count, plural, one {# file} other {# files}}', { count })}
+    </Text>
+  );
+}
+
+function makeStyles(c: ThemePalette) {
+  return StyleSheet.create({
+    list: { flex: 1 },
+    inline: { paddingBottom: spacing.lg },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: spacing.md,
+      paddingHorizontal: spacing.lg,
+      paddingVertical: spacing.sm,
+      minHeight: 52,
+    },
+    rowPressed: { backgroundColor: c.surfaceHover },
+    icon: {
+      width: 36,
+      height: 36,
+      borderRadius: radius.md,
+      backgroundColor: c.surface,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    text: { flex: 1, minWidth: 0 },
+    name: { ...typography.body, color: c.text },
+    folder: { ...typography.caption, color: c.textMuted },
+    size: { ...typography.caption, color: c.textMuted },
+    summary: {
+      ...typography.caption,
+      color: c.textMuted,
+      paddingHorizontal: spacing.lg,
+      paddingTop: spacing.md,
+      paddingBottom: spacing.xs,
+    },
+  });
+}

src/components/email/QuickReplyBox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, TextInput, Pressable, ActivityIndicator, Alert, Keyboard } from 'react-native';
-import { Send, Maximize2 } from 'lucide-react-native';
+import { Send, Maximize2 } from '../icons';
 import type { Email } from '../../api/types';
 import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
@@ -155,7 +155,7 @@ export function QuickReplyBox({ email, jmapAccountId, onMoreOptions, onSent, onF
         onFocus={onFocus}
         onBlur={onBlur}
         placeholder={t('email_viewer.quick_reply_placeholder', 'Write a quick reply...')}
-        placeholderTextColor={c.textMuted}
+        placeholderTextColor={c.mutedForeground}
         style={styles.input}
         multiline
         editable={!sending}
@@ -189,7 +189,7 @@ function makeStyles(c: ThemePalette) {
       borderWidth: 1,
       borderColor: c.border,
       borderRadius: radius.md,
-      backgroundColor: c.surface,
+      backgroundColor: c.background,
       padding: spacing.sm,
       gap: spacing.sm,
     },
@@ -211,10 +211,10 @@ function makeStyles(c: ThemePalette) {
       gap: spacing.xs,
       backgroundColor: c.primary,
       paddingHorizontal: spacing.md,
-      paddingVertical: 6,
-      borderRadius: radius.full,
+      minHeight: 36,
+      borderRadius: radius.sm,
     },
     sendDisabled: { opacity: 0.5 },
-    sendText: { ...typography.caption, color: c.primaryForeground, fontWeight: '600' },
+    sendText: { ...typography.bodyMedium, color: c.primaryForeground },
   });
 }

src/components/email/ReadReceiptBanner.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable, ActivityIndicator, Alert } from 'react-native';
-import { MailCheck } from 'lucide-react-native';
+import { MailCheck } from '../icons';
 import type { Email } from '../../api/types';
 import { spacing, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';

src/components/email/ThreadMessageCard.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, Text, StyleSheet, Pressable } from 'react-native';
-import { Paperclip, Reply, ReplyAll, Forward, Star } from 'lucide-react-native';
+import { Paperclip, Reply, ReplyAll, Forward, Star } from '../icons';
 import type { Email } from '../../api/types';
 import { spacing, radius, typography, componentSizes, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
@@ -74,16 +74,16 @@ export function ThreadMessageCard({
       <MessageContent {...content} compact={false} onToggleStar={bare ? undefined : onToggleStar} />
       {!bare && (
         <View style={[styles.actions, !replyable && styles.actionsDisabled]}>
-          <Pressable style={styles.actionBtn} onPress={reply('reply')} hitSlop={9}>
-            <Reply size={16} color={c.textSecondary} />
+          <Pressable style={styles.actionBtn} onPress={reply('reply')} hitSlop={6}>
+            <Reply size={16} color={c.text} />
             <Text style={styles.actionLabel}>{t('email_viewer.reply', 'Reply')}</Text>
           </Pressable>
-          <Pressable style={styles.actionBtn} onPress={reply('replyAll')} hitSlop={9}>
-            <ReplyAll size={16} color={c.textSecondary} />
+          <Pressable style={styles.actionBtn} onPress={reply('replyAll')} hitSlop={6}>
+            <ReplyAll size={16} color={c.text} />
             <Text style={styles.actionLabel}>{t('email_viewer.reply_all', 'Reply All')}</Text>
           </Pressable>
-          <Pressable style={styles.actionBtn} onPress={reply('forward')} hitSlop={9}>
-            <Forward size={16} color={c.textSecondary} />
+          <Pressable style={styles.actionBtn} onPress={reply('forward')} hitSlop={6}>
+            <Forward size={16} color={c.text} />
             <Text style={styles.actionLabel}>{t('email_viewer.forward', 'Forward')}</Text>
           </Pressable>
         </View>
@@ -159,13 +159,14 @@ function makeStyles(c: ThemePalette) {
       flexDirection: 'row',
       alignItems: 'center',
       gap: spacing.xs,
+      // Webmail thread card: outline buttons, h-9, rounded-md.
       paddingHorizontal: spacing.md,
-      paddingVertical: 6,
-      borderRadius: radius.full,
+      minHeight: 36,
+      borderRadius: radius.sm,
       borderWidth: 1,
       borderColor: c.border,
-      backgroundColor: c.surface,
+      backgroundColor: 'transparent',
     },
-    actionLabel: { ...typography.caption, color: c.textSecondary },
+    actionLabel: { ...typography.bodyMedium, color: c.text },
   });
 }

src/components/email/UnsubscribeBanner.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, Text, StyleSheet, Pressable, ActivityIndicator, Alert } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import * as WebBrowser from 'expo-web-browser';
-import { MailMinus, CheckCircle2, AlertCircle, X } from 'lucide-react-native';
+import { MailMinus, CheckCircle2, AlertCircle, X } from '../icons';
 import type { Email } from '../../api/types';
 import { spacing, radius, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';

src/components/email/use-body-override.ts

@@ -60,16 +60,18 @@ export interface EmlPreview {
   date?: string;
   html: string | null;
   text: string | null;
+  /** The message's own attachments (not the images its body embeds). */
+  attachments: ExtractedAttachment[];
 }
 
 /** Parse a message once for the preview: its unwrapped body plus the header lines shown above it. */
 export async function emlPreviewFromBytes(bytes: Uint8Array): Promise<EmlPreview> {
   const parsed = await parseMessage(bytes);
-  const { html, text } = unwrapParsed(parsed);
+  const { html, text, attachments } = unwrapParsed(parsed);
   const from = parsed.from && 'address' in parsed.from
     ? `${parsed.from.name ? `${parsed.from.name} ` : ''}<${parsed.from.address}>`
     : parsed.from?.name;
-  return { subject: parsed.subject, from, date: parsed.date, html, text };
+  return { subject: parsed.subject, from, date: parsed.date, html, text, attachments };
 }
 
 function unwrapParsed(parsed: ParsedEmail): UnwrappedMessage {