chore: simplify

website/src/repl/components/button/action-button.jsx

@@ -8,40 +8,3 @@ export function ActionButton({ children, label, labelIsHidden, className, ...but
     </button>
   );
 }
-
-export function SpecialActionButton(props) {
-  const { className, ...buttonProps } = props;
-
-  return (
-    <ActionButton {...buttonProps} className={cx('bg-background p-2 max-w-[300px] hover:opacity-50', className)} />
-  );
-}
-
-export function IconButton(props) {
-  const { Icon, label, children, labelIsHidden, className, ...buttonProps } = props;
-
-  return (
-    <button
-      className={cx('space-x-1 max-w-[300px] inline-flex items-center cursor-pointer hover:opacity-50', className)}
-      title={label}
-      {...buttonProps}
-    >
-      <Icon className="w-5 h-5" />
-      <span className="max-w-[300px]">{label}</span>
-      {children}
-    </button>
-  );
-}
-
-export function ActionInput({ label, className, ...props }) {
-  return (
-    <label className={cx('space-x-1 inline-flex items-center cursor-pointer ', className)}>
-      <input {...props} className="sr-only peer" />
-      <span className="inline-flex items-center peer-hover:opacity-50 text-xs">{label}</span>
-    </label>
-  );
-}
-
-export function SpecialActionInput({ className, ...props }) {
-  return <ActionInput {...props} className={className} label={<span className="max-w-[300px]">{props.label}</span>} />;
-}

website/src/repl/components/panel/ImportPrebakeScriptButton.jsx

@@ -1,8 +1,6 @@
 import { errorLogger } from '@strudel/core';
-import { useSettings, storePrebakeScript } from '../../../settings.mjs';
-import { SpecialActionInput } from '../button/action-button';
+import { storePrebakeScript } from '../../../settings.mjs';
 import { confirmDialog, PREBAKE_CHANGE_MSG } from '@src/repl/util.mjs';
-import { DocumentArrowDownIcon } from '@heroicons/react/16/solid';
 
 async function importScript(script, updateEditor) {
   const reader = new FileReader();
@@ -31,25 +29,22 @@ export async function exportScript(script) {
 }
 
 export function ImportPrebakeScriptButton({ updateEditor }) {
-  const settings = useSettings();
-
+  const handleChange = async (e) => {
+    const file = e.target.files[0];
+    const confirmed = await confirmDialog(PREBAKE_CHANGE_MSG);
+    if (!confirmed) {
+      return;
+    }
+    try {
+      await importScript(file, updateEditor);
+    } catch (e) {
+      errorLogger(e);
+    }
+  };
   return (
-    <SpecialActionInput
-      type="file"
-      label="import"
-      accept=".strudel,.js"
-      onChange={async (e) => {
-        const file = e.target.files[0];
-        const confirmed = await confirmDialog(PREBAKE_CHANGE_MSG);
-        if (!confirmed) {
-          return;
-        }
-        try {
-          await importScript(file, updateEditor);
-        } catch (e) {
-          errorLogger(e);
-        }
-      }}
-    />
+    <label className="space-x-1 inline-flex items-center cursor-pointer">
+      <input type="file" accept=".strudel,.js" className="sr-only peer" onChange={handleChange} />
+      <span className="inline-flex items-center peer-hover:opacity-50 text-xs max-w-[300px]">import</span>
+    </label>
   );
 }

website/src/repl/components/panel/SettingsTab.jsx

@@ -7,7 +7,7 @@ import { AudioDeviceSelector } from './AudioDeviceSelector.jsx';
 import { AudioEngineTargetSelector } from './AudioEngineTargetSelector.jsx';
 import { confirmDialog } from '../../util.mjs';
 import { DEFAULT_MAX_POLYPHONY, setMaxPolyphony, setMultiChannelOrbits } from '@strudel/webaudio';
-import { ActionButton, SpecialActionButton } from '../button/action-button.jsx';
+import { ActionButton } from '../button/action-button.jsx';
 import { exportScript, ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
 import { useEffect, useRef } from 'react';
 
@@ -340,7 +340,7 @@ function MainSettingsContent({ started }) {
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">
-        <SpecialActionButton
+        <ActionButton
           onClick={() => {
             confirmDialog('Sure?').then((r) => {
               if (r) {
@@ -349,9 +349,10 @@ function MainSettingsContent({ started }) {
               }
             });
           }}
+          className="bg-background p-2 max-w-[300px] hover:opacity-50"
         >
           restore default settings
-        </SpecialActionButton>
+        </ActionButton>
       </FormItem>
     </div>
   );
@@ -387,7 +388,7 @@ function PrebakeSettingsContent() {
           value={includePrebakeScriptInShare}
         />
         <div className="py-2 flex flex-row items-center space-x-3 ">
-          <ImportPrebakeScriptButton updateEditor={(code) => editorRef.current?.editor.setCode(code)} />
+          <ImportPrebakeScriptButton updateEditor={(code) => editorRef?.current.setCode(code)} />
           <ActionButton onClick={() => exportScript(prebakeScript)}>export</ActionButton>
           <ActionButton onClick={() => editorRef.current?.savePrebake()}>save</ActionButton>
         </div>