Add PDF list view with upload status tracking

- Show all pending PDFs in a scrollable list instead of single PDF
- Track upload status (pending/uploading/uploaded/failed) per PDF
- Store queue in chrome.storage.local for persistence
- Prevent duplicate uploads by checking URL against uploaded PDFs
- Add Dismiss button to remove PDFs from queue
- Show badge with count of pending PDFs
- Auto-cleanup old entries (uploaded >7 days, failed >24h)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/popup/popup.ts

@@ -7,12 +7,16 @@ import { loadCredentials, saveCredentials, deleteCredentials, updateLastUse } fr
 import { uploadPDF, testConnection, BinectAPIError } from '../utils/binect-api';
 import { fetchPDFBytes, DetectedPDF } from '../utils/pdf-detector';
 import { addTrackingEntry } from '../tracking/tracker';
+import { PDFQueueEntry, PDFStatus } from '../utils/pdf-queue';
 
 // DOM Elements
 const authView = document.getElementById('authView')!;
 const mainView = document.getElementById('mainView')!;
 const noPdfView = document.getElementById('noPdfView')!;
-const pdfView = document.getElementById('pdfView')!;
+const pdfListView = document.getElementById('pdfListView')!;
+const pdfList = document.getElementById('pdfList')!;
+const pdfCount = document.getElementById('pdfCount')!;
+const statusMessage = document.getElementById('statusMessage')!;
 
 const loginForm = document.getElementById('loginForm') as HTMLFormElement;
 const usernameInput = document.getElementById('username') as HTMLInputElement;
@@ -20,14 +24,6 @@ const passwordInput = document.getElementById('password') as HTMLInputElement;
 const loginBtn = document.getElementById('loginBtn') as HTMLButtonElement;
 const authError = document.getElementById('authError')!;
 
-const pdfFilename = document.getElementById('pdfFilename')!;
-const pdfSize = document.getElementById('pdfSize')!;
-const pdfDomain = document.getElementById('pdfDomain')!;
-const pdfTimestamp = document.getElementById('pdfTimestamp')!;
-
-const sendBtn = document.getElementById('sendBtn') as HTMLButtonElement;
-const statusMessage = document.getElementById('statusMessage')!;
-
 const logoutBtn = document.getElementById('logoutBtn')!;
 const helpBtn = document.getElementById('helpBtn')!;
 const togglePasswordBtn = document.getElementById('togglePassword') as HTMLButtonElement;
@@ -35,7 +31,7 @@ const eyeIcon = document.getElementById('eyeIcon')!;
 const eyeOffIcon = document.getElementById('eyeOffIcon')!;
 
 // State
-let currentPDF: DetectedPDF | null = null;
+let pdfQueue: PDFQueueEntry[] = [];
 let currentCredentials: { username: string; password: string } | null = null;
 
 /**
@@ -55,7 +51,7 @@ async function init() {
         await updateLastUse();
 
         showMainView();
-        await loadLastPDF();
+        await loadPDFQueue();
       } else {
         // Authentication failed, credentials may be invalid
         showAuthView();
@@ -78,7 +74,6 @@ async function init() {
  */
 function setupEventListeners() {
   loginForm.addEventListener('submit', handleLogin);
-  sendBtn.addEventListener('click', handleSendPDF);
   logoutBtn.addEventListener('click', handleLogout);
   helpBtn.addEventListener('click', handleHelp);
   togglePasswordBtn.addEventListener('click', handleTogglePassword);
@@ -138,7 +133,7 @@ async function handleLogin(e: Event) {
     await saveCredentials({ username, password });
 
     showMainView();
-    await loadLastPDF();
+    await loadPDFQueue();
   } catch (error) {
     if (error instanceof BinectAPIError) {
       showError(error.message);
@@ -152,24 +147,132 @@ async function handleLogin(e: Event) {
 }
 
 /**
- * Handle send PDF
+ * Load PDF queue from background and current tab
  */
-async function handleSendPDF() {
-  if (!currentPDF || !currentCredentials) {
+async function loadPDFQueue() {
+  console.log('[Popup] Loading PDF queue...');
+
+  // Get queue from background script
+  const response = await chrome.runtime.sendMessage({ action: 'getPDFQueue' });
+  pdfQueue = response?.entries || [];
+  console.log('[Popup] Got', pdfQueue.length, 'entries from background');
+
+  // Also check current tab for PDF
+  const currentTabPDF = await checkCurrentTabForPDF();
+  if (currentTabPDF) {
+    // Check if already in queue
+    const exists = pdfQueue.some(p => p.url === currentTabPDF.url);
+    if (!exists) {
+      console.log('[Popup] Adding current tab PDF to queue:', currentTabPDF.filename);
+      // Add to queue (will be added to persistent queue when user interacts)
+      const entry: PDFQueueEntry = {
+        ...currentTabPDF,
+        status: 'pending'
+      };
+      pdfQueue.unshift(entry);
+    }
+  }
+
+  // Render the list
+  renderPDFList();
+}
+
+/**
+ * Render the PDF list
+ */
+function renderPDFList() {
+  // Filter to only pending and failed PDFs
+  const pending = pdfQueue.filter(p => p.status === 'pending' || p.status === 'failed');
+
+  if (pending.length === 0) {
+    showNoPDF();
     return;
   }
 
-  sendBtn.disabled = true;
-  showStatus('Uploading...', 'uploading');
+  noPdfView.style.display = 'none';
+  pdfListView.style.display = 'block';
+
+  // Update count
+  pdfCount.textContent = `${pending.length} PDF${pending.length > 1 ? 's' : ''} ready`;
+
+  // Render list items
+  pdfList.innerHTML = pending.map(pdf => `
+    <div class="pdf-list-item ${pdf.status}" data-id="${escapeHtml(pdf.id)}">
+      <div class="pdf-item-icon">📄</div>
+      <div class="pdf-item-details">
+        <div class="pdf-item-filename" title="${escapeHtml(pdf.filename)}">${escapeHtml(pdf.filename)}</div>
+        <div class="pdf-item-meta">${formatFileSize(pdf.size)} · ${escapeHtml(pdf.sourceDomain)}</div>
+        <div class="pdf-item-status ${pdf.status === 'failed' ? 'error' : ''}">${getStatusText(pdf)}</div>
+      </div>
+      <div class="pdf-item-actions">
+        <button class="btn-send-item" data-id="${escapeHtml(pdf.id)}" ${pdf.status === 'uploading' ? 'disabled' : ''}>
+          ${pdf.status === 'uploading' ? 'Sending...' : (pdf.status === 'failed' ? 'Retry' : 'Send')}
+        </button>
+        <button class="btn-dismiss" data-id="${escapeHtml(pdf.id)}">Dismiss</button>
+      </div>
+    </div>
+  `).join('');
+
+  // Add event listeners to buttons
+  pdfList.querySelectorAll('.btn-send-item').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const id = (e.target as HTMLElement).dataset.id;
+      if (id) handleSendPDF(id);
+    });
+  });
+
+  pdfList.querySelectorAll('.btn-dismiss').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      const id = (e.target as HTMLElement).dataset.id;
+      if (id) handleDismissPDF(id);
+    });
+  });
+
+  hideStatus();
+}
+
+/**
+ * Get status text for a PDF
+ */
+function getStatusText(pdf: PDFQueueEntry): string {
+  switch (pdf.status) {
+    case 'uploading':
+      return 'Uploading...';
+    case 'failed':
+      return pdf.errorMessage || 'Upload failed';
+    default:
+      return formatTimestamp(pdf.timestamp);
+  }
+}
+
+/**
+ * Handle send PDF
+ */
+async function handleSendPDF(id: string) {
+  const pdf = pdfQueue.find(p => p.id === id);
+  if (!pdf || !currentCredentials) {
+    return;
+  }
+
+  // Update local state
+  pdf.status = 'uploading';
+  renderPDFList();
+
+  // Notify background
+  await chrome.runtime.sendMessage({
+    action: 'updatePDFStatus',
+    id,
+    status: 'uploading'
+  });
 
   try {
     // Fetch PDF bytes
-    const pdfBytes = await fetchPDFBytes(currentPDF.url);
+    const pdfBytes = await fetchPDFBytes(pdf.url);
 
     // Upload to Binect with credentials
     const document = await uploadPDF(
       pdfBytes,
-      currentPDF.filename,
+      pdf.filename,
       currentCredentials.username,
       currentCredentials.password
     );
@@ -177,26 +280,34 @@ async function handleSendPDF() {
     // Track successful transfer
     await addTrackingEntry({
       timestamp: Date.now(),
-      sourceDomain: currentPDF.sourceDomain,
+      sourceDomain: pdf.sourceDomain,
       destinationUrl: 'https://api.binect.de/binectapi/v1/documents',
-      pdfSize: pdfBytes.byteLength, // Use actual size from fetched data
+      pdfSize: pdfBytes.byteLength,
       result: 'success'
     });
 
     // Update last use timestamp
     await updateLastUse();
 
-    // Notify background script
-    chrome.runtime.sendMessage({ action: 'pdfSent' });
+    // Update status to uploaded
+    await chrome.runtime.sendMessage({
+      action: 'updatePDFStatus',
+      id,
+      status: 'uploaded',
+      meta: { binectDocumentId: document.id }
+    });
 
-    showStatus(`Success! Document ID: ${document.id} (Status: ${document.status.text})`, 'success');
+    // Remove from local queue
+    pdfQueue = pdfQueue.filter(p => p.id !== id);
+    renderPDFList();
 
-    // Clear PDF after 3 seconds
+    showStatus(`Sent! Document ID: ${document.id}`, 'success');
+
+    // Hide status after 3 seconds
     setTimeout(() => {
-      currentPDF = null;
-      showNoPDF();
       hideStatus();
     }, 3000);
+
   } catch (error) {
     let errorMessage = 'Upload failed';
 
@@ -217,26 +328,46 @@ async function handleSendPDF() {
     // Track failed transfer
     await addTrackingEntry({
       timestamp: Date.now(),
-      sourceDomain: currentPDF.sourceDomain,
+      sourceDomain: pdf.sourceDomain,
       destinationUrl: 'https://api.binect.de/binectapi/v1/documents',
-      pdfSize: currentPDF.size || 0,
+      pdfSize: pdf.size || 0,
       result: 'failure',
       errorMessage
     });
 
+    // Update status to failed
+    await chrome.runtime.sendMessage({
+      action: 'updatePDFStatus',
+      id,
+      status: 'failed',
+      meta: { errorMessage }
+    });
+
+    // Update local state
+    pdf.status = 'failed';
+    pdf.errorMessage = errorMessage;
+    renderPDFList();
+
     showStatus(errorMessage, 'error');
-  } finally {
-    sendBtn.disabled = false;
   }
 }
 
+/**
+ * Handle dismiss PDF
+ */
+async function handleDismissPDF(id: string) {
+  await chrome.runtime.sendMessage({ action: 'removePDF', id });
+  pdfQueue = pdfQueue.filter(p => p.id !== id);
+  renderPDFList();
+}
+
 /**
  * Handle logout
  */
 async function handleLogout() {
   await deleteCredentials();
   currentCredentials = null;
-  currentPDF = null;
+  pdfQueue = [];
 
   // Clear form
   loginForm.reset();
@@ -252,96 +383,6 @@ function handleHelp() {
   chrome.tabs.create({ url: chrome.runtime.getURL('tracking.html') });
 }
 
-/**
- * Load last detected PDF
- */
-async function loadLastPDF() {
-  console.log('[Popup] Loading last PDF...');
-
-  // First, check if current tab is viewing a PDF
-  const currentTabPDF = await checkCurrentTabForPDF();
-
-  if (currentTabPDF) {
-    console.log('[Popup] Found PDF in current tab:', currentTabPDF.filename);
-    currentPDF = currentTabPDF;
-    showPDF(currentPDF);
-    return;
-  }
-
-  console.log('[Popup] No PDF in current tab, checking background script...');
-
-  // If no PDF in current tab, ask background script for last detected download
-  chrome.runtime.sendMessage({ action: 'getLastPDF' }, async (response) => {
-    if (response && response.pdf && response.pdf !== null) {
-      console.log('[Popup] Background returned PDF:', response.pdf.filename);
-      currentPDF = response.pdf;
-      showPDF(response.pdf);
-    } else {
-      console.log('[Popup] Background has no PDF, checking recent downloads as fallback...');
-
-      // Fallback: Check recent downloads directly
-      const recentPDF = await checkRecentDownloads();
-      if (recentPDF !== null) {
-        console.log('[Popup] Found recent PDF download:', recentPDF.filename);
-        currentPDF = recentPDF;
-        showPDF(recentPDF);
-      } else {
-        console.log('[Popup] No PDF found anywhere');
-        showNoPDF();
-      }
-    }
-  });
-}
-
-/**
- * Check recent downloads for PDFs (fallback mechanism)
- */
-async function checkRecentDownloads(): Promise<DetectedPDF | null> {
-  return new Promise((resolve) => {
-    chrome.downloads.search(
-      {
-        limit: 20, // Check last 20 downloads
-        orderBy: ['-startTime']
-      },
-      (items) => {
-        console.log('[Popup] Checked recent downloads:', items.length, 'items');
-
-        // Find most recent completed PDF
-        const pdfItem = items.find(
-          (item) =>
-            item.state === 'complete' &&
-            (item.filename.toLowerCase().endsWith('.pdf') || item.mime === 'application/pdf')
-        );
-
-        if (pdfItem) {
-          console.log('[Popup] Found recent PDF:', pdfItem.filename);
-
-          // Extract domain
-          let domain = 'unknown';
-          try {
-            const urlObj = new URL(pdfItem.url);
-            domain = urlObj.hostname;
-          } catch (e) {
-            // Keep default
-          }
-
-          resolve({
-            id: `download-${pdfItem.id}`,
-            filename: pdfItem.filename.split('/').pop() || pdfItem.filename,
-            url: pdfItem.url,
-            size: pdfItem.fileSize,
-            timestamp: Date.now(), // Use current time as approximation
-            sourceDomain: domain
-          });
-        } else {
-          console.log('[Popup] No recent PDF downloads found');
-          resolve(null);
-        }
-      }
-    );
-  });
-}
-
 /**
  * Check if the current active tab is viewing a PDF
  */
@@ -427,22 +468,7 @@ function showMainView() {
  */
 function showNoPDF() {
   noPdfView.style.display = 'block';
-  pdfView.style.display = 'none';
-}
-
-/**
- * Show PDF view
- */
-function showPDF(pdf: DetectedPDF) {
-  noPdfView.style.display = 'none';
-  pdfView.style.display = 'block';
-
-  pdfFilename.textContent = pdf.filename;
-  pdfSize.textContent = formatFileSize(pdf.size);
-  pdfDomain.textContent = pdf.sourceDomain;
-  pdfTimestamp.textContent = formatTimestamp(pdf.timestamp);
-
-  sendBtn.disabled = false;
+  pdfListView.style.display = 'none';
   hideStatus();
 }
 
@@ -477,6 +503,15 @@ function hideStatus() {
   statusMessage.style.display = 'none';
 }
 
+/**
+ * Escape HTML to prevent XSS
+ */
+function escapeHtml(text: string): string {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
 /**
  * Format file size
  */