wired-tools: hoist inline editor state (variables + managed holder) to the store

Move the four inline-editor useStates out of WiredCreatorToolsView and
into useWiredCreatorToolsUiStore:

- editingVariable / editingValue — Inspection-tab variables-table
  inline edit (current key being edited + in-flight input text).
- editingManagedHolderVariableId / editingManagedHolderValue — same
  pair for the Variable Manage panel's holder rows (id 0 = none).

WiredInspectionTabView drops three more props (editingVariable,
editingValue, onEditingValueChange) and consumes the store directly
for the read sides + the per-keystroke setEditingValue. The cancel /
keydown / begin handlers stay in the parent because they wrap
shouldPauseVariableSnapshotRefresh-aware logic plus selection
bookkeeping that doesn't belong to a pure tab body.

The shouldPauseVariableSnapshotRefresh derived flag still reads from
the same store now-backed values; no behaviour change on the polling
suppression path.

Tests: three new cases (set+read pair, null-clear, managed-holder
0-as-sentinel reset). 193/193 passing.
This commit is contained in:
simoleo89
2026-05-16 12:37:29 +02:00
parent c1aafffd09
commit 181ca096d0
4 changed files with 97 additions and 17 deletions
@@ -34,10 +34,10 @@ export interface WiredInspectionTabViewProps
selectedInspectionVariableKey: string;
onSelectInspectionVariable: (variable: InspectionVariable) => void;
// inline editor
editingVariable: string;
editingValue: string;
onEditingValueChange: (value: string) => void;
// inline editor — `editingVariable` / `editingValue` come from the
// store; this tab only needs the cancel / keydown / begin handlers
// since each tab consumer wraps `onBeginVariableEdit` with its own
// bookkeeping (variable-key tracking).
onCancelVariableEdit: () => void;
onVariableInputKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
onBeginVariableEdit: (variable: InspectionVariable) => void;
@@ -73,9 +73,6 @@ export const WiredInspectionTabView = (props: WiredInspectionTabViewProps) =>
displayedVariables,
selectedInspectionVariableKey,
onSelectInspectionVariable,
editingVariable,
editingValue,
onEditingValueChange,
onCancelVariableEdit,
onVariableInputKeyDown,
onBeginVariableEdit,
@@ -94,6 +91,9 @@ export const WiredInspectionTabView = (props: WiredInspectionTabViewProps) =>
const setInspectionType = useWiredCreatorToolsUiStore(s => s.setInspectionType);
const isInspectionGiveOpen = useWiredCreatorToolsUiStore(s => s.isInspectionGiveOpen);
const setIsInspectionGiveOpen = useWiredCreatorToolsUiStore(s => s.setIsInspectionGiveOpen);
const editingVariable = useWiredCreatorToolsUiStore(s => s.editingVariable);
const editingValue = useWiredCreatorToolsUiStore(s => s.editingValue);
const setEditingValue = useWiredCreatorToolsUiStore(s => s.setEditingValue);
return (
<div className="p-3 min-h-[360px] flex gap-4">
@@ -173,7 +173,7 @@ export const WiredInspectionTabView = (props: WiredInspectionTabViewProps) =>
value={ editingValue }
onClick={ event => event.stopPropagation() }
onBlur={ onCancelVariableEdit }
onChange={ event => onEditingValueChange(event.target.value) }
onChange={ event => setEditingValue(event.target.value) }
onKeyDownCapture={ onVariableInputKeyDown } /> }
{ (editingVariable !== variable.key) && !variable.editable && <span className={ variable.valueClassName }>{ variable.value }</span> }
{ (editingVariable !== variable.key) && variable.editable &&