feat: highlight new issues indicator

ubiquity · Dec 2, 2023 · c0dee12 · c0dee12
1 parent edc8b44
commit c0dee12
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 12 deletions.
diff --git a/src/home/display-github-issues.ts b/src/home/display-github-issues.ts
@@ -2,6 +2,8 @@ import { Octokit } from "@octokit/rest";
 import { homeController } from "./home-controller";
 import { GitHubIssue } from "./github-types";
 
+export type GitHubIssueWithNewFlag = GitHubIssue & { isNew?: boolean };
+
 export async function displayGitHubIssues(accessToken: string | null) {
   const container = document.getElementById("issues-container") as HTMLDivElement;
   if (!container) {
@@ -65,15 +67,24 @@ async function fetchIssues(container: HTMLDivElement, accessToken: string | null
     } catch (error) {
       console.error(error);
     }
-    const freshIssues = (await octokit.paginate("GET /repos/ubiquity/devpool-directory/issues", {
-      state: "open",
-    })) as GitHubIssue[];
-    localStorage.setItem("githubIssues", JSON.stringify(freshIssues));
+    // Fetch fresh issues and mark them as new
+    const freshIssues: GitHubIssueWithNewFlag[] = (
+      await octokit.paginate("GET /repos/ubiquity/devpool-directory/issues", {
+        state: "open",
+      })
+    ).map((issue) => ({ ...issue, isNew: true }));
+
+    // Sort the fresh issues
     const sortedIssuesByTime = sortIssuesByTime(freshIssues);
     const sortedIssuesByPriority = sortIssuesByPriority(sortedIssuesByTime);
+
+    // Pass the fresh issues to the homeController
     homeController(container, sortedIssuesByPriority);
+
+    // Remove the 'isNew' flag before saving to localStorage
+    const issuesToSave = freshIssues.map(({ ...issue }) => issue);
+    localStorage.setItem("githubIssues", JSON.stringify(issuesToSave));
   } catch (error) {
     console.error(error);
-    // container.innerHTML = `<p>Error loading issues: ${error}</p>`;
   }
 }
diff --git a/src/home/home-controller.ts b/src/home/home-controller.ts
@@ -1,6 +1,6 @@
-import { GitHubIssue } from "./github-types";
+import { GitHubIssueWithNewFlag } from "./display-github-issues";
 
-export function homeController(container: HTMLDivElement, issues: GitHubIssue[]) {
+export function homeController(container: HTMLDivElement, issues: GitHubIssueWithNewFlag[]) {
   const avatarCache: Record<string, string> = JSON.parse(localStorage.getItem("avatarCache") || "{}");
   const fetchInProgress = new Set(); // Track in-progress fetches
   const existingIssueIds = new Set(Array.from(container.querySelectorAll(".issue-element-inner")).map((element) => element.getAttribute("data-issue-id")));
@@ -13,7 +13,11 @@ export function homeController(container: HTMLDivElement, issues: GitHubIssue[])
       const issueWrapper = document.createElement("div");
       const issueElement = document.createElement("div");
       issueElement.setAttribute("data-issue-id", issue.id.toString());
-      issueWrapper.classList.add("issue-element-wrapper");
+
+      if (issue.isNew) {
+        issueWrapper.classList.add("new-issue");
+      }
+      // issueWrapper.classList.add("issue-element-wrapper", "new-issue"); // Add "new-issue" class here
       issueElement.classList.add("issue-element-inner");
       setTimeout(() => issueWrapper.classList.add("active"), delay);
 

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -46,14 +46,13 @@
     max-width: 640px;
     margin: auto;
     /* border-left: 1px solid #7f7f7f10; */
-    /* padding: 0 0 48px; */
+    padding: 0 0 48px;
     /* background: linear-gradient(to bottom, #7f7f7f00 0%, #7f7f7fff 15%, #7f7f7fff 85%, #7f7f7f00 100%); */
     -webkit-mask-image: linear-gradient(to bottom, #ffffff00, #ffffffff 0%, #ffffffff 75%, #ffffff00 100%);
-    /* height: calc(100vh - 48px); */
+    height: calc(100vh - 96px);
     overflow: scroll;
     scrollbar-width: none; /* For Firefox */
     -ms-overflow-style: none; /* For Internet Explorer and Edge */
-    height: 100vh;
   }
   &::-webkit-scrollbar {
     display: none; /* For Chrome, Safari, and Opera */
@@ -331,6 +330,19 @@
   .full {
     display: unset !important;
   }
+  .new-issue {
+    position: relative;
+  }
+  .new-issue::before {
+    content: ""; /* This is required for the pseudo-element to display */
+    display: inline-block;
+    position: absolute;
+    height: 100%;
+    width: 4px;
+    right: 0px; /* Position the pseudo-element to the right of the .new-issue element */
+    background-color: #00ffff; /* Example background color */
+  }
+
   @media screen and (max-width: 640px) {
     .full {
       display: none !important;

diff --git a/static/style/special.css b/static/style/special.css
@@ -5,6 +5,6 @@
 }
 @media (prefers-color-scheme: light) {
   html {
-    background-color: #f8f8f8;
+    background-color: #f0f0f0;
   }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -330,6 +330,19 @@
   .full {
     display: unset !important;
   }
+  .new-issue {
+    position: relative;
+  }
+  .new-issue::before {
+    content: ""; /* This is required for the pseudo-element to display */
+    display: inline-block;
+    position: absolute;
+    height: 100%;
+    width: 4px;
+    right: 0px; /* Position the pseudo-element to the right of the .new-issue element */
+    background-color: #00ffff; /* Example background color */
+  }
+
   @media screen and (max-width: 640px) {
     .full {
       display: none !important;