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

fix: dark mode event colors, sidebar height, calendar default, photo badge

Browse Source 
- event-config: all bgClass/borderClass get dark:bg-*-950/50 + dark:border-*-800 variants — fixes bright pastel backgrounds in dark mode
- nav: h-screen → h-[100dvh] — fixes sidebar bottom buttons hidden behind mobile browser chrome
- calendar: selectedDay defaults to today, never null — events shown immediately on load
- timeline + dashboard: photo indicator (ImageIcon) on events with metadata.photo

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Arnaud Nelissen
2026-06-15 22:22:32 +02:00
parent cd3efa98fc
commit c28fa8188f
5 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/(app)/calendar/page.tsx
+12 -12
View File
@@ -45,19 +45,21 @@ export default function CalendarPage() {
const days = eachDayOfInterval({ start: calStart, end: calEnd });
const [selectedDay, setSelectedDay] = useState<Date | null>(null);
const [selectedDay, setSelectedDay] = useState<Date>(() => new Date());
const dayEvents = (day: Date) => events.filter((e) => isSameDay(new Date(e.startedAt), day));
const selectedDayEvents = selectedDay ? dayEvents(selectedDay) : [];
const selectedDayEvents = dayEvents(selectedDay);
function prevMonth() {
setCursor(new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1));
setSelectedDay(null);
const first = new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1);
setCursor(first);
setSelectedDay(first);
}
function nextMonth() {
setCursor(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1));
setSelectedDay(null);
const first = new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1);
setCursor(first);
setSelectedDay(first);
}
return (
@@ -75,7 +77,7 @@ export default function CalendarPage() {
className="w-9 h-9 rounded-lg flex items-center justify-center text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
<ChevronLeft className="w-5 h-5" />
</button>
<button onClick={() => { setCursor(new Date()); setSelectedDay(null); }}
<button onClick={() => { setCursor(new Date()); setSelectedDay(new Date()); }}
className="px-3 py-1.5 text-xs font-medium text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition">
Aujourd&apos;hui
</button>
@@ -102,13 +104,13 @@ export default function CalendarPage() {
{days.map((day, i) => {
const inMonth = day.getMonth() === cursor.getMonth();
const evs = dayEvents(day);
const isSelected = selectedDay ? isSameDay(day, selectedDay) : false;
const isSelected = isSameDay(day, selectedDay);
const today = isToday(day);
return (
<button
key={i}
onClick={() => setSelectedDay(isSameDay(day, selectedDay ?? new Date(0)) ? null : day)}
onClick={() => setSelectedDay(day)}
className={`min-h-[52px] sm:min-h-[64px] p-1 sm:p-1.5 text-left border-b border-r border-slate-100 dark:border-slate-800 last:border-r-0 transition ${
isSelected
? "bg-indigo-50 dark:bg-indigo-950"
@@ -146,8 +148,7 @@ export default function CalendarPage() {
</div>
{/* Selected day detail */}
{selectedDay && (
<div className="mt-4">
<div className="mt-4">
<div className="flex items-baseline justify-between mb-3">
<h2 className="text-sm font-semibold text-slate-700 dark:text-slate-200 capitalize">
{format(selectedDay, "EEEE d MMMM", { locale: fr })}
@@ -189,7 +190,6 @@ export default function CalendarPage() {
</div>
)}
</div>
)}
{!selectedBaby && (
<div className="text-center py-16 text-slate-400 dark:text-slate-500">
src/app/(app)/dashboard/page.tsx
+4 -1
View File
@@ -9,7 +9,7 @@ import { useBaby } from "@/contexts/baby-context";
import { checkFeedAlert, getThresholds } from "@/lib/notifications";
import { format, isToday } from "date-fns";
import { fr } from "date-fns/locale";
import { AlertTriangle, Clock, CheckCircle2, Pin, PinOff, Pencil, Check, X, Plus, Trash2, FileText } from "lucide-react";
import { AlertTriangle, Clock, CheckCircle2, Pin, PinOff, Pencil, Check, X, Plus, Trash2, FileText, ImageIcon } from "lucide-react";
import { useSession } from "next-auth/react";
const QUICK_LOG_GROUPS: { label: string; types: EventType[] }[] = [
@@ -790,6 +790,9 @@ export default function DashboardPage() {
<span className="text-xs text-slate-400 dark:text-slate-500 ml-2">{getEventSummary(ev)}</span>
)}
</div>
{typeof ev.metadata?.photo === "string" && ev.metadata.photo && (
<ImageIcon className="w-3.5 h-3.5 text-slate-400 dark:text-slate-500 flex-shrink-0" />
)}
<span className="text-xs text-slate-400 dark:text-slate-500 flex-shrink-0 font-mono">
{format(new Date(ev.startedAt), "HH:mm")}
</span>
src/app/(app)/timeline/page.tsx
+4 -1
View File
@@ -8,7 +8,7 @@ import { EventIcon } from "@/components/event-icon";
import { useBaby } from "@/contexts/baby-context";
import { format, isToday, isYesterday } from "date-fns";
import { fr } from "date-fns/locale";
import { Trash2, StickyNote, Pencil, CheckSquare, Square, XCircle } from "lucide-react";
import { Trash2, StickyNote, Pencil, CheckSquare, Square, XCircle, ImageIcon } from "lucide-react";
import Image from "next/image";
import { EventModal } from "@/components/event-modal";
@@ -271,6 +271,9 @@ export default function TimelinePage() {
{summary && <span className="text-xs text-slate-400 dark:text-slate-500 ml-2">{summary}</span>}
{ev.notes && <p className="text-xs text-slate-400 dark:text-slate-500 truncate mt-0.5 italic">{ev.notes}</p>}
</div>
{typeof ev.metadata?.photo === "string" && ev.metadata.photo && (
<ImageIcon className="w-3.5 h-3.5 text-slate-400 dark:text-slate-500 flex-shrink-0" />
)}
<span className="text-xs text-slate-400 dark:text-slate-500 flex-shrink-0 font-mono">
{format(new Date(ev.startedAt), "HH:mm")}
</span>