working on fixing/reimplementing save command now that the mutations logic is more complete

src/components/filetree.tsx

@@ -55,7 +55,7 @@ interface TreeContextType {
 const TreeContext = createContext<TreeContextType>();
 
 export const Tree: Component<{ entries: Entry[], children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element], open?: TreeContextType['open'] }> = (props) => {
-    const [selection, setSelection] = createSignal<object[]>([]);
+    const [, setSelection] = createSignal<object[]>([]);
 
     const context = {
         open: props.open ?? (() => { }),

src/components/prompt.module.css

@@ -0,0 +1,34 @@
+.prompt {
+    display: grid;
+    gap: var(--padding-m);
+    padding: var(--padding-m);
+    background-color: var(--surface-1);
+    color: var(--text-2);
+    border: 1px solid var(--surface-5);
+    border-radius: var(--radii-m);
+
+    &:not(&[open]) {
+        display: none;
+    }
+
+    &[open]::backdrop {
+        background-color: color(from var(--surface-1) xyz x y z / .3);
+        backdrop-filter: blur(.25em);
+    }
+
+    & > form {
+        display: contents;
+
+        & > header > .title {
+            font-size: var(--text-l);
+            color: var(--text-1);
+        }
+
+        & > footer {
+            display: flex;
+            flex-flow: row;
+            justify-content: end;
+            gap: var(--padding-m);
+        }
+    }
+}

src/components/prompt.tsx

@@ -0,0 +1,75 @@
+import { createEffect, createSignal, createUniqueId, JSX, onMount, ParentComponent, Show } from "solid-js";
+import css from './prompt.module.css';
+
+export interface PromptApi {
+    showModal(): Promise<FormData | undefined>;
+};
+
+class PromptCanceledError extends Error { }
+
+export const Prompt: ParentComponent<{ api: (api: PromptApi) => any, title?: string, description?: string | JSX.Element }> = (props) => {
+    const [dialog, setDialog] = createSignal<HTMLDialogElement>();
+    const [form, setForm] = createSignal<HTMLFormElement>();
+    const [resolvers, setResolvers] = createSignal<[(...args: any[]) => any, (...args: any[]) => any]>();
+    const submitId = createUniqueId();
+    const cancelId = createUniqueId();
+
+    const api = {
+        async showModal(): Promise<FormData | undefined> {
+            const { promise, resolve, reject } = Promise.withResolvers();
+
+            setResolvers([resolve, reject]);
+
+            dialog()!.showModal();
+
+            try {
+                await promise;
+
+                return new FormData(form());
+            }
+            catch (e) {
+                if (!(e instanceof PromptCanceledError)) {
+                    throw e;
+                }
+
+                dialog()!.close();
+                setResolvers(undefined);
+            }
+        },
+    };
+
+    const onSubmit = (e: SubmitEvent) => {
+        resolvers()?.[0]();
+    };
+
+    const onCancel = (e: Event) => {
+        resolvers()?.[1](new PromptCanceledError());
+    };
+
+    createEffect(() => {
+        props.api(api);
+    });
+
+    return <dialog class={css.prompt} ref={setDialog} onsubmit={onSubmit} onCancel={onCancel} onReset={onCancel}>
+        <form method="dialog" ref={setForm}>
+            <Show when={props.title || props.description}>
+                <header>
+                    <Show when={props.title}>{
+                        title => <b class={css.title}>{title()}</b>
+                    }</Show>
+
+                    <Show when={props.description}>{
+                        description => <p>{description()}</p>
+                    }</Show>
+                </header>
+            </Show>
+
+            <main>{props.children}</main>
+
+            <footer>
+                <button id={submitId} type="submit">Ok</button>
+                <button id={cancelId} type="reset">Cancel</button>
+            </footer>
+        </form>
+    </dialog>;
+};