Add a Using Bangs section.

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}
@@ -266,6 +283,20 @@ export class PageMain extends Component<Props, State> {
               button.
             </li>
           </ul>
+
+          <p>Using Bangs:</p>
+          <ul>
+            <li>
+              Once you have a Bang with a valid Search Link, the "Test" button
+              will be enabled. Clicking on that will take you to your Search
+              Link with "test" as the search query.
+            </li>
+            <li>On the DuckDuckGo website, use your custom Bangs directly.</li>
+            <li>
+              With DuckDuckGo set as your browser's default search engine, use
+              your custom Bangs in the address bar.
+            </li>
+          </ul>
         </details>
       </main>
     `;

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