Merge pull request #147 from zugdev/add-labels-to-preview

src/home/rendering/render-github-issues.ts

@@ -3,9 +3,10 @@ import { organizationImageCache } from "../fetch-github/fetch-issues-full";
 import { GitHubIssue } from "../github-types";
 import { taskManager } from "../home";
 import { renderErrorInModal } from "./display-popup-modal";
-import { closeModal, modal, modalBodyInner, titleAnchor, titleHeader } from "./render-preview-modal";
+import { closeModal, modal, modalBodyInner, bottomBar, titleAnchor, titleHeader, bottomBarClearLabels } from "./render-preview-modal";
 import { setupKeyboardNavigation } from "./setup-keyboard-navigation";
 import { isProposalOnlyViewer } from "../fetch-github/fetch-and-display-previews";
+import { waitForElement } from "./utils";
 
 export function renderGitHubIssues(tasks: GitHubIssue[], skipAnimation: boolean) {
   const container = taskManager.getContainer();
@@ -140,14 +141,37 @@ function parseAndGenerateLabels(task: GitHubIssue) {
 
 // Function to update and show the preview
 function previewIssue(gitHubIssue: GitHubIssue) {
-  viewIssueDetails(gitHubIssue);
+  void viewIssueDetails(gitHubIssue);
 }
 
-export function viewIssueDetails(full: GitHubIssue) {
+// Loads the issue preview modal with the issue details
+export async function viewIssueDetails(full: GitHubIssue) {
   // Update the title and body for the new issue
   titleHeader.textContent = full.title;
   titleAnchor.href = full.html_url;
   if (!full.body) return;
+
+  // Remove any existing cloned labels from the bottom bar
+  bottomBarClearLabels();
+
+  // Wait for the issue element to exist, useful when loading issue from URL
+  const issueElement = await waitForElement(`div[data-issue-id="${full.id}"]`);
+
+  const labelsDiv = issueElement.querySelector(".labels");
+  if (labelsDiv) {
+    // Clone the labels div and remove the img child if it exists
+    const clonedLabels = labelsDiv.cloneNode(true) as HTMLElement;
+    const imgElement = clonedLabels.querySelector("img");
+    if (imgElement) clonedLabels.removeChild(imgElement);
+
+    // Add an extra class and set padding
+    clonedLabels.classList.add("cloned-labels");
+
+    // Prepend the cloned labels to the modal body
+    bottomBar.prepend(clonedLabels);
+  }
+
+  // Set the issue body content using `marked`
   modalBodyInner.innerHTML = marked(full.body) as string;
 
   // Show the preview
@@ -184,18 +208,16 @@ export function loadIssueFromUrl() {
 
   // If ID doesn't exist, don't load issue
   const issue: GitHubIssue = taskManager.getGitHubIssueById(Number(issueID)) as GitHubIssue;
-  console.log(issue);
-  console.log(issueID);
+
   if (!issue) {
-    console.log("deleting");
     const newURL = new URL(window.location.href);
     newURL.searchParams.delete("issue");
     newURL.searchParams.delete("proposal");
     window.history.pushState({}, "", newURL.toString());
     return;
   }
 
-  viewIssueDetails(issue);
+  void viewIssueDetails(issue);
 }
 
 export function applyAvatarsToIssues() {

src/home/rendering/render-preview-modal.ts

@@ -2,6 +2,7 @@ export const modal = document.getElementById("preview-modal") as HTMLDivElement;
 export const titleAnchor = document.getElementById("preview-title-anchor") as HTMLAnchorElement;
 export const titleHeader = document.getElementById("preview-title") as HTMLHeadingElement;
 export const modalBodyInner = document.getElementById("preview-body-inner") as HTMLDivElement;
+export const bottomBar = document.getElementById("bottom-bar") as HTMLDivElement;
 export const issuesContainer = document.getElementById("issues-container");
 
 const closeButton = modal.querySelector(".close-preview") as HTMLButtonElement;
@@ -17,9 +18,17 @@ export function closeModal() {
   modal.classList.remove("active");
   document.body.classList.remove("preview-active");
   issuesContainer?.classList.remove("keyboard-selection");
+  bottomBarClearLabels();
 
   const newURL = new URL(window.location.href);
   newURL.searchParams.delete("issue");
   newURL.searchParams.delete("proposal");
   window.history.replaceState({}, "", newURL.toString());
 }
+
+export function bottomBarClearLabels() {
+  const existingClonedLabels = bottomBar.querySelector(".labels.cloned-labels");
+  if (existingClonedLabels) {
+    bottomBar.removeChild(existingClonedLabels);
+  }
+}

src/home/rendering/setup-keyboard-navigation.ts

@@ -105,7 +105,7 @@ function keyDownHandler() {
         if (issueId) {
           const gitHubIssue = taskManager.getGitHubIssueById(parseInt(issueId, 10));
           if (gitHubIssue) {
-            viewIssueDetails(gitHubIssue);
+            void viewIssueDetails(gitHubIssue);
           }
         }
       }

src/home/rendering/utils.ts

@@ -0,0 +1,22 @@
+// Utility function to wait for an element to appear
+export function waitForElement(selector: string): Promise<Element> {
+  return new Promise((resolve) => {
+    const element = document.querySelector(selector);
+    if (element) {
+      resolve(element);
+      return;
+    }
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach(() => {
+        const element = document.querySelector(selector);
+        if (element) {
+          resolve(element);
+          observer.disconnect();
+        }
+      });
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
+}

static/style/inverted-style.css

@@ -12,9 +12,22 @@
     justify-content: space-between;
   }
   #bottom-bar {
-    align-items: center;
-    justify-content: center;
+    display: flex;
     height: 72px;
+    width: 100%;
+    overflow: hidden;
+  }
+  .preview-active #bottom-bar {
+    align-items: center;
+  }
+  .labels.cloned-labels {
+    display: none;
+  }
+  body.preview-active .labels.cloned-labels {
+    flex-grow: 1;
+    padding: 0px 6px;
+    display: flex;
+    width: 0%;
   }
   #filters-bottom {
     flex-direction: column;
@@ -840,23 +853,22 @@
     border: unset;
   }
   div#mobile-modal-scrub {
-    position: fixed;
     display: none;
   }
   div#mobile-modal-scrub > button {
-    margin-right: 6px;
+    margin-right: 2px;
     font-size: 24px;
-    padding: 0 48px;
+    padding: 0 27px;
     border: unset;
   }
-  #bottom-bar {
-    overflow: visible;
-  }
   .preview-active #filters-bottom {
     display: none;
   }
   .preview-active div#mobile-modal-scrub {
-    display: unset;
+    margin-left: auto;
+    display: flex;
+    padding-right: 6px;
+    align-items: right;
   }
   .preview {
     position: fixed;

static/style/style.css

@@ -12,9 +12,22 @@
     justify-content: space-between;
   }
   #bottom-bar {
-    align-items: center;
-    justify-content: center;
+    display: flex;
     height: 72px;
+    width: 100%;
+    overflow: hidden;
+  }
+  .preview-active #bottom-bar {
+    align-items: center;
+  }
+  .labels.cloned-labels {
+    display: none;
+  }
+  body.preview-active .labels.cloned-labels {
+    flex-grow: 1;
+    padding: 0px 6px;
+    display: flex;
+    width: 0%;
   }
   #filters-bottom {
     flex-direction: column;
@@ -840,23 +853,22 @@
     border: unset;
   }
   div#mobile-modal-scrub {
-    position: fixed;
     display: none;
   }
   div#mobile-modal-scrub > button {
-    margin-right: 6px;
+    margin-right: 2px;
     font-size: 24px;
-    padding: 0 48px;
+    padding: 0 27px;
     border: unset;
   }
-  #bottom-bar {
-    overflow: visible;
-  }
   .preview-active #filters-bottom {
     display: none;
   }
   .preview-active div#mobile-modal-scrub {
-    display: unset;
+    margin-left: auto;
+    display: flex;
+    padding-right: 6px;
+    align-items: right;
   }
   .preview {
     position: fixed;