36-migrate to sidepanel instead of popup (#38)

* introduce side bar/side panel * add support for custom jd in sidebar * clear up the screen from prev elemtns * language changes
UmairJibran · Dec 8, 2024 · 848ef47 · 848ef47
1 parent c05bfd5
commit 848ef47
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 14 deletions.
diff --git a/addon/manifest.json b/addon/manifest.json
@@ -16,7 +16,15 @@
     "default_popup": "src/popup.html"
   },
 
-  "permissions": ["activeTab", "tabs"],
+  "permissions": ["activeTab", "tabs", "sidePanel", "storage"],
+  "side_panel": {
+    "default_path": "src/sidebar.html"
+  },
+  "sidebar_action": {
+    "default_title": "Waltzes",
+    "default_panel": "src/sidebar.html",
+    "open_at_install": true
+  },
 
   "web_accessible_resources": [],
 

diff --git a/addon/src/main.js b/addon/src/main.js
@@ -15,8 +15,9 @@ function copyToClipboard(text) {
   document.body.removeChild(copyText);
 
   const div = document.createElement("div");
+  div.id = "copied";
   div.innerHTML = `<div class="mt-2">
-    <small><code>Coppied to your clipboard</code></small>
+    <small><code>Copied to your clipboard</code></small>
   </div>`;
 
   const mainDiv = document.getElementById("popup");
@@ -25,6 +26,7 @@ function copyToClipboard(text) {
 
 function notSupported(title, url) {
   const div = document.createElement("div");
+  div.id = "not-supported";
   div.innerHTML = `<div class="mt-2">
     <p><code>${title}</code> is not <em>yet</em> supported</p>
     <a href="https://github.com/UmairJibran/waltzes/issues/new?title=${title}&body=${url}" target="_blank">Request support</a>
@@ -35,6 +37,7 @@ function notSupported(title, url) {
 
 function acknowledgeUser(bestMatchSection) {
   const div = document.createElement("div");
+  div.id = "acknowledgement";
   div.innerHTML = `<div class="mt-2">
     <p>Cover Letter created based on: <span class="font-monospace">${bestMatchSection}</span></p>
   </div>`;
@@ -63,34 +66,59 @@ function showCoverLetter(coverLetter) {
 
   const mainDiv = document.getElementById("popup");
   mainDiv.appendChild(copyButton);
+  copyButton.id = "copy-button";
   mainDiv.appendChild(div);
+  div.id = "cover-letter";
   mainDiv.appendChild(clArea);
+  clArea.id = "cl-area";
 }
 
 generateCLButton.addEventListener("click", async function () {
+  [
+    "not-supported",
+    "acknowledgement",
+    "cover-letter",
+    "copy-button",
+    "cl-area",
+    "copied",
+  ].forEach((id) => {
+    const element = document.getElementById(id);
+    if (element) element.remove();
+  });
+
   const loader = document.getElementById("loader");
-  const currentTab = await getCurrentTab();
+  const customJd = document.getElementById("custom-job-description");
   const savedHost = localStorage.getItem("host") || "http://localhost:5000";
   const baseUrl = [savedHost, "job-details"].join("/");
-  let jobBoard = "";
-  if (currentTab.url.includes("greenhouse")) jobBoard = "greenhouse";
-  if (currentTab.url.includes("lever")) jobBoard = "lever";
+  let url = "";
+  if (customJd && customJd.value) {
+    url = `${baseUrl}/custom-jd`;
+  } else {
+    const currentTab = await getCurrentTab();
+    let jobBoard = "";
+    if (currentTab.url.includes("greenhouse")) jobBoard = "greenhouse";
+    if (currentTab.url.includes("lever")) jobBoard = "lever";
 
-  if (!jobBoard) {
-    notSupported(currentTab.title, currentTab.url);
-    return;
+    if (!jobBoard) {
+      notSupported(currentTab.title, currentTab.url);
+      return;
+    }
+    url = `${baseUrl}/${jobBoard}?url=${currentTab.url}`;
   }
+
   const openAiKey = localStorage.getItem("openAiKey");
-  let url = `${baseUrl}/${jobBoard}?url=${currentTab.url}`;
   if (openAiKey) url += `&openAiKey=${openAiKey}`;
 
   generateCLButton.disabled = true;
   loader.hidden = false;
   const response = await fetch(url, {
-    method: "GET",
+    method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
+    body: JSON.stringify({
+      ...(customJd && { customJd: customJd.value }),
+    }),
     mode: "cors",
   });
 

diff --git a/addon/src/sidebar.html b/addon/src/sidebar.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+            rel="stylesheet"
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+            integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
+            crossorigin="anonymous"
+        />
+        <link rel="stylesheet" href="./style.css" />
+    </head>
+    <body>
+        <div class="container popup-main" id="popupMain">
+            <div class="mt-4 position-relative py-2 px-4" id="popup">
+                <h1>Waltzes - Panel</h1>
+                <textarea
+                    id="custom-job-description"
+                    class="my-2 form-control"
+                    rows="10"
+                    placeholder="Paste the job description here..."
+                ></textarea>
+                <button
+                    id="btn"
+                    type="button"
+                    class="btn btn-primary position-relative"
+                >
+                    <span
+                        class="spinner-grow spinner-grow-sm"
+                        id="loader"
+                        hidden
+                    ></span>
+                    Craft Cover Letter!
+                </button>
+            </div>
+        </div>
+
+        <script src="./main.js"></script>
+    </body>
+</html>
diff --git a/python/app.py b/python/app.py
@@ -21,14 +21,17 @@ def test():
     return "Hello, World!"
 
 
-@app.route("/job-details/<job_board>", methods=["GET"])
+@app.route("/job-details/<job_board>", methods=["POST"])
 def get_job_details(job_board):
     job_url = request.args.get("url")
     openai_api_key = request.args.get("openAiKey")
     job_details = ""
 
-    if job_url is None:
-        return "Please provide a job URL"
+    job_details = request.get_json()
+    job_details = job_details.get("customJd")
+
+    if job_url is None and job_details is None:
+        return "Please provide a job URL or custom job description"
 
     match job_board:
         case "greenhouse":