xftp-web: add "Upload your file" link after download completes (#1736)

* xftp-web: add "Upload your file" link after download completes

* xftp-web: call initUpload directly instead of hashchange dispatch

Author: shumvgolove

xftp-web/web/download.ts

@@ -1,5 +1,6 @@
 import {createCryptoBackend} from './crypto-backend.js'
 import {createProgressRing} from './progress.js'
+import {initUpload} from './upload.js'
 import {t} from './i18n.js'
 import {
   newXFTPAgent, closeXFTPAgent,
@@ -39,6 +40,7 @@ export function initDownload(app: HTMLElement, hash: string) {
       <div id="dl-progress" class="stage" hidden>
         <div id="dl-progress-container"></div>
         <p id="dl-status">${t('downloading', 'Downloading\u2026')}</p>
+        <a id="dl-upload-link" class="upload-link" hidden href="#">${t('uploadYourFile', 'Upload your file')}</a>
       </div>
       <div id="dl-error" class="stage" hidden>
         <p class="error" id="dl-error-msg"></p>
@@ -54,6 +56,7 @@ export function initDownload(app: HTMLElement, hash: string) {
   const dlBtn = document.getElementById('dl-btn')!
   const errorMsg = document.getElementById('dl-error-msg')!
   const retryBtn = document.getElementById('dl-retry-btn')!
+  const uploadLink = document.getElementById('dl-upload-link')!
 
   function showStage(stage: HTMLElement) {
     for (const s of [readyStage, progressStage, errorStage]) s.hidden = true
@@ -72,6 +75,11 @@ export function initDownload(app: HTMLElement, hash: string) {
 
   dlBtn.addEventListener('click', startDownload)
   retryBtn.addEventListener('click', () => showStage(readyStage))
+  uploadLink.addEventListener('click', (e) => {
+    e.preventDefault()
+    history.replaceState(null, '', window.location.pathname)
+    initUpload(app)
+  })
 
   async function startDownload() {
     showStage(progressStage)
@@ -132,6 +140,7 @@ export function initDownload(app: HTMLElement, hash: string) {
 
       ring.update(1)
       statusText.textContent = t('downloadComplete', 'Download complete')
+      uploadLink.hidden = false
       app.dispatchEvent(new CustomEvent('xftp:download-complete', {detail: {fileName}, bubbles: true}))
     } catch (err: any) {
       const msg = err?.message ?? String(err)

xftp-web/web/style.css

@@ -77,6 +77,19 @@
   background: #f9fafb;
 }
 
+/* Upload link */
+:is(#app, [data-xftp-app]) .upload-link {
+  margin-top: 12px;
+  color: #3b82f6;
+  font-size: .9rem;
+  text-decoration: none;
+  cursor: pointer;
+}
+:is(#app, [data-xftp-app]) .upload-link:not([hidden]) {
+  display: inline-block;
+}
+:is(#app, [data-xftp-app]) .upload-link:hover { text-decoration: underline; }
+
 /* Messages */
 :is(#app, [data-xftp-app]) .success { color: #16a34a; font-weight: 600; }
 :is(#app, [data-xftp-app]) .error { color: #dc2626; font-weight: 500; margin-bottom: 12px; }
@@ -128,4 +141,5 @@
   background: rgba(34,197,94,.1);
   color: #d1d5db;
 }
+.dark :is(#app, [data-xftp-app]) .upload-link { color: #60a5fa; }
 .dark :is(#app, [data-xftp-app]) .security-note a { color: #60a5fa; }