v2.5.0 (#527)

Closes https://github.com/webrecorder/replayweb.page/issues/523, closes
https://github.com/webrecorder/replayweb.page/issues/396, closes
https://github.com/webrecorder/replayweb.page/issues/470, closes
https://github.com/webrecorder/replayweb.page/issues/237

## Changes

https://github.com/webrecorder/replayweb.page/pull/521
- Adds public `navigateReplayTo` method in `<replay-app-main>` that
allows embeds to control replay navigation directly without reloading
entire UI.
- Enables reloading `<wr-coll-replay>` iframe even if source URL hasn't
changed.
- Refactors lifecycle events to prevent unnecessary re-renders.

https://github.com/webrecorder/replayweb.page/pull/524
- Fixes incorrect page count shown
- Enables non-seed pages by default
- Improves UX and accessibility of scrolling to load more by displaying
help text

https://github.com/webrecorder/replayweb.page/pull/525
- Updates general styles and icons throughout to match Browsertrix
styles
- Allows deep customization of components with `part` and `exportparts`

https://github.com/webrecorder/replayweb.page/pull/526
- Enables importing Shoelace (ie Bootstrap) icons as inline SVG
- Updates location bar buttons to use Bootstrap icons
- Replaces deprecated raw-loader with Webpack-native asset rule

https://github.com/webrecorder/replayweb.page/pull/529
- Allows hiding collection metadata in embed.
- Moves non-seed toggle next to search bar to match resources controls
and enable hiding entire column when metadata is hidden.

https://github.com/webrecorder/replayweb.page/pull/533
- Fix non-seed pages toggle

https://github.com/webrecorder/replayweb.page/pull/535,
https://github.com/webrecorder/replayweb.page/pull/534
- Upgrade to Node 22 and Yarn 4

---------

Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>
Co-authored-by: Misty De Méo <hi@mistydemeo.com>

src/sorter.ts

@@ -3,8 +3,8 @@ import { customElement, property } from "lit/decorators.js";
 
 import { wrapCss } from "./misc";
 
-import fasSortDown from "@fortawesome/fontawesome-free/svgs/solid/sort-down.svg";
-import fasSortUp from "@fortawesome/fontawesome-free/svgs/solid/sort-up.svg";
+import iconSortDown from "~icons/sort-down.svg";
+import iconSortUp from "~icons/sort-up.svg";
 
 // ===========================================================================
 @customElement("wr-sorter")
@@ -118,34 +118,44 @@ class Sorter<T = unknown> extends LitElement {
       button.button.is-small {
         border-radius: 4px;
       }
+
+      .is-small {
+        font-size: var(--sl-font-size-x-small);
+      }
     `);
   }
 
   render() {
-    return html`
-    <div class="select is-small">
-      <select id="sort-select" @change=${(e: Event) =>
-        (this.sortKey = (e.currentTarget as HTMLSelectElement).value)}>
-
-      ${this.sortKeys?.map(
-        (sort) => html`
-          <option value="${sort.key}" ?selected="${sort.key === this.sortKey}">
-            Sort By: ${sort.name}
-          </option>
-        `,
-      )}
-      </select>
-    </div>
-    <button @click=${() =>
-      (this.sortDesc = !this.sortDesc)} class="button is-small">
-      <span>Order:</span>
-      <span class="is-sr-only">${
-        this.sortDesc ? "Ascending" : "Descending"
-      }</span>
-      <span class="icon"><fa-icon aria-hidden="true" .svg=${
-        this.sortDesc ? fasSortUp : fasSortDown
-      }></span>
-    </button>`;
+    return html` <div class="select is-small">
+        <select
+          id="sort-select"
+          @change=${(e: Event) =>
+            (this.sortKey = (e.currentTarget as HTMLSelectElement).value)}
+        >
+          ${this.sortKeys?.map(
+            (sort) => html`
+              <option
+                value="${sort.key}"
+                ?selected="${sort.key === this.sortKey}"
+              >
+                Sort By: ${sort.name}
+              </option>
+            `,
+          )}
+        </select>
+      </div>
+      <button
+        @click=${() => (this.sortDesc = !this.sortDesc)}
+        class="button is-small"
+      >
+        <span>Order:</span>
+        <span class="is-sr-only"
+          >${this.sortDesc ? "Ascending" : "Descending"}</span
+        >
+        <span class="icon"
+          ><wr-icon .svg=${this.sortDesc ? iconSortDown : iconSortUp}></wr-icon
+        ></span>
+      </button>`;
   }
 }