From 6ba718de35d9b94e7dc4cbccf080125b8b1c0f7f Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Fri, 7 Oct 2022 18:38:28 +0200
Subject: [PATCH] Add a test link for bangs.

---
 source/options/components/page-main.ts        | 19 ++++++++++++++++++-
 source/options/scss/components/page-main.scss |  9 ++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/source/options/components/page-main.ts b/source/options/components/page-main.ts
index 55c8179..6a7fcd5 100644
--- a/source/options/components/page-main.ts
+++ b/source/options/components/page-main.ts
@@ -1,4 +1,8 @@
-import {ConfirmButton, FeedbackButton} from '@holllo/preact-components';
+import {
+  ConfirmButton,
+  FeedbackButton,
+  PrivacyLink,
+} from '@holllo/preact-components';
 import {html} from 'htm/preact';
 import {Component} from 'preact';
 import browser from 'webextension-polyfill';
@@ -189,6 +193,18 @@ export class PageMain extends Component<Props, State> {
         ? undefined
         : html`<p class="validate-error">${editorError}</p>`;
 
+    const testLinkAttributes: Record<string, any> = {
+      class: 'button',
+    };
+    if (this.state.editorBang.searchUrl.includes('{{bang}}')) {
+      testLinkAttributes.href = this.state.editorBang.searchUrl.replace(
+        /{{bang}}/g,
+        'test',
+      );
+    } else {
+      testLinkAttributes.disabled = true;
+    }
+
     return html`
       <main class="page-main">
         <details open class="bang-editor">
@@ -198,6 +214,7 @@ export class PageMain extends Component<Props, State> {
             ${editorInputs}
 
             <div class="button-group">
+              <${PrivacyLink} attributes=${testLinkAttributes}>Test<//>
               <${FeedbackButton}
                 attributes=${{class: 'button'}}
                 click=${this.saveBang}
diff --git a/source/options/scss/components/page-main.scss b/source/options/scss/components/page-main.scss
index 89c81f8..30ece7d 100644
--- a/source/options/scss/components/page-main.scss
+++ b/source/options/scss/components/page-main.scss
@@ -50,6 +50,8 @@
     cursor: pointer;
     font-weight: bold;
     padding: 8px;
+    text-align: center;
+    text-decoration: none;
     width: 100%;
 
     &.destructive {
@@ -57,7 +59,12 @@
       border-color: var(--da-1);
     }
 
-    &:hover {
+    &[disabled] {
+      cursor: not-allowed;
+      filter: grayscale(1);
+    }
+
+    &:not([disabled]):hover {
       background-color: var(--df-2);
       border-color: var(--df-2);
     }