Browse Source

fix(47-02): make inline parameters toggle reactive across all components

- Replace useState with useSyncExternalStore for shared reactive state
- Add subscriber system to notify all hook consumers when value changes
- Fix bug where toggling setting required page refresh to see updates
- All generation nodes now update immediately when setting changes
handoff-20260429-1057
shrimbly 4 months ago
parent
commit
fa989d8ae2
  1. 40
      src/hooks/useInlineParameters.ts

40
src/hooks/useInlineParameters.ts

@ -1,15 +1,37 @@
import { useState, useCallback } from "react";
import { useSyncExternalStore, useCallback } from "react";
const INLINE_PARAMS_KEY = "node-banana-inline-parameters";
// Subscribers for reactive updates
const subscribers = new Set<() => void>();
// Get current value from localStorage
function getSnapshot(): boolean {
try {
return localStorage.getItem(INLINE_PARAMS_KEY) === "true";
} catch {
return false;
}
}
// Server-side snapshot (always false)
function getServerSnapshot(): boolean {
return false;
}
// Subscribe to changes
function subscribe(callback: () => void): () => void {
subscribers.add(callback);
return () => subscribers.delete(callback);
}
// Notify all subscribers of changes
function notifySubscribers() {
subscribers.forEach((callback) => callback());
}
export function useInlineParameters() {
const [enabled, setEnabled] = useState(() => {
try {
return localStorage.getItem(INLINE_PARAMS_KEY) === "true";
} catch {
return false;
}
});
const enabled = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
const setInlineParameters = useCallback((value: boolean) => {
try {
@ -17,7 +39,7 @@ export function useInlineParameters() {
} catch {
// localStorage not available
}
setEnabled(value);
notifySubscribers();
}, []);
return { inlineParametersEnabled: enabled, setInlineParameters };

Loading…
Cancel
Save