feat: add a latest comment preview

ubiquity · Dec 17, 2024 · f4c5f17 · f4c5f17
1 parent 9ea36aa
commit f4c5f17
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/src/home/rendering/render-github-notifications.ts b/src/home/rendering/render-github-notifications.ts
@@ -106,6 +106,7 @@ function setUpIssueElement(issueElement: HTMLDivElement, notification: GitHubAgg
         </div>
       </div>
     </div>
+    <div class="latest-comment-preview"></div>
     <div class="labels">
       ${labels.join("")}
       ${image}
@@ -175,14 +176,26 @@ async function updateLatestCommentUrls(notificationsToUpdate: { element: HTMLEle
   const fetchPromises = notificationsToUpdate.map(async ({ element, notification }) => {
     const { subject } = notification.notification;
     let url = "";
+    let avatarUrl = "";
+    let commentBody = "";
 
     if (subject.latest_comment_url) {
       try {
         const response = await fetch(subject.latest_comment_url, {
           headers: { Authorization: `Bearer ${providerToken}` },
         });
         const data = await response.json();
+        console.log("data", data);
         url = data.html_url;
+        avatarUrl = data.user.avatar_url; // get the comment author's avatar
+        commentBody = data.body; // get the comment body text
+
+        // check if commentBody contains HTML
+        const parser = new DOMParser();
+        const parsedDoc = parser.parseFromString(commentBody, "text/html");
+        if (parsedDoc.body.children.length > 0) {
+          commentBody = "This comment is in HTML format.";
+        }
       } catch (error) {
         console.error("Failed to fetch latest comment URL:", error);
       }
@@ -194,6 +207,16 @@ async function updateLatestCommentUrls(notificationsToUpdate: { element: HTMLEle
 
     // update the rendered element with the real URL
     const issueElement = element.querySelector(".issue-element-inner");
+    const previewElement = issueElement?.querySelector(".latest-comment-preview");
+
+    if (previewElement) {
+      previewElement.innerHTML = `
+        <div class="comment-preview">
+          <img src="${avatarUrl ? avatarUrl : ""}" class="comment-avatar"/>
+          <span class="comment-body">${commentBody ? commentBody : "No comment available."}</span>
+        </div>
+      `;
+    }
     if (issueElement) {
       issueElement.addEventListener("click", () => window.open(url, "_blank"));
     }

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -296,6 +296,26 @@
     padding: 6px 0px 8px 0px;
     gap: 4px;
   }
+  .latest-comment-preview {
+    padding: 8px 0px;
+  }
+
+  .comment-preview {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    width: 95%;
+  }
+
+  .comment-body {
+    align-items: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    color: #535353;
+    font-size: 14px;
+  }
+
   body {
     display: flex;
     align-items: center;

diff --git a/static/style/style.css b/static/style/style.css
@@ -296,6 +296,26 @@
     padding: 6px 0px 8px 0px;
     gap: 4px;
   }
+  .latest-comment-preview {
+    padding: 8px 0px;
+  }
+
+  .comment-preview {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    width: 95%;
+  }
+
+  .comment-body {
+    align-items: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    color: #acacac;
+    font-size: 14px;
+  }
+
   body {
     display: flex;
     align-items: center;