fix: prevent desktop schedule service row overlap

__tests__/lib/session-notifications.test.ts

@@ -0,0 +1,177 @@
+import { describe, it, expect, jest, beforeEach, afterEach } from "@jest/globals";
+import { buildFavoriteSessionNotifications, scheduleFavoriteSessionNotifications } from "@/lib/session-notifications";
+import type { DailySchedule } from "@/hooks/useSchedule";
+
+const createSchedule = (startsAt: string): DailySchedule[] => [
+  {
+    date: "2026-06-17",
+    rooms: [
+      {
+        id: 1,
+        name: "Auditorium",
+        hasOnlyPlenumSessions: false,
+        sessions: [
+          {
+            id: "session-1",
+            title: "Practical React",
+            description: null,
+            startsAt,
+            endsAt: "2026-06-17T10:50:00.000Z",
+            isServiceSession: false,
+            isPlenumSession: false,
+            speakers: [],
+            roomId: 1,
+            room: "Auditorium",
+            status: "accepted",
+          },
+        ],
+      },
+    ],
+    timeSlots: [],
+  },
+];
+
+const createGroupedSchedule = (): DailySchedule[] => [
+  {
+    date: "2026-06-17",
+    rooms: [
+      {
+        id: 1,
+        name: "Auditorium",
+        hasOnlyPlenumSessions: false,
+        sessions: [
+          {
+            id: "session-1",
+            title: "Practical React",
+            description: null,
+            startsAt: "2026-06-17T10:00:00.000Z",
+            endsAt: "2026-06-17T10:50:00.000Z",
+            isServiceSession: false,
+            isPlenumSession: false,
+            speakers: [],
+            roomId: 1,
+            room: "Auditorium",
+            status: "accepted",
+          },
+          {
+            id: "session-2",
+            title: "Advanced GraphQL",
+            description: null,
+            startsAt: "2026-06-17T10:00:00.000Z",
+            endsAt: "2026-06-17T10:50:00.000Z",
+            isServiceSession: false,
+            isPlenumSession: false,
+            speakers: [],
+            roomId: 1,
+            room: "Auditorium",
+            status: "accepted",
+          },
+        ],
+      },
+    ],
+    timeSlots: [],
+  },
+];
+
+describe("session notifications", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+    jest.setSystemTime(new Date("2026-06-17T09:58:30.000Z"));
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+    jest.restoreAllMocks();
+  });
+
+  it("builds reminders one minute before favorite sessions start", () => {
+    const notifications = buildFavoriteSessionNotifications(createSchedule("2026-06-17T10:00:00.000Z"), ["session-1"], Date.now());
+
+    expect(notifications).toEqual([
+      {
+        id: "session-1",
+        title: "Practical React starts in 1 minute",
+        body: "Auditorium · 12:00",
+        notifyAt: new Date("2026-06-17T09:59:00.000Z").getTime(),
+      },
+    ]);
+  });
+
+  it("groups favorite sessions that start at the same time into one reminder", () => {
+    const notifications = buildFavoriteSessionNotifications(createGroupedSchedule(), ["session-1", "session-2"], Date.now());
+
+    expect(notifications).toEqual([
+      {
+        id: "session-1|session-2",
+        title: "2 favorite sessions start in 1 minute",
+        body: "Practical React, Advanced GraphQL · 12:00",
+        notifyAt: new Date("2026-06-17T09:59:00.000Z").getTime(),
+      },
+    ]);
+  });
+
+  it("ignores non-favorites, service sessions, and reminders that are no longer in the future", () => {
+    const schedule = createSchedule("2026-06-17T09:59:00.000Z");
+    schedule[0].rooms[0].sessions.push({ ...schedule[0].rooms[0].sessions[0], id: "session-2", isServiceSession: true });
+
+    expect(buildFavoriteSessionNotifications(schedule, ["session-1", "session-2"], Date.now())).toEqual([]);
+  });
+
+  it("schedules browser notifications and returns a cleanup function", () => {
+    const notificationConstructor = jest.fn();
+    class MockNotification {
+      static permission: NotificationPermission = "granted";
+
+      constructor(title: string, options?: NotificationOptions) {
+        notificationConstructor(title, options);
+      }
+    }
+
+    const cleanup = scheduleFavoriteSessionNotifications(createSchedule("2026-06-17T10:00:00.000Z"), ["session-1"], MockNotification, Date.now());
+
+    jest.advanceTimersByTime(29_999);
+    expect(notificationConstructor).not.toHaveBeenCalled();
+
+    jest.advanceTimersByTime(1);
+    expect(notificationConstructor).toHaveBeenCalledWith("Practical React starts in 1 minute", { body: "Auditorium · 12:00", tag: "devbcn-session-session-1" });
+
+    cleanup();
+  });
+
+  it("schedules a single browser notification for simultaneous favorite sessions", () => {
+    const notificationConstructor = jest.fn();
+    class MockNotification {
+      static permission: NotificationPermission = "granted";
+
+      constructor(title: string, options?: NotificationOptions) {
+        notificationConstructor(title, options);
+      }
+    }
+
+    scheduleFavoriteSessionNotifications(createGroupedSchedule(), ["session-1", "session-2"], MockNotification, Date.now());
+
+    jest.advanceTimersByTime(30_000);
+
+    expect(notificationConstructor).toHaveBeenCalledTimes(1);
+    expect(notificationConstructor).toHaveBeenCalledWith("2 favorite sessions start in 1 minute", {
+      body: "Practical React, Advanced GraphQL · 12:00",
+      tag: "devbcn-session-session-1|session-2",
+    });
+  });
+
+  it("does not schedule notifications without browser permission", () => {
+    const notificationConstructor = jest.fn();
+    class MockNotification {
+      static permission: NotificationPermission = "default";
+
+      constructor(title: string, options?: NotificationOptions) {
+        notificationConstructor(title, options);
+      }
+    }
+
+    scheduleFavoriteSessionNotifications(createSchedule("2026-06-17T10:00:00.000Z"), ["session-1"], MockNotification, Date.now());
+
+    jest.advanceTimersByTime(30_000);
+    expect(notificationConstructor).not.toHaveBeenCalled();
+  });
+});

app/[year]/schedule/page.tsx

@@ -58,7 +58,7 @@ export default async function Schedule({ params }: ScheduleProps) {
         <div className="container">
           <div className="row">
             <div className="col-lg-12">
-              <ScheduleProvider>
+              <ScheduleProvider schedule={scheduleData}>
                 <ScheduleContainer initialSchedule={scheduleData} year={year} />
               </ScheduleProvider>
             </div>

context/ScheduleContext.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { createContext, useContext, useEffect, useMemo, useState, ReactNode, useCallback } from "react";
+import type { DailySchedule } from "@/hooks/useSchedule";
+import { scheduleFavoriteSessionNotifications } from "@/lib/session-notifications";
 
 interface ScheduleContextType {
   savedSessionIds: string[];
@@ -10,7 +12,12 @@ interface ScheduleContextType {
 
 const ScheduleContext = createContext<ScheduleContextType | undefined>(undefined);
 
-export function ScheduleProvider({ children }: { readonly children: ReactNode }) {
+interface ScheduleProviderProps {
+  readonly children: ReactNode;
+  readonly schedule?: DailySchedule[];
+}
+
+export function ScheduleProvider({ children, schedule = [] }: ScheduleProviderProps) {
   const [savedSessionIds, setSavedSessionIds] = useState<string[]>([]);
   const [isLoaded, setIsLoaded] = useState(false);
 
@@ -32,16 +39,34 @@ export function ScheduleProvider({ children }: { readonly children: ReactNode })
     }
   }, [savedSessionIds, isLoaded]);
 
-  const toggleSession = useCallback((sessionId: string) => {
-    setSavedSessionIds((prev) => {
-      if (prev.includes(sessionId)) {
-        return prev.filter((id) => id !== sessionId);
-      } else {
-        return [...prev, sessionId];
-      }
+  useEffect(() => {
+    return scheduleFavoriteSessionNotifications(schedule, savedSessionIds, typeof Notification === "undefined" ? undefined : Notification);
+  }, [schedule, savedSessionIds]);
+
+  const requestNotificationPermission = useCallback(() => {
+    if (typeof Notification === "undefined" || Notification.permission !== "default") {
+      return;
+    }
+
+    Notification.requestPermission().catch((error: unknown) => {
+      console.error("Failed to request notification permission", error);
     });
   }, []);
 
+  const toggleSession = useCallback(
+    (sessionId: string) => {
+      setSavedSessionIds((prev) => {
+        if (prev.includes(sessionId)) {
+          return prev.filter((id) => id !== sessionId);
+        }
+
+        requestNotificationPermission();
+        return [...prev, sessionId];
+      });
+    },
+    [requestNotificationPermission]
+  );
+
   const isSaved = useCallback((sessionId: string) => savedSessionIds.includes(sessionId), [savedSessionIds]);
 
   const contextValue = useMemo(() => ({ savedSessionIds, toggleSession, isSaved }), [savedSessionIds, toggleSession, isSaved]);

lib/session-notifications.ts

@@ -0,0 +1,128 @@
+import { format, parseISO } from "date-fns";
+import type { DailySchedule, GridSession } from "@/hooks/useSchedule";
+
+const SESSION_REMINDER_LEAD_TIME_MS = 60_000;
+
+export interface FavoriteSessionNotification {
+  id: string;
+  title: string;
+  body: string;
+  notifyAt: number;
+}
+
+type BrowserNotification = Pick<typeof Notification, "permission"> & {
+  new (title: string, options?: NotificationOptions): unknown;
+};
+
+interface GroupedFavoriteSessionNotification {
+  ids: string[];
+  sessionCount: number;
+  titles: string[];
+  rooms: string[];
+  timeLabel: string;
+  notifyAt: number;
+}
+
+const getUniqueSessions = (schedule: DailySchedule[]): GridSession[] => {
+  const sessionsById = new Map<string, GridSession>();
+  const rooms = schedule.flatMap((day) => day.rooms);
+
+  for (const room of rooms) {
+    for (const session of room.sessions) {
+      if (!sessionsById.has(session.id)) {
+        sessionsById.set(session.id, session);
+      }
+    }
+  }
+
+  return Array.from(sessionsById.values());
+};
+
+const addSessionToNotificationGroup = (notificationsByNotifyAt: Map<number, GroupedFavoriteSessionNotification>, session: GridSession, now: number): void => {
+  const startsAt = parseISO(session.startsAt);
+  const notifyAt = startsAt.getTime() - SESSION_REMINDER_LEAD_TIME_MS;
+
+  if (notifyAt <= now) {
+    return;
+  }
+
+  const existingNotification = notificationsByNotifyAt.get(notifyAt);
+  if (existingNotification === undefined) {
+    notificationsByNotifyAt.set(notifyAt, {
+      ids: [session.id],
+      sessionCount: 1,
+      titles: [session.title],
+      rooms: [session.room],
+      timeLabel: format(startsAt, "HH:mm"),
+      notifyAt,
+    });
+    return;
+  }
+
+  existingNotification.ids.push(session.id);
+  existingNotification.sessionCount += 1;
+  existingNotification.titles.push(session.title);
+  existingNotification.rooms.push(session.room);
+};
+
+export const buildFavoriteSessionNotifications = (schedule: DailySchedule[], savedSessionIds: string[], now: number): FavoriteSessionNotification[] => {
+  const savedIds = new Set(savedSessionIds);
+  const notificationsByNotifyAt = new Map<number, GroupedFavoriteSessionNotification>();
+
+  for (const session of getUniqueSessions(schedule)) {
+    if (!savedIds.has(session.id) || session.isServiceSession) {
+      continue;
+    }
+
+    addSessionToNotificationGroup(notificationsByNotifyAt, session, now);
+  }
+
+  return Array.from(notificationsByNotifyAt.entries())
+    .sort(([leftNotifyAt], [rightNotifyAt]) => leftNotifyAt - rightNotifyAt)
+    .map(([notifyAt, notification]) => {
+      if (notification.sessionCount === 1) {
+        return {
+          id: notification.ids[0],
+          title: `${notification.titles[0]} starts in 1 minute`,
+          body: `${notification.rooms[0]} · ${notification.timeLabel}`,
+          notifyAt,
+        };
+      }
+
+      const sessionSummary =
+        notification.sessionCount <= 2
+          ? notification.titles.join(", ")
+          : `${notification.titles.slice(0, 2).join(", ")} +${notification.sessionCount - 2} more`;
+
+      return {
+        id: notification.ids.slice().sort().join("|"),
+        title: `${notification.sessionCount} favorite sessions start in 1 minute`,
+        body: `${sessionSummary} · ${notification.timeLabel}`,
+        notifyAt,
+      };
+    });
+};
+
+export const scheduleFavoriteSessionNotifications = (
+  schedule: DailySchedule[],
+  savedSessionIds: string[],
+  notificationApi: BrowserNotification | undefined,
+  now: number = Date.now()
+): (() => void) => {
+  if (!notificationApi || notificationApi.permission !== "granted") {
+    return () => undefined;
+  }
+
+  const timeoutIds = buildFavoriteSessionNotifications(schedule, savedSessionIds, now).map((notification) =>
+    window.setTimeout(() => {
+      new notificationApi(notification.title, {
+        body: notification.body,
+        tag: `devbcn-session-${notification.id}`,
+      });
+    }, notification.notifyAt - now)
+  );
+
+  return () => {
+    timeoutIds.forEach((timeoutId) => window.clearTimeout(timeoutId));
+  };
+};

styles/components/_index.scss

@@ -9,3 +9,4 @@
 @forward "venue-wtc";
 @forward "convince-your-boss";
 @forward "features";
+@forward "live-schedule";