From c8f417dd8f1aa5914af80b1cec3c2fe73758a741 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sat, 31 Oct 2026 04:23:15 +0100
Subject: [PATCH] fix: hide preview lines in the density sample when previews
 are off

---
 .../__tests__/density-preview.test.ts          | 12 ++++++++++++
 src/components/settings/AppearanceSettings.tsx | 11 +++--------
 src/components/settings/density-preview.ts     | 18 ++++++++++++++++++
 3 files changed, 33 insertions(+), 8 deletions(-)
 create mode 100644 src/components/__tests__/density-preview.test.ts
 create mode 100644 src/components/settings/density-preview.ts

diff --git a/src/components/__tests__/density-preview.test.ts b/src/components/__tests__/density-preview.test.ts
new file mode 100644
index 00000000..916f7b82
--- /dev/null
+++ b/src/components/__tests__/density-preview.test.ts
@@ -0,0 +1,12 @@
+import { describe, it, expect } from 'vitest';
+import { densityPreviewConfig } from '../settings/density-preview';
+
+describe('density sample', () => {
+  it('shows preview lines only when "Show preview text" is on (webmail c166651d1)', () => {
+    expect(densityPreviewConfig('regular', true).showPreview).toBe(true);
+    expect(densityPreviewConfig('regular', false).showPreview).toBe(false);
+    expect(densityPreviewConfig('comfortable', false).showPreview).toBe(false);
+    // Compact densities have no room for one either way.
+    expect(densityPreviewConfig('compact', true).showPreview).toBe(false);
+  });
+});
diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index afb958c7..ed48a426 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -6,16 +6,10 @@ import { useColors } from '../../theme/colors';
 import { useSettingsStore, type ThemeMode, type Density } from '../../stores/settings-store';
 import { useLocaleStore } from '../../stores/locale-store';
 import { setPendingSettingsTab } from '../../navigation/pending-settings-tab';
+import { densityPreviewConfig } from './density-preview';
 
 type Theme = ThemeMode;
 
-const DENSITY_PREVIEW: Record<Density, { py: number; gap: number; showAvatar: boolean; showPreview: boolean }> = {
-  'extra-compact': { py: 2, gap: 6, showAvatar: false, showPreview: false },
-  compact: { py: 4, gap: 8, showAvatar: true, showPreview: false },
-  regular: { py: 10, gap: 12, showAvatar: true, showPreview: true },
-  comfortable: { py: 16, gap: 16, showAvatar: true, showPreview: true },
-};
-
 const PREVIEW_ROWS = [
   { unread: true, sender: 'Alice Johnson', subject: 'Project update - Q1 roadmap', preview: 'Here are the latest numbers from…' },
   { unread: false, sender: 'Bob Smith', subject: 'Re: Meeting notes', preview: 'Thanks, will review and get back...' },
@@ -25,7 +19,8 @@ const PREVIEW_ROWS = [
 function DensityPreview({ density }: { density: Density }) {
   const c = useColors();
   const styles = React.useMemo(() => makeStyles(c), [c]);
-  const cfg = DENSITY_PREVIEW[density];
+  const showPreview = useSettingsStore((s) => s.showPreview);
+  const cfg = densityPreviewConfig(density, showPreview);
   return (
     <View style={styles.densityPreview}>
       {PREVIEW_ROWS.map((row, i) => (
diff --git a/src/components/settings/density-preview.ts b/src/components/settings/density-preview.ts
new file mode 100644
index 00000000..4a13ff2d
--- /dev/null
+++ b/src/components/settings/density-preview.ts
@@ -0,0 +1,18 @@
+import type { Density } from '../../stores/settings-store';
+
+// The sample rows under Settings > Appearance > Density. They showed a
+// preview line whenever the density had room for one, even with "Show
+// preview text" off, so the sample didn't look like the list (webmail
+// c166651d1).
+
+const DENSITY_PREVIEW: Record<Density, { py: number; gap: number; showAvatar: boolean; showPreview: boolean }> = {
+  'extra-compact': { py: 2, gap: 6, showAvatar: false, showPreview: false },
+  compact: { py: 4, gap: 8, showAvatar: true, showPreview: false },
+  regular: { py: 10, gap: 12, showAvatar: true, showPreview: true },
+  comfortable: { py: 16, gap: 16, showAvatar: true, showPreview: true },
+};
+
+export function densityPreviewConfig(density: Density, showPreviewSetting: boolean) {
+  const cfg = DENSITY_PREVIEW[density] ?? DENSITY_PREVIEW.regular;
+  return { ...cfg, showPreview: cfg.showPreview && showPreviewSetting };
+}