style(app): mobile-first layout polish

src/App.test.tsx

@@ -29,8 +29,11 @@ describe('App', () => {
 
     renderApp()
 
-    const items = screen.getAllByRole('button').filter((b) => b.textContent !== '+')
-    expect(items.map((button) => button.textContent)).toEqual(['Alpha', 'Zebre'])
+    const items = screen.getAllByRole('button', { name: /^Ouvrir la note/ })
+    expect(items.map((button) => button.getAttribute('aria-label'))).toEqual([
+      'Ouvrir la note Alpha',
+      'Ouvrir la note Zebre',
+    ])
   })
 
   it('creates a note with the + button and opens the editor in edit mode', () => {

src/App.tsx

@@ -28,15 +28,15 @@ function App() {
   }
 
   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">
+    <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 ? (
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1">
             <button
               type="button"
               onClick={() => setSelectedId(null)}
               aria-label="Retour"
-              className="w-10 h-10 rounded-full text-xl hover:bg-gray-100"
+              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"
             >
               ←
             </button>

src/components/DeleteModal.tsx

@@ -9,12 +9,12 @@ function DeleteModal({ open, title, onConfirm, onCancel }: DeleteModalProps) {
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 bg-black/40 flex items-center justify-center p-4 z-50">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
       <div
         role="dialog"
         aria-modal="true"
         aria-labelledby="delete-confirm-title"
-        className="w-full max-w-sm bg-white rounded-lg p-5 flex flex-col gap-4"
+        className="flex w-full max-w-sm flex-col gap-4 rounded-xl bg-white p-5 shadow-xl"
       >
         <h2 id="delete-confirm-title" className="text-lg font-semibold">
           Supprimer la note ?
@@ -24,14 +24,14 @@ function DeleteModal({ open, title, onConfirm, onCancel }: DeleteModalProps) {
           <button
             type="button"
             onClick={onCancel}
-            className="px-4 py-2 rounded border border-gray-300 text-gray-600"
+            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="button"
             onClick={onConfirm}
-            className="px-4 py-2 rounded bg-red-600 text-white"
+            className="rounded-lg bg-red-600 px-5 py-3 text-white hover:bg-red-700 active:bg-red-800"
           >
             Supprimer
           </button>

src/components/FloatingButton.tsx

@@ -9,7 +9,7 @@ function FloatingButton({ onClick, label = 'Créer une note' }: FloatingButtonPr
       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"
+      className="fixed bottom-6 right-6 z-20 flex h-14 w-14 items-center justify-center rounded-full bg-amber-400 text-3xl text-gray-800 shadow-lg transition-transform hover:bg-amber-500 active:scale-95 focus:outline-none focus:ring-2 focus:ring-amber-600 focus:ring-offset-2"
     >
       +
     </button>

src/components/NoteEditor.tsx

@@ -33,7 +33,7 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
   if (editing) {
     return (
       <form
-        className="flex flex-col gap-4"
+        className="flex flex-col gap-4 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
         onSubmit={(event) => {
           event.preventDefault()
           save()
@@ -44,7 +44,7 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
           <input
             value={title}
             onChange={(event) => setTitle(event.target.value)}
-            className="w-full border border-gray-300 rounded px-3 py-2"
+            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>
@@ -53,19 +53,22 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
           <textarea
             value={content}
             onChange={(event) => setContent(event.target.value)}
-            className="w-full border border-gray-300 rounded px-3 py-2 min-h-40"
+            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-between">
+        <div className="flex justify-end gap-3">
           <button
             type="button"
             onClick={cancel}
-            className="px-4 py-2 rounded border border-gray-300 text-gray-600"
+            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="px-4 py-2 rounded bg-blue-600 text-white">
+          <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>
@@ -74,26 +77,26 @@ function NoteEditor({ note, onUpdate, onDelete, autoEdit = false }: NoteEditorPr
   }
 
   return (
-    <article className="flex flex-col gap-4">
+    <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">
-        <h2 className="text-2xl font-semibold">{note.title || 'Sans titre'}</h2>
+        <h2 className="text-xl font-semibold leading-snug">{note.title || 'Sans titre'}</h2>
         <button
           type="button"
           onClick={() => setConfirmDelete(true)}
           aria-label="Supprimer la note"
-          className="px-2 py-1 rounded text-gray-600 hover:text-red-600"
+          className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-2xl leading-none text-gray-400 hover:bg-red-50 hover:text-red-600 active:bg-red-100"
         >
           ×
         </button>
       </div>
-      <p className="whitespace-pre-wrap">
+      <p className="whitespace-pre-wrap text-base leading-relaxed">
         {note.content || <span className="text-gray-400 italic">Note vide</span>}
       </p>
-      <div>
+      <div className="flex justify-end">
         <button
           type="button"
           onClick={startEditing}
-          className="px-4 py-2 rounded bg-blue-600 text-white"
+          className="rounded-lg bg-blue-600 px-5 py-3 text-white hover:bg-blue-700 active:bg-blue-800"
         >
           Éditer
         </button>

src/components/NoteList.tsx

@@ -9,19 +9,29 @@ 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 (
+      <div className="flex flex-col items-center justify-center gap-2 py-16 text-center">
+        <p className="text-gray-500">{EMPTY_MESSAGE}</p>
+      </div>
+    )
   }
 
   return (
-    <ul className="flex flex-col">
+    <ul className="flex flex-col divide-y divide-gray-100">
       {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"
+            aria-label={note.title ? `Ouvrir la note ${note.title}` : 'Ouvrir la note Sans titre'}
+            className="flex w-full items-center justify-between gap-3 px-2 py-4 text-left text-base hover:bg-gray-50 active:bg-gray-100"
           >
-            {note.title || <span className="italic text-gray-400">Sans titre</span>}
+            <span className={note.title ? 'text-gray-800' : 'italic text-gray-400'}>
+              {note.title || 'Sans titre'}
+            </span>
+            <span aria-hidden="true" className="text-gray-400">
+              ›
+            </span>
           </button>
         </li>
       ))}

src/style.css

@@ -1 +1,7 @@
 @import 'tailwindcss';
+
+@layer base {
+  button {
+    touch-action: manipulation;
+  }
+}