feat: snippets are aware of existing order and names

Author: brettkolodny

src/client/App.tsx

@@ -195,7 +195,7 @@ export const App = () => {
 
 			<ResizablePanelGroup direction={"horizontal"}>
 				{/* EDITOR */}
-				<Editor code={code} setCode={setCode} />
+				<Editor code={code} setCode={setCode} parameters={parameters} />
 
 				<ResizableHandle className="bg-surface-quaternary" />
 

src/client/Editor.tsx

@@ -14,7 +14,7 @@ import {
 	TooltipTrigger,
 } from "@/client/components/Tooltip";
 import { useTheme } from "@/client/contexts/theme";
-import { snippets } from "@/client/snippets";
+import { snippets, type SnippetFunc } from "@/client/snippets";
 import { cn } from "@/utils/cn";
 import { Editor as MonacoEditor } from "@monaco-editor/react";
 import {
@@ -27,28 +27,45 @@ import {
 } from "lucide-react";
 import { type FC, useEffect, useRef, useState } from "react";
 import { useEditor } from "@/client/contexts/editor";
+import type { ParameterWithSource } from "@/gen/types";
 
 type EditorProps = {
 	code: string;
 	setCode: React.Dispatch<React.SetStateAction<string>>;
+	parameters: ParameterWithSource[];
 };
 
-export const Editor: FC<EditorProps> = ({ code, setCode }) => {
+export const Editor: FC<EditorProps> = ({ code, setCode, parameters }) => {
 	const { appliedTheme } = useTheme();
 	const editorRef = useEditor();
 
+	const [tab, setTab] = useState(() => "code");
+
 	const [codeCopied, setCodeCopied] = useState(() => false);
 	const copyTimeoutId = useRef<ReturnType<typeof setTimeout> | undefined>(
 		undefined,
 	);
 
-	const [tab, setTab] = useState(() => "code");
-
 	const onCopy = () => {
 		navigator.clipboard.writeText(code);
 		setCodeCopied(() => true);
 	};
 
+	const onAddSnippet = (name: string, snippet: SnippetFunc) => {
+		const nextInOrder =
+			parameters.reduce(
+				(highestOrder, parameter) =>
+					highestOrder < parameter.order ? parameter.order : highestOrder,
+				0,
+			) + 1;
+
+		const nameCount = parameters.filter((p) => p.name.startsWith(name)).length;
+
+		setCode(
+			`${code.trimEnd()}\n\n${snippet(nameCount > 0 ? `${name}-${nameCount}` : name, nextInOrder)}\n`,
+		);
+	};
+
 	useEffect(() => {
 		if (!codeCopied) {
 			return;
@@ -99,17 +116,20 @@ export const Editor: FC<EditorProps> = ({ code, setCode }) => {
 
 							<DropdownMenuPortal>
 								<DropdownMenuContent align="start">
-									{snippets.map(({ label, icon: Icon, snippet }, index) => (
-										<DropdownMenuItem
-											key={index}
-											onClick={() =>
-												setCode(`${code.trimEnd()}\n\n${snippet()}\n`)
-											}
-										>
-											<Icon size={24} />
-											{label}
-										</DropdownMenuItem>
-									))}
+									{snippets.map(
+										({ name, label, icon: Icon, snippet }, index) => (
+											<DropdownMenuItem
+												key={index}
+												onClick={() =>
+													// setCode(`${code.trimEnd()}\n\n${snippet()}\n`)
+													onAddSnippet(name, snippet)
+												}
+											>
+												<Icon size={24} />
+												{label}
+											</DropdownMenuItem>
+										),
+									)}
 								</DropdownMenuContent>
 							</DropdownMenuPortal>
 						</DropdownMenu>

src/client/snippets.ts

@@ -18,8 +18,9 @@ export const defaultCode = `terraform {
   }
 }`;
 
-type SnippetFunc = (name?: string, order?: number) => string;
+export type SnippetFunc = (name?: string, order?: number) => string;
 type Snippet = {
+  name: string;
 	label: string;
 	icon: typeof RadioIcon;
 	snippet: SnippetFunc;
@@ -210,41 +211,49 @@ export const slider: SnippetFunc = (
 
 export const snippets: Snippet[] = [
 	{
+	  name: "text-input",
 		label: "Text Input",
 		icon: TextCursorInputIcon,
 		snippet: input,
 	},
 	{
+	  name: "textarea",
 		label: "Textarea",
 		icon: LetterTextIcon,
 		snippet: textarea,
 	},
 	{
+	  name: "radio",
 		label: "Radio",
 		icon: RadioIcon,
 		snippet: radio,
 	},
 	{
+	  name: "switch",
 		label: "Multi-select",
 		icon: SquareMousePointerIcon,
 		snippet: multiSelect,
 	},
 	{
+	  name: "tag-select",
 		label: "Tag-select",
 		icon: TagIcon,
 		snippet: tagSelect,
 	},
 	{
+	  name: "switch",
 		label: "Switch",
 		icon: ToggleLeftIcon,
 		snippet: switchInput,
 	},
 	{
+	  name: "dropdown",
 		label: "Dropdown",
 		icon: ChevronDownIcon,
 		snippet: dropdown,
 	},
 	{
+	  name: "slider",
 		label: "Slider",
 		icon: Settings2Icon,
 		snippet: slider,