style: Add wall clock time to session timeline

This commit is contained in:
2025-12-19 21:11:36 +01:00
parent fdc1dd01e5
commit 06891a3619

View File

@@ -47,8 +47,10 @@ export default function SessionTimeline({ tastings, sessionStart }: SessionTimel
return (
<div className="relative pl-6 space-y-6 before:absolute before:inset-0 before:left-[9px] before:w-[2px] before:bg-zinc-200 dark:before:bg-zinc-800 before:h-full mb-12">
{sortedTastings.map((tasting, index) => {
const currentTime = new Date(tasting.tasted_at).getTime();
const tastedDate = new Date(tasting.tasted_at);
const currentTime = tastedDate.getTime();
const diffMinutes = Math.round((currentTime - firstTastingTime) / (1000 * 60));
const wallClockTime = tastedDate.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
const isSmoky = checkIsSmoky(tasting);
const wasPreviousSmoky = index > 0 && checkIsSmoky(sortedTastings[index - 1]);
@@ -69,7 +71,7 @@ export default function SessionTimeline({ tastings, sessionStart }: SessionTimel
<div className="flex items-center gap-2 mb-1">
<span className="text-[10px] font-black text-amber-600 uppercase tracking-widest leading-none">Dram #{index + 1}</span>
<span className="text-[10px] font-bold text-zinc-400 dark:text-zinc-600 uppercase tracking-tight leading-none">
{index === 0 ? 'Start' : `+${diffMinutes}m`}
{wallClockTime} ({index === 0 ? 'Start' : `+${diffMinutes}m`})
</span>
{isSmoky && (
<span className="bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 text-[8px] font-black px-1.5 py-0.5 rounded-md uppercase tracking-tighter">Peat Bomb</span>