feat: Implement client-side version mismatch detection with reload prompt and add Nodemon for development.

index.html

@@ -60,7 +60,6 @@
         }
 
         .category:hover {
-            transform: translateX(4px);
             box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
         }
 
@@ -178,6 +177,46 @@
             box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
             outline: none;
         }
+
+        #version-reload-btn {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 8px;
+            font-size: 0.9rem;
+            font-weight: 600;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+            transition: all 0.3s ease;
+            display: none;
+            z-index: 1000;
+        }
+
+        #version-reload-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 16px rgba(102, 126, 234, 0.5);
+        }
+
+        #version-reload-btn.show {
+            display: block;
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from {
+                transform: translateY(100px);
+                opacity: 0;
+            }
+
+            to {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
     </style>
 </head>
 
@@ -188,6 +227,7 @@
             <div class="loading">Loading categories...</div>
         </div>
     </div>
+    <button id="version-reload-btn" onclick="location.reload()">New version - [reload]</button>
 
     <script src="/socket.io/socket.io.js"></script>
     <script>
@@ -206,9 +246,24 @@
         const container = document.getElementById('tree-container');
         const filterInput = document.getElementById('filter-input');
 
+        // Version checking
+        const clientEtag = document.querySelector('meta[name="app-version"]')?.content;
+        const reloadBtn = document.getElementById('version-reload-btn');
+
         // Socket Events
         socket.on('connect', () => {
             console.log('🔌 Connected to server via WebSocket');
+            // Check version on connect and reconnect
+            if (clientEtag) {
+                socket.emit('checkVersion', clientEtag);
+            }
+        });
+
+        socket.on('versionMismatch', ({ serverEtag }) => {
+            console.log('⚠️  New version available on server');
+            if (reloadBtn) {
+                reloadBtn.classList.add('show');
+            }
         });
 
         socket.on('categoriesUpdated', () => {
@@ -242,8 +297,10 @@
             if (value.trim()) {
                 debouncedSearch(value);
             } else {
-                // Clear matches
+                // Clear matches and collapse all categories
                 resetMatches(state.categories);
+                resetExpansion(state.categories);
+                collapseAllProducts(state.categories);
                 render();
             }
         });