(feat): list todos

todo-workspace/frontend/src/app/app.component.html

-<h1 class="text-3xl font-bold underline">Hello world!</h1>
+<app-todo-list />
\ No newline at end of file

todo-workspace/frontend/src/app/app.component.ts

 import { Component } from '@angular/core';
+import {TodoListComponent} from "@features/todo-list/todo-list.component";
 
 @Component({
   selector: 'app-root',
-  imports: [],
+  imports: [
+    TodoListComponent
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })

todo-workspace/frontend/src/app/app.config.ts

-import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
-import {provideRouter} from '@angular/router';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideRouter } from '@angular/router';
 
-import {routes} from './app.routes';
-import {provideHttpClient} from "@angular/common/http";
+import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+import { TodoService } from '@core/ports/todo.service';
+import { InMemoryTodoService } from '@core/adapters/in-memory-todo.service';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideHttpClient()],
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideHttpClient(),
+    {
+      provide: TodoService,
+      useFactory: () =>
+        new InMemoryTodoService().withTodos([
+          { id: 1, title: 'Apprendre Angular 19', completed: false },
+          { id: 1, title: 'Apprendre Java Spring Boot', completed: false },
+          { id: 1, title: 'Apprendre PostgreSQL', completed: false },
+        ]),
+    },
+  ],
 };

todo-workspace/frontend/src/app/core/adapters/in-memory-todo.service.ts

+import { of } from 'rxjs';
+import { TodoService } from '@core/ports/todo.service';
+import { Todos } from '@core/models/todo';
+
+export class InMemoryTodoService extends TodoService {
+  private todos: Todos = [];
+
+  withTodos(todos: Todos): this {
+    this.todos = todos;
+    return this;
+  }
+
+  getAll() {
+    return of(this.todos);
+  }
+}

todo-workspace/frontend/src/app/core/models/todo.ts

+export interface Todo {
+  id: number;
+  title: string;
+  completed: boolean;
+}
+
+export type Todos = Todo[];

todo-workspace/frontend/src/app/core/ports/todo.service.ts

+import { Observable } from 'rxjs';
+import { Todos } from '@core/models/todo';
+
+export abstract class TodoService {
+  abstract getAll(): Observable<Todos>;
+}

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

+<div class="flex items-center justify-center min-h-screen bg-gray-100">
+  <div class="w-full max-w-md bg-white p-6 rounded-lg shadow-lg">
+    <h1 class="text-center text-3xl font-bold mb-4">Check-list</h1>
+    <!-- Input et bouton -->
+    <div class="flex space-x-2">
+      <input class="input input-bordered w-full" placeholder="Ex : Tourner une vidéo sur Angular" type="text" />
+      <button class="btn btn-neutral">Ajouter</button>
+    </div>
+
+    <!-- Texte centré -->
+    <div class="flex-grow flex items-center justify-center py-5">
+      @if (todos()?.length == 0) {
+        <p class="text-gray-600 text-lg">Ajoute ta première tâche 👆</p>
+      } @else {
+        <ul class="list bg-base-100 rounded-box shadow-md">
+          <li class="list-row">
+            <div class="text-4xl font-thin opacity-30 tabular-nums">01</div>
+            <div class="list-col-grow">
+              <div>Dio Lupa</div>
+              <div class="text-xs uppercase font-semibold opacity-60">Remaining Reason</div>
+            </div>
+            <button class="btn btn-square btn-ghost">
+              <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                <g stroke-linejoin="round" stroke-linecap="round" stroke-width="2" fill="none" stroke="currentColor">
+                  <path d="M6 3L20 12 6 21 6 3z"></path>
+                </g>
+              </svg>
+            </button>
+          </li>
+        </ul>
+      }
+    </div>
+  </div>
+</div>

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

+import { Component, inject } from '@angular/core';
+import { TodoService } from '@core/ports/todo.service';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'app-todo-list',
+  imports: [],
+  templateUrl: './todo-list.component.html',
+  styleUrl: './todo-list.component.scss',
+})
+export class TodoListComponent {
+  private readonly todoService = inject(TodoService);
+  todos = toSignal(this.todoService.getAll());
+}