feat: Breadcrumb navigation (#2053)

- Adds breadcrumb navigation to all detail views, returning to correct
origin for workflow and collection items
- Refactors list page headers into layout utility
- Refactors crawl tab labels and renames "Files" tab to "WACZ Files"

Author: SuaYoo

docs/user-guide/archived-items.md

@@ -58,9 +58,9 @@ For more details on navigating web archives within ReplayWeb.page, see the [Repl
 
 While crawling, Browsertrix will output one or more WACZ files — the crawler aims to output files in consistently sized chunks, and each [crawler instance](workflow-setup.md#crawler-instances) will output separate WACZ files.
 
-The files tab lists the individually downloadable WACZ files that make up the archived item as well as their file sizes and backup status.
+The **WACZ Files** tab lists the individually downloadable WACZ files that make up the archived item as well as their file sizes and backup status.
 
-To download an entire archived item as a single WACZ file, click the _Download Item_ button at the top of the files tab or the _Download Item_ entry in the crawl's _Actions_ menu.
+To download an entire archived item as a single WACZ file, click the _Download Item_ button at the top of the **WACZ Files** tab or the _Download Item_ entry in the crawl's _Actions_ menu.
 
 To combine multiple archived items and download them all as a single WACZ file, add them to a collection and [download the collection](collections.md#downloading-collections).
 

frontend/src/controllers/navigate.ts

@@ -19,6 +19,13 @@ const NAVIGATE_EVENT_NAME: keyof NavigateEventMap = "btrix-navigate";
  * Manage app navigation
  */
 export class NavigateController implements ReactiveController {
+  static createNavigateEvent = (detail: NavigateEventDetail) =>
+    new CustomEvent<NavigateEventDetail>(NAVIGATE_EVENT_NAME, {
+      detail,
+      bubbles: true,
+      composed: true,
+    });
+
   private readonly host: ReactiveControllerHost & EventTarget;
 
   get orgBasePath() {
@@ -43,10 +50,11 @@ export class NavigateController implements ReactiveController {
     resetScroll = true,
     replace = false,
   ): void => {
-    const evt = new CustomEvent<NavigateEventDetail>(NAVIGATE_EVENT_NAME, {
-      detail: { url, state, resetScroll, replace },
-      bubbles: true,
-      composed: true,
+    const evt = NavigateController.createNavigateEvent({
+      url,
+      state,
+      resetScroll,
+      replace,
     });
     this.host.dispatchEvent(evt);
   };
@@ -88,13 +96,9 @@ export class NavigateController implements ReactiveController {
       return;
     }
 
-    const evt = new CustomEvent<NavigateEventDetail>(NAVIGATE_EVENT_NAME, {
-      detail: {
-        url: (event.currentTarget as HTMLAnchorElement).href,
-        resetScroll,
-      },
-      bubbles: true,
-      composed: true,
+    const evt = NavigateController.createNavigateEvent({
+      url: (event.currentTarget as HTMLAnchorElement).href,
+      resetScroll,
     });
     this.host.dispatchEvent(evt);
   };

frontend/src/layouts/pageHeader.ts

@@ -0,0 +1,77 @@
+import type { SlBreadcrumb } from "@shoelace-style/shoelace";
+import clsx from "clsx";
+import { html, nothing, type TemplateResult } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { NavigateController } from "@/controllers/navigate";
+
+export type Breadcrumb = {
+  href?: string;
+  content?: string | TemplateResult;
+};
+
+function navigateBreadcrumb(e: MouseEvent, href: string) {
+  e.preventDefault();
+
+  const el = e.target as SlBreadcrumb;
+  const evt = NavigateController.createNavigateEvent({
+    url: href,
+    resetScroll: true,
+  });
+
+  el.dispatchEvent(evt);
+}
+
+export function pageBreadcrumbs(breadcrumbs: Breadcrumb[]) {
+  return html`
+    <sl-breadcrumb class="part-[base]:h-6">
+      ${breadcrumbs.length
+        ? breadcrumbs.map(
+            ({ href, content }) => html`
+              <sl-breadcrumb-item
+                href=${ifDefined(href)}
+                @click=${href
+                  ? (e: MouseEvent) => navigateBreadcrumb(e, href)
+                  : undefined}
+              >
+                ${content || html`<sl-skeleton class="w-48"></sl-skeleton>`}
+              </sl-breadcrumb-item>
+            `,
+          )
+        : html`<sl-breadcrumb-item>
+              <sl-skeleton class="w-48"></sl-skeleton>
+            </sl-breadcrumb-item>
+            <sl-breadcrumb-item>
+              <sl-skeleton class="w-48"></sl-skeleton>
+            </sl-breadcrumb-item>`}
+    </sl-breadcrumb>
+  `;
+}
+
+export function pageTitle(title?: string | TemplateResult) {
+  return html`
+    <h1 class="min-w-0 text-xl font-semibold leading-8">
+      ${title || html`<sl-skeleton class="my-.5 h-5 w-60"></sl-skeleton>`}
+    </h1>
+  `;
+}
+
+export function pageHeader(
+  title?: string | TemplateResult,
+  suffix?: TemplateResult<1>,
+  classNames?: string,
+) {
+  return html`
+    <header
+      class=${clsx(
+        "mt-5 flex items-end flex-wrap justify-between gap-2 border-b pb-3",
+        classNames,
+      )}
+    >
+      ${pageTitle(title)}
+      ${suffix
+        ? html`<div class="ml-auto flex items-center gap-2">${suffix}</div>`
+        : nothing}
+    </header>
+  `;
+}