Prepare Android beta branding and review diff UI

apps/mobile/app-variants.test.ts

@@ -0,0 +1,62 @@
+import * as NodeFS from "node:fs";
+import * as NodeURL from "node:url";
+
+import { describe, expect, it } from "vite-plus/test";
+
+import { APP_VARIANT_CONFIG, resolveAppVariant } from "./app-variants";
+
+function pngDimensions(path: string): { readonly width: number; readonly height: number } {
+  const file = NodeFS.readFileSync(NodeURL.fileURLToPath(new URL(path, import.meta.url)));
+  return {
+    width: file.readUInt32BE(16),
+    height: file.readUInt32BE(20),
+  };
+}
+
+describe("mobile app variants", () => {
+  it("defaults unknown or missing variants to production", () => {
+    expect(resolveAppVariant(undefined)).toBe("production");
+    expect(resolveAppVariant("unknown")).toBe("production");
+    expect(resolveAppVariant("development")).toBe("development");
+    expect(resolveAppVariant("preview")).toBe("preview");
+    expect(resolveAppVariant("production")).toBe("production");
+  });
+
+  it("keeps blueprint branding exclusive to development builds", () => {
+    expect(APP_VARIANT_CONFIG.development.assets).toMatchObject({
+      appIcon: "./assets/splash-icon-dev.png",
+      androidAdaptiveForeground: "./assets/android-icon-dev-foreground.png",
+    });
+    expect(APP_VARIANT_CONFIG.preview.assets).toBe(APP_VARIANT_CONFIG.production.assets);
+    expect(APP_VARIANT_CONFIG.production.assets).toMatchObject({
+      appIcon: "./assets/splash-icon-prod.png",
+      androidAdaptiveForeground: "./assets/android-icon-mark.png",
+      androidAdaptiveBackgroundColor: "#000000",
+    });
+  });
+
+  it("references assets that exist for every build variant", () => {
+    for (const variant of Object.values(APP_VARIANT_CONFIG)) {
+      for (const [name, path] of Object.entries(variant.assets)) {
+        if (!name.endsWith("Color")) {
+          expect(
+            NodeFS.existsSync(NodeURL.fileURLToPath(new URL(path, import.meta.url))),
+            path,
+          ).toBe(true);
+        }
+      }
+    }
+  });
+
+  it.each([
+    ["./assets/splash-icon-dev.png", 1024, 1024],
+    ["./assets/splash-icon-prod.png", 1024, 1024],
+    ["./assets/android-icon-dev-foreground.png", 432, 432],
+    ["./assets/android-icon-mark.png", 432, 432],
+    ["./assets/android-notification-icon.png", 96, 96],
+    ["./store-assets/google-play-icon.png", 512, 512],
+    ["./store-assets/google-play-feature-graphic.png", 1024, 500],
+  ] as const)("keeps %s at its required %ix%i dimensions", (path, width, height) => {
+    expect(pngDimensions(path)).toEqual({ width, height });
+  });
+});

apps/mobile/app-variants.ts

@@ -0,0 +1,81 @@
+export type AppVariant = "development" | "preview" | "production";
+
+export interface AppVariantAssets {
+  readonly appIcon: string;
+  readonly iosIcon: string;
+  readonly splashIcon: string;
+  readonly androidAdaptiveForeground: string;
+  readonly androidAdaptiveBackgroundColor: string;
+  readonly androidMonochromeIcon: string;
+  readonly androidNotificationIcon: string;
+  readonly androidNotificationColor: string;
+}
+
+export interface AppVariantConfig {
+  readonly appName: string;
+  readonly scheme: string;
+  readonly iosBundleIdentifier: string;
+  readonly androidPackage: string;
+  readonly relyingParty?: string;
+  readonly assets: AppVariantAssets;
+}
+
+const DEVELOPMENT_ASSETS = {
+  appIcon: "./assets/splash-icon-dev.png",
+  iosIcon: "./assets/icon-composer-dev.icon",
+  splashIcon: "./assets/splash-icon-dev.png",
+  androidAdaptiveForeground: "./assets/android-icon-dev-foreground.png",
+  androidAdaptiveBackgroundColor: "#00639B",
+  androidMonochromeIcon: "./assets/android-icon-mark.png",
+  androidNotificationIcon: "./assets/android-notification-icon.png",
+  androidNotificationColor: "#00639B",
+} as const satisfies AppVariantAssets;
+
+const RELEASE_ASSETS = {
+  appIcon: "./assets/splash-icon-prod.png",
+  iosIcon: "./assets/icon-composer-prod.icon",
+  splashIcon: "./assets/splash-icon-prod.png",
+  androidAdaptiveForeground: "./assets/android-icon-mark.png",
+  androidAdaptiveBackgroundColor: "#000000",
+  androidMonochromeIcon: "./assets/android-icon-mark.png",
+  androidNotificationIcon: "./assets/android-notification-icon.png",
+  androidNotificationColor: "#FFFFFF",
+} as const satisfies AppVariantAssets;
+
+export const APP_VARIANT_CONFIG = {
+  development: {
+    appName: "T3 Code Dev",
+    scheme: "t3code-dev",
+    iosBundleIdentifier: "com.t3tools.t3code.dev",
+    androidPackage: "com.t3tools.t3code.dev",
+    relyingParty: "clerk.t3.codes",
+    assets: DEVELOPMENT_ASSETS,
+  },
+  preview: {
+    appName: "T3 Code Preview",
+    scheme: "t3code-preview",
+    iosBundleIdentifier: "com.t3tools.t3code.preview",
+    androidPackage: "com.t3tools.t3code.preview",
+    relyingParty: "clerk.t3.codes",
+    assets: RELEASE_ASSETS,
+  },
+  production: {
+    appName: "T3 Code",
+    scheme: "t3code",
+    iosBundleIdentifier: "com.t3tools.t3code",
+    androidPackage: "com.t3tools.t3code",
+    relyingParty: "clerk.t3.codes",
+    assets: RELEASE_ASSETS,
+  },
+} as const satisfies Record<AppVariant, AppVariantConfig>;
+
+export function resolveAppVariant(value: string | undefined): AppVariant {
+  switch (value) {
+    case "development":
+    case "preview":
+    case "production":
+      return value;
+    default:
+      return "production";
+  }
+}

apps/mobile/app.config.ts

@@ -1,8 +1,7 @@
 import type { ExpoConfig } from "expo/config";
 
 import { loadRepoEnv } from "../../scripts/lib/public-config.ts";
-
-type AppVariant = "development" | "preview" | "production";
+import { APP_VARIANT_CONFIG, resolveAppVariant } from "./app-variants.ts";
 
 const repoEnv = loadRepoEnv();
 Object.assign(process.env, repoEnv);
@@ -23,59 +22,7 @@ if (
   );
 }
 
-const VARIANT_CONFIG: Record<
-  AppVariant,
-  {
-    readonly appName: string;
-    readonly scheme: string;
-    readonly iosIcon: string;
-    readonly splashIcon: string;
-    readonly iosBundleIdentifier: string;
-    readonly androidPackage: string;
-    readonly relyingParty?: string;
-  }
-> = {
-  development: {
-    appName: "T3 Code Dev",
-    scheme: "t3code-dev",
-    iosIcon: "./assets/icon-composer-dev.icon",
-    splashIcon: "./assets/splash-icon-dev.png",
-    iosBundleIdentifier: "com.t3tools.t3code.dev",
-    androidPackage: "com.t3tools.t3code.dev",
-    relyingParty: "clerk.t3.codes",
-  },
-  preview: {
-    appName: "T3 Code Preview",
-    scheme: "t3code-preview",
-    iosIcon: "./assets/icon-composer-prod.icon",
-    splashIcon: "./assets/splash-icon-prod.png",
-    iosBundleIdentifier: "com.t3tools.t3code.preview",
-    androidPackage: "com.t3tools.t3code.preview",
-    relyingParty: "clerk.t3.codes",
-  },
-  production: {
-    appName: "T3 Code",
-    scheme: "t3code",
-    iosIcon: "./assets/icon-composer-prod.icon",
-    splashIcon: "./assets/splash-icon-prod.png",
-    iosBundleIdentifier: "com.t3tools.t3code",
-    androidPackage: "com.t3tools.t3code",
-    relyingParty: "clerk.t3.codes",
-  },
-};
-
-function resolveAppVariant(value: string | undefined): AppVariant {
-  switch (value) {
-    case "development":
-    case "preview":
-    case "production":
-      return value;
-    default:
-      return "production";
-  }
-}
-
-const variant = VARIANT_CONFIG[APP_VARIANT];
+const variant = APP_VARIANT_CONFIG[APP_VARIANT];
 
 const dmSansFonts = {
   regular: "@expo-google-fonts/dm-sans/400Regular/DMSans_400Regular.ttf",
@@ -121,7 +68,7 @@ const config: ExpoConfig = {
     policy: process.env.MOBILE_VERSION_POLICY ?? "fingerprint",
   },
   orientation: "portrait",
-  icon: "./assets/icon.png",
+  icon: variant.assets.appIcon,
   userInterfaceStyle: "automatic",
   updates: {
     enabled: true,
@@ -130,7 +77,7 @@ const config: ExpoConfig = {
     fallbackToCacheTimeout: 0,
   },
   ios: {
-    icon: variant.iosIcon,
+    icon: variant.assets.iosIcon,
     supportsTablet: true,
     bundleIdentifier: variant.iosBundleIdentifier,
     // Pin code signing to the T3 Tools team so non-interactive `expo run:ios`
@@ -151,21 +98,20 @@ const config: ExpoConfig = {
     },
   },
   android: {
-    icon: "./assets/icon.png",
+    icon: variant.assets.appIcon,
     package: variant.androidPackage,
     adaptiveIcon: {
-      backgroundColor: "#E6F4FE",
-      foregroundImage: "./assets/android-icon-foreground.png",
-      backgroundImage: "./assets/android-icon-background.png",
-      monochromeImage: "./assets/android-icon-monochrome.png",
+      backgroundColor: variant.assets.androidAdaptiveBackgroundColor,
+      foregroundImage: variant.assets.androidAdaptiveForeground,
+      monochromeImage: variant.assets.androidMonochromeIcon,
     },
     // Opts into OnBackInvokedCallback-based back dispatch (Android 13+).
     // JS back handling survives it via react-native's Android 16 shim plus
     // withAndroidPredictiveBackCompat on Android 13-15.
     predictiveBackGestureEnabled: true,
   },
   web: {
-    favicon: "./assets/favicon.png",
+    favicon: variant.assets.appIcon,
   },
   plugins: [
     "expo-asset",
@@ -195,6 +141,14 @@ const config: ExpoConfig = {
     ],
     "expo-secure-store",
     "expo-sqlite",
+    [
+      "expo-notifications",
+      {
+        icon: variant.assets.androidNotificationIcon,
+        color: variant.assets.androidNotificationColor,
+        mode: APP_VARIANT === "development" ? "development" : "production",
+      },
+    ],
     // appleSignIn must be gated here: withoutIosPersonalTeamCapabilities.cjs runs before
     // plugins earlier in this array, so it cannot strip the entitlement Clerk would add.
     ["@clerk/expo", { theme: "./clerk-theme.json", appleSignIn: !isIosPersonalTeamBuild }],
@@ -206,8 +160,8 @@ const config: ExpoConfig = {
         // the shortcut items set in src/features/shortcuts.
         androidIcons: {
           shortcut_icon: {
-            foregroundImage: "./assets/android-icon-foreground.png",
-            backgroundColor: "#E6F4FE",
+            foregroundImage: variant.assets.androidAdaptiveForeground,
+            backgroundColor: variant.assets.androidAdaptiveBackgroundColor,
           },
         },
       },
@@ -217,17 +171,18 @@ const config: ExpoConfig = {
       {
         cameraPermission: "Allow T3 Code to access your camera so you can scan pairing QR codes.",
         barcodeScannerEnabled: true,
+        recordAudioAndroid: false,
       },
     ],
     [
       "expo-splash-screen",
       {
-        image: variant.splashIcon,
+        image: variant.assets.splashIcon,
         resizeMode: "contain",
         backgroundColor: "#ffffff",
         imageWidth: 220,
         dark: {
-          image: variant.splashIcon,
+          image: variant.assets.splashIcon,
           backgroundColor: "#0a0a0a",
         },
       },