feat(fp): WP-07 — brief on the shared idioms + RemoteData MDX

Collapse brief.store's busy signal + nullable lastError into one Idle |
Busy | Failed union (saveState gets matching tag-object style), and route
brief.page's load through RemoteData + <app-async> instead of a hand-rolled
@switch, via a BriefStore.remoteData projection of the machine's existing
loading/failed tags -- the machine keeps owning the letter's own status
lifecycle untouched. New brief.store.spec.ts covers the Busy->Idle/Failed
transitions; new Foundations/RemoteData & Async MDX page documents the
pattern and the WP-06 typed-loaded-slot fallback. Deviation from the
original plan recorded in the WP file.

src/app/brief/application/brief.store.spec.ts

@@ -0,0 +1,88 @@
+import { TestBed } from '@angular/core/testing';
+import { describe, it, expect } from 'vitest';
+import { Result } from '@shared/kernel/fp';
+import { Brief, BriefDecisions } from '@brief/domain/brief';
+import { BriefAdapter, BriefView } from '@brief/infrastructure/brief.adapter';
+import { BriefStore } from './brief.store';
+
+const decisions: BriefDecisions = {
+  canEdit: true,
+  canApprove: true,
+  canReject: true,
+  canSend: true,
+};
+
+const brief: Brief = {
+  briefId: 'b1',
+  beroep: 'arts',
+  templateId: 't1',
+  placeholders: [],
+  sections: [],
+  status: { tag: 'draft' },
+  drafterId: 'u1',
+};
+
+const view: BriefView = { brief, availablePassages: [], decisions };
+
+function setup(adapter: Partial<BriefAdapter>): BriefStore {
+  TestBed.configureTestingModule({ providers: [{ provide: BriefAdapter, useValue: adapter }] });
+  return TestBed.inject(BriefStore);
+}
+
+describe('BriefStore action state (Idle | Busy | Failed)', () => {
+  it('is Busy synchronously once a transition starts, then Idle on success', async () => {
+    const approved: BriefView = {
+      ...view,
+      brief: { ...brief, status: { tag: 'approved', approvedBy: 'u2', approvedAt: 't' } },
+    };
+    const store = setup({
+      load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
+      save: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
+      approve: (): Promise<Result<string, BriefView>> =>
+        Promise.resolve({ ok: true, value: approved }),
+    });
+    await store.load();
+
+    const pending = store.approve();
+    expect(store.busy()).toBe(true); // set synchronously, before any await resolves
+
+    await pending;
+    expect(store.busy()).toBe(false);
+    expect(store.lastError()).toBeNull();
+  });
+
+  it('goes Busy then Failed on a failing transition, surfacing the error', async () => {
+    const store = setup({
+      load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
+      save: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
+      approve: (): Promise<Result<string, BriefView>> =>
+        Promise.resolve({ ok: false, error: 'niet toegestaan' }),
+    });
+    await store.load();
+
+    await store.approve();
+    expect(store.busy()).toBe(false);
+    expect(store.lastError()).toBe('niet toegestaan');
+  });
+
+  it('a subsequent successful transition clears a prior Failed state', async () => {
+    let approveResult: Result<string, BriefView> = { ok: false, error: 'eerste poging mislukt' };
+    const store = setup({
+      load: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
+      save: (): Promise<Result<string, BriefView>> => Promise.resolve({ ok: true, value: view }),
+      approve: (): Promise<Result<string, BriefView>> => Promise.resolve(approveResult),
+    });
+    await store.load();
+
+    await store.approve();
+    expect(store.lastError()).toBe('eerste poging mislukt');
+
+    approveResult = {
+      ok: true,
+      value: { ...view, brief: { ...brief, status: { tag: 'approved', approvedBy: 'u2', approvedAt: 't' } } },
+    };
+    await store.approve();
+    expect(store.busy()).toBe(false);
+    expect(store.lastError()).toBeNull();
+  });
+});

src/app/brief/application/brief.store.ts

@@ -1,5 +1,6 @@
 import { Injectable, computed, inject, signal } from '@angular/core';
 import { Result } from '@shared/kernel/fp';
+import { RemoteData } from '@shared/application/remote-data';
 import { createStore } from '@shared/application/store';
 import {
   Brief,
@@ -11,6 +12,17 @@ import {
 import { BriefMsg, BriefState, initial, reduce } from '@brief/domain/brief.machine';
 import { BriefAdapter, BriefView } from '@brief/infrastructure/brief.adapter';
 
+/** Transient action state (submit/approve/reject/send/resetDemo) — one tagged union
+    instead of a busy boolean + a nullable error sitting side by side. */
+type ActionState = { tag: 'Idle' } | { tag: 'Busy' } | { tag: 'Failed'; error: string };
+
+/** Debounced-autosave indicator, shown in a small status line near the toolbar —
+    a separate concern from ActionState (a stale autosave error doesn't block
+    submit/approve/reject), but tag-aligned with it for one consistent idiom. */
+type SaveState = { tag: 'Idle' } | { tag: 'Saving' } | { tag: 'Saved' } | { tag: 'Error' };
+
+type LoadedBriefState = Extract<BriefState, { tag: 'loaded' }>;
+
 /**
  * Root singleton for the letter: the Elm store (Model + dispatch), the derived
  * read-model, and the commands (effects) that call the adapter and dispatch the
@@ -25,10 +37,31 @@ export class BriefStore {
   private store = createStore<BriefState, BriefMsg>(initial, reduce);
 
   readonly model = this.store.model;
-  readonly busy = signal(false);
-  readonly lastError = signal<string | null>(null);
+
+  private actionState = signal<ActionState>({ tag: 'Idle' });
+  readonly busy = computed(() => this.actionState().tag === 'Busy');
+  readonly lastError = computed(() => {
+    const s = this.actionState();
+    return s.tag === 'Failed' ? s.error : null;
+  });
+
   /** Surfaced autosave state for the indicator + aria-live region. */
-  readonly saveState = signal<'idle' | 'saving' | 'saved' | 'error'>('idle');
+  readonly saveState = signal<SaveState>({ tag: 'Idle' });
+
+  /** The load lifecycle as `RemoteData`, for `<app-async>` — the machine keeps
+      owning the letter's own domain lifecycle (draft/submitted/approved/…); this is
+      purely a projection of its loading/failed tags onto the shared async seam. */
+  readonly remoteData = computed<RemoteData<Error | undefined, LoadedBriefState>>(() => {
+    const s = this.model();
+    switch (s.tag) {
+      case 'loading':
+        return { tag: 'Loading' };
+      case 'failed':
+        return { tag: 'Failure', error: new Error(s.reason) };
+      case 'loaded':
+        return { tag: 'Success', value: s };
+    }
+  });
 
   private brief = computed<Brief | null>(() => {
     const s = this.model();
@@ -74,26 +107,28 @@ export class BriefStore {
   private async flushSave() {
     const b = this.brief();
     if (!b) return;
-    this.saveState.set('saving');
+    this.saveState.set({ tag: 'Saving' });
     const r = await this.adapter.save(b.sections);
     if (r.ok) {
-      this.saveState.set('saved');
+      this.saveState.set({ tag: 'Saved' });
     } else {
-      this.lastError.set(r.error);
-      this.saveState.set('error');
+      this.actionState.set({ tag: 'Failed', error: r.error });
+      this.saveState.set({ tag: 'Error' });
     }
   }
 
   /** Demo "start over": recreate the brief server-side and load the fresh view. */
   async resetDemo() {
-    this.busy.set(true);
-    this.lastError.set(null);
+    this.actionState.set({ tag: 'Busy' });
     clearTimeout(this.saveTimer);
     const r = await this.adapter.reset();
-    this.busy.set(false);
-    this.saveState.set('idle');
-    if (r.ok) this.store.dispatch({ tag: 'BriefLoaded', ...r.value });
-    else this.lastError.set(r.error);
+    this.saveState.set({ tag: 'Idle' });
+    if (r.ok) {
+      this.actionState.set({ tag: 'Idle' });
+      this.store.dispatch({ tag: 'BriefLoaded', ...r.value });
+    } else {
+      this.actionState.set({ tag: 'Failed', error: r.error });
+    }
   }
 
   submit = () => this.transition(() => this.adapter.submit());
@@ -104,16 +139,15 @@ export class BriefStore {
   // A transition: flush any pending save, call the server (authoritative), then mirror
   // the returned status through the pure reducer's guarded transition.
   private async transition(action: () => Promise<Result<string, BriefView>>) {
-    this.busy.set(true);
-    this.lastError.set(null);
+    this.actionState.set({ tag: 'Busy' });
     clearTimeout(this.saveTimer);
     await this.flushSave();
     const r = await action();
-    this.busy.set(false);
     if (!r.ok) {
-      this.lastError.set(r.error);
+      this.actionState.set({ tag: 'Failed', error: r.error });
       return;
     }
+    this.actionState.set({ tag: 'Idle' });
     this.applyServerStatus(r.value);
   }