saving a connection now tells the other panels

reported on the first successful save: everything still showed no data and the
form stayed open, and a manual page refresh was the only way through.

two faults, one report. the form did not close itself — nothing cleared
?config, so a save left the settings view sitting on top of a plugin that now
worked. and the two reader panels are SIBLINGS in a workspace layout: they are
mounted independently, neither owns the other, and ConnectionPanel cannot call
into them. so they went on showing the failure they had loaded back when no
connection existed.

a channel is the sanctioned answer for exactly this — docs/navigation-audit.md
puts addressable state in the URL and leaves channels for "something changed,
re-read it". nobody wants to link to the moment after a save.

the nonce is a plain module counter, copied deliberately from officerdev's
channels.ts along with the reason: setSignal(n => n + 1) applies against the
value captured at render, so two bumps in one render window both compute
snapshot + 1 and the second overwrites the first — and nobody re-reads.
Date.now() is the same bug at millisecond scale.

disconnect bumps it too. the panels must stop showing hosts they can no longer
reach.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
This commit is contained in:
2026-08-25 16:58:52 +00:00
co-authored by Claude Opus 5
parent 83a8558e60
commit 3d02cb6229
4 changed files with 76 additions and 2 deletions
+25
View File
@@ -4,6 +4,8 @@ import { useClient } from 'hooks/useClient';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { readableError } from './errors';
import { useConnectionChanged } from './channel';
import { useSearchParams } from 'react-router';
/**
* The connection to Nginx Proxy Manager — both the setup wizard and the permanent settings page.
@@ -115,6 +117,26 @@ export const ConnectionPanel = () => {
const [error, setError] = useState<string | null>(null);
const [busy, setBusy] = useState<'test' | 'save' | 'delete' | null>(null);
const [confirming, setConfirming] = useState(false);
const [, connectionChanged] = useConnectionChanged();
const [, setParams] = useSearchParams();
/**
* Leave the settings view and tell the other panels to re-read.
*
* Both halves were missing and both were visible: after a successful save the form stayed open, and the
* hosts and certificates panels went on showing the failure they had loaded before a connection existed.
* The only remedy was a manual page refresh, which is what got reported.
*/
const settled = useCallback(() => {
setParams(
(p) => {
p.delete('config');
return p;
},
{ replace: true },
);
connectionChanged();
}, [setParams, connectionChanged]);
const load = useCallback(async () => {
try {
@@ -168,6 +190,7 @@ export const ConnectionPanel = () => {
setView(next);
setSecret('');
setTest(null);
settled();
} catch (err) {
setError(errorText(err));
} finally {
@@ -184,6 +207,8 @@ export const ConnectionPanel = () => {
setTest(null);
setSecret('');
await load();
// Disconnecting is a change too — the panels must stop showing hosts that are no longer reachable.
connectionChanged();
} catch (err) {
setError(errorText(err));
} finally {