🚸 (buttons) Show collected variable in buttons block preview

apps/builder/src/features/graph/components/Nodes/ItemNode/ItemNodesList.tsx

@@ -1,7 +1,9 @@
 import {
   Flex,
+  HStack,
   Portal,
   Stack,
+  Tag,
   Text,
   useColorModeValue,
   useEventListener,
@@ -13,7 +15,13 @@ import {
   useGraph,
 } from '../../../providers'
 import { useTypebot } from '@/features/editor'
-import { BlockIndices, BlockWithItems, LogicBlockType, Item } from 'models'
+import {
+  BlockIndices,
+  BlockWithItems,
+  LogicBlockType,
+  Item,
+  Variable,
+} from 'models'
 import React, { useEffect, useRef, useState } from 'react'
 import { ItemNode } from './ItemNode'
 import { SourceEndpoint } from '../../Endpoints'
@@ -127,8 +135,16 @@ export const ItemNodesList = ({
       elem && (placeholderRefs.current[idx] = elem)
     }
 
+  const collectedVariableId = 'options' in block && block.options.variableId
+
   return (
     <Stack flex={1} spacing={1} maxW="full" onClick={stopPropagating}>
+      {collectedVariableId && (
+        <CollectVariableLabel
+          variableId={collectedVariableId}
+          variables={typebot?.variables ?? []}
+        />
+      )}
       <PlaceholderNode
         isVisible={showPlaceholders}
         isExpanded={expandedPlaceholderIndex === 0}
@@ -202,3 +218,20 @@ const DefaultItemNode = ({ block }: { block: BlockWithItems }) => {
     </Flex>
   )
 }
+
+const CollectVariableLabel = ({
+  variableId,
+  variables,
+}: {
+  variableId: string
+  variables: Variable[]
+}) => (
+  <HStack fontStyle="italic" spacing={1}>
+    <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.400')}>
+      Collects
+    </Text>
+    <Tag bg="orange.400" color="white" size="sm">
+      {variables.find((variable) => variable.id === variableId)?.name}
+    </Tag>
+  </HStack>
+)