({
+ setStyle: vi.fn(() => Promise.resolve())
+}));
+
+vi.mock('@capacitor/core', () => ({
+ SystemBars: systemBars,
+ SystemBarsStyle: { Dark: 'DARK' }
+}));
+
+vi.mock('./platform-detection.rules', () => ({
+ isCapacitorNativeRuntime: vi.fn(() => false)
+}));
+
+import { isCapacitorNativeRuntime } from './platform-detection.rules';
describe('mobile-safe-area.rules', () => {
+ beforeEach(() => {
+ vi.mocked(isCapacitorNativeRuntime).mockReturnValue(false);
+ systemBars.setStyle.mockClear();
+ vi.unstubAllGlobals();
+ });
+
it('builds CSS values with Capacitor and env fallbacks', () => {
expect(getSafeAreaInsetCSSValue('top')).toBe('var(--safe-area-inset-top, env(safe-area-inset-top, 0px))');
expect(getSafeAreaInsetCSSValue('bottom')).toBe('var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px))');
});
+ it('exports the global safe-area layout classes used by the mobile shell and overlays', () => {
+ expect(MOBILE_FIXED_SAFE_VIEWPORT_CLASS).toBe('metoyou-fixed-safe-viewport');
+ expect(MOBILE_FIXED_SAFE_BOTTOM_SHEET_CLASS).toBe('metoyou-fixed-safe-bottom-sheet');
+ expect(MOBILE_SAFE_AREA_SHELL_CLASS).toBe('metoyou-safe-area-shell');
+ });
+
it('sets default safe-area variables on the document root', () => {
const properties = new Map
();
const root = {
@@ -34,4 +70,18 @@ describe('mobile-safe-area.rules', () => {
it('ignores null roots instead of throwing', () => {
expect(() => applyMobileSafeAreaDefaults(null)).not.toThrow();
});
+
+ it('asks Capacitor SystemBars to refresh CSS insets on native shells', async () => {
+ const onDOMReady = vi.fn();
+
+ vi.mocked(isCapacitorNativeRuntime).mockReturnValue(true);
+ vi.stubGlobal('window', {
+ CapacitorSystemBarsAndroidInterface: { onDOMReady }
+ });
+
+ await syncMobileSafeAreaInsets();
+
+ expect(onDOMReady).toHaveBeenCalledTimes(1);
+ expect(systemBars.setStyle).toHaveBeenCalledWith({ style: 'DARK' });
+ });
});
diff --git a/toju-app/src/app/infrastructure/mobile/logic/mobile-safe-area.rules.ts b/toju-app/src/app/infrastructure/mobile/logic/mobile-safe-area.rules.ts
index 7f1fa08..b7d68a5 100644
--- a/toju-app/src/app/infrastructure/mobile/logic/mobile-safe-area.rules.ts
+++ b/toju-app/src/app/infrastructure/mobile/logic/mobile-safe-area.rules.ts
@@ -1,3 +1,5 @@
+import { isCapacitorNativeRuntime } from './platform-detection.rules';
+
const SAFE_AREA_SIDES = [
'top',
'right',
@@ -7,6 +9,15 @@ const SAFE_AREA_SIDES = [
export type SafeAreaSide = (typeof SAFE_AREA_SIDES)[number];
+/** Global class that insets fixed full-viewport overlays below the status bar and above the nav bar. */
+export const MOBILE_FIXED_SAFE_VIEWPORT_CLASS = 'metoyou-fixed-safe-viewport';
+
+/** Global class for bottom sheets that anchor above the Android navigation bar. */
+export const MOBILE_FIXED_SAFE_BOTTOM_SHEET_CLASS = 'metoyou-fixed-safe-bottom-sheet';
+
+/** Global class applied to the mobile app shell so routed content respects system insets. */
+export const MOBILE_SAFE_AREA_SHELL_CLASS = 'metoyou-safe-area-shell';
+
/** CSS value chain for one safe-area inset (Capacitor vars with env() fallback). */
export function getSafeAreaInsetCSSValue(side: SafeAreaSide): string {
return `var(--safe-area-inset-${side}, env(safe-area-inset-${side}, 0px))`;
@@ -28,3 +39,20 @@ export function applyMobileSafeAreaDefaults(root: HTMLElement | null = typeof do
}
}
}
+
+/** Request Capacitor Android SystemBars to recompute CSS inset variables after the SPA boots. */
+export async function syncMobileSafeAreaInsets(): Promise {
+ if (typeof window === 'undefined' || !isCapacitorNativeRuntime()) {
+ return;
+ }
+
+ const androidInterface = (window as Window & {
+ CapacitorSystemBarsAndroidInterface?: { onDOMReady?: () => void };
+ }).CapacitorSystemBarsAndroidInterface;
+
+ androidInterface?.onDOMReady?.();
+
+ const { SystemBars, SystemBarsStyle } = await import('@capacitor/core');
+
+ await SystemBars.setStyle({ style: SystemBarsStyle.Dark }).catch(() => {});
+}
diff --git a/toju-app/src/app/infrastructure/mobile/services/mobile-app-lifecycle.service.ts b/toju-app/src/app/infrastructure/mobile/services/mobile-app-lifecycle.service.ts
index 383a64b..d561cf8 100644
--- a/toju-app/src/app/infrastructure/mobile/services/mobile-app-lifecycle.service.ts
+++ b/toju-app/src/app/infrastructure/mobile/services/mobile-app-lifecycle.service.ts
@@ -1,6 +1,7 @@
import { Injectable, inject } from '@angular/core';
import { resolveMobileAdapter } from '../logic/mobile-capacitor-adapter.rules';
+import { syncMobileSafeAreaInsets } from '../logic/mobile-safe-area.rules';
import type { MobileAppLifecycleAdapter } from '../contracts/mobile.contracts';
import { WebMobileAppLifecycleAdapter } from '../adapters/web/web-mobile-app-lifecycle.adapter';
import { MobilePlatformService } from './mobile-platform.service';
@@ -24,6 +25,7 @@ export class MobileAppLifecycleService {
await adapter.initialize();
this.mobilePlatform.refreshRuntimeDetection();
+ await syncMobileSafeAreaInsets();
await this.runtimePermissions.initialize();
this.initialized = true;
}
diff --git a/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.html b/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.html
index 9e8a386..4411d09 100644
--- a/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.html
+++ b/toju-app/src/app/shared/components/bottom-sheet/bottom-sheet.component.html
@@ -11,7 +11,7 @@
-->
} @else {