AI Implementation feature(879): Authenticated Shell, Quick Tabs and Change Password 1.03 #18
@@ -3,7 +3,7 @@ type: architecture
|
||||
title: Frontend Structure
|
||||
description: Angular routes, components, services, guards, interceptors, and authenticated SSE transport.
|
||||
tags: [architecture, frontend, angular, shell, sse]
|
||||
timestamp: 2026-07-21T23:25:00Z
|
||||
timestamp: 2026-07-22T09:22:34Z
|
||||
---
|
||||
|
||||
# Routes
|
||||
@@ -25,7 +25,7 @@ Routes live in `frontend/src/app/app.routes.ts`:
|
||||
| Symbol | Path | Responsibility |
|
||||
|---|---|---|
|
||||
| `HomeComponent` | `frontend/src/app/features/home/home.component.ts` | Smart shell; owns navigation signals, user hydration, change-password flow, and event-stream lifecycle. |
|
||||
| `ShellHeaderComponent` | `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders title, active section, event LED/countdown, and user menu. |
|
||||
| `ShellHeaderComponent` | `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders title, active section, event LED/countdown, and user menu; contains component-scoped LED styling. |
|
||||
| `QuickTabsComponent` | `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Emits navigation events for Challenges, Scoreboard, and Blog. |
|
||||
| `EventStatusStore` | `frontend/src/app/core/services/event-status.store.ts` | Applies event state frames and computes countdown text. |
|
||||
| `AuthenticatedEventSourceService` | `frontend/src/app/core/services/authenticated-event-source.service.ts` | Opens authenticated SSE over `fetch`, parsing streamed frames into `EventSourceLike` events. |
|
||||
|
||||
@@ -3,7 +3,7 @@ type: guide
|
||||
title: Authenticated Shell
|
||||
description: How a signed-in user experiences the post-login shell, including authenticated event streaming.
|
||||
tags: [guide, shell, header, sse, navigation, tester]
|
||||
timestamp: 2026-07-22T09:03:53Z
|
||||
timestamp: 2026-07-22T09:22:34Z
|
||||
---
|
||||
|
||||
# When this view is available
|
||||
@@ -35,11 +35,7 @@ before the shell mounts.
|
||||
|
||||
# Event LED colors
|
||||
|
||||
The LED is rendered by `ShellHeaderComponent` as a `<span class="led">`
|
||||
with one of four state classes attached via `[class.led-<state>]`. The
|
||||
visual styling lives in `frontend/src/styles.css` and is driven entirely
|
||||
by the existing theme color tokens — there is no per-state color in
|
||||
TypeScript.
|
||||
The LED is rendered by `ShellHeaderComponent` as a `<span class="led">` with one of four state classes attached via `[class.led-<state>]`. Its component-scoped styling is declared in `frontend/src/app/features/shell/header/shell-header.component.ts` and is driven entirely by the existing theme color tokens — there is no per-state color in TypeScript.
|
||||
|
||||
| Event state | CSS class | Color token | Approx. hex | Visual |
|
||||
|-------------------|-----------------------|-----------------------|-------------|--------|
|
||||
@@ -81,8 +77,8 @@ error event. The shell retains the last event state until a later connection suc
|
||||
| `frontend/src/app/features/home/home.component.ts` | Hosts the shell and starts/stops the authenticated event stream. |
|
||||
| `frontend/src/app/core/services/authenticated-event-source.service.ts` | Fetch-based authenticated SSE transport with abort and frame parsing. |
|
||||
| `frontend/src/app/core/services/event-status.store.ts` | Applies event frames and derives the live countdown. |
|
||||
| `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders event LED, countdown, navigation, and user menu. |
|
||||
| `frontend/src/styles.css` | Defines the `.led` base shape plus the four `.led-{state}` background-color rules keyed on theme tokens. |
|
||||
| `frontend/src/app/features/shell/header/shell-header.component.ts` | Renders event LED, countdown, navigation, and user menu; owns the component-scoped LED shape and state color rules. |
|
||||
| `frontend/src/styles.css` | Defines the shared theme color tokens consumed by the shell LED. |
|
||||
| `frontend/src/app/features/shell/tabs/quick-tabs.component.ts` | Renders the main navigation tabs. |
|
||||
| `tests/frontend/authenticated-event-source.spec.ts` | Verifies authorization headers, SSE frame delivery, and anonymous header omission. |
|
||||
|
||||
|
||||
+1
-1
@@ -11,7 +11,7 @@ scoreboard, an event window with a public countdown, theming, and admin
|
||||
controls.
|
||||
|
||||
The docs below are organized by purpose so agents can pull just the slice
|
||||
they need. Last regenerated 2026-07-22T09:03:53Z.
|
||||
they need. Last regenerated 2026-07-22T09:22:34Z.
|
||||
|
||||
# Architecture
|
||||
|
||||
|
||||
Reference in New Issue
Block a user