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

index.html

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

src/UIManager.js

@@ -2,6 +2,7 @@ export class UIManager {
     constructor(snippetManager) {
         this.snippetManager = snippetManager;
         this.setupEventListeners();
+        this.setupSearchInput();
     }
 
     setupEventListeners() {
@@ -147,4 +148,25 @@ export class UIManager {
             'View Saved' :
             '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);
+        });
+    }
 }

src/styles.css

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