Skip to content

Commit bfef41c

Browse files
ix-56hix-56h
committed
Improve html integration with better control over loading and results injection. utils.js is now way better
1 parent b70a44e commit bfef41c

File tree

3 files changed

+135
-98
lines changed

3 files changed

+135
-98
lines changed

‎src/server/templates/components/result.jinja‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,110 @@
5454
patternInput.value = patternFiles.join(", ");
5555
}
5656
</script>
57-
<div class="mt-10" data-results></div>
57+
<div class="mt-10">
58+
<!-- Error Message (hidden by default) -->
59+
<div id="results-error" style="display:none"></div>
60+
<!-- Loading Spinner (hidden by default) -->
61+
<div id="results-loading" style="display:none">
62+
<div class="relative mt-10">
63+
<div class="w-full h-full absolute inset-0 bg-black rounded-xl translate-y-2 translate-x-2"></div>
64+
<div class="bg-[#fafafa] rounded-xl border-[3px] border-gray-900 p-6 relative z-20 flex flex-col items-center space-y-4">
65+
<div class="loader border-8 border-[#fff4da] border-t-8 border-t-[#ffc480] rounded-full w-16 h-16 animate-spin"></div>
66+
<p class="text-lg font-bold text-gray-900">Loading...</p>
67+
</div>
68+
</div>
69+
</div>
70+
<!-- Results Section (hidden by default) -->
71+
<div id="results-section" style="display:none">
72+
<div class="relative">
73+
<div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
74+
<div class="bg-[#fafafa] rounded-xl border-[3px] border-gray-900 p-6 relative z-20 space-y-6">
75+
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
76+
<div class="md:col-span-5">
77+
<div class="flex justify-between items-center mb-4 py-2">
78+
<h3 class="text-lg font-bold text-gray-900">Summary</h3>
79+
</div>
80+
<div class="relative">
81+
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
82+
<textarea id="result-summary"
83+
class="w-full h-[160px] p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-none focus:outline-none relative z-10"
84+
readonly></textarea>
85+
</div>
86+
<div class="relative mt-4 inline-block group ml-4">
87+
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
88+
<button onclick="copyFullDigest()"
89+
class="inline-flex items-center px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
90+
<svg class="w-4 h-4 mr-2"
91+
fill="none"
92+
stroke="currentColor"
93+
viewBox="0 0 24 24">
94+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
95+
</svg>
96+
Copy all
97+
</button>
98+
</div>
99+
<div class="relative mt-4 inline-block group ml-4">
100+
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
101+
<button onclick="downloadFullDigest()"
102+
class="inline-flex items-center px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
103+
<svg class="w-4 h-4 mr-2"
104+
fill="none"
105+
stroke="currentColor"
106+
viewBox="0 0 24 24">
107+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
108+
</svg>
109+
Download
110+
</button>
111+
</div>
112+
</div>
113+
<div class="md:col-span-7">
114+
<div class="flex justify-between items-center mb-4">
115+
<h3 class="text-lg font-bold text-gray-900">Directory Structure</h3>
116+
<div class="relative group">
117+
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
118+
<button onclick="copyText('directory-structure')"
119+
class="px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
120+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
121+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
122+
</svg>
123+
Copy
124+
</button>
125+
</div>
126+
</div>
127+
<div class="relative">
128+
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
129+
<div class="directory-structure w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10 h-[215px] overflow-auto"
130+
id="directory-structure-container"
131+
readonly>
132+
<input type="hidden" id="directory-structure-content" value="" />
133+
<pre id="directory-structure-pre"></pre>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
<div>
139+
<div class="flex justify-between items-center mb-4">
140+
<h3 class="text-lg font-bold text-gray-900">Files Content</h3>
141+
<div class="relative group">
142+
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
143+
<button onclick="copyText('result-text')"
144+
class="px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
145+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
146+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
147+
</svg>
148+
Copy
149+
</button>
150+
</div>
151+
</div>
152+
<div class="relative">
153+
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
154+
<textarea id="result-content"
155+
class="result-text w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10"
156+
style="min-height: 600px"
157+
readonly></textarea>
158+
</div>
159+
</div>
160+
</div>
161+
</div>
162+
</div>
163+
</div>

‎src/static/js/git.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
function waitForStars() {
32
return new Promise((resolve) => {
43
const check = () => {
@@ -25,7 +24,7 @@ document.addEventListener("DOMContentLoaded", () => {
2524
value: form,
2625
enumerable: true
2726
});
28-
handleSubmit(submitEvent, false);
27+
handleSubmit(submitEvent, true);
2928
});
3029
}
3130
});

‎src/static/js/utils.js‎

Lines changed: 27 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -41,26 +41,32 @@ function copyText(className) {
4141
});
4242
}
4343

44+
// Helper functions for toggling result blocks
45+
function showLoading() {
46+
document.getElementById('results-loading').style.display = 'block';
47+
document.getElementById('results-section').style.display = 'none';
48+
document.getElementById('results-error').style.display = 'none';
49+
}
50+
function showResults() {
51+
document.getElementById('results-loading').style.display = 'none';
52+
document.getElementById('results-section').style.display = 'block';
53+
document.getElementById('results-error').style.display = 'none';
54+
}
55+
function showError(msg) {
56+
document.getElementById('results-loading').style.display = 'none';
57+
document.getElementById('results-section').style.display = 'none';
58+
const errorDiv = document.getElementById('results-error');
59+
errorDiv.innerHTML = msg;
60+
errorDiv.style.display = 'block';
61+
}
4462

45-
function handleSubmit(event, showLoading = false) {
63+
function handleSubmit(event, showLoadingSpinner = false) {
4664
event.preventDefault();
4765
const form = event.target || document.getElementById('ingestForm');
4866
if (!form) return;
4967

50-
// Declare resultsSection before use
51-
const resultsSection = document.querySelector('[data-results]');
52-
53-
if (resultsSection) {
54-
// Show in-content loading spinner
55-
resultsSection.innerHTML = `
56-
<div class="relative mt-10">
57-
<div class="w-full h-full absolute inset-0 bg-black rounded-xl translate-y-2 translate-x-2"></div>
58-
<div class="bg-[#fafafa] rounded-xl border-[3px] border-gray-900 p-6 relative z-20 flex flex-col items-center space-y-4">
59-
<div class="loader border-8 border-[#fff4da] border-t-8 border-t-[#ffc480] rounded-full w-16 h-16 animate-spin"></div>
60-
<p class="text-lg font-bold text-gray-900">Loading...</p>
61-
</div>
62-
</div>
63-
`;
68+
if (showLoadingSpinner) {
69+
showLoading();
6470
}
6571

6672
const submitButton = form.querySelector('button[type="submit"]');
@@ -87,7 +93,7 @@ function handleSubmit(event, showLoading = false) {
8793

8894
const originalContent = submitButton.innerHTML;
8995

90-
if (showLoading) {
96+
if (showLoadingSpinner) {
9197
submitButton.disabled = true;
9298
submitButton.innerHTML = `
9399
<div class="flex items-center justify-center">
@@ -106,86 +112,17 @@ function handleSubmit(event, showLoading = false) {
106112
.then(response => response.json())
107113
.then(data => {
108114
// Hide loading overlay
109-
if (resultsSection) resultsSection.innerHTML = '';
110115
submitButton.disabled = false;
111116
submitButton.innerHTML = originalContent;
112117

113-
if (!resultsSection) return;
114-
115118
// Handle error
116119
if (data.error) {
117-
resultsSection.innerHTML = `<div class='mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700'>${data.error}</div>`;
120+
showError(`<div class='mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700'>${data.error}</div>`);
118121
return;
119122
}
120123

121-
// Build the static HTML structure
122-
resultsSection.innerHTML = `
123-
<div class="relative">
124-
<div class="w-full h-full absolute inset-0 bg-gray-900 rounded-xl translate-y-2 translate-x-2"></div>
125-
<div class="bg-[#fafafa] rounded-xl border-[3px] border-gray-900 p-6 relative z-20 space-y-6">
126-
<div class="grid grid-cols-1 md:grid-cols-12 gap-6">
127-
<div class="md:col-span-5">
128-
<div class="flex justify-between items-center mb-4 py-2">
129-
<h3 class="text-lg font-bold text-gray-900">Summary</h3>
130-
</div>
131-
<div class="relative">
132-
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
133-
<textarea id="result-summary" class="w-full h-[160px] p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-none focus:outline-none relative z-10" readonly></textarea>
134-
</div>
135-
<div class="relative mt-4 inline-block group ml-4">
136-
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
137-
<button onclick="copyFullDigest()" class="inline-flex items-center px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
138-
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
139-
Copy all
140-
</button>
141-
</div>
142-
<div class="relative mt-4 inline-block group ml-4">
143-
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
144-
<button onclick="downloadFullDigest()" class="inline-flex items-center px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10">
145-
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>
146-
Download
147-
</button>
148-
</div>
149-
</div>
150-
<div class="md:col-span-7">
151-
<div class="flex justify-between items-center mb-4">
152-
<h3 class="text-lg font-bold text-gray-900">Directory Structure</h3>
153-
<div class="relative group">
154-
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
155-
<button onclick="copyText('directory-structure')" class="px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
156-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
157-
Copy
158-
</button>
159-
</div>
160-
</div>
161-
<div class="relative">
162-
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
163-
<div class="directory-structure w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10 h-[215px] overflow-auto" id="directory-structure-container" readonly>
164-
<input type="hidden" id="directory-structure-content" value="" />
165-
<pre id="directory-structure-pre"></pre>
166-
</div>
167-
</div>
168-
</div>
169-
</div>
170-
<div>
171-
<div class="flex justify-between items-center mb-4">
172-
<h3 class="text-lg font-bold text-gray-900">Files Content</h3>
173-
<div class="relative group">
174-
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
175-
<button onclick="copyText('result-text')" class="px-4 py-2 bg-[#ffc480] border-[3px] border-gray-900 text-gray-900 rounded group-hover:-translate-y-px group-hover:-translate-x-px transition-transform relative z-10 flex items-center gap-2">
176-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" /></svg>
177-
Copy
178-
</button>
179-
</div>
180-
</div>
181-
<div class="relative">
182-
<div class="w-full h-full rounded bg-gray-900 translate-y-1 translate-x-1 absolute inset-0"></div>
183-
<textarea id="result-content" class="result-text w-full p-4 bg-[#fff4da] border-[3px] border-gray-900 rounded font-mono text-sm resize-y focus:outline-none relative z-10" style="min-height: 600px" readonly></textarea>
184-
</div>
185-
</div>
186-
</div>
187-
</div>
188-
`;
124+
// Show results section
125+
showResults();
189126

190127
// Set plain text content for summary, tree, and content
191128
document.getElementById('result-summary').value = data.summary || '';
@@ -207,17 +144,12 @@ function handleSubmit(event, showLoading = false) {
207144
}
208145

209146
// Scroll to results
210-
resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
147+
document.getElementById('results-section').scrollIntoView({ behavior: 'smooth', block: 'start' });
211148
})
212149
.catch(error => {
213-
// Hide loading overlay
214-
if (resultsSection) resultsSection.innerHTML = '';
215150
submitButton.disabled = false;
216151
submitButton.innerHTML = originalContent;
217-
const resultsSection = document.querySelector('[data-results]');
218-
if (resultsSection) {
219-
resultsSection.innerHTML = `<div class='mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700'>${error}</div>`;
220-
}
152+
showError(`<div class='mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700'>${error}</div>`);
221153
});
222154
}
223155

0 commit comments

Comments
 (0)