first comit

src/app/features/todo/todo-list/todo-list.component.html

@@ -0,0 +1,18 @@
+<div class="todo-container">
+  @if (false) { <!-- remplacer par isLoading() lorsque le loading sera implémenté -->
+    <app-spinner />
+  } @else {
+    @if (todos().length > 0) {
+      <ul class="todo-list">
+        @for (todo of todos(); track todo.id) {
+          <li [class.completed]="todo.completed">
+            <span class="todo-title" (click)="toggleTodo(todo.id)">{{ todo.title }}</span>
+            <button class="btn-remove" (click)="deleteTodo(todo.id)">X</button>
+          </li>
+        }
+      </ul>
+    } @else {
+      <p class="empty-state">Bravo, aucune tâche pour le moment !</p>
+    }
+  }
+</div>

src/app/features/todo/todo-list/todo-list.component.scss

@@ -0,0 +1,158 @@
+.todo-container {
+  max-width: 600px;
+  margin: 2rem auto;
+  background: var(--surface-color);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  padding: 2rem;
+
+  h1 {
+    text-align: center;
+    color: var(--primary-color);
+    margin-bottom: 1.5rem;
+  }
+}
+
+.todo-input-group {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 2rem;
+
+  input[type='text'] {
+    flex-grow: 1;
+    padding: 0.75rem;
+    font-size: 1rem;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    transition: border-color 0.2s, box-shadow 0.2s;
+
+    &:focus {
+      outline: none;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 3px rgba(103, 58, 183, 0.2);
+    }
+  }
+
+  button {
+    padding: 0.75rem 1.5rem;
+    font-size: 1rem;
+    font-weight: bold;
+    color: var(--text-color-light);
+    background-color: var(--primary-color);
+    border: none;
+    border-radius: var(--border-radius);
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover:not(:disabled) {
+      background-color: var(--primary-color-dark);
+    }
+
+    &:disabled {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
+  }
+}
+
+.todo-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+  transition: background-color 0.2s;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.completed .todo-title {
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+
+.todo-title {
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.btn-remove {
+  background-color: transparent;
+  border: none;
+  color: var(--error-color);
+  font-weight: bold;
+  font-size: 1.2rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 50%;
+  line-height: 1;
+  width: 30px;
+  height: 30px;
+  transition: background-color 0.2s, color 0.2s;
+
+  &:hover {
+    background-color: rgba(244, 67, 54, 0.1);
+  }
+}
+
+footer {
+  margin-top: 1.5rem;
+  text-align: center;
+  color: #777;
+  font-size: 0.9rem;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 2rem;
+  color: #888;
+  font-style: italic;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border-color);
+
+  h1 {
+    margin: 0;
+  }
+}
+
+.btn {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-block;
+  text-align: center;
+  transition: background-color 0.2s, opacity 0.2s;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+}
+
+.btn-primary {
+  color: var(--text-color-light);
+  background-color: var(--primary-color);
+
+  &:hover:not(:disabled) {
+    background-color: var(--primary-color-dark);
+  }
+}

src/app/features/todo/todo-list/todo-list.component.ts

@@ -0,0 +1,27 @@
+import { ChangeDetectionStrategy, Component, inject, Signal } from '@angular/core';
+import { TodoApiService } from '../../../core/services/todo.service';
+import { Todo } from '../../../core/models/todo.model';
+import { SpinnerComponent } from '../../../shared/components/spinner/spinner.component';
+
+@Component({
+  selector: 'app-todo-list',
+  templateUrl: './todo-list.component.html',
+  styleUrls: ['./todo-list.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [SpinnerComponent],
+})
+export class TodoListComponent {
+  // TODO 2.1: Injecter le TodoApiService.
+  private readonly todoApiService = inject(TodoApiService); // À COMPLÉTER
+
+  // TODO 2.2: Connecter le signal `todos` du composant au signal public `todos$` du service.
+  readonly todos: Signal<Todo[]> = this.todoApiService.todos$; // À COMPLÉTER
+
+  toggleTodo(id: number): void {
+    // TODO 2.3: Appeler la méthode `toggleTodo` du service.
+  }
+
+  deleteTodo(id: number): void {
+    // TODO 2.3 (suite): Appeler la méthode `deleteTodo` du service.
+  }
+}