Add service grouping feature to README and implement dynamic rendering in index.html

README.md

@@ -19,6 +19,7 @@ A lightweight, self-hosted dashboard for quick access to your Docker services wi
 - 🎮 **Keyboard Navigation** - Arrow keys to navigate, Enter to open, Esc to clear
 - 🟢 **Status Indicators** - Optional visual status (online/offline/maintenance)
 - 🏥 **Automatic Health Checks** - Real-time ping tests to detect service availability
+- 📂 **Service Groups** - Organize services into categorized sections
 
 ## Quick Start
 
@@ -32,23 +33,39 @@ The homepage will be available at `http://localhost:8088`
 
 ### 2. Configure Your Services
 
-Edit `services.xml` to add your services:
+Edit `services.xml` to add your services organized into groups:
 
 ```xml
 <?xml version="1.0" encoding="UTF-8"?>
 <services>
-  <service 
-    name="Portainer" 
-    proto="https" 
-    host="portainer.example.com" 
-    logo="portainer.svg" 
-  />
-  <service 
-    name="Jellyfin" 
-    proto="http" 
-    port="8096" 
-    logo="jellyfin.svg" 
-  />
+  <group name="Management">
+    <service 
+      name="Portainer" 
+      proto="https" 
+      port="9443"
+      logo="portainer.svg" 
+    />
+  </group>
+  
+  <group name="Media">
+    <service 
+      name="Jellyfin" 
+      proto="http" 
+      port="8096" 
+      host="jellyfin.example.com"
+      logo="jellyfin.svg" 
+    />
+  </group>
+</services>
+```
+
+Or use services without groups (they'll appear in a single grid):
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<services>
+  <service name="Portainer" proto="https" port="9443" logo="portainer.svg" />
+  <service name="Jellyfin" proto="http" port="8096" logo="jellyfin.svg" />
 </services>
 ```
 
@@ -146,6 +163,44 @@ Status colors:
 - Set `check-health="false"` to disable checking for specific services
 - No server-side component needed - runs entirely in the browser
 
+## Service Groups
+
+Organize your services into categorized sections for better organization:
+
+```xml
+<services>
+  <group name="Management">
+    <service name="Portainer" proto="https" port="9443" logo="portainer.svg" />
+    <service name="Uptime Kuma" proto="http" port="3001" logo="uptime-kuma.svg" />
+  </group>
+
+  <group name="Media">
+    <service name="Jellyfin" proto="http" port="8096" logo="jellyfin.svg" />
+    <service name="Transmission" proto="http" port="9091" logo="transmission.svg" />
+  </group>
+
+  <group name="Storage">
+    <service name="Nextcloud" host="cloud.example.com" logo="nextcloud.svg" />
+    <service name="FileBrowser" proto="http" port="8986" logo="filebrowser.svg" />
+  </group>
+</services>
+```
+
+### Group Features
+
+- **Categorization**: Group related services together (Media, Management, Development, etc.)
+- **Visual Separation**: Each group has a styled header with an accent underline
+- **Smart Search**: Searching filters services and hides empty groups automatically
+- **Backward Compatible**: Services without groups still work (displayed in a single grid)
+- **Flexible**: Use as many or as few groups as needed
+
+### Group Tips
+
+- Use clear, descriptive group names (e.g., "Media Services" instead of "Group 1")
+- Keep related services together for easier navigation
+- Groups appear in the order defined in the XML
+- Empty groups (no services) are automatically hidden
+
 ## Icon Management
 
 ### Using Included Icons
@@ -370,15 +425,18 @@ Contributions welcome! Completed features:
 - ✅ Search/filter functionality with keyboard shortcut
 - ✅ Keyboard navigation (arrow keys, Enter, Esc)
 - ✅ Service status indicators (online/offline/maintenance)
+- ✅ Automatic health checks with ping tests
 - ✅ Info button showing connection details
+- ✅ Service groups/categories
 
 Areas for future improvement:
 
-- Service health checks (automatic ping/availability detection)
-- Drag-and-drop reordering
-- Categorized sections/groups
+- Service health checks via custom endpoints
+- Drag-and-drop reordering within groups
+- Collapsible group sections
 - Custom themes/color schemes
 - Export/import service configurations
+- Dashboard widgets (time, weather, etc.)
 
 ## License