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>
This commit is contained in:
2026-07-09 23:38:02 +00:00
parent c96af69189
commit b0a3e2f1f1

View File

@@ -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">