diff --git a/components/email/email-list-item.tsx b/components/email/email-list-item.tsx index b29819fe..31e4d8e9 100644 --- a/components/email/email-list-item.tsx +++ b/components/email/email-list-item.tsx @@ -40,6 +40,7 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte const density = useSettingsStore((state) => state.density); const mailLayout = useSettingsStore((state) => state.mailLayout); const emailKeywords = useSettingsStore((state) => state.emailKeywords); + const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag); const showAvatarsInJunk = useSettingsStore((state) => state.showAvatarsInJunk); const { identities } = useAuthStore(); const isChecked = selectedEmailIds.has(email.id); @@ -68,7 +69,7 @@ export function EmailListItem({ email, selected, onClick, onDoubleClick, onConte const keywordDefs = colorTagIds.map(id => emailKeywords.find(k => k.id === id) ?? { id, label: id, color: 'gray' }); // Use first tag for background coloring const keywordDef = keywordDefs[0] ?? null; - const colorTag = keywordDef ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null; + const colorTag = (tintListRowsByTag && keywordDef) ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null; // Drag and drop functionality const { dragHandlers, isDragging } = useEmailDrag({ diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx index 69039503..27a81714 100644 --- a/components/email/thread-list-item.tsx +++ b/components/email/thread-list-item.tsx @@ -90,6 +90,7 @@ const SingleEmailItem = React.forwardRef( const showRecipient = currentMailboxRole === 'sent' || currentMailboxRole === 'drafts'; const sender = showRecipient ? (email.to?.[0] ?? email.from?.[0]) : email.from?.[0]; const emailKeywords = useSettingsStore((state) => state.emailKeywords); + const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag); const density = useSettingsStore((state) => state.density); const mailLayout = useSettingsStore((state) => state.mailLayout); const timeFormat = useSettingsStore((state) => state.timeFormat); @@ -113,7 +114,7 @@ const SingleEmailItem = React.forwardRef( const tagIds = getEmailColorTags(email.keywords); const resolvedKeywordDefs = tagIds.map(id => emailKeywords.find(k => k.id === id) ?? { id, label: id, color: 'gray' }); const resolvedKeywordDef = resolvedKeywordDefs[0] ?? null; - const resolvedColorTag = (() => { + const resolvedColorTag = !tintListRowsByTag ? null : (() => { if (colorTag) return colorTag; return resolvedKeywordDef ? KEYWORD_PALETTE[resolvedKeywordDef.color]?.bg ?? null : null; })(); @@ -494,8 +495,9 @@ export const ThreadListItem = React.forwardRef state.emailKeywords); + const tintListRowsByTag = useSettingsStore((state) => state.tintListRowsByTag); const keywordDef = threadColor ? (emailKeywordDefs.find(k => k.id === threadColor) ?? { id: threadColor, label: threadColor, color: 'gray' }) : null; - const colorTag = keywordDef ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null; + const colorTag = (tintListRowsByTag && keywordDef) ? KEYWORD_PALETTE[keywordDef.color]?.bg ?? null : null; const isSelected = selectedEmailId === latestEmail.id || thread.emails.some(e => e.id === selectedEmailId); diff --git a/components/settings/layout-settings.tsx b/components/settings/layout-settings.tsx index 14e39d60..04103f55 100644 --- a/components/settings/layout-settings.tsx +++ b/components/settings/layout-settings.tsx @@ -118,7 +118,7 @@ function MailLayoutPreview({ export function LayoutSettings() { const t = useTranslations('settings.appearance'); const tEmail = useTranslations('settings.email_behavior'); - const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, enableAllMailView, allMailFolderIds, enableCrossUnreadView, enableCrossStarredView, enableCrossAllView, colorfulSidebarIcons, showFolderTotalCount, mailLayout, proInterface, updateSetting } = useSettingsStore(); + const { toolbarPosition, showToolbarLabels, hideAccountSwitcher, showRailAccountList, enableUnifiedMailbox, includeGroupInUnified, enableAllMailView, allMailFolderIds, enableCrossUnreadView, enableCrossStarredView, enableCrossAllView, colorfulSidebarIcons, tintListRowsByTag, showFolderTotalCount, mailLayout, proInterface, updateSetting } = useSettingsStore(); const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore(); const accounts = useAccountStore(s => s.accounts); const activeAccountId = useAccountStore(s => s.activeAccountId); @@ -217,6 +217,13 @@ export function LayoutSettings() { /> + + updateSetting('tintListRowsByTag', checked)} + /> + + ()( senderFavicons: state.senderFavicons, showAvatarsInJunk: state.showAvatarsInJunk, colorfulSidebarIcons: state.colorfulSidebarIcons, + tintListRowsByTag: state.tintListRowsByTag, showFolderTotalCount: state.showFolderTotalCount, folderIcons: state.folderIcons, emailKeywords: state.emailKeywords,