feat(notes): require a title to create a note

src/App.test.tsx

@@ -36,7 +36,7 @@ describe('App', () => {
     ])
   })
 
-  it('creates a note with the + button and opens the editor in edit mode', () => {
+  it('opens the editor when + is clicked without persisting any note', () => {
     vi.spyOn(Date, 'now').mockReturnValue(1234)
     renderApp()
 
@@ -45,12 +45,11 @@ describe('App', () => {
     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: '' },
-    ])
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([])
   })
 
-  it('saves a new note and displays it in read mode', () => {
+  it('creates a note only when saved with a title', () => {
+    vi.spyOn(Date, 'now').mockReturnValue(1234)
     renderApp()
 
     fireEvent.click(screen.getByRole('button', { name: 'Créer une note' }))
@@ -61,6 +60,40 @@ describe('App', () => {
     expect(screen.getByText('Courses')).toBeInTheDocument()
     expect(screen.getByText('Lait')).toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Éditer' })).toBeInTheDocument()
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([
+      { id: 1234, title: 'Courses', content: 'Lait' },
+    ])
+  })
+
+  it('does not create a note when saving with an empty title', () => {
+    renderApp()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Créer une note' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([])
+  })
+
+  it('discards the draft when creation is cancelled', () => {
+    renderApp()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Créer une note' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Brouillon' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
+
+    expect(screen.getByText(/aucune note/i)).toBeInTheDocument()
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([])
+  })
+
+  it('discards the draft when going back from the header', () => {
+    renderApp()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Créer une note' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Retour' }))
+
+    expect(screen.getByText(/aucune note/i)).toBeInTheDocument()
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([])
   })
 
   it('opens a note from the list and navigates back', () => {
@@ -81,6 +114,21 @@ describe('App', () => {
     expect(screen.getByRole('button', { name: 'Créer une note' })).toBeInTheDocument()
   })
 
+  it('blocks saving an existing note with an empty title', () => {
+    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: '   ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+    expect(JSON.parse(localStorage.getItem('notes')!)).toEqual([
+      { id: 1, title: 'Avant', content: 'x' },
+    ])
+  })
+
   it('deletes a note from the editor with confirmation', () => {
     localStorage.setItem('notes', JSON.stringify([{ id: 1, title: 'À supprimer', content: 'x' }]))
     renderApp()

src/App.tsx

@@ -7,19 +7,18 @@ import FloatingButton from './components/FloatingButton'
 function App() {
   const { notes, addNote, updateNote, deleteNote } = useNotes()
   const [selectedId, setSelectedId] = useState<number | null>(null)
-  const [createdId, setCreatedId] = useState<number | null>(null)
+  const [creating, setCreating] = useState(false)
 
-  const selectedNote = notes.find((note) => note.id === selectedId) ?? null
+  const selectedNote =
+    selectedId === null ? null : (notes.find((note) => note.id === selectedId) ?? null)
 
-  const createNote = () => {
-    const note = addNote()
+  const createNote = () => setCreating(true)
+  const cancelCreate = () => setCreating(false)
+
+  const handleCreate = (title: string, content: string) => {
+    const note = addNote(title, content)
+    setCreating(false)
     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) => {
@@ -27,14 +26,19 @@ function App() {
     setSelectedId(null)
   }
 
+  const goBack = () => {
+    if (creating) cancelCreate()
+    else setSelectedId(null)
+  }
+
   return (
     <main className="mx-auto w-full max-w-2xl flex flex-col min-h-dvh pb-28">
       <header className="sticky top-0 z-10 bg-white/95 backdrop-blur border-b border-gray-200 px-4 py-3">
-        {selectedNote ? (
+        {creating || selectedNote ? (
           <div className="flex items-center gap-1">
             <button
               type="button"
-              onClick={() => setSelectedId(null)}
+              onClick={goBack}
               aria-label="Retour"
               className="flex items-center justify-center w-11 h-11 -ml-2 rounded-full text-xl text-gray-700 hover:bg-gray-100 active:bg-gray-200"
             >
@@ -48,12 +52,20 @@ function App() {
       </header>
 
       <section className="flex-1 px-4 py-4">
-        {selectedNote ? (
+        {creating ? (
           <NoteEditor
+            key="create"
+            mode="create"
+            onCreate={handleCreate}
+            onCancelCreate={cancelCreate}
+          />
+        ) : selectedNote ? (
+          <NoteEditor
+            key={selectedNote.id}
+            mode="edit"
             note={selectedNote}
-            onUpdate={handleUpdate}
+            onUpdate={updateNote}
             onDelete={handleDelete}
-            autoEdit={selectedId === createdId}
           />
         ) : (
           <NoteList notes={notes} onSelect={setSelectedId} />

src/components/NoteEditor.test.tsx

@@ -5,16 +5,30 @@ import type { Note } from '../types'
 
 const note: Note = { id: 42, title: 'Courses', content: 'Lait\nOeufs' }
 
-const renderEditor = (overrides: Partial<Note> = {}) => {
+const renderEdit = (overrides: Partial<Note> = {}) => {
   const onUpdate = vi.fn()
   const onDelete = vi.fn()
-  render(<NoteEditor note={{ ...note, ...overrides }} onUpdate={onUpdate} onDelete={onDelete} />)
+  render(
+    <NoteEditor
+      mode="edit"
+      note={{ ...note, ...overrides }}
+      onUpdate={onUpdate}
+      onDelete={onDelete}
+    />,
+  )
   return { onUpdate, onDelete }
 }
 
-describe('NoteEditor', () => {
+const renderCreate = () => {
+  const onCreate = vi.fn()
+  const onCancelCreate = vi.fn()
+  render(<NoteEditor mode="create" onCreate={onCreate} onCancelCreate={onCancelCreate} />)
+  return { onCreate, onCancelCreate }
+}
+
+describe('NoteEditor in edit mode', () => {
   it('displays the note title and content in read mode', () => {
-    renderEditor()
+    renderEdit()
 
     expect(screen.getByText('Courses')).toBeInTheDocument()
     expect(screen.getByText('Lait Oeufs')).toBeInTheDocument()
@@ -22,14 +36,14 @@ describe('NoteEditor', () => {
   })
 
   it('shows placeholders for a note without title or content', () => {
-    renderEditor({ title: '', content: '' })
+    renderEdit({ title: '', content: '' })
 
     expect(screen.getByText('Sans titre')).toBeInTheDocument()
     expect(screen.getByText('Note vide')).toBeInTheDocument()
   })
 
   it('switches to edit mode with prefilled fields', () => {
-    renderEditor()
+    renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
 
@@ -40,7 +54,7 @@ describe('NoteEditor', () => {
   })
 
   it('saves edits and calls onUpdate with the updated values', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Liste de courses' } })
@@ -52,7 +66,7 @@ describe('NoteEditor', () => {
   })
 
   it('saves when the form is submitted', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     const form = screen.getByLabelText('Titre').closest('form')!
@@ -61,8 +75,43 @@ describe('NoteEditor', () => {
     expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Courses', content: 'Lait\nOeufs' })
   })
 
+  it('trims the title on save', () => {
+    const { onUpdate } = renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '  Courses  ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onUpdate).toHaveBeenCalledWith(42, { title: 'Courses', content: 'Lait\nOeufs' })
+  })
+
+  it('refuses saving when the title is empty', () => {
+    const { onUpdate } = renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onUpdate).not.toHaveBeenCalled()
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+    expect(screen.getByLabelText('Titre')).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('clears the title error once a title is typed', () => {
+    renderEdit()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Rempli' } })
+
+    expect(screen.queryByText('Le titre est obligatoire.')).not.toBeInTheDocument()
+  })
+
   it('cancels editing without calling onUpdate', () => {
-    const { onUpdate } = renderEditor()
+    const { onUpdate } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Éditer' }))
     fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Non sauvegardé' } })
@@ -73,7 +122,7 @@ describe('NoteEditor', () => {
   })
 
   it('opens the delete confirmation when the × button is clicked', () => {
-    renderEditor()
+    renderEdit()
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
@@ -82,7 +131,7 @@ describe('NoteEditor', () => {
   })
 
   it('deletes the note after confirmation', () => {
-    const { onDelete } = renderEditor()
+    const { onDelete } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer' }))
@@ -92,7 +141,7 @@ describe('NoteEditor', () => {
   })
 
   it('does not delete when the confirmation is cancelled', () => {
-    const { onDelete } = renderEditor()
+    const { onDelete } = renderEdit()
 
     fireEvent.click(screen.getByRole('button', { name: 'Supprimer la note' }))
     fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
@@ -101,3 +150,52 @@ describe('NoteEditor', () => {
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
   })
 })
+
+describe('NoteEditor in create mode', () => {
+  it('renders an empty form without read view or delete button', () => {
+    renderCreate()
+
+    expect(screen.getByLabelText('Titre')).toHaveValue('')
+    expect(screen.getByLabelText('Contenu')).toHaveValue('')
+    expect(screen.getByRole('button', { name: 'Enregistrer' })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Éditer' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Supprimer la note' })).not.toBeInTheDocument()
+  })
+
+  it('creates the note with title and content on save', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: 'Courses' } })
+    fireEvent.change(screen.getByLabelText('Contenu'), { target: { value: 'Lait' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).toHaveBeenCalledWith('Courses', 'Lait')
+  })
+
+  it('trims the title on create', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.change(screen.getByLabelText('Titre'), { target: { value: '  Courses  ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).toHaveBeenCalledWith('Courses', '')
+  })
+
+  it('refuses creation when the title is empty', () => {
+    const { onCreate } = renderCreate()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Enregistrer' }))
+
+    expect(onCreate).not.toHaveBeenCalled()
+    expect(screen.getByText('Le titre est obligatoire.')).toBeInTheDocument()
+  })
+
+  it('cancels creation without creating the note', () => {
+    const { onCreate, onCancelCreate } = renderCreate()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Annuler' }))
+
+    expect(onCreate).not.toHaveBeenCalled()
+    expect(onCancelCreate).toHaveBeenCalled()
+  })
+})

src/components/NoteEditor.tsx

@@ -2,80 +2,142 @@ import { useState } from 'react'
 import type { Note } from '../types'
 import DeleteModal from './DeleteModal'
 
-interface NoteEditorProps {
+interface EditEditorProps {
+  mode: 'edit'
   note: Note
   onUpdate: (id: number, patch: Partial<Pick<Note, 'title' | 'content'>>) => void
   onDelete: (id: number) => void
-  autoEdit?: boolean
 }
 
-function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorProps) {
-  const [editing, setEditing] = useState(autoEdit)
+interface CreateEditorProps {
+  mode: 'create'
+  onCreate: (title: string, content: string) => void
+  onCancelCreate: () => void
+}
+
+type NoteEditorProps = EditEditorProps | CreateEditorProps
+
+interface NoteFormProps {
+  title: string
+  content: string
+  titleMissing: boolean
+  cancelLabel: string
+  onTitleChange: (value: string) => void
+  onContentChange: (value: string) => void
+  onCancel: () => void
+  onSubmit: () => void
+}
+
+const TITLE_REQUIRED_MESSAGE = 'Le titre est obligatoire.'
+
+function NoteForm({
+  title,
+  content,
+  titleMissing,
+  cancelLabel,
+  onTitleChange,
+  onContentChange,
+  onCancel,
+  onSubmit,
+}: NoteFormProps) {
+  return (
+    <form
+      className="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
+      onSubmit={(event) => {
+        event.preventDefault()
+        onSubmit()
+      }}
+    >
+      <label className="flex flex-col gap-1">
+        <span className="text-sm font-medium text-gray-500">Titre</span>
+        <input
+          value={title}
+          onChange={(event) => onTitleChange(event.target.value)}
+          autoFocus
+          aria-invalid={titleMissing}
+          className={`w-full rounded-lg border px-3 py-3 text-base focus:outline-none focus:ring-2 ${
+            titleMissing
+              ? 'border-red-500 focus:ring-red-500/30'
+              : 'border-gray-300 focus:border-blue-500 focus:ring-blue-500/30'
+          }`}
+          placeholder="Sans titre"
+        />
+      </label>
+      {titleMissing && (
+        <span role="alert" className="text-sm text-red-600">
+          {TITLE_REQUIRED_MESSAGE}
+        </span>
+      )}
+      <label className="flex flex-col gap-1">
+        <span className="text-sm font-medium text-gray-500">Contenu</span>
+        <textarea
+          value={content}
+          onChange={(event) => onContentChange(event.target.value)}
+          className="w-full min-h-48 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
+          placeholder="Écrire ici…"
+        />
+      </label>
+      <div className="flex justify-end gap-3">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-lg border border-gray-300 px-5 py-3 text-gray-600 hover:bg-gray-50 active:bg-gray-100"
+        >
+          {cancelLabel}
+        </button>
+        <button
+          type="submit"
+          className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
+        >
+          Enregistrer
+        </button>
+      </div>
+    </form>
+  )
+}
+
+function NoteEditor(props: NoteEditorProps) {
+  const [editing, setEditing] = useState(props.mode === 'create')
+  const [title, setTitle] = useState(props.mode === 'edit' ? props.note.title : '')
+  const [content, setContent] = useState(props.mode === 'edit' ? props.note.content : '')
+  const [titleMissing, setTitleMissing] = useState(false)
   const [confirmDelete, setConfirmDelete] = useState(false)
-  const [title, setTitle] = useState(note.title)
-  const [content, setContent] = useState(note.content)
 
-  const startEditing = () => {
-    setTitle(note.title)
-    setContent(note.content)
-    setEditing(true)
+  const handleTitleChange = (value: string) => {
+    setTitle(value)
+    if (titleMissing && value.trim() !== '') setTitleMissing(false)
   }
 
-  const cancel = () => {
-    setEditing(false)
+  const handleSubmit = () => {
+    if (title.trim() === '') {
+      setTitleMissing(true)
+      return
+    }
+    const safeTitle = title.trim()
+    if (props.mode === 'create') {
+      props.onCreate(safeTitle, content)
+    } else {
+      props.onUpdate(props.note.id, { title: safeTitle, content })
+      setEditing(false)
+    }
   }
 
-  const save = () => {
-    onUpdate(note.id, { title, content })
-    setEditing(false)
-  }
-
-  if (editing) {
+  if (props.mode === 'create' || editing) {
     return (
-      <form
-        className="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
-        onSubmit={(event) => {
-          event.preventDefault()
-          save()
-        }}
-      >
-        <label className="flex flex-col gap-1">
-          <span className="text-sm font-medium text-gray-500">Titre</span>
-          <input
-            value={title}
-            onChange={(event) => setTitle(event.target.value)}
-            className="w-full rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
-            placeholder="Sans titre"
-          />
-        </label>
-        <label className="flex flex-col gap-1">
-          <span className="text-sm font-medium text-gray-500">Contenu</span>
-          <textarea
-            value={content}
-            onChange={(event) => setContent(event.target.value)}
-            className="w-full min-h-48 rounded-lg border border-gray-300 px-3 py-3 text-base focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/30"
-            placeholder="Écrire ici…"
-          />
-        </label>
-        <div className="flex justify-end gap-3">
-          <button
-            type="button"
-            onClick={cancel}
-            className="rounded-lg border border-gray-300 px-5 py-3 text-gray-600 hover:bg-gray-50 active:bg-gray-100"
-          >
-            Annuler
-          </button>
-          <button
-            type="submit"
-            className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
-          >
-            Enregistrer
-          </button>
-        </div>
-      </form>
+      <NoteForm
+        title={title}
+        content={content}
+        titleMissing={titleMissing}
+        cancelLabel="Annuler"
+        onTitleChange={handleTitleChange}
+        onContentChange={setContent}
+        onCancel={props.mode === 'create' ? props.onCancelCreate : () => setEditing(false)}
+        onSubmit={handleSubmit}
+      />
     )
   }
 
+  const { note } = props
   return (
     <article className="flex flex-col gap-5 rounded-xl border border-gray-200 bg-white p-4 shadow-sm">
       <div className="flex items-start justify-between gap-4">
@@ -95,7 +157,11 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
       <div className="flex justify-end">
         <button
           type="button"
-          onClick={startEditing}
+          onClick={() => {
+            setTitle(props.note.title)
+            setContent(props.note.content)
+            setEditing(true)
+          }}
           className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
         >
           Éditer
@@ -106,7 +172,7 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
         title={note.title}
         onConfirm={() => {
           setConfirmDelete(false)
-          onDelete(note.id)
+          props.onDelete(note.id)
         }}
         onCancel={() => setConfirmDelete(false)}
       />

src/hooks/useNotes.test.ts

@@ -27,17 +27,17 @@ describe('useNotes', () => {
     ])
   })
 
-  it('adds a note and persists it', () => {
+  it('adds a note with given values and persists it', () => {
     vi.spyOn(Date, 'now').mockReturnValue(1234)
 
     const { result } = renderHook(() => useNotes())
 
     act(() => {
-      result.current.addNote()
+      result.current.addNote('Courses', 'Lait')
     })
 
-    expect(result.current.notes).toEqual([{ id: 1234, title: '', content: '' }])
-    expect(loadNotes()).toEqual([{ id: 1234, title: '', content: '' }])
+    expect(result.current.notes).toEqual([{ id: 1234, title: 'Courses', content: 'Lait' }])
+    expect(loadNotes()).toEqual([{ id: 1234, title: 'Courses', content: 'Lait' }])
   })
 
   it('updates a note by id and persists it', () => {

src/hooks/useNotes.ts

@@ -9,8 +9,8 @@ export function useNotes() {
     saveNotes(notes)
   }, [notes])
 
-  const addNote = useCallback(() => {
-    const note: Note = { id: Date.now(), title: '', content: '' }
+  const addNote = useCallback((title = '', content = '') => {
+    const note: Note = { id: Date.now(), title, content }
     setNotes((current) => [...current, note])
     return note
   }, [])