@luckydye/calendar 1.2.2 → 1.3.0

package/src/CalendarView.ts

@@ -55,31 +55,24 @@ export class CalendarViewElement extends LitElement {
       align-items: center;
       justify-content: space-between;
       padding: 8px 10px;
-      background: var(--bg-secondary, rgba(36, 36, 38, 0.5));
-      border: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+      background: var(--bg-primary, rgb(30, 30, 30));
       flex-shrink: 0;
       gap: 16px;
       position: absolute;
-      bottom: .25rem;
-      left: .5rem;
-      right: 0.5rem;
+      bottom: 0;
+      left: 0;
+      right: 0;
       z-index: 100;
-      border-radius: var(--border-radius-lg, 8px);
-      overflow: hidden;
-      
-      --backdrop-padding: 30px;
-      --backdrop-size: 42px;
     }
 
     .toolbar::before {
       content: '';
-      width: 100%;
       position: absolute;
-      top: calc(var(--backdrop-padding) * -1);
       left: 0;
-      bottom: calc(var(--backdrop-padding) * -1);
-      backdrop-filter: blur(var(--backdrop-size));
-      z-index: -1;
+      right: 0;
+      bottom: 100%;
+      height: 48px;
+      background: linear-gradient(to bottom, transparent, var(--bg-primary, rgb(30, 30, 30)));
       pointer-events: none;
     }
 
@@ -460,13 +453,14 @@ export class CalendarViewElement extends LitElement {
       flex-direction: column;
       min-width: 0;
       max-height: 550px;
+      border-radius: var(--border-radius-lg, 8px);
+      overflow: hidden;
     }
 
     .event-detail-footer {
       border-top: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
       padding: 12px 16px;
       background: var(--bg-elevated, rgba(20, 20, 20, 0.95));
-      border-radius: 0 0 var(--border-radius-lg, 8px) 0;
     }
 
     .invite-response-buttons {
@@ -5229,16 +5223,20 @@ export class CalendarViewElement extends LitElement {
         </div>
 
         <div class="event-detail-body">
-          ${
-						event.location
-							? html`
+          ${(() => {
+						const teamsMatch = event.description?.match(/https:\/\/teams\.microsoft\.com\/[^\s<>"]+/);
+						const teamsUrl = teamsMatch ? teamsMatch[0] : null;
+						if (!event.location && !teamsUrl) return null;
+						return html`
               <div class="event-detail-section">
                 <div class="event-detail-label">Location</div>
-                <div class="event-detail-value">${event.location}</div>
+                <div class="event-detail-value">
+                  ${event.location ? html`<div>${event.location}</div>` : null}
+                  ${teamsUrl ? html`<a href="${teamsUrl}" class="event-detail-link" target="_blank" rel="noopener">Join Microsoft Teams Meeting</a>` : null}
+                </div>
               </div>
-            `
-							: null
-					}
+            `;
+					})()}
 
           ${
 						event.url
@@ -5477,70 +5475,8 @@ export class CalendarViewElement extends LitElement {
 	render() {
 		return html`
       <div class="container ${this.isDraggingFile ? "dragging-file" : ""}">
-        <div class="toolbar">
-          <div class="toolbar-left">
-            <slot name="toolbar-center"></slot>
-            
-            <button class="toolbar-button" title="Month" @click=${
-							this.scrollToMonth
-						}>
-              Month
-            </button>
-            <button class="toolbar-button" title="Today" @click=${
-							this.scrollToToday
-						}>
-              Today
-            </button>
-            <button ?disabled=${
-							this.historyStack.length === 0 ||
-							this.historyIndex >= this.historyStack.length - 1
-						} class="toolbar-button" title="Back" @click=${this.goBack}>
-              ←
-            </button>
-            <button ?disabled=${
-							this.historyStack.length === 0 || this.historyIndex === 0
-						} class="toolbar-button" title="Forward" @click=${this.goForward}>
-              →
-            </button>
-            <div class="toolbar-zoom">
-              <input
-                type="range"
-                class="toolbar-zoom-slider"
-                min="${MIN_DAY_HEIGHT}"
-                max="${MAX_DAY_HEIGHT}"
-                .value=${this.dayHeight}
-                @input=${this.onZoomSliderChange}
-                title="Adjust zoom level"
-              />
-            </div>
-          </div>
-
-          <div class="toolbar-right">
-            <!--<select
-              class="theme-selector"
-              .value=${this.currentTheme}
-              @change=${this.onThemeChange}
-              title="Select theme"
-            >
-              ${availableThemes.map(
-								(theme) =>
-									html`<option value="${theme.name}">${theme.label}</option>`,
-							)}
-            </select>-->
-            <div class="toolbar-search">
-              <span class="toolbar-search-icon">🔍</span>
-              <input
-                class="toolbar-search-input"
-                type="text"
-                placeholder="Filter events..."
-                .value=${this.filter}
-                @input=${this.onFilterInput}
-              />
-            </div>
-          </div>
-        </div>
-
         <div class="body">
+          <slot name="sidebar"></slot>
           <div class="calendar-area">
             <div class="canvas-layer">
               <canvas></canvas>
@@ -5560,6 +5496,67 @@ export class CalendarViewElement extends LitElement {
             ${this.minimapCanvas}
             ${this.renderEventDetail()}
             ${this.renderNotificationPopover()}
+          
+            <div class="toolbar">
+                <div class="toolbar-left">
+                <button class="toolbar-button" title="Month" @click=${
+    							this.scrollToMonth
+    						}>
+                    Month
+                </button>
+                <button class="toolbar-button" title="Today" @click=${
+    							this.scrollToToday
+    						}>
+                    Today
+                </button>
+                <button ?disabled=${
+    							this.historyStack.length === 0 ||
+    							this.historyIndex >= this.historyStack.length - 1
+    						} class="toolbar-button" title="Back" @click=${this.goBack}>
+                    ←
+                </button>
+                <button ?disabled=${
+    							this.historyStack.length === 0 || this.historyIndex === 0
+    						} class="toolbar-button" title="Forward" @click=${this.goForward}>
+                    →
+                </button>
+                <div class="toolbar-zoom">
+                    <input
+                    type="range"
+                    class="toolbar-zoom-slider"
+                    min="${MIN_DAY_HEIGHT}"
+                    max="${MAX_DAY_HEIGHT}"
+                    .value=${this.dayHeight}
+                    @input=${this.onZoomSliderChange}
+                    title="Adjust zoom level"
+                    />
+                </div>
+                </div>
+    
+                <div class="toolbar-right">
+                <!--<select
+                    class="theme-selector"
+                    .value=${this.currentTheme}
+                    @change=${this.onThemeChange}
+                    title="Select theme"
+                >
+                    ${availableThemes.map(
+    								(theme) =>
+    									html`<option value="${theme.name}">${theme.label}</option>`,
+    							)}
+                </select>-->
+                <div class="toolbar-search">
+                    <span class="toolbar-search-icon">🔍</span>
+                    <input
+                    class="toolbar-search-input"
+                    type="text"
+                    placeholder="Filter events..."
+                    .value=${this.filter}
+                    @input=${this.onFilterInput}
+                    />
+                </div>
+                </div>
+            </div>
           </div>
         </div>
       </div>

package/src/IndexedDBStorage.ts

@@ -390,4 +390,17 @@ export class IndexedDBStorage implements CalendarStorage {
       transaction.onerror = () => reject(transaction.error);
     });
   }
+
+  async deleteEvent(id: string): Promise<void> {
+    const db = await this.open();
+
+    return new Promise((resolve, reject) => {
+      const transaction = db.transaction(this.storeName, "readwrite");
+      const store = transaction.objectStore(this.storeName);
+      store.delete(id);
+
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
 }

package/src/InhouseBookingSource.ts

@@ -484,6 +484,8 @@ export class InhouseBookingSource implements CalendarSource {
 
   /**
    * Delete a booking from the Inhouse Booking System.
+   * - Confirmed timetracks (id > 0): DELETE /timetracks/{id}?id=...&date=...&duration=...etc
+   * - Raw bookings (id <= 0): DELETE /timetracks/delete_bookings/{bookingId}
    */
   async deleteEvent(id: string): Promise<void> {
     if (!this.enabled) {
@@ -495,7 +497,34 @@ export class InhouseBookingSource implements CalendarSource {
       throw new Error(`Invalid event ID format: ${id}`);
     }
 
-    await this.apiQueryRequest<unknown>(`/timetracks/delete_bookings/${parsedId.bookingId}`, 'DELETE', new URLSearchParams());
+    if (parsedId.id <= 0) {
+      await this.apiQueryRequest<unknown>(`/timetracks/delete_bookings/${parsedId.bookingId}`, 'DELETE', new URLSearchParams());
+      return;
+    }
+
+    const existingBookings = await this.fetchEvents();
+    const existing = existingBookings.find(e => e.id === id);
+    if (!existing) {
+      throw new Error(`Booking not found: ${id}`);
+    }
+
+    const durationMs = existing.end.getTime() - existing.start.getTime();
+    const duration = this.formatDuration(durationMs);
+    const date = existing.start.toISOString().split('T')[0];
+    const description = existing.description ?? '';
+
+    const params = new URLSearchParams({
+      id: parsedId.id.toString(),
+      unit_id: this.credentials.unitId || '',
+      employee_id: this.credentials.employeeId,
+      booking_id: parsedId.bookingId.toString(),
+      date,
+      description,
+      project_id: parsedId.projectId.toString(),
+      duration,
+    });
+
+    await this.apiQueryRequest<unknown>(`/timetracks/${parsedId.id}`, 'DELETE', params);
   }
 
   /**

package/src/app.css

@@ -1,6 +1,22 @@
+dialog {
+    background: var(--bg-tertiary);
+}
+
+.caldav-sidebar {
+    width: 250px;
+    flex-shrink: 0;
+    height: 100%;
+    border-right: 1px solid var(--grid-color, rgba(255, 255, 255, 0.1));
+    overflow: hidden;
+    transition: width 0.15s ease;
+}
+
+.caldav-sidebar.collapsed {
+    width: 36px;
+}
+
 caldav-config {
     height: 100%;
-    box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
 }
 
 .toolbar-button {