update

ts_web/elements/upl-statuspage-incidents.ts

@@ -51,16 +51,42 @@ export class UplStatuspageIncidents extends DeesElement {
   })
   public daysToShow = 90;
 
+  @property({
+    type: Array,
+  })
+  public subscribedIncidentIds: string[] = [];
+
   @property({
     type: Object,
     state: true,
   })
   private expandedIncidents: Set<string> = new Set();
 
+  @property({
+    type: Object,
+    state: true,
+  })
+  private subscribedIncidents: Set<string> = new Set();
+
   constructor() {
     super();
   }
 
+  async connectedCallback() {
+    await super.connectedCallback();
+    // Initialize subscribed incidents from the property
+    if (this.subscribedIncidentIds.length > 0) {
+      this.subscribedIncidents = new Set(this.subscribedIncidentIds);
+    }
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('subscribedIncidentIds')) {
+      this.subscribedIncidents = new Set(this.subscribedIncidentIds);
+    }
+  }
+
   public static styles = [
     plugins.domtools.elementBasic.staticStyles,
     commonStyles,
@@ -312,6 +338,46 @@ export class UplStatuspageIncidents extends DeesElement {
       .show-more-button:active {
         transform: translateY(0);
       }
+      
+      .incident-actions {
+        display: flex;
+        gap: ${unsafeCSS(spacing.md)};
+        align-items: center;
+        margin-top: ${unsafeCSS(spacing.lg)};
+        padding-top: ${unsafeCSS(spacing.lg)};
+        border-top: 1px solid ${colors.border.default};
+      }
+      
+      .subscribe-button {
+        display: inline-flex;
+        align-items: center;
+        gap: ${unsafeCSS(spacing.xs)};
+        padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
+        background: transparent;
+        border: 1px solid ${colors.border.default};
+        border-radius: ${unsafeCSS(borderRadius.base)};
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 400;
+        transition: all 0.2s ease;
+        color: ${colors.text.primary};
+        font-family: ${unsafeCSS(fonts.base)};
+      }
+      
+      .subscribe-button:hover {
+        background: ${colors.background.secondary};
+        border-color: ${colors.border.muted};
+      }
+      
+      .subscribe-button.subscribed {
+        background: ${cssManager.bdTheme('#f0fdf4', '#064e3b')};
+        border-color: ${cssManager.bdTheme('#86efac', '#047857')};
+        color: ${cssManager.bdTheme('#047857', '#86efac')};
+      }
+      
+      .subscribe-button.subscribed:hover {
+        background: ${cssManager.bdTheme('#dcfce7', '#065f46')};
+      }
 
       .collapsed-hint {
         font-size: 12px;
@@ -470,6 +536,35 @@ export class UplStatuspageIncidents extends DeesElement {
               <strong>Resolution:</strong> ${incident.resolution}
             </div>
           ` : ''}
+          
+          <div class="incident-actions">
+            <button 
+              class="subscribe-button ${this.isSubscribedToIncident(incident.id) ? 'subscribed' : ''}"
+              @click=${(e: Event) => {
+                e.stopPropagation();
+                this.handleIncidentSubscribe(incident);
+              }}
+            >
+              ${this.isSubscribedToIncident(incident.id) ? html`
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M11.6667 3.5L5.25 9.91667L2.33334 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                Subscribed to updates
+              ` : html`
+                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10.5 5.25V8.75C10.5 9.34674 10.2629 9.91903 9.84099 10.341C9.41903 10.7629 8.84674 11 8.25 11L3.75 11C3.15326 11 2.58097 10.7629 2.15901 10.341C1.73705 9.91903 1.5 9.34674 1.5 8.75V4.25C1.5 3.65326 1.73705 3.08097 2.15901 2.65901C2.58097 2.23705 3.15326 2 3.75 2H7.25" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                  <path d="M9 1.5H12.5M12.5 1.5V5M12.5 1.5L6 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+                Subscribe to updates
+              `}
+            </button>
+            ${isCurrent ? html`
+              <span style="
+                font-size: 12px;
+                color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
+              ">Get notified when this incident is updated or resolved</span>
+            ` : ''}
+          </div>
         </div>
         ` : ''}
       </div>
@@ -570,6 +665,38 @@ export class UplStatuspageIncidents extends DeesElement {
     console.log('Show more incidents');
   }
 
+  private isSubscribedToIncident(incidentId: string): boolean {
+    return this.subscribedIncidents.has(incidentId);
+  }
+
+  private handleIncidentSubscribe(incident: IIncidentDetails) {
+    const newSubscribed = new Set(this.subscribedIncidents);
+    if (newSubscribed.has(incident.id)) {
+      newSubscribed.delete(incident.id);
+      this.dispatchEvent(new CustomEvent('incidentUnsubscribe', {
+        detail: { 
+          incident,
+          incidentId: incident.id 
+        },
+        bubbles: true,
+        composed: true
+      }));
+    } else {
+      newSubscribed.add(incident.id);
+      this.dispatchEvent(new CustomEvent('incidentSubscribe', {
+        detail: { 
+          incident,
+          incidentId: incident.id,
+          incidentTitle: incident.title,
+          affectedServices: incident.affectedServices
+        },
+        bubbles: true,
+        composed: true
+      }));
+    }
+    this.subscribedIncidents = newSubscribed;
+  }
+
   public dispatchReportNewIncident() {
     this.dispatchEvent(new CustomEvent('reportNewIncident', {
       bubbles: true,