diff --git a/package.json b/package.json index 3cfa10e..3000bdd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "netfelix-audio-fix", - "version": "2026.04.19.10", + "version": "2026.04.19.11", "scripts": { "dev:server": "NODE_ENV=development bun --hot server/index.tsx", "dev:client": "vite", diff --git a/src/features/pipeline/InboxColumn.tsx b/src/features/pipeline/InboxColumn.tsx index db97802..279d6c6 100644 --- a/src/features/pipeline/InboxColumn.tsx +++ b/src/features/pipeline/InboxColumn.tsx @@ -31,6 +31,14 @@ export function InboxColumn({ const [loadingMore, setLoadingMore] = useState(false); const sentinelRef = useRef(null); + // Optimistic mirror of the auto-process checkbox so a click flips the + // box immediately rather than waiting for the server roundtrip. See the + // matching rationale in ProcessingColumn. + const [localAutoProcessing, setLocalAutoProcessing] = useState(autoProcessing); + useEffect(() => { + setLocalAutoProcessing(autoProcessing); + }, [autoProcessing]); + useEffect(() => { setGroups(initialResponse.groups); setHasMore(initialResponse.hasMore); @@ -94,8 +102,12 @@ export function InboxColumn({ onToggleAutoProcessing(e.target.checked)} + checked={localAutoProcessing} + onChange={(e) => { + const next = e.target.checked; + setLocalAutoProcessing(next); + onToggleAutoProcessing(next); + }} /> Auto-process Inbox diff --git a/src/features/pipeline/ProcessingColumn.tsx b/src/features/pipeline/ProcessingColumn.tsx index dab298d..c62e49e 100644 --- a/src/features/pipeline/ProcessingColumn.tsx +++ b/src/features/pipeline/ProcessingColumn.tsx @@ -24,6 +24,17 @@ export function ProcessingColumn({ }: ProcessingColumnProps) { const job = items[0]; // at most one running job + // Checkbox state is mirrored locally so the click flips the box + // immediately, independent of the roundtrip to /api/settings. A fully- + // controlled checkbox that waits for the server's reply can look frozen + // on slow connections and occasionally snaps back before the next + // loadAll arrives. The effect below reconciles with the server's + // authoritative value whenever the parent pushes a new one in. + const [localEnabled, setLocalEnabled] = useState(autoProcessQueue); + useEffect(() => { + setLocalEnabled(autoProcessQueue); + }, [autoProcessQueue]); + // Wall-clock elapsed since the job started — re-renders every second. const [now, setNow] = useState(() => Date.now()); useEffect(() => { @@ -81,8 +92,12 @@ export function ProcessingColumn({ onToggleAutoProcessQueue(e.target.checked)} + checked={localEnabled} + onChange={(e) => { + const next = e.target.checked; + setLocalEnabled(next); + onToggleAutoProcessQueue(next); + }} /> Auto-process Queue