feat: show calendar events in light tinted colours on request

src/lib/__tests__/calendar-tinted-events.test.ts

@@ -0,0 +1,51 @@
+import { describe, it, expect } from 'vitest';
+import fs from 'node:fs';
+import path from 'node:path';
+import { eventBlockColors, mixColors } from '../event-colors';
+import { mergeWithDefaults } from '../../stores/settings-store';
+
+// The webmail's "Light event colors" (calendarTintedEvents) had no
+// counterpart on the phone (file 10 "light tinted colours"). Webmail
+// event-card eventFillStyle: color-mix(color 20%, background), foreground
+// text, a calendar-coloured bar at the start.
+
+const page = { background: '#ffffff', text: '#111111' };
+const read = (rel: string) => fs.readFileSync(path.resolve(__dirname, '../..', rel), 'utf8');
+
+describe('light event colours', () => {
+  it('tints active events and adds the start bar', () => {
+    expect(eventBlockColors('#3b82f6', false, page, true)).toEqual({
+      fill: mixColors('#3b82f6', '#ffffff', 0.2),
+      text: '#111111',
+      border: null,
+      bar: '#3b82f6',
+    });
+    expect(mixColors('#3b82f6', '#ffffff', 0.2)).toBe('#d8e6fd');
+    // Solid blocks stay the default.
+    expect(eventBlockColors('#3b82f6', false, page)).toMatchObject({ fill: '#3b82f6' });
+    expect(eventBlockColors('#3b82f6', false, page).bar).toBeUndefined();
+  });
+
+  it('keeps declined and cancelled events outlined', () => {
+    const colors = eventBlockColors('#3b82f6', true, page, true);
+    expect(colors.border).toBe('#3b82f6');
+    expect(colors.fill).toBe('#ffffff');
+    expect(colors.bar).toBeUndefined();
+  });
+
+  it('is a setting, off by default, under the webmail key', () => {
+    expect(mergeWithDefaults({}).calendarTintedEvents).toBe(false);
+    expect(mergeWithDefaults({ calendarTintedEvents: true }).calendarTintedEvents).toBe(true);
+  });
+
+  // No RN renderer in the test env: check the wiring.
+  it('is offered in the calendar settings and read by every grid', () => {
+    expect(read('components/settings/CalendarSettings.tsx')).toMatch(/onChange=\{\(v\) => update\('calendarTintedEvents', v\)\}/);
+    for (const view of ['MonthView', 'TimeGridScrollView', 'WeekView']) {
+      const src = read(`components/calendar/${view}.tsx`);
+      expect(src).toMatch(/const tinted = useSettingsStore\(\(s\) => s\.calendarTintedEvents\);/);
+      expect(src).toMatch(/eventBlockColors\([\s\S]*?tinted,?\s*\)/);
+    }
+    expect(read('components/calendar/EventBlock.tsx').match(/colors\.bar \? <View pointerEvents="none" style=\{\[styles\.startBar/g)).toHaveLength(2);
+  });
+});

src/lib/event-colors.ts

@@ -149,17 +149,28 @@ export interface EventBlockColors {
   text: string;
   /** Inset border in the calendar colour, for declined and cancelled events only. */
   border: string | null;
+  /** The light style's bar along the start edge, in the calendar colour; null without it. */
+  bar?: string | null;
 }
 
+/** Share of the calendar colour in the light style's fill (webmail color-mix 20%). */
+export const TINTED_FILL_MIX = 0.2;
+/** Width of the light style's bar (webmail --start-bar-width). */
+export const TINTED_BAR_WIDTH = 3;
+
 /**
  * Fill, label and border of an event block, bar or chip. Active events are
- * solid calendar colour with a computed label colour; declined and cancelled
- * ones sit on the page ground inside a calendar-coloured border.
+ * solid calendar colour with a computed label colour, or with "Light event
+ * colors" (`tinted`) a 20% tint of it on the page ground with the text
+ * colour and a calendar-coloured bar at the start (webmail eventFillStyle);
+ * declined and cancelled ones sit on the page ground inside a
+ * calendar-coloured border either way.
  */
 export function eventBlockColors(
   calendarColor: string,
   inactive: boolean,
   page: { background: string; text: string },
+  tinted = false,
 ): EventBlockColors {
   if (inactive) {
     return {
@@ -168,5 +179,9 @@ export function eventBlockColors(
       border: calendarColor,
     };
   }
+  if (tinted) {
+    const fill = mixColors(calendarColor, page.background, TINTED_FILL_MIX);
+    if (fill) return { fill, text: page.text, border: null, bar: calendarColor };
+  }
   return { fill: calendarColor, text: readableTextOn(calendarColor), border: null };
 }