From 1be5867aecd27505a8f063d58b6c37509f88821b Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 1 Apr 2026 14:39:05 -0400 Subject: [PATCH 1/5] change filter options to: all, active, eligible --- .../src/modules/guide/components/Toolbar/V2/V2.tsx | 12 ++++++++---- .../modules/guide/components/Toolbar/V2/helpers.ts | 6 +++++- .../Toolbar/V2/useInspectGuideClientStore.ts | 6 ++++++ 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx index c40921ed9..4ee0c6797 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx @@ -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; }); }; @@ -284,14 +287,15 @@ export const V2 = () => { }} > - All guides + All + + + Active Eligible - - On this page - + {/* Note: `only-displayable` is not available for now */} diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts index 443b019d3..99e8b2891 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts +++ b/packages/react/src/modules/guide/components/Toolbar/V2/helpers.ts @@ -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. diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts index edbbdf4ee..c9c044ef3 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts +++ b/packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts @@ -111,6 +111,9 @@ export type UncommittedGuide = { annotation: { isEligible: false; isQualified: false; + active: { + status: false; + }; selectable: { status: undefined; }; @@ -407,6 +410,9 @@ const newUncommittedGuide = (key: KnockGuide["key"], orderIndex: number) => annotation: { isEligible: false, isQualified: false, + active: { + status: false, + }, selectable: { status: undefined, }, From d858d53bc8657b7c4cc23186155b4cf81e197ad9 Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 1 Apr 2026 14:54:40 -0400 Subject: [PATCH 2/5] style update to segmented control, make active the default filter --- .../modules/guide/components/Toolbar/V2/V2.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx index 4ee0c6797..cbb3fe16d 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx @@ -74,7 +74,7 @@ export const V2 = () => { const { client } = useGuideContext(); const [displayOption, setDisplayOption] = - React.useState("only-eligible"); + React.useState("only-active"); const [runConfig, setRunConfig] = React.useState(() => getRunConfig()); const [isCollapsed, setIsCollapsed] = React.useState(false); const [isContextPanelOpen, setIsContextPanelOpen] = React.useState(false); @@ -286,13 +286,22 @@ export const V2 = () => { setDisplayOption(val); }} > - + All - + Active - + Eligible {/* Note: `only-displayable` is not available for now */} From d466372579e2e1e493b4defe32f0dd6db230f0e2 Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 1 Apr 2026 15:15:17 -0400 Subject: [PATCH 3/5] change the toggle hotkey to ctrl + . --- .../guide/components/Toolbar/V2/V2.tsx | 25 ++++++------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx index cbb3fe16d..651de471e 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx @@ -29,7 +29,7 @@ import { useInspectGuideClientStore, } from "./useInspectGuideClientStore"; -const HOTKEY_TOGGLE_IS_COLLAPSED = "Control"; +const TOGGLE_COLLAPSED_HOTKEY = "."; const TOOLBAR_WIDTH = "540px"; @@ -104,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); }; }, []); @@ -164,7 +152,10 @@ export const V2 = () => { delayDuration={500} label={ - Guide Toolbar ctrl + Guide Toolbar + + ctrl + . + } > From 78faceb4cd7480e63aa83e7cffd92811e0618182 Mon Sep 17 00:00:00 2001 From: Thomas Date: Wed, 1 Apr 2026 15:29:14 -0400 Subject: [PATCH 4/5] add style tweaks --- .../Toolbar/V2/GuideContextDetails.tsx | 44 ++++++++++--------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx index 4963064c3..142781e3c 100644 --- a/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx +++ b/packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx @@ -19,16 +19,18 @@ export const GuideContextDetails = () => { - - Sandbox engagement - + + + Sandbox engagement + + { - - Ignore throttle - + + + Ignore throttle + + Date: Wed, 1 Apr 2026 15:30:57 -0400 Subject: [PATCH 5/5] changeset --- .changeset/every-snails-battle.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/every-snails-battle.md diff --git a/.changeset/every-snails-battle.md b/.changeset/every-snails-battle.md new file mode 100644 index 000000000..dfb3d7368 --- /dev/null +++ b/.changeset/every-snails-battle.md @@ -0,0 +1,5 @@ +--- +"@knocklabs/react": patch +--- + +[Guides] Change filter options to (All,Active,Eligible) in guide toolbar v2