web: payment sources screen with inline create

[rghvgrv]

Parent

#196 — PRD: Angular web client for SubVora (parity minus reminders)

What to build

The payment sources screen, read plus create: each source's label and type, with an inline add form. Demoable as adding "Amex — Card" and seeing it available in the subscription form's payment-source picker.

Implementation Steps

1. API service — extend core/api/payment-sources-api.service.ts (created read-only in the subscription form slice) with create(label, sourceType).
2. Store — features/payment-sources/payment-sources.store.ts: items signal, load(), create(...) appending on success, failures via the error mapper.
3. Screen — features/payment-sources/payment-sources.component.ts: list rows showing label plus a type icon, and an inline add form with label (required, ≤100) and a type select over Card, BankAccount, Wallet, Other.
4. Type icons — a small map from PaymentSourceType to a Material icon, with Other as the fallback so an unrecognised value never renders blank.
5. Route — lazily-loaded /payment-sources behind authGuard, linked from the shell nav.
6. Spec — payment-sources.store.spec.ts: create appends on success; a 400 surfaces the mapped validation message; a load failure surfaces the mapped message and keeps prior rows.

Agent Routing

agent_routing:
  complexity_hint: easy
  required_capability: balanced
  parallel_safe: true
  cost_preference: low
  speed_preference: balanced
  ownership_scope:
    - src/SubVora.Web/src/app/core/api/payment-sources-api.service.ts
    - src/SubVora.Web/src/app/features/payment-sources/**
    - src/SubVora.Web/src/app/app.routes.ts
  verification:
    - cd src/SubVora.Web && npx ng test --no-watch

Technical Context Snapshot

Current stack in scope

• UI: Angular (20+) standalone components with signals and built-in control flow, Angular Material (Material 3) as the only component library, SCSS. Static SPA — no SSR, no service worker.
• State: signal-backed injectable stores, one per domain area, mirroring the MAUI ViewModel split in src/SubVora.Mobile/ViewModels one-to-one. No NgRx.
• API access: hand-written models plus one service per API controller under src/SubVora.Web/src/app/core/api. Enums travel as JSON strings (JsonStringEnumConverter in Program.cs), so TypeScript string-literal unions are exact.
• Backend consumed unchanged: ASP.NET Core net10.0, /api/v1/, JWT bearer in the Authorization header, tokens in JSON bodies (no cookies).
• Tests: Angular CLI unit-test builder (Vitest runner; Karma is deprecated) with HttpTestingController. Stores, interceptors, mappers and utils only — no component-DOM or browser automation.

Dependencies in scope

• Reuse: @angular/*, @angular/material, rxjs, and the utilities already added under src/SubVora.Web/src/app/core. No chart library, no date library, no HTTP wrapper library.
• New dependency additions allowed for this slice: no. If a dependency looks unavoidable, stop and raise it on the issue rather than adding it.

Architecture alignment

• Preserve the repo's load-bearing rules (CLAUDE.md): burn-rate maths is server-side and counts cycles, never days; currency conversion is a read-time projection and stored amounts are never overwritten; nothing advances next_billing_date on a timer; provider matching stays one SQL query; the mobile SQLite cache stays a read-only mirror.
• There is deliberately no shared DTO project. Web models mirror the API's JSON contract by convention — a contract change means editing both sides.
• create-git-issue provides routing hints only and assigns no concrete agent or model.
• run-with-it remains the final runtime routing authority.

Integration touchpoints

• Consumes GET and POST /api/v1/payment-sources.
• Mirrors CreatePaymentSourceRequestValidator: label required and ≤100 characters, sourceType within the enum (defaults to Other server-side).
• Payment source types travel as strings; the icon map keys on those strings, never on an ordinal.

Acceptance criteria

• Payment sources load with a type icon per row, and a new one can be added inline.
• A newly created source is immediately selectable in the subscription form's picker.
• Validation mirrors the server's label and type rules.

Blocked by

• web: auth interceptor with proactive and single-flight token refresh #205 (slice 9)