@morscherlab/mint-sdk 1.0.0-rc.4 → 1.0.0-rc.6

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())}`
+}

package/src/styles/components/app-sidebar.css

@@ -6,7 +6,7 @@
   height: 100%;
   overflow: hidden;
   background-color: var(--bg-secondary);
-  transition: width 180ms ease;
+  transition: width 180ms ease, background-color 150ms ease;
 }
 
 .mint-sidebar--hidden {
@@ -54,6 +54,11 @@
   gap: 0.75rem;
 }
 
+.mint-sidebar--analysis.mint-sidebar--dense .mint-sidebar__sections {
+  padding: 0.75rem;
+  gap: 0.75rem;
+}
+
 /* Header / Footer slots */
 .mint-sidebar__header {
   padding: 0.75rem;
@@ -182,6 +187,107 @@
   gap: 0.5rem;
 }
 
+.mint-sidebar__collapsed--default {
+  padding-top: 0.75rem;
+}
+
+.mint-sidebar__rail-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: var(--radius-md);
+  color: var(--text-secondary);
+  background: transparent;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    transform 150ms ease;
+}
+
+.mint-sidebar__rail-item:hover {
+  background: var(--bg-tertiary);
+  transform: translateY(-1px);
+}
+
+.mint-sidebar__rail-item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.mint-sidebar__rail-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--radius-md);
+  transition: transform 150ms ease;
+}
+
+.mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
+  transform: scale(1.04);
+}
+
+.mint-sidebar__rail-svg {
+  width: 0.9375rem;
+  height: 0.9375rem;
+}
+
+.mint-sidebar__rail-text-icon {
+  font-size: 0.8125rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.mint-sidebar__rail-badge {
+  position: absolute;
+  top: -0.25rem;
+  right: -0.25rem;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: 9999px;
+  background: var(--mint-sidebar-rail-badge-color);
+  color: white;
+  font-size: 0.625rem;
+  font-weight: 700;
+  line-height: 1rem;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.mint-sidebar__rail-badge--primary {
+  --mint-sidebar-rail-badge-color: var(--color-primary);
+}
+
+.mint-sidebar__rail-badge--cta {
+  --mint-sidebar-rail-badge-color: var(--color-cta);
+}
+
+.mint-sidebar__rail-badge--success {
+  --mint-sidebar-rail-badge-color: var(--mint-success);
+}
+
+.mint-sidebar__rail-badge--warning {
+  --mint-sidebar-rail-badge-color: var(--mint-warning);
+}
+
+.mint-sidebar__rail-badge--error {
+  --mint-sidebar-rail-badge-color: var(--mint-error);
+}
+
+.mint-sidebar__rail-badge--info {
+  --mint-sidebar-rail-badge-color: var(--mint-info);
+}
+
+.mint-sidebar__rail-badge--neutral {
+  --mint-sidebar-rail-badge-color: var(--text-secondary);
+}
+
 /* Dense sidebar variant — compact sections */
 .mint-sidebar--dense .mint-sidebar__sections {
   padding: 0.5rem;
@@ -202,24 +308,29 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
+.mint-sidebar--analysis .mint-sidebar__sections > .mint-collapsible-card {
+  border-color: var(--border-color);
+  border-radius: var(--radius-lg);
+}
+
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__header {
   padding: 0.625rem 0.75rem;
   min-height: auto;
 }
 
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__icon-badge {
-  width: 2.25rem;
-  height: 2.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
   border-radius: var(--radius-md);
 }
 
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__icon {
-  width: 1.125rem;
-  height: 1.125rem;
+  width: 0.9375rem;
+  height: 0.9375rem;
 }
 
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__icon-text {
-  font-size: 1.125rem;
+  font-size: 0.9375rem;
 }
 
 .mint-sidebar__sections > .mint-collapsible-card .mint-collapsible-card__title {
@@ -262,3 +373,20 @@
   flex-direction: column;
   gap: 0.75rem;
 }
+
+.mint-sidebar__footer--collapsed {
+  padding: 0.5rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mint-sidebar,
+  .mint-sidebar__rail-item,
+  .mint-sidebar__rail-icon {
+    transition: none;
+  }
+
+  .mint-sidebar__rail-item:hover,
+  .mint-sidebar__rail-item:hover .mint-sidebar__rail-icon {
+    transform: none;
+  }
+}