Adds icon name and tooltip content fields to btrix-copy-button (#879)

- Adds two new properties, name to pick the icon's name and content to pick a custom tooltip message. These are in-line with what Shoelace uses but are perhaps not the best descriptors...
- Swaps the existing anchor links on the Workflow Details' Settings tab for these and relocates them to after the heading. (Navigation to the links is broken right now... but the copying part works nicely!)
- Updates btrix-section-heading to better handle multiple elements with flexbox and an 8px gap between elements

frontend/src/components/config-details.ts

@@ -89,10 +89,12 @@ export class ConfigDetails extends LiteElement {
     return html`
       <section id="crawler-settings" class="mb-8">
         <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
-          ><h4>
-            ${this.renderAnchorLink("crawler-settings")}
+          >
+          <h4>
             ${msg("Crawler Settings")}
-          </h4></btrix-section-heading
+          </h4>
+          ${this.renderAnchorLink("crawler-settings")}
+          </btrix-section-heading
         >
         <btrix-desc-list>
           ${when(
@@ -165,10 +167,12 @@ export class ConfigDetails extends LiteElement {
       </section>
       <section id="browser-settings" class="mb-8">
         <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
-          ><h4>
-            ${this.renderAnchorLink("browser-settings")}
+          >
+          <h4>
             ${msg("Browser Settings")}
-          </h4></btrix-section-heading
+          </h4>
+          ${this.renderAnchorLink("browser-settings")}
+          </btrix-section-heading
         >
         <btrix-desc-list>
           ${this.renderSetting(
@@ -199,10 +203,12 @@ export class ConfigDetails extends LiteElement {
       </section>
       <section id="crawl-scheduling" class="mb-8">
         <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
-          ><h4>
-            ${this.renderAnchorLink("crawl-scheduling")}
+          >
+          <h4>
             ${msg("Crawl Scheduling")}
-          </h4></btrix-section-heading
+          </h4>
+          ${this.renderAnchorLink("crawl-scheduling")}
+          </btrix-section-heading
         >
         <btrix-desc-list>
           ${this.renderSetting(
@@ -222,10 +228,13 @@ export class ConfigDetails extends LiteElement {
         </btrix-desc-list>
       </section>
       <section id="crawl-metadata" class="mb-8">
-        <btrix-section-heading style="--margin: var(--sl-spacing-medium)">
+        <btrix-section-heading style="--margin: var(--sl-spacing-medium)"
+          >
           <h4>
-            ${this.renderAnchorLink("crawl-metadata")}${msg("Crawl Metadata")}
-          </h4></btrix-section-heading
+            ${msg("Crawl Metadata")}
+          </h4>
+          ${this.renderAnchorLink("crawl-metadata")}
+          </btrix-section-heading
         >
         <btrix-desc-list>
           ${this.renderSetting(msg("Name"), crawlConfig?.name)}
@@ -341,12 +350,12 @@ export class ConfigDetails extends LiteElement {
     if (!this.anchorLinks) return;
     const currentUrl = window.location.href;
     return html`
-      <a
-        href=${`${currentUrl.replace(window.location.hash, "")}#${id}`}
-        class="text-base hover:text-primary mr-1"
-      >
-        <sl-icon name="link-45deg" class="inline-block align-middle"></sl-icon>
-      </a>
+      <btrix-copy-button 
+        style="font-size: 1rem;"
+        value=${`${currentUrl.replace(window.location.hash, "")}#${id}`}
+        name="link-45deg"
+        content=${msg("Copy Link to Section")}
+      ></btrix-copy-button>
     `;
   }
 

frontend/src/components/copy-button.ts

@@ -21,6 +21,12 @@ export class CopyButton extends LitElement {
   @property({ type: String })
   value?: string;
 
+  @property({ type: String })
+  name?: string;
+
+  @property({ type: String })
+  content?: string;
+
   @property({ type: Function })
   getValue?: () => string;
 
@@ -40,10 +46,9 @@ export class CopyButton extends LitElement {
 
   render() {
     return html`
-      <sl-tooltip content=${this.isCopied ? msg("Copied to clipboard!") : msg("Copy")}>
+      <sl-tooltip content=${this.isCopied ? msg("Copied to clipboard!") : (this.content ? this.content : msg("Copy"))}>
         <sl-icon-button
-          size="small"
-          name=${this.isCopied ? "check-lg" : "files"}
+          name=${this.isCopied ? "check-lg" : (this.name ? this.name : "files")}
           label=${msg("Copy to clipboard")}
           @click=${this.onClick}
           ?disabled=${!this.value && !this.getValue}

frontend/src/components/section-heading.ts

@@ -11,6 +11,9 @@ import { LitElement, html, css } from "lit";
 export class SectionHeading extends LitElement {
   static styles = css`
     .heading {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
       font-size: var(--sl-font-size-medium);
       color: var(--sl-color-neutral-500);
       padding-top: var(--sl-spacing-x-small);