arnaudne/Grow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): lift modal above tab bar, remove duplicate last activities

Browse Source 
- Modal container pb = 68px + safe-area-inset-bottom so footer always
  above the tab bar on mobile (was hidden behind it)
- Remove "Dernières activités" from dashboard (duplicates today's feed)
- Quick log grid goes full-width, 6 cols on sm+

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Arnaud Nelissen
2026-06-15 15:46:18 +02:00
parent 8152c02995
commit eb1e5ee3fe
2 changed files with 26 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(app)/dashboard/page.tsx
+25 -54
View File
@@ -372,61 +372,32 @@ export default function DashboardPage() {
})}
</div>
<div className="grid md:grid-cols-2 gap-6">
{/* Last events */}
<div>
<h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-3">Dernières activités</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">
{(["BREASTFEED", "BOTTLE", "DIAPER_WET", "DIAPER_STOOL", "NAP"] as EventType[]).map((t) => {
const last = lastByType[t];
const cfg = EVENT_CONFIG[t];
return (
<div key={t} className="flex items-center gap-3 px-4 py-3">
<div className={`w-8 h-8 rounded-lg ${cfg.bgClass} flex items-center justify-center flex-shrink-0`}>
<EventIcon name={cfg.icon} className={`w-4 h-4 ${cfg.colorClass}`} />
</div>
<div className="flex-1 min-w-0">
<div className="text-sm font-medium text-slate-700 dark:text-slate-200">{cfg.label}</div>
{last && getEventSummary(last) && (
<div className="text-xs text-slate-400 dark:text-slate-500 truncate">{getEventSummary(last)}</div>
)}
</div>
<div className="text-xs text-slate-400 dark:text-slate-500 flex-shrink-0">
{last ? formatTimeAgo(new Date(last.startedAt)) : "—"}
</div>
</div>
);
})}
</div>
</div>
{/* Quick log */}
<div className="space-y-4">
{QUICK_LOG_GROUPS.map((group) => (
<div key={group.label}>
<h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">{group.label}</h2>
<div className="grid grid-cols-4 gap-2">
{group.types.map((type) => {
const cfg = EVENT_CONFIG[type];
return (
<button
key={type}
onClick={() => setActiveModal(type)}
className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-indigo-200 dark:hover:border-indigo-700 hover:shadow-sm rounded-xl p-2.5 flex flex-col items-center gap-1.5 transition active:scale-95"
>
<div className={`w-9 h-9 rounded-lg ${cfg.bgClass} flex items-center justify-center`}>
<EventIcon name={cfg.icon} className={`w-5 h-5 ${cfg.colorClass}`} />
</div>
<span className="text-[10px] font-medium text-slate-600 dark:text-slate-300 text-center leading-tight">
{cfg.label}
</span>
</button>
);
})}
</div>
{/* Quick log */}
<div className="space-y-4">
{QUICK_LOG_GROUPS.map((group) => (
<div key={group.label}>
<h2 className="text-xs font-semibold text-slate-400 dark:text-slate-500 uppercase tracking-wider mb-2">{group.label}</h2>
<div className="grid grid-cols-4 sm:grid-cols-6 gap-2">
{group.types.map((type) => {
const cfg = EVENT_CONFIG[type];
return (
<button
key={type}
onClick={() => setActiveModal(type)}
className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 hover:border-indigo-200 dark:hover:border-indigo-700 hover:shadow-sm rounded-xl p-2.5 flex flex-col items-center gap-1.5 transition active:scale-95"
>
<div className={`w-9 h-9 rounded-lg ${cfg.bgClass} flex items-center justify-center`}>
<EventIcon name={cfg.icon} className={`w-5 h-5 ${cfg.colorClass}`} />
</div>
<span className="text-[10px] font-medium text-slate-600 dark:text-slate-300 text-center leading-tight">
{cfg.label}
</span>
</button>
);
})}
</div>
))}
</div>
</div>
))}
</div>
{/* Event templates */}
src/components/event-modal.tsx
+1 -1
View File
@@ -384,7 +384,7 @@ export function EventModal({ type, babyId, onClose, onSaved, initialEvent }: Pro
const segmentInactive = "border-slate-200 dark:border-slate-600 text-slate-500 dark:text-slate-400 hover:border-slate-300";
return (
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center sm:p-4">
<div className="fixed inset-0 z-50 flex items-end sm:items-center justify-center pb-[calc(68px_+_env(safe-area-inset-bottom,_0px))] sm:pb-4 sm:p-4">
<div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={onClose} />
<div