Gek/external actions (#827)

* WIP External actions modal frontend

* Add external action links

* Allow modal to show/hide and use a dynamic url

* Use external link object instead of just url for state

* add style and placement to external action buttons

* reformat and simplify tag list style as not to conflict with action buttons and make them look less actionable since they're not

* fix bug to open modal

* have Esc key close modal

* fix style on modal

* make modal bg darker

* close modal when you click outside of it

* fix zindex

* Add support for external action icons and colors

* Some external action modal sizing + loading spinner

Co-authored-by: Ginger Wong <omqmail@gmail.com>

webroot/js/components/external-action-modal.js

@@ -0,0 +1,86 @@
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
+const html = htm.bind(h);
+
+export default function ExternalActionModal({ url, title, onClose }) {
+  return html`
+    <div class="fixed inset-0 overflow-y-auto" style="z-index: 9999">
+      <div
+        class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
+      >
+        <div class="fixed inset-0 transition-opacity" aria-hidden="true">
+          <div
+            onClick=${() => onClose()}
+            class="absolute inset-0 bg-gray-900 bg-opacity-75"
+          ></div>
+        </div>
+
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+          >&#8203;</span
+        >
+        <div
+          class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:align-middle w-screen md:max-w-2xl lg:max-w-2xl"
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-headline"
+        >
+          <div class="bg-white ">
+            <div
+              class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex justify-between items-center"
+            >
+              <h3 class="font-bold hidden md:block">${title}</h3>
+              <span class="" onclick=${onClose}>
+                <svg
+                  class="h-12 w-12 fill-current text-grey hover:text-grey-darkest"
+                  role="button"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                >
+                  <title>Close</title>
+                  <path
+                    d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"
+                  />
+                </svg>
+              </span>
+            </div>
+
+            <!-- TODO: Show a loading spinner while the iframe loads -->
+            <iframe
+              style="height: 70vh"
+              width="100%"
+              allowpaymentrequest="true"
+              allowfullscreen="false"
+              sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+              src=${url}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+export function ExternalActionButton({ index, action, onClick }) {
+  const { title, icon, color = undefined } = action;
+  const logo =
+    icon &&
+    html`
+      <span class="external-action-icon"><img src=${icon} alt="" /></span>
+    `;
+  const bgcolor = color && { backgroundColor: `${color}` };
+  const handleClick = () => onClick(index);
+  return html`
+    <button
+      class="external-action-button rounded-sm flex flex-row justify-center items-center overflow-hidden bg-gray-800"
+      data-index=${index}
+      onClick=${handleClick}
+      style=${bgcolor}
+    >
+      ${logo}
+      <span class="external-action-label">${title}</span>
+    </button>
+  `;
+}