From 7db6fd7e24f60f4ba3a5a076fd769bddbf880846 Mon Sep 17 00:00:00 2001 From: honzup <5564623+honzup@users.noreply.github.com> Date: Fri, 3 Jul 2026 11:16:20 +0200 Subject: [PATCH] feat: add setting to disable tag-color row tint in message list Message-list rows are tinted with the first tag's color, which becomes overwhelming when a label applies to most messages (for example per-account labels). Add a `tintListRowsByTag` setting (default true, so current behavior is unchanged) with a toggle in Settings beside "Colorful Sidebar Icons". When off, rows are not tinted; tag dots and chips still show the color. Gated in both list renderers (email-list-item and thread-list-item). --- components/email/email-list-item.tsx | 3 ++- components/email/thread-list-item.tsx | 6 ++++-- components/settings/layout-settings.tsx | 9 ++++++++- locales/cs/common.json | 4 ++++ locales/da/common.json | 4 ++++ locales/de/common.json | 4 ++++ locales/en/common.json | 4 ++++ locales/es/common.json | 4 ++++ locales/fa/common.json | 4 ++++ locales/fr/common.json | 4 ++++ locales/hu/common.json | 4 ++++ locales/it/common.json | 4 ++++ locales/ja/common.json | 4 ++++ locales/ko/common.json | 4 ++++ locales/lv/common.json | 4 ++++ locales/nl/common.json | 4 ++++ locales/pl/common.json | 4 ++++ locales/pt/common.json | 4 ++++ locales/ro/common.json | 4 ++++ locales/ru/common.json | 4 ++++ locales/sk/common.json | 4 ++++ locales/tr/common.json | 4 ++++ locales/uk/common.json | 4 ++++ locales/zh/common.json | 4 ++++ stores/settings-store.ts | 3 +++ 25 files changed, 101 insertions(+), 4 deletions(-) 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,