feat(notes): add note list

src/components/NoteList.test.tsx

@@ -0,0 +1,41 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import NoteList from './NoteList'
+import type { Note } from '../types'
+
+const notes: Note[] = [
+  { id: 3, title: 'Courses', content: 'Lait' },
+  { id: 1, title: 'Pense-bête', content: '' },
+  { id: 2, title: '', content: 'vide sans titre' },
+]
+
+describe('NoteList', () => {
+  it('renders the title of each note', () => {
+    render(<NoteList notes={notes} onSelect={vi.fn()} />)
+
+    expect(screen.getByText('Courses')).toBeInTheDocument()
+    expect(screen.getByText('Pense-bête')).toBeInTheDocument()
+  })
+
+  it('shows a placeholder for notes without a title', () => {
+    render(<NoteList notes={notes} onSelect={vi.fn()} />)
+
+    expect(screen.getByText('Sans titre')).toBeInTheDocument()
+  })
+
+  it('calls onSelect with the note id when clicked', () => {
+    const onSelect = vi.fn()
+
+    render(<NoteList notes={notes} onSelect={onSelect} />)
+
+    fireEvent.click(screen.getByText('Courses'))
+
+    expect(onSelect).toHaveBeenCalledWith(3)
+  })
+
+  it('renders an empty state message when there are no notes', () => {
+    render(<NoteList notes={[]} onSelect={vi.fn()} />)
+
+    expect(screen.getByText(/aucune note/i)).toBeInTheDocument()
+  })
+})

src/components/NoteList.tsx

@@ -0,0 +1,32 @@
+import type { Note } from '../types'
+
+interface NoteListProps {
+  notes: Note[]
+  onSelect: (id: number) => void
+}
+
+const EMPTY_MESSAGE = 'Aucune note pour le moment. Touchez + pour en créer une.'
+
+function NoteList({ notes, onSelect }: NoteListProps) {
+  if (notes.length === 0) {
+    return <p className="text-center text-gray-500">{EMPTY_MESSAGE}</p>
+  }
+
+  return (
+    <ul className="flex flex-col">
+      {notes.map((note) => (
+        <li key={note.id}>
+          <button
+            type="button"
+            onClick={() => onSelect(note.id)}
+            className="w-full px-4 py-4 text-left hover:bg-gray-100"
+          >
+            {note.title || <span className="italic text-gray-400">Sans titre</span>}
+          </button>
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default NoteList