Template Tag Function Editor (#67)

![CleanShot 2024-08-15 at 16 53
09@2x](https://github.com/user-attachments/assets/8c0eb655-1daf-4dc8-811f-f606c770f7dc)

src-web/components/TemplateVariableDialog.tsx

@@ -0,0 +1,69 @@
+import type { EnvironmentVariable } from '@yaakapp/api';
+import { useCallback, useMemo, useState } from 'react';
+import type { Tokens } from '../gen/Tokens';
+import { useActiveEnvironmentVariables } from '../hooks/useActiveEnvironmentVariables';
+import { useRenderTemplate } from '../hooks/useRenderTemplate';
+import { useTemplateTokensToString } from '../hooks/useTemplateTokensToString';
+import { Button } from './core/Button';
+import { InlineCode } from './core/InlineCode';
+import { Select } from './core/Select';
+import { VStack } from './core/Stacks';
+
+interface Props {
+  definition: EnvironmentVariable;
+  initialTokens: Tokens;
+  hide: () => void;
+  onChange: (rawTag: string) => void;
+}
+
+export function TemplateVariableDialog({ hide, onChange, initialTokens }: Props) {
+  const variables = useActiveEnvironmentVariables();
+  const [selectedVariableName, setSelectedVariableName] = useState<string>(() => {
+    return initialTokens.tokens[0]?.type === 'tag' && initialTokens.tokens[0]?.val.type === 'var'
+      ? initialTokens.tokens[0]?.val.name
+      : ''; // Should never happen
+  });
+
+  const tokens: Tokens = useMemo(() => {
+    const selectedVariable = variables.find((v) => v.name === selectedVariableName);
+    return {
+      tokens: [
+        {
+          type: 'tag',
+          val: {
+            type: 'var',
+            name: selectedVariable?.name ?? '',
+          },
+        },
+      ],
+    };
+  }, [selectedVariableName, variables]);
+
+  const tagText = useTemplateTokensToString(tokens);
+  const handleDone = useCallback(async () => {
+    if (tagText.data != null) {
+      onChange(tagText.data);
+    }
+    hide();
+  }, [hide, onChange, tagText.data]);
+
+  const rendered = useRenderTemplate(tagText.data ?? '');
+
+  return (
+    <VStack className="pb-3" space={4}>
+      <VStack space={2}>
+        <Select
+          name="variable"
+          label="Variable"
+          value={selectedVariableName}
+          options={variables.map((v) => ({ label: v.name, value: v.name }))}
+          onChange={setSelectedVariableName}
+        />
+      </VStack>
+      <InlineCode className="select-text cursor-text">{rendered.data}</InlineCode>
+      <Button color="primary" onClick={handleDone}>
+        Done
+      </Button>
+    </VStack>
+  );
+}