fix: hide preview lines in the density sample when previews are off

This commit is contained in:
Linus Rath
2026-10-31 04:23:15 +01:00
parent 505fbc59ad
commit c8f417dd8f
3 changed files with 33 additions and 8 deletions
@@ -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);
});
});
@@ -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) => (
@@ -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 };
}