fix(calendar): remove overlay swap and keep in-place zoom flow

frontend/app/components/workspace/CrmWorkspaceApp.vue

@@ -2309,7 +2309,6 @@ onBeforeUnmount(() => {
     clearInterval(lifecycleClock);
     lifecycleClock = null;
   }
-  clearCalendarZoomOverlay();
   clearCalendarZoomPrime();
 });
 
@@ -2319,7 +2318,7 @@ const selectedDateKey = ref(dayKey(new Date()));
 
 const sortedEvents = computed(() => [...calendarEvents.value].sort((a, b) => a.start.localeCompare(b.start)));
 const focusedCalendarEvent = computed(() => {
-  const id = focusedCalendarEventId.value.trim();
+  const id = (focusedCalendarEventId.value ?? "").trim();
   if (!id) return null;
   return sortedEvents.value.find((event) => event.id === id) ?? null;
 });
@@ -2356,15 +2355,10 @@ const calendarViewOptions: { value: CalendarView; label: string }[] = [
 
 type CalendarHierarchyView = "year" | "month" | "week" | "day";
 type CalendarRect = { left: number; top: number; width: number; height: number };
-type CalendarZoomGhost = {
-  title: string;
-  subtitle?: string;
-};
 
 const calendarContentWrapRef = ref<HTMLElement | null>(null);
 const calendarContentScrollRef = ref<HTMLElement | null>(null);
 const calendarSceneRef = ref<HTMLElement | null>(null);
-const calendarZoomOverlayRef = ref<HTMLElement | null>(null);
 const calendarHoveredMonthIndex = ref<number | null>(null);
 const calendarHoveredWeekStartKey = ref("");
 const calendarHoveredDayKey = ref("");
@@ -2381,10 +2375,6 @@ function setCalendarSceneRef(element: HTMLElement | null) {
   calendarSceneRef.value = element;
 }
 
-function setCalendarZoomOverlayRef(element: HTMLElement | null) {
-  calendarZoomOverlayRef.value = element;
-}
-
 function setCalendarHoveredMonthIndex(value: number | null) {
   calendarHoveredMonthIndex.value = value;
 }
@@ -2403,14 +2393,6 @@ function onCalendarSceneMouseLeave() {
   calendarHoveredDayKey.value = "";
   clearCalendarZoomPrime();
 }
-const calendarZoomOverlay = ref<{ active: boolean } & CalendarRect>({
-  active: false,
-  left: 0,
-  top: 0,
-  width: 0,
-  height: 0,
-});
-const calendarZoomGhost = ref<CalendarZoomGhost | null>(null);
 const calendarZoomBusy = ref(false);
 const calendarCameraState = ref({
   active: false,
@@ -2426,8 +2408,6 @@ let calendarWheelLockUntil = 0;
 let calendarZoomPrimeTimer: ReturnType<typeof setTimeout> | null = null;
 let calendarZoomPrimeLastAt = 0;
 const CALENDAR_ZOOM_DURATION_MS = 2400;
-const CALENDAR_ZOOM_FOCUS_MS = 1400;
-const CALENDAR_ZOOM_REVEAL_MS = Math.max(500, CALENDAR_ZOOM_DURATION_MS - CALENDAR_ZOOM_FOCUS_MS);
 const CALENDAR_ZOOM_PRIME_STEPS = 2;
 const CALENDAR_ZOOM_PRIME_MAX_SCALE = 1.05;
 const CALENDAR_ZOOM_PRIME_RESET_MS = 900;
@@ -2437,12 +2417,6 @@ const normalizedCalendarView = computed<CalendarHierarchyView>(() =>
   calendarView.value === "agenda" ? "month" : calendarView.value,
 );
 const calendarZoomLevelIndex = computed(() => Math.max(0, calendarZoomOrder.indexOf(normalizedCalendarView.value)));
-const calendarZoomOverlayStyle = computed(() => ({
-  left: `${calendarZoomOverlay.value.left}px`,
-  top: `${calendarZoomOverlay.value.top}px`,
-  width: `${calendarZoomOverlay.value.width}px`,
-  height: `${calendarZoomOverlay.value.height}px`,
-}));
 const calendarSceneTransformStyle = computed(() => {
   if (!calendarCameraState.value.active) return undefined;
   return {
@@ -2456,14 +2430,6 @@ const calendarSceneTransformStyle = computed(() => {
   };
 });
 
-function clearCalendarZoomOverlay() {
-  calendarZoomOverlay.value = {
-    ...calendarZoomOverlay.value,
-    active: false,
-  };
-  calendarZoomGhost.value = null;
-}
-
 function clearCalendarZoomPrime() {
   if (calendarZoomPrimeTimer) {
     clearTimeout(calendarZoomPrimeTimer);
@@ -2592,92 +2558,6 @@ function weekRowStartForDate(key: string) {
   return dayKey(date);
 }
 
-function zoomGhostForMonth(monthIndex: number): CalendarZoomGhost {
-  const item = yearMonths.value.find((entry) => entry.monthIndex === monthIndex);
-  if (!item) {
-    return {
-      title: new Intl.DateTimeFormat("en-US", { month: "long" }).format(new Date(calendarCursor.value.getFullYear(), monthIndex, 1)),
-      subtitle: "",
-    };
-  }
-  return {
-    title: item.label,
-    subtitle: `${item.count} events`,
-  };
-}
-
-function zoomGhostForWeek(startKey: string): CalendarZoomGhost {
-  const start = new Date(`${startKey}T00:00:00`);
-  const end = new Date(start);
-  end.setDate(start.getDate() + 6);
-  const row = monthRows.value.find((item) => item.startKey === startKey);
-  const count = row ? row.cells.reduce((sum, cell) => sum + cell.events.length, 0) : 0;
-  return {
-    title: `${formatDay(`${dayKey(start)}T00:00:00`)} - ${formatDay(`${dayKey(end)}T00:00:00`)}`,
-    subtitle: `${count} events`,
-  };
-}
-
-function zoomGhostForDay(dayKeyValue: string): CalendarZoomGhost {
-  const day = weekDays.value.find((entry) => entry.key === dayKeyValue);
-  if (!day) {
-    return {
-      title: formatDay(`${dayKeyValue}T00:00:00`),
-      subtitle: `${getEventsByDate(dayKeyValue).length} events`,
-    };
-  }
-  return {
-    title: `${day.label} ${day.day}`,
-    subtitle: `${day.events.length} events`,
-  };
-}
-
-function zoomGhostForCurrentView(): CalendarZoomGhost {
-  if (calendarView.value === "day") {
-    return {
-      title: formatDay(`${selectedDateKey.value}T00:00:00`),
-      subtitle: `${selectedDayEvents.value.length} events`,
-    };
-  }
-  if (calendarView.value === "week") {
-    return {
-      title: calendarPeriodLabel.value,
-      subtitle: `${weekDays.value.reduce((sum, day) => sum + day.events.length, 0)} events`,
-    };
-  }
-  if (calendarView.value === "month" || calendarView.value === "agenda") {
-    return {
-      title: monthLabel.value,
-      subtitle: `${monthCells.value.reduce((sum, cell) => sum + cell.events.length, 0)} events`,
-    };
-  }
-  return {
-    title: String(calendarCursor.value.getFullYear()),
-    subtitle: `${sortedEvents.value.filter((event) => new Date(event.start).getFullYear() === calendarCursor.value.getFullYear()).length} events`,
-  };
-}
-
-function primeCalendarRect(rect: CalendarRect) {
-  clearCalendarZoomOverlay();
-  calendarZoomOverlay.value = {
-    active: true,
-    left: rect.left,
-    top: rect.top,
-    width: rect.width,
-    height: rect.height,
-  };
-}
-
-function morphCalendarRect(toRect: CalendarRect) {
-  calendarZoomOverlay.value = {
-    active: true,
-    left: toRect.left,
-    top: toRect.top,
-    width: toRect.width,
-    height: toRect.height,
-  };
-}
-
 function nextAnimationFrame() {
   return new Promise<void>((resolve) => {
     requestAnimationFrame(() => resolve());
@@ -2745,50 +2625,13 @@ async function resetCalendarCamera() {
   };
 }
 
-async function flushCalendarZoomStartFrame() {
-  await nextTick();
-  await nextAnimationFrame();
-  calendarZoomOverlayRef.value?.getBoundingClientRect();
-  await nextAnimationFrame();
-}
-
-function waitCalendarZoomTransition() {
-  const overlay = calendarZoomOverlayRef.value;
-  if (!overlay) {
-    return new Promise<void>((resolve) => {
-      setTimeout(() => resolve(), CALENDAR_ZOOM_DURATION_MS);
-    });
-  }
-  return new Promise<void>((resolve) => {
-    let settled = false;
-    const finish = () => {
-      if (settled) return;
-      settled = true;
-      overlay.removeEventListener("transitionend", onTransitionEnd);
-      clearTimeout(fallbackTimer);
-      resolve();
-    };
-    const onTransitionEnd = (event: TransitionEvent) => {
-      if (event.target !== overlay) return;
-      if (!["left", "top", "width", "height"].includes(event.propertyName)) return;
-      finish();
-    };
-    const fallbackTimer = setTimeout(() => finish(), CALENDAR_ZOOM_DURATION_MS + 140);
-    overlay.addEventListener("transitionend", onTransitionEnd);
-  });
-}
-
 async function animateCalendarZoomIn(
   sourceElement: HTMLElement | null,
-  ghost: CalendarZoomGhost,
   apply: () => void,
-  resolveRevealTarget?: () => HTMLElement | null,
 ) {
   clearCalendarZoomPrime();
   calendarZoomBusy.value = true;
-  clearCalendarZoomOverlay();
   try {
-    calendarZoomGhost.value = ghost;
     const fromRect = getElementRectInScene(sourceElement) ?? fallbackZoomOriginRectInScene();
     const cameraTarget = fromRect ? cameraTransformForRect(fromRect) : null;
     if (!cameraTarget) {
@@ -2810,36 +2653,21 @@ async function animateCalendarZoomIn(
       left: cameraTarget.left,
       top: cameraTarget.top,
       scale: cameraTarget.scale,
-      durationMs: CALENDAR_ZOOM_FOCUS_MS,
+      durationMs: CALENDAR_ZOOM_DURATION_MS,
     };
     await waitCalendarCameraTransition();
     apply();
     await nextTick();
-    const revealTargetElement = resolveRevealTarget ? resolveRevealTarget() : sourceElement;
-    const revealTargetRect = getElementRectInScene(revealTargetElement) ?? fallbackZoomOriginRectInScene();
-    const revealTarget = revealTargetRect ? cameraTransformForRect(revealTargetRect) : null;
-    if (revealTarget) {
-      calendarCameraState.value = {
-        active: true,
-        left: revealTarget.left,
-        top: revealTarget.top,
-        scale: revealTarget.scale,
-        durationMs: 0,
-      };
-      await nextTick();
-      await nextAnimationFrame();
-    }
     calendarCameraState.value = {
       active: true,
       left: 0,
       top: 0,
       scale: 1,
-      durationMs: CALENDAR_ZOOM_REVEAL_MS,
+      durationMs: 0,
     };
-    await waitCalendarCameraTransition();
+    await nextAnimationFrame();
   } finally {
     await resetCalendarCamera();
-    calendarZoomGhost.value = null;
     calendarZoomBusy.value = false;
   }
 }
@@ -2847,9 +2675,7 @@ async function animateCalendarZoomIn(
 async function animateCalendarZoomOut(apply: () => void, resolveTarget: () => HTMLElement | null) {
   clearCalendarZoomPrime();
   calendarZoomBusy.value = true;
-  clearCalendarZoomOverlay();
   try {
-    calendarZoomGhost.value = zoomGhostForCurrentView();
     apply();
     await nextTick();
     const targetRect = getElementRectInScene(resolveTarget()) ?? fallbackZoomOriginRectInScene();
@@ -2875,7 +2701,6 @@ async function animateCalendarZoomOut(apply: () => void, resolveTarget: () => HT
     await waitCalendarCameraTransition();
   } finally {
     await resetCalendarCamera();
-    calendarZoomGhost.value = null;
     calendarZoomBusy.value = false;
   }
 }
@@ -2923,9 +2748,9 @@ async function zoomInCalendar(event?: Event) {
       queryCalendarElement(`[data-calendar-month-index="${monthIndex}"]`) ??
       queryCalendarElement("[data-calendar-month-index]");
     if (maybePrimeWheelZoom(wheelEvent, calendarPrimeMonthToken(monthIndex))) return;
-    await animateCalendarZoomIn(sourceElement, zoomGhostForMonth(monthIndex), () => {
+    await animateCalendarZoomIn(sourceElement, () => {
       openYearMonth(monthIndex);
-    }, () => queryCalendarElement(`[data-calendar-month-index="${monthIndex}"]`));
+    });
     return;
   }
 
@@ -2938,16 +2763,9 @@ async function zoomInCalendar(event?: Event) {
       queryCalendarElement("[data-calendar-week-start-key]") ??
       queryCalendarElement("[data-calendar-day-key]");
     if (maybePrimeWheelZoom(wheelEvent, calendarPrimeWeekToken(rowStartKey))) return;
-    await animateCalendarZoomIn(
-      sourceElement,
-      zoomGhostForWeek(rowStartKey),
-      () => {
-        openWeekView(anchorDayKey);
-      },
-      () =>
-        queryCalendarElement(`[data-calendar-week-start-key="${rowStartKey}"]`) ??
-        queryCalendarElement(`[data-calendar-day-key="${anchorDayKey}"]`),
-    );
+    await animateCalendarZoomIn(sourceElement, () => {
+      openWeekView(anchorDayKey);
+    });
     return;
   }
 
@@ -2955,21 +2773,16 @@ async function zoomInCalendar(event?: Event) {
     const dayAnchor = resolveDayAnchor(wheelEvent);
     const sourceElement = queryCalendarElement(`[data-calendar-day-key="${dayAnchor}"]`) ?? queryCalendarElement("[data-calendar-day-key]");
     if (maybePrimeWheelZoom(wheelEvent, calendarPrimeDayToken(dayAnchor))) return;
-    await animateCalendarZoomIn(sourceElement, zoomGhostForDay(dayAnchor), () => {
+    await animateCalendarZoomIn(sourceElement, () => {
       openDayView(dayAnchor);
-    }, () => queryCalendarElement(`[data-calendar-day-key="${dayAnchor}"]`));
+    });
   }
 }
 
 async function zoomToMonth(monthIndex: number) {
-  await animateCalendarZoomIn(
-    queryCalendarElement(`[data-calendar-month-index="${monthIndex}"]`),
-    zoomGhostForMonth(monthIndex),
-    () => {
-      openYearMonth(monthIndex);
-    },
-    () => queryCalendarElement(`[data-calendar-month-index="${monthIndex}"]`),
-  );
+  await animateCalendarZoomIn(queryCalendarElement(`[data-calendar-month-index="${monthIndex}"]`), () => {
+    openYearMonth(monthIndex);
+  });
 }
 
 async function zoomOutCalendar() {
@@ -4950,10 +4763,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
               :week-days="weekDays"
               :calendar-prime-day-token="calendarPrimeDayToken"
               :selected-day-events="selectedDayEvents"
-              :calendar-zoom-overlay="calendarZoomOverlay"
-              :set-calendar-zoom-overlay-ref="setCalendarZoomOverlayRef"
-              :calendar-zoom-overlay-style="calendarZoomOverlayStyle"
-              :calendar-zoom-ghost="calendarZoomGhost"
             />
 
 

frontend/app/components/workspace/calendar/CrmCalendarPanel.vue

@@ -79,10 +79,6 @@ defineProps<{
   weekDays: WeekDay[];
   calendarPrimeDayToken: (dayKey: string) => string;
   selectedDayEvents: CalendarEvent[];
-  calendarZoomOverlay: { active: boolean };
-  setCalendarZoomOverlayRef: (element: HTMLDivElement | null) => void;
-  calendarZoomOverlayStyle: Record<string, string>;
-  calendarZoomGhost: { title: string; subtitle?: string } | null;
 }>();
 </script>
 
@@ -199,134 +195,116 @@ defineProps<{
                 {{ formatDay(item.first.start) }} · {{ item.first.title }}
               </button>
 
-              <div
-                v-if="item.monthIndex === calendarCursorMonth && (calendarView === 'month' || calendarView === 'agenda')"
-                class="mt-3 space-y-1"
-              >
-                <div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60">
-                  <span>Sun</span>
-                  <span>Mon</span>
-                  <span>Tue</span>
-                  <span>Wed</span>
-                  <span>Thu</span>
-                  <span>Fri</span>
-                  <span>Sat</span>
-                </div>
+              <div v-if="item.monthIndex === calendarCursorMonth" class="mt-3">
+                <div v-show="calendarView === 'month' || calendarView === 'agenda'" class="space-y-1">
+                  <div class="grid grid-cols-7 gap-1 text-center text-xs font-semibold text-base-content/60">
+                    <span>Sun</span>
+                    <span>Mon</span>
+                    <span>Tue</span>
+                    <span>Wed</span>
+                    <span>Thu</span>
+                    <span>Fri</span>
+                    <span>Sat</span>
+                  </div>
 
-                <div class="space-y-1">
-                  <div
-                    v-for="row in monthRows"
-                    :key="row.key"
-                    class="group relative calendar-hover-targetable"
-                    :class="[
-                      calendarHoveredWeekStartKey === row.startKey ? 'calendar-hover-target' : '',
-                      calendarZoomPrimeToken === calendarPrimeWeekToken(row.startKey) ? 'calendar-zoom-prime-active' : '',
-                    ]"
-                    :style="calendarPrimeStyle(calendarPrimeWeekToken(row.startKey))"
-                    :data-calendar-week-start-key="row.startKey"
-                    @mouseenter="setCalendarHoveredWeekStartKey(row.startKey)"
-                  >
-                    <div class="grid grid-cols-7 gap-1">
-                      <button
-                        v-for="cell in row.cells"
-                        :key="cell.key"
-                        class="group relative min-h-24 rounded-lg border p-1 text-left"
-                        :class="[
-                          cell.inMonth ? 'border-base-300 bg-base-100' : 'border-base-200 bg-base-200/40 text-base-content/40',
-                          selectedDateKey === cell.key ? 'border-primary bg-primary/5' : '',
-                          monthCellHasFocusedEvent(cell.events) ? 'border-success/60 bg-success/10' : '',
-                        ]"
-                        :data-calendar-day-key="cell.key"
-                        @mouseenter="setCalendarHoveredDayKey(cell.key)"
-                        @click="pickDate(cell.key)"
-                      >
-                        <p class="mb-1 text-xs font-semibold">{{ cell.day }}</p>
+                  <div class="space-y-1">
+                    <div
+                      v-for="row in monthRows"
+                      :key="row.key"
+                      class="group relative calendar-hover-targetable"
+                      :class="[
+                        calendarHoveredWeekStartKey === row.startKey ? 'calendar-hover-target' : '',
+                        calendarZoomPrimeToken === calendarPrimeWeekToken(row.startKey) ? 'calendar-zoom-prime-active' : '',
+                      ]"
+                      :style="calendarPrimeStyle(calendarPrimeWeekToken(row.startKey))"
+                      :data-calendar-week-start-key="row.startKey"
+                      @mouseenter="setCalendarHoveredWeekStartKey(row.startKey)"
+                    >
+                      <div class="grid grid-cols-7 gap-1">
                         <button
-                          v-for="event in monthCellEvents(cell.events)"
-                          :key="event.id"
-                          class="block w-full truncate rounded px-1 text-left text-[10px] text-base-content/70 transition hover:underline"
-                          :class="isReviewHighlightedEvent(event.id) ? 'bg-success/20 text-success-content ring-1 ring-success/40' : ''"
-                          @click.stop="openThreadFromCalendarItem(event)"
+                          v-for="cell in row.cells"
+                          :key="cell.key"
+                          class="group relative min-h-24 rounded-lg border p-1 text-left"
+                          :class="[
+                            cell.inMonth ? 'border-base-300 bg-base-100' : 'border-base-200 bg-base-200/40 text-base-content/40',
+                            selectedDateKey === cell.key ? 'border-primary bg-primary/5' : '',
+                            monthCellHasFocusedEvent(cell.events) ? 'border-success/60 bg-success/10' : '',
+                          ]"
+                          :data-calendar-day-key="cell.key"
+                          @mouseenter="setCalendarHoveredDayKey(cell.key)"
+                          @click="pickDate(cell.key)"
                         >
-                          {{ formatTime(event.start) }} {{ event.title }}
+                          <p class="mb-1 text-xs font-semibold">{{ cell.day }}</p>
+                          <button
+                            v-for="event in monthCellEvents(cell.events)"
+                            :key="event.id"
+                            class="block w-full truncate rounded px-1 text-left text-[10px] text-base-content/70 transition hover:underline"
+                            :class="isReviewHighlightedEvent(event.id) ? 'bg-success/20 text-success-content ring-1 ring-success/40' : ''"
+                            @click.stop="openThreadFromCalendarItem(event)"
+                          >
+                            {{ formatTime(event.start) }} {{ event.title }}
+                          </button>
                         </button>
-                      </button>
+                      </div>
                     </div>
                   </div>
                 </div>
-              </div>
 
-              <div
-                v-else-if="item.monthIndex === calendarCursorMonth && calendarView === 'week'"
-                class="mt-3 calendar-week-scroll overflow-x-auto pb-1"
-              >
-                <div class="calendar-week-grid">
-                  <article
-                    v-for="day in weekDays"
-                    :key="day.key"
-                    class="group relative flex min-h-[18rem] flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
-                    :class="[
-                      selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
-                      calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
-                      calendarZoomPrimeToken === calendarPrimeDayToken(day.key) ? 'calendar-zoom-prime-active' : '',
-                    ]"
-                    :style="calendarPrimeStyle(calendarPrimeDayToken(day.key))"
-                    :data-calendar-day-key="day.key"
-                    @mouseenter="setCalendarHoveredDayKey(day.key)"
-                    @click="pickDate(day.key)"
-                  >
-                    <div class="mb-2 flex items-start justify-between gap-2">
-                      <p class="text-sm font-semibold leading-tight">{{ day.label }} {{ day.day }}</p>
-                    </div>
-                    <div class="space-y-1.5">
-                      <button
-                        v-for="event in day.events"
-                        :key="event.id"
-                        class="block w-full rounded-md px-2 py-1.5 text-left text-xs"
-                        :class="isReviewHighlightedEvent(event.id) ? 'bg-success/20 ring-1 ring-success/45' : 'bg-base-200 hover:bg-base-300/80'"
-                        @click.stop="openThreadFromCalendarItem(event)"
-                      >
-                        {{ formatTime(event.start) }} - {{ event.title }} ({{ event.contact }})
-                      </button>
-                      <p v-if="day.events.length === 0" class="pt-1 text-xs text-base-content/50">No events</p>
-                    </div>
-                  </article>
+                <div v-show="calendarView === 'week'" class="calendar-week-scroll overflow-x-auto pb-1">
+                  <div class="calendar-week-grid">
+                    <article
+                      v-for="day in weekDays"
+                      :key="day.key"
+                      class="group relative flex min-h-[18rem] flex-col rounded-xl border border-base-300 bg-base-100 p-2.5 cursor-zoom-in calendar-hover-targetable"
+                      :class="[
+                        selectedDateKey === day.key ? 'border-primary bg-primary/5' : '',
+                        calendarHoveredDayKey === day.key ? 'calendar-hover-target' : '',
+                        calendarZoomPrimeToken === calendarPrimeDayToken(day.key) ? 'calendar-zoom-prime-active' : '',
+                      ]"
+                      :style="calendarPrimeStyle(calendarPrimeDayToken(day.key))"
+                      :data-calendar-day-key="day.key"
+                      @mouseenter="setCalendarHoveredDayKey(day.key)"
+                      @click="pickDate(day.key)"
+                    >
+                      <div class="mb-2 flex items-start justify-between gap-2">
+                        <p class="text-sm font-semibold leading-tight">{{ day.label }} {{ day.day }}</p>
+                      </div>
+                      <div class="space-y-1.5">
+                        <button
+                          v-for="event in day.events"
+                          :key="event.id"
+                          class="block w-full rounded-md px-2 py-1.5 text-left text-xs"
+                          :class="isReviewHighlightedEvent(event.id) ? 'bg-success/20 ring-1 ring-success/45' : 'bg-base-200 hover:bg-base-300/80'"
+                          @click.stop="openThreadFromCalendarItem(event)"
+                        >
+                          {{ formatTime(event.start) }} - {{ event.title }} ({{ event.contact }})
+                        </button>
+                        <p v-if="day.events.length === 0" class="pt-1 text-xs text-base-content/50">No events</p>
+                      </div>
+                    </article>
+                  </div>
                 </div>
-              </div>
 
-              <div
-                v-else-if="item.monthIndex === calendarCursorMonth && calendarView === 'day'"
-                class="mt-3 space-y-2"
-              >
-                <button
-                  v-for="event in selectedDayEvents"
-                  :key="event.id"
-                  class="block w-full rounded-xl border border-base-300 p-3 text-left transition hover:bg-base-200/60"
-                  :class="isReviewHighlightedEvent(event.id) ? 'border-success/60 bg-success/10' : ''"
-                  @click="openThreadFromCalendarItem(event)"
-                >
-                  <p class="font-medium">{{ event.title }}</p>
-                  <p class="text-xs text-base-content/60">{{ event.contact }}</p>
-                  <p class="text-xs text-base-content/60">{{ formatTime(event.start) }} - {{ formatTime(event.end) }}</p>
-                  <p class="mt-1 text-sm text-base-content/80">{{ event.note }}</p>
-                </button>
-                <p v-if="selectedDayEvents.length === 0" class="text-sm text-base-content/60">No events on this day.</p>
+                <div v-show="calendarView === 'day'" class="space-y-2">
+                  <button
+                    v-for="event in selectedDayEvents"
+                    :key="event.id"
+                    class="block w-full rounded-xl border border-base-300 p-3 text-left transition hover:bg-base-200/60"
+                    :class="isReviewHighlightedEvent(event.id) ? 'border-success/60 bg-success/10' : ''"
+                    @click="openThreadFromCalendarItem(event)"
+                  >
+                    <p class="font-medium">{{ event.title }}</p>
+                    <p class="text-xs text-base-content/60">{{ event.contact }}</p>
+                    <p class="text-xs text-base-content/60">{{ formatTime(event.start) }} - {{ formatTime(event.end) }}</p>
+                    <p class="mt-1 text-sm text-base-content/80">{{ event.note }}</p>
+                  </button>
+                  <p v-if="selectedDayEvents.length === 0" class="text-sm text-base-content/60">No events on this day.</p>
+                </div>
               </div>
             </article>
           </div>
         </div>
       </div>
-      <div
-        v-if="calendarZoomOverlay.active"
-        :ref="setCalendarZoomOverlayRef"
-        class="calendar-zoom-overlay"
-        :style="calendarZoomOverlayStyle"
-      >
-        <div v-if="calendarZoomGhost" class="calendar-zoom-overlay-content">
-          <p class="calendar-zoom-overlay-title">{{ calendarZoomGhost.title }}</p>
-          <p v-if="calendarZoomGhost.subtitle" class="calendar-zoom-overlay-subtitle">{{ calendarZoomGhost.subtitle }}</p>
-        </div>
-      </div>
     </div>
   </section>
 </template>
@@ -492,44 +470,6 @@ defineProps<{
   background: color-mix(in oklab, var(--color-base-content) 85%, transparent);
 }
 
-.calendar-zoom-overlay {
-  position: absolute;
-  z-index: 18;
-  border: 1px solid color-mix(in oklab, var(--color-primary) 62%, transparent);
-  border-radius: 14px;
-  background:
-    radial-gradient(circle at 20% 20%, color-mix(in oklab, var(--color-primary) 30%, transparent), transparent 55%),
-    color-mix(in oklab, var(--color-base-100) 84%, transparent);
-  box-shadow:
-    0 0 0 1px color-mix(in oklab, var(--color-primary) 42%, transparent) inset,
-    0 18px 38px rgba(18, 30, 58, 0.28);
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.calendar-zoom-overlay-content {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  gap: 4px;
-  padding: 14px;
-  color: color-mix(in oklab, var(--color-base-content) 90%, transparent);
-}
-
-.calendar-zoom-overlay-title {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.calendar-zoom-overlay-subtitle {
-  margin: 0;
-  font-size: 11px;
-  opacity: 0.72;
-}
-
 @media (max-width: 960px) {
   .calendar-content-wrap {
     padding-left: 32px;