feature(studio): clear tabs when example is inserted (#1204)

apps/frontend/app/(website)/studio/src/components/button/InsertExampleButton.tsx

@@ -9,22 +9,22 @@ import { buildDefaultCodemodSource, useModStore } from "@studio/store/mod";
 import { useSnippetsStore } from "../../store/snippets";
 
 const InsertExampleButton = () => {
-  const { engine, getSelectedEditors } = useSnippetsStore();
+  const { engine, getSelectedEditors, clearAll } = useSnippetsStore();
   const { setContent } = useModStore();
   return (
     <Tooltip
       trigger={
         <Button
           className="flex items-center justify-center px-0"
-          onClick={() => {
+          onClick={async () => {
+            await clearAll();
             getSelectedEditors().setBeforeSnippet(BEFORE_SNIPPET_DEFAULT_CODE);
             getSelectedEditors().setAfterSnippet(AFTER_SNIPPET_DEFAULT_CODE);
             setContent(buildDefaultCodemodSource(engine));
           }}
           size="xs"
           variant="ghost"
         >
-          {/* <KeyboardIcon className="h-4 w-4" /> */}
           <ExampleIcon />
           <span className="sr-only">Insert Example</span>
         </Button>

apps/frontend/app/(website)/studio/src/store/snippets.ts

@@ -9,6 +9,7 @@ import {
 } from "@studio/store/utils/getSnippetInitialState";
 import type { TreeNode } from "@studio/types/tree";
 import { type RangeCommand, buildRanges } from "@studio/utils/tree";
+import { sleep } from "@studio/utils/validation/sleep";
 import { map, mapObjIndexed, omit, reduce, remove } from "ramda";
 import { parse } from "valibot";
 import { create } from "zustand";
@@ -164,24 +165,21 @@ export const useSnippetsStore = create<SnippetsState>((set, get) => ({
         editors,
       });
   },
-  clearAll: () => {
+  clearAll: async () => {
     set({
       selectedPairIndex: 0,
     });
-    setTimeout(
-      () =>
-        set({
-          editors: [
-            {
-              name: "Test 1",
-              before: getSnippetInitialState(),
-              after: getSnippetInitialState(),
-              output: getSnippetInitialState(),
-            },
-          ],
-        }),
-      100,
-    );
+    await sleep(1);
+    set({
+      editors: [
+        {
+          name: "Test 1",
+          before: getSnippetInitialState(),
+          after: getSnippetInitialState(),
+          output: getSnippetInitialState(),
+        },
+      ],
+    });
   },
   selectedPairIndex: 0,
   getAllNames: () => get().editors.map(({ name }) => name),

apps/frontend/app/(website)/studio/src/utils/validation/sleep.ts

@@ -0,0 +1,2 @@
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));