diff --git a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx index 84bc7def77..8274a68bc9 100644 --- a/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx +++ b/packages/hub/src/app/models/[owner]/[slug]/EditSquiggleSnippetModel.tsx @@ -3,7 +3,7 @@ import { FormProvider, useFieldArray, useForm } from "react-hook-form"; import { graphql, useFragment } from "react-relay"; import { PlaygroundToolbarItem } from "@quri/squiggle-components"; -import { Button, LinkIcon, useToast } from "@quri/ui"; +import { Button, LinkIcon, TextTooltip, useToast } from "@quri/ui"; import { EditSquiggleSnippetModel$key } from "@/__generated__/EditSquiggleSnippetModel.graphql"; import { @@ -18,6 +18,7 @@ import { SquigglePlaygroundVersionPicker, VersionedSquigglePlayground, type SquiggleVersion, + SquiggleVersionShower, } from "@quri/versioned-playground"; export const Mutation = graphql` @@ -182,12 +183,25 @@ export const EditSquiggleSnippetModel: FC = ({ modelRef }) => { onClick={() => openModal("exports")} /> )} - + {model.isEditable ? ( + + ) : ( + + {/* div wrapper is required because TextTooltip clones its children and SquiggleVersionShower doesn't forwardRef */} +
+ +
+
+ )} {model.isEditable && ( diff --git a/packages/versioned-playground/src/SquiggleVersionShower.tsx b/packages/versioned-playground/src/SquiggleVersionShower.tsx new file mode 100644 index 0000000000..719edf3b04 --- /dev/null +++ b/packages/versioned-playground/src/SquiggleVersionShower.tsx @@ -0,0 +1,34 @@ +"use client"; +import { FC } from "react"; +import { SquiggleVersion, checkSquiggleVersion } from "./versions.js"; +import { CodeBracketIcon, WrenchIcon } from "@quri/ui"; + +export function versionTitle(version: SquiggleVersion) { + return version === "dev" ? "Next" : version; +} + +export function uncheckedVersionTitle(version: string) { + const versionIsValid = checkSquiggleVersion(version); + if (versionIsValid) { + return versionTitle(version); + } else { + return `${version} (unknown)`; + } +} + +export function versionIcon(version: string) { + return version === "dev" ? WrenchIcon : CodeBracketIcon; +} + +export const SquiggleVersionShower: FC<{ version: string }> = ({ version }) => { + const CurrentIcon = versionIcon(version); + + return ( +
+ +
+ {uncheckedVersionTitle(version)} +
+
+ ); +}; diff --git a/packages/versioned-playground/src/index.ts b/packages/versioned-playground/src/index.ts index 2dd3ab63b0..88f2d41310 100644 --- a/packages/versioned-playground/src/index.ts +++ b/packages/versioned-playground/src/index.ts @@ -1,5 +1,6 @@ export { VersionedSquigglePlayground } from "./VersionedSquigglePlayground.js"; export { SquigglePlaygroundVersionPicker } from "./SquigglePlaygroundVersionPicker.js"; +export { SquiggleVersionShower } from "./SquiggleVersionShower.js"; export { squiggleVersions,