🚸 Add variables button in forged select input by default

Closes #1525

apps/builder/src/features/forge/components/ForgeSelectInput.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { MoreInfoTooltip } from '@/components/MoreInfoTooltip'
 import { Select } from '@/components/inputs/Select'
+import { VariablesButton } from '@/features/variables/components/VariablesButton'
 import { useWorkspace } from '@/features/workspace/WorkspaceProvider'
 import { useToast } from '@/hooks/useToast'
 import { trpc } from '@/lib/trpc'
@@ -29,6 +30,7 @@ type Props = {
   direction?: 'row' | 'column'
   isRequired?: boolean
   width?: 'full'
+  withVariableButton?: boolean
   onChange: (value: string | undefined) => void
 }
 export const ForgeSelectInput = ({
@@ -43,6 +45,7 @@ export const ForgeSelectInput = ({
   isRequired,
   direction = 'column',
   width,
+  withVariableButton = false,
   onChange,
 }: Props) => {
   const { workspace } = useWorkspace()
@@ -99,12 +102,21 @@ export const ForgeSelectInput = ({
           )}
         </FormLabel>
       )}
+      <HStack spacing="0">
         <Select
           items={data?.items}
           selectedItem={defaultValue}
           onSelect={onChange}
           placeholder={placeholder}
         />
+        {withVariableButton ? (
+          <VariablesButton
+            onSelectVariable={(variable) => {
+              onChange(`{{${variable.name}}}`)
+            }}
+          />
+        ) : null}
+      </HStack>
       {helperText && <FormHelperText mt="0">{helperText}</FormHelperText>}
     </FormControl>
   )

apps/builder/src/features/forge/components/zodLayouts/ZodFieldLayout.tsx

@@ -204,6 +204,7 @@ export const ZodFieldLayout = ({
             moreInfoTooltip={layout?.moreInfoTooltip}
             onChange={onDataChange}
             width={width}
+            withVariableButton={layout.withVariableButton ?? true}
           />
         )
       }