feat(front/CopyableText): add simple button mode

src/assets/views/components/CopyableText.svelte

@@ -2,8 +2,9 @@
     import Icon from "../utils/Icon.svelte";
     import { fade } from "svelte/transition";
 
-    export let title: string;
+    export let title: string | undefined = undefined;
     export let content: string;
+    export let buttonMode: boolean = false;
 
     let contentNode: HTMLElement;
     let copiedOverlay: HTMLElement;
@@ -68,6 +69,11 @@
 				margin: 8px;
 			}
 		}
+	}
+
+    .button-mode-button {
+		position: relative;
+    }
 
 	.copied-overlay {
 		position: absolute;
@@ -80,10 +86,29 @@
 		text-align: center;
 		background-color: var(--success);
 	}
+
+    .content.hidden {
+        pointer-events: none;
+        overflow: hidden;
+        width: 0;
+        height: 0;
+        margin: 0;
+        padding: 0;
+        position: absolute;
     }
 </style>
 
 
+{#if buttonMode}
+    <div class="content hidden" bind:this={contentNode} on:click={selectAll}>{content}</div>
+    <button class="bold button-mode-button" on:click={copy} title="{content}">
+        <Icon name="copy"/>
+
+        {#if showCopiedOverlay}
+            <div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}><Icon name="check"/></div>
+        {/if}
+    </button>
+{:else}
     <div class="copyable-text panel">
         <div class="title">{title}</div>
         <div class="content" bind:this={contentNode} on:click={selectAll}>{content}</div>
@@ -93,3 +118,4 @@
             <div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}>Copied!</div>
         {/if}
     </div>
+{/if}