conf — solutions showcase time (#2109)

* Show time range for very long sessions

* Move end time into cards in blocks with different end times

Author: hasparus

src/app/conf/2025/schedule/_components/schedule-list.tsx

@@ -223,6 +223,12 @@ export function ScheduleList({
                       blockEnd.getTime() === nextBlockStart?.getTime() &&
                       !isBreak
 
+                    const endTimesDiffer = sessions.some(
+                      session =>
+                        new Date(session.event_end).getTime() !==
+                        blockEnd.getTime(),
+                    )
+
                     return (
                       <div
                         key={`concurrent sessions on ${sessionDate}`}
@@ -231,7 +237,10 @@ export function ScheduleList({
                         <div className="mr-px flex flex-col max-lg:ml-px lg:flex-row">
                           <div className="relative border-neu-50 bg-neu-50 dark:bg-neu-0 max-lg:-mx-px max-lg:my-px max-lg:border-x lg:mr-px">
                             <span className="typography-body-sm mt-3 inline-block w-28 whitespace-nowrap pb-0.5 pl-4 lg:mr-6 lg:pb-4 lg:pl-0">
-                              {formatBlockTime(sessionDate, blockEnd)}
+                              {formatBlockTime(
+                                sessionDate,
+                                endTimesDiffer ? undefined : blockEnd,
+                              )}
                             </span>
                           </div>
                           <div className="relative flex w-full flex-col items-end gap-px lg:flex-row lg:items-start">
@@ -242,6 +251,7 @@ export function ScheduleList({
                                 year={year}
                                 eventsColors={eventsColors}
                                 blockEnd={blockEnd}
+                                durationVisible={endTimesDiffer}
                               />
                             ))}
                           </div>

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]"
@@ -29,11 +30,13 @@ export function ScheduleSessionCard({
   year,
   eventsColors,
   blockEnd,
+  durationVisible,
 }: {
   session: ScheduleSession
   year: `202${number}`
   eventsColors: Record<string, string>
   blockEnd: Date
+  durationVisible: boolean
 }) {
   let eventType = session.event_type
 
@@ -139,17 +142,7 @@ 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>
-              )}
+              {durationVisible && <SessionDuration session={session} />}
               <AddToCalendarLink
                 eventTitle={eventTitle}
                 session={session}
@@ -164,6 +157,29 @@ export function ScheduleSessionCard({
   )
 }
 
+function SessionDuration({
+  session,
+}: {
+  session: ScheduleSession
+}): React.ReactNode {
+  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,