d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-08 17:09:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add truncation with expand button to diff display

Browse Source 
Show first 6 lines of diff by default with a "Show X more lines"
button to expand and view the full diff when there are more lines.

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
andrepimenta
2025-12-01 15:42:19 +00:00
parent bf527bb922
commit 2b1ad70f6b
1 changed files with 27 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/script.ts
View File

@@ -533,7 +533,12 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
// Build diff lines with proper line numbers
let oldLineNum = startLine;
let newLineNum = startLine;
const maxLines = 6;
const diffId = 'diff_' + Math.random().toString(36).substr(2, 9);
let lineIndex = 0;
// First pass: build all line HTML
const allLinesHtml = [];
for (const change of diff) {
let lineNum, prefix, cssClass;
@@ -556,7 +561,28 @@ const getScript = (isTelemetryEnabled: boolean) => `<script>
}
const lineNumStr = lineNum.toString().padStart(3);
html += '<div class="diff-line ' + cssClass + '">' + prefix + lineNumStr + ' ' + escapeHtml(change.content) + '</div>';
allLinesHtml.push('<div class="diff-line ' + cssClass + '">' + prefix + lineNumStr + ' ' + escapeHtml(change.content) + '</div>');
}
// Show visible lines
const shouldTruncate = allLinesHtml.length > maxLines;
const visibleLines = shouldTruncate ? allLinesHtml.slice(0, maxLines) : allLinesHtml;
const hiddenLines = shouldTruncate ? allLinesHtml.slice(maxLines) : [];
html += '<div id="' + diffId + '_visible">';
html += visibleLines.join('');
html += '</div>';
// Show hidden lines (initially hidden)
if (shouldTruncate) {
html += '<div id="' + diffId + '_hidden" style="display: none;">';
html += hiddenLines.join('');
html += '</div>';
// Add expand button
html += '<div class="diff-expand-container">';
html += '<button class="diff-expand-btn" onclick="toggleDiffExpansion(\\'' + diffId + '\\')">Show ' + hiddenLines.length + ' more lines</button>';
html += '</div>';
}
html += '</div>';