Add search results info bar

- Add info bar above search results showing match count
- Display 'X matches found in Y snippets' when search is active
- Hide info bar when no search query is entered
- Update HTML structure to accommodate info bar

Author: codebude

public/index.html

@@ -55,8 +55,13 @@ <h1 class="text-2xl font-bold">massCode-Web</h1>
                 </div>
             </footer>
         </aside>
-        <main id="snippets-container" class="flex-1 p-4 overflow-y-auto bg-white dark:bg-gray-900 transition-colors md:ml-0">
-            <!-- Snippets will be rendered here -->
+        <main class="flex-1 flex flex-col bg-white dark:bg-gray-900 transition-colors md:ml-0">
+            <div id="search-info-bar" class="hidden px-4 py-2 bg-blue-50 border-b border-blue-200 text-blue-800 text-sm dark:bg-blue-900 dark:border-blue-700 dark:text-blue-200">
+                <!-- Search results info will be displayed here -->
+            </div>
+            <div id="snippets-container" class="flex-1 p-4 overflow-y-auto">
+                <!-- Snippets will be rendered here -->
+            </div>
         </main>
     </div>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>

public/js/app.js

@@ -7,6 +7,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const sidebar = document.getElementById('sidebar');
     const sidebarBackdrop = document.getElementById('sidebar-backdrop');
     const themeToggle = document.getElementById('theme-toggle');
+    const searchInfoBar = document.getElementById('search-info-bar');
     let dbData = null;
     let currentSnippets = [];
     let loadedCount = 0;
@@ -220,6 +221,9 @@ document.addEventListener('DOMContentLoaded', () => {
                     highlightedValue: content.value // No highlighting
                 }))
             }));
+            
+            // Hide search info bar when no search is active
+            searchInfoBar.classList.add('hidden');
         } else {
             // Filter snippets and determine which tab should be active
             const filteredSnippets = activeSnippets.filter(snippet => {
@@ -265,6 +269,35 @@ document.addEventListener('DOMContentLoaded', () => {
             }));
 
             currentSnippets = filteredSnippets;
+            
+            // Show search info bar with match information
+            const snippetCount = currentSnippets.length;
+            const totalSnippets = activeSnippets.length;
+            
+            // Count total matches across all snippets
+            let totalMatches = 0;
+            currentSnippets.forEach(snippet => {
+                // Count matches in name
+                if (matchesQuery(snippet.name, query)) {
+                    totalMatches++;
+                }
+                // Count matches in description
+                if (snippet.description && matchesQuery(snippet.description, query)) {
+                    totalMatches++;
+                }
+                // Count matches in content
+                snippet.content.forEach(content => {
+                    const highlighted = highlightSearchMatches(content.value, query);
+                    if (highlighted !== content.value) {
+                        // Count the number of <mark> tags (each represents a match)
+                        const matchCount = (highlighted.match(/<mark[^>]*>.*?<\/mark>/g) || []).length;
+                        totalMatches += matchCount;
+                    }
+                });
+            });
+            
+            searchInfoBar.innerHTML = `${totalMatches} match${totalMatches !== 1 ? 'es' : ''} found in ${snippetCount} snippet${snippetCount !== 1 ? 's' : ''}`;
+            searchInfoBar.classList.remove('hidden');
         }
 
         loadedCount = 0;