feat(notes): wire app with floating add button

src/App.test.tsx

@@ -1,9 +1,106 @@
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import App from './App'
 
+const renderApp = () => render(<App />)
+
 describe('App', () => {
-  it('renders without crashing', () => {
+  beforeEach(() => {
-    render(<App />)
+    localStorage.clear()
-    expect(screen.getByRole('main')).toBeInTheDocument()
+    vi.restoreAllMocks()
+  })
+
+  it('renders the empty state and the floating button', () => {
+    renderApp()
+
+    expect(screen.getByRole('heading', { name: 'Notes' })).toBeInTheDocument()
+    expect(screen.getByText(/aucune note/i)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Créer une note' })).toBeInTheDocument()
+  })
+
+  it('lists note titles from storage in alphabetical order', () => {
+    localStorage.setItem(
+      'notes',
+      JSON.stringify([
+        { id: 1, title: 'Zebre', content: 'x' },
+        { id: 2, title: 'Alpha', content: 'y' },
+      ]),
+    )
+
+    renderApp()
+
+    const items = screen.getAllByRole('button').filter((b) => b.textContent !== '+')
+    expect(items.map((button) => button.textContent)).toEqual(['Alpha', 'Zebre'])
+  })
+
+  it('creates a note with the + button and opens the editor in edit mode', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(1234)
+    renderApp()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Créer une note' }))
+
+    expect(screen.getByLabelText('Titre')).toHaveValue('')
+    expect(screen.getByLabelText('Contenu')).toHaveValue('')
+    expect(screen.getByRole('button', { name: 'Enregistrer' })).toBeInTheDocument()
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([
+      { id: 1234, title: '', content: '' },
+    ])
+  })
+
+  it('saves a new note and displays it in read mode', () => {
+    renderApp()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Créer une note' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Courses' } })
+    fireEvent.change(screen.getByLabelText('Contenu'), { target: { value: 'Lait' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(screen.getByText('Courses')).toBeInTheDocument()
+    expect(screen.getByText('Lait')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Éditer' })).toBeInTheDocument()
+  })
+
+  it('opens a note from the list and navigates back', () => {
+    localStorage.setItem(
+      'notes',
+      JSON.stringify([{ id: 1, title: 'Rendez-vous', content: 'Jeudi 10h' }]),
+    )
+    renderApp()
+
+    fireEvent.click(screen.getByText('Rendez-vous'))
+
+    expect(screen.getByText('Jeudi 10h')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Éditer' })).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Retour' }))
+
+    expect(screen.getByText('Rendez-vous')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Créer une note' })).toBeInTheDocument()
+  })
+
+  it('deletes a note from the editor with confirmation', () => {
+    localStorage.setItem('notes', JSON.stringify([{ id: 1, title: 'À supprimer', content: 'x' }]))
+    renderApp()
+
+    fireEvent.click(screen.getByText('À supprimer'))
+    fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Supprimer' }))
+
+    expect(screen.getByText(/aucune note/i)).toBeInTheDocument()
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([])
+  })
+
+  it('persists an edited note to storage', () => {
+    localStorage.setItem('notes', JSON.stringify([{ id: 1, title: 'Avant', content: 'x' }]))
+    renderApp()
+
+    fireEvent.click(screen.getByText('Avant'))
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Après' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([
+      { id: 1, title: 'Après', content: 'x' },
+    ])
   })
 })

src/App.tsx

@@ -1,5 +1,68 @@
+import { useState } from 'react'
+import { useNotes } from './hooks/useNotes'
+import NoteList from './components/NoteList'
+import NoteEditor from './components/NoteEditor'
+import FloatingButton from './components/FloatingButton'
+
 function App() {
-  return <main></main>
+  const { notes, addNote, updateNote, deleteNote } = useNotes()
+  const [selectedId, setSelectedId] = useState<number | null>(null)
+  const [createdId, setCreatedId] = useState<number | null>(null)
+
+  const selectedNote = notes.find((note) => note.id === selectedId) ?? null
+
+  const createNote = () => {
+    const note = addNote()
+    setSelectedId(note.id)
+    setCreatedId(note.id)
+  }
+
+  const handleUpdate = (id: number, patch: Parameters<typeof updateNote>[1]) => {
+    updateNote(id, patch)
+    if (id === createdId) setCreatedId(null)
+  }
+
+  const handleDelete = (id: number) => {
+    deleteNote(id)
+    setSelectedId(null)
+  }
+
+  return (
+    <main className="mx-auto w-full max-w-2xl flex flex-col min-h-screen">
+      <header className="sticky top-0 bg-white border-b border-gray-200 px-4 py-3">
+        {selectedNote ? (
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => setSelectedId(null)}
+              aria-label="Retour"
+              className="w-10 h-10 rounded-full text-xl hover:bg-gray-100"
+            >
+              ←
+            </button>
+            <h1 className="text-lg font-semibold">Notes</h1>
+          </div>
+        ) : (
+          <h1 className="text-lg font-semibold">Notes</h1>
+        )}
+      </header>
+
+      <section className="flex-1 px-4 py-4">
+        {selectedNote ? (
+          <NoteEditor
+            note={selectedNote}
+            onUpdate={handleUpdate}
+            onDelete={handleDelete}
+            autoEdit={selectedId === createdId}
+          />
+        ) : (
+          <NoteList notes={notes} onSelect={setSelectedId} />
+        )}
+      </section>
+
+      <FloatingButton onClick={createNote} />
+    </main>
+  )
 }
 
 export default App

src/components/FloatingButton.test.tsx

@@ -0,0 +1,26 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import FloatingButton from './FloatingButton'
+
+describe('FloatingButton', () => {
+  it('renders a + button', () => {
+    render(<FloatingButton onClick={vi.fn()} />)
+
+    expect(screen.getByRole('button', { name: 'Créer une note' })).toHaveTextContent('+')
+  })
+
+  it('calls onClick when clicked', () => {
+    const onClick = vi.fn()
+    render(<FloatingButton onClick={onClick} />)
+
+    fireEvent.click(screen.getByRole('button', { name: 'Créer une note' }))
+
+    expect(onClick).toHaveBeenCalled()
+  })
+
+  it('uses a custom label when provided', () => {
+    render(<FloatingButton onClick={vi.fn()} label="Ajouter" />)
+
+    expect(screen.getByRole('button', { name: 'Ajouter' })).toBeInTheDocument()
+  })
+})

src/components/FloatingButton.tsx

@@ -0,0 +1,19 @@
+interface FloatingButtonProps {
+  onClick: () => void
+  label?: string
+}
+
+function FloatingButton({ onClick, label = 'Créer une note' }: FloatingButtonProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-label={label}
+      className="fixed bottom-6 right-6 w-14 h-14 rounded-full bg-amber-400 text-3xl text-gray-800 shadow-lg active:scale-95"
+    >
+      +
+    </button>
+  )
+}
+
+export default FloatingButton

src/components/NoteEditor.tsx

@@ -6,10 +6,11 @@ interface NoteEditorProps {
   note: Note
   onUpdate: (id: number, patch: Partial<Pick<Note, 'title' | 'content'>>) => void
   onDelete: (id: number) => void
+  autoEdit?: boolean
 }
 
-function NoteEditor({ note, onUpdate, onDelete }: NoteEditorProps) {
+function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorProps) {
-  const [editing, setEditing] = useState(false)
+  const [editing, setEditing] = useState(autoEdit)
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [title, setTitle] = useState(note.title)
   const [content, setContent] = useState(note.content)