Add total snippets count below version and make both smaller/less bright

Author: codebude

public/index.html

@@ -28,7 +28,7 @@ <h1 class="text-2xl font-bold truncate">takeCode</h1>
             </button>
         </div>
         <div class="relative w-full sm:w-auto mt-2 sm:mt-0 flex-shrink">
-            <input type="text" id="search" placeholder="Enter RegEx... (Ctrl+K to focus)" class="w-full sm: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... [Ctrl+K]" class="w-full sm: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>
     </header>
@@ -50,7 +50,10 @@ <h1 class="text-2xl font-bold truncate">takeCode</h1>
                             About & Credits
                         </button>
                     </div>
-                    <span class="text-gray-500 text-sm dark:text-gray-400">__VERSION__</span>
+                    <div class="flex flex-col items-end space-y-1">
+                        <span class="text-gray-400 text-xs dark:text-gray-500">__VERSION__</span>
+                        <span id="total-snippets" class="text-gray-400 text-xs dark:text-gray-500">Loading...</span>
+                    </div>
                 </div>
             </footer>
         </aside>

public/js/app.js

@@ -172,6 +172,9 @@ document.addEventListener('DOMContentLoaded', () => {
                 loadMoreIfNeeded();
             }, 100);
             renderTree(data.folders, activeSnippets);
+
+            // Update total snippets count
+            document.getElementById('total-snippets').textContent = `${activeSnippets.length} snippets`;
         })
         .catch(error => {
             console.error('Error loading db.json:', error);