feat: cross-day drag, note icon, Google recurring fix, no popup on drag

- Fix Google recurring events missing isRecurring flag (recurringEventId
  was not mapped from Google API response)
- Add note icon (FileText) on events with descriptions, tooltip on hover
- Cross-day drag-and-drop: detect day column under cursor and shift date
- Fix event detail popup opening after drag/resize by setting ref before
  async operations
- Add data-date attribute to day columns for drag target detection
- Use CSS class for icon row layout to prevent overlap

v1.67.0

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-weekly-todo-list",
-  "version": "1.66.1",
+  "version": "1.67.0",
   "description": "A web-based weekly task management application that organizes to-dos and calendar events in a single, intuitive weekly view",
   "main": "index.js",
   "scripts": {

src/app/globals.css

@@ -3100,6 +3100,52 @@ h3 {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
+/* Event icons row (recurring, note, provider) */
+.event-icons-row {
+  position: absolute;
+  bottom: 2px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  opacity: 0.5;
+  z-index: 2;
+}
+
+.event-note-icon {
+  position: relative;
+  cursor: help;
+  display: flex;
+  align-items: center;
+}
+
+.event-note-icon::after {
+  content: attr(data-note);
+  position: absolute;
+  bottom: 100%;
+  right: 0;
+  background: var(--weekly-bg, #222);
+  color: var(--weekly-text, #fff);
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 0.7rem;
+  white-space: pre-wrap;
+  max-width: 220px;
+  max-height: 120px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.15s;
+  z-index: 100;
+  line-height: 1.3;
+}
+
+.event-note-icon:hover::after {
+  opacity: 1;
+}
+
+
 /* Make day columns scrollable when using time grid */
 .time-grid-wrapper .weekly-days-grid {
   flex: 1;

src/components/WeeklyView.tsx

@@ -2225,6 +2225,7 @@ export default function WeeklyView() {
         eventId: string;
         mode: 'move' | 'resize-top' | 'resize-bottom';
         startY: number;
+        startX: number;
         originalStartTime: string;
         originalEndTime: string;
         currentStartTime: string;
@@ -3731,6 +3732,7 @@ export default function WeeklyView() {
             eventId: event.id,
             mode,
             startY: e.clientY,
+            startX: e.clientX,
             originalStartTime: event.startTime,
             originalEndTime: event.endTime,
             currentStartTime: event.startTime,
@@ -3746,8 +3748,9 @@ export default function WeeklyView() {
 
         const handleMouseMove = (e: MouseEvent) => {
             const deltaY = e.clientY - eventDragState.startY;
+            const deltaX = e.clientX - eventDragState.startX;
             // Require minimum 3px movement to start actual drag
-            if (!eventDragState.hasMoved && Math.abs(deltaY) < 3) return;
+            if (!eventDragState.hasMoved && Math.abs(deltaY) < 3 && Math.abs(deltaX) < 3) return;
             if (!eventDragState.hasMoved) {
                 setEventDragState(prev => prev ? { ...prev, hasMoved: true } : null);
             }
@@ -3756,8 +3759,25 @@ export default function WeeklyView() {
             const origEnd = new Date(eventDragState.originalEndTime);
 
             if (eventDragState.mode === 'move') {
-                const newStart = new Date(origStart.getTime() + deltaMinutes * 60000);
+                // Detect day column under cursor for cross-day drag
-                const newEnd = new Date(origEnd.getTime() + deltaMinutes * 60000);
+                let dayOffset = 0;
+                const dayColumns = document.querySelectorAll('.weekly-day-column');
+                if (dayColumns.length > 0) {
+                    const origDate = `${origStart.getFullYear()}-${String(origStart.getMonth() + 1).padStart(2, '0')}-${String(origStart.getDate()).padStart(2, '0')}`;
+                    let origColIndex = -1;
+                    let hoverColIndex = -1;
+                    dayColumns.forEach((col, i) => {
+                        const rect = col.getBoundingClientRect();
+                        const colDate = col.getAttribute('data-date');
+                        if (colDate === origDate) origColIndex = i;
+                        if (e.clientX >= rect.left && e.clientX <= rect.right) hoverColIndex = i;
+                    });
+                    if (origColIndex >= 0 && hoverColIndex >= 0) {
+                        dayOffset = hoverColIndex - origColIndex;
+                    }
+                }
+                const newStart = new Date(origStart.getTime() + deltaMinutes * 60000 + dayOffset * 86400000);
+                const newEnd = new Date(origEnd.getTime() + deltaMinutes * 60000 + dayOffset * 86400000);
                 setEventDragState(prev => prev ? { ...prev, currentStartTime: newStart.toISOString(), currentEndTime: newEnd.toISOString() } : null);
             } else if (eventDragState.mode === 'resize-bottom') {
                 const newEnd = new Date(origEnd.getTime() + deltaMinutes * 60000);
@@ -3776,6 +3796,11 @@ export default function WeeklyView() {
             if (!eventDragState) return;
             const startChanged = eventDragState.currentStartTime !== eventDragState.originalStartTime;
             const endChanged = eventDragState.currentEndTime !== eventDragState.originalEndTime;
+            // Set drag-ended ref immediately (before async) to prevent click from opening popup
+            if (eventDragState.hasMoved) {
+                dragJustEndedRef.current = true;
+                setTimeout(() => { dragJustEndedRef.current = false; }, 300);
+            }
             if (eventDragState.hasMoved && (startChanged || endChanged)) {
                 // Optimistically update the UI
                 setRawCalendarEvents(prev => prev.map(ev =>
@@ -3811,12 +3836,7 @@ export default function WeeklyView() {
                     ));
                 }
             }
-            const didMove = eventDragState.hasMoved;
             setEventDragState(null);
-            if (didMove) {
-                dragJustEndedRef.current = true;
-                setTimeout(() => { dragJustEndedRef.current = false; }, 200);
-            }
         };
 
         document.addEventListener('mousemove', handleMouseMove);
@@ -7355,6 +7375,7 @@ export default function WeeklyView() {
                             <div
                                 key={date.toISOString()}
                                 className={`weekly-day-column ${date.getDay() === 6 ? "is-sat" : ""} ${date.getDay() === 0 ? "is-sun" : ""} ${isToday ? "is-today" : ""} ${isPast ? "is-past" : ""}`}
+                                data-date={`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`}
                             >
                                 {/* Day Header */}
                                 <header className="weekly-day-header" ref={colIndex === 0 ? dayHeaderRef : undefined}>
@@ -7775,17 +7796,13 @@ export default function WeeklyView() {
                                                                     </span>
                                                                 </div>
                                                                 <div className="event-time-row">{timeStr}</div>
-                                                                {(event.isRecurring || profile.showCalendarProviderIcon) && (
+                                                                {(event.isRecurring || event.description || profile.showCalendarProviderIcon) && (
-                                                                    <div style={{
+                                                                    <div className="event-icons-row">
-                                                                        position: "absolute",
+                                                                        {event.description && (
-                                                                        bottom: 2,
+                                                                            <span className="event-note-icon" data-note={event.description}>
-                                                                        right: 4,
+                                                                                <FileText size={11} />
-                                                                        display: "flex",
+                                                                            </span>
-                                                                        alignItems: "center",
+                                                                        )}
-                                                                        gap: 3,
-                                                                        opacity: 0.5,
-                                                                        pointerEvents: "none",
-                                                                    }}>
                                                                         {event.isRecurring && <Repeat size={11} />}
                                                                         {profile.showCalendarProviderIcon && (
                                                                             <img
@@ -7920,16 +7937,13 @@ export default function WeeklyView() {
                                                     >
                                                         {event.title}
                                                     </div>
-                                                    {(event.isRecurring || profile.showCalendarProviderIcon) && (
+                                                    {(event.isRecurring || event.description || profile.showCalendarProviderIcon) && (
-                                                        <div style={{
+                                                        <div className="event-icons-row">
-                                                            position: "absolute",
+                                                            {event.description && (
-                                                            bottom: 2,
+                                                                <span className="event-note-icon" data-note={event.description}>
-                                                            right: 4,
+                                                                    <FileText size={11} />
-                                                            display: "flex",
+                                                                </span>
-                                                            alignItems: "center",
+                                                            )}
-                                                            gap: 3,
-                                                            opacity: 0.5,
-                                                        }}>
                                                             {event.isRecurring && <Repeat size={11} />}
                                                             {profile.showCalendarProviderIcon && (
                                                                 <img

src/lib/google-calendar.ts

@@ -114,6 +114,7 @@ export const getUpcomingEvents = async (
       reminders: item.reminders,
       transparency: item.transparency,
       visibility: item.visibility,
+      recurringEventId: item.recurringEventId,
     })) || [];
   } catch (error) {
     console.error('Error fetching upcoming events:', error);