feat: Implement tasks feature using NGRX signals and remove the old counter store, alongside general project configuration and skill documentation updates.

2026-03-08 09:50:17 +01:00
parent 2184971175
commit 9d13cc652a
47 changed files with 15272 additions and 14144 deletions
@@ -12,7 +12,7 @@ Signals are Angular's reactive primitive for state management. They provide sync
 ### signal() - Writable State

 ```typescript
-import { signal } from "@angular/core";
+import { signal } from '@angular/core';

 // Create writable signal
 const count = signal(0);
@@ -28,67 +28,65 @@ count.update((c) => c + 1);

 // With explicit type
 const user = signal<User | null>(null);
-user.set({ id: 1, name: "Alice" });
+user.set({ id: 1, name: 'Alice' });
 ```

 ### computed() - Derived State

 ```typescript
-import { signal, computed } from "@angular/core";
+import { signal, computed } from '@angular/core';

-const firstName = signal("John");
-const lastName = signal("Doe");
+const firstName = signal('John');
+const lastName = signal('Doe');

 // Derived signal - automatically updates when dependencies change
 const fullName = computed(() => `${firstName()} ${lastName()}`);

 console.log(fullName()); // "John Doe"
-firstName.set("Jane");
+firstName.set('Jane');
 console.log(fullName()); // "Jane Doe"

 // Computed with complex logic
 const items = signal<Item[]>([]);
-const filter = signal("");
+const filter = signal('');

 const filteredItems = computed(() => {
-  const query = filter().toLowerCase();
-  return items().filter((item) => item.name.toLowerCase().includes(query));
+    const query = filter().toLowerCase();
+    return items().filter((item) => item.name.toLowerCase().includes(query));
 });

-const totalPrice = computed(() =>
-  filteredItems().reduce((sum, item) => sum + item.price, 0),
-);
+const totalPrice = computed(() => filteredItems().reduce((sum, item) => sum + item.price, 0));
 ```

 ### linkedSignal() - Dependent State with Reset

 ```typescript
-import { signal, linkedSignal } from "@angular/core";
+import { signal, linkedSignal } from '@angular/core';

-const options = signal(["A", "B", "C"]);
+const options = signal(['A', 'B', 'C']);

 // Resets to first option when options change
 const selected = linkedSignal(() => options()[0]);

 console.log(selected()); // "A"
-selected.set("B"); // User selects B
+selected.set('B'); // User selects B
 console.log(selected()); // "B"
-options.set(["X", "Y"]); // Options change
+options.set(['X', 'Y']); // Options change
 console.log(selected()); // "X" - auto-reset to first

 // With previous value access
 const items = signal<Item[]>([]);

 const selectedItem = linkedSignal<Item[], Item | null>({
-  source: () => items(),
-  computation: (newItems, previous) => {
-    // Try to preserve selection if item still exists
-    const prevItem = previous?.value;
-    if (prevItem && newItems.some((i) => i.id === prevItem.id)) {
-      return prevItem;
-    }
-    return newItems[0] ?? null;
-  },
+    source: () => items(),
+    computation: (newItems, previous) => {
+        // Try to preserve selection if item still exists
+        const prevItem = previous?.value;
+        if (prevItem && newItems.some((i) => i.id === prevItem.id)) {
+            return prevItem;
+        }
+        return newItems[0] ?? null;
+    },
 });
 ```

@@ -128,66 +126,64 @@ export class Search {

 ```typescript
@Component({
-  selector: "app-todo-list",
-  template: `
-    <input
-      [value]="newTodo()"
-      (input)="newTodo.set($any($event.target).value)"
-    />
-    <button (click)="addTodo()" [disabled]="!canAdd()">Add</button>
+    selector: 'app-todo-list',
+    template: `
+        <input
+            [value]="newTodo()"
+            (input)="newTodo.set($any($event.target).value)" />
+        <button
+            [disabled]="!canAdd()"
+            (click)="addTodo()">
+            Add
+        </button>

-    <ul>
-      @for (todo of filteredTodos(); track todo.id) {
-        <li [class.done]="todo.done">
-          {{ todo.text }}
-          <button (click)="toggleTodo(todo.id)">Toggle</button>
-        </li>
-      }
-    </ul>
+        <ul>
+            @for (todo of filteredTodos(); track todo.id) {
+                <li [class.done]="todo.done">
+                    {{ todo.text }}
+                    <button (click)="toggleTodo(todo.id)">Toggle</button>
+                </li>
+            }
+        </ul>

-    <p>{{ remaining() }} remaining</p>
-  `,
+        <p>{{ remaining() }} remaining</p>
+    `,
 })
 export class TodoList {
-  // State
-  todos = signal<Todo[]>([]);
-  newTodo = signal("");
-  filter = signal<"all" | "active" | "done">("all");
+    // State
+    todos = signal<Todo[]>([]);
+    newTodo = signal('');
+    filter = signal<'all' | 'active' | 'done'>('all');

-  // Derived state
-  canAdd = computed(() => this.newTodo().trim().length > 0);
+    // Derived state
+    canAdd = computed(() => this.newTodo().trim().length > 0);

-  filteredTodos = computed(() => {
-    const todos = this.todos();
-    switch (this.filter()) {
-      case "active":
-        return todos.filter((t) => !t.done);
-      case "done":
-        return todos.filter((t) => t.done);
-      default:
-        return todos;
+    filteredTodos = computed(() => {
+        const todos = this.todos();
+        switch (this.filter()) {
+            case 'active':
+                return todos.filter((t) => !t.done);
+            case 'done':
+                return todos.filter((t) => t.done);
+            default:
+                return todos;
+        }
+    });
+
+    remaining = computed(() => this.todos().filter((t) => !t.done).length);
+
+    // Actions
+    addTodo() {
+        const text = this.newTodo().trim();
+        if (text) {
+            this.todos.update((todos) => [...todos, { id: crypto.randomUUID(), text, done: false }]);
+            this.newTodo.set('');
+        }
    }
-  });

-  remaining = computed(() => this.todos().filter((t) => !t.done).length);
-
-  // Actions
-  addTodo() {
-    const text = this.newTodo().trim();
-    if (text) {
-      this.todos.update((todos) => [
-        ...todos,
-        { id: crypto.randomUUID(), text, done: false },
-      ]);
-      this.newTodo.set("");
+    toggleTodo(id: string) {
+        this.todos.update((todos) => todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
    }
-  }
-
-  toggleTodo(id: string) {
-    this.todos.update((todos) =>
-      todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)),
-    );
-  }
 }
 ```

@@ -242,63 +238,58 @@ export class Search {

 ```typescript
 // Custom equality function
-const user = signal<User>(
-  { id: 1, name: "Alice" },
-  { equal: (a, b) => a.id === b.id },
-);
+const user = signal<User>({ id: 1, name: 'Alice' }, { equal: (a, b) => a.id === b.id });

 // Only triggers updates when ID changes
-user.set({ id: 1, name: "Alice Updated" }); // No update
-user.set({ id: 2, name: "Bob" }); // Triggers update
+user.set({ id: 1, name: 'Alice Updated' }); // No update
+user.set({ id: 2, name: 'Bob' }); // Triggers update
 ```

 ## Untracked Reads

 ```typescript
-import { untracked } from "@angular/core";
+import { untracked } from '@angular/core';

 const a = signal(1);
 const b = signal(2);

 // Only depends on 'a', not 'b'
 const result = computed(() => {
-  const aVal = a();
-  const bVal = untracked(() => b());
-  return aVal + bVal;
+    const aVal = a();
+    const bVal = untracked(() => b());
+    return aVal + bVal;
 });
 ```

 ## Service State Pattern

 ```typescript
-@Injectable({ providedIn: "root" })
+@Injectable({ providedIn: 'root' })
 export class Auth {
-  // Private writable state
-  private _user = signal<User | null>(null);
-  private _loading = signal(false);
+    // Private writable state
+    private _user = signal<User | null>(null);
+    private _loading = signal(false);

-  // Public read-only signals
-  readonly user = this._user.asReadonly();
-  readonly loading = this._loading.asReadonly();
-  readonly isAuthenticated = computed(() => this._user() !== null);
+    // Public read-only signals
+    readonly user = this._user.asReadonly();
+    readonly loading = this._loading.asReadonly();
+    readonly isAuthenticated = computed(() => this._user() !== null);

-  private http = inject(HttpClient);
+    private http = inject(HttpClient);

-  async login(credentials: Credentials): Promise<void> {
-    this._loading.set(true);
-    try {
-      const user = await firstValueFrom(
-        this.http.post<User>("/api/login", credentials),
-      );
-      this._user.set(user);
-    } finally {
-      this._loading.set(false);
+    async login(credentials: Credentials): Promise<void> {
+        this._loading.set(true);
+        try {
+            const user = await firstValueFrom(this.http.post<User>('/api/login', credentials));
+            this._user.set(user);
+        } finally {
+            this._loading.set(false);
+        }
    }
-  }

-  logout(): void {
-    this._user.set(null);
-  }
+    logout(): void {
+        this._user.set(null);
+    }
 }
 ```