@luckydye/calendar 1.3.2 → 1.4.0

package/src/layers/GridLayer.ts

@@ -11,6 +11,7 @@ export function createGridLayer(): CalendarLayer {
 				width,
 				height,
 				scrollTop,
+				scrollLeft,
 				dayWidth,
 				dayHeight,
 				leftGutterWidth,
@@ -34,22 +35,18 @@ export function createGridLayer(): CalendarLayer {
 				);
 				if (todayIndex >= 0) {
 					const { row, col } = getDayVisualPosition(todayIndex);
-					const x = leftGutterWidth + col * dayWidth;
+					const x = leftGutterWidth + col * dayWidth - scrollLeft;
 					const dayY = week.yOffset + row * dayHeight - scrollTop;
-					ctx.fillStyle =
-						styles["--bg-today"] || "rgba(255, 255, 255, 0.05)";
+					ctx.fillStyle = styles["--bg-today"] || "rgba(255, 255, 255, 0.05)";
 					ctx.fillRect(x, dayY, dayWidth, dayHeight);
 
 					if (showTimeScale) {
 						const now = new Date();
-						const currentMinutes =
-							now.getHours() * 60 + now.getMinutes();
-						const timeY =
-							dayY + (currentMinutes / 1440) * dayHeight;
+						const currentMinutes = now.getHours() * 60 + now.getMinutes();
+						const timeY = dayY + (currentMinutes / 1440) * dayHeight;
 						if (timeY >= 0 && timeY <= height) {
 							ctx.strokeStyle =
-								styles["--accent-current-time"] ||
-								"rgba(255, 0, 0, 0.8)";
+								styles["--accent-current-time"] || "rgba(255, 0, 0, 0.8)";
 							ctx.lineWidth = 1;
 							ctx.beginPath();
 							ctx.moveTo(x, timeY);
@@ -62,19 +59,29 @@ export function createGridLayer(): CalendarLayer {
 			}
 
 			// Draw grid lines
-			const gridColor =
-				styles["--grid-color"] || "rgba(255, 255, 255, 0.1)";
+			const gridColor = styles["--grid-color"] || "rgba(255, 255, 255, 0.1)";
+			const textMuted = styles["--text-muted"] || "rgba(255, 255, 255, 0.4)";
 			ctx.strokeStyle = gridColor;
 			ctx.lineWidth = 1;
 
 			// Vertical lines (day separators)
+			const hourLabelOpacity = Math.max(
+				0,
+				Math.min(1, (dayHeight - 300) / 300),
+			);
+			ctx.strokeStyle =
+				hourLabelOpacity > 0.1
+					? textMuted.replace(/[\d.]+\)$/, `${0.2 * hourLabelOpacity})`)
+					: gridColor;
 			for (let i = 1; i <= columnsPerRow; i++) {
-				const x = leftGutterWidth + i * dayWidth;
+				const x = leftGutterWidth + i * dayWidth - scrollLeft;
 				ctx.beginPath();
 				ctx.moveTo(x, 0);
 				ctx.lineTo(x, height);
 				ctx.stroke();
 			}
+			ctx.strokeStyle = gridColor;
+			ctx.lineWidth = 1;
 
 			// Horizontal lines (week separators) and left gutter content
 			for (let i = 0; i < visibleWeeks.length; i++) {
@@ -93,8 +100,7 @@ export function createGridLayer(): CalendarLayer {
 					if (hiddenWeeks > 0) {
 						const gapY = y;
 						const gridColorStrong =
-							styles["--grid-color-strong"] ||
-							"rgba(255, 255, 255, 0.3)";
+							styles["--grid-color-strong"] || "rgba(255, 255, 255, 0.3)";
 						ctx.strokeStyle = gridColorStrong;
 						ctx.lineWidth = 1;
 						ctx.setLineDash([4, 4]);
@@ -105,43 +111,29 @@ export function createGridLayer(): CalendarLayer {
 						ctx.setLineDash([]);
 
 						const textMuted =
-							styles["--text-muted"] ||
-							"rgba(255, 255, 255, 0.4)";
+							styles["--text-muted"] || "rgba(255, 255, 255, 0.4)";
 						ctx.fillStyle = textMuted;
 						ctx.textAlign = "center";
-						const ellipsisText = `⋯ ${hiddenWeeks} week${hiddenWeeks > 1 ? "s" : ""}`;
+						const ellipsisText = `⋯ ${hiddenWeeks} week${
+							hiddenWeeks > 1 ? "s" : ""
+						}`;
 
-						const textWidth =
-							ctx.measureText(ellipsisText).width;
+						const textWidth = ctx.measureText(ellipsisText).width;
 						const pillPadding = 8;
 						const pillX =
-							(leftGutterWidth + width) / 2 -
-							textWidth / 2 -
-							pillPadding;
+							(leftGutterWidth + width) / 2 - textWidth / 2 - pillPadding;
 						const pillY = gapY - 8;
 						const pillWidth = textWidth + pillPadding * 2;
 						const pillHeight = 16;
 
-						const bgPrimary =
-							styles["--bg-primary"] ||
-							"rgba(30, 30, 30, 0.9)";
+						const bgPrimary = styles["--bg-primary"] || "rgba(30, 30, 30, 0.9)";
 						ctx.fillStyle = bgPrimary;
 						ctx.beginPath();
-						ctx.roundRect(
-							pillX,
-							pillY,
-							pillWidth,
-							pillHeight,
-							8,
-						);
+						ctx.roundRect(pillX, pillY, pillWidth, pillHeight, 8);
 						ctx.fill();
 
 						ctx.fillStyle = textMuted;
-						ctx.fillText(
-							ellipsisText,
-							(leftGutterWidth + width) / 2,
-							gapY + 4,
-						);
+						ctx.fillText(ellipsisText, (leftGutterWidth + width) / 2, gapY + 4);
 					}
 				}
 
@@ -164,25 +156,10 @@ export function createGridLayer(): CalendarLayer {
 				}
 
 				// Left gutter: hour lines and labels
-				const hourLabelOpacity = Math.max(
-					0,
-					Math.min(1, (dayHeight - 300) / 300),
-				);
-
-				ctx.font = `500 11px ${fontFamily}`;
-				ctx.textBaseline = "bottom";
-				ctx.textAlign = "right";
-
-				const textMuted =
-					styles["--text-muted"] || "rgba(255, 255, 255, 0.4)";
 				ctx.strokeStyle = gridColor.replace(
 					/[\d.]+\)$/,
 					`${0.05 * hourLabelOpacity})`,
 				);
-				ctx.fillStyle = textMuted.replace(
-					/[\d.]+\)$/,
-					`${0.4 * hourLabelOpacity})`,
-				);
 
 				for (let row = 0; row < rowsPerWeek; row++) {
 					const rowY = y + row * dayHeight;
@@ -193,70 +170,6 @@ export function createGridLayer(): CalendarLayer {
 							ctx.moveTo(leftGutterWidth, hourY);
 							ctx.lineTo(width, hourY);
 							ctx.stroke();
-
-							if (hourLabelOpacity > 0.1) {
-								const label = `${hour.toString().padStart(2, "0")}:00`;
-								ctx.fillText(label, 48, hourY + 4);
-							}
-						}
-					}
-				}
-
-				// Current time indicator in left gutter
-				if (hourLabelOpacity > 0.1) {
-					const todayIndex = week.days.findIndex((d) =>
-						CalendarInternal.isSameDay(d, today),
-					);
-
-					if (todayIndex >= 0) {
-						const { row } = getDayVisualPosition(todayIndex);
-						const currentMinutes =
-							today.getHours() * 60 + today.getMinutes();
-						const timeY =
-							y +
-							row * dayHeight +
-							(currentMinutes / 1440) * dayHeight;
-
-						if (timeY >= 0 && timeY <= height) {
-							const hours = today
-								.getHours()
-								.toString()
-								.padStart(2, "0");
-							const minutes = today
-								.getMinutes()
-								.toString()
-								.padStart(2, "0");
-							const timeText = `${hours}:${minutes}`;
-
-							ctx.save();
-							ctx.textAlign = "right";
-							ctx.textBaseline = "middle";
-
-							const textWidth =
-								ctx.measureText(timeText).width;
-							const bgPaddingX = 6;
-							const textX = 48;
-							const textY = timeY;
-
-							const bgElevated =
-								styles["--bg-elevated"] ||
-								"rgba(0, 0, 0, 0.7)";
-							ctx.fillStyle = bgElevated;
-							ctx.beginPath();
-							ctx.roundRect(
-								textX - textWidth - bgPaddingX,
-								textY - 8,
-								textWidth + bgPaddingX * 2,
-								16,
-								4,
-							);
-							ctx.fill();
-
-							ctx.fillStyle =
-								styles["--text-primary"] ||
-								"rgba(255, 255, 255, 1)";
-							ctx.fillText(timeText, textX, textY);
-							ctx.restore();
 						}
 					}
 				}
@@ -268,28 +181,35 @@ export function createGridLayer(): CalendarLayer {
 				);
 				const textMutedForWeek =
 					styles["--text-muted"] || "rgba(255, 255, 255, 0.4)";
-				ctx.fillStyle = textMutedForWeek.replace(
-					/[\d.]+\)$/,
-					`${0.4 * weekNumberOpacity})`,
+				const isCurrentWeek = week.days.some((day) =>
+					CalendarInternal.isSameDay(day, today),
 				);
+				ctx.save();
+				ctx.font = `500 11px ${fontFamily}`;
+				ctx.textBaseline = "middle";
+				ctx.fillStyle = isCurrentWeek
+					? "rgba(255, 255, 255, 1)"
+					: textMutedForWeek.replace(
+							/[\d.]+\)$/,
+							`${0.4 * weekNumberOpacity})`,
+					  );
 				ctx.textAlign = "center";
 				const label = `W${week.weekNumber}`;
 				const weekTop = y;
 				const weekBottom = y + week.height;
+				const topClearance = 52;
 				const labelY = Math.max(
-					14,
-					Math.min(
-						weekTop + week.height / 2 + 4,
-						weekBottom - 4,
-					),
+					topClearance,
+					Math.min(weekTop + week.height / 2 + 4, weekBottom - 4),
 				);
 				if (
-					labelY >= Math.max(0, weekTop + 4) &&
+					labelY >= Math.max(topClearance, weekTop + 4) &&
 					labelY <= Math.min(height, weekBottom) &&
 					weekNumberOpacity > 0.1
 				) {
 					ctx.fillText(label, 30, labelY);
 				}
+				ctx.restore();
 			}
 		},
 	};

package/src/layers/TimeseriesHeatmapLayer.ts

@@ -2,131 +2,134 @@ import type { CalendarEvent, WeekInfo } from "../CalendarInternal.js";
 import type { CalendarLayer, LayerContext } from "../CalendarLayer.js";
 
 export interface HeatmapState {
-  events: CalendarEvent[];
+	events: CalendarEvent[];
 }
 
 function getBucketMinutes(dayHeight: number): number {
-  if (dayHeight >= 320) return 15;
-  if (dayHeight >= 240) return 30;
-  if (dayHeight >= 160) return 60;
-  return 120;
+	if (dayHeight >= 320) return 15;
+	if (dayHeight >= 240) return 30;
+	if (dayHeight >= 160) return 60;
+	return 120;
 }
 
 export function createTimeseriesHeatmapLayer(
-  state: HeatmapState,
+	state: HeatmapState,
 ): CalendarLayer {
-  return {
-    name: "timeseries-heatmap",
-    enabled: true,
-    render(lc: LayerContext): void {
-      const {
-        ctx,
-        height,
-        scrollTop,
-        dayWidth,
-        dayHeight,
-        leftGutterWidth,
-        visibleWeeks,
-        allWeeks,
-        getDayVisualPosition,
-      } = lc;
-
-      const events = state.events.filter(
-        (event) => event.visualStyle === "heatmap",
-      );
-      if (events.length === 0 || visibleWeeks.length === 0) return;
-
-      const dayInfoMap = new Map<
-        number,
-        {
-          week: WeekInfo;
-          weekIndex: number;
-          dayIndex: number;
-          row: number;
-          col: number;
-          dayStartMs: number;
-        }
-      >();
-
-      for (const week of visibleWeeks) {
-        const weekIndex = allWeeks.indexOf(week);
-        if (weekIndex < 0) continue;
-        for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
-          const day = week.days[dayIndex];
-          if (!day) continue;
-          const dayStart = new Date(day);
-          dayStart.setHours(0, 0, 0, 0);
-          const { row, col } = getDayVisualPosition(dayIndex);
-          dayInfoMap.set(dayStart.getTime(), {
-            week,
-            weekIndex,
-            dayIndex,
-            row,
-            col,
-            dayStartMs: dayStart.getTime(),
-          });
-        }
-      }
-
-      if (dayInfoMap.size === 0) return;
-
-      const bucketMinutes = getBucketMinutes(dayHeight);
-      const bucketCounts = new Map<
-        string,
-        { count: number; color: string; dayKey: number; bucket: number }
-      >();
-      let maxCount = 0;
-
-      for (const event of events) {
-        const start = event.start;
-        const dayStart = new Date(start);
-        dayStart.setHours(0, 0, 0, 0);
-        const dayKey = dayStart.getTime();
-        const dayInfo = dayInfoMap.get(dayKey);
-        if (!dayInfo) continue;
-
-        const minutesIntoDay = (start.getTime() - dayInfo.dayStartMs) / 60000;
-        if (minutesIntoDay < 0 || minutesIntoDay >= 1440) continue;
-
-        const bucket = Math.floor(minutesIntoDay / bucketMinutes);
-        const color = event.color || "rgba(255, 255, 255, 0.6)";
-        const key = `${dayKey}-${bucket}-${color}`;
-        const entry =
-          bucketCounts.get(key) ||
-          { count: 0, color, dayKey, bucket };
-        entry.count += 1;
-        bucketCounts.set(key, entry);
-        if (entry.count > maxCount) maxCount = entry.count;
-      }
-
-      if (maxCount === 0) return;
-
-      const bucketHeight =
-        (bucketMinutes / 1440) * dayHeight;
-      const minHeight = Math.max(2, bucketHeight);
-
-      for (const entry of bucketCounts.values()) {
-        const dayInfo = dayInfoMap.get(entry.dayKey);
-        if (!dayInfo) continue;
-
-        const intensity = Math.log(entry.count + 1) / Math.log(maxCount + 1);
-        const alpha = 0.08 + intensity * 0.22;
-
-        const x = leftGutterWidth + dayInfo.col * dayWidth + 1;
-        const y =
-          dayInfo.week.yOffset +
-          dayInfo.row * dayHeight +
-          (entry.bucket * bucketMinutes * dayHeight) / 1440 -
-          scrollTop;
-
-        if (y > height || y + minHeight < 0) continue;
-
-        ctx.globalAlpha = alpha;
-        ctx.fillStyle = entry.color;
-        ctx.fillRect(x, y, dayWidth - 2, minHeight);
-      }
-
-      ctx.globalAlpha = 1;
-    },
-  };
+	return {
+		name: "timeseries-heatmap",
+		enabled: true,
+		render(lc: LayerContext): void {
+			const {
+				ctx,
+				height,
+				scrollTop,
+				scrollLeft,
+				dayWidth,
+				dayHeight,
+				leftGutterWidth,
+				visibleWeeks,
+				allWeeks,
+				getDayVisualPosition,
+			} = lc;
+
+			const events = state.events.filter(
+				(event) => event.visualStyle === "heatmap",
+			);
+			if (events.length === 0 || visibleWeeks.length === 0) return;
+
+			const dayInfoMap = new Map<
+				number,
+				{
+					week: WeekInfo;
+					weekIndex: number;
+					dayIndex: number;
+					row: number;
+					col: number;
+					dayStartMs: number;
+				}
+			>();
+
+			for (const week of visibleWeeks) {
+				const weekIndex = allWeeks.indexOf(week);
+				if (weekIndex < 0) continue;
+				for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
+					const day = week.days[dayIndex];
+					if (!day) continue;
+					const dayStart = new Date(day);
+					dayStart.setHours(0, 0, 0, 0);
+					const { row, col } = getDayVisualPosition(dayIndex);
+					dayInfoMap.set(dayStart.getTime(), {
+						week,
+						weekIndex,
+						dayIndex,
+						row,
+						col,
+						dayStartMs: dayStart.getTime(),
+					});
+				}
+			}
+
+			if (dayInfoMap.size === 0) return;
+
+			const bucketMinutes = getBucketMinutes(dayHeight);
+			const bucketCounts = new Map<
+				string,
+				{ count: number; color: string; dayKey: number; bucket: number }
+			>();
+			let maxCount = 0;
+
+			for (const event of events) {
+				const start = event.start;
+				const dayStart = new Date(start);
+				dayStart.setHours(0, 0, 0, 0);
+				const dayKey = dayStart.getTime();
+				const dayInfo = dayInfoMap.get(dayKey);
+				if (!dayInfo) continue;
+
+				const minutesIntoDay = (start.getTime() - dayInfo.dayStartMs) / 60000;
+				if (minutesIntoDay < 0 || minutesIntoDay >= 1440) continue;
+
+				const bucket = Math.floor(minutesIntoDay / bucketMinutes);
+				const color = event.color || "rgba(255, 255, 255, 0.6)";
+				const key = `${dayKey}-${bucket}-${color}`;
+				const entry = bucketCounts.get(key) || {
+					count: 0,
+					color,
+					dayKey,
+					bucket,
+				};
+				entry.count += 1;
+				bucketCounts.set(key, entry);
+				if (entry.count > maxCount) maxCount = entry.count;
+			}
+
+			if (maxCount === 0) return;
+
+			const bucketHeight = (bucketMinutes / 1440) * dayHeight;
+			const minHeight = Math.max(2, bucketHeight);
+
+			for (const entry of bucketCounts.values()) {
+				const dayInfo = dayInfoMap.get(entry.dayKey);
+				if (!dayInfo) continue;
+
+				const intensity = Math.log(entry.count + 1) / Math.log(maxCount + 1);
+				const alpha = 0.08 + intensity * 0.22;
+
+				const x = leftGutterWidth + dayInfo.col * dayWidth - scrollLeft + 1;
+				const y =
+					dayInfo.week.yOffset +
+					dayInfo.row * dayHeight +
+					(entry.bucket * bucketMinutes * dayHeight) / 1440 -
+					scrollTop;
+
+				if (y > height || y + minHeight < 0) continue;
+
+				ctx.globalAlpha = alpha;
+				ctx.fillStyle = entry.color;
+				ctx.fillRect(x, y, dayWidth - 2, minHeight);
+			}
+
+			ctx.globalAlpha = 1;
+		},
+	};
 }

package/src/service-worker.js

@@ -109,8 +109,9 @@ async function getScheduledNotifications() {
 		request.onsuccess = () => {
 			const notifications = request.result || [];
 			// Sort by trigger time
-			notifications.sort((a, b) =>
-				new Date(a.triggerTime).getTime() - new Date(b.triggerTime).getTime()
+			notifications.sort(
+				(a, b) =>
+					new Date(a.triggerTime).getTime() - new Date(b.triggerTime).getTime(),
 			);
 			resolve(notifications);
 		};