feat: add fixed side panel on non-problem pages (#46)

extension/src/panel.ts

@@ -0,0 +1,115 @@
+const APP_URL = import.meta.env.VITE_APP_URL;
+
+const chevronIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="chevron-icon-svg" width="28" height="28">
+    <path
+        d="M16.293 14.707a1 1 0 001.414-1.414l-5-5a1 1 0 00-1.414 0l-5 5a1 1 0 101.414 1.414L12 10.414l4.293 4.293z"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+    ></path>
+</svg>
+`;
+
+async function main() {
+    const panelContainer = document.createElement("div");
+    panelContainer.id = "leetrooms-panel-container";
+    panelContainer.style.display = "none";
+
+    const panelTab = document.createElement("div");
+    panelTab.id = "leetrooms-panel-tab";
+    panelTab.style.display = "flex";
+    panelTab.innerHTML = chevronIcon;
+    const closeText = document.createElement("div");
+    closeText.innerHTML = "Hide";
+    panelTab.appendChild(closeText);
+
+    const reactRoot = document.createElement("iframe");
+    reactRoot.src = APP_URL;
+    reactRoot.id = "leetrooms-iframe";
+    reactRoot.allow = "clipboard-read; clipboard-write";
+
+    const openPanelTab = document.createElement("div");
+    openPanelTab.id = "leetrooms-open-panel-tab";
+    openPanelTab.style.display = "none";
+
+    const openPanelTabChevron = document.createElement("div");
+    openPanelTabChevron.id = "leetrooms-open-panel-tab-chevron";
+    openPanelTabChevron.innerHTML = chevronIcon;
+
+    const openPanelTabText = document.createElement("div");
+    openPanelTabText.id = "leetrooms-open-panel-tab-text";
+    openPanelTabText.innerHTML = "LeetRooms&nbsp;&nbsp;&nbsp;⚔️";
+
+    panelTab.addEventListener("click", () => {
+        setToggleState(false);
+    });
+    openPanelTab.addEventListener("click", () => {
+        setToggleState(true);
+    });
+
+    chrome.storage.local.get("leetroomsDarkMode", (result) => {
+        if (result.leetroomsDarkMode === true) {
+            document.body.classList.add("leetrooms-dark");
+        } else {
+            document.body.classList.remove("leetrooms-dark");
+        }
+    });
+
+    chrome.storage.local.get("leetroomsFixedPanelToggleState", (result) => {
+        if (result.leetroomsFixedPanelToggleState === true) {
+            setToggleState(true);
+        } else {
+            setToggleState(false);
+        }
+    });
+
+    chrome.storage.onChanged.addListener((changes, namespace) => {
+        for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
+            if (key == "leetroomsFixedPanelToggleState") {
+                if (newValue == true) {
+                    setToggleState(true);
+                } else {
+                    setToggleState(false);
+                }
+            }
+            if (key == "leetroomsDarkMode" && reactRoot.contentWindow) {
+                reactRoot.contentWindow.postMessage(
+                    {
+                        extension: "leetrooms",
+                        event: "darkMode",
+                        isDarkMode: newValue,
+                    },
+                    APP_URL
+                );
+                if (newValue === true) {
+                    document.body.classList.add("leetrooms-dark");
+                } else {
+                    document.body.classList.remove("leetrooms-dark");
+                }
+            }
+        }
+    });
+
+    document.body.prepend(panelContainer);
+    panelContainer.appendChild(panelTab);
+    panelContainer.appendChild(reactRoot);
+    openPanelTabText.prepend(openPanelTabChevron);
+    openPanelTab.appendChild(openPanelTabText);
+    document.body.appendChild(openPanelTab);
+
+    function setToggleState(toggleState: boolean) {
+        if (toggleState) {
+            panelContainer.style.display = "block";
+            openPanelTab.style.display = "none";
+            chrome.storage.local.set({ leetroomsFixedPanelToggleState: true });
+        } else {
+            panelContainer.style.display = "none";
+            openPanelTab.style.display = "flex";
+            chrome.storage.local.set({ leetroomsFixedPanelToggleState: false });
+        }
+    }
+}
+
+main();
+
+export {};

extension/src/public/manifest.json

@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "LeetRooms",
-    "version": "0.1.10",
+    "version": "0.1.11",
     "description": "Multiplayer rooms for LeetCode.",
     "homepage_url": "https://leetrooms.com",
     "permissions": ["activeTab", "storage", "webRequest"],
@@ -25,6 +25,12 @@
             "matches": ["https://leetcode.com/problems/*"],
             "css": ["content.css"],
             "js": ["content.js"]
+        },
+        {
+            "matches": ["https://leetcode.com/*"],
+            "exclude_matches": ["https://leetcode.com/problems/*"],
+            "css": ["panel.css"],
+            "js": ["panel.js"]
         }
     ],
     "background": {

extension/src/public/panel.css

@@ -0,0 +1,101 @@
+#leetrooms-panel-container {
+    width: 325px;
+    height: 625px;
+    position: fixed;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    z-index: 999;
+    border-top: 2px solid #cccccc;
+    border-left: 2px solid #cccccc;
+    border-bottom: 2px solid #cccccc;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    padding-left: 8px;
+    background-color: hsl(220, 23%, 97%);
+    color: black;
+}
+
+.leetrooms-dark #leetrooms-panel-container {
+    border-top: 2px solid #666666;
+    border-left: 2px solid #666666;
+    border-bottom: 2px solid #666666;
+}
+
+#leetrooms-panel-tab {
+    height: 6%;
+    width: 100%;
+    cursor: pointer;
+    background-color: hsl(0, 0%, 100%);
+    border-top: 8px solid hsl(220, 23%, 97%);
+    border-right: 8px solid hsl(220, 23%, 97%);
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    color: rgb(156 163 175);
+}
+
+.leetrooms-dark #leetrooms-panel-tab {
+    background-color: hsl(0, 0%, 16%);
+    border-top: 8px solid hsl(0, 0%, 10%);
+    border-right: 8px solid hsl(0, 0%, 10%);
+}
+
+#leetrooms-iframe {
+    height: 94%;
+    width: 100%;
+    border: none;
+}
+
+#leetrooms-open-panel-tab {
+    width: 42px;
+    height: 170px;
+    position: fixed;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+    z-index: 999;
+    border-top: 2px solid #666666;
+    border-left: 2px solid #666666;
+    border-bottom: 2px solid #666666;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    background-color: hsl(0, 0%, 10%, 60%);
+    color: white;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#leetrooms-open-panel-tab-text {
+    transform: rotate(90deg);
+    white-space: nowrap;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 10px;
+    padding-right: 8px;
+    font-weight: bold;
+}
+
+.leetrooms-dark #leetrooms-panel-container {
+    background-color: hsl(0, 0%, 10%);
+    color: white;
+}
+
+.chevron-icon-svg {
+    fill: white;
+    vertical-align: middle;
+}
+
+#leetrooms-panel-tab .chevron-icon-svg {
+    transform: rotate(90deg);
+    fill: rgb(156 163 175);
+}
+
+#leetrooms-open-panel-tab .chevron-icon-svg {
+    transform: rotate(180deg);
+}

extension/src/public/popup.html

@@ -14,7 +14,8 @@ <h2>LeetRooms</h2>
             <div id="leetrooms-instructions">
                 <div id="leetrooms-instructions-text">
                     To use LeetRooms, go to any LeetCode problem and refresh the
-                    page. You should see the LeetRooms side panel on the right.
+                    page. You must be using the new LeetCode UI. You should see
+                    the LeetRooms side panel on the right.
                 </div>
                 <div class="flex-col">
                     <div id="leetcode-link">Go to a LeetCode problem</div>

extension/src/public/popup.js

@@ -8,7 +8,7 @@ const instructionsContainer = document.querySelector("#leetrooms-instructions");
 const settingsContainer = document.querySelector("#leetrooms-settings");
 chrome.tabs.query({ currentWindow: true, active: true }, (tabs) => {
     const currentUrl = tabs[0].url;
-    if (currentUrl.includes("https://leetcode.com/problems/")) {
+    if (currentUrl.includes("https://leetcode.com")) {
         settingsContainer.style.display = "block";
         instructionsContainer.style.display = "none";
         chrome.storage.local.get("leetroomsDarkMode", (result) => {

extension/vite.config.ts

@@ -11,11 +11,13 @@ export default defineConfig({
         rollupOptions: {
             input: {
                 content: "./src/content.ts",
+                panel: "./src/panel.ts",
                 index: "./src/index.html",
             },
             output: {
                 entryFileNames: (assetInfo) => {
-                    return assetInfo.name === "content"
+                    return assetInfo.name === "content" ||
+                        assetInfo.name === "panel"
                         ? "[name].js"
                         : "assets/[name].js";
                 },