chore: update version number to 0.1.42

VERSION

@@ -1 +1 @@
-0.1.40
+0.1.42

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "bulwark-mobile",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "bulwark-mobile",
-      "version": "0.1.40",
+      "version": "0.1.42",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@react-native-async-storage/async-storage": "2.2.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bulwark-mobile",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "license": "AGPL-3.0-only",
   "main": "index.ts",
   "scripts": {

src/components/EmailBodyView.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, Linking, Platform, Text, Pressable } from 'react-nati
 import { WebView, type WebViewMessageEvent } from 'react-native-webview';
 import { Image as ImageIcon, ShieldCheck } from 'lucide-react-native';
 import type { Email } from '../api/types';
-import { wrapEmailHtml, wrapPlainTextEmail, plainTextToSafeHtml, extractCidRefs, hasRemoteContent, hasMeaningfulHtmlBody } from '../lib/email-html';
+import { wrapEmailHtml, wrapPlainTextEmail, plainTextToSafeHtml, extractCidRefs, hasRemoteContent, hasMeaningfulHtmlBody, hasNativeDarkMode } from '../lib/email-html';
 import { jmapClient } from '../api/jmap-client';
 import { useSettingsStore } from '../stores/settings-store';
 import { useContactsStore } from '../stores/contacts-store';
@@ -45,29 +45,164 @@ function extractTextBody(email: Email): string | null {
   return null;
 }
 
+// Dark-mode re-inversion, mirroring the webmail's handleIframeLoad pass. The
+// body's `filter: invert(1)` flips colored emoji (yellow smiley -> blue, red
+// heart -> cyan) and stylesheet-defined background images, which the static CSS
+// attribute selectors can't reach. This walks the DOM once and wraps/re-inverts
+// those so they keep their original colors. Only injected when inversion is on.
+const DARK_REINVERT_SCRIPT = `
+(function () {
+  if (document.__rnDarkInvertDone) return;
+  var doc = document;
+  var win = window;
+  if (!doc.body) return;
+  document.__rnDarkInvertDone = true;
+
+  // Re-invert elements with stylesheet-defined background images (CSS attribute
+  // selectors only catch inline styles, not rules that survive in <style>).
+  doc.body.querySelectorAll('*').forEach(function (el) {
+    // Skip elements already handled by CSS attribute selectors.
+    if (el.style.backgroundImage || el.style.background ||
+        el.hasAttribute('background') || el.hasAttribute('bgcolor')) return;
+    // Skip leaf media elements (already re-inverted by CSS).
+    var tag = el.tagName;
+    if (['IMG','VIDEO','SVG','CANVAS','OBJECT','EMBED'].indexOf(tag) !== -1) return;
+    var computed = win.getComputedStyle(el);
+    if (computed.backgroundImage && computed.backgroundImage !== 'none') {
+      // Only re-invert if this container doesn't have media children.
+      if (!el.querySelector('img, video, svg, canvas, object, embed')) {
+        el.style.filter = 'invert(1) hue-rotate(180deg)';
+      }
+    }
+  });
+
+  // Re-invert emoji glyphs so they keep their original colors. Wrap each emoji
+  // run in a span that re-inverts. Only act when the ancestor invert depth is
+  // odd - emojis inside a double-inverted bgcolor container already render at
+  // their original colors.
+  var emojiRe;
+  try {
+    emojiRe = new RegExp('\\\\p{RGI_Emoji}', 'gv');
+  } catch (e) {
+    emojiRe = /\\p{Extended_Pictographic}(?:\\uFE0F)?(?:\\u200D\\p{Extended_Pictographic}(?:\\uFE0F)?)*/gu;
+  }
+  var emojiTestRe = /\\p{Extended_Pictographic}/u;
+  var SKIP_TAGS = { SCRIPT: 1, STYLE: 1, NOSCRIPT: 1, TEXTAREA: 1, IFRAME: 1 };
+
+  function isOddInvertDepth(start) {
+    var count = 0;
+    var n = start;
+    while (n) {
+      if (n === doc.body) { count++; break; }
+      var cs = win.getComputedStyle(n);
+      if (cs.filter && cs.filter.indexOf('invert') !== -1) count++;
+      n = n.parentElement;
+    }
+    return count % 2 === 1;
+  }
+
+  var walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT, {
+    acceptNode: function (node) {
+      var p = node.parentElement;
+      while (p) {
+        if (SKIP_TAGS[p.tagName]) return NodeFilter.FILTER_REJECT;
+        p = p.parentElement;
+      }
+      return emojiTestRe.test(node.nodeValue || '')
+        ? NodeFilter.FILTER_ACCEPT
+        : NodeFilter.FILTER_REJECT;
+    }
+  });
+
+  var emojiTextNodes = [];
+  var cur;
+  while ((cur = walker.nextNode())) emojiTextNodes.push(cur);
+
+  emojiTextNodes.forEach(function (textNode) {
+    var parent = textNode.parentElement;
+    if (!parent || !isOddInvertDepth(parent)) return;
+    var text = textNode.nodeValue || '';
+    emojiRe.lastIndex = 0;
+    var frag = doc.createDocumentFragment();
+    var lastIndex = 0;
+    var m;
+    while ((m = emojiRe.exec(text)) !== null) {
+      if (m.index > lastIndex) {
+        frag.appendChild(doc.createTextNode(text.slice(lastIndex, m.index)));
+      }
+      var span = doc.createElement('span');
+      span.style.cssText = 'filter:invert(1) hue-rotate(180deg)';
+      span.textContent = m[0];
+      frag.appendChild(span);
+      lastIndex = m.index + m[0].length;
+    }
+    if (lastIndex === 0) return;
+    if (lastIndex < text.length) {
+      frag.appendChild(doc.createTextNode(text.slice(lastIndex)));
+    }
+    parent.replaceChild(frag, textNode);
+  });
+})();
+`;
+
 const HEIGHT_REPORTER = `
 (function () {
   // One-time: wrap body contents in a block-level div we can measure reliably.
   // body.scrollHeight on Android WebView is pinned to the container viewport
   // height, so we can't trust it. A dedicated wrapper gives a deterministic
   // bounding box.
+  var wrapperEl = null;
   function ensureWrapper() {
     var b = document.body;
     if (!b) return null;
+    if (wrapperEl && wrapperEl.isConnected) return wrapperEl;
     var wrap = document.getElementById('__rn_email_body_wrap__');
     if (!wrap) {
       wrap = document.createElement('div');
       wrap.id = '__rn_email_body_wrap__';
       wrap.style.display = 'block';
       wrap.style.width = '100%';
+      wrap.style.transformOrigin = 'top left';
       while (b.firstChild) wrap.appendChild(b.firstChild);
       b.appendChild(wrap);
     }
+    wrapperEl = wrap;
     return wrap;
   }
+  // The width available for the email content (body content-box).
+  function availWidth() {
+    var b = document.body;
+    var cs = window.getComputedStyle(b);
+    var padL = parseFloat(cs.paddingLeft) || 0;
+    var padR = parseFloat(cs.paddingRight) || 0;
+    return b.clientWidth - padL - padR;
+  }
+  // Shrink-to-fit: emails authored at a fixed width (e.g. 600px tables) overflow
+  // a phone viewport and force horizontal scrolling. Lay the content out at its
+  // natural width, then scale the whole block down so its widest element fits
+  // the screen — the way native mail clients do. No sideways scrolling.
+  function fitToWidth(w) {
+    if (!w) return;
+    var avail = availWidth();
+    if (avail <= 0) return;
+    // Reset to full width so wrapping content reports its true overflow extent
+    // (the widest unbreakable element) rather than a previously-scaled box.
+    w.style.width = '100%';
+    var content = w.scrollWidth;
+    if (content > avail + 1) {
+      var scale = avail / content;
+      w.style.width = content + 'px';
+      w.style.transform = 'scale(' + scale + ')';
+    } else {
+      w.style.transform = 'none';
+    }
+  }
   function measure() {
     var w = ensureWrapper();
     if (!w) return 0;
+    fitToWidth(w);
+    // getBoundingClientRect reflects the applied transform, so r.height is the
+    // already-scaled visual height of the content.
     var r = w.getBoundingClientRect();
     var b = document.body;
     var cs = window.getComputedStyle(b);
@@ -117,7 +252,16 @@ const HEIGHT_REPORTER = `
     if (document.body) ro.observe(document.body);
   } catch (e) {}
   try {
-    var mo = new MutationObserver(report);
+    var mo = new MutationObserver(function (records) {
+      for (var i = 0; i < records.length; i++) {
+        // Ignore the style mutations fitToWidth() applies to the wrapper itself,
+        // otherwise scaling would re-trigger a measure and loop indefinitely.
+        var rec = records[i];
+        if (rec.target === wrapperEl && rec.type === 'attributes') continue;
+        report();
+        return;
+      }
+    });
     if (document.body) mo.observe(document.body, { childList: true, subtree: true, attributes: true, characterData: true });
   } catch (e) {}
   try {
@@ -273,6 +417,16 @@ export default function EmailBodyView({ email, senderEmail }: EmailBodyViewProps
     };
   }, [rawHtml, text, email.preview, shouldBlock, cidMap, renderAsDark]);
 
+  // Inversion is applied for HTML bodies in dark mode unless the email ships its
+  // own dark-mode CSS. When it's on, prepend the DOM re-inversion pass (emoji +
+  // stylesheet backgrounds) so it runs before the height reporter measures.
+  const applyInversion =
+    !!rawHtml && renderAsDark && !hasNativeDarkMode(rawHtml);
+  const injectedJs = React.useMemo(
+    () => (applyInversion ? DARK_REINVERT_SCRIPT + HEIGHT_REPORTER : HEIGHT_REPORTER),
+    [applyInversion],
+  );
+
   const onMessage = (e: WebViewMessageEvent) => {
     const parsed = parseInt(e.nativeEvent.data, 10);
     if (Number.isNaN(parsed) || parsed <= 0) return;
@@ -316,13 +470,15 @@ export default function EmailBodyView({ email, senderEmail }: EmailBodyViewProps
           originWhitelist={['about:blank']}
           source={source}
           javaScriptEnabled
-          injectedJavaScript={HEIGHT_REPORTER}
+          injectedJavaScript={injectedJs}
           onMessage={onMessage}
           onLoadEnd={() => {
             // Re-inject after load to cover Android cases where
-            // `injectedJavaScript` runs too early to see the final layout.
+            // `injectedJavaScript` runs too early to see the final layout. The
+            // re-inversion pass guards itself (__rnDarkInvertDone) so running it
+            // again here is a no-op once the body has been processed.
             setTimeout(() => {
-              webviewRef.current?.injectJavaScript(HEIGHT_REPORTER);
+              webviewRef.current?.injectJavaScript(injectedJs);
             }, 50);
           }}
           scrollEnabled={false}

src/components/calendar/EventCard.tsx

@@ -79,7 +79,8 @@ function makeStyles(c: ThemePalette) {
   card: {
     flexDirection: 'row',
     backgroundColor: c.card,
-    borderRadius: radius.lg,
+    borderTopRightRadius: radius.lg,
+    borderBottomRightRadius: radius.lg,
     marginBottom: spacing.sm,
     overflow: 'hidden',
     borderWidth: 1,

src/components/contacts/ContactActivity.tsx

@@ -8,8 +8,9 @@ import type { ContactCard, Email, CalendarEvent } from '../../api/types';
 import type { RootStackParamList } from '../../navigation/types';
 import { getEmails, queryEmailsByFilter } from '../../api/email';
 import { useCalendarStore } from '../../stores/calendar-store';
+import { getEventColor } from '../../lib/calendar-utils';
 import SenderAvatar from '../SenderAvatar';
-import { radius, spacing, typography, type ThemePalette } from '../../theme/tokens';
+import { radius, spacing, typography, componentSizes, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
 
 const EMAIL_LIMIT = 5;
@@ -87,6 +88,7 @@ export function ContactActivity({ contact }: Props) {
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const navigation = useNavigation<Nav>();
   const calendarEvents = useCalendarStore((s) => s.events);
+  const calendars = useCalendarStore((s) => s.calendars);
 
   const addresses = React.useMemo(() => getContactEmails(contact), [contact]);
   const addressKey = addresses.join(',');
@@ -145,74 +147,85 @@ export function ContactActivity({ contact }: Props) {
     <View style={styles.wrap}>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <MailIcon size={14} color={c.primary} />
-          <Text style={styles.sectionTitle}>Recent emails</Text>
-        </View>
-        {emailsLoading ? (
-          <View style={styles.loading}>
-            <ActivityIndicator size="small" color={c.primary} />
+          <View style={styles.sectionIcon}>
+            <MailIcon size={16} color={c.textMuted} />
           </View>
-        ) : emailsError ? (
-          <Text style={styles.emptyText}>Couldn't load emails.</Text>
-        ) : !emails || emails.length === 0 ? (
-          <Text style={styles.emptyText}>No emails with this contact.</Text>
-        ) : (
-          emails.map((email) => {
-            const sender = email.from?.[0];
-            const senderName = sender?.name || sender?.email || 'Unknown';
-            return (
-              <Pressable
-                key={email.id}
-                onPress={() =>
-                  navigation.navigate('EmailThread', {
-                    emailId: email.id,
-                    threadId: email.threadId,
-                    subject: email.subject ?? undefined,
-                  })
-                }
-                style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
-              >
-                <SenderAvatar name={senderName} email={sender?.email} size={32} />
-                <View style={styles.rowContent}>
-                  <View style={styles.rowTop}>
-                    <Text style={styles.rowSender} numberOfLines={1}>{senderName}</Text>
-                    <Text style={styles.rowDate}>{formatRelativeDate(email.receivedAt)}</Text>
+          <Text style={styles.sectionLabel}>Recent emails</Text>
+        </View>
+        <View style={styles.sectionBody}>
+          {emailsLoading ? (
+            <View style={styles.loading}>
+              <ActivityIndicator size="small" color={c.primary} />
+            </View>
+          ) : emailsError ? (
+            <Text style={styles.emptyText}>Couldn't load emails.</Text>
+          ) : !emails || emails.length === 0 ? (
+            <Text style={styles.emptyText}>No emails with this contact.</Text>
+          ) : (
+            emails.map((email) => {
+              const sender = email.from?.[0];
+              const senderName = sender?.name || sender?.email || 'Unknown';
+              return (
+                <Pressable
+                  key={email.id}
+                  onPress={() =>
+                    navigation.navigate('EmailThread', {
+                      emailId: email.id,
+                      threadId: email.threadId,
+                      subject: email.subject ?? undefined,
+                    })
+                  }
+                  style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
+                >
+                  <SenderAvatar name={senderName} email={sender?.email} size={32} />
+                  <View style={styles.rowContent}>
+                    <View style={styles.rowTop}>
+                      <Text style={styles.rowSender} numberOfLines={1}>{senderName}</Text>
+                      <Text style={styles.rowDate}>{formatRelativeDate(email.receivedAt)}</Text>
+                    </View>
+                    <Text style={styles.rowSubject} numberOfLines={1}>
+                      {email.subject || '(no subject)'}
+                    </Text>
+                    {email.preview ? (
+                      <Text style={styles.rowPreview} numberOfLines={1}>{email.preview}</Text>
+                    ) : null}
                   </View>
-                  <Text style={styles.rowSubject} numberOfLines={1}>
-                    {email.subject || '(no subject)'}
-                  </Text>
-                  {email.preview ? (
-                    <Text style={styles.rowPreview} numberOfLines={1}>{email.preview}</Text>
-                  ) : null}
-                </View>
-              </Pressable>
-            );
-          })
-        )}
+                </Pressable>
+              );
+            })
+          )}
+        </View>
       </View>
 
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <CalendarDays size={14} color={c.primary} />
-          <Text style={styles.sectionTitle}>Upcoming events</Text>
+          <View style={styles.sectionIcon}>
+            <CalendarDays size={16} color={c.textMuted} />
+          </View>
+          <Text style={styles.sectionLabel}>Upcoming events</Text>
         </View>
-        {upcomingEvents.length === 0 ? (
-          <Text style={styles.emptyText}>No upcoming events.</Text>
-        ) : (
-          upcomingEvents.map((event) => (
-            <View key={event.id} style={styles.eventRow}>
-              <Text style={styles.eventTime}>{formatEventTime(event)}</Text>
-              <View style={styles.eventInfo}>
-                <Text style={styles.eventTitle} numberOfLines={1}>
-                  {event.title || '(no title)'}
-                </Text>
-                <Text style={styles.eventDate}>
-                  {formatRelativeDate(event.utcStart || event.start)}
-                </Text>
+        <View style={styles.sectionBody}>
+          {upcomingEvents.length === 0 ? (
+            <Text style={styles.emptyText}>No upcoming events.</Text>
+          ) : (
+            upcomingEvents.map((event) => (
+              <View key={event.id} style={styles.eventRow}>
+                <View
+                  style={[styles.eventDot, { backgroundColor: getEventColor(event, calendars) }]}
+                />
+                <Text style={styles.eventTime}>{formatEventTime(event)}</Text>
+                <View style={styles.eventInfo}>
+                  <Text style={styles.eventTitle} numberOfLines={1}>
+                    {event.title || '(no title)'}
+                  </Text>
+                  <Text style={styles.eventDate}>
+                    {formatRelativeDate(event.utcStart || event.start)}
+                  </Text>
+                </View>
               </View>
-            </View>
-          ))
-        )}
+            ))
+          )}
+        </View>
       </View>
     </View>
   );
@@ -220,18 +233,18 @@ export function ContactActivity({ contact }: Props) {
 
 function makeStyles(c: ThemePalette) {
   return StyleSheet.create({
-  wrap: { gap: spacing.md, paddingHorizontal: spacing.lg, marginBottom: spacing.lg },
-  section: {
-    backgroundColor: c.card,
-    borderRadius: radius.sm,
-    paddingHorizontal: spacing.md,
-    paddingVertical: spacing.sm,
-    gap: spacing.sm,
-    borderLeftWidth: 3,
-    borderLeftColor: c.primary,
+  wrap: { gap: spacing.lg },
+  section: { gap: spacing.sm },
+  sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: spacing.sm },
+  sectionIcon: { width: 16 },
+  sectionLabel: {
+    ...typography.bodyMedium,
+    color: c.textSecondary,
+    textTransform: 'uppercase',
+    fontSize: 11,
+    letterSpacing: 0.6,
   },
-  sectionHeader: { flexDirection: 'row', alignItems: 'center', gap: spacing.xs },
-  sectionTitle: { ...typography.bodySemibold, color: c.text },
+  sectionBody: { paddingLeft: spacing.lg + spacing.xs, gap: spacing.xs },
   loading: { paddingVertical: spacing.sm, alignItems: 'flex-start' },
   emptyText: { ...typography.caption, color: c.textMuted },
 
@@ -251,10 +264,16 @@ function makeStyles(c: ThemePalette) {
   rowPreview: { ...typography.caption, color: c.textMuted },
 
   eventRow: { flexDirection: 'row', gap: spacing.sm, alignItems: 'baseline', paddingVertical: 4 },
+  eventDot: {
+    width: componentSizes.eventDot,
+    height: componentSizes.eventDot,
+    borderRadius: componentSizes.eventDot / 2,
+    alignSelf: 'center',
+  },
   eventTime: {
     ...typography.caption,
     color: c.textMuted,
-    width: 64,
+    width: 52,
   },
   eventInfo: { flex: 1, minWidth: 0 },
   eventTitle: { ...typography.body, color: c.text },

src/components/contacts/TagAssignSheet.tsx

@@ -23,7 +23,12 @@ export default function TagAssignSheet({
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
   const insets = useSafeAreaInsets();
-  const keywords = useContactsStore(selectKeywordsUsed);
+  // Subscribe to the stable `contacts` array and derive the keyword list in a
+  // memo. Passing `selectKeywordsUsed` straight to the store would return a
+  // fresh array on every call, which trips useSyncExternalStore's snapshot
+  // check and spins into an infinite render loop.
+  const contacts = useContactsStore((s) => s.contacts);
+  const keywords = React.useMemo(() => selectKeywordsUsed(contacts), [contacts]);
 
   const [input, setInput] = React.useState('');
 

src/components/settings/ContactsSettings.tsx

@@ -22,7 +22,14 @@ export function ContactsSettings() {
   const groupByLetter = useSettingsStore((s) => s.groupContactsByLetter);
   const setGroupByLetter = useSettingsStore((s) => s.setGroupContactsByLetter);
   const contacts = useContactsStore((s) => s.contacts);
-  const books = useContactsStore(selectAddressBooksWithCount);
+  const addressBooks = useContactsStore((s) => s.addressBooks);
+  // Derive in a memo from stable store fields. Subscribing with
+  // `selectAddressBooksWithCount` directly returns a new array each call and
+  // sends useSyncExternalStore into an infinite render loop.
+  const books = React.useMemo(
+    () => selectAddressBooksWithCount(addressBooks, contacts),
+    [addressBooks, contacts],
+  );
   const fetchAddressBooks = useContactsStore((s) => s.fetchAddressBooks);
   const fetchContacts = useContactsStore((s) => s.fetchContacts);
   const createAddressBook = useContactsStore((s) => s.createAddressBook);

src/components/settings/LayoutSettings.tsx

@@ -1,10 +1,18 @@
 import React, { useEffect } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { ArrowRight, ArrowLeft } from 'lucide-react-native';
-import { SettingsSection, RadioGroup } from './settings-section';
+import { ArrowRight, ArrowLeft, MoveVertical } from 'lucide-react-native';
+import { SettingsSection, RadioGroup, Select } from './settings-section';
 import { spacing, typography, type ThemePalette } from '../../theme/tokens';
 import { useColors } from '../../theme/colors';
-import { useSettingsStore, type SwipeAction, type SwipeMode } from '../../stores/settings-store';
+import {
+  useSettingsStore,
+  normalizeBottomQuickActions,
+  REPLY_QUICK_ACTIONS,
+  ALL_QUICK_ACTIONS,
+  type SwipeAction,
+  type SwipeMode,
+  type QuickAction,
+} from '../../stores/settings-store';
 
 const SWIPE_OPTIONS: { value: SwipeAction; label: string }[] = [
   { value: 'none',    label: 'None' },
@@ -22,6 +30,24 @@ const SWIPE_MODE_OPTIONS: { value: SwipeMode; label: string }[] = [
   { value: 'reveal',  label: 'Reveal (swipe, then tap)' },
 ];
 
+const QUICK_ACTION_LABELS: Record<QuickAction, string> = {
+  reply: 'Reply',
+  replyAll: 'Reply All',
+  forward: 'Forward',
+  delete: 'Delete',
+  archive: 'Archive',
+  markUnread: 'Mark Read/Unread',
+  star: 'Star',
+  move: 'Move to folder',
+  spam: 'Spam',
+  tag: 'Tag',
+};
+
+const QUICK_ACTION_OPTIONS = ALL_QUICK_ACTIONS.map((value) => ({
+  value,
+  label: QUICK_ACTION_LABELS[value],
+}));
+
 export function LayoutSettings() {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
@@ -31,11 +57,27 @@ export function LayoutSettings() {
   const setSwipeRightAction = useSettingsStore((s) => s.setSwipeRightAction);
   const swipeMode = useSettingsStore((s) => s.swipeMode);
   const setSwipeMode = useSettingsStore((s) => s.setSwipeMode);
+  const bottomQuickActionsRaw = useSettingsStore((s) => s.bottomQuickActions);
+  const update = useSettingsStore((s) => s.updateSetting);
   const hydrated = useSettingsStore((s) => s.hydrated);
   const hydrate = useSettingsStore((s) => s.hydrate);
 
   useEffect(() => { if (!hydrated) void hydrate(); }, [hydrated, hydrate]);
 
+  const bottomActions = normalizeBottomQuickActions(bottomQuickActionsRaw);
+  // Pick an action for a bar slot. If the chosen action already occupies
+  // another slot, swap the two so the three slots stay unique.
+  const setQuickActionSlot = (index: number, value: QuickAction) => {
+    const next = [...bottomActions];
+    const existing = next.indexOf(value);
+    if (existing !== -1 && existing !== index) {
+      next[existing] = next[index];
+    }
+    next[index] = value;
+    update('bottomQuickActions', next);
+  };
+  const relocated = REPLY_QUICK_ACTIONS.filter((a) => !bottomActions.includes(a));
+
   return (
     <SettingsSection title="Layout" description="Tune the email list interactions for mobile.">
       <View style={{ gap: spacing.sm }}>
@@ -81,6 +123,34 @@ export function LayoutSettings() {
         />
       </View>
 
+      <View style={{ gap: spacing.sm, marginTop: spacing.lg }}>
+        <View style={styles.row}>
+          <MoveVertical size={14} color={c.mutedForeground} />
+          <Text style={styles.rowLabel}>Reader quick actions</Text>
+        </View>
+        <Text style={styles.rowDescription}>
+          The three buttons shown between Prev/Next at the bottom of an open
+          email. Defaults to Reply, Reply All and Forward.
+        </Text>
+        {bottomActions.map((action, index) => (
+          <View key={index} style={styles.slotRow}>
+            <Text style={styles.slotLabel}>Slot {index + 1}</Text>
+            <Select
+              value={action}
+              onChange={(v) => setQuickActionSlot(index, v as QuickAction)}
+              options={QUICK_ACTION_OPTIONS}
+            />
+          </View>
+        ))}
+        {relocated.length > 0 && (
+          <Text style={styles.rowDescription}>
+            {relocated.map((a) => QUICK_ACTION_LABELS[a]).join(', ')}
+            {relocated.length === 1 ? ' is' : ' are'} moved to the top toolbar so
+            you can still use {relocated.length === 1 ? 'it' : 'them'}.
+          </Text>
+        )}
+      </View>
+
     </SettingsSection>
   );
 }
@@ -90,5 +160,13 @@ function makeStyles(c: ThemePalette) {
   row: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   rowLabel: { ...typography.bodyMedium, color: c.text },
   rowDescription: { ...typography.caption, color: c.mutedForeground },
+  slotRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: spacing.md,
+    marginTop: spacing.xs,
+  },
+  slotLabel: { ...typography.body, color: c.text },
 });
 }

src/screens/EmailListScreen.tsx

@@ -593,7 +593,7 @@ export default function EmailListScreen({ onEmailPress, onComposePress }: EmailL
           <Pressable onPress={() => setDrawerOpen(true)} style={styles.headerButton}>
             <Menu size={20} color={c.textMuted} />
           </Pressable>
-          <Text style={styles.headerTitle}>{currentMailbox?.name ?? 'Inbox'}</Text>
+          <Text style={styles.headerTitle} numberOfLines={1}>{currentMailbox?.name ?? 'Inbox'}</Text>
           <View style={{ flex: 1 }} />
           <Pressable
             onPress={() => { void handleImport(); }}
@@ -1075,7 +1075,7 @@ function makeStyles(c: ThemePalette) {
     alignItems: 'center', justifyContent: 'center',
     borderRadius: radius.full,
   },
-  headerTitle: { ...typography.h3, color: c.text, flex: 1 }, // text-lg font-semibold
+  headerTitle: { ...typography.h3, color: c.text, flexShrink: 1 }, // text-lg font-semibold
   headerLogo: {
     width: 28,
     height: 28,

src/screens/EmailThreadScreen.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   View, Text, StyleSheet, ScrollView, Pressable, ActivityIndicator,
-  Modal, useWindowDimensions, Animated, Easing, Alert,
+  Modal, useWindowDimensions, Animated, Easing, Alert, PanResponder,
 } from 'react-native';
 import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
@@ -18,7 +18,12 @@ import { CalendarInvitationBanner } from '../components/email/CalendarInvitation
 import SenderAvatar from '../components/SenderAvatar';
 import { MoveSheet } from '../components/MoveSheet';
 import { useEmailStore } from '../stores/email-store';
-import { useSettingsStore } from '../stores/settings-store';
+import {
+  useSettingsStore,
+  normalizeBottomQuickActions,
+  REPLY_QUICK_ACTIONS,
+  type QuickAction,
+} from '../stores/settings-store';
 import { setEmailKeywords } from '../api/email';
 import { shareEmailEml, shareAttachment, downloadAttachment } from '../lib/email-export';
 import { useKeywordsStore, keywordToken, type KeywordDef } from '../stores/keywords-store';
@@ -54,7 +59,12 @@ function plainTextBody(email: Email): string {
 export default function EmailThreadScreen({ route, navigation }: Props) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
-  const { emailId, subject: subjectParam, jmapAccountId } = route.params;
+  const { jmapAccountId } = route.params;
+  // The displayed email is tracked in local state (not a route param) so that
+  // swiping / Prev-Next can switch messages in place without remounting the
+  // screen — which is what produced the loading flash on every change.
+  const [activeEmailId, setActiveEmailId] = React.useState(route.params.emailId);
+  const [activeSubject, setActiveSubject] = React.useState(route.params.subject ?? '');
   const insets = useSafeAreaInsets();
   const { width: windowWidth } = useWindowDimensions();
   const getEmailDetail = useEmailStore((s) => s.getEmailDetail);
@@ -66,16 +76,9 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
   const currentMailboxId = useEmailStore((s) => s.currentMailboxId);
   const emails = useEmailStore((s) => s.emails);
 
-  const currentIndex = emails.findIndex((e) => e.id === emailId);
+  const currentIndex = emails.findIndex((e) => e.id === activeEmailId);
   const prevEmail = currentIndex > 0 ? emails[currentIndex - 1] : null;
   const nextEmail = currentIndex >= 0 && currentIndex < emails.length - 1 ? emails[currentIndex + 1] : null;
-  const goToEmail = (target: { id: string; threadId: string; subject?: string }) => {
-    navigation.replace('EmailThread', {
-      emailId: target.id,
-      threadId: target.threadId,
-      subject: target.subject ?? '',
-    });
-  };
 
   const [email, setEmail] = React.useState<Email | null>(null);
   const [loading, setLoading] = React.useState(true);
@@ -86,10 +89,99 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
   const [attachmentsExpanded, setAttachmentsExpanded] = React.useState(false);
   const [downloadingBlobId, setDownloadingBlobId] = React.useState<string | null>(null);
 
+  // In-memory cache of fetched message details keyed by id. Lets us show a
+  // neighbour instantly (no spinner) when switching, and prefetch adjacent
+  // messages so a swipe lands on ready content.
+  const detailCache = React.useRef(new Map<string, Email>()).current;
+
+  // --- Swipe / slide navigation between adjacent emails -------------------
+  // translateX drives both the finger-follow drag and the slide-out/slide-in
+  // transition. Refs keep the (memoised once) PanResponder reading the latest
+  // neighbours / dimensions without being recreated every render.
+  const translateX = React.useRef(new Animated.Value(0)).current;
+  const scrollRef = React.useRef<ScrollView>(null);
+  const animatingRef = React.useRef(false);
+  const prevEmailRef = React.useRef(prevEmail);
+  const nextEmailRef = React.useRef(nextEmail);
+  const windowWidthRef = React.useRef(windowWidth);
+  prevEmailRef.current = prevEmail;
+  nextEmailRef.current = nextEmail;
+  windowWidthRef.current = windowWidth;
+
+  const switchEmail = React.useCallback((direction: 'prev' | 'next') => {
+    const target = direction === 'next' ? nextEmailRef.current : prevEmailRef.current;
+    if (!target || animatingRef.current) return;
+    animatingRef.current = true;
+    const w = windowWidthRef.current;
+    const out = direction === 'next' ? -w : w;
+    // Slide the current message the rest of the way out, swap content, then
+    // slide the new message in from the opposite edge.
+    Animated.timing(translateX, {
+      toValue: out, duration: 170, easing: Easing.out(Easing.cubic), useNativeDriver: true,
+    }).start(() => {
+      setActiveEmailId(target.id);
+      setActiveSubject(target.subject ?? '');
+      scrollRef.current?.scrollTo({ y: 0, animated: false });
+      translateX.setValue(-out);
+      Animated.timing(translateX, {
+        toValue: 0, duration: 220, easing: Easing.out(Easing.cubic), useNativeDriver: true,
+      }).start(() => { animatingRef.current = false; });
+    });
+  }, [translateX]);
+  const switchEmailRef = React.useRef(switchEmail);
+  switchEmailRef.current = switchEmail;
+
+  const panResponder = React.useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, g) => {
+        if (animatingRef.current) return false;
+        if (Math.abs(g.dx) < 10) return false;
+        // Only claim clearly-horizontal drags so the body's vertical scroll
+        // (and link taps) keep working.
+        return Math.abs(g.dx) > Math.abs(g.dy) * 1.5;
+      },
+      onPanResponderMove: (_, g) => {
+        let dx = g.dx;
+        // Rubber-band when there's no neighbour to reach in that direction.
+        if ((dx > 0 && !prevEmailRef.current) || (dx < 0 && !nextEmailRef.current)) {
+          dx *= 0.25;
+        }
+        translateX.setValue(dx);
+      },
+      onPanResponderRelease: (_, g) => {
+        const w = windowWidthRef.current;
+        const threshold = Math.min(w * 0.28, 120);
+        const fast = Math.abs(g.vx) > 0.5;
+        if ((g.dx <= -threshold || (fast && g.vx < 0)) && nextEmailRef.current) {
+          switchEmailRef.current('next');
+        } else if ((g.dx >= threshold || (fast && g.vx > 0)) && prevEmailRef.current) {
+          switchEmailRef.current('prev');
+        } else {
+          Animated.spring(translateX, { toValue: 0, useNativeDriver: true, speed: 20, bounciness: 6 }).start();
+        }
+      },
+      onPanResponderTerminate: () => {
+        Animated.spring(translateX, { toValue: 0, useNativeDriver: true, speed: 20, bounciness: 6 }).start();
+      },
+      onPanResponderTerminationRequest: () => true,
+    }),
+  ).current;
+
   const mailAttachmentAction = useSettingsStore((s) => s.mailAttachmentAction);
   const attachmentPosition = useSettingsStore((s) => s.attachmentPosition);
   const markAsReadDelay = useSettingsStore((s) => s.markAsReadDelay);
   const hideInlineImageAttachments = useSettingsStore((s) => s.hideInlineImageAttachments);
+  const bottomQuickActionsRaw = useSettingsStore((s) => s.bottomQuickActions);
+  const bottomActions = React.useMemo(
+    () => normalizeBottomQuickActions(bottomQuickActionsRaw),
+    [bottomQuickActionsRaw],
+  );
+  // Any reply-family action the user pulled out of the bottom bar is surfaced
+  // in the top toolbar so it stays reachable.
+  const relocatedActions = React.useMemo(
+    () => REPLY_QUICK_ACTIONS.filter((a) => !bottomActions.includes(a)),
+    [bottomActions],
+  );
 
   const onPressAttachment = React.useCallback(
     async (blobId: string, name: string | undefined, type: string | undefined) => {
@@ -175,24 +267,37 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
   React.useEffect(() => {
     let cancelled = false;
     let readTimer: ReturnType<typeof setTimeout> | null = null;
-    setLoading(true);
-    setError(null);
+    // If we already have this message cached (e.g. it was prefetched as a
+    // neighbour), show it immediately — no spinner — and refresh in the
+    // background. Otherwise fall back to the loading state.
+    const cached = detailCache.get(activeEmailId);
+    if (cached) {
+      setEmail(cached);
+      setLoading(false);
+      setError(null);
+    } else {
+      setLoading(true);
+      setError(null);
+    }
     void (async () => {
       try {
-        const fetched = await getEmailDetail(emailId, jmapAccountId);
+        const fetched = await getEmailDetail(activeEmailId, jmapAccountId);
         if (cancelled) return;
+        detailCache.set(activeEmailId, fetched);
         setEmail(fetched);
         if (fetched && !fetched.keywords?.$seen) {
           if (markAsReadDelay > 0) {
             readTimer = setTimeout(() => {
-              if (!cancelled) void markRead(emailId, jmapAccountId);
+              if (!cancelled) void markRead(activeEmailId, jmapAccountId);
             }, markAsReadDelay);
           } else {
-            void markRead(emailId, jmapAccountId);
+            void markRead(activeEmailId, jmapAccountId);
           }
         }
       } catch (e) {
-        if (!cancelled) {
+        // Only surface the error if we have nothing to show; a cached copy is
+        // better than an error screen when the refresh fails.
+        if (!cancelled && !detailCache.has(activeEmailId)) {
           setError(e instanceof Error ? e.message : 'Failed to load email');
         }
       } finally {
@@ -203,7 +308,19 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
       cancelled = true;
       if (readTimer) clearTimeout(readTimer);
     };
-  }, [emailId, jmapAccountId, getEmailDetail, markRead, markAsReadDelay]);
+  }, [activeEmailId, jmapAccountId, getEmailDetail, markRead, markAsReadDelay, detailCache]);
+
+  // Prefetch the adjacent messages so a swipe / Prev-Next lands on ready
+  // content instead of a spinner. Best-effort and silent.
+  React.useEffect(() => {
+    for (const neighbour of [prevEmail, nextEmail]) {
+      if (neighbour && !detailCache.has(neighbour.id)) {
+        getEmailDetail(neighbour.id, jmapAccountId)
+          .then((e) => detailCache.set(neighbour.id, e))
+          .catch(() => { /* ignore — prefetch is best-effort */ });
+      }
+    }
+  }, [prevEmail, nextEmail, getEmailDetail, jmapAccountId, detailCache]);
 
   const starred = !!email?.keywords?.$flagged;
   const unread = !!email && !email.keywords?.$seen;
@@ -223,7 +340,13 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
   const isInJunk = !!(junkMailbox && email?.mailboxIds?.[junkMailbox.id]);
 
   const updateLocalKeywords = (next: Record<string, boolean>) => {
-    setEmail((prev) => (prev ? { ...prev, keywords: next } : prev));
+    setEmail((prev) => {
+      if (!prev) return prev;
+      const updated = { ...prev, keywords: next };
+      // Keep the cached copy in sync so swiping back shows the toggled state.
+      detailCache.set(prev.id, updated);
+      return updated;
+    });
   };
 
   const onToggleKeyword = (token: string) => {
@@ -312,7 +435,79 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
     });
   };
 
-  const subject = email?.subject ?? subjectParam ?? '(no subject)';
+  // Registry of every action that can live in the bottom quick-action bar (or
+  // be relocated to the top toolbar). `icon` is a factory so the same action
+  // can render at the toolbar (18px) and bottom-bar (20px) sizes.
+  const quickActionRegistry: Record<
+    QuickAction,
+    { label: string; icon: (size: number, color: string) => React.ReactNode; onPress: () => void; available: boolean }
+  > = {
+    reply: {
+      label: 'Reply',
+      icon: (s, col) => <Reply size={s} color={col} />,
+      onPress: () => navigateCompose('reply'),
+      available: true,
+    },
+    replyAll: {
+      label: 'Reply All',
+      icon: (s, col) => <ReplyAll size={s} color={col} />,
+      onPress: () => navigateCompose('replyAll'),
+      available: true,
+    },
+    forward: {
+      label: 'Forward',
+      icon: (s, col) => <Forward size={s} color={col} />,
+      onPress: () => navigateCompose('forward'),
+      available: true,
+    },
+    delete: {
+      label: 'Delete',
+      icon: (s, col) => <Trash2 size={s} color={col} />,
+      onPress: onDelete,
+      available: true,
+    },
+    archive: {
+      label: 'Archive',
+      icon: (s, col) => <Archive size={s} color={col} />,
+      onPress: onArchive,
+      available: !!archiveMailbox && currentMailboxId !== archiveMailbox?.id,
+    },
+    markUnread: {
+      label: unread ? 'Read' : 'Unread',
+      icon: (s, col) => (unread ? <MailOpen size={s} color={col} /> : <Mail size={s} color={col} />),
+      onPress: onToggleUnread,
+      available: true,
+    },
+    star: {
+      label: starred ? 'Unstar' : 'Star',
+      icon: (s, col) => (
+        <Star size={s} color={starred ? c.starred : col} fill={starred ? c.starred : 'transparent'} />
+      ),
+      onPress: onToggleStar,
+      available: true,
+    },
+    move: {
+      label: 'Move',
+      icon: (s, col) => <FolderInput size={s} color={col} />,
+      onPress: () => setMoveMenuOpen(true),
+      available: mailboxes.length > 0,
+    },
+    spam: {
+      label: isInJunk ? 'Not spam' : 'Spam',
+      icon: (s, col) =>
+        isInJunk ? <ShieldCheck size={s} color={c.success} /> : <ShieldAlert size={s} color={col} />,
+      onPress: onToggleSpam,
+      available: !!junkMailbox || isInJunk,
+    },
+    tag: {
+      label: 'Tag',
+      icon: (s, col) => <Tag size={s} color={col} />,
+      onPress: () => setTagMenuOpen(true),
+      available: keywordDefs.length > 0,
+    },
+  };
+
+  const subject = email?.subject ?? activeSubject ?? '(no subject)';
   const from = email?.from?.[0];
   const bottomBarHeight = 60 + Math.max(insets.bottom, 4);
 
@@ -329,6 +524,17 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
           <ArrowLeft size={22} color={c.text} />
         </Pressable>
         <View style={styles.toolbarActions}>
+          {relocatedActions.map((id) => {
+            const def = quickActionRegistry[id];
+            return (
+              <ToolbarButton
+                key={id}
+                icon={def.icon(18, c.textSecondary)}
+                label={def.label}
+                onPress={def.onPress}
+              />
+            );
+          })}
           <ToolbarButton
             icon={<Trash2 size={18} color={c.textSecondary} />}
             label="Delete"
@@ -383,7 +589,12 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
         </View>
       ) : email ? (
         <>
+          <Animated.View
+            style={[styles.slidePane, { transform: [{ translateX }] }]}
+            {...panResponder.panHandlers}
+          >
           <ScrollView
+            ref={scrollRef}
             style={styles.scroll}
             contentContainerStyle={{ paddingBottom: bottomBarHeight + spacing.lg }}
           >
@@ -444,34 +655,32 @@ export default function EmailThreadScreen({ route, navigation }: Props) {
               <EmailBodyView email={email} senderEmail={from?.email} />
             </View>
           </ScrollView>
+          </Animated.View>
 
           {/* Bottom action bar */}
           <View style={[styles.bottomBar, { paddingBottom: Math.max(insets.bottom, 4) }]}>
             <BottomBarButton
               icon={<ChevronLeft size={20} color={c.textMuted} />}
               label="Prev"
-              onPress={prevEmail ? () => goToEmail(prevEmail) : undefined}
+              onPress={prevEmail ? () => switchEmail('prev') : undefined}
               disabled={!prevEmail}
             />
-            <BottomBarButton
-              icon={<Reply size={20} color={c.textSecondary} />}
-              label="Reply"
-              onPress={() => navigateCompose('reply')}
-            />
-            <BottomBarButton
-              icon={<ReplyAll size={20} color={c.textSecondary} />}
-              label="Reply All"
-              onPress={() => navigateCompose('replyAll')}
-            />
-            <BottomBarButton
-              icon={<Forward size={20} color={c.textSecondary} />}
-              label="Forward"
-              onPress={() => navigateCompose('forward')}
-            />
+            {bottomActions.map((id) => {
+              const def = quickActionRegistry[id];
+              return (
+                <BottomBarButton
+                  key={id}
+                  icon={def.icon(20, c.textSecondary)}
+                  label={def.label}
+                  onPress={def.available ? def.onPress : undefined}
+                  disabled={!def.available}
+                />
+              );
+            })}
             <BottomBarButton
               icon={<ChevronRight size={20} color={c.textMuted} />}
               label="Next"
-              onPress={nextEmail ? () => goToEmail(nextEmail) : undefined}
+              onPress={nextEmail ? () => switchEmail('next') : undefined}
               disabled={!nextEmail}
             />
           </View>
@@ -856,6 +1065,7 @@ function makeStyles(c: ThemePalette) {
     padding: spacing.lg,
   },
   errorText: { ...typography.body, color: c.error, textAlign: 'center' },
+  slidePane: { flex: 1, backgroundColor: c.background },
   scroll: { flex: 1, backgroundColor: c.background },
 
   // Subject block

src/stores/contacts-store.ts

@@ -376,9 +376,9 @@ export function selectGroups(state: ContactsState): ContactCard[] {
   return state.contacts.filter(isGroup);
 }
 
-export function selectKeywordsUsed(state: ContactsState): Array<{ keyword: string; count: number }> {
+export function selectKeywordsUsed(contacts: ContactCard[]): Array<{ keyword: string; count: number }> {
   const counts = new Map<string, number>();
-  for (const contact of state.contacts) {
+  for (const contact of contacts) {
     for (const kw of getContactKeywords(contact)) {
       counts.set(kw, (counts.get(kw) || 0) + 1);
     }
@@ -388,10 +388,13 @@ export function selectKeywordsUsed(state: ContactsState): Array<{ keyword: strin
     .sort((a, b) => a.keyword.localeCompare(b.keyword));
 }
 
-export function selectAddressBooksWithCount(state: ContactsState): Array<AddressBook & { count: number }> {
-  return state.addressBooks.map((book) => ({
+export function selectAddressBooksWithCount(
+  addressBooks: AddressBook[],
+  contacts: ContactCard[],
+): Array<AddressBook & { count: number }> {
+  return addressBooks.map((book) => ({
     ...book,
-    count: state.contacts.filter((c) => !isGroup(c) && c.addressBookIds?.[book.id]).length,
+    count: contacts.filter((c) => !isGroup(c) && c.addressBookIds?.[book.id]).length,
   }));
 }
 

src/stores/settings-store.ts

@@ -21,6 +21,55 @@ export type SwipeAction =
   | 'pin'
   | 'move';
 export type SwipeMode = 'instant' | 'reveal';
+// Actions that can be placed in the email reader's bottom quick-action bar.
+// The first three are the reply family (the default bar); any reply-family
+// action the user removes from the bar is relocated to the top toolbar so it
+// stays reachable.
+export type QuickAction =
+  | 'reply'
+  | 'replyAll'
+  | 'forward'
+  | 'delete'
+  | 'archive'
+  | 'markUnread'
+  | 'star'
+  | 'move'
+  | 'spam'
+  | 'tag';
+
+export const REPLY_QUICK_ACTIONS: QuickAction[] = ['reply', 'replyAll', 'forward'];
+
+export const ALL_QUICK_ACTIONS: QuickAction[] = [
+  'reply',
+  'replyAll',
+  'forward',
+  'delete',
+  'archive',
+  'markUnread',
+  'star',
+  'move',
+  'spam',
+  'tag',
+];
+
+// The reader bottom bar always shows exactly three quick actions (between the
+// prev/next nav buttons). Coerce any persisted value into three unique, valid
+// ids, backfilling from the reply-family default when entries are missing.
+export function normalizeBottomQuickActions(value: unknown): QuickAction[] {
+  const out: QuickAction[] = [];
+  if (Array.isArray(value)) {
+    for (const a of value) {
+      if (ALL_QUICK_ACTIONS.includes(a as QuickAction) && !out.includes(a as QuickAction)) {
+        out.push(a as QuickAction);
+      }
+    }
+  }
+  for (const d of REPLY_QUICK_ACTIONS) {
+    if (out.length >= 3) break;
+    if (!out.includes(d)) out.push(d);
+  }
+  return out.slice(0, 3);
+}
 export type ArchiveMode = 'single' | 'year' | 'month';
 export type CalendarView = 'month' | 'week' | 'day' | 'agenda';
 export type FirstDayOfWeek = 0 | 1;
@@ -103,6 +152,10 @@ interface PersistedSettings {
   swipeRightAction: SwipeAction;
   swipeMode: SwipeMode;
 
+  // Email reader's bottom quick-action bar (3 slots). Defaults to the reply
+  // family; reply-family actions removed from here move to the top toolbar.
+  bottomQuickActions: QuickAction[];
+
   // Archive
   archiveMode: ArchiveMode;
 
@@ -210,6 +263,8 @@ const DEFAULT_PERSISTED: PersistedSettings = {
   swipeRightAction: 'read',
   swipeMode: 'instant',
 
+  bottomQuickActions: ['reply', 'replyAll', 'forward'],
+
   archiveMode: 'single',
 
   calendarDefaultView: 'month',