feat(rooms): add Rooms list and Room detail pages

src/app/app.component.ts

@@ -23,6 +23,7 @@ export class AppComponent implements OnInit {
     { title: 'Schedule',  url: '/app/tabs/schedule',         icon: 'calendar-outline' },
     { title: 'Speakers',  url: '/app/tabs/speakers',         icon: 'people-outline' },
     { title: 'Keynote Speakers', url: '/app/tabs/keynote-speakers', icon: 'star-outline' },
+    { title: 'Rooms',     url: '/app/tabs/rooms',            icon: 'pin-outline' },
   ]
   presentationPages = [
     { title: 'Talks',     group: 'presentations', url: '/app/tabs/tracks/talks',     icon: 'mic-outline'},

src/app/pages/room-detail/room-detail-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RoomDetailPage } from './room-detail.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RoomDetailPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class RoomDetailPageRoutingModule {}

src/app/pages/room-detail/room-detail.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { RoomDetailPageRoutingModule } from './room-detail-routing.module';
+import { RoomDetailPage } from './room-detail.page';
+
+@NgModule({
+  imports: [CommonModule, IonicModule, RoomDetailPageRoutingModule],
+  declarations: [RoomDetailPage],
+})
+export class RoomDetailPageModule {}

src/app/pages/room-detail/room-detail.page.html

@@ -0,0 +1,51 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/app/tabs/rooms"></ion-back-button>
+    </ion-buttons>
+    <ion-title>{{ room?.name || 'Room' }}</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div *ngIf="loaded && !room" class="empty-state">
+    <ion-icon name="alert-circle-outline"></ion-icon>
+    <p>Room not found.</p>
+  </div>
+
+  <div *ngIf="room" class="room-hero">
+    <ion-icon name="pin-outline" class="room-hero-icon"></ion-icon>
+    <h1>{{ room.name }}</h1>
+    <p>{{ room.sessions.length }} {{ room.sessions.length === 1 ? 'session' : 'sessions' }} scheduled</p>
+  </div>
+
+  <div *ngFor="let day of days" class="day-section">
+    <div class="day-header">{{ day.day }}</div>
+
+    <ion-list lines="none">
+      <ion-item
+        *ngFor="let session of day.sessions"
+        button
+        detail="true"
+        class="session-item"
+        [class.session-item-highlight]="session.id === highlightSessionId"
+        [attr.id]="'room-session-' + session.id"
+        [routerLink]="sessionRoute(session)"
+        [queryParams]="{ prevUrl: location.path() }">
+        <ion-label class="ion-text-wrap">
+          <h3>{{ session.name }}</h3>
+          <p class="session-time">
+            <ion-icon name="time-outline"></ion-icon>
+            {{ session.timeStart }}<span *ngIf="session.timeStart !== session.timeEnd"> &ndash; {{ session.timeEnd }}</span>
+          </p>
+          <p *ngIf="session.speakerNames?.length" class="session-speakers">
+            <span *ngFor="let name of session.speakerNames; let last = last">{{ name }}<span *ngIf="!last">, </span></span>
+          </p>
+          <span *ngIf="session.track" class="track-badge" [attr.data-track]="session.track | lowercase">{{ session.track }}</span>
+        </ion-label>
+      </ion-item>
+    </ion-list>
+  </div>
+
+  <div style="height: 60px"></div>
+</ion-content>

src/app/pages/room-detail/room-detail.page.scss

@@ -0,0 +1,129 @@
+.room-hero {
+  text-align: center;
+  padding: 28px 16px 18px;
+  background: linear-gradient(135deg, var(--ion-color-primary, #2c4392) 0%, color-mix(in srgb, var(--ion-color-primary, #2c4392) 60%, #14224d) 100%);
+  color: #fff;
+
+  .room-hero-icon {
+    font-size: 36px;
+    color: #fff;
+    margin-bottom: 6px;
+    opacity: 0.85;
+  }
+
+  h1 {
+    font-size: 24px;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  p {
+    margin-top: 4px;
+    font-size: 13px;
+    opacity: 0.85;
+  }
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 64px 24px;
+  color: var(--ion-color-medium, #888);
+
+  ion-icon {
+    font-size: 48px;
+    margin-bottom: 12px;
+    opacity: 0.5;
+  }
+}
+
+.day-section {
+  margin-top: 24px;
+
+  &:first-of-type {
+    margin-top: 16px;
+  }
+
+  .day-header {
+    --pycon-accent: #680579;
+
+    display: block;
+    margin: 0 16px 12px;
+    padding: 10px 16px;
+    border-radius: 999px;
+
+    background: var(--pycon-accent);
+    color: #fff;
+
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    text-align: center;
+
+    box-shadow: 0 2px 6px rgba(104, 5, 121, 0.25);
+  }
+}
+
+:host-context(.dark-theme) .day-section .day-header {
+  --pycon-accent: #DD04D2;
+  box-shadow: 0 2px 6px rgba(221, 4, 210, 0.30);
+}
+
+.session-item {
+  --padding-start: 16px;
+  --padding-end: 8px;
+  --inner-padding-end: 12px;
+  --min-height: 64px;
+
+  &.session-item-highlight {
+    --background: rgba(104, 5, 121, 0.08);
+    box-shadow: inset 3px 0 0 #680579;
+    animation: room-session-pulse 1.6s ease-in-out 2;
+  }
+
+  ion-label {
+    h3 {
+      font-size: 15px;
+      font-weight: 600;
+      margin: 0 0 4px;
+    }
+
+    .session-time {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 12px;
+      color: var(--ion-color-medium, #888);
+      margin: 0 0 4px;
+
+      ion-icon {
+        font-size: 13px;
+      }
+    }
+
+    .session-speakers {
+      font-size: 12px;
+      color: var(--ion-color-step-500, #666);
+      margin: 0 0 6px;
+    }
+
+    .track-badge {
+      display: inline-block;
+      margin-top: 4px;
+    }
+  }
+}
+
+@keyframes room-session-pulse {
+  0%   { background: rgba(104, 5, 121, 0.05); }
+  50%  { background: rgba(104, 5, 121, 0.18); }
+  100% { background: rgba(104, 5, 121, 0.05); }
+}
+
+:host-context(.dark-theme) .session-item.session-item-highlight {
+  --background: rgba(221, 4, 210, 0.10);
+  box-shadow: inset 3px 0 0 #DD04D2;
+}

src/app/pages/room-detail/room-detail.page.ts

@@ -0,0 +1,93 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Location } from '@angular/common';
+import { Subscription, combineLatest } from 'rxjs';
+import { ConferenceData } from '../../providers/conference-data';
+
+interface RoomDay {
+  day: string;
+  sessions: any[];
+}
+
+@Component({
+  selector: 'app-room-detail',
+  templateUrl: './room-detail.page.html',
+  styleUrls: ['./room-detail.page.scss'],
+})
+export class RoomDetailPage implements OnInit, OnDestroy {
+  room: any = null;
+  days: RoomDay[] = [];
+  loaded = false;
+  highlightSessionId: any = null;
+
+  private paramSub?: Subscription;
+  private dayOrder = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    public location: Location,
+    private confData: ConferenceData,
+  ) {}
+
+  ngOnInit() {
+    this.paramSub = combineLatest([this.route.paramMap, this.route.queryParamMap]).subscribe(
+      ([params, query]) => {
+        const slug = params.get('roomSlug');
+        this.highlightSessionId = query.get('session');
+        this.loadRoom(slug);
+      },
+    );
+  }
+
+  ngOnDestroy() {
+    this.paramSub?.unsubscribe();
+  }
+
+  private loadRoom(slug: string | null) {
+    if (!slug) return;
+    this.confData.getRoom(slug).subscribe((room: any) => {
+      this.loaded = true;
+      this.room = room || null;
+      this.days = room ? this.groupByDay(room.sessions) : [];
+      if (this.highlightSessionId) {
+        this.scrollToSession(this.highlightSessionId);
+      }
+    });
+  }
+
+  private scrollToSession(sessionId: any) {
+    setTimeout(() => {
+      const el = document.getElementById('room-session-' + sessionId);
+      if (el) {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      }
+    }, 200);
+  }
+
+  private groupByDay(sessions: any[]): RoomDay[] {
+    const map = new Map<string, any[]>();
+    sessions.forEach((s: any) => {
+      const day = s.day || 'TBD';
+      if (!map.has(day)) map.set(day, []);
+      map.get(day).push(s);
+    });
+    return Array.from(map.entries())
+      .sort(([a], [b]) => {
+        const ai = this.dayOrder.indexOf(a);
+        const bi = this.dayOrder.indexOf(b);
+        if (ai === -1 && bi === -1) return a.localeCompare(b);
+        if (ai === -1) return 1;
+        if (bi === -1) return -1;
+        return ai - bi;
+      })
+      .map(([day, daySessions]) => ({ day, sessions: daySessions }));
+  }
+
+  sessionRoute(session: any) {
+    if (typeof session.id === 'string' && session.id.startsWith('poster-detail-')) {
+      return ['/app/tabs/schedule/session', session.id];
+    }
+    return ['/app/tabs/schedule/session', session.id];
+  }
+}

src/app/pages/rooms/rooms-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RoomsPage } from './rooms.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RoomsPage,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class RoomsPageRoutingModule {}

src/app/pages/rooms/rooms.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { RoomsPageRoutingModule } from './rooms-routing.module';
+import { RoomsPage } from './rooms.page';
+
+@NgModule({
+  imports: [CommonModule, IonicModule, RoomsPageRoutingModule],
+  declarations: [RoomsPage],
+})
+export class RoomsPageModule {}

src/app/pages/rooms/rooms.page.html

@@ -0,0 +1,32 @@
+<ion-header class="ion-no-border">
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+    </ion-buttons>
+    <ion-title>Rooms</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <div *ngIf="!rooms.length" class="empty-state">
+    <ion-icon name="pin-outline"></ion-icon>
+    <p>Loading rooms&hellip;</p>
+  </div>
+
+  <ion-list lines="none" *ngIf="rooms.length">
+    <ion-item
+      *ngFor="let room of rooms"
+      button
+      detail="true"
+      class="room-item"
+      [routerLink]="['/app/tabs/rooms/room-detail', room.slug]">
+      <ion-icon slot="start" name="pin-outline" color="medium"></ion-icon>
+      <ion-label>
+        <h2>{{ room.name }}</h2>
+        <p>{{ room.sessions.length }} {{ room.sessions.length === 1 ? 'session' : 'sessions' }}</p>
+      </ion-label>
+    </ion-item>
+  </ion-list>
+
+  <div style="height: 60px"></div>
+</ion-content>