feat: add search functionality for snippets with input field in UI

This commit is contained in:
2025-01-25 20:05:51 +02:00
parent fa08f2f8b9
commit dd56d4adc2
3 changed files with 32 additions and 0 deletions

View File

@@ -38,6 +38,7 @@
<h2>Snippets</h2> <h2>Snippets</h2>
<button class="button" id="new-snippet">New Snippet</button> <button class="button" id="new-snippet">New Snippet</button>
</div> </div>
<input type="text" id="snippet-search" class="snippet-search" placeholder="Search snippets...">
<div class="snippet-list" id="snippet-list"> <div class="snippet-list" id="snippet-list">
<!-- Snippets will be populated here --> <!-- Snippets will be populated here -->
</div> </div>

View File

@@ -2,6 +2,7 @@ export class UIManager {
constructor(snippetManager) { constructor(snippetManager) {
this.snippetManager = snippetManager; this.snippetManager = snippetManager;
this.setupEventListeners(); this.setupEventListeners();
this.setupSearchInput();
} }
setupEventListeners() { setupEventListeners() {
@@ -147,4 +148,25 @@ export class UIManager {
'View Saved' : 'View Saved' :
'View Draft'; 'View Draft';
} }
setupSearchInput() {
const searchInput = document.getElementById('snippet-search');
searchInput.addEventListener('input', (e) => {
const query = e.target.value;
let filteredSnippets;
try {
const regex = new RegExp(query, 'i');
filteredSnippets = this.snippetManager.snippets.filter(snippet => {
const snippetText = JSON.stringify(snippet);
return regex.test(snippetText);
});
} catch (err) {
filteredSnippets = this.snippetManager.snippets.filter(snippet => {
const snippetText = JSON.stringify(snippet).toLowerCase();
return snippetText.includes(query.toLowerCase());
});
}
this.renderSnippetList(filteredSnippets, this.snippetManager.currentSnippetId);
});
}
} }

View File

@@ -325,3 +325,12 @@
.snippet-item:hover .comment-snippet { .snippet-item:hover .comment-snippet {
opacity: 0.8; opacity: 0.8;
} }
.snippet-search {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 1rem;
}