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:
@@ -8,6 +8,7 @@ import { useBaby } from "@/contexts/baby-context";
|
||||
import { format } from "date-fns";
|
||||
import { fr } from "date-fns/locale";
|
||||
import { Search, FileText, StickyNote } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
interface SearchEvent {
|
||||
id: string;
|
||||
@@ -108,6 +109,12 @@ export default function SearchPage() {
|
||||
<p className="text-sm text-slate-400 dark:text-slate-500 text-center py-12">Aucun résultat pour « {debouncedQ} »</p>
|
||||
)}
|
||||
|
||||
{debouncedQ.length >= 2 && !isFetching && hasResults && (
|
||||
<p className="text-xs text-slate-400 mb-3">
|
||||
{events.length} événement{events.length !== 1 ? "s" : ""} · {notes.length} note{notes.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{events.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3 flex items-center gap-1.5">
|
||||
@@ -119,7 +126,7 @@ export default function SearchPage() {
|
||||
const cfg = EVENT_CONFIG[ev.type];
|
||||
const summary = eventSummary(ev);
|
||||
return (
|
||||
<div key={ev.id} className="flex items-start gap-3 px-4 py-3">
|
||||
<Link key={ev.id} href={`/timeline?date=${ev.startedAt.slice(0, 10)}&type=${ev.type}`} className="flex items-start gap-3 px-4 py-3 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/50 transition rounded-lg">
|
||||
<div className={`w-8 h-8 rounded-lg ${cfg.bgClass} flex items-center justify-center flex-shrink-0 mt-0.5`}>
|
||||
<EventIcon name={cfg.icon} className={`w-4 h-4 ${cfg.colorClass}`} />
|
||||
</div>
|
||||
@@ -137,7 +144,7 @@ export default function SearchPage() {
|
||||
{format(new Date(ev.startedAt), "d MMM yyyy HH:mm", { locale: fr })} · {ev.user.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@@ -152,14 +159,14 @@ export default function SearchPage() {
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl overflow-hidden divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{notes.map((note) => (
|
||||
<div key={note.id} className="px-4 py-3">
|
||||
<Link key={note.id} href={`/notes?date=${note.date.slice(0, 10)}`} className="block px-4 py-3 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-700/50 transition rounded-lg">
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500 mb-1">
|
||||
{format(new Date(note.date), "d MMMM yyyy", { locale: fr })} · {note.user.name}
|
||||
</p>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-200 line-clamp-3">
|
||||
{highlight(note.content, debouncedQ)}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user