Skip to content

chore: change filter options to (all, active, eligible) in guide toolbar v2 #927

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
thomaswhyyou merged 5 commits into from
Apr 1, 2026
Merged

chore: change filter options to (all, active, eligible) in guide toolbar v2 #927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1be5867
change filter options to: all, active, eligible
thomaswhyyou Apr 1, 2026
d858d53
style update to segmented control, make active the default filter
thomaswhyyou Apr 1, 2026
d466372
change the toggle hotkey to ctrl + .
thomaswhyyou Apr 1, 2026
78faceb
add style tweaks
thomaswhyyou Apr 1, 2026
1add457
changeset
thomaswhyyou Apr 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/every-snails-battle.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@knocklabs/react": patch
---

[Guides] Change filter options to (All,Active,Eligible) in guide toolbar v2
44 changes: 24 additions & 20 deletions packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,18 @@ export const GuideContextDetails = () => {
<Stack direction="column" gap="1">
<Stack direction="row" gap="2" align="center" h="7">
<Tooltip label="Contain engagement actions to client side only">
<Text
as="span"
size="1"
weight="medium"
color="gray"
width="36"
mt="1"
>
Sandbox engagement
</Text>
<Box width="36" mt="1">
<Text
as="span"
size="1"
weight="medium"
color="gray"
borderBottom="px"
borderStyle="dashed"
Copy link
Copy Markdown
Contributor Author

@thomaswhyyou thomaswhyyou Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dashed underline to indicate a tooltip.

>
Sandbox engagement
</Text>
</Box>
</Tooltip>
<Toggle.Default
size="1"
Expand All @@ -44,16 +46,18 @@ export const GuideContextDetails = () => {
</Stack>
<Stack direction="row" gap="2" align="center" h="7">
<Tooltip label="Ignore throttle and show next guide immediately">
<Text
as="span"
size="1"
weight="medium"
color="gray"
width="36"
mt="1"
>
Ignore throttle
</Text>
<Box width="36" mt="1">
<Text
as="span"
size="1"
weight="medium"
color="gray"
borderBottom="px"
borderStyle="dashed"
>
Ignore throttle
</Text>
</Box>
</Tooltip>
<Toggle.Default
size="1"
Expand Down
52 changes: 28 additions & 24 deletions packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {
useInspectGuideClientStore,
} from "./useInspectGuideClientStore";

const HOTKEY_TOGGLE_IS_COLLAPSED = "Control";
const TOGGLE_COLLAPSED_HOTKEY = ".";

const TOOLBAR_WIDTH = "540px";

Expand Down Expand Up @@ -63,6 +63,9 @@ const filterGuides = (
if (displayOption === "only-eligible" && !isEligible) {
return false;
}
if (displayOption === "only-active" && !guide.annotation.active.status) {
return false;
}
return true;
});
};
Expand All @@ -71,7 +74,7 @@ export const V2 = () => {
const { client } = useGuideContext();

const [displayOption, setDisplayOption] =
React.useState<DisplayOption>("only-eligible");
React.useState<DisplayOption>("only-active");
const [runConfig, setRunConfig] = React.useState(() => getRunConfig());
const [isCollapsed, setIsCollapsed] = React.useState(false);
const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false);
Expand Down Expand Up @@ -101,30 +104,18 @@ export const V2 = () => {
};
}, [runConfig, client, setDisplayOption]);

// Toggle collapsed state when Ctrl is pressed and released alone
// (without combining with another key), similar to Vercel's toolbar.
// Toggle collapsed state with Ctrl + .
React.useEffect(() => {
let ctrlUsedInCombo = false;

const handleKeyDown = (e: KeyboardEvent) => {
if (e.key === HOTKEY_TOGGLE_IS_COLLAPSED && !e.repeat) {
ctrlUsedInCombo = false;
} else if (e.ctrlKey) {
ctrlUsedInCombo = true;
}
};

const handleKeyUp = (e: KeyboardEvent) => {
if (e.key === HOTKEY_TOGGLE_IS_COLLAPSED && !ctrlUsedInCombo) {
if (e.ctrlKey && e.key === TOGGLE_COLLAPSED_HOTKEY && !e.repeat) {
e.preventDefault();
setIsCollapsed((prev) => !prev);
}
};

window.addEventListener("keydown", handleKeyDown);
window.addEventListener("keyup", handleKeyUp);
return () => {
window.removeEventListener("keydown", handleKeyDown);
window.removeEventListener("keyup", handleKeyUp);
};
}, []);

Expand Down Expand Up @@ -161,7 +152,10 @@ export const V2 = () => {
delayDuration={500}
label={
<Text as="span" size="1">
Guide Toolbar <Kbd>ctrl</Kbd>
Guide Toolbar
<Stack display="inline-block" ml="3">
<Kbd>ctrl</Kbd> + <Kbd>.</Kbd>
</Stack>
</Text>
}
>
Expand Down Expand Up @@ -283,15 +277,25 @@ export const V2 = () => {
setDisplayOption(val);
}}
>
<SegmentedControl.Option value="all-guides">
All guides
<SegmentedControl.Option
value="all-guides"
style={{ width: "54px" }}
>
All
</SegmentedControl.Option>
<SegmentedControl.Option value="only-eligible">
Eligible
<SegmentedControl.Option
value="only-active"
style={{ width: "54px" }}
>
Active
</SegmentedControl.Option>
<SegmentedControl.Option value="only-displayable">
On this page
<SegmentedControl.Option
value="only-eligible"
style={{ width: "54px" }}
>
Eligible
</SegmentedControl.Option>
{/* Note: `only-displayable` is not available for now */}
</SegmentedControl.Root>

<Tooltip label="Settings & target params">
Expand Down
6 changes: 5 additions & 1 deletion packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import { KnockGuide } from "@knocklabs/client";

import { checkForWindow } from "../../../../../modules/core";

export type DisplayOption = "all-guides" | "only-eligible" | "only-displayable";
export type DisplayOption =
| "all-guides"
| "only-active"
| "only-eligible"
| "only-displayable";

// Use this param to start Toolbar and enter into a debugging session when
// it is present and set to true.
Expand Down
6 changes: 6 additions & 0 deletions packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,9 @@ export type UncommittedGuide = {
annotation: {
isEligible: false;
isQualified: false;
active: {
status: false;
};
selectable: {
status: undefined;
};
Expand Down Expand Up @@ -407,6 +410,9 @@ const newUncommittedGuide = (key: KnockGuide["key"], orderIndex: number) =>
annotation: {
isEligible: false,
isQualified: false,
active: {
status: false,
},
selectable: {
status: undefined,
},
Expand Down
Loading