fix(android): tint the widget header with a low-alpha accent wash over the card and show the list title with its count on non-Focus widgets (#1173)

Author: dongdongbh

apps/mobile/lib/widget-data.test.ts

@@ -138,6 +138,7 @@ describe('widget-data', () => {
         expect(payload.sections[2].detail).toBeNull();
         expect(payload.dateLabel).toMatch(/\d/);
         expect(payload.palette.warning).toMatch(/^#/);
+        expect(payload.palette.headerWash).toMatch(/^#[0-9a-f]{8}$/i);
         expect(scheduleByTitle.get('Due today')?.contextLabel).toBe('Home');
         expect(payload.sections[2].items[0]).toMatchObject({ priorityColor: null, contextLabel: null });
         // Priorities off: the colour is gated with the feature.

apps/mobile/lib/widget-data.ts

@@ -1,5 +1,6 @@
 import {
     computeTodayFocusTasks,
+    getAccentTint,
     getTaskAccentColor,
     getUpcomingDeferredTasks,
     hasTimeComponent,
@@ -103,6 +104,8 @@ export interface WidgetPalette {
     accent: WidgetColor;
     onAccent: WidgetColor;
     warning: WidgetColor;
+    // Accent wash for the widget header band over the card (core getAccentTint).
+    headerWash: WidgetColor;
 }
 
 // One list a placed Tasks widget can show (#1173); `focus` mirrors the
@@ -300,6 +303,7 @@ const resolveWidgetPalette = (
             accent: preset.tint,
             onAccent: preset.onTint,
             warning: preset.warning,
+            headerWash: (getAccentTint(preset.tint, isDarkPreset(preset) ? 0.18 : 0.12) ?? preset.tint) as WidgetColor,
         };
     }
 
@@ -318,6 +322,7 @@ const resolveWidgetPalette = (
             accent: '#2563EB',
             onAccent: '#FFFFFF',
             warning: '#F59E0B',
+            headerWash: getAccentTint('#2563EB', 0.18) as WidgetColor,
         };
     }
 
@@ -330,9 +335,20 @@ const resolveWidgetPalette = (
         accent: '#2563EB',
         onAccent: '#FFFFFF',
         warning: '#D97706',
+        headerWash: getAccentTint('#2563EB', 0.12) as WidgetColor,
     };
 };
 
+// A preset counts as dark when its background is darker than mid-grey.
+const isDarkPreset = (preset: { bg: string }): boolean => {
+    const hex = preset.bg.replace('#', '');
+    if (hex.length !== 6) return false;
+    const r = parseInt(hex.slice(0, 2), 16);
+    const g = parseInt(hex.slice(2, 4), 16);
+    const b = parseInt(hex.slice(4, 6), 16);
+    return (r * 299 + g * 587 + b * 114) / 1000 < 128;
+};
+
 export function buildWidgetPayload(
     data: AppData,
     language: Language,

apps/mobile/modules/android-widget/android/src/main/java/tech/dongdongbh/mindwtr/androidwidget/WidgetPayload.kt

@@ -57,6 +57,7 @@ data class WidgetPayload(
     val onAccent: Int,
     val border: Int,
     val warning: Int,
+    val headerWash: Int,
   )
 
   data class QuickCaptureLabels(
@@ -215,17 +216,22 @@ data class WidgetPayload(
         onAccent = parseHexColor(json.optString("onAccent")) ?: background,
         border = parseHexColor(json.optString("border")) ?: (parseHexColor(json.optString("mutedText")) ?: text),
         warning = parseHexColor(json.optString("warning")) ?: (parseHexColor(json.optString("accent")) ?: text),
+        headerWash = parseHexColor(json.optString("headerWash"))
+          ?: WidgetRenderer.withAlpha(parseHexColor(json.optString("accent")) ?: text, 0x2E),
       )
     }
 
     fun appUriOrNull(value: String?): String? = value?.takeIf { it.startsWith("mindwtr:") }
 
-    /** `#RRGGBB` or `#AARRGGBB` to an ARGB int; android.graphics.Color is a stub on the JVM. */
+    /**
+     * `#RRGGBB` or `#RRGGBBAA` (CSS order, what core's getAccentTint writes) to
+     * an ARGB int; android.graphics.Color is a stub on the JVM.
+     */
     fun parseHexColor(value: String?): Int? {
       val hex = value?.trim()?.removePrefix("#") ?: return null
       val digits = when (hex.length) {
         6 -> "FF$hex"
-        8 -> hex
+        8 -> hex.substring(6, 8) + hex.substring(0, 6)
         else -> return null
       }
       return digits.toLongOrNull(16)?.toInt()

apps/mobile/modules/android-widget/android/src/main/java/tech/dongdongbh/mindwtr/androidwidget/WidgetRenderer.kt

@@ -68,10 +68,15 @@ object WidgetRenderer {
     payload: WidgetPayload,
     palette: WidgetPayload.Palette?,
   ) {
-    // Header band: the list's title (the date for Focus), the Inbox chip and "+".
-    val list = payload.listFor(WidgetListStore.read(context, appWidgetId))
-    views.setTextViewText(R.id.mindwtr_widget_title, list.dateLabel?.ifEmpty { null } ?: list.title)
+    // Header: Focus shows the date plus the Inbox chip; any other list shows its
+    // full title with a small count, so the header never reads as two lists.
+    val listId = WidgetListStore.read(context, appWidgetId)
+    val list = payload.listFor(listId)
+    val isFocus = listId == WidgetListStore.DEFAULT_LIST || payload.lists[listId] == null
+    val rowCount = if (list.sections.isEmpty()) list.items.size else list.sections.sumOf { it.items.size }
+    views.setTextViewText(R.id.mindwtr_widget_title, if (isFocus) list.dateLabel?.ifEmpty { null } ?: list.title else "${list.title} · $rowCount")
     views.setTextViewText(R.id.mindwtr_widget_subtitle, "${payload.inboxLabel} ${payload.inboxCount}")
+    views.setViewVisibility(R.id.mindwtr_widget_subtitle, if (isFocus) View.VISIBLE else View.GONE)
     views.setTextViewText(R.id.mindwtr_widget_empty, payload.emptyMessage)
     views.setViewVisibility(R.id.mindwtr_widget_empty, if (list.items.isEmpty() && list.sections.isEmpty()) View.VISIBLE else View.GONE)
 
@@ -100,11 +105,12 @@ object WidgetRenderer {
       PendingIntent.getActivity(context, REQUEST_ROW, rowTemplate, mutable),
     )
 
-    // The header shares the body surface (dd: a solid accent band contrasted
-    // too hard); the accent sits only on the date and the "+".
+    // Header = a low-alpha accent wash over the card with a hairline under it
+    // (dd: some contrast, not the solid band); the accent itself only on "+".
     palette?.let {
       views.setInt(R.id.mindwtr_widget_surface, "setColorFilter", it.background)
-      views.setTextColor(R.id.mindwtr_widget_title, it.accent)
+      views.setInt(R.id.mindwtr_widget_band, "setColorFilter", it.headerWash)
+      views.setTextColor(R.id.mindwtr_widget_title, it.text)
       views.setTextColor(R.id.mindwtr_widget_subtitle, it.mutedText)
       views.setTextColor(R.id.mindwtr_widget_capture, it.accent)
       views.setInt(R.id.mindwtr_widget_header_divider, "setBackgroundColor", it.border)

apps/mobile/modules/android-widget/android/src/main/res/drawable/mindwtr_widget_band.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <corners android:topLeftRadius="16dp" android:topRightRadius="16dp" />
-    <solid android:color="@color/mindwtr_widget_accent" />
+    <solid android:color="@color/mindwtr_widget_header_wash" />
 </shape>

apps/mobile/modules/android-widget/android/src/main/res/layout/mindwtr_widget.xml

@@ -31,8 +31,7 @@
                 android:layout_height="match_parent"
                 android:importantForAccessibility="no"
                 android:scaleType="fitXY"
-                android:src="@drawable/mindwtr_widget_band"
-                android:visibility="gone" />
+                android:src="@drawable/mindwtr_widget_band" />
 
             <LinearLayout
                 android:layout_width="match_parent"
@@ -49,7 +48,7 @@
                     android:layout_weight="1"
                     android:ellipsize="end"
                     android:singleLine="true"
-                    android:textColor="@color/mindwtr_widget_accent"
+                    android:textColor="@color/mindwtr_widget_text"
                     android:textSize="15sp"
                     android:textStyle="bold" />
 

apps/mobile/modules/android-widget/android/src/main/res/values-night/colors.xml

@@ -8,5 +8,6 @@
     <color name="mindwtr_widget_accent">#2563EB</color>
     <color name="mindwtr_widget_border">#374151</color>
     <color name="mindwtr_widget_warning">#F59E0B</color>
+    <color name="mindwtr_widget_header_wash">#2E2563EB</color>
     <color name="mindwtr_widget_on_accent">#FFFFFF</color>
 </resources>

apps/mobile/modules/android-widget/android/src/main/res/values/colors.xml

@@ -10,5 +10,6 @@
     <color name="mindwtr_widget_accent">#2563EB</color>
     <color name="mindwtr_widget_border">#CBD5E1</color>
     <color name="mindwtr_widget_warning">#D97706</color>
+    <color name="mindwtr_widget_header_wash">#1F2563EB</color>
     <color name="mindwtr_widget_on_accent">#FFFFFF</color>
 </resources>

apps/mobile/modules/android-widget/android/src/test/java/tech/dongdongbh/mindwtr/androidwidget/WidgetPayloadTest.kt

@@ -36,7 +36,7 @@ class WidgetPayloadTest {
       "emptyMessage": "All clear",
       "focusUri": "mindwtr:///focus",
       "themeMode": "dark",
-      "palette": {"background": "#111827", "card": "#1F2937", "text": "#F9FAFB", "mutedText": "#CBD5E1", "accent": "#2563EB", "onAccent": "#FFFFFF", "border": "#374151", "warning": "#F59E0B"},
+      "palette": {"background": "#111827", "card": "#1F2937", "text": "#F9FAFB", "mutedText": "#CBD5E1", "accent": "#2563EB", "onAccent": "#FFFFFF", "border": "#374151", "warning": "#F59E0B", "headerWash": "#2563EB2E"},
       "quickCapture": {"title": "Quick capture", "placeholder": "Add task to inbox...", "save": "Save", "cancel": "Cancel", "added": "Task added to Mindwtr."}
     }
   """.trimIndent()
@@ -67,6 +67,7 @@ class WidgetPayloadTest {
     assertEquals("Saturday, Sep 6", payload.dateLabel)
     assertEquals(0xFF374151.toInt(), payload.palette!!.border)
     assertEquals(0xFFF59E0B.toInt(), payload.palette!!.warning)
+    assertEquals(0x2E2563EB, payload.palette!!.headerWash)
     assertNull(payload.sections[1].items[0].contextLabel)
     val rows = TasksWidgetFactory.buildRows(WidgetPayload.ListPayload("", null, payload.sections, payload.items))
     assertEquals(4, rows.size)
@@ -131,7 +132,7 @@ class WidgetPayloadTest {
   @Test
   fun parsesHexColorsWithAndWithoutAlpha() {
     assertEquals(0xFF2563EB.toInt(), WidgetPayload.parseHexColor("#2563EB"))
-    assertEquals(0x802563EB.toInt(), WidgetPayload.parseHexColor("#802563EB"))
+    assertEquals(0x802563EB.toInt(), WidgetPayload.parseHexColor("#2563EB80"))
     assertNull(WidgetPayload.parseHexColor("blue"))
     assertNull(WidgetPayload.parseHexColor(null))
   }