feat: add GuideContextDetails to guide toolbar v2

.changeset/wet-berries-tease.md

@@ -0,0 +1,8 @@
+---
+"@knocklabs/react": patch
+"guide-example": patch
+"@knocklabs/client": patch
+"@knocklabs/react-core": patch
+---
+
+[guides] add guide toolbar v2 poc

packages/react/src/modules/guide/components/Toolbar/V2/GuideContextDetails.tsx

@@ -0,0 +1,100 @@
+import { useGuideContext, useStore } from "@knocklabs/react-core";
+import { Box, Stack } from "@telegraph/layout";
+import { Text } from "@telegraph/typography";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import * as React from "react";
+
+export const GuideContextDetails = () => {
+  const { client } = useGuideContext();
+  const [isExpanded, setIsExpanded] = React.useState(false);
+
+  const defaultGroup = useStore(client.store, (state) => state.guideGroups[0]);
+  const displayInterval = defaultGroup?.display_interval ?? null;
+
+  return (
+    <Stack direction="column" borderTop="px">
+      <Stack
+        h="5"
+        px="2"
+        bg="gray-3"
+        align="center"
+        gap="1"
+        style={{ cursor: "pointer" }}
+        onClick={() => setIsExpanded((prev) => !prev)}
+      >
+        <Text as="span" size="0" weight="medium">
+          Details
+        </Text>
+        {isExpanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+      </Stack>
+
+      {isExpanded && (
+        <Stack direction="column">
+          <Stack direction="column" gap="0_5" py="1" px="2" borderTop="px">
+            <Text as="span" size="0" weight="medium">
+              Throttle
+            </Text>
+            <Text as="code" size="0">
+              {displayInterval === null ? "-" : `Every ${displayInterval}s`}
+            </Text>
+          </Stack>
+
+          <Stack direction="column" py="1" px="2" borderTop="px">
+            <Text as="span" size="0" weight="medium">
+              Target params
+            </Text>
+            <Stack direction="column" gap="0_5" mt="1">
+              <Text as="span" size="0" color="gray">
+                Tenant
+              </Text>
+              <Text as="code" size="0">
+                {client.targetParams.tenant ? (
+                  <Box
+                    rounded="2"
+                    overflow="auto"
+                    backgroundColor="gray-2"
+                    border="px"
+                    style={{ maxHeight: "200px" }}
+                  >
+                    <pre style={{ fontSize: "11px", margin: 0 }}>
+                      <code>{client.targetParams.tenant}</code>
+                    </pre>
+                  </Box>
+                ) : (
+                  <Text as="code" size="0">
+                    -
+                  </Text>
+                )}
+              </Text>
+            </Stack>
+
+            <Stack direction="column" gap="0_5">
+              <Text as="span" size="0" color="gray">
+                Data
+              </Text>
+              {client.targetParams.data ? (
+                <Box
+                  rounded="2"
+                  overflow="auto"
+                  backgroundColor="gray-2"
+                  border="px"
+                  style={{ maxHeight: "200px" }}
+                >
+                  <pre style={{ fontSize: "11px", margin: 0 }}>
+                    <code>
+                      {JSON.stringify(client.targetParams.data, null, 2)}
+                    </code>
+                  </pre>
+                </Box>
+              ) : (
+                <Text as="code" size="0">
+                  -
+                </Text>
+              )}
+            </Stack>
+          </Stack>
+        </Stack>
+      )}
+    </Stack>
+  );
+};

packages/react/src/modules/guide/components/Toolbar/V2/GuideHoverCard.tsx

@@ -34,7 +34,7 @@ export const GuideHoverCard = ({
         <Stack align="center">{children}</Stack>
       </HoverCard.Trigger>
       <HoverCard.Portal>
-        <HoverCard.Content sideOffset={44} side="left">
+        <HoverCard.Content sideOffset={16} side="left">
           <Box
             px="2"
             shadow="2"

packages/react/src/modules/guide/components/Toolbar/V2/GuideRow.tsx

@@ -34,20 +34,20 @@ type Props = {
 export const GuideRow = ({ guide, orderIndex }: Props) => {
   return (
     <Row>
-      <Stack h="6" justify="flex-start" align="center" gap="2">
-        <Tag
-          size="0"
-          variant="soft"
-          color={guide.bypass_global_group_limit ? "blue" : "default"}
-        >
-          {orderIndex + 1}
-        </Tag>
-        <GuideHoverCard guide={guide}>
-          <Text as="code" size="1" color={guide.active ? "black" : "disabled"}>
+      <GuideHoverCard guide={guide}>
+        <Stack h="6" justify="flex-start" align="center" gap="2">
+          <Tag
+            size="0"
+            variant="soft"
+            color={guide.bypass_global_group_limit ? "blue" : "default"}
+          >
+            {orderIndex + 1}
+          </Tag>
+          <Text as="code" size="1">
             {guide.key}
           </Text>
-        </GuideHoverCard>
-      </Stack>
+        </Stack>
+      </GuideHoverCard>
 
       <Stack justify="flex-end">
         {!isUnknownGuide(guide) && (

packages/react/src/modules/guide/components/Toolbar/V2/GuidesListDisplaySelect.tsx

@@ -2,7 +2,11 @@ import { Select } from "@telegraph/select";
 
 import { TOOLBAR_Z_INDEX } from "../shared";
 
-export type DisplayOption = "current-page" | "all-eligible" | "all-guides";
+export type DisplayOption =
+  | "only-displaying"
+  | "only-displayable"
+  | "all-eligible"
+  | "all-guides";
 
 type Props = {
   value: DisplayOption;
@@ -22,7 +26,10 @@ export const GuidesListDisplaySelect = ({ value, onChange }: Props) => {
         style: { zIndex: TOOLBAR_Z_INDEX },
       }}
     >
-      <Select.Option size="1" value="current-page">
+      <Select.Option size="1" value="only-displaying">
+        Displaying on current page
+      </Select.Option>
+      <Select.Option size="1" value="only-displayable">
         Displayable on current page
       </Select.Option>
       <Select.Option size="1" value="all-eligible">

packages/react/src/modules/guide/components/Toolbar/V2/V2.tsx

@@ -8,6 +8,7 @@ import { KnockButton } from "../KnockButton";
 import { TOOLBAR_Z_INDEX } from "../shared";
 import "../styles.css";
 
+import { GuideContextDetails } from "./GuideContextDetails";
 import { GuideRow } from "./GuideRow";
 import {
   DisplayOption,
@@ -27,13 +28,17 @@ const GuidesList = ({
   displayOption: DisplayOption;
 }) => {
   return guides.map((guide, idx) => {
-    if (
-      displayOption === "current-page" &&
-      (!guide.annotation.isEligible || !guide.annotation.isQualified)
-    ) {
+    const { isEligible, isQualified, selectable } = guide.annotation;
+    const isDisplayable = isEligible && isQualified;
+    const isDisplaying = isDisplayable && selectable.status === "returned";
+
+    if (displayOption === "only-displaying" && !isDisplaying) {
+      return null;
+    }
+    if (displayOption === "only-displayable" && !isDisplayable) {
       return null;
     }
-    if (displayOption === "all-eligible" && !guide.annotation.isEligible) {
+    if (displayOption === "all-eligible" && !isEligible) {
       return null;
     }
 
@@ -45,7 +50,7 @@ export const V2 = () => {
   const { client } = useGuideContext();
 
   const [guidesListDisplayOption, setGuidesListDisplayOption] =
-    React.useState<DisplayOption>("current-page");
+    React.useState<DisplayOption>("only-displayable");
 
   const [isVisible, setIsVisible] = React.useState(detectToolbarParam());
   const [isCollapsed, setIsCollapsed] = React.useState(true);
@@ -115,6 +120,7 @@ export const V2 = () => {
 
           <Box w="full">
             {result.error && <Box>{result.error}</Box>}
+            <GuideContextDetails />
             <GuidesList
               guides={result.guides}
               displayOption={guidesListDisplayOption}

packages/react/src/modules/guide/components/Toolbar/V2/useInspectGuideClientStore.ts

@@ -107,6 +107,9 @@ export type UnknownGuide = {
   annotation: {
     isEligible: false;
     isQualified: false;
+    selectable: {
+      status: undefined;
+    };
   };
 };
 
@@ -383,6 +386,9 @@ const newUnknownGuide = (key: KnockGuide["key"]) =>
     annotation: {
       isEligible: false,
       isQualified: false,
+      selectable: {
+        status: undefined,
+      },
     },
   }) as UnknownGuide;