From 929898009453ff1da26a6942c462f3734736f81a Mon Sep 17 00:00:00 2001
From: zugdev <zug.dev@proton.me>
Date: Wed, 30 Oct 2024 02:13:47 -0300
Subject: [PATCH 1/5] feat: add labels to issue preview if appropriate

---
 src/home/rendering/render-github-issues.ts    | 45 ++++++++++++++++---
 .../rendering/setup-keyboard-navigation.ts    |  2 +-
 src/home/rendering/utils.ts                   | 22 +++++++++
 3 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 src/home/rendering/utils.ts

diff --git a/src/home/rendering/render-github-issues.ts b/src/home/rendering/render-github-issues.ts
index 38556ad4..816dfb1f 100644
--- a/src/home/rendering/render-github-issues.ts
+++ b/src/home/rendering/render-github-issues.ts
@@ -6,6 +6,7 @@ import { renderErrorInModal } from "./display-popup-modal";
 import { closeModal, modal, modalBodyInner, titleAnchor, titleHeader } 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[]) {
   const container = taskManager.getContainer();
@@ -136,15 +137,47 @@ 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) {
+  // Reset the modal body to avoid content accumulation from previous issues
+  modalBodyInner.innerHTML = "";
+
   // Update the title and body for the new issue
   titleHeader.textContent = full.title;
   titleAnchor.href = full.html_url;
   if (!full.body) return;
-  modalBodyInner.innerHTML = marked(full.body) as string;
+
+  // 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");
+    clonedLabels.style.padding = "5px";
+    clonedLabels.style.paddingLeft = "0px";
+    clonedLabels.style.paddingBottom = "30px";
+
+    if (window.innerWidth < 1281) {
+      clonedLabels.style.display = "flex";
+    } else {
+      clonedLabels.style.display = "none"; // hide if width >= 1281px
+    }
+
+    // Prepend the cloned labels to the modal body
+    modalBodyInner.prepend(clonedLabels);
+  }
+
+  // Set the issue body content using `marked`
+  modalBodyInner.innerHTML += marked(full.body);
 
   // Show the preview
   modal.classList.add("active");
@@ -180,10 +213,8 @@ 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");
@@ -191,7 +222,7 @@ export function loadIssueFromUrl() {
     return;
   }
 
-  viewIssueDetails(issue);
+  void viewIssueDetails(issue);
 }
 
 // This ensure previews load for the URL
diff --git a/src/home/rendering/setup-keyboard-navigation.ts b/src/home/rendering/setup-keyboard-navigation.ts
index 8f41abb8..55c667b1 100644
--- a/src/home/rendering/setup-keyboard-navigation.ts
+++ b/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);
           }
         }
       }
diff --git a/src/home/rendering/utils.ts b/src/home/rendering/utils.ts
new file mode 100644
index 00000000..82f24dd0
--- /dev/null
+++ b/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 });
+  });
+}
\ No newline at end of file

From e6bfd24c7c3c6380b5e0a4c97dc1450ce03d4305 Mon Sep 17 00:00:00 2001
From: zugdev <zug.dev@proton.me>
Date: Wed, 30 Oct 2024 02:13:58 -0300
Subject: [PATCH 2/5] chore: small lint

---
 src/home/rendering/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/home/rendering/utils.ts b/src/home/rendering/utils.ts
index 82f24dd0..d5841e48 100644
--- a/src/home/rendering/utils.ts
+++ b/src/home/rendering/utils.ts
@@ -19,4 +19,4 @@ export function waitForElement(selector: string): Promise<Element> {
 
     observer.observe(document.body, { childList: true, subtree: true });
   });
-}
\ No newline at end of file
+}

From 109cdd023d8f20c94baeb2b9bb017ffc54dcb3e4 Mon Sep 17 00:00:00 2001
From: zugdev <zug.dev@proton.me>
Date: Sun, 3 Nov 2024 21:51:54 -0300
Subject: [PATCH 3/5] feat: wip add labels to preview in bottombar

---
 src/home/rendering/render-github-issues.ts | 12 +++---------
 src/home/rendering/render-preview-modal.ts |  1 +
 static/style/inverted-style.css            | 17 +++++++++++++----
 static/style/style.css                     | 17 +++++++++++++----
 4 files changed, 30 insertions(+), 17 deletions(-)

diff --git a/src/home/rendering/render-github-issues.ts b/src/home/rendering/render-github-issues.ts
index b598f9a5..0f3b0bce 100644
--- a/src/home/rendering/render-github-issues.ts
+++ b/src/home/rendering/render-github-issues.ts
@@ -3,7 +3,7 @@ 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 } from "./render-preview-modal";
 import { setupKeyboardNavigation } from "./setup-keyboard-navigation";
 import { isProposalOnlyViewer } from "../fetch-github/fetch-and-display-previews";
 import { waitForElement } from "./utils";
@@ -146,9 +146,6 @@ function previewIssue(gitHubIssue: GitHubIssue) {
 
 // Loads the issue preview modal with the issue details
 export async function viewIssueDetails(full: GitHubIssue) {
-  // Reset the modal body to avoid content accumulation from previous issues
-  modalBodyInner.innerHTML = "";
-
   // Update the title and body for the new issue
   titleHeader.textContent = full.title;
   titleAnchor.href = full.html_url;
@@ -166,9 +163,6 @@ export async function viewIssueDetails(full: GitHubIssue) {
 
     // Add an extra class and set padding
     clonedLabels.classList.add("cloned-labels");
-    clonedLabels.style.padding = "5px";
-    clonedLabels.style.paddingLeft = "0px";
-    clonedLabels.style.paddingBottom = "30px";
 
     if (window.innerWidth < 1281) {
       clonedLabels.style.display = "flex";
@@ -177,11 +171,11 @@ export async function viewIssueDetails(full: GitHubIssue) {
     }
 
     // Prepend the cloned labels to the modal body
-    modalBodyInner.prepend(clonedLabels);
+    bottomBar.prepend(clonedLabels);
   }
 
   // Set the issue body content using `marked`
-  modalBodyInner.innerHTML += marked(full.body);
+  modalBodyInner.innerHTML = marked(full.body) as string;
 
   // Show the preview
   modal.classList.add("active");
diff --git a/src/home/rendering/render-preview-modal.ts b/src/home/rendering/render-preview-modal.ts
index f31314af..04ae5610 100644
--- a/src/home/rendering/render-preview-modal.ts
+++ b/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;
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
index 31790f22..5e4e9634 100644
--- a/static/style/inverted-style.css
+++ b/static/style/inverted-style.css
@@ -12,9 +12,16 @@
     justify-content: space-between;
   }
   #bottom-bar {
+    display: flex;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
     height: 72px;
+    width: 100%;
+  }
+  .labels.cloned-labels {
+    width: 60%;
+    padding: 0px 6px;
+    display: flex;
   }
   #filters-bottom {
     flex-direction: column;
@@ -846,13 +853,12 @@
     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 {
@@ -863,6 +869,9 @@
   }
   .preview-active div#mobile-modal-scrub {
     display: unset;
+    padding-right: 6px;
+    min-width: 165px;
+    width: 40%;
   }
   .preview {
     position: fixed;
diff --git a/static/style/style.css b/static/style/style.css
index a14b0305..a0e10442 100644
--- a/static/style/style.css
+++ b/static/style/style.css
@@ -12,9 +12,16 @@
     justify-content: space-between;
   }
   #bottom-bar {
+    display: flex;
+    flex-direction: row;
     align-items: center;
-    justify-content: center;
     height: 72px;
+    width: 100%;
+  }
+  .labels.cloned-labels {
+    width: 60%;
+    padding: 0px 6px;
+    display: flex;
   }
   #filters-bottom {
     flex-direction: column;
@@ -846,13 +853,12 @@
     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 {
@@ -863,6 +869,9 @@
   }
   .preview-active div#mobile-modal-scrub {
     display: unset;
+    padding-right: 6px;
+    min-width: 165px;
+    width: 40%;
   }
   .preview {
     position: fixed;

From 7dce43fcb6b3aa2354d2a45a0723c9096fdebb25 Mon Sep 17 00:00:00 2001
From: zugdev <zug.dev@proton.me>
Date: Mon, 4 Nov 2024 18:21:01 -0300
Subject: [PATCH 4/5] feat: make bottom bar labels responsive

---
 src/home/rendering/render-github-issues.ts | 11 ++++-------
 src/home/rendering/render-preview-modal.ts | 10 +++++++++-
 static/style/inverted-style.css            | 21 ++++++++++++---------
 static/style/style.css                     | 21 ++++++++++++---------
 4 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/src/home/rendering/render-github-issues.ts b/src/home/rendering/render-github-issues.ts
index 0f3b0bce..ea1d227b 100644
--- a/src/home/rendering/render-github-issues.ts
+++ b/src/home/rendering/render-github-issues.ts
@@ -3,7 +3,7 @@ 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, bottomBar, 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";
@@ -151,6 +151,9 @@ export async function viewIssueDetails(full: GitHubIssue) {
   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}"]`);
 
@@ -164,12 +167,6 @@ export async function viewIssueDetails(full: GitHubIssue) {
     // Add an extra class and set padding
     clonedLabels.classList.add("cloned-labels");
 
-    if (window.innerWidth < 1281) {
-      clonedLabels.style.display = "flex";
-    } else {
-      clonedLabels.style.display = "none"; // hide if width >= 1281px
-    }
-
     // Prepend the cloned labels to the modal body
     bottomBar.prepend(clonedLabels);
   }
diff --git a/src/home/rendering/render-preview-modal.ts b/src/home/rendering/render-preview-modal.ts
index 04ae5610..8f6afc64 100644
--- a/src/home/rendering/render-preview-modal.ts
+++ b/src/home/rendering/render-preview-modal.ts
@@ -18,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);
+  }
+}
\ No newline at end of file
diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
index 57b4c767..1ae42c0c 100644
--- a/static/style/inverted-style.css
+++ b/static/style/inverted-style.css
@@ -13,15 +13,21 @@
   }
   #bottom-bar {
     display: flex;
-    flex-direction: row;
-    align-items: center;
     height: 72px;
     width: 100%;
+    overflow: hidden;
+  }
+  .preview-active #bottom-bar {
+    align-items: center;
   }
   .labels.cloned-labels {
-    width: 60%;
+    display: none;
+  }
+  body.preview-active .labels.cloned-labels {
+    flex-grow: 1;
     padding: 0px 6px;
     display: flex;
+    width: 0%;
   }
   #filters-bottom {
     flex-direction: column;
@@ -855,17 +861,14 @@
     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;
-    min-width: 165px;
-    width: 40%;
+    align-items: right;
   }
   .preview {
     position: fixed;
diff --git a/static/style/style.css b/static/style/style.css
index 07bc7098..865f6e15 100644
--- a/static/style/style.css
+++ b/static/style/style.css
@@ -13,15 +13,21 @@
   }
   #bottom-bar {
     display: flex;
-    flex-direction: row;
-    align-items: center;
     height: 72px;
     width: 100%;
+    overflow: hidden;
+  }
+  .preview-active #bottom-bar {
+    align-items: center;
   }
   .labels.cloned-labels {
-    width: 60%;
+    display: none;
+  }
+  body.preview-active .labels.cloned-labels {
+    flex-grow: 1;
     padding: 0px 6px;
     display: flex;
+    width: 0%;
   }
   #filters-bottom {
     flex-direction: column;
@@ -855,17 +861,14 @@
     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;
-    min-width: 165px;
-    width: 40%;
+    align-items: right;
   }
   .preview {
     position: fixed;

From d2c6b11c4c4e430d88a7af011ffb962530041190 Mon Sep 17 00:00:00 2001
From: zugdev <zug.dev@proton.me>
Date: Mon, 4 Nov 2024 18:21:37 -0300
Subject: [PATCH 5/5] chore: lint

---
 src/home/rendering/render-github-issues.ts | 2 +-
 src/home/rendering/render-preview-modal.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/home/rendering/render-github-issues.ts b/src/home/rendering/render-github-issues.ts
index ea1d227b..87b28105 100644
--- a/src/home/rendering/render-github-issues.ts
+++ b/src/home/rendering/render-github-issues.ts
@@ -153,7 +153,7 @@ export async function viewIssueDetails(full: GitHubIssue) {
 
   // 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}"]`);
 
diff --git a/src/home/rendering/render-preview-modal.ts b/src/home/rendering/render-preview-modal.ts
index 8f6afc64..214d2449 100644
--- a/src/home/rendering/render-preview-modal.ts
+++ b/src/home/rendering/render-preview-modal.ts
@@ -19,7 +19,7 @@ export function closeModal() {
   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");
@@ -31,4 +31,4 @@ export function bottomBarClearLabels() {
   if (existingClonedLabels) {
     bottomBar.removeChild(existingClonedLabels);
   }
-}
\ No newline at end of file
+}