fix: build error in signal forms + API error handling

Signal forms fix:
- submit() action receives FieldTree not plain model; read values
  via field.title().value() and return Promise.resolve()

Error handling:
- Add mutationError: string | null to TodoState
- Mutation tapResponse.error sets a user-friendly message in state
- Mutation tapResponse.next clears mutationError
- Add clearMutationError() store method
- TodoPage shows dismissible error banner for mutation errors
- TodoPage shows fetch error alert (cloud_off + retry button)
  when store.todos.error() is set, replacing the list

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: chrisjwalk-bot

libs/todo/src/lib/components/todo-form/todo-form.ts

@@ -93,13 +93,14 @@ export class TodoForm {
 
   handleSubmit(event: SubmitEvent): void {
     event.preventDefault();
-    submit(this.todoForm, (value) => {
+    submit(this.todoForm, (field) => {
       this.create.emit({
-        title: value.title.trim(),
-        description: value.description.trim(),
+        title: field.title().value().trim(),
+        description: field.description().value().trim(),
         completed: false,
       });
       this.model.set({ title: '', description: '' });
+      return Promise.resolve();
     });
   }
 }

libs/todo/src/lib/components/todo-page/todo-page.ts

@@ -1,22 +1,81 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
 import { LayoutStore, PageContainer, PageToolbar } from '@myorg/shared';
 import { TodoStore } from '../../state/todo.store';
 import { TodoForm } from '../todo-form/todo-form';
 import { TodoList } from '../todo-list/todo-list';
 
 @Component({
   selector: 'lib-todo-page',
-  imports: [PageToolbar, PageContainer, TodoForm, TodoList],
+  imports: [
+    PageToolbar,
+    PageContainer,
+    TodoForm,
+    TodoList,
+    MatIcon,
+    MatIconButton,
+  ],
   template: `
     <lib-page-toolbar [title]="layoutStore.title()" />
     <lib-page-container>
       <lib-todo-form class="mb-6" (create)="store.create($event)" />
-      <lib-todo-list
-        [todos]="store.todos.value() ?? []"
-        [loading]="store.todos.isLoading()"
-        (toggled)="store.toggle($event)"
-        (removed)="store.remove($event)"
-      />
+
+      @if (store.mutationError()) {
+        <div
+          class="mb-4 flex items-start gap-3 rounded-xl border border-error bg-error-container p-4"
+          role="alert"
+        >
+          <mat-icon class="mt-0.5 shrink-0 text-on-error-container"
+            >error</mat-icon
+          >
+          <p class="flex-1 text-sm text-on-error-container">
+            {{ store.mutationError() }}
+          </p>
+          <button
+            mat-icon-button
+            class="!-m-2 shrink-0 !text-on-error-container"
+            aria-label="Dismiss error"
+            (click)="store.clearMutationError()"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        </div>
+      }
+
+      @if (store.todos.error()) {
+        <div
+          class="mx-auto flex w-full max-w-md items-start gap-4 rounded-xl border border-error bg-error-container p-4"
+          role="alert"
+        >
+          <mat-icon class="mt-0.5 shrink-0 text-on-error-container"
+            >cloud_off</mat-icon
+          >
+          <div class="flex flex-1 flex-col gap-1">
+            <p class="text-sm font-medium leading-none text-on-error-container">
+              Could not load todos
+            </p>
+            <p class="text-sm text-on-error-container/80">
+              The API could not be reached. Check your connection and try again.
+            </p>
+          </div>
+          <button
+            mat-icon-button
+            class="!-m-2 shrink-0 !text-on-error-container"
+            aria-label="Retry"
+            (click)="store.reload()"
+          >
+            <mat-icon>refresh</mat-icon>
+          </button>
+        </div>
+      } @else {
+        <lib-todo-list
+          [todos]="store.todos.value() ?? []"
+          [loading]="store.todos.isLoading()"
+          (toggled)="store.toggle($event)"
+          (removed)="store.remove($event)"
+        />
+      }
     </lib-page-container>
   `,
   host: {

libs/todo/src/lib/state/todo.store.ts

@@ -19,10 +19,12 @@ import { TodoService } from '../services/todo.service';
 
 export type TodoState = {
   syncEnabled: boolean;
+  mutationError: string | null;
 };
 
 export const todoInitialState: TodoState = {
   syncEnabled: false,
+  mutationError: null,
 };
 
 export function withTodoFeature() {
@@ -54,13 +56,23 @@ export function withTodoFeature() {
         todos.reload();
       },
 
+      clearMutationError() {
+        patchState(store, { mutationError: null });
+      },
+
       create: rxMethod<CreateTodoRequest>(
         pipe(
           switchMap((todo) =>
             todoService.create(todo).pipe(
               tapResponse({
-                next: () => todos.reload(),
-                error: (error) => console.error('Failed to create todo', error),
+                next: () => {
+                  patchState(store, { mutationError: null });
+                  todos.reload();
+                },
+                error: () =>
+                  patchState(store, {
+                    mutationError: 'Failed to create todo. Please try again.',
+                  }),
               }),
             ),
           ),
@@ -72,8 +84,14 @@ export function withTodoFeature() {
           switchMap(({ id, changes }) =>
             todoService.update(id, changes).pipe(
               tapResponse({
-                next: () => todos.reload(),
-                error: (error) => console.error('Failed to update todo', error),
+                next: () => {
+                  patchState(store, { mutationError: null });
+                  todos.reload();
+                },
+                error: () =>
+                  patchState(store, {
+                    mutationError: 'Failed to update todo. Please try again.',
+                  }),
               }),
             ),
           ),
@@ -85,8 +103,14 @@ export function withTodoFeature() {
           switchMap((id) =>
             todoService.remove(id).pipe(
               tapResponse({
-                next: () => todos.reload(),
-                error: (error) => console.error('Failed to remove todo', error),
+                next: () => {
+                  patchState(store, { mutationError: null });
+                  todos.reload();
+                },
+                error: () =>
+                  patchState(store, {
+                    mutationError: 'Failed to delete todo. Please try again.',
+                  }),
               }),
             ),
           ),
@@ -98,8 +122,14 @@ export function withTodoFeature() {
           switchMap((todo) =>
             todoService.update(todo.id, { completed: !todo.completed }).pipe(
               tapResponse({
-                next: () => todos.reload(),
-                error: (error) => console.error('Failed to toggle todo', error),
+                next: () => {
+                  patchState(store, { mutationError: null });
+                  todos.reload();
+                },
+                error: () =>
+                  patchState(store, {
+                    mutationError: 'Failed to update todo. Please try again.',
+                  }),
               }),
             ),
           ),