@luckydye/calendar 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luckydye/calendar",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "author": "Tim Havlicek",
   "contributors": [],
   "description": "",

package/src/CalDAVConfig.ts

@@ -46,6 +46,13 @@ interface InhouseSource extends CalendarSource {
 
 type ConfigurableSource = CalDAVSourceConfig | ICalSource | GoogleSource | InhouseSource;
 
+interface SidebarCalendar {
+  id: string;
+  name: string;
+  color: string;
+  sourceId: string;
+}
+
 export class CalDAVConfigElement extends LitElement {
   static styles = css`
     :host {
@@ -56,114 +63,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 +232,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 +289,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 +341,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 +445,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 +520,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 +562,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');
@@ -717,13 +809,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 +831,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>
     `;
   }
@@ -1021,6 +1091,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

@@ -185,6 +185,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();

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>;
 }