From b0a3e2f1f19aa15eb7d3e2dd7dea9adf988dffb5 Mon Sep 17 00:00:00 2001
From: Paul Payne <paul@payne.io>
Date: Thu, 9 Jul 2026 23:38:02 +0000
Subject: [PATCH] fix: Allow multiple service cards expanded simultaneously

Changed from single expandedDomain string to a Set<string> so
multiple cards can be open at once.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/components/ServicesComponent.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/web/src/components/ServicesComponent.tsx b/web/src/components/ServicesComponent.tsx
index e1cee43..457dd6e 100644
--- a/web/src/components/ServicesComponent.tsx
+++ b/web/src/components/ServicesComponent.tsx
@@ -63,7 +63,7 @@ export function ServicesComponent() {
   const { status: certStatus } = useCert();
   const { status: ddnsStatus } = useDdns();
 
-  const [expandedDomain, setExpandedDomain] = useState<string | null>(null);
+  const [expandedDomains, setExpandedDomains] = useState<Set<string>>(new Set());
   const [showAddForm, setShowAddForm] = useState(false);
   const [showAdvanced, setShowAdvanced] = useState(false);
   const [advancedConfig, setAdvancedConfig] = useState('');
@@ -221,7 +221,7 @@ export function ServicesComponent() {
 
       {/* Service Cards */}
       {services.map(service => {
-        const isExpanded = expandedDomain === service.domain;
+        const isExpanded = expandedDomains.has(service.domain);
         const tlsStatus = getTlsStatus(service, certDomains);
         const ddnsStatus2 = service.reach === 'public' ? 'ok' as const : 'na' as const;
 
@@ -229,7 +229,12 @@ export function ServicesComponent() {
           <Card key={service.domain} className="overflow-hidden">
             <button
               type="button"
-              onClick={() => setExpandedDomain(isExpanded ? null : service.domain)}
+              onClick={() => setExpandedDomains(prev => {
+                const next = new Set(prev);
+                if (next.has(service.domain)) next.delete(service.domain);
+                else next.add(service.domain);
+                return next;
+              })}
               className="w-full px-4 py-3 text-left hover:bg-muted/30 transition-colors"
             >
               <div className="flex items-center justify-between gap-2">