AI Implementation feature(880): Authenticated Shell, Quick Tabs and Change Password 1.04 (#19)

frontend/src/app/core/services/event-status.pure.ts

@@ -36,3 +36,14 @@ export function deriveCountdownText(
   }
   return secondsToEnd == null ? '00:00:00' : formatDdHhMm(secondsToEnd);
 }
+
+export const LED_COLOR_BY_STATE: Readonly<Record<EventState, string>> = {
+  running: 'var(--color-success)',
+  countdown: 'var(--color-warning)',
+  stopped: 'var(--color-danger)',
+  unconfigured: 'var(--color-secondary)',
+};
+
+export function ledBackgroundColor(state: EventState): string {
+  return LED_COLOR_BY_STATE[state];
+}

frontend/src/app/core/services/event-status.store.ts

@@ -4,9 +4,19 @@ import {
   EventSourceLike,
   EventState,
   EventStatePayload,
+  LED_COLOR_BY_STATE,
+  ledBackgroundColor,
 } from './event-status.pure';
 
-export { EventState, EventStatePayload, EventSourceLike, deriveCountdownText, formatDdHhMm } from './event-status.pure';
+export {
+  EventState,
+  EventStatePayload,
+  EventSourceLike,
+  deriveCountdownText,
+  formatDdHhMm,
+  LED_COLOR_BY_STATE,
+  ledBackgroundColor,
+} from './event-status.pure';
 
 @Injectable({ providedIn: 'root' })
 export class EventStatusStore {

frontend/src/app/features/shell/header/shell-header.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { EventState } from '../../../core/services/event-status.store';
+import { EventState, ledBackgroundColor } from '../../../core/services/event-status.store';
 
 @Component({
   selector: 'app-shell-header',
@@ -8,20 +8,14 @@ import { EventState } from '../../../core/services/event-status.store';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [CommonModule],
   styles: [`
-    :host .led,
     .led {
       display: inline-block;
       width: 10px;
       height: 10px;
       border-radius: 50%;
       border: 0;
-      background-color: transparent;
       vertical-align: middle;
     }
-    .led-running { background-color: var(--color-success); }
-    .led-countdown { background-color: var(--color-warning); }
-    .led-stopped { background-color: var(--color-danger); }
-    .led-unconfigured { background-color: var(--color-secondary); }
   `],
   template: `
     <header class="shell-header" data-testid="shell-header">
@@ -45,6 +39,7 @@ import { EventState } from '../../../core/services/event-status.store';
           [class.led-countdown]="eventState() === 'countdown'"
           [class.led-stopped]="eventState() === 'stopped'"
           [class.led-unconfigured]="eventState() === 'unconfigured'"
+          [style.background-color]="ledColor()"
           data-testid="shell-led"
           [attr.aria-label]="'Event status: ' + eventState()"
         ></span>
@@ -120,5 +115,5 @@ export class ShellHeaderComponent {
   readonly adminClick = output<void>();
   readonly logoutClick = output<void>();
 
-  readonly ledClass = computed(() => `led led-${this.eventState()}`);
-}
+  readonly ledColor = computed(() => ledBackgroundColor(this.eventState()));
+}