add a vim-like command line under :

static/js/dev/live-reload.js

@@ -0,0 +1,22 @@
+// NOTE: The server never fulfills this request, it stalls forever.
+// Once the connection is closed, we try to connect with the server until we establish a successful
+// connection. Then we reload the page.
+
+let shouldReload = true;
+addEventListener("beforeunload", () => {
+    shouldReload = false;
+});
+
+await fetch("/dev/live-reload/stall").catch(async () => {
+    while (shouldReload) {
+        try {
+            let response = await fetch("/dev/live-reload/back-up");
+            if (response.status == 200) {
+                window.location.reload();
+                break;
+            }
+        } catch (e) {
+            await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+    }
+});

static/js/dev/picture-upload.js

@@ -1,10 +1,11 @@
+import { CommandLine } from "treehouse/command-line.js";
+
 class PictureUpload extends HTMLElement {
     constructor() {
         super();
     }
 
     connectedCallback() {
-        this.tabIndex = 0;
         this.gotoInit();
 
         this.preview = this.querySelector("img[name='preview']");
@@ -30,16 +31,17 @@ class PictureUpload extends HTMLElement {
     gotoInit() {
         this.setState("init");
         this.innerHTML = `
-            <div class="nothing-pasted">
+            <div class="nothing-pasted" tabindex="0">
                 paste or drop an image here to make a picture out of it
             </div>
         `;
+        this.querySelector(".nothing-pasted").focus();
     }
 
     async gotoHavePicture(imageType, imageFile) {
         this.setState("have-picture");
         this.innerHTML = `
-            <div class="have-picture">
+            <form name="upload" class="have-picture">
                 <img name="preview" class="pic" alt="preview">
                 <p>
                     <span name="preview-width"></span> × <span name="preview-height"></span> px (<span name="file-size"></span>)
@@ -57,19 +59,20 @@ class PictureUpload extends HTMLElement {
                     </select>
                 </p>
 
-                <button name="upload">upload</button>
+                <button type="submit" name="upload">upload</button>
             </div>
         `;
 
+        let uploadForm = this.querySelector("form[name='upload']");
         let preview = this.querySelector("img[name='preview']");
         let previewWidth = this.querySelector("[name='preview-width']");
         let previewHeight = this.querySelector("[name='preview-height']");
         let fileSize = this.querySelector("[name='file-size']");
         let label = this.querySelector("[name='label']");
         let compression = this.querySelector("[name='compression']");
-        let upload = this.querySelector("button[name='upload']");
 
         fileSize.textContent = formatSizeSI(imageFile.size);
+        label.focus();
 
         let url = URL.createObjectURL(imageFile);
         preview.src = url;
@@ -80,7 +83,9 @@ class PictureUpload extends HTMLElement {
             previewHeight.textContent = bitmap.height.toString();
         });
 
-        upload.addEventListener("click", async () => {
+        uploadForm.addEventListener("submit", async (event) => {
+            event.preventDefault();
+
             let params = new URLSearchParams({
                 label: label.value,
                 format: imageType,
@@ -147,3 +152,21 @@ function formatSizeSI(bytes) {
         unitDisplay: "narrow",
     }).format(bytes);
 }
+
+if (TREEHOUSE_DEV) {
+    CommandLine.registerCommand({
+        aliases: ["addpic"],
+        description: "add a picture interactively and copy its ulid",
+        run() {
+            let dialog = document.body.appendChild(document.createElement("dialog"));
+            dialog.addEventListener("keydown", (event) => {
+                if (event.key == "Escape") dialog.close();
+            });
+            dialog.addEventListener("close", () => {
+                dialog.remove();
+            });
+            dialog.appendChild(new PictureUpload());
+            dialog.show();
+        },
+    });
+}