1 files changed, 58 insertions, 7 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js
index fb57a0f..4947f8c 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js
@@ -104,19 +104,47 @@ function FilesPanel({
     }
   }, [applyIndex, currentPath]);
 
-  const makeDirectory = useCallback(async () => {
+  // `null` while not creating one; a draft string while the field is open.
+  const [newDirName, setNewDirName] = useState(null);
+  const [creatingDir, setCreatingDir] = useState(false);
+
+  /**
+   * Create a folder in the directory being browsed.
+   *
+   * The name comes from a field in the toolbar rather than `window.prompt`,
+   * which **throws** in Electron — "prompt() is not supported" — and threw
+   * outside this function's try, so clicking the button did nothing at all:
+   * no folder, no error, nothing in the interface to react to. `confirm()` and
+   * `alert()` do work there and are used elsewhere; `prompt` is the one
+   * Chromium leaves to the embedder and Electron declines to implement.
+   *
+   * An inline field is better anyway — it can show the refusal next to the
+   * input instead of after the dialog has closed.
+   */
+  useEffect(() => { setNewDirName(null); }, [currentPath]);
+
+  const makeDirectory = useCallback(async (rawName) => {
     const transport = transportRef.current;
-    if (!transport || !transport.connected) return;
-    const name = prompt(t('group.mkdir_prompt'));
-    if (!name || !name.trim()) return;
+    const name = (rawName || '').trim();
+    if (!name) return;
+    if (!transport || !transport.connected) {
+      setError(t('group.mkdir_offline'));
+      return;
+    }
+    setCreatingDir(true);
     try {
-      await transport.createDirectory(currentPath, name.trim());
+      await transport.createDirectory(currentPath, name);
+      // `list_dirs` walks the filesystem rather than the index, so a folder
+      // with nothing in it is here on this very fetch.
       const indexMsg = await transport.fetchIndex();
       if (indexMsg.entries) setEntries(indexMsg.entries);
       if (indexMsg.dirs) setNodeDirs(indexMsg.dirs);
       if (indexMsg.roots) setNodeRoots(indexMsg.roots);
+      setNewDirName(null);
     } catch (err) {
       setError(err.message);
+    } finally {
+      setCreatingDir(false);
     }
   }, [currentPath]);
 
@@ -374,12 +402,35 @@ function FilesPanel({
                 width a breadcrumb trail needs. The name lives in the tooltip
                 and in aria-label, so it is not lost to anyone reading with
                 something other than their eyes. */''}
-          ${canCreateDir && html`
-          <button class="tb-btn tb-btn-icon" onClick=${makeDirectory}
+          ${canCreateDir && newDirName === null && html`
+          <button class="tb-btn tb-btn-icon" onClick=${() => setNewDirName('')}
             title=${t('group.mkdir')} aria-label=${t('group.mkdir')}>
             <${Icon} name="folder-plus" />
           </button>
           `}
+          ${canCreateDir && newDirName !== null && html`
+          <span class="tb-mkdir">
+            <input type="text" class="tb-mkdir-input" autofocus
+              value=${newDirName} disabled=${creatingDir}
+              placeholder=${t('group.mkdir_prompt')}
+              aria-label=${t('group.mkdir')}
+              onInput=${(e) => setNewDirName(e.target.value)}
+              onKeyDown=${(e) => {
+                if (e.key === 'Enter') makeDirectory(newDirName);
+                if (e.key === 'Escape') setNewDirName(null);
+              }} />
+            <button class="tb-btn tb-btn-icon" title=${t('group.mkdir')}
+              disabled=${creatingDir || !newDirName.trim()}
+              onClick=${() => makeDirectory(newDirName)}>
+              <${Icon} name="check" />
+            </button>
+            <button class="tb-btn tb-btn-icon" title=${t('settings.cancel')}
+              disabled=${creatingDir}
+              onClick=${() => setNewDirName(null)}>
+              <${Icon} name="close" />
+            </button>
+          </span>
+          `}
         </div>
 
         <div class="breadcrumbs">