Add a test link for bangs.

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}

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);
     }