refactor(mobile-service): use media-query event for isMobile signal

src/app/layout/layout.component.ts

@@ -1,7 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, computed, effect, inject, signal, viewChild } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
 import { RouterOutlet } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
+import { fromEvent } from 'rxjs';
 import { AnalyticsService, AnalyticsStatus } from '../shared/data-access/analytics.service';
 import { LanguageService } from '../shared/data-access/language.service';
 import { MobileService } from '../shared/data-access/mobile.service';
@@ -50,7 +52,7 @@ export class LayoutComponent implements AfterViewInit {
   protected readonly theme = this._themeService.theme;
   protected readonly initialized = signal(false);
 
-  private readonly _resize = this._mobileService.resize;
+  private readonly _resize = toSignal(fromEvent(window, 'resize'));
 
   protected readonly logoAsset = computed(() => {
     return this.theme() === 'dark' ? '/assets/rainbow-palette-light.svg' : '/assets/rainbow-palette-dark.svg';

src/app/shared/data-access/mobile.service.spec.ts

@@ -1,5 +1,4 @@
 import { TestBed } from '@angular/core/testing';
-import { sleep } from '../../shared/utils/sleep';
 import { MobileService } from './mobile.service';
 
 describe('MobileService', () => {
@@ -18,16 +17,4 @@ describe('MobileService', () => {
     const isMobile = service.isMobile();
     expect(isMobile).toBe(window.innerWidth < 640);
   });
-
-  it('should change isMobile on window resize', async () => {
-    window.innerWidth = 500;
-    window.dispatchEvent(new Event('resize'));
-    await sleep(10);
-    expect(service.isMobile()).toBe(true);
-
-    window.innerWidth = 1000;
-    window.dispatchEvent(new Event('resize'));
-    await sleep(10);
-    expect(service.isMobile()).toBe(false);
-  });
 });

src/app/shared/data-access/mobile.service.ts

@@ -1,45 +1,21 @@
-import { Injectable, Signal, effect, signal } from '@angular/core';
+import { Injectable, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
-import { fromEvent } from 'rxjs';
+import { fromEvent, map } from 'rxjs';
+
+const SM_QUERY_LIST = matchMedia('(min-width: 640px)');
 
 @Injectable({
   providedIn: 'root'
 })
 export class MobileService {
-  private readonly _resize: Signal<Event | undefined>;
-  private readonly _isMobile = signal(false);
-
-  public get resize(): Signal<Event | undefined> {
-    return this._resize;
-  }
-
-  public get isMobile(): Signal<boolean> {
-    return this._isMobile.asReadonly();
-  }
-
-  public constructor() {
-    const resize$ = fromEvent(window, 'resize');
-    this._resize = toSignal(resize$);
-
-    effect(
-      () => {
-        // Reference resize signal to trigger computation on window resize
-        if (!this._resize()) {
-          return;
-        }
-
-        this._isMobile.set(window.innerWidth < 640);
-      },
-      {
-        allowSignalWrites: true
-      }
-    );
-
-    this._isMobile.set(window.innerWidth < 640);
-  }
+  public isMobile = toSignal(
+    fromEvent<MediaQueryListEvent>(SM_QUERY_LIST, 'change').pipe(map((event) => !event.matches)),
+    {
+      initialValue: !SM_QUERY_LIST.matches
+    }
+  );
 }
 
 export class MobileServiceMock {
   public readonly isMobile = signal(false).asReadonly();
-  public readonly resize = signal<Event | undefined>(undefined).asReadonly();
 }