From ea604ab8a1a00857e590626ae64ff52a8a19b492 Mon Sep 17 00:00:00 2001 From: Linus Rath <139418639+rathlinus@users.noreply.github.com> Date: Sat, 31 Oct 2026 16:24:28 +0100 Subject: [PATCH] fix: keep the open folder regular weight in mountain view so bold only means unread #1469 --- app/globals.css | 6 ++-- lib/__tests__/mv-nav-row-weight.test.ts | 45 +++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 lib/__tests__/mv-nav-row-weight.test.ts diff --git a/app/globals.css b/app/globals.css index 01c1fbcc1..34e47123a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1140,7 +1140,9 @@ optgroup { } /* Selected and hovered rows fill the pill; a folder with unread mail reads - bold, the way the message rows do. Icons are 20px with an 18px gap. */ + bold, the way the message rows do. Bold means unread only: the pill alone + marks the open folder, so a selected folder without unread mail stays + regular (#1469). Icons are 20px with an 18px gap. */ [data-interface-layout="mountain-view"] [data-mv-nav-row] { font-size: 0.875rem; color: var(--color-foreground); @@ -1151,7 +1153,7 @@ optgroup { [data-interface-layout="mountain-view"] [data-mv-nav-row][data-selected="true"] { background-color: var(--mv-nav-selected); color: var(--color-foreground); - font-weight: 700; + font-weight: 400; } [data-interface-layout="mountain-view"] [data-mv-nav-row][data-has-unread] { font-weight: 700; diff --git a/lib/__tests__/mv-nav-row-weight.test.ts b/lib/__tests__/mv-nav-row-weight.test.ts new file mode 100644 index 000000000..50a37525b --- /dev/null +++ b/lib/__tests__/mv-nav-row-weight.test.ts @@ -0,0 +1,45 @@ +import { describe, it, expect } from 'vitest'; +import { readFileSync } from 'fs'; +import path from 'path'; + +/** + * Mountain View's folder rows used bold for two things: the open folder and a + * folder with unread mail. A selected folder without unread mail then looked + * exactly like an unread one (#1469). Bold now means unread only; the pill + * marks the open folder. + * + * jsdom does not resolve the cascade of these attribute rules, so lock the + * stylesheet rules themselves. + */ +const css = readFileSync(path.join(process.cwd(), 'app', 'globals.css'), 'utf8'); + +const NAV_ROW = '[data-interface-layout="mountain-view"] [data-mv-nav-row]'; + +/** The declaration block of the rule with exactly this selector. */ +function ruleBody(selector: string): { body: string; index: number } { + const index = css.indexOf(`${selector} {`); + expect(index, `no rule for ${selector}`).toBeGreaterThan(-1); + const open = css.indexOf('{', index); + return { body: css.slice(open + 1, css.indexOf('}', open)), index }; +} + +const weightOf = (body: string) => body.match(/font-weight:\s*(\d+)/)?.[1]; + +describe('Mountain View folder row weight (#1469)', () => { + it('does not bold the open folder', () => { + // Set explicitly: without it the row's own `font-semibold` for the + // selected state would still apply. + const weight = weightOf(ruleBody(`${NAV_ROW}[data-selected="true"]`).body); + expect(weight).toBeDefined(); + expect(Number(weight)).toBeLessThanOrEqual(400); + }); + + it('still bolds a folder with unread mail, also when it is open', () => { + const selected = ruleBody(`${NAV_ROW}[data-selected="true"]`); + const unread = ruleBody(`${NAV_ROW}[data-has-unread]`); + expect(Number(weightOf(unread.body))).toBeGreaterThanOrEqual(700); + // Same specificity, so the unread rule has to come later to win on a + // selected folder that has unread mail. + expect(unread.index).toBeGreaterThan(selected.index); + }); +});