@luckydye/calendar 1.2.3 → 1.3.1

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@luckydye/calendar",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "author": "Tim Havlicek",
   "contributors": [],
   "description": "",
   "type": "module",
   "main": "dist/calendar.js",
-  "types": "src/calendar.ts",
+  "types": "src/lib.ts",
   "scripts": {
     "build:app": "APP=true bunx --bun vite build --outDir=dist/calendar --base=./",
     "build": "bunx --bun vite build",

package/src/CalDAVConfig.ts

@@ -44,7 +44,27 @@ interface InhouseSource extends CalendarSource {
   locked?: boolean;
 }
 
-type ConfigurableSource = CalDAVSourceConfig | ICalSource | GoogleSource | InhouseSource;
+interface TimeseriesJsonSource extends CalendarSource {
+  type: "timeseries-json";
+  credentials: {
+    url: string;
+  };
+  locked?: boolean;
+}
+
+type ConfigurableSource =
+  | CalDAVSourceConfig
+  | ICalSource
+  | GoogleSource
+  | InhouseSource
+  | TimeseriesJsonSource;
+
+interface SidebarCalendar {
+  id: string;
+  name: string;
+  color: string;
+  sourceId: string;
+}
 
 export class CalDAVConfigElement extends LitElement {
   static styles = css`
@@ -56,114 +76,164 @@ export class CalDAVConfigElement extends LitElement {
 
     .container {
       background: var(--bg-elevated, rgba(30, 30, 30, 0.95));
-      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
-      border-radius: var(--border-radius-lg, 8px);
-      padding: 16px;
+      padding: 12px;
       box-sizing: border-box;
-      min-width: 400px;
-      max-width: 500px;
       height: 100%;
     }
 
+    :host([collapsed]) .container {
+      padding: 8px 6px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
     .header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 16px;
-      padding-bottom: 12px;
-      border-bottom: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      margin-bottom: 12px;
+      width: 100%;
+    }
+
+    :host([collapsed]) .header {
+      justify-content: center;
+      margin-bottom: 8px;
     }
 
     .title {
-      font-size: 16px;
+      font-size: 11px;
       font-weight: 600;
-      color: var(--text-primary, rgba(255, 255, 255, 0.9));
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--text-muted, rgba(255, 255, 255, 0.4));
+    }
+
+    :host([collapsed]) .title {
+      display: none;
     }
 
-    .close-btn {
+    .collapse-btn {
       background: none;
       border: none;
-      color: var(--text-muted, rgba(255, 255, 255, 0.5));
-      font-size: 20px;
+      color: var(--text-muted, rgba(255, 255, 255, 0.4));
       cursor: pointer;
-      padding: 4px;
+      padding: 2px;
+      font-size: 12px;
       line-height: 1;
     }
 
-    .close-btn:hover {
+    .collapse-btn:hover {
       color: var(--text-primary, rgba(255, 255, 255, 0.9));
     }
 
     .sources-list {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: 0.25rem;
       margin-bottom: 16px;
       overflow-y: auto;
       max-height: calc(100% - 120px);
     }
 
-    .source-item {
-      flex: none;
-      background: var(--bg-item, rgba(255, 255, 255, 0.05));
-      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
-      border-radius: var(--border-radius, 6px);
-      padding: 12px;
-      overflow: hidden;
+    :host([collapsed]) .sources-list {
+      align-items: center;
+      gap: 4px;
+      margin-bottom: 0;
     }
 
-    .source-header {
+    .source-item {
+      flex: none;
       display: flex;
       align-items: center;
       gap: 8px;
-      margin-bottom: 8px;
+      padding: 6px 4px;
+      border-radius: var(--border-radius-sm, 4px);
+      cursor: pointer;
+    }
+
+    .source-item:hover {
+      background: var(--bg-item, rgba(255, 255, 255, 0.05));
+    }
+
+    :host([collapsed]) .source-item {
+      padding: 4px;
+      justify-content: center;
     }
 
     .source-color {
-      width: 12px;
-      height: 12px;
-      border-radius: var(--border-radius-sm, 2px);
+      width: 10px;
+      height: 10px;
+      border-radius: 2px;
       flex-shrink: 0;
     }
 
+    .source-color.disabled {
+      background: transparent !important;
+      box-shadow: inset 0 0 0 1.5px var(--source-color);
+    }
+
     .source-name {
       flex: 1;
-      font-weight: 500;
+      font-size: 13px;
       color: var(--text-primary, rgba(255, 255, 255, 0.9));
-      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :host([collapsed]) .source-name,
+    :host([collapsed]) .source-enabled,
+    :host([collapsed]) .add-btn,
+    :host([collapsed]) .empty-state {
+      display: none;
     }
 
     .source-enabled {
       cursor: pointer;
     }
 
-    .source-locked {
-      cursor: pointer;
-      margin-left: 8px;
+    .calendar-list {
+      display: flex;
+      flex-direction: column;
     }
 
-    .source-actions {
+    .calendar-item {
       display: flex;
+      align-items: center;
       gap: 8px;
+      padding: 4px 4px 4px 22px;
+      border-radius: var(--border-radius-sm, 4px);
+      cursor: pointer;
+      font-size: 12px;
+      color: var(--text-secondary, rgba(255, 255, 255, 0.7));
     }
 
-    .icon-btn {
-      background: none;
-      border: none;
-      color: var(--text-muted, rgba(255, 255, 255, 0.5));
-      cursor: pointer;
-      padding: 4px;
-      font-size: 14px;
-      line-height: 1;
+    .calendar-item:hover {
+      background: var(--bg-item, rgba(255, 255, 255, 0.05));
     }
 
-    .icon-btn:hover {
+    .calendar-item.active {
+      background: var(--bg-item, rgba(255, 255, 255, 0.08));
       color: var(--text-primary, rgba(255, 255, 255, 0.9));
+      font-weight: 500;
     }
 
-    .source-url {
-      font-size: 12px;
-      color: var(--text-muted, rgba(255, 255, 255, 0.4));
+    .calendar-color {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    .calendar-name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    :host([collapsed]) .calendar-list {
+      display: none;
     }
 
     .empty-state {
@@ -175,19 +245,19 @@ export class CalDAVConfigElement extends LitElement {
 
     .add-btn {
       width: 100%;
-      padding: 10px;
-      background: var(--bg-button-hover, rgba(255, 255, 255, 0.1));
-      border: 1px dashed var(--grid-color-hover, rgba(255, 255, 255, 0.3));
-      border-radius: var(--border-radius, 6px);
-      color: var(--text-secondary, rgba(255, 255, 255, 0.7));
+      padding: 6px;
+      background: none;
+      border: 1px dashed var(--grid-color, rgba(255, 255, 255, 0.15));
+      border-radius: var(--border-radius-sm, 4px);
+      color: var(--text-muted, rgba(255, 255, 255, 0.4));
       cursor: pointer;
-      font-size: 14px;
+      font-size: 12px;
       transition: all 0.15s;
     }
 
     .add-btn:hover {
-      background: var(--bg-item-hover, rgba(255, 255, 255, 0.15));
-      border-color: var(--grid-color-strong, rgba(255, 255, 255, 0.5));
+      background: var(--bg-item, rgba(255, 255, 255, 0.05));
+      border-color: var(--grid-color-hover, rgba(255, 255, 255, 0.3));
       color: var(--text-primary, rgba(255, 255, 255, 0.9));
     }
 
@@ -232,8 +302,8 @@ export class CalDAVConfigElement extends LitElement {
     }
 
     .color-option {
-      width: 28px;
-      height: 28px;
+      width: 22px;
+      height: 22px;
       border-radius: var(--border-radius-sm, 4px);
       cursor: pointer;
       border: 2px solid transparent;
@@ -284,6 +354,18 @@ export class CalDAVConfigElement extends LitElement {
       color: var(--text-primary, rgba(255, 255, 255, 0.9));
     }
 
+    .btn-danger {
+      background: transparent;
+      border: 1px solid var(--accent-error, #e53935);
+      color: var(--accent-error, #e53935);
+      margin-right: auto;
+    }
+
+    .btn-danger:hover {
+      background: var(--accent-error, #e53935);
+      color: white;
+    }
+
     .sync-status {
       display: flex;
       align-items: center;
@@ -376,20 +458,26 @@ export class CalDAVConfigElement extends LitElement {
   `;
 
   sources: ConfigurableSource[] = [];
+  calendars: SidebarCalendar[] = [];
+  activeCalendarId: string | null = null;
   isAdding = false;
   editingId: string | null = null;
   isGoogleAuthenticating = false;
   googleAuthError: string | null = null;
+  collapsed = localStorage.getItem("caldav-sidebar-collapsed") === "true";
 
   private formData: Partial<ConfigurableSource> = {};
 
   static get properties() {
     return {
       sources: { type: Array },
+      calendars: { type: Array },
+      activeCalendarId: { type: String },
       isAdding: { type: Boolean },
       editingId: { type: String },
       isGoogleAuthenticating: { type: Boolean },
       googleAuthError: { type: String },
+      collapsed: { type: Boolean, reflect: true },
     };
   }
 
@@ -445,6 +533,15 @@ export class CalDAVConfigElement extends LitElement {
     this.requestUpdate();
   }
 
+  toggleCollapsed() {
+    this.collapsed = !this.collapsed;
+    localStorage.setItem("caldav-sidebar-collapsed", String(this.collapsed));
+    this.dispatchEvent(new CustomEvent("collapsed-changed", {
+      detail: { collapsed: this.collapsed },
+      bubbles: true,
+    }));
+  }
+
   addSource() {
     this.isAdding = true;
     this.editingId = null;
@@ -478,6 +575,14 @@ export class CalDAVConfigElement extends LitElement {
     this.saveSources();
   }
 
+  selectCalendar(calendarId: string) {
+    this.activeCalendarId = calendarId;
+    this.dispatchEvent(new CustomEvent("active-calendar-changed", {
+      detail: { calendarId },
+      bubbles: true,
+    }));
+  }
+
   saveForm() {
     if (!this.formData.name?.trim()) {
       alert('Please enter a calendar name');
@@ -529,6 +634,22 @@ export class CalDAVConfigElement extends LitElement {
         enabled: this.formData.enabled ?? true,
         locked: this.formData.locked ?? false,
       } as ICalSource;
+    } else if (this.formData.type === "timeseries-json") {
+      if (!this.formData.credentials?.url) {
+        return;
+      }
+
+      source = {
+        id: this.editingId || crypto.randomUUID(),
+        name: this.formData.name,
+        type: "timeseries-json",
+        credentials: {
+          url: this.formData.credentials.url,
+        },
+        color: this.formData.color || "#06B6D4",
+        enabled: this.formData.enabled ?? true,
+        locked: this.formData.locked ?? false,
+      } as TimeseriesJsonSource;
     } else if (this.formData.type === "google") {
       if (!this.formData.credentials?.accessToken) {
         alert('Please authenticate with Google before adding the calendar');
@@ -717,13 +838,17 @@ export class CalDAVConfigElement extends LitElement {
     return html`
       <div class="container">
         <div class="header">
-          <span class="title">Calendar Sources</span>
-          <button class="close-btn" @click=${this.close}>×</button>
+          <span class="title">Sources</span>
+          <button class="collapse-btn" @click=${this.toggleCollapsed} title="${this.collapsed ? "Expand" : "Collapse"}">
+            ${this.collapsed ? "▶" : "◀"}
+          </button>
         </div>
 
-        ${this.isAdding || this.editingId
-          ? this.renderForm(colors)
-          : this.renderSourcesList()}
+        ${this.collapsed
+          ? this.renderSourcesList()
+          : (this.isAdding || this.editingId
+            ? this.renderForm(colors)
+            : this.renderSourcesList())}
       </div>
     `;
   }
@@ -735,77 +860,51 @@ export class CalDAVConfigElement extends LitElement {
           No calendar sources configured
         </div>
         <button class="add-btn" @click=${this.addSource}>
-          + Add Calendar Source
+          + Add Source
         </button>
       `;
     }
-    
-    console.log(this.sources);
 
     return html`
       <div class="sources-list">
         ${this.sources.map(
           (source) => {
-            let urlDisplay: string;
-            if (source.type === "caldav") {
-              urlDisplay = (source.credentials as CalDAVSourceConfig["credentials"]).serverUrl;
-            } else if (source.type === "ical") {
-              urlDisplay = (source.credentials as ICalSource["credentials"]).url;
-            } else if (source.type === "google") {
-              urlDisplay = (source.credentials as GoogleSource["credentials"]).calendarId || "primary";
-            } else if (source.type === "inhouse") {
-              urlDisplay = `Employee: ${(source.credentials as InhouseSource["credentials"]).employeeId}`;
-            } else {
-              urlDisplay = "Unknown source";
-            }
-
+            const sourceCalendars = this.calendars.filter(c => c.sourceId === source.id);
             return html`
-              <div class="source-item">
-                <div class="source-header">
-                  <div
-                    class="source-color"
-                    style="background: ${source.color}"
-                  ></div>
-                  <span class="source-name">${source.name}</span>
-                  <input
-                    type="checkbox"
-                    class="source-enabled"
-                    .checked=${source.enabled}
-                    @change=${() => this.toggleEnabled(source)}
-                    title="${source.enabled ? "Disable" : "Enable"} sync"
-                  />
-                  <input
-                    type="checkbox"
-                    class="source-locked"
-                    .checked=${source.locked}
-                    @change=${() => this.toggleLocked(source)}
-                    title="${source.locked ? "Unlock (allow editing)" : "Lock (read-only)"}"
-                  />
-                  <div class="source-actions">
-                    <button
-                      class="icon-btn"
-                      @click=${() => this.editSource(source)}
-                      title="Edit"
-                    >
-                      ✎
-                    </button>
-                    <button
-                      class="icon-btn"
-                      @click=${() => this.deleteSource(source.id)}
-                      title="Delete"
+              <div class="source-item" @click=${() => this.collapsed ? this.toggleEnabled(source) : this.editSource(source)}>
+                <div
+                  class="source-color ${source.enabled ? "" : "disabled"}"
+                  style="background: ${source.color}; --source-color: ${source.color}"
+                ></div>
+                <span class="source-name">${source.name}</span>
+                <input
+                  type="checkbox"
+                  class="source-enabled"
+                  .checked=${source.enabled}
+                  @click=${(e: Event) => e.stopPropagation()}
+                  @change=${() => this.toggleEnabled(source)}
+                  title="${source.enabled ? "Disable" : "Enable"} sync"
+                />
+              </div>
+              ${source.enabled && sourceCalendars.length > 0 ? html`
+                <div class="calendar-list">
+                  ${sourceCalendars.map(cal => html`
+                    <div
+                      class="calendar-item ${this.activeCalendarId === cal.id ? "active" : ""}"
+                      @click=${() => this.selectCalendar(cal.id)}
                     >
-                      🗑
-                    </button>
-                  </div>
+                      <div class="calendar-color" style="background: ${cal.color}"></div>
+                      <span class="calendar-name">${cal.name}</span>
+                    </div>
+                  `)}
                 </div>
-                <div class="source-url">${source.type.toUpperCase()}: ${urlDisplay || "No URL"}</div>
-              </div>
+              ` : null}
             `;
           }
         )}
       </div>
       <button class="add-btn" @click=${this.addSource}>
-        + Add Calendar Source
+        + Add Source
       </button>
     `;
   }
@@ -829,12 +928,15 @@ export class CalDAVConfigElement extends LitElement {
                 this.updateForm("color", "#4285F4");
               } else if (type === "caldav" && !this.formData.color) {
                 this.updateForm("color", "#FF6E68");
+              } else if (type === "timeseries-json" && !this.formData.color) {
+                this.updateForm("color", "#06B6D4");
               }
             }}
             ?disabled=${isEditing}
           >
             <option value="caldav">CalDAV (with credentials)</option>
             <option value="ical">iCal URL</option>
+            <option value="timeseries-json">Timeseries JSON (URL)</option>
             <option value="google">Google Calendar</option>
             <option value="inhouse">Inhouse Booking System</option>
           </select>
@@ -902,6 +1004,23 @@ export class CalDAVConfigElement extends LitElement {
                   />
                 </div>
               `
+            : sourceType === "timeseries-json"
+              ? html`
+                  <div class="form-group">
+                    <label class="form-label">Timeseries JSON URL</label>
+                    <input
+                      class="form-input"
+                      type="text"
+                      placeholder="https://example.com/data.json"
+                      .value=${this.formData.credentials?.url || ""}
+                      @input=${(e: Event) =>
+                        this.updateForm("url", (e.target as HTMLInputElement).value)}
+                    />
+                    <small style="color: var(--text-muted, rgba(255, 255, 255, 0.5)); font-size: 11px;">
+                      Expected format: JSON array of objects with a <code>timestamp</code> field. Rendered as a heatmap backdrop.
+                    </small>
+                  </div>
+                `
             : sourceType === "google"
               ? html`
                 <div class="google-auth-section">
@@ -1021,6 +1140,11 @@ export class CalDAVConfigElement extends LitElement {
         </div>
 
         <div class="form-actions">
+          ${isEditing ? html`
+            <button class="btn btn-danger" @click=${() => this.deleteSource(this.editingId!)}>
+              Delete
+            </button>
+          ` : null}
           <button class="btn btn-secondary" @click=${this.cancelForm}>
             Cancel
           </button>

package/src/CalendarInternal.ts

@@ -49,6 +49,7 @@ export interface CalendarEvent {
   status?: 'TENTATIVE' | 'CONFIRMED' | 'CANCELLED';
   reminders?: NotificationConfig[];
   isAllDay?: boolean;
+  visualStyle?: 'heatmap';
 }
 
 export interface WeekInfo {
@@ -72,8 +73,9 @@ export interface EventSegment {
 }
 
 // Configuration for the sliding window buffer
-const BUFFER_WEEKS = 12; // Weeks to keep as buffer outside viewport
-const EXTEND_WEEKS = 12; // Weeks to add when extending
+const BUFFER_WEEKS = 4; // Trigger extension when within this many weeks of the edge
+const EXTEND_WEEKS = 26; // Weeks to add per extension (~6 months); must be >> BUFFER_WEEKS so
+// the scroll thumb lands well past the buffer entry after each extension, preventing cascade
 const MAX_WEEKS = 96; // Maximum weeks to keep in memory (trim beyond this)
 
 export class CalendarInternal {
@@ -185,6 +187,18 @@ export class CalendarInternal {
   }
 
 
+  applyEventOptimistically(event: CalendarEvent): void {
+    this.calendarEvents.set(event.id, event);
+    this.storage?.putEvent(event).catch(() => { /* sync will fix it */ });
+    this.sendEvents();
+  }
+
+  removeEventOptimistically(eventId: string): void {
+    this.calendarEvents.delete(eventId);
+    this.storage?.deleteEvent(eventId).catch(() => { /* sync will fix it */ });
+    this.sendEvents();
+  }
+
   setFilter(filter: string) {
     this.filter = filter;
     this.sendEvents();
@@ -246,18 +260,21 @@ export class CalendarInternal {
 
   getFilteredEvents(filter?: string) {
     const baseEvents = Array.from(this.calendarEvents.values());
+    return this.filterEvents(baseEvents, filter);
+  }
 
+  filterEvents(events: CalendarEvent[], filter?: string): CalendarEvent[] {
     // Filter by enabled calendars
     // Note: enabledCalendars contains calendar IDs, not sourceIds
     const enabledEvents = this.enabledCalendars.size > 0
-      ? baseEvents.filter(e => {
+      ? events.filter(e => {
           // For backwards compatibility: check both sourceId and calendarId
           // CalDAV events: match via calendarId
           // Other sources: match via sourceId
           return (e.calendarId && this.enabledCalendars.has(e.calendarId)) ||
                  (e.sourceId && this.enabledCalendars.has(e.sourceId));
         })
-      : baseEvents;
+      : events;
 
     // Mark events from locked calendars as read-only
     const lockedEvents = this.lockedCalendars.size > 0

package/src/CalendarLayer.ts

@@ -0,0 +1,28 @@
+import type { WeekInfo } from "./CalendarInternal.js";
+
+// Minimum dayHeight at which timed events are rendered at their actual time-of-day position.
+export const TIME_SCALE_DAY_HEIGHT = 300;
+
+export interface LayerContext {
+	ctx: CanvasRenderingContext2D;
+	width: number;
+	height: number;
+	scrollTop: number;
+	dayWidth: number;
+	dayHeight: number;
+	leftGutterWidth: number;
+	columnsPerRow: number;
+	rowsPerWeek: number;
+	visibleWeeks: WeekInfo[];
+	allWeeks: WeekInfo[];
+	fontFamily: string;
+	styles: Record<string, string>;
+	getDayVisualPosition: (dayIndex: number) => { row: number; col: number };
+	filter: string | null;
+}
+
+export interface CalendarLayer {
+	name: string;
+	enabled: boolean;
+	render(lc: LayerContext): void;
+}

package/src/CalendarStorage.ts

@@ -51,4 +51,9 @@ export interface CalendarStorage {
    * Upserts a single event (e.g. to persist locally-set reminders).
    */
   putEvent(event: CalendarEvent): Promise<void>;
+
+  /**
+   * Deletes a single event by ID (e.g. for optimistic deletes).
+   */
+  deleteEvent(id: string): Promise<void>;
 }