feat: Simplify Generator controls

src/views/Generator/GeneraterControls/GeneratorControls.tsx

@@ -1,42 +1,54 @@
 import { useState } from 'react'
-import { Button, ButtonProps, Tooltip } from '@radix-ui/themes'
+import {
+  Button,
+  ButtonProps,
+  DropdownMenu,
+  IconButton,
+  Tooltip,
+} from '@radix-ui/themes'
 
 import { useScriptPreview } from '@/hooks/useScriptPreview'
 import { exportScript } from '../Generator.utils'
 import { ValidatorDialog } from './ValidatorDialog'
+import { CheckCircledIcon, DotsVerticalIcon } from '@radix-ui/react-icons'
+import { useGeneratorParams } from '../Generator.hooks'
+import { useNavigate } from 'react-router-dom'
+import { getRoutePath } from '@/routeMap'
 
 interface GeneratorControlsProps {
   onSave: () => void
   isDirty: boolean
 }
 
 export function GeneratorControls({ onSave, isDirty }: GeneratorControlsProps) {
+  const { fileName } = useGeneratorParams()
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const { preview, hasError } = useScriptPreview()
+  const navigate = useNavigate()
   const tooltip = hasError ? 'Invalid script. Please check your rules' : ''
 
+  const handleDeleteGenerator = async () => {
+    await window.studio.ui.deleteFile(fileName)
+
+    navigate(getRoutePath('home'))
+  }
+
   return (
     <>
       {!!preview && (
         <>
           <ButtonWithTooltip
-            variant="outline"
+            variant="ghost"
+            color="gray"
             disabled={hasError}
             tooltip={tooltip}
             onClick={() => {
               setIsDialogOpen(true)
             }}
           >
+            <CheckCircledIcon />
             Validate script
           </ButtonWithTooltip>
-          <ButtonWithTooltip
-            variant="outline"
-            disabled={hasError}
-            tooltip={tooltip}
-            onClick={exportScript}
-          >
-            Export script
-          </ButtonWithTooltip>
           <ValidatorDialog
             script={preview}
             open={isDialogOpen}
@@ -53,6 +65,22 @@ export function GeneratorControls({ onSave, isDirty }: GeneratorControlsProps) {
       >
         Save
       </ButtonWithTooltip>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <IconButton variant="ghost" color="gray">
+            <DotsVerticalIcon />
+          </IconButton>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.Item onSelect={exportScript} disabled={hasError}>
+            Export script
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item onSelect={handleDeleteGenerator} color="red">
+            Delete generator
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
     </>
   )
 }

src/views/Generator/NewRuleMenu.tsx

@@ -1,11 +1,12 @@
 import { PlusCircledIcon } from '@radix-ui/react-icons'
 import { Button, DropdownMenu } from '@radix-ui/themes'
+import { ComponentProps } from 'react'
 
 import { useGeneratorStore } from '@/store/generator'
 import { TestRule } from '@/types/rules'
 import { createEmptyRule } from '@/utils/rules'
 
-export function NewRuleMenu() {
+export function NewRuleMenu(props: ComponentProps<typeof Button>) {
   const addRule = useGeneratorStore((store) => store.addRule)
 
   const createRule = (type: TestRule['type']) => {
@@ -16,7 +17,7 @@ export function NewRuleMenu() {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <Button variant="ghost" size="1" color="orange" mr="2">
+        <Button variant="ghost" size="1" color="gray" mr="2" {...props}>
           <PlusCircledIcon />
           Add rule
         </Button>

src/views/Generator/TestRuleContainer/TestRule/TestRule.tsx

@@ -92,6 +92,8 @@ export function TestRuleItem({
           css={css`
             cursor: grab;
           `}
+          width={16}
+          height={16}
           aria-hidden
         />
       </IconButton>

src/views/Generator/TestRuleContainer/TestRuleContainer.tsx

@@ -1,9 +1,10 @@
 import { useGeneratorStore } from '@/store/generator'
-import { Flex, Heading, ScrollArea } from '@radix-ui/themes'
+import { Flex, Heading, ScrollArea, Text } from '@radix-ui/themes'
 import { NewRuleMenu } from '../NewRuleMenu'
 import { SortableRuleList } from './SortableRuleList'
 import { css } from '@emotion/react'
 import { TestOptions } from '../TestOptions'
+import grotIllustration from '@/assets/grot.svg'
 
 export function TestRuleContainer() {
   const rules = useGeneratorStore((store) => store.rules)
@@ -16,7 +17,7 @@ export function TestRuleContainer() {
         align="center"
         top="0"
         pr="2"
-        gap="4"
+        gap="2"
         css={css`
           background-color: var(--color-background);
           z-index: 1;
@@ -33,11 +34,35 @@ export function TestRuleContainer() {
         >
           Test rules ({rules.length})
         </Heading>
-        <TestOptions />
         <NewRuleMenu />
+        <TestOptions />
       </Flex>
 
       <SortableRuleList rules={rules} onSwapRules={swapRules} />
+      <Flex
+        py="3"
+        px="6"
+        align={rules.length === 0 ? 'center' : 'start'}
+        direction="column"
+        gap="3"
+      >
+        {rules.length === 0 ? (
+          <>
+            <img
+              src={grotIllustration}
+              css={css`
+                max-height: 200px;
+              `}
+            />
+            <Text size="1" color="gray">
+              Start configuring your test logic by adding a new rule
+            </Text>
+            <NewRuleMenu variant="solid" size="2" />
+          </>
+        ) : (
+          <NewRuleMenu />
+        )}
+      </Flex>
     </ScrollArea>
   )
 }