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>
2026-05-25 16:51:44 +02:00
parent c72ca04fd2
commit 2129da4f55
4 changed files with 145 additions and 30 deletions
@@ -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.
@@ -1,7 +1,7 @@
 {
  "name": "homehub-frontend",
  "private": true,
-  "version": "0.5.6",
+  "version": "0.5.7",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -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
-          key={item.to}
-          to={item.to}
-          end={item.to === '/'}
-          style={({ isActive }) => ({
-            display: 'flex',
-            alignItems: 'center',
-            gap: 12,
-            padding: '10px 16px',
-            color: isActive ? 'var(--accent)' : 'var(--ink-2)',
-            background: isActive ? 'var(--accent-tint)' : 'transparent',
-            borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
-            textDecoration: 'none',
-            fontFamily: 'var(--font-ui)',
-            fontSize: 14,
-            minHeight: 40,
-          })}
-        >
-          <i className={`fa-solid fa-${item.icon}`} style={{ width: 18 }} />
-          {item.label}
-        </NavLink>
-      ))}
+
+      <div style={{ flex: 1, paddingTop: 8 }}>
+        {NAV_ITEMS.map((item) => (
+          <NavLink
+            key={item.to}
+            to={item.to}
+            end={item.to === '/'}
+            style={({ isActive }) => ({
+              display: 'flex',
+              alignItems: 'center',
+              gap: 12,
+              padding: '10px 16px',
+              color: isActive ? 'var(--accent)' : 'var(--ink-2)',
+              background: isActive ? 'var(--accent-tint)' : 'transparent',
+              borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+              textDecoration: 'none',
+              fontFamily: 'var(--font-ui)',
+              fontSize: 14,
+              minHeight: 40,
+            })}
+          >
+            <i className={`fa-solid fa-${item.icon}`} style={{ width: 18 }} />
+            {item.label}
+          </NavLink>
+        ))}
+      </div>
+
+      <DbStatusBar />
    </nav>
  )
 }
@@ -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>
  )