feat: Implement product detail syncing with rowversion-based change detection and integrate it into category product synchronization.

index.html

@@ -480,7 +480,15 @@
             }
 
             const debouncedSearch = debounce((value) => {
-                socket.emit('search', value);
+                if (value.trim().length >= 3) {
+                    socket.emit('search', value);
+                } else {
+                    // Clear matches and collapse all categories if less than 3 chars
+                    resetMatches(state.categories);
+                    resetExpansion(state.categories);
+                    collapseAllProducts(state.categories);
+                    render();
+                }
             }, 300);
 
             // Event Listeners
@@ -495,7 +503,7 @@
                     clearBtn.classList.remove('visible');
                 }
 
-                if (value.trim()) {
+                if (value.trim().length >= 3) {
                     debouncedSearch(value);
                 } else {
                     // Clear matches and collapse all categories
@@ -607,6 +615,12 @@
             });
         }
 
+        function collapseAllProducts(nodes) {
+            nodes.forEach(node => {
+                node.isExpanded = false;
+                if (node.children) collapseAllProducts(node.children);
+            });
+        }
 
 
         // Initial Load
@@ -674,7 +688,7 @@
 
         // Filtering Logic
         function filterTree(nodes, query) {
-            if (!query.trim()) return nodes; // Return original structure if no filter
+            if (!query.trim() || query.trim().length < 3) return nodes; // Return original structure if no filter or short query
 
             return nodes.map(node => {
                 // Only keep if marked as having a match
@@ -690,6 +704,10 @@
                             const name = p.cName.toLowerCase();
                             return words.every(w => name.includes(w));
                         });
+                        // Limit product results
+                        if (matchingProducts.length > 21) {
+                            matchingProducts = matchingProducts.slice(0, 21);
+                        }
                     }
 
                     return {
@@ -845,9 +863,10 @@
                     const ul = document.createElement('ul');
                     ul.style.listStyle = 'none';
 
-                    const limit = realNode.isExpanded ? category.products.length : 3;
+                    const limit = realNode.isExpanded ? 20 : 3;
+                    const displayProducts = category.products.slice(0, limit);
 
-                    category.products.slice(0, limit).forEach(p => {
+                    displayProducts.forEach(p => {
                         const li = document.createElement('li');
                         li.className = 'product-item';
 
@@ -867,7 +886,16 @@
                         ul.appendChild(li);
                     });
 
-                    if (!realNode.isExpanded && category.products.length > 3) {
+                    // Show "more" if expanded and there are more than 20, OR if collapsed and there are more than 3
+                    if (realNode.isExpanded && category.products.length > 20) {
+                        const more = document.createElement('li');
+                        more.className = 'product-item more';
+                        more.style.fontStyle = 'italic';
+                        more.textContent = `(more)`;
+                        // Prevent click from collapsing
+                        more.onclick = (e) => e.stopPropagation();
+                        ul.appendChild(more);
+                    } else if (!realNode.isExpanded && category.products.length > 3) {
                         const more = document.createElement('li');
                         more.className = 'product-item more';
                         more.style.fontStyle = 'italic';