refactor: Remove duplicate layout components and fix memory leaks (#95)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: PhantomDave <34485699+PhantomDave@users.noreply.github.com>

Author: Copilot

frontend/src/app/app.routes.ts

@@ -9,17 +9,13 @@ 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' },
   { path: 'login', component: LoginComponent, data: { breadcrumb: 'Login' } },
   { 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: [

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(); $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()" 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>

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);
       });

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));