consolidate schedule header — single row with day tabs

- Remove All/Favorites segment, replace with star toggle icon
- Move day selector to main toolbar row
- Change Filter text to funnel icon
- Search bar below header in content area
- Today's tab highlighted in purple with bold weight
- Muted gray action icons that don't compete with day tabs

Resolves: PYMOBIL-67

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: JacobCoffee

src/app/pages/schedule/schedule.html

@@ -1,70 +1,34 @@
 <ion-header translucent="true">
-  <ion-toolbar>
-    <ion-buttons *ngIf="!showSearchbar" slot="start">
+  <ion-toolbar class="schedule-toolbar">
+    <ion-buttons slot="start">
       <ion-menu-button [color]="liveUpdateService.needsUpdate ? 'primary' : 'medium'"></ion-menu-button>
       <ion-badge *ngIf="liveUpdateService.needsUpdate" size=sm>1</ion-badge>
     </ion-buttons>
-    <ion-segment *ngIf="ios" [(ngModel)]="segment" (ionChange)="updateSchedule()">
-      <ion-segment-button value="all">
-        All
-      </ion-segment-button>
-      <ion-segment-button value="favorites">
-        Favorites
+    <ion-segment [(ngModel)]="dayIndex" (ionChange)="updateSchedule()" class="day-segment">
+      <ion-segment-button *ngFor="let day of days" value="{{day.index}}" [class.today-tab]="day.index === todayIndex">
+        {{day.day}}
       </ion-segment-button>
     </ion-segment>
-    <ion-title *ngIf="!ios && !showSearchbar">Schedule</ion-title>
-    <ion-searchbar #search *ngIf="showSearchbar" showCancelButton="always" [(ngModel)]="queryText" (ionChange)="updateSchedule()" (ionCancel)="showSearchbar = false" placeholder="Search"></ion-searchbar>
     <ion-buttons slot="end">
-      <ion-button *ngIf="!ios && !showSearchbar" (click)="showSearchbar = true && focusButton()">
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+      <ion-button (click)="toggleFavorites()" class="header-action">
+        <ion-icon slot="icon-only" [name]="segment === 'favorites' ? 'star' : 'star-outline'"></ion-icon>
       </ion-button>
-      <ion-button *ngIf="!showSearchbar" (click)="presentFilter()">
-        <span *ngIf="ios">Filter</span>
-        <span *ngIf="!ios">
-          <ion-icon slot="icon-only" name="options"></ion-icon>
-        </span>
+      <ion-button (click)="presentFilter()" class="header-action">
+        <ion-icon slot="icon-only" name="funnel-outline"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
-  <ion-toolbar *ngIf="ios">
-    <ion-segment [(ngModel)]="dayIndex" (ionChange)="updateSchedule()">
-      <ion-segment-button *ngFor="let day of days" value="{{day.index}}" [class.today-tab]="day.index === todayIndex">
-        {{day.day}}
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-  <ion-toolbar *ngIf="!ios">
-    <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
-      <ion-segment-button value="all">
-        All
-      </ion-segment-button>
-      <ion-segment-button value="favorites">
-        Favorites
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
-  <ion-toolbar *ngIf="!ios">
-    <ion-segment [(ngModel)]="dayIndex" (ionChange)="updateSchedule()">
-      <ion-segment-button *ngFor="let day of days" value="{{day.index}}" [class.today-tab]="day.index === todayIndex">
-        {{day.day}}
-      </ion-segment-button>
-    </ion-segment>
-  </ion-toolbar>
 </ion-header>
 
 <ion-content fullscreen="true">
   <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)">
     <ion-refresher-content></ion-refresher-content>
   </ion-refresher>
 
-  <ion-header collapse="condense">
-    <ion-toolbar>
-      <ion-title size="large">Schedule</ion-title>
-    </ion-toolbar>
-    <ion-toolbar>
-      <ion-searchbar [(ngModel)]="queryText" (ionChange)="updateSchedule()" placeholder="Search"></ion-searchbar>
-    </ion-toolbar>
-  </ion-header>
+  <ion-toolbar class="search-toolbar">
+    <ion-searchbar [(ngModel)]="queryText" (ionChange)="updateSchedule()" placeholder="Search sessions"></ion-searchbar>
+  </ion-toolbar>
+
 
   <ion-list #scheduleList [hidden]="shownSessions !== 0">
     <ion-item>

src/app/pages/schedule/schedule.scss

@@ -36,18 +36,64 @@ $tracks: (
   }
 }
 
-ion-segment-button {
+:host {
+  --pycon-accent: #680579;
+}
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --pycon-accent: #DD04D2;
+  }
+}
+
+.schedule-toolbar {
+  --padding-start: 0;
+  --padding-end: 0;
+}
+
+.day-segment {
+  --background: transparent;
+}
+
+.day-segment ion-segment-button {
+  --indicator-height: 3px;
+  --indicator-color: var(--pycon-accent, #680579);
+  --color: var(--ion-color-step-500, #808080);
+  --color-checked: var(--pycon-accent, #680579);
   min-width: auto;
+  font-size: 0.85rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: none;
 }
 
-ion-segment-button.today-tab {
-  --indicator-color: #680579;
-  --color: #680579;
-  --color-checked: #ffffff;
-  --background-checked: #680579;
+.day-segment ion-segment-button.today-tab {
+  --color: var(--pycon-accent, #680579);
   font-weight: 700;
-  border-radius: 8px;
-  border-bottom: 3px solid #680579;
+}
+
+.header-action {
+  --color: var(--ion-color-step-500, #808080);
+  font-size: 1.1rem;
+
+  &:active {
+    --color: #680579;
+  }
+}
+
+.search-toolbar {
+  --background: transparent;
+  --border-width: 0;
+  padding: 0 8px 4px;
+}
+
+.search-toolbar ion-searchbar {
+  --border-radius: 10px;
+  --box-shadow: none;
+  --background: var(--ion-color-step-50, #f2f2f2);
+  font-size: 0.9rem;
+  padding: 0;
+  height: 36px;
 }
 
 .jump-now-wrapper {

src/app/pages/schedule/schedule.ts

@@ -168,6 +168,11 @@ export class SchedulePage implements OnInit, OnDestroy {
     });
   }
 
+  toggleFavorites() {
+    this.segment = this.segment === 'favorites' ? 'all' : 'favorites';
+    this.updateSchedule();
+  }
+
   searchAllDays() {
     let found = false;
     let checked = 0;