Add resources download button + click to download picker in replay (#469)

Fixes #467 
- Add a download button on the resource page for each entry to allow
downloading each resource no matter what type.
- Add a new 'click to download' image or media picker that allows
highlighting + clicking on image/media to download on the page (to get
around 'Save Image As...) not working. Also supports inline svgs +
background images - should work better than Save Image As...
- Location bar shows a popup indicating in 'click to download' mode,
which can be canceled. Otherwise, mode remains until user downloads
something.
- Type fixes: Untangle Page and URLResource types for better type
checking.
- Deps: bump to wabac.js 2.25.1 for new download mode support

---------
Co-authored-by: Tessa Walsh <tessa@bitarchivist.net>

src/url-resources.ts

@@ -1,9 +1,10 @@
 import { LitElement, html, css, type PropertyValues } from "lit";
 import { wrapCss, clickOnSpacebarPress } from "./misc";
 
-import { getReplayLink } from "./pageutils";
+import { getReplayLink, getDownloadLink } from "./pageutils";
 
 import fasSearch from "@fortawesome/fontawesome-free/svgs/solid/search.svg";
+import fasDownload from "@fortawesome/fontawesome-free/svgs/solid/download.svg";
 
 import "keyword-mark-element/lib/keyword-mark.js";
 import { type ItemType } from "./types";
@@ -315,6 +316,9 @@ class URLResources extends LitElement {
       .all-results .column {
         word-break: break-word;
       }
+      .dl-button {
+        padding: 4px;
+      }
       div.sort-header {
         padding: 10px;
         margin-bottom: 0px !important;
@@ -528,6 +532,21 @@ class URLResources extends LitElement {
                   <tr class="columns result">
                     <td class="column col-url is-6">
                       <p class="minihead is-hidden-tablet">URL</p>
+                      <a
+                        class="dl-button"
+                        href="${getDownloadLink(
+                          this.collInfo!.replayPrefix,
+                          result.url,
+                          result.ts,
+                        )}"
+                        ><fa-icon
+                          size="1.0em"
+                          class="has-text-black"
+                          aria-hidden="true"
+                          title="Download Resource"
+                          .svg="${fasDownload}"
+                        ></fa-icon>
+                      </a>
                       <a
                         @click="${this.onReplay}"
                         data-url="${result.url}"