chore(deps): bump all @angular/* framework packages from 21.2.4 to 21.2.7

frontend/package.json

@@ -19,18 +19,18 @@
     },
     "dependencies": {
         "@analogjs/vite-plugin-angular": "^2.3.1",
-        "@angular/animations": "^21.2.4",
+        "@angular/animations": "^21.2.7",
         "@angular/cdk": "^21.2.2",
-        "@angular/common": "^21.2.4",
-        "@angular/compiler": "^21.2.4",
-        "@angular/core": "^21.2.4",
-        "@angular/forms": "^21.2.4",
+        "@angular/common": "^21.2.7",
+        "@angular/compiler": "^21.2.7",
+        "@angular/core": "^21.2.7",
+        "@angular/forms": "^21.2.7",
         "@angular/material": "^21.2.3",
-        "@angular/platform-browser": "^21.2.4",
-        "@angular/platform-browser-dynamic": "^21.2.5",
-        "@angular/platform-server": "^21.2.5",
-        "@angular/router": "^21.2.4",
-        "@angular/service-worker": "^21.2.4",
+        "@angular/platform-browser": "^21.2.7",
+        "@angular/platform-browser-dynamic": "^21.2.7",
+        "@angular/platform-server": "^21.2.7",
+        "@angular/router": "^21.2.7",
+        "@angular/service-worker": "^21.2.7",
         "@angular/ssr": "^21.2.2",
         "@clerk/clerk-js": "^6.3.0",
         "hono": "^4.12.8",
@@ -50,7 +50,7 @@
         "@angular-devkit/build-angular": "^21.2.2",
         "@angular-eslint/builder": "^21.3.0",
         "@angular/cli": "^21.2.2",
-        "@angular/compiler-cli": "^21.2.4",
+        "@angular/compiler-cli": "^21.2.7",
         "@cloudflare/workers-types": "^4.20260317.1",
         "@eslint/js": "^10.0.1",
         "@playwright/test": "^1.58.2",

frontend/src/app/app.component.spec.ts

@@ -4,6 +4,8 @@ import { provideRouter } from '@angular/router';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting, HttpTestingController } from '@angular/common/http/testing';
+import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
+import { of } from 'rxjs';
 import { AppComponent } from './app.component';
 import { GlobalErrorHandler } from './error/global-error-handler';
 import { API_BASE_URL } from './tokens';
@@ -110,6 +112,54 @@ describe('AppComponent', () => {
         expect(main.getAttribute('aria-label')).toBe('Main content');
     });
 
+    it('should NOT render menu button in desktop viewport (isMobile is false)', async () => {
+        await fixture.whenStable();
+        const menuBtn = fixture.nativeElement.querySelector('button[aria-label="Toggle navigation"]');
+        expect(menuBtn).toBeNull();
+    });
+});
+
+describe('AppComponent (mobile viewport)', () => {
+    let fixture: ComponentFixture<AppComponent>;
+    let httpTesting: HttpTestingController;
+
+    beforeEach(async () => {
+        localStorage.clear();
+        await TestBed.configureTestingModule({
+            imports: [AppComponent, NoopAnimationsModule],
+            providers: [
+                provideZonelessChangeDetection(),
+                provideRouter([]),
+                provideHttpClient(),
+                provideHttpClientTesting(),
+                { provide: ErrorHandler, useClass: GlobalErrorHandler },
+                { provide: API_BASE_URL, useValue: '/api' },
+                {
+                    provide: BreakpointObserver,
+                    useValue: { observe: () => of({ matches: true } as BreakpointState) },
+                },
+            ],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(AppComponent);
+        httpTesting = TestBed.inject(HttpTestingController);
+
+        httpTesting.match('/api/metrics').forEach(req => req.flush({
+            totalRequests: 0, averageDuration: 0, cacheHitRate: 0, successRate: 0,
+        }));
+        httpTesting.match('/api/health').forEach(req => req.flush({
+            status: 'healthy', version: '0.0.0',
+        }));
+
+        await fixture.whenStable();
+    });
+
+    afterEach(() => {
+        httpTesting.match(() => true).forEach(req => req.flush({}));
+        httpTesting.verify();
+        localStorage.clear();
+    });
+
     it('should render menu button with aria-label', async () => {
         await fixture.whenStable();
         const menuBtn = fixture.nativeElement.querySelector('button[aria-label="Toggle navigation"]');