@uptime.link/statuspage 1.3.0 → 1.4.0

package/dist_watch/bundle.js

@@ -50509,6 +50509,20 @@ var UplStatuspageIncidents = class extends (_a5 = DeesElement, _currentIncidents
     __privateAdd(this, _subscribedIncidentIds, __runInitializers(_init5, 28, this, [])), __runInitializers(_init5, 31, this);
     __privateAdd(this, _expandedIncidents, __runInitializers(_init5, 32, this, /* @__PURE__ */ new Set())), __runInitializers(_init5, 35, this);
     __privateAdd(this, _subscribedIncidents, __runInitializers(_init5, 36, this, /* @__PURE__ */ new Set())), __runInitializers(_init5, 39, this);
+    __publicField(this, "statusIcons", {
+      investigating: "lucide:Search",
+      identified: "lucide:Target",
+      monitoring: "lucide:Eye",
+      resolved: "lucide:CheckCircle",
+      postmortem: "lucide:FileText"
+    });
+    __publicField(this, "statusLabels", {
+      investigating: "Investigating",
+      identified: "Identified",
+      monitoring: "Monitoring",
+      resolved: "Resolved",
+      postmortem: "Postmortem"
+    });
   }
   async connectedCallback() {
     await super.connectedCallback();
@@ -50531,13 +50545,13 @@ var UplStatuspageIncidents = class extends (_a5 = DeesElement, _currentIncidents
         ` : this.currentIncidents.length ? x`
           ${this.currentIncidents.map((incident) => this.renderIncident(incident, true))}
         ` : x`<div class="noIncidentBox">No incidents ongoing.</div>`}
-        
+
         <uplinternal-miniheading>Past Incidents</uplinternal-miniheading>
         ${this.loading ? x`
           <div class="loading-skeleton"></div>
           <div class="loading-skeleton"></div>
         ` : this.pastIncidents.length ? this.pastIncidents.slice(0, 5).map((incident) => this.renderIncident(incident, false)) : x`<div class="noIncidentBox">No past incidents in the last ${this.daysToShow} days.</div>`}
-        
+
         ${this.pastIncidents.length > 5 && !this.loading ? x`
           <div class="show-more">
             <button class="show-more-button" @click=${this.handleShowMore}>
@@ -50552,73 +50566,53 @@ var UplStatuspageIncidents = class extends (_a5 = DeesElement, _currentIncidents
     const latestUpdate = incident.updates[incident.updates.length - 1];
     const duration = incident.endTime ? this.formatDuration(incident.endTime - incident.startTime) : this.formatDuration(Date.now() - incident.startTime);
     const isActive = isCurrent && latestUpdate?.status !== "resolved";
+    const isExpanded = this.expandedIncidents.has(incident.id);
     return x`
-      <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 ? x`
-                <span>Ended: ${this.formatDate(incident.endTime)}</span>
-              ` : ""}
-            </div>
-            ${!this.expandedIncidents.has(incident.id) ? x`
-              <div style="
-                margin-top: ${r(spacing.sm)};
-                font-size: 13px;
-                color: ${colors.text.secondary};
-                display: flex;
-                align-items: center;
-                gap: ${r(spacing.md)};
-              ">
-                ${incident.impact ? x`
-                  <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: ${r(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]} .iconSize=${12}></dees-icon>
+                ${this.statusLabels[latestUpdate.status] || 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) ? x`
+
+        ${isExpanded ? x`
         <div class="incident-body">
-          <div class="incident-impact">
-            <strong>Impact:</strong> ${incident.impact}
-          </div>
-          
+          ${incident.impact ? x`
+            <div class="incident-impact">
+              <strong>Impact:</strong> ${incident.impact}
+            </div>
+          ` : ""}
+
           ${incident.affectedServices.length > 0 ? x`
             <div class="affected-services">
               <div class="affected-services-title">Affected Services:</div>
@@ -50627,7 +50621,7 @@ var UplStatuspageIncidents = class extends (_a5 = DeesElement, _currentIncidents
               `)}
             </div>
           ` : ""}
-          
+
           ${incident.updates.length > 0 ? x`
             <div class="incident-updates">
               <h4 class="updates-title">Updates</h4>
@@ -50636,21 +50630,21 @@ var UplStatuspageIncidents = class extends (_a5 = DeesElement, _currentIncidents
               </div>
             </div>
           ` : ""}
-          
+
           ${incident.rootCause && isCurrent === false ? x`
             <div class="incident-impact" style="margin-top: 12px;">
               <strong>Root Cause:</strong> ${incident.rootCause}
             </div>
           ` : ""}
-          
+
           ${incident.resolution && isCurrent === false ? x`
             <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=${(e10) => {
       e10.stopPropagation();
@@ -50658,15 +50652,10 @@ var UplStatuspageIncidents = class extends (_a5 = DeesElement, _currentIncidents
     }}
             >
               ${this.isSubscribedToIncident(incident.id) ? x`
-                <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
               ` : x`
-                <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>
@@ -50692,25 +50681,13 @@ var UplStatuspageIncidents = class extends (_a5 = DeesElement, _currentIncidents
         <div class="update-message">${update.message}</div>
         ${update.author ? x`
           <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>
         ` : ""}
       </div>
     `;
   }
-  getStatusIcon(status) {
-    return x`<span class="status-dot" style="
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: ${status === "resolved" ? colors.status.operational : status === "monitoring" ? colors.status.maintenance : status === "identified" ? colors.status.degraded : colors.status.partial};
-    "></span>`;
-  }
   formatDate(timestamp2) {
     const date = new Date(timestamp2);
     const now2 = Date.now();
@@ -50911,112 +50888,151 @@ __publicField(UplStatuspageIncidents, "styles", [
         }
       }
 
+      /* New header layout matching admin catalog */
       .incident-header {
-        padding: ${r(spacing.lg)} ${r(spacing.xl)};
-        border-left: 4px solid;
         display: flex;
-        align-items: start;
-        justify-content: space-between;
-        gap: ${r(spacing.md)};
+        align-items: flex-start;
+        gap: 16px;
+        padding: 16px;
         cursor: pointer;
         transition: background-color ${r(durations.fast)} ${r(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: ${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: ${colors.status.partial};
-      }
+      .incident-severity.critical { background: ${colors.status.major}; }
+      .incident-severity.major { background: ${colors.status.partial}; }
+      .incident-severity.minor { background: ${colors.status.degraded}; }
+      .incident-severity.maintenance { background: ${colors.status.maintenance}; }
 
-      .incident-header.minor {
-        border-left-color: ${colors.status.degraded};
+      .incident-main {
+        flex: 1;
+        min-width: 0;
       }
 
-      .incident-header.maintenance {
-        border-left-color: ${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: ${r(spacing.lg)};
-        margin-top: ${r(spacing.sm)};
-        font-size: 13px;
-        color: ${colors.text.secondary};
-        flex-wrap: wrap;
-      }
-
-      .incident-meta span {
-        display: flex;
-        align-items: center;
-        gap: 4px;
+        color: ${colors.text.primary};
       }
 
+      /* Status badge inline with title */
       .incident-status {
         display: inline-flex;
         align-items: center;
         gap: 6px;
-        padding: 6px 12px;
-        border-radius: ${r(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 ${r(durations.fast)} ${r(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")};
       }
 
-      /* Pulse for investigating status */
-      .incident-status.investigating .status-dot {
-        animation: status-pulse 1.5s ease-in-out infinite;
+      .incident-meta {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        font-size: 12px;
+        color: ${colors.text.secondary};
+        flex-wrap: wrap;
       }
 
-      @keyframes status-pulse {
-        0%, 100% { opacity: 1; transform: scale(1); }
-        50% { opacity: 0.6; transform: scale(1.2); }
+      .incident-meta-item {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .incident-meta-item dees-icon {
+        --icon-size: 12px;
+        --icon-color: ${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: ${colors.text.muted};
+        transition: all ${r(durations.fast)} ${r(easings.default)};
+        flex-shrink: 0;
+      }
+
+      .incident-expand:hover {
+        background: ${colors.background.muted};
+        color: ${colors.text.primary};
+      }
+
+      .incident-expand dees-icon {
+        --icon-size: 16px;
+        transition: transform ${r(durations.fast)} ${r(easings.default)};
+      }
+
+      .incident-expand.expanded dees-icon {
+        transform: rotate(180deg);
       }
 
       .incident-body {
-        padding: 0 ${r(spacing.xl)} ${r(spacing.xl)} ${r(spacing.xl)};
+        padding: 0 16px 16px 36px;
         animation: slideDown 0.3s ${r(easings.default)};
       }
 
@@ -51091,22 +51107,6 @@ __publicField(UplStatuspageIncidents, "styles", [
         padding-left: 24px;
       }
 
-      /* Vertical connector line */
-      .timeline::before {
-        content: '';
-        position: absolute;
-        left: 7px;
-        top: 10px;
-        bottom: calc(100% - 10px);
-        height: auto;
-        width: 2px;
-        background: ${cssManager.bdTheme(
-    "linear-gradient(to bottom, #e5e7eb 0%, #d1d5db 50%, #e5e7eb 100%)",
-    "linear-gradient(to bottom, #27272a 0%, #3f3f46 50%, #27272a 100%)"
-  )};
-        border-radius: 1px;
-      }
-
       .update-item {
         position: relative;
         padding-left: ${r(spacing.lg)};
@@ -51118,7 +51118,16 @@ __publicField(UplStatuspageIncidents, "styles", [
         padding-bottom: 0;
       }
 
-      /* Timeline dot */
+      .update-item:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        left: -15px;
+        top: 18px;
+        bottom: 0;
+        width: 2px;
+        background: ${colors.border.default};
+      }
+
       .update-item::before {
         content: '';
         position: absolute;
@@ -51272,54 +51281,39 @@ __publicField(UplStatuspageIncidents, "styles", [
         background: ${cssManager.bdTheme("#dcfce7", "#065f46")};
       }
 
-      .collapsed-hint {
-        font-size: 12px;
-        color: ${colors.text.secondary};
-        text-align: center;
-        margin-top: ${r(spacing.md)};
-        opacity: 0.8;
-      }
-
-      /* Expand icon animation */
-      .expand-icon {
-        transition: transform ${r(durations.normal)} ${r(easings.default)};
-      }
-
-      .expand-icon.rotated {
-        transform: rotate(180deg);
-      }
-
       @media (max-width: 640px) {
         .container {
           padding: 0 ${r(spacing.md)} ${r(spacing.md)} ${r(spacing.md)};
         }
 
         .incident-header {
-          padding: ${r(spacing.md)};
+          padding: 12px;
         }
 
         .incident-body {
-          padding: 0 ${r(spacing.md)} ${r(spacing.md)} ${r(spacing.md)};
+          padding: 0 12px 12px 24px;
         }
 
         .incident-meta {
           flex-direction: column;
-          gap: ${r(spacing.xs)};
+          align-items: flex-start;
+          gap: 8px;
         }
 
         .timeline {
           padding-left: 20px;
         }
 
-        .timeline::before {
-          left: 4px;
-        }
-
         .update-item::before {
           left: -18px;
           width: 10px;
           height: 10px;
         }
+
+        .update-item:not(:last-child)::after {
+          left: -12px;
+          top: 16px;
+        }
       }
     `
 ]);