wild-cloud/wild-central
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: Allow multiple service cards expanded simultaneously

Browse Source 
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:
Paul Payne
2026-07-09 23:38:02 +00:00
parent c96af69189
commit b0a3e2f1f1
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/components/ServicesComponent.tsx
View File

@@ -63,7 +63,7 @@ export function ServicesComponent() {
const { status: certStatus } = useCert(); const { status: certStatus } = useCert();
const { status: ddnsStatus } = useDdns(); 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 [showAddForm, setShowAddForm] = useState(false);
const [showAdvanced, setShowAdvanced] = useState(false); const [showAdvanced, setShowAdvanced] = useState(false);
const [advancedConfig, setAdvancedConfig] = useState(''); const [advancedConfig, setAdvancedConfig] = useState('');
@@ -221,7 +221,7 @@ export function ServicesComponent() {
{/* Service Cards */} {/* Service Cards */}
{services.map(service => { {services.map(service => {
const isExpanded = expandedDomain === service.domain; const isExpanded = expandedDomains.has(service.domain);
const tlsStatus = getTlsStatus(service, certDomains); const tlsStatus = getTlsStatus(service, certDomains);
const ddnsStatus2 = service.reach === 'public' ? 'ok' as const : 'na' as const; 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"> <Card key={service.domain} className="overflow-hidden">
<button <button
type="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" className="w-full px-4 py-3 text-left hover:bg-muted/30 transition-colors"
> >
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">