web/SectionHeading: reusable component for linkable section headings

web/src/components/settings/SettingsCategory.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
     import { page } from "$app/stores";
-    import { t } from "$lib/i18n/translations";
     import { copyURL as _copyURL } from "$lib/download";
-    import CopyIcon from "$components/misc/CopyIcon.svelte";
+
+    import SectionHeading from "$components/misc/SectionHeading.svelte";
 
     export let title: string;
     export let sectionId: string;
@@ -11,11 +11,7 @@
     export let beta = false;
 
     let focus = false;
-    let animate = false;
     let copied = false;
-    let showCopy = false;
-
-    const copyURL = () => _copyURL(`${$page.url.origin}${$page.url.pathname}#${sectionId}`);
 
     $: hash = $page.url.hash.replace("#", "");
 
@@ -37,55 +33,11 @@
     class:disabled
     aria-hidden={disabled}
 >
-    <div
-        class="settings-content-header"
-        on:mouseenter={() => showCopy = true}
-        on:mouseleave={() => showCopy = false}
-        role="link"
-        tabindex="0"
-    >
-        <h3 class="settings-content-title">{title}</h3>
-        {#if beta}
-            <div class="beta-label">{$t("general.beta")}</div>
-        {/if}
-        {#if showCopy}
-            <button
-                class="settings-link-copy"
-                on:click={() => {
-                    copied = true;
-                    copyURL();
-                }}
-            >
-                <CopyIcon check={copied} />
-            </button>
-        {/if}
-    </div>
+    <SectionHeading {title} {sectionId} {beta} />
     <slot></slot>
 </section>
 
 <style>
-    .settings-link-copy {
-        background: transparent;
-        padding: 0;
-        margin: 0;
-        box-shadow: none;
-    }
-
-    .settings-link-copy :global(.copy-animation) {
-        width: 16px;
-        height: 16px;
-        opacity: 0.7;
-    }
-
-    .settings-link-copy :global(.copy-animation *) {
-        width: 16px;
-        height: 16px;
-    }
-
-    .settings-link-copy :global(.copy-animation):hover {
-        opacity: 1;
-    }
-
     .settings-content {
         display: flex;
         flex-direction: column;
@@ -134,27 +86,6 @@
         }
     }
 
-    .settings-content-header {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: 6px;
-    }
-
-    .beta-label {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        border-radius: 5px;
-        padding: 0 5px;
-        background: var(--secondary);
-        color: var(--primary);
-        font-size: 11px;
-        font-weight: 500;
-        line-height: 0;
-        text-transform: uppercase;
-    }
-
     @media screen and (max-width: 750px) {
         .settings-content {
             padding: var(--padding);