feat(notes): wire app with floating add button

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) {
-  const [editing, setEditing] = useState(false)
+function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorProps) {
+  const [editing, setEditing] = useState(autoEdit)
   const [confirmDelete, setConfirmDelete] = useState(false)
   const [title, setTitle] = useState(note.title)
   const [content, setContent] = useState(note.content)