working

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

@@ -0,0 +1,39 @@
+import { errorLogger } from '@strudel/core';
+import { useSettings, storeStartupScript } from '../../../settings.mjs';
+import { SpecialActionInput } from '../button/action-button';
+
+async function importScript(script) {
+    const reader = new FileReader()
+    reader.readAsText(script)
+
+    reader.onload = () => {
+        const text = reader.result;
+        console.info(text)
+        storeStartupScript(text)
+
+    };
+
+    reader.onerror = () => {
+        errorLogger(new Error('failed to import prebake script'), 'ImportPrebakeScriptButton')
+    }
+
+}
+export function ImportPrebakeScriptButton() {
+    const settings = useSettings();
+
+    return <SpecialActionInput type="file"
+        label="import prebake script"
+        accept=".strudel, .txt"
+        onChange={(e) => importScript(e.target.files[0])} />
+
+    // return <label className="hover:opacity-50 cursor-pointer">
+    //     <input
+    //         style={{ display: 'none' }}
+    //         type="file"
+    //         // multiple
+    //         accept=".strudel, .txt"
+    //         onChange={(e) => importScript(e.target.files[0])}
+    //     />
+    //     import prebake script
+    // </label>
+}

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

@@ -127,7 +127,7 @@ function PanelContent({ context, tab }) {
     case tabNames.reference:
       return <Reference />;
     case tabNames.settings:
-      return <SettingsTab started={context.started} />;
+      return <SettingsTab started={context.started} context={context} />;
     case tabNames.files:
       return <FilesTab />;
     default:

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

@@ -83,7 +83,7 @@ function UserPatterns({ context }) {
   const activePattern = useActivePattern();
   const viewingPatternStore = useViewingPatternData();
   const viewingPatternData = parseJSON(viewingPatternStore);
-  const { userPatterns, patternFilter, patternAutoStart } = useSettings();
+  const { userPatterns, patternFilter, patternAutoStart, } = useSettings();
   const viewingPatternID = viewingPatternData?.id;
   return (
     <div className="flex flex-col gap-2 flex-grow overflow-hidden h-full pb-2 ">

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

@@ -7,6 +7,8 @@ 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 { ImportPrebakeScriptButton } from './ImportPrebakeScriptButton.jsx';
 
 function Checkbox({ label, value, onChange, disabled = false }) {
   return (
@@ -86,7 +88,7 @@ const fontFamilyOptions = {
 
 const RELOAD_MSG = 'Changing this setting requires the window to reload itself. OK?';
 
-export function SettingsTab({ started }) {
+export function SettingsTab({ started,context }) {
   const {
     theme,
     keybindings,
@@ -113,6 +115,7 @@ export function SettingsTab({ started }) {
     isTabIndentationEnabled,
     isMultiCursorEnabled,
     patternAutoStart,
+    startupScript,
   } = useSettings();
   const shouldAlwaysSync = isUdels();
   const canChangeAudioDevice = AudioContext.prototype.setSinkId != null;
@@ -204,6 +207,8 @@ export function SettingsTab({ started }) {
           />
         </FormItem>
       </div>
+      <ImportPrebakeScriptButton />
+      {/* <SpecialActionButton label="edit startup script" onClick={() => context.editStartupScript(startupScript)}></SpecialActionButton> */}
       <FormItem label="Keybindings">
         <ButtonGroup
           value={keybindings}
@@ -313,8 +318,7 @@ export function SettingsTab({ started }) {
       </FormItem>
       <FormItem label="Zen Mode">Try clicking the logo in the top left!</FormItem>
       <FormItem label="Reset Settings">
-        <button
-          className="bg-background p-2 max-w-[300px] rounded-md hover:opacity-50"
+        <SpecialActionButton
           onClick={() => {
             confirmDialog('Sure?').then((r) => {
               if (r) {
@@ -325,7 +329,7 @@ export function SettingsTab({ started }) {
           }}
         >
           restore default settings
-        </button>
+        </SpecialActionButton>
       </FormItem>
     </div>
   );