Add host path browser to config page

2026-05-25 17:20:55 +02:00
parent ece4ce0d5e
commit aef3be9d2d
7 changed files with 318 additions and 6 deletions
@@ -243,6 +243,12 @@ CONFIG_HTML = r"""<!doctype html>
      color: var(--muted);
      font-size: 12px;
    }
+    .path-input {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) auto;
+      gap: 10px;
+      align-items: center;
+    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -297,6 +303,79 @@ CONFIG_HTML = r"""<!doctype html>
    .settings-main, .deps {
      width: 100%;
    }
+    .overlay[hidden] {
+      display: none !important;
+    }
+    .overlay {
+      position: fixed;
+      inset: 0;
+      z-index: 40;
+      display: grid;
+      place-items: center;
+      padding: 22px;
+      background: rgba(4, 3, 10, 0.78);
+      backdrop-filter: blur(10px);
+    }
+    .browser-modal {
+      width: min(100%, 860px);
+      max-height: min(84vh, 760px);
+      overflow: hidden;
+      border: 1px solid var(--line);
+      border-radius: 22px;
+      background: linear-gradient(180deg, rgba(29, 22, 47, 0.96), rgba(17, 13, 29, 0.98));
+      box-shadow: var(--shadow);
+      display: grid;
+      grid-template-rows: auto auto auto 1fr auto;
+      gap: 12px;
+      padding: 18px;
+    }
+    .browser-header,
+    .browser-actions,
+    .browser-footer {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+    .browser-path {
+      min-height: 42px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      background: rgba(10, 7, 18, 0.82);
+      color: var(--text);
+      padding: 10px 13px;
+      overflow-wrap: anywhere;
+    }
+    .browser-list {
+      overflow: auto;
+      border: 1px solid var(--line);
+      border-radius: 18px;
+      background: rgba(255, 255, 255, 0.03);
+      padding: 8px;
+      display: grid;
+      gap: 8px;
+      min-height: 220px;
+    }
+    .browser-entry {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      min-height: 44px;
+      padding: 0 14px;
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      background: rgba(255, 255, 255, 0.03);
+      color: var(--text);
+      text-align: left;
+    }
+    .browser-entry .muted {
+      font-size: 12px;
+    }
+    .browser-entry-name {
+      overflow-wrap: anywhere;
+    }
    @media (max-width: 900px) {
      .app { grid-template-columns: 1fr; }
      aside { border-right: 0; border-bottom: 1px solid var(--line); }
@@ -353,7 +432,10 @@ CONFIG_HTML = r"""<!doctype html>
          </div>
          <div class="stack">
            <label>Default folder
-              <input id="downloadDir" placeholder="/home/me/Downloads/Anime">
+              <div class="path-input">
+                <input id="downloadDir" placeholder="/home/me/Downloads/Anime">
+                <button class="ghost browse-path-btn" type="button" data-target="downloadDir" data-mode="dir">Browse</button>
+              </div>
            </label>
          </div>
          <div class="form-grid">
@@ -447,10 +529,16 @@ CONFIG_HTML = r"""<!doctype html>
              </select>
            </label>
            <label>Jellyfin TV library
-              <input id="jellyfinTvDir" placeholder="/srv/media/anime-tv">
+              <div class="path-input">
+                <input id="jellyfinTvDir" placeholder="/srv/media/anime-tv">
+                <button class="ghost browse-path-btn" type="button" data-target="jellyfinTvDir" data-mode="dir">Browse</button>
+              </div>
            </label>
            <label>Jellyfin movie library
-              <input id="jellyfinMovieDir" placeholder="/srv/media/anime-movies">
+              <div class="path-input">
+                <input id="jellyfinMovieDir" placeholder="/srv/media/anime-movies">
+                <button class="ghost browse-path-btn" type="button" data-target="jellyfinMovieDir" data-mode="dir">Browse</button>
+              </div>
            </label>
          </div>
          <div class="field-hint">TV entries move only after the show is marked `Finished` and at least one downloaded language covers the expected episode count. Movie entries move after they are downloaded. The manual trigger scans the current watchlist and moves anything already eligible.</div>
@@ -481,6 +569,32 @@ CONFIG_HTML = r"""<!doctype html>
    </main>
  </div>

+  <div class="overlay" id="pathBrowserOverlay" hidden>
+    <div class="browser-modal" role="dialog" aria-modal="true" aria-labelledby="pathBrowserTitle">
+      <div class="browser-header">
+        <div>
+          <h2 id="pathBrowserTitle">Choose path</h2>
+          <p class="muted" id="pathBrowserSubtitle">Browse folders on the host and select the destination path.</p>
+        </div>
+        <button class="ghost" id="pathBrowserCloseBtn" type="button" aria-label="Close path browser">&times;</button>
+      </div>
+      <div class="browser-path" id="pathBrowserCurrentPath"></div>
+      <div class="browser-actions">
+        <div class="inline-actions">
+          <button class="ghost" id="pathBrowserHomeBtn" type="button">Home</button>
+          <button class="ghost" id="pathBrowserUpBtn" type="button">Up</button>
+          <button class="ghost" id="pathBrowserRefreshBtn" type="button">Refresh</button>
+        </div>
+        <div class="muted" id="pathBrowserStatus"></div>
+      </div>
+      <div class="browser-list" id="pathBrowserList"></div>
+      <div class="browser-footer">
+        <button class="ghost" id="pathBrowserCancelBtn" type="button">Cancel</button>
+        <button class="primary" id="pathBrowserSelectBtn" type="button">Use this path</button>
+      </div>
+    </div>
+  </div>
+
  <script>
    const state = {
      config: {
@@ -498,12 +612,24 @@ CONFIG_HTML = r"""<!doctype html>
        jellyfin_movie_dir: "",
        discord_webhook_url: "",
        discord_webhook_events: []
+      },
+      pathBrowser: {
+        targetId: "",
+        mode: "dir",
+        path: "",
+        parent_path: "",
+        home_path: ""
      }
    };

    const $ = (id) => document.getElementById(id);
 """ + BROWSER_API_HELPER + r"""

+    const pathBrowserOverlay = $("pathBrowserOverlay");
+    const pathBrowserCurrentPath = $("pathBrowserCurrentPath");
+    const pathBrowserList = $("pathBrowserList");
+    const pathBrowserStatus = $("pathBrowserStatus");
+
    function setNotice(text) {
      $("notice").textContent = text || "";
    }
@@ -592,6 +718,94 @@ CONFIG_HTML = r"""<!doctype html>
      }
    }

+    function closePathBrowser() {
+      state.pathBrowser = {
+        targetId: "",
+        mode: "dir",
+        path: "",
+        parent_path: "",
+        home_path: ""
+      };
+      pathBrowserOverlay.hidden = true;
+      pathBrowserList.innerHTML = "";
+      pathBrowserStatus.textContent = "";
+    }
+
+    function renderPathBrowser(data) {
+      state.pathBrowser = {
+        ...state.pathBrowser,
+        ...data
+      };
+      pathBrowserCurrentPath.textContent = data.path || "";
+      pathBrowserStatus.textContent = "";
+      pathBrowserList.innerHTML = "";
+      if (!Array.isArray(data.entries) || !data.entries.length) {
+        const empty = document.createElement("div");
+        empty.className = "muted";
+        empty.textContent = "No entries found in this folder.";
+        pathBrowserList.appendChild(empty);
+        return;
+      }
+      for (const entry of data.entries) {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "browser-entry";
+        button.innerHTML = `
+          <span class="browser-entry-name"></span>
+          <span class="muted"></span>
+        `;
+        button.querySelector(".browser-entry-name").textContent = entry.name;
+        button.querySelector(".muted").textContent = entry.is_dir ? "Folder" : "File";
+        button.addEventListener("click", async () => {
+          if (entry.is_dir) {
+            await loadPathBrowser(entry.path);
+            return;
+          }
+          state.pathBrowser.path = entry.path;
+          pathBrowserCurrentPath.textContent = entry.path;
+        });
+        pathBrowserList.appendChild(button);
+      }
+    }
+
+    async function loadPathBrowser(path = "") {
+      try {
+        pathBrowserStatus.textContent = "Loading...";
+        const data = await api(`/api/fs/browse?path=${encodeURIComponent(path || state.pathBrowser.path || "")}&mode=${encodeURIComponent(state.pathBrowser.mode || "dir")}`);
+        renderPathBrowser(data);
+      } catch (error) {
+        pathBrowserStatus.textContent = error.message;
+      }
+    }
+
+    async function openPathBrowser(targetId, mode = "dir") {
+      state.pathBrowser = {
+        targetId,
+        mode,
+        path: $(targetId).value.trim() || "",
+        parent_path: "",
+        home_path: ""
+      };
+      pathBrowserOverlay.hidden = false;
+      await loadPathBrowser(state.pathBrowser.path);
+    }
+
+    async function browseParentPath() {
+      if (!state.pathBrowser.parent_path) return;
+      await loadPathBrowser(state.pathBrowser.parent_path);
+    }
+
+    async function browseHomePath() {
+      if (!state.pathBrowser.home_path) return;
+      await loadPathBrowser(state.pathBrowser.home_path);
+    }
+
+    function selectCurrentBrowserPath() {
+      if (!state.pathBrowser.targetId) return;
+      $(state.pathBrowser.targetId).value = state.pathBrowser.path || "";
+      closePathBrowser();
+    }
+
    async function loadDeps() {
      const data = await api("/api/dependencies");
      const el = $("deps");
@@ -616,6 +830,25 @@ CONFIG_HTML = r"""<!doctype html>
    $("saveConfigBtn").addEventListener("click", saveConfig);
    $("testWebhookBtn").addEventListener("click", testWebhook);
    $("runJellyfinSyncBtn").addEventListener("click", runJellyfinSync);
+    $("pathBrowserCloseBtn").addEventListener("click", closePathBrowser);
+    $("pathBrowserCancelBtn").addEventListener("click", closePathBrowser);
+    $("pathBrowserSelectBtn").addEventListener("click", selectCurrentBrowserPath);
+    $("pathBrowserUpBtn").addEventListener("click", browseParentPath);
+    $("pathBrowserHomeBtn").addEventListener("click", browseHomePath);
+    $("pathBrowserRefreshBtn").addEventListener("click", () => loadPathBrowser());
+    pathBrowserOverlay.addEventListener("click", (event) => {
+      if (event.target === pathBrowserOverlay) {
+        closePathBrowser();
+      }
+    });
+    window.addEventListener("keydown", (event) => {
+      if (event.key === "Escape" && !pathBrowserOverlay.hidden) {
+        closePathBrowser();
+      }
+    });
+    for (const button of document.querySelectorAll(".browse-path-btn")) {
+      button.addEventListener("click", () => openPathBrowser(button.dataset.target || "", button.dataset.mode || "dir"));
+    }

    (async function init() {
      try {