Add dearrow link to install page and add close button

public/help/index.html

@@ -34,6 +34,20 @@
 	      Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
     </p>
 
+    <a href="https://dearrow.ajay.app"
+        target="_blank"
+        id="dearrow-link"
+        class="dearrow-link hidden"
+        rel="noreferrer">
+        <img src="/icons/dearrow.svg"/>
+
+        <span id="dearrow-link-text">
+          
+        </span>
+
+        <img src="/icons/close.png" class="close-button"/>
+    </a>
+
     <p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
 
     <p class="smallText">

public/help/styles.css

@@ -323,3 +323,32 @@ svg {
   background-color: var(--disabled);
   color: grey;
 }
+
+.dearrow-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+
+  font-size: 16px;
+}
+
+.dearrow-link img {
+  width: 35px;
+  padding: 10px
+}
+
+.dearrow-link .close-button {
+  opacity: 0;
+  width: 15px;
+  filter: invert(0.3);
+  transition: opacity 0.2s;
+}
+
+.dearrow-link:hover .close-button {
+  opacity: 1;
+}
+
+.hidden {
+  display: none;
+}

public/options/options.css

@@ -718,3 +718,15 @@ svg {
     width: 40px;
     margin-right: 4px;
 }
+
+.dearrow-link .close-button {
+    opacity: 0;
+    width: 15px;
+    filter: invert(0.3);
+    transition: opacity 0.2s;
+    margin-left: 10px;
+}
+  
+.dearrow-link:hover .close-button {
+    opacity: 1;
+}

public/options/options.html

@@ -75,6 +75,8 @@
                         <span class="promotion-description">
                             __MSG_DeArrowPromotionMessage__
                         </span>
+
+						<img src="/icons/close.png" class="close-button"/>
                     </a>
 				</div>
 

src/config.ts

@@ -75,6 +75,7 @@ interface SBConfig {
     allowScrollingToEdit: boolean;
     deArrowInstalled: boolean;
     showDeArrowPromotion: boolean;
+    showDeArrowInSettings: boolean;
     showZoomToFillError2: boolean;
 
     // Used to cache calculated text color info
@@ -317,6 +318,7 @@ const syncDefaults = {
     allowScrollingToEdit: true,
     deArrowInstalled: false,
     showDeArrowPromotion: false,
+    showDeArrowInSettings: true,
     showZoomToFillError2: true,
 
     categoryPillColors: {},

src/help.ts

@@ -3,6 +3,7 @@ import Config from "./config";
 import { showDonationLink } from "./utils/configUtils";
 
 import { waitFor } from "../maze-utils/src";
+import { isDeArrowInstalled } from "./utils/crossExtension";
 
 if (document.readyState === "complete") {
     init();
@@ -10,6 +11,32 @@ if (document.readyState === "complete") {
     document.addEventListener("DOMContentLoaded", init);
 }
 
+// DeArrow promotion
+waitFor(() => Config.isReady()).then(() => {
+    if (Config.config.showNewFeaturePopups && Config.config.showUpsells) {
+        isDeArrowInstalled().then((installed) => {
+            if (!installed) {
+                const deArrowPromotion = document.getElementById("dearrow-link");
+                deArrowPromotion.classList.remove("hidden");
+
+                deArrowPromotion.addEventListener("click", () => Config.config.showDeArrowPromotion = false);
+
+                const text = deArrowPromotion.querySelector("#dearrow-link-text");
+                text.textContent = `${chrome.i18n.getMessage("DeArrowPromotionMessage2").split("?")[0]}? ${chrome.i18n.getMessage("DeArrowPromotionMessage3")}`;
+
+                const closeButton = deArrowPromotion.querySelector(".close-button");
+                closeButton.addEventListener("click", (e) => {
+                    e.preventDefault();
+
+                    deArrowPromotion.classList.add("hidden");
+                    Config.config.showDeArrowPromotion = false;
+                    Config.config.showDeArrowInSettings = false;
+                });
+            }
+        });
+    }
+});
+
 async function init() {
     localizeHtmlPage();
 

src/options.ts

@@ -74,13 +74,22 @@ async function init() {
     }
 
     // DeArrow promotion
-    if (Config.config.showNewFeaturePopups && Config.config.showUpsells) {
+    if (Config.config.showNewFeaturePopups && Config.config.showUpsells && Config.config.showDeArrowInSettings) {
         isDeArrowInstalled().then((installed) => {
             if (!installed) {
                 const deArrowPromotion = document.getElementById("deArrowPromotion");
                 deArrowPromotion.classList.remove("hidden");
 
                 deArrowPromotion.addEventListener("click", () => Config.config.showDeArrowPromotion = false);
+
+                const closeButton = deArrowPromotion.querySelector(".close-button");
+                closeButton.addEventListener("click", (e) => {
+                    e.preventDefault();
+                    
+                    deArrowPromotion.classList.add("hidden");
+                    Config.config.showDeArrowPromotion = false;
+                    Config.config.showDeArrowInSettings = false;
+                });
             }
         });
     }