style(app): mobile-first layout polish

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>
       ))}