Rework welcome screen open options

fonsp · Oct 3, 2023 · 72c0fbc · 72c0fbc
1 parent 5b0f7ba
commit 72c0fbc
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 78 deletions.
diff --git a/frontend/components/DesktopInterface.js b/frontend/components/DesktopInterface.js
@@ -0,0 +1,6 @@
+export const open_from_path = () => {
+    window.plutoDesktop?.fileSystem.openNotebook("path")
+}
+export const open_from_url = (/** @type string */ url) => {
+    window.plutoDesktop?.fileSystem.openNotebook("url", url)
+}
diff --git a/frontend/components/FilePicker.js b/frontend/components/FilePicker.js
@@ -47,24 +47,17 @@ const set_cm_value = (/** @type{EditorView} */ cm, /** @type {string} */ value,
     }
 }
 
-const is_desktop = !!window.plutoDesktop
-
-if (is_desktop) {
-    console.log("Running in Desktop Environment! Found following properties/methods:", window.plutoDesktop)
-}
-
 /**
  * @param {{
  *  value: String,
  *  suggest_new_file: {base: String},
  *  button_label: String,
  *  placeholder: String,
  *  on_submit: (new_path: String) => Promise<void>,
- *  on_desktop_submit?: (loc?: string) => Promise<void>,
  *  client: import("../common/PlutoConnection.js").PlutoConnection,
  * }} props
  */
-export const FilePicker = ({ value, suggest_new_file, button_label, placeholder, on_submit, on_desktop_submit, client }) => {
+export const FilePicker = ({ value, suggest_new_file, button_label, placeholder, on_submit, client, force_on_blur = true }) => {
     const [is_button_disabled, set_is_button_disabled] = useState(true)
     const forced_value = useRef("")
     /** @type {import("../imports/Preact.js").Ref<HTMLElement>} */
@@ -87,18 +80,9 @@ export const FilePicker = ({ value, suggest_new_file, button_label, placeholder,
     const onSubmit = () => {
         const current_cm = cm.current
         if (current_cm == null) return
-        if (!is_desktop) {
-            const my_val = current_cm.state.doc.toString()
-            if (my_val === forced_value.current) {
-                suggest_not_tmp()
-                return true
-            }
-        }
         run(async () => {
             try {
-                if (is_desktop && on_desktop_submit) {
-                    await on_desktop_submit()
-                } else await on_submit(current_cm.state.doc.toString())
+                await on_submit(current_cm.state.doc.toString())
                 current_cm.dom.blur()
             } catch (error) {
                 set_cm_value(current_cm, forced_value.current, true)
@@ -141,7 +125,7 @@ export const FilePicker = ({ value, suggest_new_file, button_label, placeholder,
                         },
                         blur: (event, cm) => {
                             setTimeout(() => {
-                                if (!cm.hasFocus) {
+                                if (!cm.hasFocus && force_on_blur) {
                                     set_cm_value(cm, forced_value.current, true)
                                 }
                             }, 200)
@@ -252,7 +236,7 @@ export const FilePicker = ({ value, suggest_new_file, button_label, placeholder,
         })
         const current_cm = cm.current
 
-        if (!is_desktop) base.current.insertBefore(current_cm.dom, base.current.firstElementChild)
+        base.current.insertBefore(current_cm.dom, base.current.firstElementChild)
         // window.addEventListener("resize", () => {
         //     if (!cm.current.hasFocus()) {
         //         deselect(cm.current)
@@ -268,16 +252,11 @@ export const FilePicker = ({ value, suggest_new_file, button_label, placeholder,
         }
     })
 
-    return is_desktop
-        ? html`<div class="desktop_picker_group" ref=${base}>
-              <span title=${value}>${value.replace(/^.*[\\\/]/, "")}</span>
-              <button onClick=${onSubmit}>${button_label}</button>
-          </div>`
-        : html`
-              <pluto-filepicker ref=${base}>
-                  <button onClick=${onSubmit} disabled=${is_button_disabled}>${button_label}</button>
-              </pluto-filepicker>
-          `
+    return html`
+        <pluto-filepicker ref=${base}>
+            <button onClick=${onSubmit} disabled=${is_button_disabled}>${button_label}</button>
+        </pluto-filepicker>
+    `
 }
 
 const pathhints =

diff --git a/frontend/components/welcome/Open.js b/frontend/components/welcome/Open.js
@@ -1,10 +1,12 @@
 import _ from "../../imports/lodash.js"
-import { html } from "../../imports/Preact.js"
+import { html, useState } from "../../imports/Preact.js"
 
 import { FilePicker } from "../FilePicker.js"
 import { PasteHandler } from "../PasteHandler.js"
 import { guess_notebook_location } from "../../common/NotebookLocationFromURL.js"
 
+import * as desktop from "../DesktopInterface.js"
+
 /**
  * @param {{
  *  client: import("../../common/PlutoConnection.js").PlutoConnection?,
@@ -28,43 +30,52 @@ export const Open = ({ client, connected, CustomPicker, show_samples, on_start_n
         }
     }
 
-    const desktop_on_open_path = async (_p) => {
-        window.plutoDesktop?.fileSystem.openNotebook("path")
-    }
-
-    const desktop_on_open_url = async (url) => {
-        window.plutoDesktop?.fileSystem.openNotebook("url", url)
-    }
-
     const picker = CustomPicker ?? {
         text: "Open a notebook",
         placeholder: "Enter path or URL...",
     }
 
+    // may be passed to FilePicker to disable autocomplete by spoofing an autocompletion client
+    const dummy_client = {
+        send: (_) => {
+            return {
+                then: (_) => {},
+            }
+        },
+    }
+
     return html`<${PasteHandler} on_start_navigation=${on_start_navigation} />
         <h2>${picker.text}</h2>
         <div id="new" class=${!!window.plutoDesktop ? "desktop_opener" : ""}>
-            <${FilePicker}
-                key=${picker.placeholder}
-                client=${client}
-                value=""
-                on_submit=${on_open_path}
-                on_desktop_submit=${desktop_on_open_path}
-                button_label=${window.plutoDesktop ? "Open File" : "Open"}
-                placeholder=${picker.placeholder}
-            />
-            ${window.plutoDesktop &&
-            html`<${FilePicker}
-                key=${picker.placeholder}
-                client=${client}
-                value=""
-                on_desktop_submit=${() => {
-                    console.log("TODO: implement prompt or input component")
-                    desktop_on_open_url(prompt("Enter notebook URL"))
-                }}
-                button_label="Open from URL"
-                placeholder=${picker.placeholder}
-            />`}
+            ${window.plutoDesktop
+                ? html`
+                      <div class="desktop_picker_group">
+                          <button onClick=${desktop.open_from_path}>Open File</button>
+                          <div class="option_splitter">— OR —</div>
+                          <div>
+                              <${FilePicker}
+                                  key=${picker.placeholder}
+                                  client=${client}
+                                  value=""
+                                  on_submit=${desktop.open_from_url}
+                                  button_label=${"Open from URL"}
+                                  placeholder=${"Enter a URL..."}
+                                  client=${dummy_client}
+                                  force_on_blur=${false}
+                              />
+                          </div>
+                      </div>
+                  `
+                : html`
+                      <${FilePicker}
+                          key=${picker.placeholder}
+                          client=${client}
+                          value=""
+                          on_submit=${on_open_path}
+                          button_label=${window.plutoDesktop ? "Open File" : "Open"}
+                          placeholder=${picker.placeholder}
+                      />
+                  `}
         </div>`
 }
 

diff --git a/frontend/index.css b/frontend/index.css
@@ -131,21 +131,25 @@ pluto-filepicker button,
 
 .desktop_picker_group {
     flex-grow: 1;
-    display: flex;
+    /* display: flex; */
     padding: 5px;
 }
 
 .desktop_picker_group > button {
     cursor: pointer;
-    flex-grow: 1;
     padding: 8px;
+    width: 100%;
 }
 
-.desktop_picker_group > button.full_width {
-    width: 100%;
+.desktop_picker_group > .option_splitter {
+    color: gray;
+    font-style: italic;
+    text-align: center;
+    margin: 15px 0;
+    font-size: 10pt;
 }
 
-pluto-filepicker button {
+#new pluto-filepicker button {
     cursor: pointer;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;

diff --git a/frontend/welcome.css b/frontend/welcome.css
@@ -91,19 +91,6 @@ section#open {
     /* border: 0.3rem solid #d6e0d8; */
 }
 
-#new.desktop_opener {
-    display: flex;
-    flex-direction: row;
-    align-content: center;
-    justify-content: space-around;
-    box-shadow: none;
-    position: relative;
-}
-
-#new.desktop_opener .desktop_picker {
-    width: 100%;
-}
-
 section {
     display: flex; /* overflow: hidden; */ /* place-items: center; */ /* margin: 0rem 0rem; */