feat: make regex search case sensitive and limit highlights to 3 matches

- Remove case-insensitive flag from regex patterns
- Remove query.toLowerCase() processing
- Limit search highlighting to first 3 matches per snippet
- Update fallback literal search to be case sensitive

Author: Raffael Herrmann

public/index.html

@@ -33,7 +33,7 @@ <h1 class="text-2xl font-bold">massCode-Web</h1>
                 🌓
             </button>
             <div class="relative">
-                <input type="text" id="search" placeholder="Search snippets (regex supported)..." class="w-64 px-3 py-2 pr-8 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 transition-colors">
+                <input type="text" id="search" placeholder="Enter RegEx..." class="w-64 px-3 py-2 pr-8 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400 transition-colors">
                 <button id="clear-search" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors" onclick="clearSearch()" style="display: none;">×</button>
             </div>
         </div>

public/js/app.js

@@ -202,7 +202,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // Search functionality
     const clearSearchButton = document.getElementById('clear-search');
     searchInput.addEventListener('input', (e) => {
-        const query = e.target.value.toLowerCase();
+        const query = e.target.value;
         const activeSnippets = dbData.snippets.filter(s => !s.isDeleted);
 
         if (query.trim() === '') {
@@ -299,11 +299,11 @@ document.addEventListener('DOMContentLoaded', () => {
     function matchesQuery(text, query) {
         if (!query.trim()) return false;
         try {
-            const regex = new RegExp(query, 'i'); // case-insensitive
+            const regex = new RegExp(query); // case-sensitive
             return regex.test(text);
         } catch (error) {
             // If regex is invalid, fall back to literal string search
-            return text.toLowerCase().includes(query.toLowerCase());
+            return text.includes(query);
         }
     }
 
@@ -313,13 +313,27 @@ document.addEventListener('DOMContentLoaded', () => {
 
         try {
             // Try to use the query as a regex pattern
-            const regex = new RegExp(`(${query})`, 'gi');
-            return text.replace(regex, '<mark class="search-highlight">$1</mark>');
+            const regex = new RegExp(`(${query})`, 'g'); // case-sensitive, global
+            let matchCount = 0;
+            return text.replace(regex, (match, group1) => {
+                matchCount++;
+                if (matchCount <= 3) {
+                    return `<mark class="search-highlight">${group1}</mark>`;
+                }
+                return group1; // Return without highlighting for matches beyond 3
+            });
         } catch (error) {
             // If regex is invalid, escape special characters and search as literal string
             const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-            const regex = new RegExp(`(${escapedQuery})`, 'gi');
-            return text.replace(regex, '<mark class="search-highlight">$1</mark>');
+            const regex = new RegExp(`(${escapedQuery})`, 'g');
+            let matchCount = 0;
+            return text.replace(regex, (match, group1) => {
+                matchCount++;
+                if (matchCount <= 3) {
+                    return `<mark class="search-highlight">${group1}</mark>`;
+                }
+                return group1; // Return without highlighting for matches beyond 3
+            });
         }
     }