fix(notes): audio overflow + volume 50%, grille 3col, bouton laptop, sidebar BDD

- Audio : minWidth:0 + onLoadedMetadata volume=0.5 (plus de débordement)
- Grille : repeat(3,1fr) sur laptop, 1fr sur mobile (était auto-fill)
- Header laptop : bouton "Nouvelle note" (fa-plus + accent) visible lg:flex
- SideNav : DbStatusBar en bas — LED verte/rouge + taille BDD, polling 30s
- docs/plan.md : Phase 4c documentée

v0.5.7

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/pages/NotesPage.tsx

@@ -205,8 +205,13 @@ function NoteCard({ note, onEdit, onDelete, onAddPhoto, onAddAudio, onAddVideo,
       {audios.length > 0 && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
           {audios.map(aud => (
-            <div key={aud.id} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'var(--bg-4)', borderRadius: 6, padding: '4px 8px' }}>
-              <audio src={`/media/${aud.file_path}`} controls style={{ height: 28, flex: 1 }} />
+            <div key={aud.id} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'var(--bg-4)', borderRadius: 6, padding: '4px 8px', minWidth: 0 }}>
+              <audio
+                src={`/media/${aud.file_path}`}
+                controls
+                style={{ height: 32, flex: 1, minWidth: 0, width: '100%' }}
+                onLoadedMetadata={e => { (e.target as HTMLAudioElement).volume = 0.5 }}
+              />
               <button onClick={() => onDeleteAtt(aud.id)} style={{ background: 'transparent', border: 'none', color: 'var(--err)', cursor: 'pointer', fontSize: 14, flexShrink: 0 }}>✕</button>
             </div>
           ))}
@@ -399,7 +404,7 @@ export default function NotesPage() {
   const hasActiveFilters = filters.has_photo || filters.has_audio || filters.has_video || filters.has_gps
 
   const noteGrid = (cols: string) => (
-    <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 10 }}>
+    <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 10, alignItems: 'start' }}>
       {notes.map(note => (
         <NoteCard
           key={note.id}
@@ -419,6 +424,14 @@ export default function NotesPage() {
     <div className="p-4">
       <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16 }}>
         <h1 style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', margin: 0, flex: 1, ...noSelect }}>Notes</h1>
+        {/* Bouton ajout visible sur laptop uniquement */}
+        <button
+          className="hidden lg:flex"
+          onClick={() => setShowForm(true)}
+          style={{ alignItems: 'center', gap: 8, padding: '8px 16px', borderRadius: 8, border: 'none', background: 'var(--accent)', color: '#1d2021', fontFamily: 'var(--font-ui)', fontSize: 13, fontWeight: 600, cursor: 'pointer', ...noSelect }}
+        >
+          <i className="fa-solid fa-plus" /> Nouvelle note
+        </button>
       </div>
 
       {/* Barre recherche + filtres */}
@@ -479,7 +492,7 @@ export default function NotesPage() {
         {noteGrid('1fr')}
       </div>
       <div className="hidden lg:block">
-        {noteGrid('repeat(auto-fill, minmax(320px, 1fr))')}
+        {noteGrid('repeat(3, 1fr)')}
       </div>
     </div>
   )