Upload 19 files

static/app.js

@@ -14,7 +14,9 @@ let termDataDisposable = null;
 let termResizeDisposable = null;
 let termCurrentZone = null; // tracks which zone the terminal is connected to
 let promptResolve = null;
-let isMobile = window.matchMedia("(max-width: 768px)").matches;
+let confirmResolve = null;
+const mobileQuery = "(max-width: 768px), (pointer: coarse)";
+let isMobile = window.matchMedia(mobileQuery).matches;
 let currentMobileTab = "files";
 
 // ── Init ──────────────────────────────────────
@@ -24,10 +26,11 @@ document.addEventListener("DOMContentLoaded", () => {
     initResizers();
     bindEvents();
 
-    // Track mobile state on resize
-    const mq = window.matchMedia("(max-width: 768px)");
+    // Track mobile state on resize / input change
+    const mq = window.matchMedia(mobileQuery);
     mq.addEventListener("change", (e) => {
         isMobile = e.matches;
+        document.body.classList.toggle("is-mobile", isMobile);
         if (!isMobile) {
             // Exiting mobile: reset panel visibility
             toggleSidebar(false);
@@ -40,6 +43,9 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
 
+    // Set initial class
+    document.body.classList.toggle("is-mobile", isMobile);
+
     // Apply initial mobile tab if on mobile
     if (isMobile && currentZone) {
         switchMobileTab("files");
@@ -82,7 +88,7 @@ async function loadZones() {
         list.innerHTML = `<li class="empty-hint" style="color:var(--text-3);font-size:12px;padding:8px 10px;cursor:default;opacity:0.6">No zones yet</li>`;
     } else {
         list.innerHTML = zones.map(z => `
-            <li data-zone="${escapeAttr(z.name)}" class="${currentZone === z.name ? 'active' : ''}" onclick="openZone('${escapeAttr(z.name)}')">
+            <li data-zone="${escapeAttr(z.name)}" class="${currentZone === z.name ? 'active' : ''}">
                 <span class="zone-icon"><i data-lucide="box"></i></span>
                 <span class="zone-name">${escapeHtml(z.name)}</span>
             </li>
@@ -97,7 +103,7 @@ async function loadZones() {
             welcomeZones.innerHTML = `<p class="welcome-hint">No zones yet — create one to get started</p>`;
         } else {
             welcomeZones.innerHTML = `<div class="zone-grid">${zones.map(z => `
-                <button class="zone-card" onclick="openZone('${escapeAttr(z.name)}')">
+                <button class="zone-card" data-zone="${escapeAttr(z.name)}">
                     <i data-lucide="box"></i>
                     <span>${escapeHtml(z.name)}</span>
                 </button>
@@ -163,7 +169,8 @@ async function createZone() {
 
 async function deleteZone() {
     if (!currentZone) return;
-    if (!confirm(`Delete zone "${currentZone}"? All data will be lost!`)) return;
+    const ok = await customConfirm(`Delete zone "${currentZone}"?`, "All data will be lost!");
+    if (!ok) return;
     try {
         await api(`/api/zones/${currentZone}`, { method: "DELETE" });
         disconnectTerminal();
@@ -187,12 +194,12 @@ async function loadFiles() {
 
 function renderBreadcrumb() {
     const parts = currentPath ? currentPath.split("/").filter(Boolean) : [];
-    let html = `<span onclick="navigateTo('')">~</span>`;
+    let html = `<span data-nav="">~</span>`;
     let path = "";
     for (const part of parts) {
         path += (path ? "/" : "") + part;
         html += `<span class="sep">/</span>`;
-        html += `<span onclick="navigateTo('${escapeAttr(path)}')">${escapeHtml(part)}</span>`;
+        html += `<span data-nav="${escapeAttr(path)}">${escapeHtml(part)}</span>`;
     }
     // Update both desktop and mobile breadcrumbs
     document.getElementById("breadcrumb").innerHTML = html;
@@ -209,7 +216,7 @@ function renderFiles(files) {
     }
     let html = "";
     if (currentPath) {
-        html += `<div class="file-item" onclick="navigateUp()">
+        html += `<div class="file-item" data-action="up">
             <span class="fi-icon fi-icon-back"><i data-lucide="corner-left-up"></i></span>
             <span class="fi-name">..</span>
         </div>`;
@@ -223,16 +230,16 @@ function renderFiles(files) {
         const iconClass = f.is_dir ? "fi-icon-folder" : fileIconClass(f.name);
         const iconName = f.is_dir ? "folder" : "file-text";
         const size = f.is_dir ? "" : formatSize(f.size);
-        const action = f.is_dir ? `navigateTo('${escapeAttr(relPath)}')` : `editFile('${escapeAttr(relPath)}')`;
+        const action = f.is_dir ? "navigate" : "edit";
 
-        html += `<div class="file-item" onclick="${action}">
+        html += `<div class="file-item" data-action="${action}" data-path="${escapeAttr(relPath)}">
             <span class="fi-icon ${iconClass}"><i data-lucide="${iconName}"></i></span>
             <span class="fi-name">${escapeHtml(f.name)}</span>
             <span class="fi-size">${size}</span>
             <span class="fi-actions">
-                ${!f.is_dir ? `<button title="Download" onclick="event.stopPropagation();downloadFile('${escapeAttr(relPath)}')"><i data-lucide="download"></i></button>` : ''}
-                <button title="Rename" onclick="event.stopPropagation();renameFile('${escapeAttr(relPath)}','${escapeAttr(f.name)}')"><i data-lucide="pencil"></i></button>
-                <button class="fi-del" title="Delete" onclick="event.stopPropagation();deleteFile('${escapeAttr(relPath)}')"><i data-lucide="trash-2"></i></button>
+                ${!f.is_dir ? `<button data-action="download" data-path="${escapeAttr(relPath)}" title="Download"><i data-lucide="download"></i></button>` : ''}
+                <button data-action="rename" data-path="${escapeAttr(relPath)}" data-name="${escapeAttr(f.name)}" title="Rename"><i data-lucide="pencil"></i></button>
+                <button data-action="delete" data-path="${escapeAttr(relPath)}" class="fi-del" title="Delete"><i data-lucide="trash-2"></i></button>
             </span>
         </div>`;
     }
@@ -354,7 +361,8 @@ function downloadFile(relPath) {
 }
 
 async function deleteFile(relPath) {
-    if (!confirm(`Delete "${relPath}"?`)) return;
+    const ok = await customConfirm(`Delete "${relPath}"?`);
+    if (!ok) return;
     try {
         await api(`/api/zones/${currentZone}/files?path=${encodeURIComponent(relPath)}`, { method: "DELETE" });
         toast("Deleted", "info");
@@ -583,7 +591,7 @@ function initResizers() {
     }
 }
 
-// ── Modal / Prompt ───────────────────────────
+// ── Modal / Prompt / Confirm ─────────────────
 function showModal(id) {
     document.getElementById(id).classList.remove("hidden");
     lucide.createIcons({ nodes: [document.getElementById(id)] });
@@ -603,6 +611,20 @@ function promptUser(title, defaultValue) {
     });
 }
 
+function customConfirm(title, message) {
+    return new Promise((resolve) => {
+        document.getElementById("confirm-title").textContent = title || "Confirm";
+        document.getElementById("confirm-message").textContent = message || title || "Are you sure?";
+        showModal("modal-confirm");
+        confirmResolve = resolve;
+    });
+}
+
+function resolveConfirm(value) {
+    closeModal("modal-confirm");
+    if (confirmResolve) { confirmResolve(value); confirmResolve = null; }
+}
+
 // ── Port Management ──────────────────────────
 async function loadPorts() {
     if (!currentZone) return;
@@ -632,9 +654,9 @@ function renderPorts(ports) {
             <span class="pi-port">:${p.port}</span>
             <span class="pi-label">${escapeHtml(p.label)}</span>
             <span class="pi-actions">
-                <button title="Open in new tab" onclick="openPort(${p.port})"><i data-lucide="external-link"></i></button>
-                <button title="Copy URL" onclick="copyPortUrl(${p.port})"><i data-lucide="copy"></i></button>
-                <button class="pi-del" title="Remove" onclick="removePort(${p.port})"><i data-lucide="trash-2"></i></button>
+                <button title="Open in new tab" data-action="open-port" data-port="${p.port}"><i data-lucide="external-link"></i></button>
+                <button title="Copy URL" data-action="copy-port" data-port="${p.port}"><i data-lucide="copy"></i></button>
+                <button class="pi-del" title="Remove" data-action="remove-port" data-port="${p.port}"><i data-lucide="trash-2"></i></button>
             </span>
         </div>
     `).join("");
@@ -679,7 +701,8 @@ async function addPort() {
 }
 
 async function removePort(port) {
-    if (!confirm(`Remove port ${port} mapping?`)) return;
+    const ok = await customConfirm(`Remove port ${port} mapping?`);
+    if (!ok) return;
     try {
         await api(`/api/zones/${currentZone}/ports/${port}`, { method: "DELETE" });
         toast(`Port ${port} removed`, "info");
@@ -793,6 +816,7 @@ function switchMobileTab(tab) {
 
 // ── Event Binding ────────────────────────────
 function bindEvents() {
+    // ── Static button bindings ────────────────
     document.getElementById("btn-add-zone").addEventListener("click", () => showModal("modal-overlay"));
     document.getElementById("form-create-zone").addEventListener("submit", (e) => { e.preventDefault(); createZone(); });
     document.getElementById("btn-delete-zone").addEventListener("click", deleteZone);
@@ -802,21 +826,32 @@ function bindEvents() {
     document.getElementById("file-upload-input").addEventListener("change", handleUpload);
     document.getElementById("btn-save-file").addEventListener("click", saveFile);
     document.getElementById("btn-reconnect").addEventListener("click", reconnectTerminal);
+    document.getElementById("btn-hamburger").addEventListener("click", () => toggleSidebar(true));
+    document.getElementById("sidebar-backdrop").addEventListener("click", () => toggleSidebar(false));
+    document.getElementById("btn-close-sidebar").addEventListener("click", () => toggleSidebar(false));
+    document.getElementById("btn-create-zone-welcome").addEventListener("click", () => document.getElementById("btn-add-zone").click());
 
     // Port management
     document.getElementById("btn-toggle-ports").addEventListener("click", togglePortPanel);
     document.getElementById("btn-add-port").addEventListener("click", () => showModal("modal-add-port"));
     document.getElementById("form-add-port").addEventListener("submit", (e) => { e.preventDefault(); addPort(); });
 
-    // Close port panel when clicking outside
-    document.addEventListener("click", (e) => {
-        const panel = document.getElementById("port-panel");
-        const toggle = document.getElementById("btn-toggle-ports");
-        if (!panel.classList.contains("hidden") && !panel.contains(e.target) && !toggle.contains(e.target)) {
-            panel.classList.add("hidden");
-        }
+    // Modal close/cancel buttons
+    document.getElementById("btn-close-create-modal").addEventListener("click", () => closeModal("modal-overlay"));
+    document.getElementById("btn-cancel-create-modal").addEventListener("click", () => closeModal("modal-overlay"));
+    document.getElementById("btn-close-prompt").addEventListener("click", () => {
+        closeModal("modal-prompt");
+        if (promptResolve) { promptResolve(null); promptResolve = null; }
     });
+    document.getElementById("btn-close-port-modal").addEventListener("click", () => closeModal("modal-add-port"));
+    document.getElementById("btn-cancel-port-modal").addEventListener("click", () => closeModal("modal-add-port"));
 
+    // Confirm modal
+    document.getElementById("btn-close-confirm").addEventListener("click", () => resolveConfirm(false));
+    document.getElementById("btn-confirm-cancel").addEventListener("click", () => resolveConfirm(false));
+    document.getElementById("btn-confirm-ok").addEventListener("click", () => resolveConfirm(true));
+
+    // Prompt form
     document.getElementById("btn-cancel-prompt").addEventListener("click", () => {
         closeModal("modal-prompt");
         if (promptResolve) { promptResolve(null); promptResolve = null; }
@@ -828,6 +863,80 @@ function bindEvents() {
         if (promptResolve) { promptResolve(val); promptResolve = null; }
     });
 
+    // Close port panel when clicking outside
+    document.addEventListener("click", (e) => {
+        const panel = document.getElementById("port-panel");
+        const toggle = document.getElementById("btn-toggle-ports");
+        if (!panel.classList.contains("hidden") && !panel.contains(e.target) && !toggle.contains(e.target)) {
+            panel.classList.add("hidden");
+        }
+    });
+
+    // ── Event delegation: file list ───────────
+    document.getElementById("file-list").addEventListener("click", (e) => {
+        // Check action buttons first (download, rename, delete)
+        const actionBtn = e.target.closest(".fi-actions [data-action]");
+        if (actionBtn) {
+            e.stopPropagation();
+            const action = actionBtn.dataset.action;
+            const path = actionBtn.dataset.path;
+            if (action === "download") downloadFile(path);
+            else if (action === "rename") renameFile(path, actionBtn.dataset.name);
+            else if (action === "delete") deleteFile(path);
+            return;
+        }
+        // File item click (open/navigate/up)
+        const item = e.target.closest(".file-item[data-action]");
+        if (!item) return;
+        const action = item.dataset.action;
+        const path = item.dataset.path;
+        if (action === "navigate") navigateTo(path);
+        else if (action === "edit") editFile(path);
+        else if (action === "up") navigateUp();
+    });
+
+    // ── Event delegation: zone list (sidebar) ─
+    document.getElementById("zone-list").addEventListener("click", (e) => {
+        const li = e.target.closest("li[data-zone]");
+        if (li) openZone(li.dataset.zone);
+    });
+
+    // ── Event delegation: welcome zone cards ──
+    document.getElementById("welcome-zones").addEventListener("click", (e) => {
+        const card = e.target.closest("[data-zone]");
+        if (card) openZone(card.dataset.zone);
+    });
+
+    // ── Event delegation: breadcrumbs ─────────
+    document.getElementById("breadcrumb").addEventListener("click", (e) => {
+        const span = e.target.closest("[data-nav]");
+        if (span) navigateTo(span.dataset.nav);
+    });
+    const mbc = document.getElementById("breadcrumb-mobile");
+    if (mbc) {
+        mbc.addEventListener("click", (e) => {
+            const span = e.target.closest("[data-nav]");
+            if (span) navigateTo(span.dataset.nav);
+        });
+    }
+
+    // ── Event delegation: mobile tabs ─────────
+    document.getElementById("mobile-tabs").addEventListener("click", (e) => {
+        const tab = e.target.closest("[data-tab]");
+        if (tab) switchMobileTab(tab.dataset.tab);
+    });
+
+    // ── Event delegation: port list ───────────
+    document.getElementById("port-list").addEventListener("click", (e) => {
+        const btn = e.target.closest("[data-action]");
+        if (!btn) return;
+        const port = parseInt(btn.dataset.port);
+        if (btn.dataset.action === "open-port") openPort(port);
+        else if (btn.dataset.action === "copy-port") copyPortUrl(port);
+        else if (btn.dataset.action === "remove-port") removePort(port);
+    });
+
+    // ── Keyboard shortcuts ────────────────────
     document.addEventListener("keydown", (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key === "s") {
             e.preventDefault();

static/index.html

@@ -39,14 +39,14 @@
 <body>
     <div id="app">
         <!-- Sidebar Backdrop (mobile) -->
-        <div id="sidebar-backdrop" class="sidebar-backdrop" onclick="toggleSidebar(false)"></div>
+        <div id="sidebar-backdrop" class="sidebar-backdrop"></div>
 
         <!-- Sidebar -->
         <aside id="sidebar">
             <div class="sidebar-brand">
                 <div class="brand-icon"><i data-lucide="layout-dashboard"></i></div>
                 <span class="brand-text">HugPanel</span>
-                <button id="btn-close-sidebar" class="icon-btn-sm sidebar-close-btn" onclick="toggleSidebar(false)"><i data-lucide="x"></i></button>
+                <button id="btn-close-sidebar" class="icon-btn-sm sidebar-close-btn"><i data-lucide="x"></i></button>
             </div>
 
             <nav class="sidebar-nav">
@@ -73,7 +73,7 @@
         <!-- Main -->
         <main id="main">
             <!-- Global hamburger (visible on mobile for both views) -->
-            <button id="btn-hamburger" class="icon-btn-sm hamburger-global" onclick="toggleSidebar(true)" title="Menu">
+            <button id="btn-hamburger" class="icon-btn-sm hamburger-global" title="Menu">
                 <i data-lucide="menu"></i>
             </button>
 
@@ -85,7 +85,7 @@
                     <h1>HugPanel</h1>
                     <p>Multi-zone workspace with file manager, code editor &amp; terminal.</p>
                     <div id="welcome-zones" class="welcome-zones"></div>
-                    <button class="btn btn-accent btn-lg" onclick="document.getElementById('btn-add-zone').click()">
+                    <button id="btn-create-zone-welcome" class="btn btn-accent btn-lg">
                         <i data-lucide="plus"></i> Create Zone
                     </button>
                 </div>
@@ -169,15 +169,15 @@
 
                 <!-- Mobile Bottom Tab Bar -->
                 <nav id="mobile-tabs" class="mobile-tabs">
-                    <button class="mobile-tab active" data-tab="files" onclick="switchMobileTab('files')">
+                    <button class="mobile-tab active" data-tab="files">
                         <i data-lucide="folder"></i>
                         <span>Files</span>
                     </button>
-                    <button class="mobile-tab" data-tab="editor" onclick="switchMobileTab('editor')">
+                    <button class="mobile-tab" data-tab="editor">
                         <i data-lucide="code-2"></i>
                         <span>Editor</span>
                     </button>
-                    <button class="mobile-tab" data-tab="terminal" onclick="switchMobileTab('terminal')">
+                    <button class="mobile-tab" data-tab="terminal">
                         <i data-lucide="terminal-square"></i>
                         <span>Terminal</span>
                     </button>
@@ -194,7 +194,7 @@
         <div class="modal">
             <div class="modal-header">
                 <h3><i data-lucide="plus-circle"></i> Create Zone</h3>
-                <button class="icon-btn-sm" onclick="closeModal('modal-overlay')"><i data-lucide="x"></i></button>
+                <button class="icon-btn-sm" id="btn-close-create-modal"><i data-lucide="x"></i></button>
             </div>
             <form id="form-create-zone">
                 <div class="form-group">
@@ -207,7 +207,7 @@
                     <input type="text" id="input-zone-desc" placeholder="Short description...">
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-ghost" onclick="closeModal('modal-overlay')">Cancel</button>
+                    <button type="button" class="btn btn-ghost" id="btn-cancel-create-modal">Cancel</button>
                     <button type="submit" class="btn btn-accent"><i data-lucide="plus"></i> Create</button>
                 </div>
             </form>
@@ -219,7 +219,7 @@
         <div class="modal modal-sm">
             <div class="modal-header">
                 <h3 id="prompt-title">Enter name</h3>
-                <button class="icon-btn-sm" onclick="closeModal('modal-prompt');if(promptResolve){promptResolve(null);promptResolve=null}"><i data-lucide="x"></i></button>
+                <button class="icon-btn-sm" id="btn-close-prompt"><i data-lucide="x"></i></button>
             </div>
             <form id="form-prompt">
                 <div class="form-group">
@@ -245,12 +245,29 @@
         <div id="port-list" class="port-list"></div>
     </div>
 
+    <!-- Modal: Confirm -->
+    <div id="modal-confirm" class="modal-overlay hidden">
+        <div class="modal modal-sm">
+            <div class="modal-header">
+                <h3 id="confirm-title">Confirm</h3>
+                <button class="icon-btn-sm" id="btn-close-confirm"><i data-lucide="x"></i></button>
+            </div>
+            <div style="padding:16px">
+                <p id="confirm-message" style="font-size:14px;color:var(--text-2)"></p>
+            </div>
+            <div class="modal-footer" style="padding:0 16px 16px">
+                <button type="button" class="btn btn-ghost" id="btn-confirm-cancel">Cancel</button>
+                <button type="button" class="btn btn-danger" id="btn-confirm-ok">Delete</button>
+            </div>
+        </div>
+    </div>
+
     <!-- Modal: Add Port -->
     <div id="modal-add-port" class="modal-overlay hidden">
         <div class="modal modal-sm">
             <div class="modal-header">
                 <h3><i data-lucide="network"></i> Map Port</h3>
-                <button class="icon-btn-sm" onclick="closeModal('modal-add-port')"><i data-lucide="x"></i></button>
+                <button class="icon-btn-sm" id="btn-close-port-modal"><i data-lucide="x"></i></button>
             </div>
             <form id="form-add-port">
                 <div class="form-group">
@@ -263,7 +280,7 @@
                     <input type="text" id="input-port-label" placeholder="e.g. React Dev Server">
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-ghost" onclick="closeModal('modal-add-port')">Cancel</button>
+                    <button type="button" class="btn btn-ghost" id="btn-cancel-port-modal">Cancel</button>
                     <button type="submit" class="btn btn-accent"><i data-lucide="plus"></i> Map Port</button>
                 </div>
             </form>

static/style.css

@@ -224,6 +224,13 @@ body {
 
 .btn-ghost:hover { background: var(--bg-hover); color: var(--text); }
 
+.btn-danger {
+    background: var(--danger);
+    color: #fff;
+    border: none;
+}
+.btn-danger:hover { background: #dc2626; }
+
 .btn-lg { padding: 12px 24px; font-size: 14px; border-radius: var(--radius-lg); }
 .btn-lg svg { width: 16px; height: 16px; }
 
@@ -501,7 +508,7 @@ body {
 
 .file-item .fi-actions {
     display: flex; gap: 1px;
-    opacity: 0;
+    opacity: 0.4;
     transition: opacity var(--transition);
 }
 
@@ -907,8 +914,8 @@ body {
 .mobile-only { display: none !important; }
 .mobile-tabs { display: none; }
 
-/* ── Mobile Breakpoint ─────── */
-@media (max-width: 768px) {
+/* ── Mobile Breakpoint (width OR touch device) ── */
+@media (max-width: 768px), (pointer: coarse) {
     :root {
         --sidebar-w: 280px;
         --topbar-h: 48px;
@@ -1278,26 +1285,6 @@ body {
 
 .form-group input[type="number"]:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
 
-/* ── Touch optimizations ───── */
-@media (pointer: coarse) {
-    .file-item .fi-actions { opacity: 1; }
-
-    .file-item {
-        min-height: 48px;
-        -webkit-tap-highlight-color: transparent;
-    }
-
-    .zone-list li {
-        min-height: 44px;
-        -webkit-tap-highlight-color: transparent;
-    }
-
-    .icon-btn-sm {
-        min-width: 36px;
-        min-height: 36px;
-    }
-}
-
 /* Safe area for notch devices */
 @supports (padding: env(safe-area-inset-bottom)) {
     .mobile-tabs {