feat: add Angular frontend skeleton

frontend/src/app/app.component.ts

@@ -0,0 +1,119 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [
+    RouterOutlet,
+    RouterLink,
+    RouterLinkActive,
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
+  template: `
+    <div class="app-shell">
+      <mat-toolbar class="app-toolbar">
+        <a class="brand" routerLink="/">
+          <span class="brand-mark">A</span>
+          <span class="brand-text">
+            <strong>AzioneLab</strong>
+            <small>Theatre and reservations</small>
+          </span>
+        </a>
+
+        <nav class="main-nav">
+          <a mat-button routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">Home</a>
+          <a mat-button routerLink="/shows" routerLinkActive="active">Shows</a>
+          <a mat-button routerLink="/check-in" routerLinkActive="active">Check-in</a>
+        </nav>
+      </mat-toolbar>
+
+      <main class="page-shell">
+        <router-outlet></router-outlet>
+      </main>
+    </div>
+  `,
+  styles: [`
+    .app-shell {
+      min-height: 100vh;
+    }
+
+    .app-toolbar {
+      position: sticky;
+      top: 0;
+      z-index: 10;
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      min-height: 72px;
+      padding: 0 24px;
+      background: rgba(251, 247, 242, 0.88);
+      backdrop-filter: blur(18px);
+      border-bottom: 1px solid var(--azionelab-border);
+    }
+
+    .brand {
+      display: inline-flex;
+      align-items: center;
+      gap: 12px;
+      color: inherit;
+      text-decoration: none;
+    }
+
+    .brand-mark {
+      display: inline-grid;
+      place-items: center;
+      width: 42px;
+      height: 42px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, var(--azionelab-accent), #ca6d3b);
+      color: white;
+      font-weight: 700;
+    }
+
+    .brand-text {
+      display: flex;
+      flex-direction: column;
+      line-height: 1.1;
+    }
+
+    .brand-text small {
+      color: var(--azionelab-muted);
+      font-size: 0.74rem;
+    }
+
+    .main-nav {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+
+    .main-nav .active {
+      background: rgba(159, 47, 40, 0.08);
+    }
+
+    .page-shell {
+      padding: 32px 20px 56px;
+    }
+
+    @media (max-width: 800px) {
+      .app-toolbar {
+        align-items: flex-start;
+        flex-direction: column;
+        padding: 16px 16px 14px;
+      }
+
+      .main-nav {
+        width: 100%;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppComponent {}

frontend/src/app/app.routes.ts

@@ -0,0 +1,16 @@
+import { Routes } from '@angular/router';
+
+import { BookingPlaceholderPageComponent } from './pages/booking-placeholder-page.component';
+import { CheckInPlaceholderPageComponent } from './pages/check-in-placeholder-page.component';
+import { HomePageComponent } from './pages/home-page.component';
+import { ShowDetailPlaceholderPageComponent } from './pages/show-detail-placeholder-page.component';
+import { ShowListPageComponent } from './pages/show-list-page.component';
+
+export const appRoutes: Routes = [
+  { path: '', component: HomePageComponent, title: 'AzioneLab' },
+  { path: 'shows', component: ShowListPageComponent, title: 'Shows | AzioneLab' },
+  { path: 'shows/:slug', component: ShowDetailPlaceholderPageComponent, title: 'Show detail | AzioneLab' },
+  { path: 'book/:performanceId', component: BookingPlaceholderPageComponent, title: 'Book | AzioneLab' },
+  { path: 'check-in', component: CheckInPlaceholderPageComponent, title: 'Check-in | AzioneLab' },
+  { path: '**', redirectTo: '' },
+];

frontend/src/app/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: true,
+  apiBaseUrl: '/api',
+};

frontend/src/app/pages/booking-placeholder-page.component.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { MatCardModule } from '@angular/material/card';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatListModule } from '@angular/material/list';
+
+@Component({
+  standalone: true,
+  imports: [MatCardModule, MatDividerModule, MatListModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <p class="eyebrow">Booking</p>
+        <h1>Performance {{ performanceId }}</h1>
+        <p class="supporting">
+          This page will host the reservation form and confirmation states backed by the existing booking APIs.
+        </p>
+      </header>
+
+      <mat-card class="content-card">
+        <mat-card-title>Planned interactions</mat-card-title>
+        <mat-card-content>
+          <mat-list>
+            <mat-list-item>Load performance detail and availability</mat-list-item>
+            <mat-list-item>Submit pending reservation</mat-list-item>
+            <mat-list-item>Show email confirmation guidance</mat-list-item>
+          </mat-list>
+        </mat-card-content>
+      </mat-card>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      margin-bottom: 22px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3rem);
+    }
+
+    .supporting {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+      max-width: 50ch;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BookingPlaceholderPageComponent {
+  protected readonly performanceId = this.route.snapshot.paramMap.get('performanceId') ?? '0';
+
+  constructor(private readonly route: ActivatedRoute) {}
+}

frontend/src/app/pages/check-in-placeholder-page.component.ts

@@ -0,0 +1,72 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  standalone: true,
+  imports: [MatCardModule, MatFormFieldModule, MatInputModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <p class="eyebrow">Staff check-in</p>
+        <h1>Mobile-friendly placeholder</h1>
+        <p class="supporting">
+          This route is ready for the authenticated token preview and check-in confirmation flow.
+        </p>
+      </header>
+
+      <mat-card class="content-card">
+        <mat-card-title>Future scan/lookup input</mat-card-title>
+        <mat-card-content>
+          <mat-form-field appearance="outline" class="full-width">
+            <mat-label>Opaque QR token</mat-label>
+            <input matInput placeholder="Paste or scan token" readonly>
+          </mat-form-field>
+        </mat-card-content>
+      </mat-card>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 760px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      margin-bottom: 22px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3rem);
+    }
+
+    .supporting {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+      max-width: 50ch;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+
+    .full-width {
+      width: 100%;
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CheckInPlaceholderPageComponent {}

frontend/src/app/pages/home-page.component.ts

@@ -0,0 +1,113 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
+import { API_BASE_URL } from '../services/api-config.token';
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, MatButtonModule, MatCardModule],
+  template: `
+    <section class="hero">
+      <div class="hero-copy">
+        <p class="eyebrow">AzioneLab Theatre Company</p>
+        <h1>Public website and booking UI foundations.</h1>
+        <p class="supporting">
+          This Angular shell is wired for the existing Django APIs and ready for the next booking-focused iterations.
+        </p>
+        <div class="hero-actions">
+          <a mat-flat-button color="primary" routerLink="/shows">Browse shows</a>
+          <a mat-stroked-button routerLink="/check-in">Check-in area</a>
+        </div>
+      </div>
+
+      <div class="hero-panel">
+        <mat-card>
+          <mat-card-title>Frontend wiring</mat-card-title>
+          <mat-card-content>
+            <p><strong>API base URL</strong></p>
+            <code>{{ apiBaseUrl }}</code>
+            <p class="panel-note">Placeholders are in place for public content, booking, and staff check-in flows.</p>
+          </mat-card-content>
+        </mat-card>
+      </div>
+    </section>
+  `,
+  styles: [`
+    .hero {
+      display: grid;
+      grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr);
+      gap: 28px;
+      align-items: stretch;
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+
+    .hero-copy {
+      padding: 36px 0;
+    }
+
+    .eyebrow {
+      margin: 0 0 12px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      max-width: 10ch;
+      font-size: clamp(2.5rem, 5vw, 4.75rem);
+      line-height: 0.95;
+    }
+
+    .supporting {
+      max-width: 52ch;
+      color: var(--azionelab-muted);
+      font-size: 1.08rem;
+      line-height: 1.65;
+      margin: 20px 0 0;
+    }
+
+    .hero-actions {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-top: 28px;
+    }
+
+    .hero-panel mat-card {
+      height: 100%;
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+
+    code {
+      display: inline-block;
+      margin-top: 8px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      background: rgba(30, 27, 24, 0.06);
+    }
+
+    .panel-note {
+      margin-top: 20px;
+      color: var(--azionelab-muted);
+      line-height: 1.5;
+    }
+
+    @media (max-width: 900px) {
+      .hero {
+        grid-template-columns: 1fr;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HomePageComponent {
+  protected readonly apiBaseUrl = inject(API_BASE_URL);
+}

frontend/src/app/pages/show-detail-placeholder-page.component.ts

@@ -0,0 +1,73 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TitleCasePipe } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+
+@Component({
+  standalone: true,
+  imports: [TitleCasePipe, RouterLink, MatButtonModule, MatCardModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <p class="eyebrow">Show detail</p>
+        <h1>{{ slug | titlecase }}</h1>
+        <p class="supporting">
+          This placeholder will bind to the public show detail and performance endpoints.
+        </p>
+      </header>
+
+      <mat-card class="content-card">
+        <mat-card-title>Next UI step</mat-card-title>
+        <mat-card-content>
+          <p>Wire show copy, upcoming performances, and booking entry points from the backend contract.</p>
+        </mat-card-content>
+        <mat-card-actions>
+          <a mat-button routerLink="/book/10">Open booking placeholder</a>
+        </mat-card-actions>
+      </mat-card>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 960px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      margin-bottom: 22px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3.2rem);
+    }
+
+    .supporting {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+      max-width: 52ch;
+    }
+
+    .content-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShowDetailPlaceholderPageComponent {
+  protected readonly slug = this.route.snapshot.paramMap.get('slug') ?? 'show';
+
+  constructor(private readonly route: ActivatedRoute) {}
+}

frontend/src/app/pages/show-list-page.component.ts

@@ -0,0 +1,125 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipsModule } from '@angular/material/chips';
+
+type DemoShow = {
+  slug: string;
+  title: string;
+  summary: string;
+  venue: string;
+  startsAt: string;
+};
+
+@Component({
+  standalone: true,
+  imports: [RouterLink, MatButtonModule, MatCardModule, MatChipsModule],
+  template: `
+    <section class="page">
+      <header class="page-header">
+        <div>
+          <p class="eyebrow">Public shows</p>
+          <h1>Show list placeholder</h1>
+        </div>
+        <p class="supporting">
+          This page is ready to bind to <code>GET /api/shows/</code> and <code>GET /api/performances/</code>.
+        </p>
+      </header>
+
+      <div class="show-grid">
+        @for (show of demoShows; track show.slug) {
+          <mat-card class="show-card">
+            <mat-card-title>{{ show.title }}</mat-card-title>
+            <mat-card-subtitle>{{ show.venue }}</mat-card-subtitle>
+            <mat-card-content>
+              <p>{{ show.summary }}</p>
+              <mat-chip-set>
+                <mat-chip>{{ show.startsAt }}</mat-chip>
+              </mat-chip-set>
+            </mat-card-content>
+            <mat-card-actions>
+              <a mat-button [routerLink]="['/shows', show.slug]">Open detail</a>
+            </mat-card-actions>
+          </mat-card>
+        }
+      </div>
+    </section>
+  `,
+  styles: [`
+    .page {
+      max-width: 1180px;
+      margin: 0 auto;
+    }
+
+    .page-header {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
+      gap: 24px;
+      align-items: end;
+      margin-bottom: 24px;
+    }
+
+    .eyebrow {
+      margin: 0 0 10px;
+      color: var(--azionelab-accent);
+      text-transform: uppercase;
+      font-size: 0.78rem;
+      font-weight: 700;
+    }
+
+    h1 {
+      margin: 0;
+      font-size: clamp(2rem, 4vw, 3rem);
+    }
+
+    .supporting {
+      margin: 0;
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    .show-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+      gap: 20px;
+    }
+
+    .show-card {
+      border-radius: 8px;
+      border: 1px solid var(--azionelab-border);
+      background: var(--azionelab-surface);
+      box-shadow: var(--azionelab-shadow);
+    }
+
+    .show-card p {
+      color: var(--azionelab-muted);
+      line-height: 1.6;
+    }
+
+    @media (max-width: 860px) {
+      .page-header {
+        grid-template-columns: 1fr;
+      }
+    }
+  `],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ShowListPageComponent {
+  protected readonly demoShows: DemoShow[] = [
+    {
+      slug: 'open-stage',
+      title: 'Open Stage',
+      summary: 'Placeholder list item for the first published production.',
+      venue: 'AzioneLab Theatre',
+      startsAt: 'May 15, 20:30',
+    },
+    {
+      slug: 'city-echoes',
+      title: 'City Echoes',
+      summary: 'Second sample entry showing how cards will map to live API data.',
+      venue: 'Studio Nuovo',
+      startsAt: 'May 22, 18:00',
+    },
+  ];
+}

frontend/src/app/services/api-config.token.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+
+import { environment } from '../environments/environment';
+
+export const API_BASE_URL = new InjectionToken<string>('API_BASE_URL', {
+  factory: () => environment.apiBaseUrl,
+});