Add a share link button to the editor.

package.json

@@ -19,6 +19,7 @@
     "@holllo/migration-helper": "^0.1.3",
     "@holllo/preact-components": "^0.2.3",
     "htm": "^3.1.1",
+    "js-base64": "^3.7.3",
     "modern-normalize": "^1.1.0",
     "preact": "^10.11.0",
     "webextension-polyfill": "^0.10.0"

source/content-scripts/share/share.ts

@@ -0,0 +1,104 @@
+import './style.scss';
+
+import browser from 'webextension-polyfill';
+import {Component, render} from 'preact';
+import {html} from 'htm/preact';
+
+import {decodeBase64, fragmentPrefix} from '../../utilities/share-redirect.js';
+import {
+  RedirectParameters,
+  parseRedirect,
+  narrowMatcherType,
+  narrowRedirectType,
+} from '../../redirect/exports.js';
+import storage from '../../redirect/storage.js';
+
+type Props = Record<string, unknown>;
+
+type State = {
+  error: string | undefined;
+  imported: boolean;
+};
+
+class ImportButton extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      error: undefined,
+      imported: false,
+    };
+  }
+
+  importRedirect = async () => {
+    const decoded = decodeBase64<RedirectParameters>(
+      location.hash.slice(fragmentPrefix.length),
+    );
+
+    const invalidRedirectError = "This isn't a valid redirect. ☹️";
+
+    if (
+      !narrowMatcherType(decoded.matcherType) ||
+      !narrowRedirectType(decoded.redirectType) ||
+      typeof decoded.matcherValue !== 'string' ||
+      typeof decoded.redirectValue !== 'string'
+    ) {
+      this.setState({error: invalidRedirectError});
+      return;
+    }
+
+    const redirect = parseRedirect({
+      id: -1,
+      enabled: true,
+      matcherType: decoded.matcherType,
+      matcherValue: decoded.matcherValue,
+      redirectType: decoded.redirectType,
+      redirectValue: decoded.redirectValue,
+    });
+    if (redirect === undefined) {
+      this.setState({error: invalidRedirectError});
+      return;
+    }
+
+    const id = await storage.nextRedirectId();
+    redirect.parameters.id = id;
+    await storage.save(redirect);
+
+    this.setState({imported: true});
+  };
+
+  render() {
+    const {error, imported} = this.state;
+
+    if (error !== undefined) {
+      return html`<p>${error}</p>`;
+    }
+
+    if (imported) {
+      return html`
+        <p class="import-success">The redirect has been imported!</p>
+      `;
+    }
+
+    return html`
+      <button class="import-button" onClick=${this.importRedirect}>
+        Import
+      </button>
+    `;
+  }
+}
+
+function main() {
+  if (!location.hash.startsWith(fragmentPrefix)) {
+    return;
+  }
+
+  const importRoot = document.querySelector('.re-nav-import')!;
+  for (const child of Array.from(importRoot.children)) {
+    child.remove();
+  }
+
+  render(html`<${ImportButton} />`, importRoot);
+}
+
+main();

source/content-scripts/share/style.scss

@@ -0,0 +1,20 @@
+.re-nav-import {
+  text-align: center;
+}
+
+.import-button {
+  background-color: var(--da-4);
+  border: none;
+  color: var(--background-1);
+  cursor: pointer;
+  font-weight: bold;
+  padding: var(--spacing-08) var(--spacing-32);
+
+  &:hover {
+    background-color: var(--foreground-1);
+  }
+}
+
+.import-success {
+  margin-bottom: var(--spacing-16);
+}

source/manifest.ts

@@ -21,6 +21,14 @@ export default function createManifest(
         },
       },
     },
+    content_scripts: [
+      {
+        css: ['generated:content-scripts/share/style.css'],
+        js: ['content-scripts/share/share.ts'],
+        matches: ['https://holllo.org/re-nav/share/'],
+        run_at: 'document_end',
+      },
+    ],
   };
 
   const icons = {

source/options/components/editor.ts

@@ -1,4 +1,4 @@
-import {ConfirmButton} from '@holllo/preact-components';
+import {ConfirmButton, FeedbackButton} from '@holllo/preact-components';
 import {html} from 'htm/preact';
 import {Component} from 'preact';
 import browser from 'webextension-polyfill';
@@ -13,6 +13,7 @@ import {
   redirectTypes,
 } from '../../redirect/exports.js';
 import storage from '../../redirect/storage.js';
+import {share} from '../../utilities/share-redirect.js';
 
 type Props = {
   redirect: Redirect;
@@ -124,6 +125,11 @@ export default class Editor extends Component<Props, State> {
     this.setState({enabled});
   };
 
+  copyShareLink = async () => {
+    const link = share(this.state);
+    await navigator.clipboard.writeText(link);
+  };
+
   render() {
     const {
       enabled,
@@ -198,6 +204,13 @@ export default class Editor extends Component<Props, State> {
         >
           ${enabled ? '●' : '○'}
         </button>
+        <${FeedbackButton}
+          attributes=${{class: 'button share', title: 'Copy share link'}}
+          click=${this.copyShareLink}
+          feedbackText="💖"
+          text="📋"
+          timeout=${5 * 1000}
+        />
       </div>
     `;
   }

source/options/scss/components/editor.scss

@@ -31,6 +31,10 @@
     &.disabled {
       background-color: var(--da-2);
     }
+
+    &.share {
+      background-color: var(--da-7);
+    }
   }
 
   .input {

source/utilities/share-redirect.ts

@@ -0,0 +1,28 @@
+import {Base64} from 'js-base64';
+
+import {RedirectParameters} from '../redirect/exports.js';
+
+export const fragmentPrefix = '#json=';
+
+export function decodeBase64<T>(base64: string): T {
+  return JSON.parse(Base64.decode(base64)) as T;
+}
+
+export function encodeBase64(source: any): string {
+  return Base64.encode(JSON.stringify(source), true);
+}
+
+export function share(redirect: RedirectParameters): string {
+  const url = new URL('https://holllo.org/re-nav/share/');
+
+  const encoded = encodeBase64({
+    matcherType: redirect.matcherType,
+    matcherValue: redirect.matcherValue,
+    redirectType: redirect.redirectType,
+    redirectValue: redirect.redirectValue,
+  });
+
+  url.hash = `${fragmentPrefix}${encoded}`;
+
+  return url.href;
+}