@uptime.link/statuspage 1.3.1 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptime.link/statuspage",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "private": false,
   "description": "A catalog of web components for the UptimeLink dashboard.",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@uptime.link/statuspage',
-  version: '1.3.1',
+  version: '1.4.0',
   description: 'A catalog of web components for the UptimeLink dashboard.'
 }

package/ts_web/elements/upl-statuspage-incidents.ts

@@ -20,6 +20,8 @@ declare global {
   }
 }
 
+type TIncidentStatus = 'investigating' | 'identified' | 'monitoring' | 'resolved' | 'postmortem';
+
 @customElement('upl-statuspage-incidents')
 export class UplStatuspageIncidents extends DeesElement {
   // STATIC
@@ -68,6 +70,22 @@ export class UplStatuspageIncidents extends DeesElement {
   })
   private accessor subscribedIncidents: Set<string> = new Set();
 
+  private statusIcons: Record<TIncidentStatus, string> = {
+    investigating: 'lucide:Search',
+    identified: 'lucide:Target',
+    monitoring: 'lucide:Eye',
+    resolved: 'lucide:CheckCircle',
+    postmortem: 'lucide:FileText',
+  };
+
+  private statusLabels: Record<TIncidentStatus, string> = {
+    investigating: 'Investigating',
+    identified: 'Identified',
+    monitoring: 'Monitoring',
+    resolved: 'Resolved',
+    postmortem: 'Postmortem',
+  };
+
   constructor() {
     super();
   }
@@ -171,112 +189,151 @@ export class UplStatuspageIncidents extends DeesElement {
         }
       }
 
+      /* New header layout matching admin catalog */
       .incident-header {
-        padding: ${unsafeCSS(sharedStyles.spacing.lg)} ${unsafeCSS(sharedStyles.spacing.xl)};
-        border-left: 4px solid;
         display: flex;
-        align-items: start;
-        justify-content: space-between;
-        gap: ${unsafeCSS(sharedStyles.spacing.md)};
+        align-items: flex-start;
+        gap: 16px;
+        padding: 16px;
         cursor: pointer;
         transition: background-color ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
-        position: relative;
       }
 
       .incident-header:hover {
         background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.02)')};
       }
 
-      .incident-header.critical {
-        border-left-color: ${sharedStyles.colors.status.major};
+      /* Internal severity bar (replacing border-left) */
+      .incident-severity {
+        width: 4px;
+        align-self: stretch;
+        border-radius: 2px;
+        flex-shrink: 0;
       }
 
-      .incident-header.major {
-        border-left-color: ${sharedStyles.colors.status.partial};
-      }
+      .incident-severity.critical { background: ${sharedStyles.colors.status.major}; }
+      .incident-severity.major { background: ${sharedStyles.colors.status.partial}; }
+      .incident-severity.minor { background: ${sharedStyles.colors.status.degraded}; }
+      .incident-severity.maintenance { background: ${sharedStyles.colors.status.maintenance}; }
 
-      .incident-header.minor {
-        border-left-color: ${sharedStyles.colors.status.degraded};
+      .incident-main {
+        flex: 1;
+        min-width: 0;
       }
 
-      .incident-header.maintenance {
-        border-left-color: ${sharedStyles.colors.status.maintenance};
+      .incident-title-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 6px;
+        flex-wrap: wrap;
       }
 
       .incident-title {
-        font-size: 17px;
+        font-size: 15px;
         font-weight: 600;
         margin: 0;
-        line-height: 1.4;
-        letter-spacing: -0.01em;
-      }
-
-      .incident-meta {
-        display: flex;
-        gap: ${unsafeCSS(sharedStyles.spacing.lg)};
-        margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
-        font-size: 13px;
-        color: ${sharedStyles.colors.text.secondary};
-        flex-wrap: wrap;
-      }
-
-      .incident-meta span {
-        display: flex;
-        align-items: center;
-        gap: 4px;
+        color: ${sharedStyles.colors.text.primary};
       }
 
+      /* Status badge inline with title */
       .incident-status {
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        padding: 6px 12px;
-        border-radius: ${unsafeCSS(sharedStyles.borderRadius.full)};
+        padding: 4px 10px;
         font-size: 11px;
-        font-weight: 600;
+        font-weight: 500;
+        border-radius: 9999px;
         text-transform: uppercase;
-        letter-spacing: 0.04em;
         flex-shrink: 0;
-        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .incident-status dees-icon {
+        --icon-size: 12px;
       }
 
       .incident-status.investigating {
-        background: ${cssManager.bdTheme('#fef3c7', '#78350f')};
-        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+        background: ${cssManager.bdTheme('rgba(249, 115, 22, 0.1)', 'rgba(249, 115, 22, 0.2)')};
+        color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
+        --icon-color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
       }
 
       .incident-status.identified {
-        background: ${cssManager.bdTheme('#e9d5ff', '#581c87')};
-        color: ${cssManager.bdTheme('#6b21a8', '#d8b4fe')};
+        background: ${cssManager.bdTheme('rgba(234, 179, 8, 0.1)', 'rgba(234, 179, 8, 0.2)')};
+        color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
+        --icon-color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
       }
 
       .incident-status.monitoring {
-        background: ${cssManager.bdTheme('#dbeafe', '#1e3a8a')};
-        color: ${cssManager.bdTheme('#1e40af', '#93c5fd')};
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.2)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+        --icon-color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
       }
 
       .incident-status.resolved {
-        background: ${cssManager.bdTheme('#d1fae5', '#064e3b')};
-        color: ${cssManager.bdTheme('#047857', '#6ee7b7')};
+        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.1)', 'rgba(34, 197, 94, 0.2)')};
+        color: ${cssManager.bdTheme('#16a34a', '#4ade80')};
+        --icon-color: ${cssManager.bdTheme('#16a34a', '#4ade80')};
       }
 
       .incident-status.postmortem {
-        background: ${cssManager.bdTheme('#e5e7eb', '#374151')};
-        color: ${cssManager.bdTheme('#4b5563', '#d1d5db')};
+        background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.1)', 'rgba(168, 85, 247, 0.2)')};
+        color: ${cssManager.bdTheme('#9333ea', '#c084fc')};
+        --icon-color: ${cssManager.bdTheme('#9333ea', '#c084fc')};
+      }
+
+      .incident-meta {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        font-size: 12px;
+        color: ${sharedStyles.colors.text.secondary};
+        flex-wrap: wrap;
       }
 
-      /* Pulse for investigating status */
-      .incident-status.investigating .status-dot {
-        animation: status-pulse 1.5s ease-in-out infinite;
+      .incident-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
       }
 
-      @keyframes status-pulse {
-        0%, 100% { opacity: 1; transform: scale(1); }
-        50% { opacity: 0.6; transform: scale(1.2); }
+      .incident-meta-item dees-icon {
+        --icon-size: 12px;
+        --icon-color: ${sharedStyles.colors.text.muted};
+      }
+
+      .incident-expand {
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        color: ${sharedStyles.colors.text.muted};
+        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+        flex-shrink: 0;
+      }
+
+      .incident-expand:hover {
+        background: ${sharedStyles.colors.background.muted};
+        color: ${sharedStyles.colors.text.primary};
+      }
+
+      .incident-expand dees-icon {
+        --icon-size: 16px;
+        transition: transform ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
+      }
+
+      .incident-expand.expanded dees-icon {
+        transform: rotate(180deg);
       }
 
       .incident-body {
-        padding: 0 ${unsafeCSS(sharedStyles.spacing.xl)} ${unsafeCSS(sharedStyles.spacing.xl)} ${unsafeCSS(sharedStyles.spacing.xl)};
+        padding: 0 16px 16px 36px;
         animation: slideDown 0.3s ${unsafeCSS(sharedStyles.easings.default)};
       }
 
@@ -362,8 +419,6 @@ export class UplStatuspageIncidents extends DeesElement {
         padding-bottom: 0;
       }
 
-      /* Vertical connector line from each dot to the next */
-      /* Dot: left -22px, width 12px + border 2px*2 = 16px total, center at -14px */
       .update-item:not(:last-child)::after {
         content: '';
         position: absolute;
@@ -374,7 +429,6 @@ export class UplStatuspageIncidents extends DeesElement {
         background: ${sharedStyles.colors.border.default};
       }
 
-      /* Timeline dot */
       .update-item::before {
         content: '';
         position: absolute;
@@ -528,39 +582,23 @@ export class UplStatuspageIncidents extends DeesElement {
         background: ${cssManager.bdTheme('#dcfce7', '#065f46')};
       }
 
-      .collapsed-hint {
-        font-size: 12px;
-        color: ${sharedStyles.colors.text.secondary};
-        text-align: center;
-        margin-top: ${unsafeCSS(sharedStyles.spacing.md)};
-        opacity: 0.8;
-      }
-
-      /* Expand icon animation */
-      .expand-icon {
-        transition: transform ${unsafeCSS(sharedStyles.durations.normal)} ${unsafeCSS(sharedStyles.easings.default)};
-      }
-
-      .expand-icon.rotated {
-        transform: rotate(180deg);
-      }
-
       @media (max-width: 640px) {
         .container {
           padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
         }
 
         .incident-header {
-          padding: ${unsafeCSS(sharedStyles.spacing.md)};
+          padding: 12px;
         }
 
         .incident-body {
-          padding: 0 ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)} ${unsafeCSS(sharedStyles.spacing.md)};
+          padding: 0 12px 12px 24px;
         }
 
         .incident-meta {
           flex-direction: column;
-          gap: ${unsafeCSS(sharedStyles.spacing.xs)};
+          align-items: flex-start;
+          gap: 8px;
         }
 
         .timeline {
@@ -573,7 +611,6 @@ export class UplStatuspageIncidents extends DeesElement {
           height: 10px;
         }
 
-        /* Mobile dot: left -18px, width 10px + border 2px*2 = 14px, center at -11px */
         .update-item:not(:last-child)::after {
           left: -12px;
           top: 16px;
@@ -593,16 +630,16 @@ export class UplStatuspageIncidents extends DeesElement {
         ` :
           html`<div class="noIncidentBox">No incidents ongoing.</div>`
         }
-        
+
         <uplinternal-miniheading>Past Incidents</uplinternal-miniheading>
         ${this.loading ? html`
           <div class="loading-skeleton"></div>
           <div class="loading-skeleton"></div>
-        ` : this.pastIncidents.length ? 
+        ` : this.pastIncidents.length ?
           this.pastIncidents.slice(0, 5).map(incident => this.renderIncident(incident, false)) :
           html`<div class="noIncidentBox">No past incidents in the last ${this.daysToShow} days.</div>`
         }
-        
+
         ${this.pastIncidents.length > 5 && !this.loading ? html`
           <div class="show-more">
             <button class="show-more-button" @click=${this.handleShowMore}>
@@ -621,74 +658,54 @@ export class UplStatuspageIncidents extends DeesElement {
       this.formatDuration(Date.now() - incident.startTime);
 
     const isActive = isCurrent && latestUpdate?.status !== 'resolved';
+    const isExpanded = this.expandedIncidents.has(incident.id);
 
     return html`
-      <div class="incident-card ${this.expandedIncidents.has(incident.id) ? 'expanded' : ''} ${isActive ? 'active-incident' : ''}">
-        <div class="incident-header ${incident.severity}" @click=${() => this.toggleIncident(incident.id)}>
-          <div>
-            <h3 class="incident-title">${incident.title}</h3>
-            <div class="incident-meta">
-              <span>Started: ${this.formatDate(incident.startTime)}</span>
-              <span>Duration: ${duration}</span>
-              ${incident.endTime ? html`
-                <span>Ended: ${this.formatDate(incident.endTime)}</span>
-              ` : ''}
-            </div>
-            ${!this.expandedIncidents.has(incident.id) ? html`
-              <div style="
-                margin-top: ${unsafeCSS(sharedStyles.spacing.sm)};
-                font-size: 13px;
-                color: ${sharedStyles.colors.text.secondary};
-                display: flex;
-                align-items: center;
-                gap: ${unsafeCSS(sharedStyles.spacing.md)};
-              ">
-                ${incident.impact ? html`
-                  <span style="
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    max-width: 500px;
-                  ">${incident.impact}</span>
-                ` : ''}
-                <span style="
-                  font-size: 12px;
-                  color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
-                ">
-                  ${incident.updates.length} update${incident.updates.length !== 1 ? 's' : ''}
-                </span>
-              </div>
-            ` : ''}
-          </div>
-          <div style="display: flex; align-items: center; gap: ${unsafeCSS(sharedStyles.spacing.md)};">
-            <div class="incident-status ${latestUpdate.status}">
-              ${this.getStatusIcon(latestUpdate.status)}
-              ${latestUpdate.status.replace(/_/g, ' ')}
+      <div class="incident-card ${isExpanded ? 'expanded' : ''} ${isActive ? 'active-incident' : ''}">
+        <div class="incident-header" @click=${() => this.toggleIncident(incident.id)}>
+          <div class="incident-severity ${incident.severity}"></div>
+
+          <div class="incident-main">
+            <div class="incident-title-row">
+              <h3 class="incident-title">${incident.title}</h3>
+              <span class="incident-status ${latestUpdate.status}">
+                <dees-icon .icon=${this.statusIcons[latestUpdate.status as TIncidentStatus]} .iconSize=${12}></dees-icon>
+                ${this.statusLabels[latestUpdate.status as TIncidentStatus] || latestUpdate.status}
+              </span>
             </div>
-            <div class="expand-icon" style="
-              font-size: 10px;
-              color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
-              transition: transform 0.2s ease;
-              display: flex;
-              align-items: center;
-              justify-content: center;
-              width: 24px;
-              height: 24px;
-              border-radius: 4px;
-              background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
-              ${this.expandedIncidents.has(incident.id) ? 'transform: rotate(180deg);' : ''}
-            ">
-              ▼
+            <div class="incident-meta">
+              <span class="incident-meta-item">
+                <dees-icon .icon=${'lucide:Calendar'} .iconSize=${12}></dees-icon>
+                ${this.formatDate(incident.startTime)}
+              </span>
+              <span class="incident-meta-item">
+                <dees-icon .icon=${'lucide:Clock'} .iconSize=${12}></dees-icon>
+                ${duration}
+              </span>
+              <span class="incident-meta-item">
+                <dees-icon .icon=${'lucide:Server'} .iconSize=${12}></dees-icon>
+                ${incident.affectedServices.length} service${incident.affectedServices.length !== 1 ? 's' : ''}
+              </span>
+              <span class="incident-meta-item">
+                <dees-icon .icon=${'lucide:MessageSquare'} .iconSize=${12}></dees-icon>
+                ${incident.updates.length} update${incident.updates.length !== 1 ? 's' : ''}
+              </span>
             </div>
           </div>
+
+          <button class="incident-expand ${isExpanded ? 'expanded' : ''}">
+            <dees-icon .icon=${'lucide:ChevronDown'} .iconSize=${16}></dees-icon>
+          </button>
         </div>
-        
-        ${this.expandedIncidents.has(incident.id) ? html`
+
+        ${isExpanded ? html`
         <div class="incident-body">
-          <div class="incident-impact">
-            <strong>Impact:</strong> ${incident.impact}
-          </div>
-          
+          ${incident.impact ? html`
+            <div class="incident-impact">
+              <strong>Impact:</strong> ${incident.impact}
+            </div>
+          ` : ''}
+
           ${incident.affectedServices.length > 0 ? html`
             <div class="affected-services">
               <div class="affected-services-title">Affected Services:</div>
@@ -697,7 +714,7 @@ export class UplStatuspageIncidents extends DeesElement {
               `)}
             </div>
           ` : ''}
-          
+
           ${incident.updates.length > 0 ? html`
             <div class="incident-updates">
               <h4 class="updates-title">Updates</h4>
@@ -706,21 +723,21 @@ export class UplStatuspageIncidents extends DeesElement {
               </div>
             </div>
           ` : ''}
-          
+
           ${incident.rootCause && isCurrent === false ? html`
             <div class="incident-impact" style="margin-top: 12px;">
               <strong>Root Cause:</strong> ${incident.rootCause}
             </div>
           ` : ''}
-          
+
           ${incident.resolution && isCurrent === false ? html`
             <div class="incident-impact" style="margin-top: 12px;">
               <strong>Resolution:</strong> ${incident.resolution}
             </div>
           ` : ''}
-          
+
           <div class="incident-actions">
-            <button 
+            <button
               class="subscribe-button ${this.isSubscribedToIncident(incident.id) ? 'subscribed' : ''}"
               @click=${(e: Event) => {
                 e.stopPropagation();
@@ -728,15 +745,10 @@ export class UplStatuspageIncidents extends DeesElement {
               }}
             >
               ${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>
+                <dees-icon .icon=${'lucide:Check'} .iconSize=${14}></dees-icon>
                 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>
+                <dees-icon .icon=${'lucide:Bell'} .iconSize=${14}></dees-icon>
                 Subscribe to updates
               `}
             </button>
@@ -763,10 +775,7 @@ export class UplStatuspageIncidents extends DeesElement {
         <div class="update-message">${update.message}</div>
         ${update.author ? html`
           <div class="update-author">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-              <circle cx="12" cy="7" r="4"></circle>
-            </svg>
+            <dees-icon .icon=${'lucide:User'} .iconSize=${12}></dees-icon>
             ${update.author}
           </div>
         ` : ''}
@@ -774,45 +783,32 @@ export class UplStatuspageIncidents extends DeesElement {
     `;
   }
 
-  private getStatusIcon(status: string): TemplateResult {
-    return html`<span class="status-dot" style="
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: ${status === 'resolved' ? sharedStyles.colors.status.operational :
-                   status === 'monitoring' ? sharedStyles.colors.status.maintenance :
-                   status === 'identified' ? sharedStyles.colors.status.degraded :
-                   sharedStyles.colors.status.partial};
-    "></span>`;
-  }
-
   private formatDate(timestamp: number): string {
     const date = new Date(timestamp);
     const now = Date.now();
     const diff = now - timestamp;
-    
+
     // Less than 1 hour ago
     if (diff < 60 * 60 * 1000) {
       const minutes = Math.floor(diff / (60 * 1000));
       return `${minutes} minute${minutes !== 1 ? 's' : ''} ago`;
     }
-    
+
     // Less than 24 hours ago
     if (diff < 24 * 60 * 60 * 1000) {
       const hours = Math.floor(diff / (60 * 60 * 1000));
       return `${hours} hour${hours !== 1 ? 's' : ''} ago`;
     }
-    
+
     // Less than 7 days ago
     if (diff < 7 * 24 * 60 * 60 * 1000) {
       const days = Math.floor(diff / (24 * 60 * 60 * 1000));
       return `${days} day${days !== 1 ? 's' : ''} ago`;
     }
-    
+
     // Default to full date
-    return date.toLocaleDateString('en-US', { 
-      month: 'short', 
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
       day: 'numeric',
       year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
     });
@@ -822,7 +818,7 @@ export class UplStatuspageIncidents extends DeesElement {
     const minutes = Math.floor(milliseconds / (60 * 1000));
     const hours = Math.floor(minutes / 60);
     const days = Math.floor(hours / 24);
-    
+
     if (days > 0) {
       return `${days}d ${hours % 24}h`;
     } else if (hours > 0) {
@@ -864,9 +860,9 @@ export class UplStatuspageIncidents extends DeesElement {
     if (newSubscribed.has(incident.id)) {
       newSubscribed.delete(incident.id);
       this.dispatchEvent(new CustomEvent('incidentUnsubscribe', {
-        detail: { 
+        detail: {
           incident,
-          incidentId: incident.id 
+          incidentId: incident.id
         },
         bubbles: true,
         composed: true
@@ -874,7 +870,7 @@ export class UplStatuspageIncidents extends DeesElement {
     } else {
       newSubscribed.add(incident.id);
       this.dispatchEvent(new CustomEvent('incidentSubscribe', {
-        detail: { 
+        detail: {
           incident,
           incidentId: incident.id,
           incidentTitle: incident.title,