@africanies/angular-web-sdk 0.1.3 → 0.1.5

package/libs/africanies-core/src/lib/http/api-client.ts

@@ -11,11 +11,9 @@ import {
   map,
   Observable,
   of,
-  retry,
   tap,
   throwError,
   timeout,
-  timer,
 } from 'rxjs';
 
 import {
@@ -30,7 +28,6 @@ import { AFRICANIES_SDK_CONFIG } from '../config/africanies-sdk.config';
 import { ShippingModeService } from '../shipping/shipping-mode.service';
 import { formatApiErrorMessage } from './api-error-message';
 import { HttpResponseCache } from './http-cache';
-import { isRetryableGetError } from './is-retryable-get-error';
 import { normalize } from './normalize';
 import {
   resolveApiRequestContext,
@@ -102,7 +99,8 @@ type ResponseMode = NonNullable<ApiRequestOptions['responseMode']>;
  * - HTTP failures rethrown as `Error` whose `.message` is already
  *   user-facing ({@link formatApiErrorMessage}) — consumers do not need to
  *   parse `HttpErrorResponse` bodies
- * - Exponential-backoff retry (max 1) for **GET only**
+ * - **No automatic retry** — fail fast so UIs can show Select / table /
+ *   error-state Retry instead of a stuck loading spinner
  * - Optional per-GET TTL cache via `cacheTtlMs`
  *
  * @example
@@ -474,20 +472,8 @@ export class ApiClient {
         break;
     }
 
-    // Retry only idempotent GETs on transient failures — never replay 401/404 etc.
-    if (method === 'GET') {
-      req$ = req$.pipe(
-        retry({
-          count: 1,
-          delay: (err, retryCount) => {
-            if (!isRetryableGetError(err)) {
-              return throwError(() => err);
-            }
-            return timer(2 ** (retryCount - 1) * 1000);
-          },
-        }),
-      );
-    }
+    // No automatic GET retry — admin shells own Retry via UI
+    // (`africanies-select` showRetry, table error→refreshClick, error-state).
 
     if (this.config.timeout != null) {
       req$ = req$.pipe(

package/libs/africanies-core/src/lib/http/is-retryable-get-error.ts

@@ -1,11 +1,15 @@
 import { HttpErrorResponse } from '@angular/common/http';
 
 /**
- * Whether a failed GET should be retried by {@link ApiClient}.
+ * Whether a failed GET *would* be a candidate for automatic retry.
+ *
+ * {@link ApiClient} no longer auto-retries (fail fast for manual UI Retry).
+ * Kept for callers/tests that still want to classify transient vs permanent
+ * failures.
+ *
+ * Transient: network blips, timeouts, 408/429, 5xx.
+ * Auth and other 4xx fail fast — retrying 401 does not help.
  *
- * Retries transient failures only (network blips, timeouts, 408/429, 5xx).
- * Auth and other 4xx errors fail fast — retrying 401 does not help and causes
- * duplicate requests + toasts.
  * @param err
  */
 export function isRetryableGetError(err: unknown): boolean {

package/libs/africanies-core/src/lib/query/provide-africanies-query-defaults.ts

@@ -9,8 +9,8 @@
  * (no caret/tilde): TanStack marks the Angular adapter experimental and
  * breaking changes land without major bumps.
  *
- * Retry/backoff here mirrors {@link ApiClient}'s GET retry (max 3,
- * exponential) so HTTP-layer and query-layer behavior stay aligned.
+ * Query retries default to **0** to match {@link ApiClient} (fail fast;
+ * screens use manual Retry). Apps can override per `QueryClient` if needed.
  */
 
 /**
@@ -23,9 +23,9 @@ export interface AfricaniesQueryClientDefaults {
     staleTime: number;
     /** Unused-query garbage-collection time (ms). */
     gcTime: number;
-    /** Max failed-fetch retries for queries. */
+    /** Max failed-fetch retries for queries (default 0 — fail fast). */
     retry: number;
-    /** Exponential delay matching ApiClient GET backoff. */
+    /** Delay between retries when {@link AfricaniesQueryClientDefaults.queries.retry} > 0. */
     retryDelay: (attemptIndex: number) => number;
   };
   mutations: {
@@ -82,8 +82,7 @@ export function createAfricaniesQueryClientDefaults(): AfricaniesQueryClientDefa
     queries: {
       staleTime: 60_000,
       gcTime: 5 * 60_000,
-      retry: 3,
-      // attemptIndex is 0-based in TanStack; match 1s, 2s, 4s style backoff.
+      retry: 0,
       retryDelay: (attemptIndex: number) =>
         Math.min(1000 * 2 ** attemptIndex, 30_000),
     },

package/libs/africanies-theme/src/lib/mode-color.safelist.ts

@@ -11,10 +11,12 @@
  * SFN (export / green):
  * text-export bg-export bg-export-subtle bg-export-light border-export
  * hover:bg-export-light hover:bg-export-subtle dark:bg-export/15 dark:hover:bg-export/15
+ * dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]
  *
  * STN (import / orange):
  * text-import bg-import bg-import-subtle bg-import-light border-import
  * hover:bg-import-light hover:bg-import-subtle dark:bg-import/15 dark:hover:bg-import/15
+ * dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]
  */
 export const MODE_COLOR_SAFELIST = [
   'text-export',
@@ -26,6 +28,7 @@ export const MODE_COLOR_SAFELIST = [
   'hover:bg-export-subtle',
   'dark:bg-export/15',
   'dark:hover:bg-export/15',
+  'dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
   'text-import',
   'bg-import',
   'bg-import-subtle',
@@ -35,4 +38,5 @@ export const MODE_COLOR_SAFELIST = [
   'hover:bg-import-subtle',
   'dark:bg-import/15',
   'dark:hover:bg-import/15',
+  'dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
 ] as const;

package/libs/africanies-theme/src/lib/mode-color.service.ts

@@ -29,8 +29,15 @@ export interface ModeColorClasses {
   ghostPrimary: string;
   /**
    * Soft highlight for selected / active rows (works in dark mode).
+   * Dark uses a translucent tint — fine over solid surfaces, not for
+   * sticky overlays (see {@link softSolid}).
    */
   soft: string;
+  /**
+   * Opaque soft fill — same tint as {@link soft}, but dark mode mixes into
+   * ink so scrolled content cannot show through (sticky table headers/cells).
+   */
+  softSolid: string;
   /**
    * Soft hover highlight for menus and lists.
    */
@@ -74,6 +81,8 @@ export class ModeColorService {
         ghostPrimary:
           'bg-transparent text-export border-transparent hover:bg-export-subtle dark:hover:bg-export/15',
         soft: 'bg-export-subtle dark:bg-export/15',
+        softSolid:
+          'bg-export-subtle dark:bg-[color-mix(in_srgb,#1cbd5d_15%,#212529)]',
         softHover: 'hover:bg-export-subtle dark:hover:bg-export/15',
       };
     }
@@ -87,6 +96,8 @@ export class ModeColorService {
       ghostPrimary:
         'bg-transparent text-import border-transparent hover:bg-import-subtle dark:hover:bg-import/15',
       soft: 'bg-import-subtle dark:bg-import/15',
+      softSolid:
+        'bg-import-subtle dark:bg-[color-mix(in_srgb,#f08829_15%,#212529)]',
       softHover: 'hover:bg-import-subtle dark:hover:bg-import/15',
     };
   });

package/libs/africanies-theme/tailwind-preset.cjs

@@ -69,6 +69,11 @@ function africaniesInteractiveCursorPlugin({ addBase }) {
  * (`white` / `ink-950`) and `-webkit-text-fill-color` keeps body text on
  * `ink` / white. `.dark` matches `ThemeService` (`class` on `<html>`).
  *
+ * WHY one selector per `addBase` key: joining autofill selectors with commas
+ * under a single `.dark ${list}` key only scopes the first selector — the rest
+ * leak into light mode. WHY no `color` in the long transition: delaying color
+ * freezes text when the user toggles light/dark.
+ *
  * @param {import('tailwindcss/types/config').PluginAPI} api
  */
 function africaniesAutofillPlugin({ addBase }) {
@@ -81,21 +86,24 @@ function africaniesAutofillPlugin({ addBase }) {
     'textarea:-webkit-autofill:hover',
     'textarea:-webkit-autofill:focus',
     'textarea:-webkit-autofill:active',
-  ].join(', ');
+  ];
 
-  addBase({
-    [autofillSelectors]: {
+  /** @type {Record<string, Record<string, string>>} */
+  const rules = {};
+  for (const selector of autofillSelectors) {
+    rules[selector] = {
       WebkitTextFillColor: '#212529',
       caretColor: '#212529',
       boxShadow: '0 0 0 1000px #ffffff inset',
       transition: 'background-color 99999s ease-in-out 0s',
-    },
-    [`.dark ${autofillSelectors}`]: {
+    };
+    rules[`.dark ${selector}`] = {
       WebkitTextFillColor: '#ffffff',
       caretColor: '#ffffff',
       boxShadow: '0 0 0 1000px #272729 inset',
-    },
-  });
+    };
+  }
+  addBase(rules);
 }
 
 /**

package/libs/africanies-ui/src/lib/layout/header-weather.spec.ts

@@ -24,9 +24,34 @@ describe('mapWmoWeatherCode', () => {
 
 describe('loadHeaderWeather', () => {
   const originalFetch = globalThis.fetch;
+  const originalGeolocation = navigator.geolocation;
+
+  beforeEach(() => {
+    Object.defineProperty(navigator, 'geolocation', {
+      configurable: true,
+      value: {
+        getCurrentPosition: (
+          _success: PositionCallback,
+          error?: PositionErrorCallback,
+        ) => {
+          error?.({
+            code: 1,
+            message: 'denied',
+            PERMISSION_DENIED: 1,
+            POSITION_UNAVAILABLE: 2,
+            TIMEOUT: 3,
+          } as GeolocationPositionError);
+        },
+      },
+    });
+  });
 
   afterEach(() => {
     globalThis.fetch = originalFetch;
+    Object.defineProperty(navigator, 'geolocation', {
+      configurable: true,
+      value: originalGeolocation,
+    });
     sessionStorage.clear();
   });
 
@@ -41,22 +66,51 @@ describe('loadHeaderWeather', () => {
     ).resolves.toBeNull();
   });
 
-  it('reads Open-Meteo after IP geolocation', async () => {
+  it('reads Open-Meteo after IP geolocation and reverse-geocodes the city', async () => {
     const fetchFn = jest.fn(async (url: string) => {
       if (String(url).includes('geojs')) {
-        return jsonResponse({ latitude: '6.45', longitude: '3.39', city: 'Lagos' });
+        return jsonResponse({
+          latitude: '9.0765',
+          longitude: '7.3986',
+          city: 'Lagos',
+        });
+      }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Abuja', locality: 'Abuja' });
       }
       return jsonResponse({
         current: { weather_code: 61, temperature_2m: 27.4 },
       });
     });
 
-    await expect(loadHeaderWeather(fetchFn as unknown as typeof fetch)).resolves.toEqual({
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
       kind: 'rain',
       temperatureC: 27.4,
+      city: 'Abuja',
+    });
+    expect(fetchFn).toHaveBeenCalledTimes(3);
+  });
+
+  it('falls back to the IP city when reverse geocode is empty', async () => {
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('geojs')) {
+        return jsonResponse({ latitude: 1, longitude: 2, city: 'Lagos' });
+      }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({});
+      }
+      return jsonResponse({ current: { weather_code: 0, temperature_2m: 30 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'clear',
+      temperatureC: 30,
       city: 'Lagos',
     });
-    expect(fetchFn).toHaveBeenCalledTimes(2);
   });
 
   it('reuses the same-hour session cache', async () => {
@@ -64,6 +118,9 @@ describe('loadHeaderWeather', () => {
       if (String(url).includes('geojs')) {
         return jsonResponse({ latitude: 1, longitude: 2 });
       }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Accra' });
+      }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 30 } });
     });
 
@@ -71,7 +128,7 @@ describe('loadHeaderWeather', () => {
     const second = await loadHeaderWeather(fetchFn as unknown as typeof fetch);
 
     expect(first).toEqual(second);
-    expect(fetchFn).toHaveBeenCalledTimes(2);
+    expect(fetchFn).toHaveBeenCalledTimes(3);
   });
 
   it('fetches again when the cached hour no longer matches', async () => {
@@ -79,6 +136,9 @@ describe('loadHeaderWeather', () => {
       if (String(url).includes('geojs')) {
         return jsonResponse({ latitude: 1, longitude: 2, city: 'Lagos' });
       }
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Lagos' });
+      }
       return jsonResponse({ current: { weather_code: 0, temperature_2m: 30.2 } });
     });
 
@@ -94,7 +154,52 @@ describe('loadHeaderWeather', () => {
     sessionStorage.setItem(cacheKey!, JSON.stringify(stored));
 
     await loadHeaderWeather(fetchFn as unknown as typeof fetch);
-    expect(fetchFn).toHaveBeenCalledTimes(4);
+    expect(fetchFn).toHaveBeenCalledTimes(6);
+  });
+
+  it('uses browser coordinates when geolocation succeeds', async () => {
+    Object.defineProperty(navigator, 'geolocation', {
+      configurable: true,
+      value: {
+        getCurrentPosition: (success: PositionCallback) => {
+          success({
+            coords: {
+              latitude: 9.0765,
+              longitude: 7.3986,
+              accuracy: 10,
+              altitude: null,
+              altitudeAccuracy: null,
+              heading: null,
+              speed: null,
+              toJSON: () => ({}),
+            },
+            timestamp: Date.now(),
+            toJSON: () => ({}),
+          } as GeolocationPosition);
+        },
+      },
+    });
+
+    const fetchFn = jest.fn(async (url: string) => {
+      if (String(url).includes('bigdatacloud')) {
+        return jsonResponse({ city: 'Abuja' });
+      }
+      if (String(url).includes('geojs')) {
+        throw new Error('should not call IP geo');
+      }
+      return jsonResponse({ current: { weather_code: 0, temperature_2m: 31 } });
+    });
+
+    await expect(
+      loadHeaderWeather(fetchFn as unknown as typeof fetch),
+    ).resolves.toEqual({
+      kind: 'clear',
+      temperatureC: 31,
+      city: 'Abuja',
+    });
+    expect(
+      fetchFn.mock.calls.some((call) => String(call[0]).includes('geojs')),
+    ).toBe(false);
   });
 });
 

package/libs/africanies-ui/src/lib/layout/header-weather.ts

@@ -2,9 +2,15 @@ import type { IconName } from '@africanies/africanies-icons';
 
 import type { HeaderWeather, HeaderWeatherKind } from './header-greeting.util';
 
-const CACHE_KEY = 'africanies-header-weather-v3';
+/** Bump when cache shape or city resolution strategy changes. */
+const CACHE_KEY = 'africanies-header-weather-v4';
 const FETCH_MS = 4_000;
+const BROWSER_GEO_MS = 3_500;
+/** IP fallback — city string is often wrong (e.g. NG IPs labelled Lagos). */
 const GEO_URL = 'https://get.geojs.io/v1/ip/geo.json';
+/** Client reverse-geocode so the label matches the forecast coordinates. */
+const REVERSE_GEO_URL =
+  'https://api.bigdatacloud.net/data/reverse-geocode-client';
 
 const WEATHER_LABELS: Record<HeaderWeatherKind, string> = {
   clear: 'Clear',
@@ -29,6 +35,12 @@ interface GeoJsPayload {
   longitude?: string | number;
 }
 
+interface ReverseGeoPayload {
+  city?: string;
+  locality?: string;
+  principalSubdivision?: string;
+}
+
 interface OpenMeteoPayload {
   current?: {
     weather_code?: number;
@@ -36,6 +48,11 @@ interface OpenMeteoPayload {
   };
 }
 
+interface Coordinates {
+  latitude: number;
+  longitude: number;
+}
+
 /**
  * Map Open-Meteo / WMO weather codes to a greeting flavor.
  *
@@ -95,7 +112,12 @@ export function headerWeatherIcon(kind: HeaderWeatherKind, hour: number): IconNa
 }
 
 /**
- * City-level forecast via IP geolocation + Open-Meteo (no API key).
+ * City-level forecast via browser / IP geolocation + Open-Meteo (no API key).
+ *
+ * Coordinates prefer the browser Geolocation API (accurate for travellers;
+ * may prompt once). Otherwise IP geo is used. The city label is reverse-
+ * geocoded from those coordinates — IP `city` strings are often wrong for
+ * Nigeria (many networks resolve as Lagos).
  *
  * Fails closed: missing browser APIs, timeouts, and HTTP errors all return
  * `null` so the greeting can stay time-of-day only. Cached per local hour
@@ -119,16 +141,14 @@ export async function loadHeaderWeather(
   }
 
   try {
-    const geo = (await fetchJson(run, GEO_URL)) as GeoJsPayload | null;
-    const latitude = asNumber(geo?.latitude);
-    const longitude = asNumber(geo?.longitude);
-    if (latitude === null || longitude === null) {
+    const coords = await resolveCoordinates(run);
+    if (!coords) {
       return null;
     }
 
     const forecastUrl =
       `https://api.open-meteo.com/v1/forecast` +
-      `?latitude=${latitude}&longitude=${longitude}` +
+      `?latitude=${coords.latitude}&longitude=${coords.longitude}` +
       `&current=weather_code,temperature_2m`;
     const forecast = (await fetchJson(run, forecastUrl)) as OpenMeteoPayload | null;
     const code = asNumber(forecast?.current?.weather_code);
@@ -142,7 +162,9 @@ export async function loadHeaderWeather(
     }
 
     const temperatureC = asNumber(forecast?.current?.temperature_2m) ?? undefined;
-    const city = asCity(geo?.city);
+    const city =
+      (await reverseGeocodeCity(run, coords.latitude, coords.longitude)) ??
+      coords.fallbackCity;
     const weather: HeaderWeather = { kind, temperatureC, city };
     writeCache({ hour, kind, temperatureC, city });
     return weather;
@@ -187,6 +209,80 @@ function writeCache(value: CachedWeather): void {
   }
 }
 
+/**
+ * Prefer device coordinates when available (may prompt once); otherwise fall
+ * back to IP geo. IP city labels for Nigeria are often wrong — reverse
+ * geocoding from these coordinates still depends on accurate lat/lon.
+ */
+async function resolveCoordinates(
+  fetchFn: typeof fetch,
+): Promise<(Coordinates & { fallbackCity?: string }) | null> {
+  const browser = await tryBrowserGeolocation();
+  if (browser) {
+    return browser;
+  }
+
+  const geo = (await fetchJson(fetchFn, GEO_URL)) as GeoJsPayload | null;
+  const latitude = asNumber(geo?.latitude);
+  const longitude = asNumber(geo?.longitude);
+  if (latitude === null || longitude === null) {
+    return null;
+  }
+  return {
+    latitude,
+    longitude,
+    fallbackCity: asCity(geo?.city),
+  };
+}
+
+async function tryBrowserGeolocation(): Promise<Coordinates | null> {
+  if (
+    typeof navigator === 'undefined' ||
+    typeof navigator.geolocation?.getCurrentPosition !== 'function'
+  ) {
+    return null;
+  }
+
+  return await new Promise((resolve) => {
+    const timer = setTimeout(() => resolve(null), BROWSER_GEO_MS);
+    navigator.geolocation.getCurrentPosition(
+      (position) => {
+        clearTimeout(timer);
+        resolve({
+          latitude: position.coords.latitude,
+          longitude: position.coords.longitude,
+        });
+      },
+      () => {
+        clearTimeout(timer);
+        resolve(null);
+      },
+      {
+        enableHighAccuracy: false,
+        maximumAge: 600_000,
+        timeout: BROWSER_GEO_MS,
+      },
+    );
+  });
+}
+
+async function reverseGeocodeCity(
+  fetchFn: typeof fetch,
+  latitude: number,
+  longitude: number,
+): Promise<string | undefined> {
+  const url =
+    `${REVERSE_GEO_URL}?latitude=${encodeURIComponent(String(latitude))}` +
+    `&longitude=${encodeURIComponent(String(longitude))}` +
+    `&localityLanguage=en`;
+  const payload = (await fetchJson(fetchFn, url)) as ReverseGeoPayload | null;
+  return (
+    asCity(payload?.city) ??
+    asCity(payload?.locality) ??
+    asCity(payload?.principalSubdivision)
+  );
+}
+
 function asNumber(value: unknown): number | null {
   if (typeof value === 'number' && Number.isFinite(value)) {
     return value;