From f3b817ba84715a1261f1c18a541993591c044e97 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 24 Nov 2025 15:51:40 +0000
Subject: [PATCH 1/3] Initial plan


From 410c34f80e954e71b8336ce8b602d4a7f5a49c38 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 24 Nov 2025 15:56:59 +0000
Subject: [PATCH 2/3] refactor: Apply PR review feedback - remove duplicate
 layout components and fix accessibility

Co-authored-by: PhantomDave <34485699+PhantomDave@users.noreply.github.com>
---
 frontend/src/app/app.routes.ts                       |  6 ------
 .../side-nav-component/side-nav-component.html       |  4 ++--
 .../side-nav-component/side-nav-component.ts         | 12 ++++++++----
 .../ui-library/breadcrumb/breadcrumb.component.ts    | 12 +++++++++---
 .../analytics-layout/analytics-layout.component.ts   |  9 ---------
 .../app/layouts/home-layout/home-layout.component.ts |  9 ---------
 .../movements-layout/movements-layout.component.ts   |  9 ---------
 7 files changed, 19 insertions(+), 42 deletions(-)
 delete mode 100644 frontend/src/app/layouts/analytics-layout/analytics-layout.component.ts
 delete mode 100644 frontend/src/app/layouts/home-layout/home-layout.component.ts
 delete mode 100644 frontend/src/app/layouts/movements-layout/movements-layout.component.ts

diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
index 364dfd7..3261775 100644
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@@ -9,9 +9,6 @@ import { ImportWizardComponent } from './components/import/import-wizard-compone
 import { MonthlyComparisonComponent } from './components/analytics/monthly-comparison-component/monthly-comparison-component';
 import { TrackingComponent } from './components/tracking/tracking/tracking.component';
 import { DashboardComponent } from './components/dashboard-component/dashboard-component.component';
-import { HomeLayoutComponent } from './layouts/home-layout/home-layout.component';
-import { MovementsLayoutComponent } from './layouts/movements-layout/movements-layout.component';
-import { AnalyticsLayoutComponent } from './layouts/analytics-layout/analytics-layout.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: 'login', pathMatch: 'full' },
@@ -19,7 +16,6 @@ export const routes: Routes = [
   { path: 'register', component: RegisterComponent, data: { breadcrumb: 'Register' } },
   {
     path: 'home',
-    component: HomeLayoutComponent,
     canActivate: [authenticateGuard],
     data: { breadcrumb: 'Home' },
     children: [
@@ -30,7 +26,6 @@ export const routes: Routes = [
   },
   {
     path: 'movements',
-    component: MovementsLayoutComponent,
     canActivate: [authenticateGuard],
     data: { breadcrumb: 'Movements' },
     children: [
@@ -41,7 +36,6 @@ export const routes: Routes = [
   },
   {
     path: 'analytics',
-    component: AnalyticsLayoutComponent,
     canActivate: [authenticateGuard],
     data: { breadcrumb: 'Analytics' },
     children: [
diff --git a/frontend/src/app/components/side-nav-component/side-nav-component.html b/frontend/src/app/components/side-nav-component/side-nav-component.html
index 2835caa..7c56287 100644
--- a/frontend/src/app/components/side-nav-component/side-nav-component.html
+++ b/frontend/src/app/components/side-nav-component/side-nav-component.html
@@ -103,7 +103,7 @@
       <mat-divider></mat-divider>
 
       <mat-nav-list aria-label="Account actions" class="account-actions">
-        <a mat-list-item (click)="onToggleTheme()" tabindex="0" role="button">
+        <a mat-list-item (click)="onToggleTheme()" (keydown.enter)="onToggleTheme()" (keydown.space)="onToggleTheme(); $event.preventDefault()" tabindex="0" role="button">
           <mat-icon matListItemIcon>
             @if (themeService.isDarkMode()) {
               light_mode
@@ -129,7 +129,7 @@
           <mat-icon matListItemIcon>settings</mat-icon>
           <span matListItemTitle>Settings</span>
         </a>
-        <a mat-list-item (click)="onLogout()" tabindex="0" role="button">
+        <a mat-list-item (click)="onLogout()" (keydown.enter)="onLogout()" (keydown.space)="onLogout(); $event.preventDefault()" tabindex="0" role="button">
           <mat-icon matListItemIcon>logout</mat-icon>
           <span matListItemTitle>Logout</span>
         </a>
diff --git a/frontend/src/app/components/side-nav-component/side-nav-component.ts b/frontend/src/app/components/side-nav-component/side-nav-component.ts
index 8993cbf..d5e5c85 100644
--- a/frontend/src/app/components/side-nav-component/side-nav-component.ts
+++ b/frontend/src/app/components/side-nav-component/side-nav-component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatIconButton } from '@angular/material/button';
 import { MatIcon } from '@angular/material/icon';
 import { MatListItem, MatListItemIcon, MatListItemTitle, MatNavList } from '@angular/material/list';
@@ -44,7 +45,7 @@ import { BreadcrumbComponent } from '../ui-library/breadcrumb/breadcrumb.compone
   styleUrl: './side-nav-component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SideNavComponent implements OnInit {
+export class SideNavComponent {
   private readonly accountService = inject(AccountService);
   private readonly router = inject(Router);
   protected readonly themeService = inject(ThemeService);
@@ -54,13 +55,16 @@ export class SideNavComponent implements OnInit {
   protected readonly movementsExpanded = signal(false);
   protected readonly analyticsExpanded = signal(false);
 
-  ngOnInit(): void {
+  constructor() {
     // Set initial state based on current route
     this.updateExpandedPanels(this.router.url);
 
     // Listen to route changes and update expanded panels
     this.router.events
-      .pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd))
+      .pipe(
+        filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+        takeUntilDestroyed()
+      )
       .subscribe((event: NavigationEnd) => {
         this.updateExpandedPanels(event.urlAfterRedirects);
       });
diff --git a/frontend/src/app/components/ui-library/breadcrumb/breadcrumb.component.ts b/frontend/src/app/components/ui-library/breadcrumb/breadcrumb.component.ts
index 80aa071..f9d40b0 100644
--- a/frontend/src/app/components/ui-library/breadcrumb/breadcrumb.component.ts
+++ b/frontend/src/app/components/ui-library/breadcrumb/breadcrumb.component.ts
@@ -1,4 +1,5 @@
 import { Component, inject, signal } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatChipsModule } from '@angular/material/chips';
 import { FlexComponent } from '../flex-component/flex-component';
 import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
@@ -23,9 +24,14 @@ export class BreadcrumbComponent {
 
   constructor() {
     // Update breadcrumbs on navigation
-    this.router.events.pipe(filter((event) => event instanceof NavigationEnd)).subscribe(() => {
-      this.breadcrumbs.set(this.createBreadcrumbs(this.activatedRoute.root));
-    });
+    this.router.events
+      .pipe(
+        filter((event) => event instanceof NavigationEnd),
+        takeUntilDestroyed()
+      )
+      .subscribe(() => {
+        this.breadcrumbs.set(this.createBreadcrumbs(this.activatedRoute.root));
+      });
 
     // Initial load
     this.breadcrumbs.set(this.createBreadcrumbs(this.activatedRoute.root));
diff --git a/frontend/src/app/layouts/analytics-layout/analytics-layout.component.ts b/frontend/src/app/layouts/analytics-layout/analytics-layout.component.ts
deleted file mode 100644
index a206ac7..0000000
--- a/frontend/src/app/layouts/analytics-layout/analytics-layout.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-analytics-layout',
-  imports: [RouterOutlet],
-  template: '<router-outlet />',
-})
-export class AnalyticsLayoutComponent {}
diff --git a/frontend/src/app/layouts/home-layout/home-layout.component.ts b/frontend/src/app/layouts/home-layout/home-layout.component.ts
deleted file mode 100644
index 1de1d9a..0000000
--- a/frontend/src/app/layouts/home-layout/home-layout.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-home-layout',
-  imports: [RouterOutlet],
-  template: '<router-outlet />',
-})
-export class HomeLayoutComponent {}
diff --git a/frontend/src/app/layouts/movements-layout/movements-layout.component.ts b/frontend/src/app/layouts/movements-layout/movements-layout.component.ts
deleted file mode 100644
index 6ee29e7..0000000
--- a/frontend/src/app/layouts/movements-layout/movements-layout.component.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-
-@Component({
-  selector: 'app-movements-layout',
-  imports: [RouterOutlet],
-  template: '<router-outlet />',
-})
-export class MovementsLayoutComponent {}

From 7093f079423fb0e8663eebe0096de16ccb199000 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 24 Nov 2025 15:58:02 +0000
Subject: [PATCH 3/3] fix: Prevent default for enter key in accessibility
 handlers

Co-authored-by: PhantomDave <34485699+PhantomDave@users.noreply.github.com>
---
 .../app/components/side-nav-component/side-nav-component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/components/side-nav-component/side-nav-component.html b/frontend/src/app/components/side-nav-component/side-nav-component.html
index 7c56287..ca11f05 100644
--- a/frontend/src/app/components/side-nav-component/side-nav-component.html
+++ b/frontend/src/app/components/side-nav-component/side-nav-component.html
@@ -103,7 +103,7 @@
       <mat-divider></mat-divider>
 
       <mat-nav-list aria-label="Account actions" class="account-actions">
-        <a mat-list-item (click)="onToggleTheme()" (keydown.enter)="onToggleTheme()" (keydown.space)="onToggleTheme(); $event.preventDefault()" tabindex="0" role="button">
+        <a mat-list-item (click)="onToggleTheme()" (keydown.enter)="onToggleTheme(); $event.preventDefault()" (keydown.space)="onToggleTheme(); $event.preventDefault()" tabindex="0" role="button">
           <mat-icon matListItemIcon>
             @if (themeService.isDarkMode()) {
               light_mode
@@ -129,7 +129,7 @@
           <mat-icon matListItemIcon>settings</mat-icon>
           <span matListItemTitle>Settings</span>
         </a>
-        <a mat-list-item (click)="onLogout()" (keydown.enter)="onLogout()" (keydown.space)="onLogout(); $event.preventDefault()" tabindex="0" role="button">
+        <a mat-list-item (click)="onLogout()" (keydown.enter)="onLogout(); $event.preventDefault()" (keydown.space)="onLogout(); $event.preventDefault()" tabindex="0" role="button">
           <mat-icon matListItemIcon>logout</mat-icon>
           <span matListItemTitle>Logout</span>
         </a>