@morscherlab/mint-sdk 1.2.0-beta.3 → 1.2.0-beta.4

package/src/composables/useRuntimeAlignment.ts

@@ -0,0 +1,184 @@
+import {
+  computed,
+  onMounted,
+  onScopeDispose,
+  readonly,
+  ref,
+  toValue,
+  type MaybeRefOrGetter,
+  type Ref,
+} from 'vue'
+
+const RUNTIME_RELOAD_KEY_PREFIX = 'mint:runtime-reload:'
+const REVISION_QUERY_KEY = '__mint_revision'
+const inMemoryReloadGuards = new Set<string>()
+
+interface RuntimeStorage {
+  getItem(key: string): string | null
+  setItem(key: string, value: string): void
+}
+
+interface RuntimeEventTarget {
+  addEventListener(type: 'vite:preloadError', listener: EventListener): void
+  removeEventListener(type: 'vite:preloadError', listener: EventListener): void
+}
+
+interface RuntimeVisibilityTarget {
+  addEventListener(type: 'visibilitychange', listener: EventListener): void
+  removeEventListener(type: 'visibilitychange', listener: EventListener): void
+}
+
+export interface RuntimeRevisionResponse {
+  frontend_revision?: string | null
+}
+
+export interface RuntimeAlignmentOptions {
+  /** Revision embedded in the HTML that booted this tab. */
+  currentRevision?: MaybeRefOrGetter<string | null | undefined>
+  /** Browser visibility seam. */
+  visibility?: () => DocumentVisibilityState
+  /** Current location seam. */
+  currentUrl?: () => string
+  /** Location replacement seam. */
+  replace?: (url: string) => void
+  /** Per-tab recovery guard storage. */
+  storage?: RuntimeStorage | null
+  /** Vite preload error source. */
+  eventTarget?: RuntimeEventTarget | null
+  /** Browser visibility event source. */
+  visibilityTarget?: RuntimeVisibilityTarget | null
+}
+
+export interface UseRuntimeAlignmentReturn {
+  updateAvailable: Readonly<Ref<boolean>>
+  nextRevision: Readonly<Ref<string | null>>
+  observe: (response: RuntimeRevisionResponse | unknown) => void
+  reload: () => void
+  recoverMissingChunk: () => void
+}
+
+function browserStorage(): RuntimeStorage | null {
+  try {
+    return globalThis.sessionStorage ?? null
+  } catch {
+    return null
+  }
+}
+
+function browserEventTarget(): RuntimeEventTarget | null {
+  return typeof globalThis.window === 'undefined' ? null : globalThis.window
+}
+
+function browserVisibilityTarget(): RuntimeVisibilityTarget | null {
+  return typeof globalThis.document === 'undefined' ? null : globalThis.document
+}
+
+function responseRevision(response: RuntimeRevisionResponse | unknown): string | null {
+  if (!response || typeof response !== 'object') return null
+  const value = (response as RuntimeRevisionResponse).frontend_revision
+  return typeof value === 'string' && value ? value : null
+}
+
+/** Keep a loaded MINT frontend aligned with the backend revision serving its scope. */
+export function useRuntimeAlignment(
+  options: RuntimeAlignmentOptions = {},
+): UseRuntimeAlignmentReturn {
+  const storage = options.storage === undefined ? browserStorage() : options.storage
+  const eventTarget = options.eventTarget === undefined ? browserEventTarget() : options.eventTarget
+  const visibilityTarget = options.visibilityTarget === undefined
+    ? browserVisibilityTarget()
+    : options.visibilityTarget
+  const visibility = options.visibility ?? (() => globalThis.document?.visibilityState ?? 'visible')
+  const currentUrl = options.currentUrl ?? (() => globalThis.location?.href ?? '/')
+  const replace = options.replace ?? ((url: string) => globalThis.location?.replace(url))
+  const initialRevision = computed(() => toValue(options.currentRevision) ?? null)
+  const baselineRevision = ref<string | null>(initialRevision.value)
+  const nextRevision = ref<string | null>(null)
+  const updateAvailable = computed(() => nextRevision.value !== null)
+  let wasHidden = false
+
+  function reloadTo(revision: string, guardKind: 'revision' | 'chunk'): void {
+    const guardKey = `${RUNTIME_RELOAD_KEY_PREFIX}${guardKind}:${revision}`
+    const url = new URL(currentUrl(), globalThis.location?.origin ?? 'http://localhost')
+    if (url.searchParams.get(REVISION_QUERY_KEY) === revision) return
+    if (inMemoryReloadGuards.has(guardKey)) return
+    try {
+      if (storage?.getItem(guardKey)) {
+        inMemoryReloadGuards.add(guardKey)
+        return
+      }
+      storage?.setItem(guardKey, '1')
+    } catch {
+      // A blocked sessionStorage must not block recovery.
+    }
+    inMemoryReloadGuards.add(guardKey)
+    url.searchParams.set(REVISION_QUERY_KEY, revision)
+    replace(url.toString())
+  }
+
+  function observe(response: RuntimeRevisionResponse | unknown): void {
+    const revision = responseRevision(response)
+    if (!revision) return
+    const current = initialRevision.value ?? baselineRevision.value
+    if (!current) {
+      baselineRevision.value = revision
+      return
+    }
+    if (revision === current) {
+      wasHidden = false
+      return
+    }
+    if (wasHidden || visibility() === 'hidden') {
+      wasHidden = false
+      reloadTo(revision, 'revision')
+      return
+    }
+    nextRevision.value = revision
+  }
+
+  function reload(): void {
+    if (nextRevision.value) reloadTo(nextRevision.value, 'revision')
+  }
+
+  function recoverMissingChunk(): void {
+    reloadTo(baselineRevision.value ?? initialRevision.value ?? 'unknown', 'chunk')
+  }
+
+  function handlePreloadError(event: Event): void {
+    event.preventDefault()
+    recoverMissingChunk()
+  }
+
+  function handleVisibilityChange(): void {
+    if (visibility() === 'hidden') wasHidden = true
+  }
+
+  onMounted(() => {
+    eventTarget?.addEventListener('vite:preloadError', handlePreloadError)
+    visibilityTarget?.addEventListener('visibilitychange', handleVisibilityChange)
+  })
+  onScopeDispose(() => {
+    eventTarget?.removeEventListener('vite:preloadError', handlePreloadError)
+    visibilityTarget?.removeEventListener('visibilitychange', handleVisibilityChange)
+  })
+
+  return {
+    updateAvailable: readonly(updateAvailable),
+    nextRevision: readonly(nextRevision),
+    observe,
+    reload,
+    recoverMissingChunk,
+  }
+}
+
+/** Read the revision injected into the HTML that started this browser tab. */
+export function getInjectedFrontendRevision(): string | null {
+  if (typeof globalThis.window === 'undefined') return null
+  const runtimeWindow = globalThis.window as typeof globalThis.window & {
+    __MINT_FRONTEND_REVISION__?: string
+    __MINT_PLATFORM__?: { plugin?: { frontend_revision?: string } }
+  }
+  return runtimeWindow.__MINT_PLATFORM__?.plugin?.frontend_revision
+    ?? runtimeWindow.__MINT_FRONTEND_REVISION__
+    ?? null
+}

package/src/composables/useSampleGroups.ts

@@ -0,0 +1,211 @@
+import { computed, toValue, type ComputedRef, type Ref } from 'vue'
+import type { SampleGroup } from '../types'
+import { deriveShade } from '../utils/color'
+import { splitSampleGroupPath } from '../utils/sampleGroupPath'
+
+export type SampleGroupSource<T> =
+  | T
+  | Ref<T>
+  | ComputedRef<T>
+  | (() => T)
+
+export interface DisplaySampleSubGroup extends SampleGroup {
+  displayColor: string
+  displayBg: string
+  displayBorder: string
+}
+
+export interface SampleMajorGroup {
+  name: string
+  color: string
+  subGroups: DisplaySampleSubGroup[]
+  allSamples: string[]
+}
+
+/**
+ * One node of the sample-group display hierarchy. Interior nodes are path
+ * prefixes of the group names (`Liver`, `Liver / High`); leaves carry the
+ * concrete group. A group's `name` stays the full path on its leaf because
+ * every mutation — drag, delete, colour, selection — resolves groups by name.
+ */
+export interface SampleGroupNode {
+  /** Unique across the tree; use for `:key` and expansion state. */
+  key: string
+  /** This node's own path segment, not the full path. */
+  label: string
+  color: string
+  displayBg: string
+  displayBorder: string
+  /** Every sample beneath this node, in group order. */
+  allSamples: string[]
+  /** Empty for leaves. */
+  children: SampleGroupNode[]
+  /** Present only on leaves. */
+  group?: DisplaySampleSubGroup
+}
+
+export interface UseSampleGroupsOptions {
+  groups: SampleGroupSource<readonly SampleGroup[]>
+  samples?: SampleGroupSource<readonly string[]>
+  separator?: SampleGroupSource<string | null | undefined>
+  fallbackColor?: SampleGroupSource<string | null | undefined>
+}
+
+export interface UseSampleGroupsReturn {
+  groups: ComputedRef<SampleGroup[]>
+  separator: ComputedRef<string>
+  /** Full N-layer display hierarchy; one level per group-name segment. */
+  groupTree: ComputedRef<SampleGroupNode[]>
+  /** Deepest layer count across the tree (1 when groups are flat). */
+  maxDepth: ComputedRef<number>
+  hierarchicalGroups: ComputedRef<SampleMajorGroup[]>
+  showHierarchy: ComputedRef<boolean>
+  groupedSamples: ComputedRef<Set<string>>
+  ungroupedSamples: ComputedRef<string[]>
+  findGroup: (groupName: string) => SampleGroup | undefined
+  getGroupColor: (groupName: string) => string
+}
+
+/** Shared sample-group hierarchy, color, and ungrouped-sample derivation for lab selectors. */
+export function useSampleGroups(options: UseSampleGroupsOptions): UseSampleGroupsReturn {
+  const groups = computed(() => [...toValue(options.groups)])
+  const samples = computed(() => [...(toValue(options.samples) ?? [])])
+  const fallbackColor = computed(() => toValue(options.fallbackColor) || '#3B82F6')
+  const separator = computed(() => {
+    const explicit = toValue(options.separator)
+    if (explicit) return explicit
+    return groups.value.some(group => group.name.includes('/')) ? '/' : '_'
+  })
+
+  // Groups are bucketed by their first segment (the major/family), then each
+  // family is expanded into a full prefix tree. Shades are assigned per family
+  // across its leaves so a family keeps one hue with a light→dark gradient,
+  // exactly as the two-level model did.
+  const families = computed(() => {
+    const byMajor = new Map<string, SampleGroup[]>()
+    for (const group of groups.value) {
+      const majorName = getMajorGroupName(group.name, separator.value)
+      const existing = byMajor.get(majorName)
+      if (existing) existing.push(group)
+      else byMajor.set(majorName, [group])
+    }
+    return [...byMajor.entries()].map(([name, members]) => {
+      const color = members[0]?.color || fallbackColor.value
+      return {
+        name,
+        color,
+        subGroups: members.map((group, index) => {
+          const displayColor = deriveShade(color, index, members.length)
+          return {
+            ...group,
+            displayColor,
+            displayBg: displayColor + '20',
+            displayBorder: displayColor + '40',
+          }
+        }),
+      }
+    })
+  })
+
+  const groupTree = computed<SampleGroupNode[]>(() => {
+    const roots: SampleGroupNode[] = []
+
+    for (const family of families.value) {
+      // Interior nodes are shared by path so siblings collapse into one parent;
+      // leaves are keyed separately so a group whose full path equals an
+      // interior path (e.g. "Liver" alongside "Liver / High") stays reachable
+      // instead of being swallowed by the prefix node.
+      const interior = new Map<string, SampleGroupNode>()
+
+      for (const subGroup of family.subGroups) {
+        const segments = splitSampleGroupPath(subGroup.name, separator.value)
+        const leafLabel = segments[segments.length - 1] ?? subGroup.name
+        let siblings = roots
+        let path = ''
+
+        for (const segment of segments.slice(0, -1)) {
+          path = path ? `${path}/${segment}` : segment
+          let node = interior.get(path)
+          if (!node) {
+            node = {
+              key: `node:${family.name}/${path}`,
+              label: segment,
+              color: family.color,
+              displayBg: family.color + '20',
+              displayBorder: family.color + '40',
+              allSamples: [],
+              children: [],
+            }
+            interior.set(path, node)
+            siblings.push(node)
+          }
+          node.allSamples.push(...subGroup.samples)
+          siblings = node.children
+        }
+
+        siblings.push({
+          key: `leaf:${subGroup.name}`,
+          label: leafLabel,
+          color: subGroup.displayColor,
+          displayBg: subGroup.displayBg,
+          displayBorder: subGroup.displayBorder,
+          allSamples: [...subGroup.samples],
+          children: [],
+          group: subGroup,
+        })
+      }
+    }
+
+    return roots
+  })
+
+  const maxDepth = computed(() => {
+    const depthOf = (nodes: SampleGroupNode[]): number =>
+      nodes.reduce((deepest, node) => Math.max(deepest, 1 + depthOf(node.children)), 0)
+    return depthOf(groupTree.value)
+  })
+
+  const hierarchicalGroups = computed<SampleMajorGroup[]>(() =>
+    families.value.map(family => ({
+      name: family.name,
+      color: family.color,
+      subGroups: family.subGroups,
+      allSamples: family.subGroups.flatMap(group => group.samples),
+    })),
+  )
+
+  const showHierarchy = computed(() => maxDepth.value > 1)
+
+  const groupedSamples = computed(() =>
+    new Set(groups.value.flatMap(group => group.samples))
+  )
+
+  const ungroupedSamples = computed(() =>
+    samples.value.filter(sample => !groupedSamples.value.has(sample))
+  )
+
+  function findGroup(groupName: string): SampleGroup | undefined {
+    return groups.value.find(group => group.name === groupName)
+  }
+
+  function getGroupColor(groupName: string): string {
+    return findGroup(groupName)?.color || fallbackColor.value
+  }
+
+  return {
+    groups,
+    separator,
+    groupTree,
+    maxDepth,
+    hierarchicalGroups,
+    showHierarchy,
+    groupedSamples,
+    ungroupedSamples,
+    findGroup,
+    getGroupColor,
+  }
+}
+
+function getMajorGroupName(groupName: string, separator: string): string {
+  return splitSampleGroupPath(groupName, separator)[0]
+}

package/src/composables/useScheduleCalendarLayout.ts

@@ -0,0 +1,287 @@
+import { computed, type Ref } from 'vue'
+import type {
+  ScheduleView,
+  ScheduleEvent,
+  ScheduleBlockedSlot,
+  ScheduleEventStatus,
+} from '../types/components'
+import { formatTime } from './useTimeUtils'
+
+type ReadableRef<T> = Readonly<Ref<T>>
+
+export const SCHEDULE_SLOT_HEIGHT = 40
+
+export interface UseScheduleCalendarLayoutOptions {
+  currentView: ReadableRef<ScheduleView>
+  currentDate: ReadableRef<Date>
+  now: ReadableRef<Date>
+  events: ReadableRef<readonly ScheduleEvent[]>
+  blockedSlots: ReadableRef<readonly ScheduleBlockedSlot[]>
+  dayStartHour: ReadableRef<number>
+  dayEndHour: ReadableRef<number>
+  slotDuration: ReadableRef<number>
+  weekStartsOn: ReadableRef<0 | 1>
+  locale: ReadableRef<string>
+  showNowIndicator: ReadableRef<boolean>
+  slotHeight?: ReadableRef<number>
+}
+
+/** Builds ScheduleCalendar date ranges, event layout styles, and display labels. */
+export function useScheduleCalendarLayout(options: UseScheduleCalendarLayoutOptions) {
+  const slotHeight = computed(() => options.slotHeight?.value ?? SCHEDULE_SLOT_HEIGHT)
+  const totalSlots = computed(() => {
+    return ((options.dayEndHour.value - options.dayStartHour.value) * 60) / options.slotDuration.value
+  })
+
+  const timeLabels = computed(() => buildTimeLabels(
+    options.dayStartHour.value,
+    options.slotDuration.value,
+    totalSlots.value,
+  ))
+  const weekDays = computed(() => buildWeekDays(options.currentDate.value, options.weekStartsOn.value))
+  const visibleDays = computed(() => {
+    if (options.currentView.value === 'day') return [options.currentDate.value]
+    if (options.currentView.value === 'week') return weekDays.value
+    return []
+  })
+  const headerTitle = computed(() => buildHeaderTitle(
+    options.currentView.value,
+    options.currentDate.value,
+    weekDays.value,
+    options.locale.value,
+  ))
+  const monthDays = computed(() => buildMonthDays(options.currentDate.value, options.weekStartsOn.value))
+  const monthWeekdayLabels = computed(() => buildMonthWeekdayLabels(
+    options.locale.value,
+    options.weekStartsOn.value,
+  ))
+
+  function isToday(date: Date): boolean {
+    return isSameDay(date, options.now.value)
+  }
+
+  function getEventStyle(event: ScheduleEvent, dayDate: Date): Record<string, string> | null {
+    return getTimedItemStyle(
+      event.start,
+      event.end,
+      dayDate,
+      options.dayStartHour.value,
+      options.dayEndHour.value,
+      options.slotDuration.value,
+      slotHeight.value,
+      true,
+      slotHeight.value / 2,
+    )
+  }
+
+  function getBlockedStyle(slot: ScheduleBlockedSlot): Record<string, string> {
+    return getTimedItemStyle(
+      slot.start,
+      slot.end,
+      new Date(slot.start),
+      options.dayStartHour.value,
+      options.dayEndHour.value,
+      options.slotDuration.value,
+      slotHeight.value,
+      false,
+      0,
+    ) ?? { top: '0px', height: '0px' }
+  }
+
+  function getNowIndicatorStyle(): Record<string, string> | null {
+    if (!options.showNowIndicator.value) return null
+    const nowMin = dateToMinutes(options.now.value)
+    const dayStartMin = options.dayStartHour.value * 60
+    const dayEndMin = options.dayEndHour.value * 60
+    if (nowMin < dayStartMin || nowMin > dayEndMin) return null
+
+    const pixelsPerMin = slotHeight.value / options.slotDuration.value
+    return { top: `${(nowMin - dayStartMin) * pixelsPerMin}px` }
+  }
+
+  function getEventsForDay(day: Date): ScheduleEvent[] {
+    return eventsForDate(options.events.value, day)
+  }
+
+  function getEventsForDate(date: Date): ScheduleEvent[] {
+    return eventsForDate(options.events.value, date)
+  }
+
+  function getBlockedForDay(day: Date): ScheduleBlockedSlot[] {
+    return options.blockedSlots.value.filter((slot) => isSameDay(new Date(slot.start), day))
+  }
+
+  return {
+    totalSlots,
+    timeLabels,
+    weekDays,
+    visibleDays,
+    headerTitle,
+    monthDays,
+    monthWeekdayLabels,
+    isToday,
+    isSameDay,
+    getEventStyle,
+    getEventsForDay,
+    getEventsForDate,
+    getBlockedForDay,
+    getBlockedStyle,
+    getNowIndicatorStyle,
+    getStatusClass,
+    getMonthStatusClass,
+    formatEventTime,
+  }
+}
+
+export function parseScheduleModelDate(value?: Date | string): Date {
+  if (!value) return new Date()
+  if (value instanceof Date) return value
+  const d = new Date(value)
+  return isNaN(d.getTime()) ? new Date() : d
+}
+
+export function getWeekStart(date: Date, weekStartsOn: 0 | 1): Date {
+  const d = new Date(date)
+  const day = d.getDay()
+  const diff = (day - weekStartsOn + 7) % 7
+  d.setDate(d.getDate() - diff)
+  return d
+}
+
+export function isSameDay(a: Date, b: Date): boolean {
+  return a.toDateString() === b.toDateString()
+}
+
+function buildTimeLabels(dayStartHour: number, slotDuration: number, totalSlots: number): string[] {
+  const labels: string[] = []
+  for (let i = 0; i <= totalSlots; i++) {
+    const totalMinutes = dayStartHour * 60 + i * slotDuration
+    const hour = Math.floor(totalMinutes / 60)
+    const minute = totalMinutes % 60
+    labels.push(formatTime(hour, minute, '24h'))
+  }
+  return labels
+}
+
+function buildWeekDays(currentDate: Date, weekStartsOn: 0 | 1): Date[] {
+  const days: Date[] = []
+  const start = getWeekStart(currentDate, weekStartsOn)
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(start)
+    d.setDate(d.getDate() + i)
+    days.push(d)
+  }
+  return days
+}
+
+function buildHeaderTitle(
+  view: ScheduleView,
+  currentDate: Date,
+  weekDays: Date[],
+  locale: string,
+): string {
+  if (view === 'day') {
+    return currentDate.toLocaleDateString(locale, {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    })
+  }
+  if (view === 'week') {
+    const first = weekDays[0]
+    const last = weekDays[6]
+    const sameMonth = first.getMonth() === last.getMonth()
+    if (sameMonth) {
+      return `${first.toLocaleDateString(locale, { month: 'short', day: 'numeric' })} - ${last.getDate()}, ${last.getFullYear()}`
+    }
+    return `${first.toLocaleDateString(locale, { month: 'short', day: 'numeric' })} - ${last.toLocaleDateString(locale, { month: 'short', day: 'numeric' })}, ${last.getFullYear()}`
+  }
+  return currentDate.toLocaleDateString(locale, { year: 'numeric', month: 'long' })
+}
+
+function buildMonthDays(currentDate: Date, weekStartsOn: 0 | 1): { date: Date; isCurrentMonth: boolean }[] {
+  const year = currentDate.getFullYear()
+  const month = currentDate.getMonth()
+  const firstDay = new Date(year, month, 1)
+  const lastDay = new Date(year, month + 1, 0)
+  const days: { date: Date; isCurrentMonth: boolean }[] = []
+
+  let startPadding = firstDay.getDay() - weekStartsOn
+  if (startPadding < 0) startPadding += 7
+
+  for (let i = startPadding - 1; i >= 0; i--) {
+    days.push({ date: new Date(year, month, -i), isCurrentMonth: false })
+  }
+
+  for (let i = 1; i <= lastDay.getDate(); i++) {
+    days.push({ date: new Date(year, month, i), isCurrentMonth: true })
+  }
+
+  const remaining = 42 - days.length
+  for (let i = 1; i <= remaining; i++) {
+    days.push({ date: new Date(year, month + 1, i), isCurrentMonth: false })
+  }
+
+  return days
+}
+
+function buildMonthWeekdayLabels(locale: string, weekStartsOn: 0 | 1): string[] {
+  const labels: string[] = []
+  const base = new Date(2024, 0, weekStartsOn === 1 ? 1 : 7)
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(base)
+    d.setDate(d.getDate() + i)
+    labels.push(d.toLocaleDateString(locale, { weekday: 'short' }))
+  }
+  return labels
+}
+
+function getTimedItemStyle(
+  startValue: string,
+  endValue: string,
+  dayDate: Date,
+  dayStartHour: number,
+  dayEndHour: number,
+  slotDuration: number,
+  slotHeight: number,
+  requireSameDayEdge: boolean,
+  minimumHeight: number,
+): Record<string, string> | null {
+  const start = new Date(startValue)
+  const end = new Date(endValue)
+  if (requireSameDayEdge && !isSameDay(start, dayDate) && !isSameDay(end, dayDate)) return null
+
+  const dayStartMin = dayStartHour * 60
+  const startMin = Math.max(dateToMinutes(start), dayStartMin) - dayStartMin
+  const endMin = Math.min(dateToMinutes(end), dayEndHour * 60) - dayStartMin
+  const pixelsPerMin = slotHeight / slotDuration
+  return {
+    top: `${startMin * pixelsPerMin}px`,
+    height: `${Math.max((endMin - startMin) * pixelsPerMin, minimumHeight)}px`,
+  }
+}
+
+function eventsForDate(events: readonly ScheduleEvent[], date: Date): ScheduleEvent[] {
+  return events.filter((event) => isSameDay(new Date(event.start), date))
+}
+
+function dateToMinutes(date: Date): number {
+  return date.getHours() * 60 + date.getMinutes()
+}
+
+function getStatusClass(status?: ScheduleEventStatus): string {
+  if (!status) return 'mint-schedule__event--confirmed'
+  return `mint-schedule__event--${status}`
+}
+
+function getMonthStatusClass(status?: ScheduleEventStatus): string {
+  if (!status) return 'mint-schedule__month-event--confirmed'
+  return `mint-schedule__month-event--${status}`
+}
+
+function formatEventTime(event: ScheduleEvent): string {
+  const start = new Date(event.start)
+  const end = new Date(event.end)
+  return `${formatTime(start.getHours(), start.getMinutes())} - ${formatTime(end.getHours(), end.getMinutes())}`
+}