Fix Android launcher icon assets

Regenerate Android launcher icons from the blue striped source asset.
Add a repeatable generator and README documentation for the icon workflow.

README.md

@@ -154,6 +154,35 @@ Artifacts and summaries:
 - `output/playwright/test-lists/<project>-<role>.txt`
 - `output/playwright/test-lists/<role>-<project>.txt` (legacy compatibility copy)
 
+## Android App Icon
+
+The Play Store Android package is built from the Capacitor project in `android/`.
+The legacy Bubblewrap/TWA project at the repository root is not used by
+`npm run mobile:android:bundle`.
+
+The source image for the native launcher icon is:
+
+```text
+public/favicons/web-app-manifest-512x512.png
+```
+
+Regenerate the checked-in launcher assets after changing that source image:
+
+```sh
+npm run mobile:android:icons
+```
+
+Check that the generated Android launcher assets are current:
+
+```sh
+npm run mobile:android:icons:check
+```
+
+`npm run mobile:android:sync` runs the icon generator before building and syncing
+the Capacitor Android project. The generator updates `android/app/src/main/res`
+launcher assets, `public/icons/icon-192x192.png`, `public/icons/icon-512x512.png`,
+and `store_icon.png`.
+
 ## Bubblewrap (TWA) Build and Install
 
 To build and install the Trusted Web Activity (TWA) using Bubblewrap, use the following commands:

android/app/src/main/res/values/ic_launcher_background.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="ic_launcher_background">#FFFFFF</color>
-</resources>
+    <color name="ic_launcher_background">#0787BB</color>
+</resources>

package-lock.json

@@ -79,6 +79,7 @@
         "eslint-plugin-vue": "^10.9.2",
         "globals": "^17.6.0",
         "husky": "^9.1.7",
+        "jimp": "0.22.12",
         "jsdom": "^29.0.0",
         "otpauth": "^9.5.0",
         "prettier": "2.8.8",

package.json

@@ -55,7 +55,9 @@
     "twa:build": "bubblewrap build",
     "twa:update": "bubblewrap update",
     "mobile:sync": "npm run build && npx cap sync",
-    "mobile:android:sync": "npm run build && npx cap sync android",
+    "mobile:android:icons": "node scripts/mobile/generate-android-icons.mjs",
+    "mobile:android:icons:check": "node scripts/mobile/generate-android-icons.mjs --check",
+    "mobile:android:sync": "npm run mobile:android:icons && npm run build && npx cap sync android",
     "mobile:permissions:check": "node scripts/mobile/check-permissions.mjs",
     "mobile:android:signing:check": "node scripts/mobile/check-android-signing-env.mjs",
     "mobile:android:bundle": "npm run mobile:android:signing:check && npm run mobile:android:sync && npm run mobile:permissions:check && cd android && ./gradlew bundleRelease",
@@ -135,6 +137,7 @@
     "eslint-plugin-vue": "^10.9.2",
     "globals": "^17.6.0",
     "husky": "^9.1.7",
+    "jimp": "0.22.12",
     "jsdom": "^29.0.0",
     "otpauth": "^9.5.0",
     "prettier": "2.8.8",

scripts/mobile/generate-android-icons.mjs

@@ -0,0 +1,133 @@
+#!/usr/bin/env node
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import Jimp from "jimp";
+
+const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "../..");
+const sourcePath = path.join(projectRoot, "public/favicons/web-app-manifest-512x512.png");
+const checkOnly = process.argv.includes("--check");
+const launcherBackground = "#0787BB";
+
+const densityScale = {
+  mdpi: 1,
+  hdpi: 1.5,
+  xhdpi: 2,
+  xxhdpi: 3,
+  xxxhdpi: 4,
+};
+
+const targets = [
+  { relativePath: "public/icons/icon-512x512.png", size: 512, copySource: true },
+  { relativePath: "public/icons/icon-192x192.png", size: 192 },
+  { relativePath: "store_icon.png", size: 512, copySource: true },
+];
+
+for (const [density, scale] of Object.entries(densityScale)) {
+  const legacySize = Math.round(48 * scale);
+  const foregroundSize = Math.round(108 * scale);
+  targets.push(
+    {
+      relativePath: `android/app/src/main/res/mipmap-${density}/ic_launcher.png`,
+      size: legacySize,
+    },
+    {
+      relativePath: `android/app/src/main/res/mipmap-${density}/ic_launcher_round.png`,
+      size: legacySize,
+    },
+    {
+      relativePath: `android/app/src/main/res/mipmap-${density}/ic_launcher_foreground.png`,
+      size: foregroundSize,
+    },
+  );
+}
+
+const xmlTargets = [
+  {
+    relativePath: "android/app/src/main/res/values/ic_launcher_background.xml",
+    content: `<?xml version="1.0" encoding="utf-8"?>\n<resources>\n    <color name="ic_launcher_background">${launcherBackground}</color>\n</resources>\n`,
+  },
+];
+
+function targetPath(relativePath) {
+  return path.join(projectRoot, relativePath);
+}
+
+async function readIfExists(filePath) {
+  try {
+    return await fs.readFile(filePath);
+  } catch (error) {
+    if (error.code === "ENOENT") {
+      return null;
+    }
+    throw error;
+  }
+}
+
+async function writeIfChanged(relativePath, content) {
+  const filePath = targetPath(relativePath);
+  const current = await readIfExists(filePath);
+
+  if (current?.equals(content)) {
+    return false;
+  }
+
+  if (checkOnly) {
+    return true;
+  }
+
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+  await fs.writeFile(filePath, content);
+  return true;
+}
+
+async function renderPng(sourceImage, size) {
+  const image = sourceImage.clone().resize(size, size, Jimp.RESIZE_BICUBIC);
+  return image.getBufferAsync(Jimp.MIME_PNG);
+}
+
+async function main() {
+  const sourceBuffer = await fs.readFile(sourcePath);
+  const sourceImage = await Jimp.read(sourceBuffer);
+
+  if (sourceImage.bitmap.width !== 512 || sourceImage.bitmap.height !== 512) {
+    throw new Error(`Expected ${path.relative(projectRoot, sourcePath)} to be a 512x512 PNG.`);
+  }
+
+  const changed = [];
+
+  for (const target of targets) {
+    const buffer = target.copySource ? sourceBuffer : await renderPng(sourceImage, target.size);
+    if (await writeIfChanged(target.relativePath, buffer)) {
+      changed.push(target.relativePath);
+    }
+  }
+
+  for (const target of xmlTargets) {
+    if (await writeIfChanged(target.relativePath, Buffer.from(target.content))) {
+      changed.push(target.relativePath);
+    }
+  }
+
+  if (changed.length === 0) {
+    console.log(`Android icon assets are current (${targets.length + xmlTargets.length} files).`);
+    return;
+  }
+
+  if (checkOnly) {
+    console.error("Android icon assets are out of date:");
+    for (const relativePath of changed) {
+      console.error(`- ${relativePath}`);
+    }
+    console.error("Run `npm run mobile:android:icons`.");
+    process.exitCode = 1;
+    return;
+  }
+
+  console.log(`Updated ${changed.length} Android icon asset${changed.length === 1 ? "" : "s"}.`);
+}
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exitCode = 1;
+});