feat: UI/UX improvements pass + fix photo 404 in Docker

Photos:
- Serve uploads via /api/photos/[filename] from UPLOAD_DIR env var
- Default UPLOAD_DIR=/data/uploads (mount as Docker volume for persistence)
- Upload route creates dir on demand, no root-permission issue
- Dockerfile creates /data/uploads owned by nextjs user

Growth:
- Show chart with single measurement (was hidden until 2+ points)
- PC label expanded to "PC — Périmètre crânien (cm)"
- WHO percentile ⓘ tooltip explaining P50/P3-P97
- Date field defaults to today in add-measurement form

Stats:
- Heatmap legend shows actual counts (0 1 2 3 4+) not just Moins/Plus
- Sleep timeline labeled "Fenêtre 19h – 11h"

Timeline:
- Filter type persisted in URL param (?type=...) — survives navigation
- Inline note save shows ✓ flash after blur
- Photo thumbnails open in new tab

Photos:
- Lightbox wraps: next on last → first, prev on first → last

Search:
- Result count header "X événements · Y notes"
- Event results link to /timeline?date=...&type=...
- Note results link to /notes?date=...

Notes:
- Unsaved indicator (amber dot) while textarea dirty, green ✓ after save

Milestones:
- Sort by date ascending within each month group

Settings:
- Pushover key field has eye toggle (show/hide)
- API key delete shows confirmation with key name
- All sections wrapped in collapsible SectionCard accordion

Dashboard:
- Empty state callout for new users with no events today

Event modal:
- Milk lot selection shows "Sélectionnez un lot — il sera marqué comme utilisé"
- Photo upload validates 5MB client-side before sending
- Timer resume shows "Reprise du chronomètre" when loaded from localStorage

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-15 20:44:45 +02:00
parent f7ab467385
commit 8f68eebeb0
14 changed files with 258 additions and 60 deletions
+76
View File
@@ -0,0 +1,76 @@
# Improvements & Known Issues
## Critical Bugs
- [x] **Photos 404 in Docker** — Upload wrote to `public/uploads/` (root-owned in standalone container). Fix: serve via `/api/photos/[filename]` from configurable `UPLOAD_DIR=/data/uploads`. Mount `/data/uploads` as Docker volume.
- [x] **WHO curves invisible when baby has measurements**`connectNulls` missing on percentile Lines; baby data rows with no p-values broke line segments.
- [x] **Symptom icon missing**`Activity` not registered in `event-icon.tsx` icon map.
- [x] **OMS curves break when measurements exist** — same as above (connectNulls).
## UI/UX Improvements
### Dashboard
- [ ] **Empty state for new users** — show "Commencez par enregistrer un repas →" callout when no events today
- [ ] **Active timers show which baby** — add baby name if multiple babies in family
### Growth
- [ ] **Single-measurement chart** — currently blank; should show point + WHO curves + message
- [ ] **"PC" label** — expand to "Périmètre crânien (PC)" on first use
- [ ] **WHO percentile tooltip** — "P50 = médiane : 50% des bébés sont en dessous"
- [ ] **Date field defaults to today** in add-measurement form
- [ ] **PDF export percentile rank** — show baby's WHO band in PDF table
### Stats
- [ ] **Heatmap legend** — show actual count numbers (0, 1, 2, 3+) not just "Moins/Plus"
- [ ] **Sleep timeline** — label "19h → 11h" window, make configurable
- [ ] **Chart zero-data gaps** — distinguish "no data" vs "zero events" visually
### Timeline
- [ ] **Filter state sticky** — persist in URL param (`?type=BREASTFEED`)
- [ ] **Inline note save feedback** — subtle "Enregistré ✓" flash on blur
- [ ] **Photo in timeline** — make thumbnail clickable to open lightbox
- [ ] **Select mode indicator** — show "3 sélectionnés · Supprimer" counter badge
### Photos
- [ ] **Square thumbnails** — force aspect-ratio: 1/1 with object-cover
- [ ] **Lightbox wraps** — next on last → first photo; prev on first → last
- [ ] **Delete from lightbox** — trash icon in lightbox → removes photo from event metadata
### Search
- [ ] **Results clickable** — link events to `/timeline?date=YYYY-MM-DD`, notes to `/notes?date=...`
- [ ] **Result count header** — "X événements · Y notes"
- [ ] **Date/type filter chips** on search results
### Notes
- [ ] **Unsaved indicator** — show "Non enregistré" dot while textarea is dirty
- [ ] **Date jump input** — calendar picker to jump to any date (not just nav arrows)
### Milestones
- [ ] **Sort by date** within month, not creation order
### Settings
- [ ] **Pushover key eye toggle** — show/hide pasted key (copy pattern from API keys)
- [ ] **API key delete confirmation** — "This will break integrations using this key"
- [ ] **Accordion/tabs** — collapse long settings sections on mobile
- [ ] **Invite link TTL** — show expiry date next to copy-link button
### Event Modal
- [ ] **Timer resume indicator** — show "Reprise depuis 12:34" when re-opening active timer
- [ ] **Milk lot selection hint** — "Sélectionnez un lot qui sera marqué comme utilisé"
- [ ] **Photo size feedback** — client-side 5MB validation with error message
### Navigation
- [ ] **Baby switcher accessibility** — add `aria-label="Sélectionner bébé"` to select
- [ ] **Unsaved state warning** — prompt before navigating away from dirty notes
## Feature Backlog
- [ ] **Vaccination tracker** — dates, vaccine name, lot, next-due reminder + push alert
- [ ] **Doctor visit log** — notes, prescriptions, next appointment date
- [ ] **Teeth tracker** — visual mouth diagram, mark appearance date
- [ ] **Baby schedule prediction** — "usually naps around 14h30" from historical patterns
- [ ] **Growth chart in PDF** — embed chart image (jsPDF canvas) not just table
- [ ] **Natural language digest** — "Emma feeds every 2h45 on average" weekly push
- [ ] **Wellness check-in** — parent self-reports sleep/mood for postpartum monitoring
- [ ] **Weight gain on-track indicator** — vs last weigh-in projected line on growth chart
- [ ] **Contraction timer** — repurpose timer infra for pre-birth use