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>
This commit is contained in:
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user