Initial commit: Homelab Infrastructure Dashboard

Features:
- Real-time Proxmox cluster monitoring (nodes, LXC containers)
- Camera integration with go2rtc streams
- Arr stack download progress monitoring
- PBS backup status
- Docker container status
- Uptime Kuma service health
- FastAPI backend with HTMX frontend

app/templates/partials/services.html

@@ -0,0 +1,60 @@
+{% for category_name, category_services in services_by_category.items() %}
+{% set cat_info = categories.get(category_name, {}) %}
+<div class="category-section mb-3">
+    <div class="flex items-center gap-2 mb-2 cursor-pointer select-none" onclick="toggleCategory(this)">
+        <svg class="w-3 h-3 text-gray-500 collapse-icon transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+        <span class="w-3 h-3 rounded-full
+            {% if cat_info.color == 'blue' %}bg-blue-500
+            {% elif cat_info.color == 'purple' %}bg-purple-500
+            {% elif cat_info.color == 'amber' %}bg-amber-500
+            {% elif cat_info.color == 'emerald' %}bg-emerald-500
+            {% elif cat_info.color == 'cyan' %}bg-cyan-500
+            {% else %}bg-gray-500{% endif %}"></span>
+        <h3 class="text-sm font-semibold text-gray-300">{{ category_name }}</h3>
+        <span class="text-xs text-gray-500">({{ category_services | length }})</span>
+    </div>
+
+    <div class="collapsible-content">
+        <div class="service-grid">
+            {% for service in category_services %}
+            {% set status = services_status.get(service.name) %}
+            <a href="{{ service.url }}" target="_blank"
+               class="service-card card rounded-lg p-2 flex items-center gap-2 hover:scale-[1.02] transition-transform"
+               data-name="{{ service.name }}"
+               data-category="{{ category_name }}">
+                <!-- Status dot -->
+                <span class="status-dot w-2 h-2 rounded-full flex-shrink-0
+                    {% if status and status.status == 'online' %}bg-emerald-500 status-online
+                    {% elif status and status.status == 'degraded' %}bg-amber-500 status-pulse
+                    {% else %}bg-red-500 status-offline{% endif %}"></span>
+                
+                <!-- Icon -->
+                <svg class="svc-icon text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">{{ get_service_icon(service.icon) | safe }}</svg>
+                
+                <!-- Name and response time -->
+                <div class="flex-1 min-w-0">
+                    <div class="text-xs font-medium truncate">{{ service.name }}</div>
+                    {% if status and status.response_time_ms %}
+                    <div class="text-[10px] {% if status.response_time_ms < 100 %}response-fast{% elif status.response_time_ms < 500 %}response-medium{% else %}response-slow{% endif %}">
+                        {{ status.response_time_ms }}ms
+                    </div>
+                    {% elif status and status.status == 'offline' %}
+                    <div class="text-[10px] text-red-400">Offline</div>
+                    {% endif %}
+                </div>
+                
+                <!-- Critical badge -->
+                {% if service.critical %}
+                <svg class="w-3 h-3 text-red-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
+                {% endif %}
+                
+                <!-- Group badge -->
+                {% if service.group %}
+                <span class="text-[8px] px-1 py-0.5 rounded bg-dark-600 text-gray-400">{{ service.group[:3] }}</span>
+                {% endif %}
+            </a>
+            {% endfor %}
+        </div>
+    </div>
+</div>
+{% endfor %}