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

svelte/src/file_viewer/EmbedWindow.svelte

@@ -1,6 +1,7 @@
 <script>
+import CopyButton from "../layout/CopyButton.svelte";
 import ThemePicker from "../util/ThemePicker.svelte";
-import { copy_text, domain_url } from "../util/Util.svelte";
+import { domain_url } from "../util/Util.svelte";
 import { file_type } from "./FileUtilities.svelte";
 
 export let file = {
@@ -87,16 +88,6 @@ let html_escape = s => {
 		replace(/'/g, "&#039;");
 }
 
-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 = () => {
 	example = !example
@@ -177,16 +168,7 @@ const update_example = () => {
 		<div class="center">
 			<textarea bind:value={embed_html} style="width: 99%; 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}>Copy HTML</CopyButton>
 			<button on:click={toggle_example} class:button_highlight={example}>
 				<i class="icon">visibility</i> Show example
 			</button>

svelte/src/file_viewer/FileViewer.svelte

@@ -1,6 +1,5 @@
 <script>
 import { onMount, tick } from "svelte";
-import { copy_text } from "../util/Util.svelte";
 import { file_struct, list_struct, file_set_href } from "./FileUtilities.svelte";
 import Modal from "../util/Modal.svelte";
 import DetailsWindow from "./DetailsWindow.svelte";
@@ -20,6 +19,7 @@ import TransferLimit from "./TransferLimit.svelte";
 import ListStats from "./ListStats.svelte";
 import ListUpdater from "./ListUpdater.svelte";
 import HomeButton from "./HomeButton.svelte";
+import CopyButton from "../layout/CopyButton.svelte";
 
 let loading = true
 let embedded = false
@@ -277,18 +277,6 @@ const apply_customizations = file => {
 	}
 }
 
-let copy_url_status = "" // empty, copied, or error
-const copy_url = () => {
-	if (copy_text(window.location.href)) {
-		copy_url_status = "copied"
-	} else {
-		copy_url_status = "error"
-		alert("Your browser does not support copying text.")
-	}
-
-	setTimeout(() => { copy_url_status = "" }, 60000)
-}
-
 const grab_file = async () => {
 	if (!window.user_authenticated) {
 		return
@@ -313,6 +301,7 @@ const grab_file = async () => {
 	}
 }
 
+let copy_btn
 const keyboard_event = evt => {
 	if (evt.ctrlKey || evt.altKey || evt.metaKey) {
 		return // prevent custom shortcuts from interfering with system shortcuts
@@ -355,7 +344,7 @@ const keyboard_event = evt => {
 			}
 			break
 		case "c": // C to copy to clipboard
-			copy_url()
+			copy_btn.copy()
 			break
 		case "i": // I to open the details window
 			details_window.toggle()
@@ -455,23 +444,9 @@ const keyboard_event = evt => {
 				</button>
 			{/if}
 
-			<button
-				on:click={copy_url}
-				class="toolbar_button"
-				class:button_highlight={copy_url_status === "copied"}
-				class:button_red={copy_url_status === "error"}
-				title="Copy a link to this page to your clipboard">
-				<i class="icon">content_copy</i>
-				<span>
-					{#if copy_url_status === "copied"}
-						Copied!
-					{:else if copy_url_status === "error"}
-						Error!
-					{:else}
-						<u>C</u>opy link
-					{/if}
-				</span>
-			</button>
+			<CopyButton bind:this={copy_btn} text={window.location.href} style="width: calc(100% - 6px)">
+				<u>C</u>opy link
+			</CopyButton>
 
 			{#if !disable_share_button}
 				<button
@@ -731,10 +706,8 @@ const keyboard_event = evt => {
 }
 .toolbar.toolbar_visible { left: 0; }
 
-.toolbar_button {
-	text-align: left;
-	margin: 4px;
-	width: calc(100% - 8px);
+.toolbar_button{
+	width: calc(100% - 6px);
 }
 .toolbar_button > span {
 	vertical-align: middle;

svelte/src/file_viewer/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 IconBlock from "./IconBlock.svelte";
 import TextBlock from "./TextBlock.svelte";
 import TorrentItem from "./TorrentItem.svelte"
 import FileTitle from "./FileTitle.svelte";
+import CopyButton from "../../layout/CopyButton.svelte";
 
 let dispatch = createEventDispatcher()
 
@@ -66,18 +66,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>
 
 <FileTitle title={file.name}/>
@@ -92,22 +80,7 @@ const copy_magnet = () => {
 			<Magnet/>
 			<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/>
-			<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