Added owner initials to events

X-Lovable-Edit-ID: edt-3dfe120c-812b-4e83-8629-ff0d4b347834
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
2026-04-18 23:37:24 +00:00
co-authored by renee-png
+35 -8
View File
@@ -84,6 +84,14 @@ function typeMeta(key: string) {
return EVENT_TYPE_MAP[key] ?? EVENT_TYPE_MAP.other;
}
function ownerInitials(name: string | null): string {
if (!name) return "";
const parts = name.trim().split(/\s+/).filter(Boolean);
if (parts.length === 0) return "";
if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
}
// ---- Unified event ----
interface Evt {
id: string;
@@ -875,17 +883,25 @@ function MonthGrid({
<div className="space-y-0.5">
{dayEvts.slice(0, 3).map((e) => {
const meta = typeMeta(e.event_type);
const initials = ownerInitials(e.owner_name);
return (
<div
key={`${e.source}-${e.id}`}
className={cn(
"text-[10px] leading-tight px-1.5 py-0.5 rounded truncate text-white",
"text-[10px] leading-tight px-1.5 py-0.5 rounded truncate text-white flex items-center gap-1",
meta.bg,
)}
title={e.title}
title={`${e.title}${e.owner_name ? ` — ${e.owner_name}` : ""}`}
>
{!e.all_day && formatInEST(e.start, "h:mma ")}
{e.title}
{initials && (
<span className="shrink-0 text-[9px] font-semibold bg-white/25 rounded px-1 leading-tight">
{initials}
</span>
)}
<span className="truncate">
{!e.all_day && formatInEST(e.start, "h:mma ")}
{e.title}
</span>
</div>
);
})}
@@ -945,14 +961,25 @@ function WeekStrip({
<div className="space-y-1">
{dayEvts.map((e) => {
const meta = typeMeta(e.event_type);
const initials = ownerInitials(e.owner_name);
return (
<div
key={`${e.source}-${e.id}`}
className={cn("text-[11px] px-1.5 py-1 rounded truncate text-white", meta.bg)}
title={e.title}
className={cn(
"text-[11px] px-1.5 py-1 rounded truncate text-white flex items-center gap-1",
meta.bg,
)}
title={`${e.title}${e.owner_name ? ` — ${e.owner_name}` : ""}`}
>
{!e.all_day && formatInEST(e.start, "h:mma ")}
{e.title}
{initials && (
<span className="shrink-0 text-[9px] font-semibold bg-white/25 rounded px-1 leading-tight">
{initials}
</span>
)}
<span className="truncate">
{!e.all_day && formatInEST(e.start, "h:mma ")}
{e.title}
</span>
</div>
);
})}