diff --git a/static/js/history.js b/static/js/history.js index 5e92ddb..c1ae63c 100644 --- a/static/js/history.js +++ b/static/js/history.js @@ -58,31 +58,80 @@ window.renderHistory = function() { item.addEventListener('click', () => { const historyItem = history.find(h => h.id === parseInt(item.dataset.id)); if (historyItem) { - // Display the image + // Store current state before entering history view + const previousState = { + textEditorVisible: !window.app.textEditor.classList.contains('hidden'), + textFormatControlsVisible: !document.querySelector('.text-format-controls').classList.contains('hidden'), + extractedTextValue: window.app.extractedText.value + }; + + // Add history view class and display the image + document.body.classList.add('history-view'); window.app.screenshotImg.src = historyItem.image; window.app.imagePreview.classList.remove('hidden'); document.getElementById('historyPanel').classList.add('hidden'); - - // Hide all action buttons in history view - window.app.cropBtn.classList.add('hidden'); - window.app.captureBtn.classList.add('hidden'); - window.app.sendToClaudeBtn.classList.add('hidden'); - window.app.extractTextBtn.classList.add('hidden'); - window.app.sendExtractedTextBtn.classList.add('hidden'); - - // Reset confidence display - document.getElementById('confidenceDisplay').textContent = ''; - - // Always hide text editor and extracted text in history view - window.app.textEditor.classList.add('hidden'); + + // Force hide all unwanted elements + const elementsToHide = [ + window.app.cropBtn, + window.app.captureBtn, + window.app.sendToClaudeBtn, + window.app.extractTextBtn, + window.app.sendExtractedTextBtn, + window.app.textEditor, + document.querySelector('.text-format-controls'), + document.getElementById('confidenceIndicator'), + document.querySelector('.analysis-button .button-group') + ]; + + elementsToHide.forEach(element => { + if (element) { + element.classList.add('hidden'); + element.style.display = 'none'; + } + }); + + // Clear text and confidence display window.app.extractedText.value = ''; - window.app.sendExtractedTextBtn.classList.add('hidden'); + document.getElementById('confidenceDisplay').textContent = ''; // Show response if it exists if (historyItem.response) { window.app.claudePanel.classList.remove('hidden'); window.app.responseContent.textContent = historyItem.response; } + + // Add click handler to close history view and restore previous state + const closeHandler = () => { + // Remove history view class + document.body.classList.remove('history-view'); + + // Hide preview panels + window.app.imagePreview.classList.add('hidden'); + window.app.claudePanel.classList.add('hidden'); + + // Restore previous state + if (previousState.textEditorVisible) { + window.app.textEditor.classList.remove('hidden'); + window.app.textEditor.style.display = ''; + } + if (previousState.textFormatControlsVisible) { + document.querySelector('.text-format-controls').classList.remove('hidden'); + document.querySelector('.text-format-controls').style.display = ''; + } + window.app.extractedText.value = previousState.extractedTextValue; + + // Remove event listener + document.removeEventListener('click', closeHandler); + }; + + // Close history view when clicking outside the image or response + document.addEventListener('click', (e) => { + if (!window.app.imagePreview.contains(e.target) && + !window.app.claudePanel.contains(e.target)) { + closeHandler(); + } + }); } }); }); diff --git a/static/js/main.js b/static/js/main.js index 6d847bf..eea2f86 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -222,7 +222,7 @@ class SnapSolver { break; case 'error': - console.error('Claude analysis error:', data.error); + console.error('Analysis error:', data.error); const errorMessage = data.error || 'Unknown error occurred'; this.responseContent.textContent += '\nError: ' + errorMessage; this.sendToClaudeBtn.disabled = false; diff --git a/static/style.css b/static/style.css index 2c84807..a675f9e 100644 --- a/static/style.css +++ b/static/style.css @@ -641,6 +641,32 @@ button:disabled { } /* History Panel */ +/* Hide specific elements when viewing history items */ +body.history-view .text-editor, +body.history-view .text-format-controls, +body.history-view .confidence-indicator, +body.history-view #confidenceIndicator, +body.history-view #confidenceDisplay, +body.history-view #extractText, +body.history-view #sendExtractedText, +body.history-view .format-toggle, +body.history-view .send-text-group, +body.history-view #textEditor, +body.history-view .analysis-button .button-group { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; + pointer-events: none !important; + position: absolute !important; + z-index: -1 !important; +} + +/* Ensure only image and response are visible in history view */ +body.history-view .image-preview, +body.history-view .claude-panel { + display: block !important; +} + .history-panel { position: fixed; top: 0;