@africanies/angular-web-sdk 0.1.2 → 0.1.4

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;

package/libs/africanies-ui/src/lib/modules/africanies-feedback.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 
+import { AccordionComponent } from '../accordion';
 import { AlertComponent } from '../alert';
 import { ChipComponent } from '../chip';
 import {
@@ -11,6 +12,7 @@ import {
 } from '../feedback';
 
 const FEEDBACK = [
+  AccordionComponent,
   LoadingStateComponent,
   ErrorStateComponent,
   ErrorIndicatorComponent,
@@ -21,7 +23,7 @@ const FEEDBACK = [
 ] as const;
 
 /**
- * Async feedback states, inline alert, and status chips.
+ * Async feedback states, accordion panels, inline alert, and status chips.
  *
  * Toast stays out of this module — register {@link provideAfricaniesToasts} instead.
  *

package/libs/africanies-ui/src/lib/table/table.component.ts

@@ -5,6 +5,7 @@ import {
   Component,
   computed,
   contentChildren,
+  inject,
   input,
   numberAttribute,
   output,
@@ -14,6 +15,7 @@ import {
 
 import { AfricaniesIconComponent } from '@africanies/africanies-icons';
 import type { PaginationMetaModel } from '@africanies/africanies-models';
+import { ModeColorService } from '@africanies/africanies-theme';
 
 import { ButtonComponent } from '../button/button.component';
 import { EmptyStateComponent } from '../feedback/empty-state.component';
@@ -98,7 +100,8 @@ import { TableColumn, TableSortChange } from './table-column';
  * **Sticky columns:** a column with `key: 'actions'` stays pinned to the
  * right while the grid scrolls horizontally. The expand trigger column pins
  * to the left when rows are expandable. Override with
- * {@link TableColumn.sticky}.
+ * {@link TableColumn.sticky}. Sticky columns use a slightly thicker bottom
+ * border (and opaque fill) so dividers stay visible while scrolling.
  */
 @Component({
   selector: 'africanies-table',
@@ -210,9 +213,7 @@ import { TableColumn, TableSortChange } from './table-column';
         <table
           class="w-max min-w-full table-auto border-separate border-spacing-0 bg-inherit text-left text-body text-ink dark:text-white"
         >
-          <thead
-            class="border-b border-border bg-background-welcome dark:border-white/10 dark:bg-ink-950"
-          >
+          <thead [class]="headerRowClass()">
             <tr>
               @if (isExpandable()) {
                 <th
@@ -276,14 +277,14 @@ import { TableColumn, TableSortChange } from './table-column';
             @switch (bodyKind()) {
               @case ('loading') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-loading-state [message]="loadingLabel()" />
                   </td>
                 </tr>
               }
               @case ('error') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-error-state
                       [message]="errorMessage()"
                       [refreshing]="refreshing()"
@@ -294,7 +295,7 @@ import { TableColumn, TableSortChange } from './table-column';
               }
               @case ('empty') {
                 <tr>
-                  <td class="px-3 py-6" [attr.colspan]="colSpan()">
+                  <td class="px-[1.125rem] py-6" [attr.colspan]="colSpan()">
                     <africanies-empty-state
                       [message]="emptyMessage()"
                       [refreshing]="refreshing()"
@@ -362,7 +363,7 @@ import { TableColumn, TableSortChange } from './table-column';
                         class="min-h-0 overflow-hidden border-t border-border/70 bg-neutral-50 dark:border-white/10 dark:bg-white/[0.05]"
                       >
                         <dl
-                          class="m-0 grid gap-x-6 gap-y-3 px-3 py-3 transition-opacity duration-200 ease-out motion-reduce:transition-none sm:grid-cols-2 lg:grid-cols-3"
+                          class="m-0 grid gap-x-6 gap-y-3 px-[1.125rem] py-4 transition-opacity duration-200 ease-out motion-reduce:transition-none sm:grid-cols-2 lg:grid-cols-3"
                           [class.opacity-0]="!isRowExpanded(row, i)"
                           [class.opacity-100]="isRowExpanded(row, i)"
                         >
@@ -409,6 +410,8 @@ import { TableColumn, TableSortChange } from './table-column';
   `,
 })
 export class TableComponent<T = unknown> {
+  protected readonly modeColor = inject(ModeColorService);
+
   /**
    * When false, hides row expansion even if {@link RowDetailDefDirective}
    * templates are projected. Defaults to true.
@@ -652,6 +655,23 @@ export class TableComponent<T = unknown> {
     return { $implicit: row };
   }
 
+  /**
+   * Header row chrome. Soft fill lives on each `th` ({@link headerSoftClass})
+   * so sticky columns do not double-tint and paint over neighbor labels.
+   * @returns Header row class list.
+   */
+  protected headerRowClass(): string {
+    return 'border-b border-border dark:border-white/10';
+  }
+
+  /**
+   * Opaque mode soft fill for header cells (sticky-safe in dark mode).
+   * @returns Soft solid background utilities.
+   */
+  protected headerSoftClass(): string {
+    return this.modeColor.classes().softSolid;
+  }
+
   /**
    * Body row classes — row marker for hover styles, plus hide cell borders on
    * the last / expanded row.
@@ -662,7 +682,7 @@ export class TableComponent<T = unknown> {
   protected bodyRowClass(row: T, index: number): string {
     if (this.isExpandable() && this.isRowExpanded(row, index)) {
       // Only the bottom edge — keep the top divider so the row still
-      // separates from the row above.
+      // separates from the row above. Detail panel owns the separator.
       return 'africanies-table-row group [&>td]:border-b-0';
     }
     return 'africanies-table-row group last:[&>td]:border-b-0';
@@ -691,25 +711,31 @@ export class TableComponent<T = unknown> {
    */
   protected expandHeaderClass(): string {
     return (
-      'w-10 border-b border-border px-2 py-3.5 dark:border-white/10 ' +
+      'w-10 border-b-[1.5px] border-border px-2 py-4 dark:border-white/10 ' +
+      this.headerSoftClass() +
+      ' ' +
       this.stickyPinClass('left', 'head')
     );
   }
 
   /**
    * Body classes for the expand/collapse trigger column (pinned left).
-   * Omits `border-b` like other sticky cells so the opaque fill does not
-   * double-paint the row divider.
+   * Uses a slightly thicker bottom border than scrolling cells so the
+   * sticky fill still reads a clear divider (no top-shadow fallback).
    * @param index - Index within {@link rows}.
    * @returns Body cell class list.
    */
   protected expandBodyClass(index: number): string {
-    const prev = index > 0 ? this.rowList()[index - 1] : undefined;
-    const afterExpanded =
-      prev !== undefined && this.isRowExpanded(prev, index - 1);
+    const row = this.rowList()[index];
+    const expanded =
+      row !== undefined && this.isRowExpanded(row, index);
+    const border = expanded
+      ? ''
+      : 'border-b-[1.5px] border-border dark:border-white/10 ';
     return (
-      'w-10 px-2 py-3.5 align-middle ' +
-      this.stickyPinClass('left', 'body', index, afterExpanded)
+      'w-10 px-2 py-4 align-middle ' +
+      border +
+      this.stickyPinClass('left', 'body')
     );
   }
 
@@ -719,37 +745,46 @@ export class TableComponent<T = unknown> {
    * @returns Header class list.
    */
   protected headerCellClass(col: TableColumn<T>): string {
+    const sticky = this.stickyEdge(col);
+    const border = sticky
+      ? 'border-b-[1.5px] '
+      : 'border-b ';
     return (
-      'border-b border-border whitespace-normal wrap-break-word px-3 py-3.5 font-medium text-neutral-600 dark:border-white/10 dark:text-neutral-400 ' +
+      border +
+      'border-border whitespace-normal wrap-break-word px-[1.125rem] py-4 font-medium text-neutral-600 dark:border-white/10 dark:text-neutral-400 ' +
+      this.headerSoftClass() +
+      ' ' +
       this.stickySurfaceClass(col, 'head')
     );
   }
 
   /**
    * Body cell classes, including sticky pin when set.
-   * Sticky cells omit `border-b`: their opaque fill sits in a higher stacking
-   * context, so a bottom border plus the next row's top shadow paint on the
-   * same pixel and read brighter (especially in dark mode).
+   * Sticky expand/actions columns use a 1.5px bottom border; scrolling cells
+   * stay at 1px. Expanded rows drop the bottom border (see {@link bodyRowClass}).
    * @param col - Column definition.
    * @param index - Index within {@link rows}.
    * @returns Body cell class list.
    */
   protected bodyCellClass(col: TableColumn<T>, index: number): string {
-    const rowLine = this.stickyEdge(col)
+    const row = this.rowList()[index];
+    const expanded =
+      row !== undefined && this.isRowExpanded(row, index);
+    const sticky = this.stickyEdge(col);
+    const rowLine = expanded
       ? ''
-      : 'border-b border-border dark:border-white/10 ';
-    const prev = index > 0 ? this.rowList()[index - 1] : undefined;
-    const afterExpanded =
-      prev !== undefined && this.isRowExpanded(prev, index - 1);
+      : sticky
+        ? 'border-b-[1.5px] border-border dark:border-white/10 '
+        : 'border-b border-border dark:border-white/10 ';
     const wrap =
       col.key === 'actions'
         ? 'whitespace-nowrap '
         : 'whitespace-normal wrap-break-word ';
     return (
       rowLine +
-      'px-3 py-3.5 align-middle ' +
+      'px-[1.125rem] py-4 align-middle ' +
       wrap +
-      this.stickySurfaceClass(col, 'body', index, afterExpanded)
+      this.stickySurfaceClass(col, 'body')
     );
   }
 
@@ -757,30 +792,22 @@ export class TableComponent<T = unknown> {
    * Sticky pin utilities for a known edge (expand column or data column).
    * @param edge - Left or right pin.
    * @param surface - Header vs body fill tokens.
-   * @param index - Body row index; unused for the header.
-   * @param afterExpanded - Previous row is expanded — skip the top shadow
-   *   divider so the sticky column stays flush under the detail panel.
    * @returns Sticky utilities.
    */
   protected stickyPinClass(
     edge: 'left' | 'right',
     surface: 'head' | 'body',
-    index = 0,
-    afterExpanded = false,
   ): string {
     // Expand (left) sits above scrolling cells; actions (right) match.
     // Header needs a higher z so it stays above sticky body cells.
     const side =
       edge === 'right' ? 'sticky right-0 z-[1]' : 'sticky left-0 z-[1]';
     if (surface === 'head') {
-      return `${side} z-[2] bg-background-welcome dark:bg-ink-950`;
+      // Fill comes from {@link headerSoftClass} on the cell — do not re-tint.
+      return `${side} z-[2]`;
     }
-    const rowDivider =
-      !afterExpanded && index > 0
-        ? 'shadow-[0_-1px_0_0_#c9d5e1] dark:shadow-[0_-1px_0_0_rgba(255,255,255,0.1)]'
-        : '';
     const fill = 'bg-white dark:bg-ink';
-    return `${side} ${fill} ${rowDivider}`;
+    return `${side} ${fill}`;
   }
 
   /**
@@ -788,21 +815,17 @@ export class TableComponent<T = unknown> {
    * cells do not show through.
    * @param col - Column definition.
    * @param surface - Header vs body fill tokens.
-   * @param index - Body row index; unused for the header.
-   * @param afterExpanded - Previous row is expanded — skip the top shadow.
    * @returns Sticky utilities, or empty when the column scrolls.
    */
   protected stickySurfaceClass(
     col: TableColumn<T>,
     surface: 'head' | 'body',
-    index = 0,
-    afterExpanded = false,
   ): string {
     const edge = this.stickyEdge(col);
     if (!edge) {
       return '';
     }
-    return this.stickyPinClass(edge, surface, index, afterExpanded);
+    return this.stickyPinClass(edge, surface);
   }
 
   /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@africanies/angular-web-sdk",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "packageManager": "pnpm@11.24.0",
   "license": "MIT",
   "contributors": [