Add Clean Air Forum selfie filter, live camera guide, and IG sticker (mobile)

src/mobile/android/app/build.gradle

@@ -77,7 +77,7 @@ if (releaseKeystorePropertiesFile.exists()) {
 android {
     namespace "com.airqo.app"
     compileSdk 36
-    ndkVersion flutter.ndkVersion
+    ndkVersion "27.0.12077973"
 
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_9
@@ -98,7 +98,7 @@ android {
         applicationId "com.airqo.app"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 24
         targetSdkVersion 36
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

src/mobile/android/app/src/main/AndroidManifest.xml

@@ -3,6 +3,9 @@
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-feature android:name="android.hardware.camera" android:required="false" />
+    <uses-feature android:name="android.hardware.camera.front" android:required="false" />
     <application
         android:label="AirQo"
         android:name="${applicationName}"
@@ -43,6 +46,16 @@
         <meta-data
             android:name="flutterEmbedding"
             android:value="2" />
+        <!-- Required by pasteboard to write images to the Android clipboard. -->
+        <provider
+            android:name="androidx.core.content.FileProvider"
+            android:authorities="${applicationId}.provider"
+            android:exported="false"
+            android:grantUriPermissions="true">
+            <meta-data
+                android:name="android.support.FILE_PROVIDER_PATHS"
+                android:resource="@xml/provider_paths" />
+        </provider>
     </application>
     <!-- Required to query activities that can process text, see:
          https://developer.android.com/training/package-visibility?hl=en and

src/mobile/android/app/src/main/res/xml/provider_paths.xml

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<paths xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- pasteboard's writeImage writes to context.cacheDir, which needs a
+         cache-path entry — the external-path alone (from pasteboard's own
+         README) doesn't cover it, causing FileProvider to throw "failed to
+         find configured root" for that file. -->
+    <cache-path
+        name="cache"
+        path="." />
+    <external-path
+        name="external_files"
+        path="." />
+</paths>

src/mobile/lib/src/app/dashboard/utils/air_quality_card_utils.dart

@@ -0,0 +1,148 @@
+import 'dart:convert';
+
+import 'package:airqo/src/app/dashboard/models/airquality_response.dart';
+import 'package:airqo/src/meta/utils/colors.dart';
+import 'package:flutter/material.dart';
+
+/// Shared rendering helpers for the air-quality share/filter/sticker cards so
+/// they all present identical values (color, category label, sanitized
+/// text) without duplicating logic in every widget.
+
+/// Windows-1252 maps bytes 0x80-0x9F to these code points (smart quotes,
+/// em-dashes, etc.) instead of leaving them as Latin-1 control codes. When
+/// UTF-8 text is mis-decoded as Windows-1252, these are the code points
+/// that show up — e.g. "it's" becomes "it’s". Plain `latin1.encode`
+/// can't reverse these (they're outside Latin-1's 0-255 range entirely),
+/// so it throws and the mojibake silently survives.
+const Map<int, int> _windows1252HighBytes = {
+  0x20AC: 0x80, // €
+  0x201A: 0x82, // ‚
+  0x0192: 0x83, // ƒ
+  0x201E: 0x84, // „
+  0x2026: 0x85, // …
+  0x2020: 0x86, // †
+  0x2021: 0x87, // ‡
+  0x02C6: 0x88, // ˆ
+  0x2030: 0x89, // ‰
+  0x0160: 0x8A, // Š
+  0x2039: 0x8B, // ‹
+  0x0152: 0x8C, // Œ
+  0x017D: 0x8E, // Ž
+  0x2018: 0x91, // '
+  0x2019: 0x92, // '
+  0x201C: 0x93, // "
+  0x201D: 0x94, // "
+  0x2022: 0x95, // •
+  0x2013: 0x96, // –
+  0x2014: 0x97, // —
+  0x02DC: 0x98, // ˜
+  0x2122: 0x99, // ™
+  0x0161: 0x9A, // š
+  0x203A: 0x9B, // ›
+  0x0153: 0x9C, // œ
+  0x017E: 0x9E, // ž
+  0x0178: 0x9F, // Ÿ
+};
+
+/// Fixes mojibake that occasionally shows up in API text fields — UTF-8
+/// bytes that got shown as Latin-1/Windows-1252 text, e.g. "Café" instead
+/// of "Café" or "it’s" instead of "it's".
+///
+/// Only rewrites strings matching one of the classic mojibake signatures
+/// below ('Ã' or 'Â' immediately followed by another character, or the
+/// smart-quote/dash prefix 'â€') — a bare 'â' is left alone, since that's a
+/// legitimate letter in its own right (e.g. "château", "âge").
+String sanitizeCardText(String value) {
+  final looksLikeMojibake =
+      value.contains('Ã') || value.contains('â€') || value.contains('Â');
+  if (!looksLikeMojibake) return value;
+
+  final bytes = <int>[];
+  for (final unit in value.codeUnits) {
+    if (unit <= 0xFF) {
+      bytes.add(unit);
+      continue;
+    }
+    final mappedByte = _windows1252HighBytes[unit];
+    if (mappedByte == null) return value; // Not a reversible mojibake byte.
+    bytes.add(mappedByte);
+  }
+
+  try {
+    return utf8.decode(bytes);
+  } catch (_) {
+    return value;
+  }
+}
+
+/// Resolves the AQI accent color for a measurement, preferring the color
+/// returned by the API and falling back to a category lookup.
+Color getMeasurementAqiColor(Measurement measurement) {
+  if (measurement.aqiColor != null) {
+    try {
+      final colorString = measurement.aqiColor!.replaceAll('#', '');
+      return Color(int.parse('0xFF$colorString'));
+    } catch (_) {}
+  }
+
+  switch (measurement.aqiCategory?.toLowerCase() ?? '') {
+    case 'good':
+      return const Color(0xFF179D5B);
+    case 'moderate':
+      return const Color(0xFFC79000);
+    case 'unhealthy for sensitive groups':
+    case 'u4sg':
+      return const Color(0xFFE17827);
+    case 'unhealthy':
+      return const Color(0xFFD63A45);
+    case 'very unhealthy':
+      return const Color(0xFF7540B5);
+    case 'hazardous':
+      return const Color(0xFF6D4C41);
+    default:
+      return AppColors.primaryColor;
+  }
+}
+
+/// Shortens verbose AQI category labels so they fit on compact card pills.
+String aqiCategoryLabel(String category) {
+  switch (category.toLowerCase()) {
+    case 'unhealthy for sensitive groups':
+      return 'Sensitive Groups';
+    case 'very unhealthy':
+      return 'Very Unhealthy';
+    default:
+      return category;
+  }
+}
+
+/// Light pastel background for an AQI status pill, derived by blending the
+/// category color into white — matches the Figma "Label/Status/Good"
+/// component style (solid pale bg + solid saturated text) rather than a
+/// translucent overlay, which reads as muddy over photos.
+Color aqiPillBackground(Color categoryColor) {
+  return Color.alphaBlend(categoryColor.withValues(alpha: 0.18), Colors.white);
+}
+
+/// Resolves the circular AQI "wheel" icon (ring + face) used on the share
+/// card, filter, and sticker templates — same asset set used across the
+/// dashboard and map so the icon always matches the category color.
+String getMeasurementAqiIconAsset(Measurement measurement) {
+  switch (measurement.aqiCategory?.toLowerCase() ?? '') {
+    case 'good':
+      return 'assets/images/shared/airquality_indicators/good.svg';
+    case 'moderate':
+      return 'assets/images/shared/airquality_indicators/moderate.svg';
+    case 'unhealthy for sensitive groups':
+    case 'u4sg':
+      return 'assets/images/shared/airquality_indicators/unhealthy-sensitive.svg';
+    case 'unhealthy':
+      return 'assets/images/shared/airquality_indicators/unhealthy.svg';
+    case 'very unhealthy':
+      return 'assets/images/shared/airquality_indicators/very-unhealthy.svg';
+    case 'hazardous':
+      return 'assets/images/shared/airquality_indicators/hazardous.svg';
+    default:
+      return 'assets/images/shared/airquality_indicators/unavailable.svg';
+  }
+}

src/mobile/lib/src/app/dashboard/utils/clean_air_forum_branding.dart

@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+
+/// Branding for the Africa Clean Air Forum selfie filter, based on the
+/// "AQ/CAF" Figma templates (file `Z0OLd2awVqgZhytJULgO8L`, node 169:534 /
+/// 169:491).
+///
+/// All templates were designed on a 1080x1080 canvas — [kCafReferenceWidth]
+/// — so every size/gap in [CleanAirForumFilterCard] and
+/// [CleanAirForumStickerFrame] is expressed as a fraction of that reference
+/// and multiplied by the widget's actual rendered width. This keeps the
+/// layout proportionally identical to the Figma design no matter what
+/// resolution the card is previewed or captured at.
+class CleanAirForumBrand {
+  const CleanAirForumBrand._();
+
+  /// "Vibrant sky blue" — matches the Africa Clean Air Network palette.
+  static const Color skyBlue = Color(0xFF1E9BE0);
+
+  /// "Nature green" — matches the Africa Clean Air Network palette.
+  static const Color natureGreen = Color(0xFF2FA84F);
+
+  /// Deep teal used for the filter card's bottom scrim, matching the Figma
+  /// "AQ/CAF" template.
+  static const Color scrimTeal = Color(0xFF005257);
+
+  /// Text color for the "Shared from the AirQo app" pill/caption, matching
+  /// the Figma template exactly (distinct from [scrimTeal]).
+  static const Color sharedCaptionText = Color(0xFF1F3D3D);
+
+  /// Host city + year shown under the "Clean Air Forum" wordmark.
+  static const String edition = 'Pretoria 2026';
+
+  /// Event date range shown in the corner of the filter card.
+  static const String dateRange = '13TH-16TH JULY';
+}
+
+/// Reference canvas width the Figma "AQ/CAF" templates were designed at.
+/// Multiply this against any Figma pixel value, divided by this constant,
+/// to get a proportionally-correct size for a card of a given width.
+const double kCafReferenceWidth = 1080.0;
+
+/// AirQo house-mark icon, recolorable for use on photos/colored backgrounds.
+///
+/// The "airqo" wordmark is cut out of the shape as negative space (rather
+/// than drawn), so whatever sits behind the icon shows through the letters
+/// — matching the Figma logo lockup exactly.
+class AirQoIconMark extends StatelessWidget {
+  final double size;
+  final Color color;
+
+  const AirQoIconMark({super.key, this.size = 28, this.color = Colors.white});
+
+  /// Intrinsic aspect ratio of the source asset (143.38 x 97).
+  static const double aspectRatio = 97 / 143.38;
+
+  @override
+  Widget build(BuildContext context) {
+    return SvgPicture.asset(
+      'assets/images/shared/airqo_icon_mark.svg',
+      width: size,
+      height: size * aspectRatio,
+      colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
+    );
+  }
+}
+
+/// AirQo icon + "Clean Air Forum" wordmark lockup shown top-left on the
+/// selfie filter card: logo mark, a vertical divider, then the title/edition
+/// text — matches the Figma "AQ/CAF" header exactly (node 169:538).
+///
+/// [scale] is the card's rendered width divided by [kCafReferenceWidth];
+/// every size below is a Figma design pixel value multiplied by it.
+class CleanAirForumBrandHeader extends StatelessWidget {
+  final double scale;
+
+  const CleanAirForumBrandHeader({super.key, required this.scale});
+
+  @override
+  Widget build(BuildContext context) {
+    final iconSize = 143.38 * scale;
+    final gap = 17 * scale;
+    final dividerWidth = (4 * scale).clamp(1.0, double.infinity);
+    final dividerHeight = 98 * scale;
+    final titleFontSize = 35.974 * scale;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        AirQoIconMark(size: iconSize),
+        SizedBox(width: gap),
+        Container(width: dividerWidth, height: dividerHeight, color: Colors.white),
+        SizedBox(width: gap),
+        Flexible(
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                'Clean Air Forum',
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: TextStyle(
+                  color: Colors.white,
+                  fontSize: titleFontSize,
+                  height: 1.1,
+                  fontWeight: FontWeight.w700,
+                ),
+              ),
+              if (CleanAirForumBrand.edition.isNotEmpty)
+                Text(
+                  CleanAirForumBrand.edition,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontSize: titleFontSize,
+                    height: 1.1,
+                    fontStyle: FontStyle.italic,
+                    fontWeight: FontWeight.w400,
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}