From 05e2af23dd80cfd9df27f528ef98c9f13ca41509 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 21 Jul 2026 20:17:41 +0200
Subject: [PATCH] fix: add unread indicator dot to email list and unified inbox
 rows #27

The only unread cues were a font-weight bump and a grey-to-white shift
on the sender name, which barely render on some device fonts and are
nearly invisible in the dark theme. Mirror the webmail's dedicated
indicator (email-list-item.tsx): an 8px circle in the theme's existing
unread color, vertically centered in the row's start gutter, shown in
both the mailbox list and the unified inbox.

Verified on a Pixel 7 API 34 emulator in dark theme: unread rows are
unambiguous at a glance, read rows unchanged.
---
 src/screens/EmailListScreen.tsx    | 14 ++++++++++++++
 src/screens/UnifiedInboxScreen.tsx | 13 +++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/src/screens/EmailListScreen.tsx b/src/screens/EmailListScreen.tsx
index a713daee..3c95066d 100644
--- a/src/screens/EmailListScreen.tsx
+++ b/src/screens/EmailListScreen.tsx
@@ -92,6 +92,7 @@ const EmailRow = React.memo(function EmailRow({
       onLongPress={handleLongPress}
       delayLongPress={300}
     >
+      {unread && <View style={styles.unreadDot} />}
       {selectionMode && (
         <View style={styles.rowCheckboxWrap}>
           {selected ? (
@@ -1365,6 +1366,19 @@ function makeStyles(c: ThemePalette) {
   },
   emailRowPressed: { backgroundColor: c.surface },
   emailRowSelected: { backgroundColor: c.selection },
+  // Mirrors the webmail's unread indicator: an 8px filled circle at the row's
+  // start edge, vertically centered (email-list-item.tsx, fill-unread). The
+  // weight/color change alone is too subtle on some device fonts (#27).
+  unreadDot: {
+    position: 'absolute',
+    left: 4,
+    top: '50%',
+    marginTop: -4,
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: c.unread,
+  },
   rowCheckboxWrap: {
     width: 16,
     height: componentSizes.avatarMd,
diff --git a/src/screens/UnifiedInboxScreen.tsx b/src/screens/UnifiedInboxScreen.tsx
index 9b4b0929..b5796730 100644
--- a/src/screens/UnifiedInboxScreen.tsx
+++ b/src/screens/UnifiedInboxScreen.tsx
@@ -96,6 +96,7 @@ export default function UnifiedInboxScreen({ navigation }: Props) {
         onPress={() => onOpen(item)}
         style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
       >
+        {unread && <View style={styles.unreadDot} />}
         <View style={styles.avatarWrap}>
           <SenderAvatar
             name={senderName(item)}
@@ -219,6 +220,18 @@ function makeStyles(c: ThemePalette) {
       paddingVertical: spacing.md,
     },
     rowPressed: { backgroundColor: c.surfaceHover },
+    // Same unread indicator as the mailbox list (and the webmail): an 8px
+    // filled circle in the start gutter, vertically centered (#27).
+    unreadDot: {
+      position: 'absolute',
+      left: 4,
+      top: '50%',
+      marginTop: -4,
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      backgroundColor: c.unread,
+    },
     avatarWrap: { position: 'relative' },
     accountDot: {
       position: 'absolute',