Improve job posting generator UX - reduce toast spam and add auto-scroll

UX IMPROVEMENTS:
- Add auto-scroll to processing status when job starts (matches social ads generator)
- Reduce excessive toast notifications from 17 to 14 (18% reduction)
- Make download operations silent (file download is confirmation enough)
- Remove success toast for copy operations (clipboard action is confirmation)
- Remove success toast for results display (visual results are confirmation)
- Add auto-scroll to form after reset for better UX flow

SILENT OPERATIONS (no toast spam):
 Download success - file download is confirmation
 Copy success - clipboard action is confirmation
 Reset form - visual clearing is confirmation
 Results display - showing content is confirmation

KEPT TOASTS FOR:
 Copy/download errors - user needs to know
 Form validation errors - user needs to fix
 Network/processing errors - user needs feedback
 Authentication errors - user needs action

Better user experience with less intrusive notifications, matching social ads generator pattern.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude 2025-07-25 23:12:12 +05:30
parent 285268a3d0
commit 9c4fcaedf3

View File

@ -95,8 +95,19 @@
// Processing Status Functions // Processing Status Functions
function showProcessing() { function showProcessing() {
const processingStatus = document.getElementById('processingStatus'); const processingStatus = document.getElementById('processingStatus');
const resultsContainer = document.getElementById('resultsContainer');
if (processingStatus) {
processingStatus.style.display = 'block'; processingStatus.style.display = 'block';
processingStatus.classList.add('active'); processingStatus.classList.add('active');
// Smooth scroll to processing section
processingStatus.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
if (resultsContainer) resultsContainer.style.display = 'none';
} }
function hideProcessing() { function hideProcessing() {
@ -484,7 +495,7 @@
resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'center' }); resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
} }
showToast('✅ Job posting created successfully!', 'success'); // No toast needed - results display is confirmation enough
} else { } else {
// Handle error case // Handle error case
@ -604,7 +615,7 @@
// Get clean text content without HTML formatting // Get clean text content without HTML formatting
const text = content.textContent || content.innerText || ''; const text = content.textContent || content.innerText || '';
navigator.clipboard.writeText(text).then(() => { navigator.clipboard.writeText(text).then(() => {
showToast('📋 Job posting copied to clipboard!', 'success'); // No toast for successful copy - clipboard action is confirmation enough
}).catch(() => { }).catch(() => {
showToast('❌ Failed to copy to clipboard', 'error'); showToast('❌ Failed to copy to clipboard', 'error');
}); });
@ -635,7 +646,7 @@
document.body.removeChild(a); document.body.removeChild(a);
URL.revokeObjectURL(url); URL.revokeObjectURL(url);
showToast('💾 Job posting downloaded!', 'success'); // No toast for download - file download is confirmation enough
} else { } else {
showToast('❌ No job posting content to download', 'error'); showToast('❌ No job posting content to download', 'error');
} }
@ -646,6 +657,14 @@
const resultsContainer = document.getElementById('resultsContainer'); const resultsContainer = document.getElementById('resultsContainer');
if (resultsContainer) resultsContainer.style.display = 'none'; if (resultsContainer) resultsContainer.style.display = 'none';
document.getElementById('processButton').disabled = false; document.getElementById('processButton').disabled = false;
// Scroll back to form for new input
const formSection = document.getElementById('jobPostingForm');
if (formSection) {
formSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
// No toast for reset - visual feedback is enough
} }
</script> </script>