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>

docs/plan.md

@@ -150,6 +150,38 @@
 
 ---
 
+## Phase 4c — Notes v2 : états de tuile + médias ✅
+
+**Objectif** : refonte de l'interface Notes avec tuiles à 3 états, support vidéo, transcodage audio universel.
+
+### Backend
+- [x] `ffmpeg` dans le Dockerfile backend — transcodage audio et vidéo
+- [x] `save_audio()` : transcode toute entrée (webm/ogg/m4a) → AAC `.m4a` — lecture Safari iOS garantie
+- [x] `save_video()` : stockage mp4/quicktime direct, webm → H.264/mp4 via ffmpeg
+- [x] `ALLOWED_VIDEO_TYPES` : mp4, webm, quicktime, m4v, 3gpp
+- [x] `GET /api/notes` : filtre `has_video` ajouté
+- [x] `POST /api/notes/{id}/attachments` : gère `file_type = "video"`
+- [x] `GET /api/admin/stats` : section `media.video` (count + size_bytes)
+- [x] Schémas Pydantic notes : `gps_lat/gps_lon` passés en `float | None` (fix `Decimal` sérialisé en string → TypeError JS)
+
+### Frontend
+- [x] NoteCard à 3 états : **semi** (défaut, 3 lignes + actions) / **expanded** (markdown complet + médias) / **collapsed** (titre + date)
+- [x] Bouton toggle `fa-chevron-down / fa-minus / fa-chevron-right` dans le coin haut-droit de chaque tuile
+- [x] Renderer pseudo-markdown : `# ## ###`, `- * 1.` listes, `> citations`, `---`, `` **gras** *italique* `code` ``, ` ``` ` blocs
+- [x] Icônes méta sur la tuile : `fa-image` / `fa-microphone` / `fa-video` / `fa-location-dot`
+- [x] Bouton vidéo `fa-video` dans les actions de chaque note
+- [x] Lecteur `<video playsInline>` inline dans l'état expanded
+- [x] Audio : `onLoadedMetadata` règle le volume à 50% + fix overflow (`minWidth: 0`)
+- [x] Filtres rapides : Photo / Audio / Vidéo / GPS (avec icônes Font Awesome)
+- [x] Grille : 3 colonnes max sur laptop (`repeat(3, 1fr)`), 1 colonne sur mobile
+- [x] Bouton "Nouvelle note" dans le header, visible sur laptop uniquement
+- [x] Sidebar laptop : indicateur de statut BDD (LED verte/rouge + taille) avec polling 30s sur `/api/health`
+- [x] ConfigPage : grille médias 3 colonnes (Photos / Audio / Vidéos)
+- [x] `client_max_body_size nginx` : 15m → 200m pour les vidéos
+- [x] `docker-compose.yml` : `user: "1000:1000"` sur backend et backend-worker
+
+---
+
 ## Phase 4b — UX transversale ✅
 
 **Objectif** : améliorations d'expérience applicables à tous les modules.

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "homehub-frontend",
   "private": true,
-  "version": "0.5.6",
+  "version": "0.5.7",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/layout/SideNav.tsx

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react'
 import { NavLink } from 'react-router-dom'
 
 const NAV_ITEMS = [
@@ -7,6 +8,71 @@ const NAV_ITEMS = [
   { to: '/notes',    icon: 'note-sticky',    label: 'Notes' },
 ]
 
+type DbStatus = 'ok' | 'error' | 'checking'
+
+function DbStatusBar() {
+  const [status, setStatus] = useState<DbStatus>('checking')
+  const [dbSize, setDbSize] = useState<string | null>(null)
+
+  async function check() {
+    try {
+      const res = await fetch('/api/health', { signal: AbortSignal.timeout(3000) })
+      if (!res.ok) { setStatus('error'); return }
+      setStatus('ok')
+      // Récupère la taille BDD en parallèle (silencieux si KO)
+      fetch('/api/admin/stats')
+        .then(r => r.ok ? r.json() : null)
+        .then((d: { db_size_bytes?: number } | null) => {
+          if (d?.db_size_bytes) {
+            const bytes = d.db_size_bytes
+            setDbSize(bytes < 1024 * 1024 ? `${(bytes / 1024).toFixed(0)} Ko` : `${(bytes / 1024 / 1024).toFixed(1)} Mo`)
+          }
+        })
+        .catch(() => null)
+    } catch {
+      setStatus('error')
+    }
+  }
+
+  useEffect(() => {
+    void check()
+    const id = setInterval(() => void check(), 30_000)
+    return () => clearInterval(id)
+  }, [])
+
+  const color = status === 'ok' ? 'var(--ok)' : status === 'error' ? 'var(--err)' : 'var(--ink-4)'
+  const label = status === 'ok' ? 'BDD connectée' : status === 'error' ? 'BDD hors ligne' : 'Vérification…'
+
+  return (
+    <div style={{
+      padding: '10px 16px',
+      borderTop: '1px solid var(--border-1)',
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8,
+    }}>
+      {/* LED status */}
+      <span style={{
+        width: 8, height: 8, borderRadius: '50%',
+        background: color,
+        flexShrink: 0,
+        boxShadow: status === 'ok' ? `0 0 6px ${color}` : 'none',
+        transition: 'background 0.4s, box-shadow 0.4s',
+      }} />
+      <div style={{ minWidth: 0 }}>
+        <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11, color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>
+          {label}
+        </div>
+        {dbSize && (
+          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--ink-4)' }}>
+            {dbSize}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
 export default function SideNav() {
   return (
     <nav style={{
@@ -15,37 +81,41 @@ export default function SideNav() {
       borderRight: '1px solid var(--border-1)',
       display: 'flex',
       flexDirection: 'column',
-      padding: '16px 0',
       height: '100%',
     }}>
-      <div style={{ padding: '0 16px 16px', borderBottom: '1px solid var(--border-1)', marginBottom: 8 }}>
+      <div style={{ padding: '16px 16px 16px', borderBottom: '1px solid var(--border-1)' }}>
         <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 16 }}>
           HomeHub
         </span>
       </div>
-      {NAV_ITEMS.map((item) => (
+
-        <NavLink
+      <div style={{ flex: 1, paddingTop: 8 }}>
-          key={item.to}
+        {NAV_ITEMS.map((item) => (
-          to={item.to}
+          <NavLink
-          end={item.to === '/'}
+            key={item.to}
-          style={({ isActive }) => ({
+            to={item.to}
-            display: 'flex',
+            end={item.to === '/'}
-            alignItems: 'center',
+            style={({ isActive }) => ({
-            gap: 12,
+              display: 'flex',
-            padding: '10px 16px',
+              alignItems: 'center',
-            color: isActive ? 'var(--accent)' : 'var(--ink-2)',
+              gap: 12,
-            background: isActive ? 'var(--accent-tint)' : 'transparent',
+              padding: '10px 16px',
-            borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+              color: isActive ? 'var(--accent)' : 'var(--ink-2)',
-            textDecoration: 'none',
+              background: isActive ? 'var(--accent-tint)' : 'transparent',
-            fontFamily: 'var(--font-ui)',
+              borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
-            fontSize: 14,
+              textDecoration: 'none',
-            minHeight: 40,
+              fontFamily: 'var(--font-ui)',
-          })}
+              fontSize: 14,
-        >
+              minHeight: 40,
-          <i className={`fa-solid fa-${item.icon}`} style={{ width: 18 }} />
+            })}
-          {item.label}
+          >
-        </NavLink>
+            <i className={`fa-solid fa-${item.icon}`} style={{ width: 18 }} />
-      ))}
+            {item.label}
+          </NavLink>
+        ))}
+      </div>
+
+      <DbStatusBar />
     </nav>
   )
 }

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' }}>
+            <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: 28, flex: 1 }} />
+              <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>
   )