Function updateHistoryDisplay

script.js:362–427

()

    }

    function updateHistoryDisplay() {
        const history = getHistory();
        
        if (history.length === 0) {
            historyList.innerHTML = '<p class="tui-text tui-color-green">[No history yet - start cleaning some text!]</p>';
            return;
        }

        historyList.innerHTML = '';
        
        history.forEach(item => {
            const historyItem = document.createElement('div');
            historyItem.className = 'history-item';
            
            const header = document.createElement('div');
            header.className = 'history-item-header';
            
            const date = document.createElement('span');
            date.className = 'history-date tui-text';
            date.textContent = formatDate(item.timestamp);
            
            const controls = document.createElement('div');
            controls.className = 'history-item-controls';

            const deleteBtn = createHistoryDeleteButton(item.id);
            const copyBtn = createHistoryCopyButton(item.cleaned);
            controls.appendChild(deleteBtn);
            controls.appendChild(copyBtn);
            
            header.appendChild(date);
            header.appendChild(controls);
            
            const contentContainer = document.createElement('div');
            contentContainer.className = 'history-item-content-container';
            
            const lines = item.cleaned.split('\n');
            const isLong = lines.length > 5;
            const previewText = isLong 
                ? lines.slice(0, 5).join('\n') + '...'
                : item.cleaned;
            
            const previewDiv = document.createElement('div');
            previewDiv.className = 'history-item-content history-item-preview';
            previewDiv.textContent = previewText;
            
            const fullContentDiv = document.createElement('div');
            fullContentDiv.className = 'history-item-content history-item-full';
            fullContentDiv.textContent = item.cleaned;
            fullContentDiv.style.display = isLong ? 'none' : 'block';
            
            if (isLong) {
                previewDiv.style.display = 'block';
                
                makePreviewClickable(previewDiv, fullContentDiv);
            } else {
                previewDiv.style.display = 'none';
            }