Show time range for very long sessions

Author: hasparus

src/app/conf/2025/schedule/_components/schedule-session-card.tsx

@@ -19,6 +19,7 @@ import ClockIcon from "@/app/conf/_design-system/pixelarticons/clock.svg?svgr"
 
 import { getEventTitle } from "../../utils"
 import { CalendarIcon } from "@/app/conf/_design-system/pixelarticons/calendar-icon"
+import { formatBlockTime } from "./format-block-time"
 
 function isString(x: unknown): x is string {
   return Object.prototype.toString.call(x) === "[object String]"
@@ -139,17 +140,10 @@ export function ScheduleSessionCard({
                   {session.venue}
                 </span>
               )}
-              {blockTimeFraction < 1 && (
-                <span className="typography-body-xs flex items-center gap-0.5">
-                  <ClockIcon className="size-4 text-pri-base [@container(width<240px)]:hidden" />
-                  {Math.round(
-                    (new Date(session.event_end).getTime() -
-                      new Date(session.event_start).getTime()) /
-                      (1000 * 60),
-                  )}{" "}
-                  min
-                </span>
-              )}
+              <SessionDuration
+                session={session}
+                blockTimeFraction={blockTimeFraction}
+              />
               <AddToCalendarLink
                 eventTitle={eventTitle}
                 session={session}
@@ -164,6 +158,33 @@ export function ScheduleSessionCard({
   )
 }
 
+function SessionDuration({
+  session,
+  blockTimeFraction,
+}: {
+  session: ScheduleSession
+  blockTimeFraction: number
+}): React.ReactNode {
+  if (blockTimeFraction >= 1) return null
+
+  const durationMs =
+    new Date(session.event_end).getTime() -
+    new Date(session.event_start).getTime()
+
+  // if a session is longer than 3 hourse, we show the time range
+  const formattedTime =
+    durationMs > 1000 * 60 * 60 * 3
+      ? formatBlockTime(session.event_start, new Date(session.event_end))
+      : `${Math.round(durationMs / (1000 * 60))} min`
+
+  return (
+    <span className="typography-body-xs flex items-center gap-0.5">
+      <ClockIcon className="size-4 text-pri-base [@container(width<240px)]:hidden" />
+      {formattedTime}
+    </span>
+  )
+}
+
 function AddToCalendarLink({
   eventTitle,
   session,