Initialize features on DOM load, including themes, drag-and-drop, collapsible groups, import/export, and widgets

index.html

@@ -36,9 +36,39 @@
     
     <!-- JavaScript modules -->
     <script src="/js/galaxy-background.js"></script>
+    <script src="/js/themes.js"></script>
     <script src="/js/services-loader.js"></script>
+    <script src="/js/drag-drop.js"></script>
+    <script src="/js/collapsible-groups.js"></script>
     <script src="/js/search.js"></script>
     <script src="/js/keyboard-nav.js"></script>
     <script src="/js/readme-loader.js"></script>
+    <script src="/js/export-import.js"></script>
+    <script src="/js/widgets.js"></script>
+    
+    <!-- Initialize features after DOM is loaded -->
+    <script>
+      window.addEventListener('DOMContentLoaded', () => {
+        // Wait for services to be loaded
+        const checkServicesLoaded = setInterval(() => {
+          if (window.servicesData && window.servicesData.allServices.length > 0) {
+            clearInterval(checkServicesLoaded);
+            
+            // Initialize all features
+            if (window.themesModule) window.themesModule.init();
+            if (window.dragDropModule) {
+              window.dragDropModule.init();
+              window.dragDropModule.applySavedOrder();
+            }
+            if (window.collapsibleGroupsModule) window.collapsibleGroupsModule.init();
+            if (window.importExportModule) window.importExportModule.init();
+            if (window.widgetsModule) window.widgetsModule.init();
+          }
+        }, 100);
+        
+        // Timeout after 5 seconds
+        setTimeout(() => clearInterval(checkServicesLoaded), 5000);
+      });
+    </script>
   </body>
 </html>