feat: add session header styles and button for adding new sessions

Author: murdercode

src/managers/navigation-manager.js

@@ -1045,16 +1045,28 @@ export class NavigationManager {
 
         const offsetX = e.clientX - sessionRect.left;
 
+        // Create drag time tooltip
+        const dragTooltip = this.createDragTimeTooltip();
+        document.body.appendChild(dragTooltip);
+
         const handleMouseMove = (e) => {
             const x = e.clientX - timelineRect.left - offsetX;
             const percentage = Math.max(0, Math.min(100, (x / timelineRect.width) * 100));
             sessionElement.style.left = `${percentage}%`;
+            
+            // Update tooltip with current time
+            this.updateDragTooltip(dragTooltip, e, percentage, session);
         };
 
         const handleMouseUp = () => {
             sessionElement.classList.remove('dragging');
             document.removeEventListener('mousemove', handleMouseMove);
             document.removeEventListener('mouseup', handleMouseUp);
+            
+            // Remove tooltip
+            if (dragTooltip && dragTooltip.parentNode) {
+                dragTooltip.parentNode.removeChild(dragTooltip);
+            }
 
             // Update session time based on new position
             this.updateSessionTimeFromPosition(sessionElement, session);
@@ -1071,6 +1083,10 @@ export class NavigationManager {
         const timeline = document.getElementById('timeline-track');
         const timelineRect = timeline.getBoundingClientRect();
 
+        // Create resize time tooltip
+        const resizeTooltip = this.createDragTimeTooltip();
+        document.body.appendChild(resizeTooltip);
+
         const handleMouseMove = (e) => {
             const x = e.clientX - timelineRect.left;
             const percentage = Math.max(0, Math.min(100, (x / timelineRect.width) * 100));
@@ -1088,12 +1104,20 @@ export class NavigationManager {
                 const newWidth = Math.max(2, percentage - currentLeft); // Minimum 2% width
                 sessionElement.style.width = `${newWidth}%`;
             }
+            
+            // Update tooltip with current time range
+            this.updateResizeTooltip(resizeTooltip, e, sessionElement);
         };
 
         const handleMouseUp = () => {
             sessionElement.classList.remove('resizing');
             document.removeEventListener('mousemove', handleMouseMove);
             document.removeEventListener('mouseup', handleMouseUp);
+            
+            // Remove tooltip
+            if (resizeTooltip && resizeTooltip.parentNode) {
+                resizeTooltip.parentNode.removeChild(resizeTooltip);
+            }
 
             // Update session time based on new size and position
             this.updateSessionTimeFromPosition(sessionElement, session);
@@ -1263,6 +1287,82 @@ export class NavigationManager {
         this.currentTooltip = null;
     }
 
+    createDragTimeTooltip() {
+        const tooltip = document.createElement('div');
+        tooltip.className = 'drag-time-tooltip';
+        tooltip.style.cssText = `
+            position: fixed;
+            background: var(--shared-text);
+            color: var(--card-bg);
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-size: 0.85rem;
+            font-weight: 600;
+            white-space: nowrap;
+            z-index: 10000;
+            pointer-events: none;
+            box-shadow: 0 4px 12px var(--shared-border);
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        `;
+        return tooltip;
+    }
+
+    updateDragTooltip(tooltip, mouseEvent, percentage, session) {
+        // Calculate time from percentage
+        const timelineStartMinutes = 6 * 60; // 6 AM
+        const timelineRangeMinutes = 16 * 60; // 16 hours (6 AM to 10 PM)
+        const widthPercent = parseFloat(session.duration) / timelineRangeMinutes * 100;
+        
+        const startMinutes = timelineStartMinutes + (percentage / 100) * timelineRangeMinutes;
+        const endMinutes = startMinutes + (session.duration || 25); // Default 25 min if no duration
+        
+        const startHour = Math.floor(startMinutes / 60);
+        const startMin = Math.round(startMinutes % 60);
+        const endHour = Math.floor(endMinutes / 60);
+        const endMin = Math.round(endMinutes % 60);
+        
+        const startTime = `${startHour.toString().padStart(2, '0')}:${startMin.toString().padStart(2, '0')}`;
+        const endTime = `${endHour.toString().padStart(2, '0')}:${endMin.toString().padStart(2, '0')}`;
+        
+        tooltip.textContent = `${startTime} - ${endTime}`;
+        
+        // Position tooltip near mouse
+        tooltip.style.left = `${mouseEvent.clientX + 15}px`;
+        tooltip.style.top = `${mouseEvent.clientY - 35}px`;
+        tooltip.style.opacity = '1';
+    }
+
+    updateResizeTooltip(tooltip, mouseEvent, sessionElement) {
+        const leftPercent = parseFloat(sessionElement.style.left);
+        const widthPercent = parseFloat(sessionElement.style.width);
+        const rightPercent = leftPercent + widthPercent;
+
+        // Convert percentages to time (6 AM to 10 PM range)
+        const timelineStartMinutes = 6 * 60; // 6 AM
+        const timelineRangeMinutes = 16 * 60; // 16 hours
+
+        const startMinutes = timelineStartMinutes + (leftPercent / 100) * timelineRangeMinutes;
+        const endMinutes = timelineStartMinutes + (rightPercent / 100) * timelineRangeMinutes;
+        const durationMinutes = endMinutes - startMinutes;
+
+        const startHour = Math.floor(startMinutes / 60);
+        const startMin = Math.round(startMinutes % 60);
+        const endHour = Math.floor(endMinutes / 60);
+        const endMin = Math.round(endMinutes % 60);
+
+        const startTime = `${startHour.toString().padStart(2, '0')}:${startMin.toString().padStart(2, '0')}`;
+        const endTime = `${endHour.toString().padStart(2, '0')}:${endMin.toString().padStart(2, '0')}`;
+        const duration = `${Math.round(durationMinutes)}min`;
+
+        tooltip.textContent = `${startTime} - ${endTime} (${duration})`;
+
+        // Position tooltip near mouse
+        tooltip.style.left = `${mouseEvent.clientX + 15}px`;
+        tooltip.style.top = `${mouseEvent.clientY - 35}px`;
+        tooltip.style.opacity = '1';
+    }
+
     calculateSessionOffset(session, allSessions) {
         if (!allSessions || allSessions.length <= 1) return 0;
 

src/styles/calendar.css

@@ -572,4 +572,50 @@
   font-weight: 600;
 }
 
+/* Sessions Header Styles */
+.sessions-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
+.sessions-header h4 {
+  margin: 0;
+  color: var(--accent-color);
+  font-size: 0.95rem;
+  font-weight: 600;
+}
+
+.add-session-btn {
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: var(--accent-color);
+  color: var(--text-on-focus);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px var(--shared-border);
+}
+
+.add-session-btn:hover {
+  background: var(--focus-timer-color);
+  transform: scale(1.1);
+  box-shadow: 0 4px 8px var(--shared-border);
+}
+
+.add-session-btn:active {
+  transform: scale(0.95);
+}
+
+.add-session-btn svg {
+  width: 16px;
+  height: 16px;
+  stroke-width: 2.5;
+}
+
 /* Theme support is now handled through CSS variables in individual theme files */