33fafc8c19
mara, reviewing PR#3780's showExpandDetails boolean prop: "you cannot just add it like this - if we have more and more options there in different places we will keep accumulating cruft in the shared component." SettingsMenu now exposes a plain children slot instead; the agent page owns its expand-tool-output row entirely (state, storage, markup) in its own ExpandDetailsSetting component and passes it in, so the shared component never learns that setting exists.
35 lines
1.6 KiB
TypeScript
35 lines
1.6 KiB
TypeScript
// Agent-terminal-only settings-menu row: "expand tool output panels".
|
|
// Rendered as a `<SettingsMenu>` child (`@hive/shared/settings-menu.js`)
|
|
// rather than a prop on that shared component — `SettingsMenu` is also
|
|
// used by swarm-ui, which has no terminal to apply this to, and a prior
|
|
// attempt to gate it behind a boolean prop (`showExpandDetails`) on the
|
|
// shared component drew mara's review: "you cannot just add it like
|
|
// this - if we have more and more options there in different places we
|
|
// will keep accumulating cruft in the shared component." This file owns
|
|
// its own state/storage entirely; `SettingsMenu` just renders it as a
|
|
// child, no different from any other consumer's markup.
|
|
import { useState } from 'preact/hooks';
|
|
import { getExpandDetailsPref, setExpandDetailsPref } from '@hive/shared/prefs.js';
|
|
|
|
export function ExpandDetailsSetting() {
|
|
// Plain localStorage read, not a hook-managed override like
|
|
// theme/motion — `getExpandDetailsPref`/`setExpandDetailsPref`
|
|
// (`@hive/shared/prefs.js`) are the existing shared-storage-key pair
|
|
// the terminal itself already reads live (no round-trip needed here
|
|
// beyond re-rendering this row's own checkbox state on toggle).
|
|
const [expandDetails, setExpandDetailsState] = useState(() => getExpandDetailsPref());
|
|
return (
|
|
<label class="settings-menu-row">
|
|
<span>expand tool output</span>
|
|
<input
|
|
type="checkbox"
|
|
checked={expandDetails}
|
|
onChange={(e) => {
|
|
const v = (e.target as HTMLInputElement).checked;
|
|
setExpandDetailsPref(v);
|
|
setExpandDetailsState(v);
|
|
}}
|
|
/>
|
|
</label>
|
|
);
|
|
}
|