From f4d08dd3a3c45b119d18faac6b7de37b78a2c3a5 Mon Sep 17 00:00:00 2001
From: Jacob Coffee <jacob@z7x.org>
Date: Fri, 17 Apr 2026 23:54:49 -0500
Subject: [PATCH] Highlight active bottom tab bar section with PyCon 2026 pink

Ionic's built-in tab-selected detection wasn't firing for any tab here, so
every tab always read as inactive. Drive the active tab explicitly from the
router URL (first segment under /app/tabs/) and apply a pycon-active class
to the matching ion-tab-button. Active tab uses --color #DD04D2 (2026 neon
pink) and a bold label.
---
 src/app/pages/tabs-page/tabs-page.html | 14 +++++++-------
 src/app/pages/tabs-page/tabs-page.scss |  8 ++++++++
 src/app/pages/tabs-page/tabs-page.ts   | 16 +++++++++++++++-
 3 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/tabs-page/tabs-page.html b/src/app/pages/tabs-page/tabs-page.html
index fd661cd0..0bdb7b67 100644
--- a/src/app/pages/tabs-page/tabs-page.html
+++ b/src/app/pages/tabs-page/tabs-page.html
@@ -5,37 +5,37 @@
   </ion-tab-bar>
 
   <ion-tab-bar slot="bottom" class="pycon-tab-bar">
-    <ion-tab-button tab="speakers">
+    <ion-tab-button tab="speakers" [class.pycon-active]="activeTab === 'speakers'">
       <ion-icon name="people"></ion-icon>
       <ion-label>Speakers</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="conference-map">
+    <ion-tab-button tab="conference-map" [class.pycon-active]="activeTab === 'conference-map'">
       <ion-icon name="map"></ion-icon>
       <ion-label>Map</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="schedule">
+    <ion-tab-button tab="schedule" [class.pycon-active]="activeTab === 'schedule'">
       <ion-icon name="calendar"></ion-icon>
       <ion-label>Schedule</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button tab="now">
+    <ion-tab-button tab="now" [class.pycon-active]="activeTab === 'now'">
       <ion-icon name="radio"></ion-icon>
       <ion-label>Now</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button *ngIf="hasDoorCheck" (click)="openStaffTools($event)">
+    <ion-tab-button *ngIf="hasDoorCheck" (click)="openStaffTools($event)" [class.pycon-active]="activeTab === 'lead-retrieval'">
       <ion-icon name="scan"></ion-icon>
       <ion-label>Scanner</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button *ngIf="hasLeadRetrieval && !hasDoorCheck" tab="lead-retrieval">
+    <ion-tab-button *ngIf="hasLeadRetrieval && !hasDoorCheck" tab="lead-retrieval" [class.pycon-active]="activeTab === 'lead-retrieval'">
       <ion-icon name="qr-code"></ion-icon>
       <ion-label>Scanner</ion-label>
     </ion-tab-button>
 
-    <ion-tab-button *ngIf="!loggedIn" tab="login">
+    <ion-tab-button *ngIf="!loggedIn" tab="login" [class.pycon-active]="activeTab === 'login'">
       <ion-icon name="log-in"></ion-icon>
       <ion-label>Login</ion-label>
     </ion-tab-button>
diff --git a/src/app/pages/tabs-page/tabs-page.scss b/src/app/pages/tabs-page/tabs-page.scss
index 00b43a01..a4d09af6 100644
--- a/src/app/pages/tabs-page/tabs-page.scss
+++ b/src/app/pages/tabs-page/tabs-page.scss
@@ -1,3 +1,11 @@
+.pycon-tab-bar ion-tab-button.pycon-active {
+  --color: #DD04D2;
+
+  ion-label {
+    font-weight: 700;
+  }
+}
+
 .bannerSponsorHidden {
   display: none;
 }
diff --git a/src/app/pages/tabs-page/tabs-page.ts b/src/app/pages/tabs-page/tabs-page.ts
index 735835b3..30f61903 100644
--- a/src/app/pages/tabs-page/tabs-page.ts
+++ b/src/app/pages/tabs-page/tabs-page.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController } from '@ionic/angular';
-import { Router } from '@angular/router';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 import { ConferenceData } from '../../providers/conference-data';
 import { UserData } from '../../providers/user-data';
@@ -16,6 +17,7 @@ export class TabsPage implements OnInit {
   hasDoorCheck: boolean = false;
   loggedIn: boolean = false;
   showStaffTools: boolean = false;
+  activeTab: string = '';
 
   constructor(
     private userData: UserData,
@@ -31,6 +33,18 @@ export class TabsPage implements OnInit {
     this.checkLoggedIn();
     this.listenForLoginEvents();
     setInterval(this.showSponsorBanner, 30000);
+
+    this.activeTab = this.computeActiveTab(this.router.url);
+    this.router.events
+      .pipe(filter((e): e is NavigationEnd => e instanceof NavigationEnd))
+      .subscribe(e => {
+        this.activeTab = this.computeActiveTab(e.urlAfterRedirects);
+      });
+  }
+
+  private computeActiveTab(url: string): string {
+    const match = url.match(/\/app\/tabs\/([^/?#]+)/);
+    return match ? match[1] : '';
   }
 
   checkLoggedIn() {