feat: recurrence expansion.

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>

src/components/DaysView.vue

@@ -56,7 +56,7 @@
               @mouseenter="emit('event-hover', { event: $event, entity: segment.occurrence.entity })"
               @mouseleave="emit('event-hover-end')"
             >
-              <span v-if="segment.isStart" class="event-label">{{ segment.occurrence.entity.properties?.label || 'Untitled' }}</span>
+              <span v-if="segment.isStart" class="event-label">{{ segment.occurrence.label || 'Untitled' }}</span>
             </div>
           </div>
         </div>
@@ -85,10 +85,10 @@
                   <div class="event-time">
                     {{ formatOccurrenceTime(occurrence.startMs) }} - {{ formatOccurrenceTime(occurrence.endMs) }}
                   </div>
-                  <div class="event-title">{{ getEventProperties(occurrence.entity).label || 'Untitled' }}</div>
+                  <div class="event-title">{{ occurrence.label || 'Untitled' }}</div>
                 </template>
                 <template v-else>
-                  <div class="event-title-compact">{{ getEventProperties(occurrence.entity).label || 'Untitled' }}</div>
+                  <div class="event-title-compact">{{ occurrence.label || 'Untitled' }}</div>
                 </template>
               </div>
             </div>
@@ -110,7 +110,6 @@ import { shiftLocalDays } from '@/utils/dateRanges';
 import { DAYS_VIEW_SPANS, spanToDays, type DaysViewSpan } from '@/types/spans';
 import type { EntityObject } from '@ChronoManager/models/entity';
 import type { CollectionObject } from '@ChronoManager/models/collection';
-import { EventObject } from '@ChronoManager/models/event';
 import { occurrencesForDay, occurrencesForRange } from '@/utils/occurrenceIndex';
 import type { CalendarOccurrence, CalendarOccurrenceIndex } from '@/types/occurrence';
 
@@ -223,20 +222,15 @@ function getTimedEvents(date: Date): CalendarOccurrence[] {
   return occurrencesForDay(props.occurrenceIndex, date).filter(occurrence => !occurrence.timeless);
 }
 
-function getEventProperties(entity: CalendarEntity): EventObject {
-  return entity.properties as EventObject;
-}
-
-function getEventColor(entity: CalendarEntity): string {
-  const event = getEventProperties(entity);
-  if (event.color) return event.color;
-  const calendar = props.calendars.find(cal => cal.identifier === entity.collection);
+function getEventColor(occurrence: CalendarOccurrence): string {
+  if (occurrence.color) return occurrence.color;
+  const calendar = props.calendars.find(cal => cal.identifier === occurrence.entity.collection);
   return calendar?.properties?.color || '#1976D2';
 }
 
 function getAllDayEventStyle(segment: MultiDaySegment) {
   return {
-    backgroundColor: getEventColor(segment.occurrence.entity),
+    backgroundColor: getEventColor(segment.occurrence),
     left: `calc(${segment.startCol} / ${daysCount.value} * 100% + 4px)`,
     width: `calc(${segment.span} / ${daysCount.value} * 100% - 8px)`,
     top: `${segment.lane * ALL_DAY_EVENT_HEIGHT}px`,
@@ -251,7 +245,7 @@ function getEventStyle(occurrence: CalendarOccurrence) {
   return {
     top: `${(start / 1440) * 100}%`,
     height: `${(duration / 1440) * 100}%`,
-    backgroundColor: getEventColor(occurrence.entity),
+    backgroundColor: getEventColor(occurrence),
   };
 }