From 03325f79a08def1dba39ba0ed9222cda3db6186b Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Wed, 20 Aug 2025 10:24:39 +0100
Subject: [PATCH] Example script dropdown

---
 app/components/ascii-art-generator.tsx | 37 ++++++--------------
 app/components/ascii-preview.tsx       | 48 ++++++++++++++++++++++----
 app/components/project-management.tsx  |  4 +--
 3 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/app/components/ascii-art-generator.tsx b/app/components/ascii-art-generator.tsx
index 43ab023..72f38e9 100644
--- a/app/components/ascii-art-generator.tsx
+++ b/app/components/ascii-art-generator.tsx
@@ -681,20 +681,6 @@ export function AsciiArtGenerator() {
     [processFile],
   )
 
-  const handleExampleScriptClick = useCallback(() => {
-    // Open code sidebar and load the clock example
-    setShowCodeSidebar(true)
-    const template = TEMPLATES.sin
-    setPendingCode(template.source.code)
-    updateSettings('source', template.source)
-    updateSettings('output', template.output)
-    updateSettings('export', template.export)
-    updateSettings('preprocessing', template.preprocessing)
-    updateSettings('meta', template.meta)
-    updateSettings('source', template.source)
-    updateSettings('animation', template.animation)
-  }, [updateSettings])
-
   const handleTemplateChange = (template: TemplateType) => {
     if (template !== 'custom' && TEMPLATES[template]) {
       loadTemplate(template)
@@ -811,18 +797,8 @@ export function AsciiArtGenerator() {
                 disabled={!program}
                 exportSettings={settings.export}
               />
-              <hr />
-              {/* Project Management */}
-              <ProjectManagement
-                projectName={projectName}
-                setProjectName={setProjectName}
-                templateType={templateType}
-                settings={settings}
-                handleLoadProjectInput={handleLoadProjectInput}
-                handleTemplateChange={handleTemplateChange}
-              />
             </div>
-            <div className="flex grow items-end p-3 pb-2">
+            <div className="flex grow items-end p-3 pb-3">
               <a
                 href="https://oxide.computer"
                 target="_blank"
@@ -834,6 +810,15 @@ export function AsciiArtGenerator() {
               </a>
             </div>
           </div>
+          {/* Project Management */}
+          <ProjectManagement
+            projectName={projectName}
+            setProjectName={setProjectName}
+            templateType={templateType}
+            settings={settings}
+            handleLoadProjectInput={handleLoadProjectInput}
+            handleTemplateChange={handleTemplateChange}
+          />
         </motion.div>
       </motion.div>
 
@@ -890,7 +875,7 @@ export function AsciiArtGenerator() {
                 animationController={animationController}
                 setAnimationController={setAnimationController}
                 isExporting={isExporting}
-                onExampleScriptClick={handleExampleScriptClick}
+                onExampleScriptClick={(template) => loadTemplate(template)}
                 onExampleImageClick={() =>
                   updateSourceAndAspectRatio(exampleImage, 'image', 'example-grad.png')
                 }
diff --git a/app/components/ascii-preview.tsx b/app/components/ascii-preview.tsx
index 3745f8b..7df79ed 100644
--- a/app/components/ascii-preview.tsx
+++ b/app/components/ascii-preview.tsx
@@ -8,18 +8,21 @@
 import {
   Action16Icon,
   AutoRestart12Icon,
+  DirectionDownIcon,
   DirectionRightIcon,
   DocumentApi16Icon,
   Folder16Icon,
   Resize16Icon,
 } from '@oxide/design-system/icons/react'
 import useResizeObserver from '@react-hook/resize-observer'
+import cn from 'classnames'
 import { motion } from 'motion/react'
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 
 import type { createAnimation, Program } from '~/lib/animation'
 import { InputButton, InputNumber } from '~/lib/ui/src'
+import { TEMPLATES, type TemplateType } from '~/templates'
 
 import AsciiAnimation from './ascii-animation'
 import type { GridType } from './ascii-art-generator'
@@ -43,7 +46,7 @@ interface AsciiPreviewProps {
   setAnimationController: (controller: AnimationController) => void
   isExporting: boolean
   onUploadClick?: () => void
-  onExampleScriptClick?: () => void
+  onExampleScriptClick?: (templateType: TemplateType) => void
   onExampleImageClick?: () => void
 }
 
@@ -54,13 +57,17 @@ const DemoCard = ({
   title,
   onClick,
   index,
+  hasDropdown = false,
+  onDropdownChange,
 }: {
   icon: React.ReactNode
   title: string
   onClick?: () => void
   index: number
+  hasDropdown?: boolean
+  onDropdownChange?: (value: string) => void
 }) => (
-  <motion.button
+  <motion.div
     initial={{ opacity: 0, y: 20 }}
     animate={{ opacity: 1, y: 0 }}
     transition={{
@@ -68,14 +75,39 @@ const DemoCard = ({
       delay: index * 0.1,
       ease: [0.25, 0.46, 0.45, 0.94],
     }}
-    className="flex w-[20rem] items-center rounded border p-2 text-left transition-colors bg-raise border-secondary elevation-1 hover:bg-[var(--base-neutral-100)]"
-    onClick={onClick}
+    className="group relative flex w-[20rem] items-center rounded border p-2 text-left transition-colors bg-raise border-secondary elevation-1 hover:bg-[var(--base-neutral-100)]"
   >
     <div className="mr-3 inline-flex items-center justify-center rounded p-2 text-accent bg-accent-secondary">
       {icon}
     </div>
     <div className="text-default text-sans-md">{title}</div>
-  </motion.button>
+    {hasDropdown && (
+      <div className="absolute bottom-0 right-0 top-0 flex w-8 items-center justify-center border-l bg-raise border-secondary hover:bg-[var(--base-neutral-100)]">
+        <select
+          className="absolute h-full w-full cursor-pointer appearance-none opacity-0"
+          style={{ color: 'transparent' }}
+          onChange={(e) => onDropdownChange?.(e.target.value)}
+          defaultValue=""
+        >
+          <option value="" disabled>
+            Select script
+          </option>
+          {Object.entries(TEMPLATES)
+            .filter(([key]) => key !== 'custom' && key !== 'imageCode')
+            .map(([key, template]) => (
+              <option key={key} value={key}>
+                {template.meta.name}
+              </option>
+            ))}
+        </select>
+        <DirectionDownIcon className="h-3 w-3 flex-shrink-0 text-tertiary" />
+      </div>
+    )}
+    <button
+      className={cn('absolute bottom-0 left-0 top-0', hasDropdown ? 'right-12' : 'right-0')}
+      onClick={onClick}
+    />
+  </motion.div>
 )
 
 const useSize = (target: HTMLDivElement | null) => {
@@ -217,7 +249,11 @@ export function AsciiPreview({
             index={1}
             icon={<DocumentApi16Icon className="text-accent-secondary" />}
             title="Run example script"
-            onClick={onExampleScriptClick}
+            hasDropdown={true}
+            onDropdownChange={(templateKey) =>
+              onExampleScriptClick?.(templateKey as TemplateType)
+            }
+            onClick={() => onExampleScriptClick?.('sin')}
           />
           <DemoCard
             index={2}
diff --git a/app/components/project-management.tsx b/app/components/project-management.tsx
index 8c2e004..a65680e 100644
--- a/app/components/project-management.tsx
+++ b/app/components/project-management.tsx
@@ -66,7 +66,7 @@ export function ProjectManagement({
   }
 
   return (
-    <Container>
+    <Container className="border-t py-3 border-default">
       <InputSelect<TemplateType>
         value={templateType}
         onChange={handleTemplateChange}
@@ -91,7 +91,7 @@ export function ProjectManagement({
 
       <div className="flex gap-2">
         <InputButton variant="secondary">
-          Load
+          Load JSON
           <input
             type="file"
             className="absolute inset-0 z-10 opacity-0"