feat: add issues in URL and handle history state

src/home/home.ts

@@ -6,6 +6,7 @@ import { readyToolbar } from "./ready-toolbar";
 import { registerServiceWorker } from "./register-service-worker";
 import { renderServiceMessage } from "./render-service-message";
 import { renderErrorInModal } from "./rendering/display-popup-modal";
+import { loadIssueFromURL } from "./rendering/render-github-issues";
 import { renderGitRevision } from "./rendering/render-github-login-button";
 import { generateSortingToolbar } from "./sorting/generate-sorting-buttons";
 import { TaskManager } from "./task-manager";
@@ -38,6 +39,7 @@ void (async function home() {
   void readyToolbar();
   await taskManager.syncTasks(); // Sync tasks on load
   void displayGitHubIssues();
+  loadIssueFromURL();
   if ("serviceWorker" in navigator) {
     registerServiceWorker();
   }

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 { modal, modalBodyInner, titleAnchor, titleHeader } from "./render-preview-modal";
+import { closeModal, modal, modalBodyInner, titleAnchor, titleHeader } from "./render-preview-modal";
 import { setupKeyboardNavigation } from "./setup-keyboard-navigation";
 
 export function renderGitHubIssues(tasks: GitHubIssue[]) {
@@ -149,6 +149,40 @@ export function viewIssueDetails(full: GitHubIssue) {
   modal.classList.add("active");
   modal.classList.remove("error");
   document.body.classList.add("preview-active");
+
+  updateURLWithIssueID(full.id);
+}
+
+// Adds issue ID to url in format (i.e http://localhost:8080/?issue=2559612103)
+function updateURLWithIssueID(issueID: number) {
+  const newURL = new URL(window.location.href);
+  newURL.searchParams.set("issue", String(issueID));
+
+  // Push to history
+  window.history.pushState({ issueID }, "", newURL.toString());
+}
+
+// Opens the preview modal if a URL contains an issueID
+export function loadIssueFromURL() {
+  const urlParams = new URLSearchParams(window.location.search);
+  const issueID = urlParams.get("issue");
+
+  // If no issue ID in the URL, don't load issue
+  if (!issueID) {
+    closeModal();
+    return;
+  }
+
+  // If ID doesn't exist, don't load issue
+  const issue: GitHubIssue = taskManager.getGitHubIssueById(Number(issueID)) as GitHubIssue;
+  if (!issue) {
+    const newURL = new URL(window.location.href);
+    newURL.searchParams.delete("issue");
+    window.history.pushState({}, "", newURL.toString());
+    return;
+  }
+
+  viewIssueDetails(issue);
 }
 
 export function applyAvatarsToIssues() {

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

@@ -43,8 +43,13 @@ document.addEventListener("keydown", (event) => {
   }
 });
 
-function closeModal() {
+export function closeModal() {
   modal.classList.remove("active");
   document.body.classList.remove("preview-active");
   issuesContainer?.classList.remove("keyboard-selection");
+
+  const newURL = new URL(window.location.href);
+  newURL.searchParams.delete("issue");
+  console.log("p");
+  window.history.pushState({}, "", newURL.toString());
 }