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

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()));
+}