Change terminology. Sketch out Draft Function

src/ui/App.tsx

@@ -1,5 +1,5 @@
 import { createSignal } from 'solid-js';
-import { Story } from './Story';
+import {  Scrowl } from './Scrowl';
 import { Controls } from './Controls';
 
 export default function App() {
@@ -13,7 +13,7 @@ export default function App() {
         "margin-top": "2rem",
       }}
     >
-      <Story />
+      <Scrowl />
       <Controls />
     </main>
   );

src/ui/Controls.tsx

@@ -1,3 +1,4 @@
+import { spawnFunctionDraft } from "./scrowlStore";
 
 type Props = {
   // TODO
@@ -15,15 +16,23 @@ export function Controls(props: Props) {
       <article>
         <header>Controls</header>
 
-        <fieldset>
-          <label>
-            <input type="checkbox" role="switch" checked />
-            Auto-evaluate
-          </label>
-          <button class="secondary outline" style={{ width: "100%" }}>
-            Clear All
+        <div style={{ display: "flex", gap: "0.5rem", "flex-wrap": "wrap" }}>
+          <button 
+            class="outline secondary" 
+            onClick={spawnFunctionDraft}
+            style={{ padding: "2px 8px", "font-size": "0.8rem", width: "auto" }}
+          >
+            +fn
           </button>
-        </fieldset>
+          
+          <button 
+            class="outline secondary" 
+            style={{ padding: "2px 8px", "font-size": "0.8rem", width: "auto" }}
+            disabled
+          >
+            +signal
+          </button>
+        </div>
 
         <footer>
           <small>Language v0.1.0</small>

src/ui/Digith.tsx

@@ -0,0 +1,29 @@
+import { FunctionName } from "src/lang/expr"
+
+export type Digith =
+  | Digith.Repl
+  | Digith.NewFunctionDraft
+  | Digith.Function
+  
+export namespace Digith {
+  export type Repl = {
+    tag: "repl",
+  }
+
+  export type NewFunctionDraft = {
+    tag: "new-fn-draft",
+    raw_name: string,
+    raw_parameters: string,
+    raw_body: string,
+  }
+
+  export type Function = {
+    tag: "fn",
+    name: FunctionName,
+    raw_parameters: string,
+    raw_body: string,
+    is_loaded: boolean
+  }
+
+}
+

src/ui/Function.tsx

@@ -0,0 +1,49 @@
+import { createSignal } from "solid-js";
+import { Digith } from "./Digith";
+import { useProgram } from "./ProgramProvider";
+
+
+export function NewFunctionDraftDigith(props: { draft: Digith.NewFunctionDraft }) {
+  const program = useProgram();
+
+  const [name, setName] = createSignal(props.draft.raw_name);
+  const [params, setParams] = createSignal(props.draft.raw_parameters);
+  const [body, setBody] = createSignal(props.draft.raw_body);
+
+  const handleCommit = () => {
+    // TODO: Add the new function to the draft
+    console.log(`Committing ${name()} to the Program...`);
+  };
+
+  // TODO: What about parsing errors?
+
+  return (
+    <article>
+      <header><strong>Fn Draft</strong></header>
+
+      <div>TODO: New Fn Draft under construction</div>
+    </article>
+  );
+}
+
+// TODO: What about renaming?
+export function FunctionDigith(props: { function: Digith.Function }) {
+  const program = useProgram();
+
+  const [params, setParams] = createSignal(props.function.raw_parameters);
+  const [body, setBody] = createSignal(props.function.raw_body);
+
+  const handleCommit = () => {
+    // TODO: Update the old function with new code
+    console.log(`Committing ${props.function.name} to the Program...`);
+  };
+
+  return (
+    <article>
+      <header><strong>Fn</strong></header>
+
+      <div>TODO: Fn under construction</div>
+    </article>
+  );
+}
+

src/ui/REPL.tsx

@@ -96,3 +96,4 @@ export function ExprREPL() {
     </section>
   );
 }
+

src/ui/Scrowl.tsx

@@ -0,0 +1,53 @@
+import { For, Match, Switch } from "solid-js";
+import { ExprREPL } from "./REPL";
+import { scrowl } from "./scrowlStore";
+import { FunctionDigith, NewFunctionDraftDigith } from "./Function";
+import { Digith } from "./Digith";
+
+// WTF are these names?
+// Scrowl
+// - thining about "scrawling", "howl", "crows", "owls", "nests", "scrolling", "soul", "crawling"
+// Digith
+// - thinking about fingers/digits. Hand is an object to think with (counting).
+// - Thinking of a prosthesis that's an extension of your body doing your bidding without you knowing exactly how.
+// - digital
+
+type Props = {
+  // TODO
+}
+
+export function Scrowl(props: Props) {
+  return (
+    <div
+      id="scrowl"
+      style={{
+        display: "flex",
+        "flex-direction": "column",
+        gap: "1.5rem",
+      }}
+    >
+      <For each={scrowl.digiths}>
+        {(digith) => (
+          <Switch>
+            <Match when={digith.tag === 'repl'}>
+              <article class="digith">
+                 <header><strong>REPL</strong></header>
+                 <ExprREPL />
+              </article>
+            </Match>
+            
+            <Match when={digith.tag === 'new-fn-draft'}>
+              <NewFunctionDraftDigith draft={digith as Digith.NewFunctionDraft} />
+            </Match>
+
+            <Match when={digith.tag === 'fn'}>
+              <FunctionDigith function={digith as Digith.Function} />
+            </Match>
+          </Switch>
+        )}
+      </For>
+
+    </div>
+  );
+}
+

src/ui/Story.tsx

@@ -1,45 +0,0 @@
-import { ExprREPL } from "./REPL";
-
-
-type Props = {
-  // TODO
-}
-
-export function Story(props: Props) {
-  return (
-    <div
-      id="story"
-      style={{
-        display: "flex",
-        "flex-direction": "column",
-        gap: "1.5rem",
-      }}
-    >
-      <article>
-        <header><strong>Interactive REPL</strong></header>
-        <ExprREPL />
-      </article>
-
-      <article>
-        <header><strong>Header</strong></header>
-        <p>This is a place for other items</p>
-      </article>
-      <article>
-        <header><strong>Header</strong></header>
-        <p>This is a place for other items</p>
-      </article>
-      <article>
-        <header><strong>Header</strong></header>
-        <p>This is a place for other items</p>
-      </article>
-      <article>
-        <header><strong>Header</strong></header>
-        <p>This is a place for other items</p>
-      </article>
-      <article>
-        <header><strong>Header</strong></header>
-        <p>This is a place for other items</p>
-      </article>
-    </div>
-  );
-}

src/ui/scrowlStore.ts

@@ -0,0 +1,21 @@
+import { createStore } from "solid-js/store";
+import { Digith } from "./Digith";
+
+export type Scrowl = {
+  digiths: Digith[];
+}
+
+export const [scrowl, setScrowl] = createStore<Scrowl>({
+  digiths: [{ tag: 'repl' }] 
+});
+
+export function spawnFunctionDraft() {
+  const newDraft: Digith = {
+    tag: 'new-fn-draft',
+    raw_name: '',
+    raw_parameters: '',
+    raw_body: '',
+  };
+  setScrowl("digiths", (prev) => [newDraft, ...prev]);
+};
+