Create a standard copy button component and remove a lot of redundant code

svelte/src/filesystem/DetailsWindow.svelte

@@ -5,9 +5,9 @@ import Modal from "../util/Modal.svelte";
 import { fs_timeseries } from "./FilesystemAPI";
 import { fs_path_url } from "./FilesystemUtil";
 import { generate_share_path, generate_share_url } from "./Sharebar.svelte";
-import { color_by_name, copy_text } from "../util/Util.svelte";
+import { color_by_name } from "../util/Util.svelte";
 import { tick } from "svelte";
-import Button from "../layout/Button.svelte";
+import CopyButton from "../layout/CopyButton.svelte";
 
 export let state
 export let visible = false
@@ -176,7 +176,7 @@ let update_chart = async (base, timespan, interval) => {
 		<tr>
 			<td>Direct link</td>
 			<td>
-				<Button highlight_on_click icon="content_copy" label="Copy" click={e => copy_text(direct_url)}/>
+				<CopyButton text={direct_url}>Copy</CopyButton>
 				<a href="{direct_url}">{direct_url}</a>
 			</td>
 		</tr>
@@ -184,14 +184,14 @@ let update_chart = async (base, timespan, interval) => {
 			<tr>
 				<td>Sharing link</td>
 				<td>
-					<Button highlight_on_click icon="content_copy" label="Copy" click={e => copy_text(share_url)}/>
+					<CopyButton text={share_url}>Copy</CopyButton>
 					<a href="{share_url}">{share_url}</a>
 				</td>
 			</tr>
 			<tr>
 				<td>Direct sharing link</td>
 				<td>
-					<Button highlight_on_click icon="content_copy" label="Copy" click={e => copy_text(direct_share_url)}/>
+					<CopyButton text={direct_share_url}>Copy</CopyButton>
 					<a href="{direct_share_url}">{direct_share_url}</a>
 				</td>
 			</tr>

svelte/src/filesystem/edit_window/SharingOptions.svelte

@@ -1,7 +1,7 @@
 <script>
 import { createEventDispatcher } from "svelte";
-import { copy_text, domain_url } from "../../util/Util.svelte";
-    import Button from "../../layout/Button.svelte";
+import { domain_url } from "../../util/Util.svelte";
+import CopyButton from "../../layout/CopyButton.svelte";
 
 let dispatch = createEventDispatcher()
 export let shared
@@ -27,16 +27,6 @@ let embed_iframe = file => {
 		`></iframe>`
 }
 
-let copy_status = "" // empty, success or error
-const copy = () => {
-	if (copy_text(embed_html)) {
-		copy_status = "success"
-	} else {
-		copy_status = "error"
-		alert("Your browser does not support copying text.")
-	}
-}
-
 let example = false
 const toggle_example = () => {
 	if (is_shared) {
@@ -67,7 +57,7 @@ const toggle_example = () => {
 
 	{#if is_shared}
 		<span>Your sharing link: <a href={share_link}>{share_link}</a></span>
-		<Button highlight_on_click icon="content_copy" label="Copy" click={e => copy_text(share_link)}/>
+		<CopyButton text={share_link}>Copy</CopyButton>
 	{/if}
 </div>
 
@@ -87,16 +77,7 @@ const toggle_example = () => {
 <div class="center">
 	<textarea bind:value={embed_html} style="width: 100%; height: 4em;"></textarea>
 	<br/>
-	<button on:click={copy} class:button_highlight={copy_status === "success"} class:button_red={copy_status === "error"}>
-		<i class="icon">content_copy</i>
-		{#if copy_status === "success"}
-			Copied!
-		{:else if copy_status === "error"}
-			Error!
-		{:else}
-			Copy HTML
-		{/if}
-	</button>
+	<CopyButton text={embed_html} label="Copy HTML"/>
 	<button on:click={toggle_example} class:button_highlight={example} disabled={!is_shared}>
 		<i class="icon">visibility</i> Show example
 	</button>

svelte/src/filesystem/viewers/Torrent.svelte

@@ -2,11 +2,11 @@
 import { createEventDispatcher } from "svelte";
 import Magnet from "../../icons/Magnet.svelte";
 import { formatDate } from "../../util/Formatting.svelte"
-import { copy_text } from "../../util/Util.svelte";
 import TorrentItem from "./TorrentItem.svelte"
 import IconBlock from "../../file_viewer/viewers/IconBlock.svelte";
 import TextBlock from "../../file_viewer/viewers/TextBlock.svelte";
 import { fs_node_icon, fs_path_url } from "../FilesystemUtil";
+import CopyButton from "../../layout/CopyButton.svelte";
 
 let dispatch = createEventDispatcher()
 
@@ -59,18 +59,6 @@ let torrent = {
 }
 
 let magnet = ""
-
-let copy_magnet_status = "" // empty, copied, or error
-const copy_magnet = () => {
-	if (copy_text(magnet)) {
-		copy_magnet_status = "copied"
-	} else {
-		copy_magnet_status = "error"
-		alert("Your browser does not support copying text.")
-	}
-
-	setTimeout(() => { copy_magnet_status = "" }, 60000)
-}
 </script>
 
 <slot></slot>
@@ -87,22 +75,7 @@ const copy_magnet = () => {
 			<Magnet style=""/>
 			<span>Open magnet link</span>
 		</a>
-		<button
-			on:click={copy_magnet}
-			class:button_highlight={copy_magnet_status === "copied"}
-			class:button_red={copy_magnet_status === "error"}
-		>
-			<Magnet style=""/>
-			<span>
-				{#if copy_magnet_status === ""}
-					Copy magnet link
-				{:else if copy_magnet_status === "copied"}
-					Copied magnet
-				{:else if copy_magnet_status === "error"}
-					Error!
-				{/if}
-			</span>
-		</button>
+		<CopyButton text={magnet}>Copy magnet link</CopyButton>
 	{:else if status === "too_large"}
 		<p>
 			Torrent file is too large to parse. Please download the file and