generated from coulomb/repo-seed
Add local tag server check, archive on delete, and first-run pin reminder
- Local tag is now clickable - checks if document exists on server by ID or filename, and re-links if found - Delete from server now archives the proxy instead of removing it, making it a local-only document that can be re-uploaded - Added first-run pin reminder banner to help users pin the extension - Added issue report modal with context sections (extension info, browser info, document status, recent errors) and copy to clipboard as Markdown - Added clearServerFields and attachServerDocument functions to pdf-queue - Improved local tag styling with hover states and visual feedback Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -34,6 +34,28 @@ const togglePasswordBtn = document.getElementById('togglePassword') as HTMLButto
|
||||
const eyeIcon = document.getElementById('eyeIcon')!;
|
||||
const eyeOffIcon = document.getElementById('eyeOffIcon')!;
|
||||
|
||||
// Issue Report Modal Elements
|
||||
const issueModal = document.getElementById('issueModal')!;
|
||||
const reportIssueBtn = document.getElementById('reportIssueBtn')!;
|
||||
const closeModalBtn = document.getElementById('closeModalBtn')!;
|
||||
const modalBackdrop = issueModal.querySelector('.modal-backdrop')!;
|
||||
const issueTitleInput = document.getElementById('issueTitle') as HTMLInputElement;
|
||||
const issueDescriptionInput = document.getElementById('issueDescription') as HTMLTextAreaElement;
|
||||
const copyToClipboardBtn = document.getElementById('copyToClipboardBtn') as HTMLButtonElement;
|
||||
|
||||
// Context section content elements
|
||||
const extensionInfoContent = document.getElementById('extensionInfoContent')!;
|
||||
const browserInfoContent = document.getElementById('browserInfoContent')!;
|
||||
const documentStatusContent = document.getElementById('documentStatusContent')!;
|
||||
const recentErrorsContent = document.getElementById('recentErrorsContent')!;
|
||||
|
||||
// Error tracking for issue reports
|
||||
const recentErrors: Array<{ timestamp: number; message: string; stack?: string }> = [];
|
||||
|
||||
// Pin Reminder Elements
|
||||
const pinReminder = document.getElementById('pinReminder')!;
|
||||
const dismissPinReminderBtn = document.getElementById('dismissPinReminder')!;
|
||||
|
||||
// State
|
||||
let pdfQueue: DocumentProxy[] = [];
|
||||
let currentCredentials: { username: string; password: string } | null = null;
|
||||
@@ -48,6 +70,9 @@ let refreshIndex = 0;
|
||||
* Initialize popup
|
||||
*/
|
||||
async function init() {
|
||||
// Check and show first-run pin reminder
|
||||
await checkFirstRunReminder();
|
||||
|
||||
// Check if user has credentials
|
||||
const credentials = await loadCredentials();
|
||||
|
||||
@@ -79,6 +104,38 @@ async function init() {
|
||||
setupEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if this is first run and show pin reminder
|
||||
*/
|
||||
async function checkFirstRunReminder() {
|
||||
const STORAGE_KEY = 'pinReminderDismissed';
|
||||
|
||||
try {
|
||||
const result = await chrome.storage.local.get(STORAGE_KEY);
|
||||
if (!result[STORAGE_KEY]) {
|
||||
// First run - show the reminder
|
||||
pinReminder.style.display = 'block';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[Popup] Error checking first run:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss the pin reminder and remember the choice
|
||||
*/
|
||||
async function dismissPinReminder() {
|
||||
const STORAGE_KEY = 'pinReminderDismissed';
|
||||
|
||||
pinReminder.style.display = 'none';
|
||||
|
||||
try {
|
||||
await chrome.storage.local.set({ [STORAGE_KEY]: true });
|
||||
} catch (error) {
|
||||
console.error('[Popup] Error saving pin reminder state:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup event listeners
|
||||
*/
|
||||
@@ -96,6 +153,11 @@ function setupEventListeners() {
|
||||
handleTogglePassword();
|
||||
});
|
||||
}
|
||||
|
||||
// Pin reminder dismiss button
|
||||
if (dismissPinReminderBtn) {
|
||||
dismissPinReminderBtn.addEventListener('click', dismissPinReminder);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -588,7 +650,7 @@ function renderPDFItem(pdf: DocumentProxy, section: 'pending' | 'erroneous' | 'b
|
||||
<div class="pdf-item-details">
|
||||
<div class="pdf-item-filename" title="${escapeHtml(pdf.filename)}">
|
||||
${escapeHtml(displayFilename)}
|
||||
${isLocalOnly ? '<span class="tag-local">local</span>' : ''}
|
||||
${isLocalOnly ? `<span class="tag-local" data-id="${escapeHtml(pdf.id)}" title="Click to check server">local</span>` : ''}
|
||||
</div>
|
||||
${metaParts.length > 0 ? `<div class="pdf-item-meta">${metaParts.join(' · ')}</div>` : ''}
|
||||
${pdf.recipientAddress ? `<div class="pdf-item-recipient">${escapeHtml(pdf.recipientAddress.split('\n')[0])}</div>` : ''}
|
||||
@@ -653,6 +715,15 @@ function setupPDFListEventListeners() {
|
||||
if (id) handleDeletePDF(id);
|
||||
});
|
||||
});
|
||||
|
||||
// Local tag clicks - check server for document
|
||||
pdfList.querySelectorAll('.tag-local').forEach(tag => {
|
||||
tag.addEventListener('click', (e) => {
|
||||
e.stopPropagation(); // Don't bubble to parent
|
||||
const id = (e.target as HTMLElement).dataset.id;
|
||||
if (id) handleCheckServer(id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1116,8 +1187,141 @@ async function handleRestorePDF(id: string) {
|
||||
setTimeout(() => hideStatus(), 2000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle check server for a local document
|
||||
* Checks if document exists on server (by ID if known, or by filename)
|
||||
*/
|
||||
async function handleCheckServer(id: string) {
|
||||
const pdf = pdfQueue.find(p => p.id === id);
|
||||
if (!pdf || !currentCredentials) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Find the tag element to show visual feedback
|
||||
const tagElement = pdfList.querySelector(`.tag-local[data-id="${id}"]`) as HTMLElement;
|
||||
if (tagElement) {
|
||||
tagElement.classList.add('checking');
|
||||
tagElement.textContent = '...';
|
||||
}
|
||||
|
||||
try {
|
||||
// First, try to find by known document ID if available
|
||||
if (pdf.binectDocumentId) {
|
||||
try {
|
||||
const result = await chrome.runtime.sendMessage({
|
||||
action: 'getDocumentStatus',
|
||||
documentId: pdf.binectDocumentId,
|
||||
username: currentCredentials.username,
|
||||
password: currentCredentials.password
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
// Document still exists on server, re-attach it
|
||||
await chrome.runtime.sendMessage({
|
||||
action: 'attachServerDocument',
|
||||
id,
|
||||
binectDocumentId: pdf.binectDocumentId,
|
||||
binectStatusCode: result.status,
|
||||
binectStatusText: result.statusText,
|
||||
price: result.price,
|
||||
recipientAddress: result.recipientAddress,
|
||||
errorMessage: result.errorDetails
|
||||
});
|
||||
|
||||
// Update local state
|
||||
pdf.binectStatusCode = result.status;
|
||||
pdf.binectStatusText = result.statusText;
|
||||
if (result.price !== undefined) pdf.price = result.price;
|
||||
if (result.recipientAddress) pdf.recipientAddress = result.recipientAddress;
|
||||
|
||||
renderPDFList();
|
||||
showStatus('Document found on server and re-linked', 'success');
|
||||
setTimeout(() => hideStatus(), 2000);
|
||||
return;
|
||||
}
|
||||
// If 404, continue to filename search
|
||||
} catch {
|
||||
// Document not found by ID, try filename search
|
||||
}
|
||||
}
|
||||
|
||||
// Try to find by filename in server documents
|
||||
const listResult = await chrome.runtime.sendMessage({
|
||||
action: 'listServerDocuments',
|
||||
username: currentCredentials.username,
|
||||
password: currentCredentials.password
|
||||
});
|
||||
|
||||
if (!listResult.success || !listResult.documents) {
|
||||
throw new Error('Failed to list server documents');
|
||||
}
|
||||
|
||||
// Extract just the filename for comparison (without path)
|
||||
const targetFilename = extractFilename(pdf.filename).toLowerCase();
|
||||
|
||||
// Find matching document by filename
|
||||
const match = (listResult.documents as Array<{
|
||||
id: number;
|
||||
filename: string;
|
||||
status: number;
|
||||
statusText: string;
|
||||
price?: number;
|
||||
recipientAddress?: string;
|
||||
errorDetails?: string;
|
||||
}>).find(doc => {
|
||||
const docFilename = extractFilename(doc.filename).toLowerCase();
|
||||
return docFilename === targetFilename;
|
||||
});
|
||||
|
||||
if (match) {
|
||||
// Found a matching document, attach it
|
||||
await chrome.runtime.sendMessage({
|
||||
action: 'attachServerDocument',
|
||||
id,
|
||||
binectDocumentId: match.id,
|
||||
binectStatusCode: match.status,
|
||||
binectStatusText: match.statusText,
|
||||
price: match.price,
|
||||
recipientAddress: match.recipientAddress,
|
||||
errorMessage: match.errorDetails
|
||||
});
|
||||
|
||||
// Update local state
|
||||
pdf.binectDocumentId = match.id;
|
||||
pdf.binectStatusCode = match.status;
|
||||
pdf.binectStatusText = match.statusText;
|
||||
if (match.price !== undefined) pdf.price = match.price;
|
||||
if (match.recipientAddress) pdf.recipientAddress = match.recipientAddress;
|
||||
if (match.errorDetails) pdf.errorMessage = match.errorDetails;
|
||||
|
||||
renderPDFList();
|
||||
showStatus(`Found on server (ID: ${match.id})`, 'success');
|
||||
setTimeout(() => hideStatus(), 2000);
|
||||
} else {
|
||||
// No matching document found
|
||||
if (tagElement) {
|
||||
tagElement.classList.remove('checking');
|
||||
tagElement.textContent = 'local';
|
||||
}
|
||||
showStatus('Not found on server', 'error');
|
||||
setTimeout(() => hideStatus(), 2000);
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('[Popup] Check server error:', error);
|
||||
if (tagElement) {
|
||||
tagElement.classList.remove('checking');
|
||||
tagElement.textContent = 'local';
|
||||
}
|
||||
const errorMessage = error instanceof Error ? error.message : 'Check failed';
|
||||
showStatus(errorMessage, 'error');
|
||||
setTimeout(() => hideStatus(), 2000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle delete from server (for erroneous or canceled documents)
|
||||
* After deleting, the proxy is archived and becomes local-only
|
||||
*/
|
||||
async function handleDeleteFromServer(id: string) {
|
||||
const pdf = pdfQueue.find(p => p.id === id);
|
||||
@@ -1137,12 +1341,26 @@ async function handleDeleteFromServer(id: string) {
|
||||
throw new Error(result.error || 'Failed to delete from server');
|
||||
}
|
||||
|
||||
// Remove from local queue after successful server deletion
|
||||
await chrome.runtime.sendMessage({ action: 'removePDF', id });
|
||||
// Clear server fields to make it local-only
|
||||
await chrome.runtime.sendMessage({ action: 'clearServerFields', id });
|
||||
|
||||
// Archive the proxy (it's now local-only)
|
||||
await chrome.runtime.sendMessage({ action: 'archiveProxy', id });
|
||||
|
||||
// Update local state
|
||||
pdf.binectDocumentId = undefined;
|
||||
pdf.binectStatusCode = undefined;
|
||||
pdf.binectStatusText = undefined;
|
||||
pdf.binectStatus = 'pending';
|
||||
pdf.price = undefined;
|
||||
pdf.recipientAddress = undefined;
|
||||
pdf.errorMessage = undefined;
|
||||
|
||||
// Remove from current view (it's now archived)
|
||||
pdfQueue = pdfQueue.filter(p => p.id !== id);
|
||||
renderPDFList();
|
||||
|
||||
showStatus('Document deleted from server', 'success');
|
||||
showStatus('Document deleted from server and archived', 'success');
|
||||
setTimeout(() => hideStatus(), 2000);
|
||||
|
||||
} catch (error) {
|
||||
@@ -1347,5 +1565,265 @@ function formatTimestamp(timestamp: number): string {
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// Issue Report Modal
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Track errors for issue reports
|
||||
*/
|
||||
function trackError(error: Error | string, stack?: string) {
|
||||
const errorEntry = {
|
||||
timestamp: Date.now(),
|
||||
message: typeof error === 'string' ? error : error.message,
|
||||
stack: stack || (error instanceof Error ? error.stack : undefined)
|
||||
};
|
||||
recentErrors.unshift(errorEntry);
|
||||
// Keep only last 10 errors
|
||||
if (recentErrors.length > 10) {
|
||||
recentErrors.pop();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get extension info for issue report
|
||||
*/
|
||||
function getExtensionInfo(): string {
|
||||
const manifest = chrome.runtime.getManifest();
|
||||
return JSON.stringify({
|
||||
name: manifest.name,
|
||||
version: manifest.version,
|
||||
manifestVersion: manifest.manifest_version
|
||||
}, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get browser info for issue report
|
||||
*/
|
||||
function getBrowserInfo(): string {
|
||||
const ua = navigator.userAgent;
|
||||
let browserName = 'Unknown';
|
||||
let browserVersion = 'Unknown';
|
||||
|
||||
// Parse user agent for browser info
|
||||
if (ua.includes('Chrome/')) {
|
||||
browserName = 'Chrome';
|
||||
const match = ua.match(/Chrome\/(\d+\.\d+\.\d+\.\d+)/);
|
||||
if (match) browserVersion = match[1];
|
||||
} else if (ua.includes('Firefox/')) {
|
||||
browserName = 'Firefox';
|
||||
const match = ua.match(/Firefox\/(\d+\.\d+)/);
|
||||
if (match) browserVersion = match[1];
|
||||
} else if (ua.includes('Edge/')) {
|
||||
browserName = 'Edge';
|
||||
const match = ua.match(/Edge\/(\d+\.\d+)/);
|
||||
if (match) browserVersion = match[1];
|
||||
}
|
||||
|
||||
return JSON.stringify({
|
||||
browser: browserName,
|
||||
version: browserVersion,
|
||||
platform: navigator.platform,
|
||||
language: navigator.language,
|
||||
userAgent: ua
|
||||
}, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get document status for issue report
|
||||
*/
|
||||
function getDocumentStatusInfo(): string {
|
||||
if (pdfQueue.length === 0) {
|
||||
return 'No documents in queue';
|
||||
}
|
||||
|
||||
const summary = {
|
||||
total: pdfQueue.length,
|
||||
byStatus: {} as Record<string, number>,
|
||||
documents: pdfQueue.map(doc => ({
|
||||
id: doc.id.substring(0, 8) + '...',
|
||||
binectStatus: doc.binectStatus,
|
||||
binectStatusCode: doc.binectStatusCode,
|
||||
hasError: !!doc.errorMessage
|
||||
}))
|
||||
};
|
||||
|
||||
// Count by status
|
||||
for (const doc of pdfQueue) {
|
||||
summary.byStatus[doc.binectStatus] = (summary.byStatus[doc.binectStatus] || 0) + 1;
|
||||
}
|
||||
|
||||
return JSON.stringify(summary, null, 2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get recent errors for issue report
|
||||
*/
|
||||
function getRecentErrorsInfo(): string {
|
||||
if (recentErrors.length === 0) {
|
||||
return 'No recent errors';
|
||||
}
|
||||
|
||||
return recentErrors.map(err => {
|
||||
const date = new Date(err.timestamp).toISOString();
|
||||
let text = `[${date}] ${err.message}`;
|
||||
if (err.stack) {
|
||||
text += `\n Stack: ${err.stack.split('\n').slice(0, 3).join('\n ')}`;
|
||||
}
|
||||
return text;
|
||||
}).join('\n\n');
|
||||
}
|
||||
|
||||
/**
|
||||
* Open the issue report modal
|
||||
*/
|
||||
function openIssueModal() {
|
||||
// Clear previous input
|
||||
issueTitleInput.value = '';
|
||||
issueDescriptionInput.value = '';
|
||||
|
||||
// Reset checkboxes
|
||||
issueModal.querySelectorAll('input[type="checkbox"]').forEach(cb => {
|
||||
(cb as HTMLInputElement).checked = false;
|
||||
});
|
||||
|
||||
// Populate context sections
|
||||
extensionInfoContent.textContent = getExtensionInfo();
|
||||
browserInfoContent.textContent = getBrowserInfo();
|
||||
documentStatusContent.textContent = getDocumentStatusInfo();
|
||||
recentErrorsContent.textContent = getRecentErrorsInfo();
|
||||
|
||||
// Close all sections by default
|
||||
issueModal.querySelectorAll('.context-section-content').forEach(section => {
|
||||
(section as HTMLElement).style.display = 'none';
|
||||
});
|
||||
issueModal.querySelectorAll('.toggle-icon').forEach(icon => {
|
||||
icon.textContent = '▶';
|
||||
});
|
||||
|
||||
// Show modal
|
||||
issueModal.style.display = 'flex';
|
||||
}
|
||||
|
||||
/**
|
||||
* Close the issue report modal
|
||||
*/
|
||||
function closeIssueModal() {
|
||||
issueModal.style.display = 'none';
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle a context section
|
||||
*/
|
||||
function toggleContextSection(sectionId: string) {
|
||||
const content = document.getElementById(sectionId);
|
||||
const button = issueModal.querySelector(`[data-section="${sectionId}"]`);
|
||||
const icon = button?.querySelector('.toggle-icon');
|
||||
|
||||
if (content && icon) {
|
||||
const isVisible = content.style.display !== 'none';
|
||||
content.style.display = isVisible ? 'none' : 'block';
|
||||
icon.textContent = isVisible ? '▶' : '▼';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Format issue report as Markdown and copy to clipboard
|
||||
*/
|
||||
async function copyIssueToClipboard() {
|
||||
const title = issueTitleInput.value.trim();
|
||||
const description = issueDescriptionInput.value.trim();
|
||||
|
||||
// Build markdown content
|
||||
let markdown = '';
|
||||
|
||||
if (title) {
|
||||
markdown += `# ${title}\n\n`;
|
||||
}
|
||||
|
||||
if (description) {
|
||||
markdown += `## Description\n\n${description}\n\n`;
|
||||
}
|
||||
|
||||
// Add context sections (only those not excluded)
|
||||
const sections = [
|
||||
{ id: 'extensionInfo', name: 'Extension Info', content: extensionInfoContent.textContent },
|
||||
{ id: 'browserInfo', name: 'Browser Info', content: browserInfoContent.textContent },
|
||||
{ id: 'documentStatus', name: 'Document Status', content: documentStatusContent.textContent },
|
||||
{ id: 'recentErrors', name: 'Recent Errors', content: recentErrorsContent.textContent }
|
||||
];
|
||||
|
||||
let hasContext = false;
|
||||
for (const section of sections) {
|
||||
const checkbox = issueModal.querySelector(`input[data-exclude="${section.id}"]`) as HTMLInputElement;
|
||||
if (!checkbox?.checked && section.content && section.content !== 'No recent errors' && section.content !== 'No documents in queue') {
|
||||
if (!hasContext) {
|
||||
markdown += `## Context\n\n`;
|
||||
hasContext = true;
|
||||
}
|
||||
markdown += `### ${section.name}\n\n\`\`\`json\n${section.content}\n\`\`\`\n\n`;
|
||||
}
|
||||
}
|
||||
|
||||
// Copy to clipboard
|
||||
try {
|
||||
await navigator.clipboard.writeText(markdown);
|
||||
|
||||
// Show success feedback
|
||||
const originalText = copyToClipboardBtn.textContent;
|
||||
copyToClipboardBtn.textContent = 'Copied!';
|
||||
copyToClipboardBtn.classList.add('btn-copy-success');
|
||||
|
||||
setTimeout(() => {
|
||||
copyToClipboardBtn.textContent = originalText;
|
||||
copyToClipboardBtn.classList.remove('btn-copy-success');
|
||||
}, 2000);
|
||||
} catch (error) {
|
||||
console.error('Failed to copy to clipboard:', error);
|
||||
trackError(error as Error);
|
||||
|
||||
// Show error feedback
|
||||
copyToClipboardBtn.textContent = 'Copy failed';
|
||||
setTimeout(() => {
|
||||
copyToClipboardBtn.textContent = 'Copy to Clipboard';
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup issue modal event listeners
|
||||
*/
|
||||
function setupIssueModalListeners() {
|
||||
// Open modal
|
||||
reportIssueBtn.addEventListener('click', openIssueModal);
|
||||
|
||||
// Close modal
|
||||
closeModalBtn.addEventListener('click', closeIssueModal);
|
||||
modalBackdrop.addEventListener('click', closeIssueModal);
|
||||
|
||||
// Close on Escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && issueModal.style.display !== 'none') {
|
||||
closeIssueModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Context section toggles
|
||||
issueModal.querySelectorAll('.context-toggle').forEach(toggle => {
|
||||
toggle.addEventListener('click', () => {
|
||||
const sectionId = (toggle as HTMLElement).dataset.section;
|
||||
if (sectionId) {
|
||||
toggleContextSection(sectionId);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Copy to clipboard
|
||||
copyToClipboardBtn.addEventListener('click', copyIssueToClipboard);
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
init();
|
||||
|
||||
// Setup issue modal listeners after DOM is ready
|
||||
setupIssueModalListeners();
|
||||
|
||||
Reference in New Issue
Block a user