diff --git a/components/email/email-list-item.tsx b/components/email/email-list-item.tsx index 54e35320..caa919af 100644 --- a/components/email/email-list-item.tsx +++ b/components/email/email-list-item.tsx @@ -37,6 +37,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl const density = useSettingsStore((state) => state.density); const mailLayout = useSettingsStore((state) => state.mailLayout); const emailKeywords = useSettingsStore((state) => state.emailKeywords); + const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk); const { identities } = useAuthStore(); const isChecked = selectedEmailIds.has(email.id); const isUnread = !email.keywords?.$seen; @@ -49,6 +50,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts'; const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0]; const isFocusedMailLayout = mailLayout === 'focus'; + const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk; const inlinePreview = showPreview && email.preview ? ` ${email.preview}` : ''; // Resolve color tags using keyword definitions from settings; unknown tags fall back to gray @@ -164,6 +166,7 @@ export function EmailListItem({ email, selected, onClick, onContextMenu, onToggl email={sender?.email} size="md" className="flex-shrink-0 shadow-sm" + disableImages={hideJunkAvatarImages} /> )} diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx index 21e1c1fe..1e9ee259 100644 --- a/components/email/thread-list-item.tsx +++ b/components/email/thread-list-item.tsx @@ -64,6 +64,8 @@ const SingleEmailItem = React.forwardRef( const emailKeywords = useSettingsStore((state) => state.emailKeywords); const density = useSettingsStore((state) => state.density); const mailLayout = useSettingsStore((state) => state.mailLayout); + const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk); + const hideJunkAvatarImages = currentMailboxRole === 'junk' && !showAvatarsInJunk; const isUnifiedView = useEmailStore((state) => state.isUnifiedView); const getAccountById = useAccountStore((state) => state.getAccountById); const accountColor = email.accountId ? getAccountById(email.accountId)?.avatarColor : undefined; @@ -182,6 +184,7 @@ const SingleEmailItem = React.forwardRef( email={sender?.email} size="md" className="flex-shrink-0 shadow-sm" + disableImages={hideJunkAvatarImages} /> )} @@ -359,6 +362,7 @@ export const ThreadListItem = React.forwardRef state.showPreview); const density = useSettingsStore((state) => state.density); const mailLayout = useSettingsStore((state) => state.mailLayout); + const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk); const isMobile = useUIStore((state) => state.isMobile); const { latestEmail, participantNames, hasUnread, hasStarred, hasAttachment, hasAnswered, hasForwarded, emailCount } = thread; const isFocusedMailLayout = mailLayout === 'focus'; @@ -376,6 +380,7 @@ export const ThreadListItem = React.forwardRef )} diff --git a/components/settings/appearance-settings.tsx b/components/settings/appearance-settings.tsx index 79653d21..4b1a1a47 100644 --- a/components/settings/appearance-settings.tsx +++ b/components/settings/appearance-settings.tsx @@ -67,7 +67,7 @@ export function AppearanceSettings() { const tAdvanced = useTranslations('settings.advanced'); const tTour = useTranslations('tour'); const { theme, setTheme } = useThemeStore(); - const { fontSize, density, animationsEnabled, senderFavicons, updateSetting } = useSettingsStore(); + const { fontSize, density, animationsEnabled, senderFavicons, showAvatarsInJunk, updateSetting } = useSettingsStore(); const { startTour, resetTourCompletion } = useTour(); const { isSettingLocked, isSettingHidden } = usePolicyStore(); @@ -130,6 +130,10 @@ export function AppearanceSettings() { updateSetting('senderFavicons', checked)} /> + + updateSetting('showAvatarsInJunk', checked)} /> + +