From 13d3f5e96b186a438e52e1aa87ce4915be6762c4 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Thu, 22 Jan 2026 11:12:54 +0100
Subject: [PATCH] feat(mobile-bottom-nav): add active route styling for Today
 and Planner buttons

- Add active state CSS reusing magic side nav theme variables
- Switch to routerLinkActive directive for declarative route matching
- Remove manual currentRoute signal tracking
---
 .../mobile-bottom-nav.component.html           |  5 +++--
 .../mobile-bottom-nav.component.scss           | 18 ++++++++++++++++++
 .../mobile-bottom-nav.component.ts             | 10 ----------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.html b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.html
index 6251bf61a..52c610e0a 100644
--- a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.html
+++ b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.html
@@ -2,8 +2,9 @@
   <button
     mat-button
     class="nav-button"
-    [class.active]="currentRoute().includes('/tag/' + todayTagId + '/tasks')"
     [routerLink]="todayRoute"
+    routerLinkActive="active"
+    [routerLinkActiveOptions]="{ exact: false }"
   >
     <mat-icon>wb_sunny</mat-icon>
   </button>
@@ -11,8 +12,8 @@
   <button
     mat-button
     class="nav-button"
-    [class.active]="currentRoute() === '/planner'"
     routerLink="/planner"
+    routerLinkActive="active"
   >
     <mat-icon>edit_calendar</mat-icon>
   </button>
diff --git a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.scss b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.scss
index 1fef0b9fa..110ef0969 100644
--- a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.scss
+++ b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.scss
@@ -49,6 +49,24 @@
       padding: 0;
       margin: 0;
     }
+
+    // Active state styling - reuse magic side nav theme variables
+    &.active {
+      background: var(--sidenav-item-active-bg);
+      color: var(--sidenav-active-text);
+      box-shadow: var(--whiteframe-shadow-1dp);
+
+      mat-icon {
+        color: var(--sidenav-active-text);
+      }
+
+      // Maintain active state on hover/focus
+      &:hover,
+      &:focus {
+        background: var(--sidenav-item-active-bg);
+        color: var(--sidenav-active-text);
+      }
+    }
   }
 
   .add-task-button {
diff --git a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.ts b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.ts
index da75f1c8b..4f0141950 100644
--- a/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.ts
+++ b/src/app/core-ui/mobile-bottom-nav/mobile-bottom-nav.component.ts
@@ -55,16 +55,6 @@ export class MobileBottomNavComponent {
   // Output events
   toggleMobileNavEvent = output<void>();
 
-  // Current route tracking
-  readonly currentRoute = toSignal(
-    this._router.events.pipe(
-      filter((event): event is NavigationEnd => event instanceof NavigationEnd),
-      map((event) => event.urlAfterRedirects),
-      startWith(this._router.url),
-    ),
-    { initialValue: this._router.url },
-  );
-
   // Plugin-related signals
   readonly sidePanelButtons = this._pluginBridge.sidePanelButtons;
   readonly activePluginId = toSignal(this._store.select(selectActivePluginId));