refactor: split monolithic app.js into modular frontend scripts

Break the ~1975-line app.js into 13 feature-focused classic <script> modules under static/js/, keeping app.js as a small bootstrap entry. Modules load in dependency order (core first, bootstrap last) sharing global scope, which avoids ES module/CORS issues under pywebview's file:// loading and requires no build step. index.html now loads the modules in order; the GUI static test was updated to concatenate all modules for content assertions.

Author: Masterain98

plexmuxy_gui/static/app.js

@@ -749,6 +749,19 @@ <h2 id="diagnostics-dialog-title" data-i18n="jobs.diagnostics.title">Job diagnos
   </dialog>
 
   <script src="./i18n.js"></script>
+  <script src="./js/core.js"></script>
+  <script src="./js/dom-utils.js"></script>
+  <script src="./js/custom-select.js"></script>
+  <script src="./js/theme.js"></script>
+  <script src="./js/locale.js"></script>
+  <script src="./js/navigation.js"></script>
+  <script src="./js/window.js"></script>
+  <script src="./js/settings.js"></script>
+  <script src="./js/plan.js"></script>
+  <script src="./js/results.js"></script>
+  <script src="./js/jobs.js"></script>
+  <script src="./js/diagnostics.js"></script>
+  <script src="./js/bindings.js"></script>
   <script src="./app.js"></script>
 </body>
 </html>

plexmuxy_gui/static/index.html

@@ -0,0 +1,74 @@
+function bindEvents() {
+  const bindings = [
+    ["window-minimize-btn", "click", minimizeWindow], ["window-maximize-btn", "click", toggleMaximizeWindow],
+    ["window-close-btn", "click", closeWindow], ["window-drag-region", "dblclick", toggleMaximizeWindow],
+    ["sidebar-toggle", "click", toggleSidebar], ["sidebar-scrim", "click", closeSidebar],
+    ["skip-link", "click", skipToMainContent],
+    ["alert-close-btn", "click", clearError],
+    ["choose-dir-btn", "click", chooseDirectory], ["open-config-btn", "click", openConfigLocation],
+    ["diagnostics-btn", "click", exportDiagnostics], ["save-settings-btn", "click", saveSettings],
+    ["save-environment-btn", "click", saveEnvironmentSettings], ["test-notification-btn", "click", testNotification],
+    ["plan-btn", "click", generatePlan], ["run-btn", "click", runMux], ["cancel-btn", "click", cancelJob],
+    ["plan-save-fab", "click", savePlanEdits],
+    ["refresh-jobs-btn", "click", loadJobs],
+    ["queue-toggle-btn", "click", toggleQueue], ["clear-font-cache-btn", "click", clearFontCache],
+    ["delete-all-jobs-btn", "click", deleteAllJobs],
+    ["diagnostics-export-btn", "click", exportDiagnosticsFromDialog],
+    ["diagnostics-copy-btn", "click", copyDiagnosticsFromDialog],
+    ["open-font-cache-btn", "click", () => callApi("open_font_cache_location")],
+    ["check-updates-btn", "click", checkUpdates],
+    ["input-dir", "input", (event) => { state.inputDir = event.target.value; clearReports(); }],
+    ["cleanup", "change", handleOverrideChange], ["extra-dir", "input", handleOverrideChange],
+    ["output-suffix", "input", handleOverrideChange], ["output-dir", "input", handleOverrideChange],
+    ["name-strategy", "change", handleOverrideChange], ["name-template", "input", handleOverrideChange],
+    ["overwrite", "change", handleOverrideChange], ["font-subset", "change", handleFontSubsetChange],
+    ["audio-filter-enabled", "change", handleOverrideChange],
+    ["audio-exclude-patterns", "input", handleOverrideChange], ["audio-keep-languages", "input", handleOverrideChange],
+    ["keep-default-audio", "change", handleOverrideChange], ["keep-unknown-audio", "change", handleOverrideChange],
+    ["allow-no-audio", "change", handleOverrideChange],
+    ["notifications-enabled", "change", handleEnvironmentChange],
+    ["font-cache-enabled", "change", handleEnvironmentChange], ["font-cache-max-size", "input", handleEnvironmentChange],
+    ["font-cache-max-age", "input", handleEnvironmentChange], ["updates-enabled", "change", handleEnvironmentChange],
+    ["plex-enabled", "change", handleEnvironmentChange], ["plex-server-url", "input", handleEnvironmentChange],
+    ["plex-section-id", "input", handleEnvironmentChange], ["plex-token-env", "input", handleEnvironmentChange],
+    ["plex-path-mappings", "input", handleEnvironmentChange],
+  ];
+  bindings.forEach(([id, eventName, handler]) => {
+    const element = $(id); const key = `bound${eventName}`;
+    if (element && !element.dataset[key]) { element.addEventListener(eventName, handler); element.dataset[key] = "true"; }
+  });
+  document.querySelectorAll(".theme-option").forEach((button) => {
+    if (button.classList.contains("language-option")) return;
+    if (!button.dataset.boundClick) { button.addEventListener("click", chooseTheme); button.dataset.boundClick = "true"; }
+  });
+  document.querySelectorAll(".language-option").forEach((button) => {
+    if (!button.dataset.boundClick) { button.addEventListener("click", chooseLocale); button.dataset.boundClick = "true"; }
+  });
+  document.querySelectorAll(".theme-menu").forEach((menu) => {
+    if (!menu.dataset.boundToggle) { menu.addEventListener("toggle", closeSiblingMenus); menu.dataset.boundToggle = "true"; }
+  });
+  document.querySelectorAll(".step[href^='#']").forEach((link) => {
+    if (!link.dataset.boundClick) { link.addEventListener("click", handleNavigationClick); link.dataset.boundClick = "true"; }
+  });
+  document.querySelectorAll(".dependency-browse").forEach((button) => {
+    if (!button.dataset.boundClick) { button.addEventListener("click", chooseDependency); button.dataset.boundClick = "true"; }
+  });
+  document.querySelectorAll(".dependency-auto-detect").forEach((button) => {
+    if (!button.dataset.boundClick) { button.addEventListener("click", autoDetectDependency); button.dataset.boundClick = "true"; }
+  });
+  document.querySelectorAll("[data-project-link]").forEach((button) => {
+    if (!button.dataset.boundClick) { button.addEventListener("click", openProjectLink); button.dataset.boundClick = "true"; }
+  });
+  const installUnrarButton = $("install-unrar-btn");
+  if (installUnrarButton && !installUnrarButton.dataset.boundClick) { installUnrarButton.addEventListener("click", installUnrarFromRarlab); installUnrarButton.dataset.boundClick = "true"; }
+  if (document.body && !document.body.dataset.boundResponsiveUi) {
+    window.addEventListener("resize", syncSidebarAccessibility);
+    window.addEventListener("plexmuxy:localechange", handleLocaleChange);
+    document.addEventListener("keydown", handleGlobalKeyDown);
+    document.addEventListener("pointerdown", handleOutsideSelectPointer);
+    window.addEventListener("hashchange", () => handleRoute(false));
+    document.body.dataset.boundResponsiveUi = "true";
+  }
+}
+
+

plexmuxy_gui/static/js/bindings.js

@@ -0,0 +1,20 @@
+const state = {
+  appInfo: null, config: null, inputDir: "", planReport: null,
+  runReport: null, loading: false, activeJobId: null, windowMaximized: false,
+  settingsDirty: false, environmentDirty: false, themeMode: "system", systemThemeQuery: null, navigationObserver: null,
+  navigationTarget: null, navigationScrollCleanup: null, localeMode: "system",
+  loadingMessageKey: "loading.initializing", lastJobStatus: null, currentView: "workspace",
+  routed: false, lastHandledRoute: "",
+  lastNonSubsetFontMode: "all",
+  planEdits: new Map(), jobs: [], queuePaused: false, activePreviewId: null,
+  planSaving: false,
+  planOrder: null, planData: null, collapsedCards: new Set(),
+  dependencyDrafts: { mkvmerge: null, ffmpeg: null, unrar: null }, dependencyBusy: {},
+  currentDiagnosticsJobId: null,
+};
+
+const THEME_STORAGE_KEY = "plexmuxy-theme";
+const selectSearch = new WeakMap();
+
+const $ = (id) => document.getElementById(id);
+const t = (key, variables = {}) => window.PlexMuxyI18n?.t(key, variables) ?? key;

plexmuxy_gui/static/js/core.js

@@ -0,0 +1,179 @@
+function closeSiblingMenus(event) {
+  if (!event.currentTarget.open) return;
+  document.querySelectorAll(".theme-menu[open]").forEach((menu) => {
+    if (menu !== event.currentTarget) menu.open = false;
+  });
+}
+
+
+
+function initializeCustomSelects() {
+  document.querySelectorAll("[data-custom-select]").forEach((root) => {
+    if (root.dataset.boundSelect) return;
+    const trigger = root.querySelector('[role="combobox"]');
+    const options = Array.from(root.querySelectorAll('[role="option"]'));
+    trigger.addEventListener("click", () => toggleCustomSelect(root, true));
+    trigger.addEventListener("keydown", (event) => handleSelectTriggerKey(event, root));
+    options.forEach((option) => {
+      option.addEventListener("click", () => selectCustomOption(root, option, true));
+      option.addEventListener("keydown", (event) => handleSelectOptionKey(event, root, option));
+    });
+    root.dataset.boundSelect = "true";
+    setCustomSelectValue(trigger.id, trigger.dataset.value || options[0]?.dataset.value || "", false);
+  });
+}
+
+
+
+function handleSelectTriggerKey(event, root) {
+  const options = customSelectOptions(root);
+  if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+    event.preventDefault();
+    openCustomSelect(root, false);
+    const selected = Math.max(0, options.findIndex((option) => option.getAttribute("aria-selected") === "true"));
+    const index = event.key === "End" ? options.length - 1 : event.key === "Home" ? 0 : event.key === "ArrowUp" ? Math.max(0, selected - 1) : Math.min(options.length - 1, selected + 1);
+    options[index]?.focus();
+    return;
+  }
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    toggleCustomSelect(root, true);
+    return;
+  }
+  if (event.key === "Escape") { closeCustomSelect(root, true); return; }
+  if (isTypeaheadKey(event)) {
+    const match = findTypeaheadMatch(root, event.key);
+    if (match) { event.preventDefault(); selectCustomOption(root, match, true, false); }
+  }
+}
+
+
+
+function handleSelectOptionKey(event, root, option) {
+  const options = customSelectOptions(root); const index = options.indexOf(option);
+  if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+    event.preventDefault();
+    const next = event.key === "Home" ? 0 : event.key === "End" ? options.length - 1 : event.key === "ArrowDown" ? (index + 1) % options.length : (index - 1 + options.length) % options.length;
+    options[next]?.focus();
+    return;
+  }
+  if (event.key === "Enter" || event.key === " ") { event.preventDefault(); selectCustomOption(root, option, true); return; }
+  if (event.key === "Escape") { event.preventDefault(); closeCustomSelect(root, true); return; }
+  if (event.key === "Tab") { closeCustomSelect(root, false); return; }
+  if (isTypeaheadKey(event)) {
+    const match = findTypeaheadMatch(root, event.key);
+    if (match) { event.preventDefault(); match.focus(); }
+  }
+}
+
+
+
+function isTypeaheadKey(event) {
+  return event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
+}
+
+
+
+function findTypeaheadMatch(root, character) {
+  const now = Date.now(); const previous = selectSearch.get(root);
+  const query = previous && now - previous.time < 700 ? previous.query + character : character;
+  selectSearch.set(root, { query, time: now });
+  const normalized = query.toLocaleLowerCase();
+  return customSelectOptions(root).find((option) => option.textContent.trim().toLocaleLowerCase().startsWith(normalized));
+}
+
+
+
+function customSelectOptions(root) { return Array.from(root.querySelectorAll('[role="option"]')); }
+
+
+
+function toggleCustomSelect(root, focusOption) {
+  const trigger = root.querySelector('[role="combobox"]');
+  if (trigger.disabled) return;
+  if (trigger.getAttribute("aria-expanded") === "true") closeCustomSelect(root, true);
+  else openCustomSelect(root, focusOption);
+}
+
+
+
+function openCustomSelect(root, focusOption = true) {
+  closeAllCustomSelects(root);
+  const trigger = root.querySelector('[role="combobox"]'); const listbox = root.querySelector('[role="listbox"]');
+  listbox.hidden = false;
+  trigger.setAttribute("aria-expanded", "true");
+  root.classList.add("is-open");
+  root.classList.remove("opens-up");
+  const triggerRect = trigger.getBoundingClientRect(); const listRect = listbox.getBoundingClientRect();
+  const below = window.innerHeight - triggerRect.bottom; const above = triggerRect.top;
+  if (below < listRect.height + 12 && above > below) root.classList.add("opens-up");
+  if (focusOption) {
+    const selected = customSelectOptions(root).find((option) => option.getAttribute("aria-selected") === "true");
+    (selected || customSelectOptions(root)[0])?.focus();
+  }
+}
+
+
+
+function closeCustomSelect(root, restoreFocus = false) {
+  const trigger = root.querySelector('[role="combobox"]'); const listbox = root.querySelector('[role="listbox"]');
+  if (!trigger || !listbox) return;
+  trigger.setAttribute("aria-expanded", "false");
+  listbox.hidden = true;
+  root.classList.remove("is-open", "opens-up");
+  if (restoreFocus) trigger.focus();
+}
+
+
+
+function closeAllCustomSelects(except = null) {
+  document.querySelectorAll("[data-custom-select].is-open").forEach((root) => { if (root !== except) closeCustomSelect(root, false); });
+}
+
+
+
+function handleOutsideSelectPointer(event) {
+  document.querySelectorAll("[data-custom-select].is-open").forEach((root) => { if (!root.contains(event.target)) closeCustomSelect(root, false); });
+}
+
+
+
+function selectCustomOption(root, option, emitChange, restoreFocus = true) {
+  if (isCustomOptionDisabled(option)) { closeCustomSelect(root, restoreFocus); return; }
+  const trigger = root.querySelector('[role="combobox"]');
+  setCustomSelectValue(trigger.id, option.dataset.value, emitChange);
+  closeCustomSelect(root, restoreFocus);
+}
+
+
+
+function isCustomOptionDisabled(option) {
+  return Boolean(option?.disabled) || option?.getAttribute("aria-disabled") === "true";
+}
+
+
+
+function setCustomSelectValue(id, value, emitChange = false) {
+  const trigger = $(id); if (!trigger) return;
+  const root = trigger.closest("[data-custom-select]");
+  const options = customSelectOptions(root);
+  const selected = options.find((option) => option.dataset.value === String(value)) || options[0];
+  if (!selected) return;
+  trigger.dataset.value = selected.dataset.value;
+  options.forEach((option) => option.setAttribute("aria-selected", String(option === selected)));
+  const label = trigger.querySelector("[data-select-label]");
+  if (label) label.textContent = selected.textContent.trim();
+  if (emitChange) trigger.dispatchEvent(new Event("change", { bubbles: true }));
+}
+
+
+
+function getCustomSelectValue(id) { return $(id)?.dataset.value || ""; }
+
+
+
+function syncCustomSelectLabels() {
+  document.querySelectorAll("[data-custom-select] [role=combobox]").forEach((trigger) => setCustomSelectValue(trigger.id, trigger.dataset.value, false));
+}
+
+

plexmuxy_gui/static/js/custom-select.js

@@ -0,0 +1,77 @@
+async function exportDiagnostics() {
+  clearError();
+  try {
+    const result = await callApi("export_diagnostics");
+    showToast(t("toast.diagnostics.body", { path: result.path }), "success", t("toast.diagnostics.title"), {
+      label: t("toast.diagnostics.open"),
+      callback: async () => { try { await callApi("open_diagnostics_location"); } catch (error) { showToast(error.message, "error", t("toast.environmentError.title")); } },
+    }, 12000);
+  } catch (error) { showError(error.message); }
+}
+
+
+
+async function previewJobDiagnostics(job) {
+  state.currentDiagnosticsJobId = job.id;
+  const dialog = $("diagnostics-dialog");
+  const content = $("diagnostics-content");
+  content.textContent = t("jobs.diagnostics.loading");
+  dialog.returnValue = "";
+  dialog.showModal();
+  try {
+    const result = await callApi("get_job_diagnostics", job.id);
+    content.textContent = result.text;
+  } catch (error) {
+    content.textContent = error.message;
+  }
+}
+
+
+
+async function exportDiagnosticsFromDialog() {
+  const jobId = state.currentDiagnosticsJobId;
+  const dialog = $("diagnostics-dialog");
+  if (!jobId) return;
+  dialog.querySelector("#diagnostics-export-btn").disabled = true;
+  try {
+    const result = await callApi("export_job_diagnostics", jobId);
+    showToast(t("toast.diagnostics.body", { path: result.path }), "success", t("toast.diagnostics.title"), {
+      label: t("toast.diagnostics.open"),
+      callback: async () => { try { await callApi("open_diagnostics_location"); } catch (error) { showToast(error.message, "error", t("toast.environmentError.title")); } },
+    }, 12000);
+  } catch (error) { showError(error.message); }
+  finally { dialog.querySelector("#diagnostics-export-btn").disabled = false; }
+}
+
+
+
+async function copyDiagnosticsFromDialog() {
+  const text = $("diagnostics-content").textContent;
+  try {
+    await navigator.clipboard.writeText(text);
+    showToast(t("jobs.diagnostics.copied"), "success", t("toast.diagnostics.title"));
+  } catch (error) {
+    showToast(error.message, "error", t("toast.environmentError.title"));
+  }
+}
+
+
+
+async function callApi(method, payload) {
+  if (!window.pywebview?.api?.[method]) throw new Error(t("error.bridgeUnavailable"));
+  const response = payload === undefined ? await window.pywebview.api[method]() : await window.pywebview.api[method](payload);
+  if (!response || response.ok !== true) throw new Error(response?.error || t("error.unknownApi"));
+  return response.data;
+}
+
+
+
+async function openProjectLink(event) {
+  const button = event.currentTarget;
+  button.disabled = true;
+  try { await callApi("open_project_link", button.dataset.projectLink); }
+  catch (error) { showToast(error.message, "error", t("toast.linkError.title")); }
+  finally { button.disabled = false; }
+}
+
+