From 650b3b37a06cfe2775f2b100f03847c686342c0a Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 17 Aug 2026 15:19:53 +0000 Subject: [PATCH] Fix what the review confirmed: anchoring, overlap, honesty, one voice MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fourteen findings from an adversarial review pass, applied together because most share two roots — geometry written against assumptions the renderer does not hold, and a design language spelled out longhand until it drifted. Correctness. The leader line pointed at empty space: CSS2DObject centres a label on its anchor by default, and margin only nudges the centred box — the overlay now anchors the left edge (center 0, 0.5) so the hairline meets the star. The info panel and not-found panel returned to top-4 at sm, under a search field that is 26rem wide and centred, covering the back button on every viewport from 640 to 1088px; they now wait for xl. The search empty state asserted "nothing matches" while the catalogues were still loading — and forever if they failed — so it now waits for the index. "Matches 8" was the page size wearing the costume of a count; the header now reports the real total, with the cap stated when it bites. The nameplate un-hides at lg instead of sm, clear of the rail and the object card. theme-color matches the void again. Accessibility. Tabbing to search changed one hairline's hue; the wrapper now carries the old ring as a visible focus indicator. Structure. hud-surface names the panel recipe that had been inlined at seven sites and had already forked into /85 and /92; the backdrop blur it carried is gone from every near-opaque panel — the canvas beneath redraws every frame, so each blur was re-sampled continuously for an effect the fill hid — and survives only as blur-sm on the genuinely translucent search shell. type-label and type-eyebrow name the two label voices, retiring 0.14em and the stray hover:bg-accent/10. The Measured/Derived rows both cards pasted twice each live once in ReadoutSectionsComponent; the reticle and chevron each draw from a single geometry, the reticle's stroke held in screen pixels so one mark serves every size. The acquire wipe plays once per search, not once per keystroke, because both outcomes now share one panel. hud-banner, which styled nothing since the rule was deleted, is a data-testid — the convention its own file already used. 527 unit tests, 6/6 end-to-end, production build, and a driven screenshot: every label now hangs off its star with the hairline touching the point. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01WaySiNst4HhDXBHnMy8p5G --- .../body-detail-scene.component.ts | 13 ++-- .../body-detail/info-panel.component.ts | 49 ++++-------- .../body-detail/readout-sections.component.ts | 43 +++++++++++ .../galaxy-system/star-label-overlay.ts | 5 ++ .../starmap-hud.component.spec.ts | 4 +- .../galaxy-system/starmap-hud.component.ts | 37 +++++----- .../system-object-card.component.ts | 44 +++-------- src/app/features/search/search.component.ts | 74 ++++++++++++------- src/app/shared/ui/chevron-icon.component.ts | 20 +++++ src/app/shared/ui/reticle-icon.component.ts | 25 +++++++ src/index.html | 2 +- src/styles.css | 30 +++++++- 12 files changed, 222 insertions(+), 124 deletions(-) create mode 100644 src/app/features/body-detail/readout-sections.component.ts create mode 100644 src/app/shared/ui/chevron-icon.component.ts create mode 100644 src/app/shared/ui/reticle-icon.component.ts diff --git a/src/app/features/body-detail/body-detail-scene.component.ts b/src/app/features/body-detail/body-detail-scene.component.ts index 3f03892..71a8f29 100644 --- a/src/app/features/body-detail/body-detail-scene.component.ts +++ b/src/app/features/body-detail/body-detail-scene.component.ts @@ -13,6 +13,7 @@ import { BodyRecord } from '../../shared/models/body.model'; import { ExoplanetRecord } from '../../shared/models/exoplanet.model'; import { StarRecord } from '../../shared/models/star.model'; import { NavigationStore } from '../../shared/state/navigation.store'; +import { ChevronIconComponent } from '../../shared/ui/chevron-icon.component'; import { BodyDetailViewModel } from './body-detail.model'; import { buildBodyViewModel } from './body-view-model'; import { InfoPanelComponent } from './info-panel.component'; @@ -36,23 +37,21 @@ const GLOW_SCALE = 2.6; @Component({ selector: 'app-body-detail-scene', providers: [EngineService], - imports: [InfoPanelComponent, RouterLink], + imports: [ChevronIconComponent, InfoPanelComponent, RouterLink], template: `
@if (viewModel()) { } @else if (notFound()) { -
-

No record

+
+

No record

That id isn't in the catalog — it may have been renamed or mistyped.

- - - + Back to the galaxy
diff --git a/src/app/features/body-detail/info-panel.component.ts b/src/app/features/body-detail/info-panel.component.ts index 5e786ee..0cdbda9 100644 --- a/src/app/features/body-detail/info-panel.component.ts +++ b/src/app/features/body-detail/info-panel.component.ts @@ -1,64 +1,43 @@ import { Component, computed, input } from '@angular/core'; import { Router } from '@angular/router'; +import { ChevronIconComponent } from '../../shared/ui/chevron-icon.component'; import { bodyReadouts } from './body-readouts'; import { BodyDetailViewModel } from './body-detail.model'; +import { ReadoutSectionsComponent } from './readout-sections.component'; /** * Displays the real NASA data for the currently selected body/exoplanet: kind, physical * size/mass, orbital elements, and (for exoplanets) discovery year. Presentational only — * `BodyDetailSceneComponent` supplies the view model and owns navigation state. * - * The rows come from `bodyReadouts`, shared with the system view's object card so the same body - * cannot read differently in the two places it can be inspected. + * The rows come from `bodyReadouts` via `ReadoutSectionsComponent`, both shared with the system + * view's object card so the same body cannot read differently in the two places it can be + * inspected. */ @Component({ selector: 'app-info-panel', + imports: [ChevronIconComponent, ReadoutSectionsComponent], template: ` - -
+ +

{{ body().name }}

-

{{ readouts().kindLabel }} · {{ body().hostStarName }}

+

{{ readouts().kindLabel }} · {{ body().hostStarName }}

- - @if (readouts().measured.length) { -

Measured

-
- @for (row of readouts().measured; track row.label) { -
-
{{ row.label }}
-
{{ row.value }}
-
- } -
- } - -

Derived

-
- @for (row of readouts().derived; track row.label) { -
-
{{ row.label }}
-
{{ row.value }}
-
- } -
- -

{{ readouts().provenance }}

+
` }) diff --git a/src/app/features/body-detail/readout-sections.component.ts b/src/app/features/body-detail/readout-sections.component.ts new file mode 100644 index 0000000..3909783 --- /dev/null +++ b/src/app/features/body-detail/readout-sections.component.ts @@ -0,0 +1,43 @@ +import { ChangeDetectionStrategy, Component, input } from '@angular/core'; + +import { BodyReadouts } from './body-readouts'; + +/** + * The Measured/Derived rows and the provenance footnote, shared by the detail page's info panel + * and the system view's object card. `bodyReadouts` already guarantees the two surfaces agree + * on the numbers; this guarantees they agree on the pixels — the markup used to be pasted four + * times across the two templates, which is exactly the drift the shared data model exists to + * prevent. + */ +@Component({ + selector: 'app-readout-sections', + changeDetection: ChangeDetectionStrategy.OnPush, + template: ` + @if (readouts().measured.length) { +

Measured

+
+ @for (row of readouts().measured; track row.label) { +
+
{{ row.label }}
+
{{ row.value }}
+
+ } +
+ } + +

Derived

+
+ @for (row of readouts().derived; track row.label) { +
+
{{ row.label }}
+
{{ row.value }}
+
+ } +
+ +

{{ readouts().provenance }}

+ ` +}) +export class ReadoutSectionsComponent { + readonly readouts = input.required(); +} diff --git a/src/app/features/galaxy-system/star-label-overlay.ts b/src/app/features/galaxy-system/star-label-overlay.ts index 05979ee..dad2d3f 100644 --- a/src/app/features/galaxy-system/star-label-overlay.ts +++ b/src/app/features/galaxy-system/star-label-overlay.ts @@ -98,6 +98,11 @@ export class StarLabelOverlay { } const object = new CSS2DObject(element); + // Anchor the label's left edge at the point, vertically centred. The default center of + // (0.5, 0.5) makes CSS2DRenderer emit translate(-50%,-50%), keeping the box centred on the + // star — under which `.map-label`'s margin offset only nudges the centred box sideways and + // the leader line points at empty space half the label's width from the star. + object.center.set(0, 0.5); object.position.set(point.x, point.y, point.z); this.scene.add(object); this.labelObjects.set(point.id, object); diff --git a/src/app/features/galaxy-system/starmap-hud.component.spec.ts b/src/app/features/galaxy-system/starmap-hud.component.spec.ts index 79ed7a0..980dce8 100644 --- a/src/app/features/galaxy-system/starmap-hud.component.spec.ts +++ b/src/app/features/galaxy-system/starmap-hud.component.spec.ts @@ -94,11 +94,11 @@ describe('StarmapHudComponent', () => { fixture.componentRef.setInput('title', 'Sol'); fixture.detectChanges(); - expect((fixture.nativeElement as HTMLElement).querySelector('.hud-banner')?.textContent?.trim()).toBe('Sol'); + expect((fixture.nativeElement as HTMLElement).querySelector('[data-testid="hud-banner"]')?.textContent?.trim()).toBe('Sol'); }); it('shows no banner when the view is holding nothing', () => { // An empty nameplate is worse than none: it reads as a selection that failed to resolve. - expect(render('galaxy').querySelector('.hud-banner')).toBeNull(); + expect(render('galaxy').querySelector('[data-testid="hud-banner"]')).toBeNull(); }); }); diff --git a/src/app/features/galaxy-system/starmap-hud.component.ts b/src/app/features/galaxy-system/starmap-hud.component.ts index 9019aaa..cc9371d 100644 --- a/src/app/features/galaxy-system/starmap-hud.component.ts +++ b/src/app/features/galaxy-system/starmap-hud.component.ts @@ -1,6 +1,7 @@ import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core'; import { ViewLevel } from '../../shared/state/navigation.store'; +import { ReticleIconComponent } from '../../shared/ui/reticle-icon.component'; export interface HudReadout { readonly label: string; @@ -45,6 +46,7 @@ const LADDER: readonly { level: ViewLevel; label: string }[] = [ @Component({ selector: 'app-starmap-hud', changeDetection: ChangeDetectionStrategy.OnPush, + imports: [ReticleIconComponent], host: { class: 'pointer-events-none absolute inset-0 block select-none' }, template: `
@@ -52,21 +54,18 @@ const LADDER: readonly { level: ViewLevel; label: string }[] = [ @if (showReticle()) { - + } -