nicer delete buttons

static/feather-icons/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2017 Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

static/feather-icons/copy.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-copy"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>

static/feather-icons/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

static/index.html

@@ -17,7 +17,10 @@
 
       <button id="upload">Upload</button>
       <div id="download_link_container" style="display: none;">
-        Download link: <span id="download_link"></span>
+        <div id="download_link_main">
+          <div>Download link: <span id="download_link"></span></div><div class="copy_button"></div>
+        </div>
+        <div id="copied_message" style="display: none;">Copied!</div>
       </div>
       <div id="progress_container" style="display: none;">
         <div id="progress"></div>

static/transbeam.css

@@ -23,6 +23,49 @@ body {
     background-size: 0;
 }
 
+#download_link_container {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 10px;
+    cursor: pointer;
+    width: fit-content;
+    margin: 10px auto;
+    position: relative;
+}
+
+#download_link_container:hover {
+    border-color: #777;
+}
+
+#download_link_main {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.copy_button {
+    width: 18px;
+    height: 18px;
+    background-color: #333;
+    mask-image: url("feather-icons/copy.svg");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+}
+
+#download_link_container:hover .copy_button {
+    background-color: #000;
+}
+
+#copied_message {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: fit-content;
+}
+
 table {
     border-collapse: collapse;
     margin: 20px auto;
@@ -42,6 +85,21 @@ td {
     padding: 10px;
 }
 
+td.file_delete {
+    background-color: #888;
+    mask-image: url("feather-icons/x.svg");
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    padding-left: 15px;
+    padding-right: 15px;
+    cursor: pointer;
+}
+
+td.file_delete:hover {
+    background-color: #f00;
+}
+
 td.file_size {
     text-align: right;
 }

static/transbeam.js

@@ -11,7 +11,9 @@ const fileList = document.getElementById('file_list');
 const uploadButton = document.getElementById('upload');
 
 const downloadLinkContainer = document.getElementById('download_link_container');
+const downloadLinkMain = document.getElementById('download_link_main');
 const downloadLink = document.getElementById('download_link');
+const copiedMessage = document.getElementById('copied_message');
 
 const progressContainer = document.getElementById('progress_container');
 const progress = document.getElementById('progress');
@@ -119,11 +121,8 @@ function addListEntry(file) {
     const listEntry = document.createElement('tr');
 
     const deleteButtonCell = document.createElement('td');
-    const deleteButton = document.createElement('button');
-    deleteButtonCell.appendChild(deleteButton);
-    deleteButton.className = 'file_delete';
-    deleteButton.textContent = 'x';
-    deleteButton.addEventListener('click', () => {
+    deleteButtonCell.className = 'file_delete';
+    deleteButtonCell.addEventListener('click', () => {
         removeFile(file.name);
         listEntry.remove();
         updateFiles();
@@ -158,7 +157,7 @@ uploadButton.addEventListener('click', (e) => {
     if (files.length === 0) { return; }
 
     fileInputContainer.remove();
-    for (const button of Array.from(document.getElementsByTagName('button'))) {
+    for (const button of Array.from(document.getElementsByTagName('button')).concat(...document.getElementsByClassName('file_delete'))) {
         button.remove();
     }
 
@@ -176,3 +175,14 @@ uploadButton.addEventListener('click', (e) => {
         }
     });
 })
+
+downloadLinkContainer.addEventListener('click', (e) => {
+    navigator.clipboard.writeText(downloadLink.textContent);
+    downloadLinkMain.style.visibility = 'hidden';
+    copiedMessage.style.display = '';
+})
+
+downloadLinkContainer.addEventListener('mouseleave', (e) => {
+    copiedMessage.style.display = 'none';
+    downloadLinkMain.style.visibility = 'visible';
+});