Upload 15 files

static/app.js

@@ -75,18 +75,36 @@ function toast(message, type = "info") {
 // ── Zone Management ──────────────────────────
 async function loadZones() {
     const zones = await api("/api/zones");
+
+    // Sidebar zone list
     const list = document.getElementById("zone-list");
     if (zones.length === 0) {
         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>`;
-        return;
+    } else {
+        list.innerHTML = zones.map(z => `
+            <li data-zone="${escapeAttr(z.name)}" class="${currentZone === z.name ? 'active' : ''}" onclick="openZone('${escapeAttr(z.name)}')">
+                <span class="zone-icon"><i data-lucide="box"></i></span>
+                <span class="zone-name">${escapeHtml(z.name)}</span>
+            </li>
+        `).join("");
+        lucide.createIcons({ nodes: [list] });
+    }
+
+    // Welcome page zone cards (so users can pick zone without sidebar)
+    const welcomeZones = document.getElementById("welcome-zones");
+    if (welcomeZones) {
+        if (zones.length === 0) {
+            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)}')">
+                    <i data-lucide="box"></i>
+                    <span>${escapeHtml(z.name)}</span>
+                </button>
+            `).join("")}</div>`;
+            lucide.createIcons({ nodes: [welcomeZones] });
+        }
     }
-    list.innerHTML = zones.map(z => `
-        <li data-zone="${escapeAttr(z.name)}" class="${currentZone === z.name ? 'active' : ''}" onclick="openZone('${escapeAttr(z.name)}')">
-            <span class="zone-icon"><i data-lucide="box"></i></span>
-            <span class="zone-name">${escapeHtml(z.name)}</span>
-        </li>
-    `).join("");
-    lucide.createIcons({ nodes: [list] });
 }
 
 async function openZone(name) {
@@ -100,7 +118,7 @@ async function openZone(name) {
 
     // Reset editor
     const editorContainer = document.getElementById("editor-container");
-    editorContainer.innerHTML = `<div class="editor-empty"><i data-lucide="mouse-pointer-click"></i><p>${isMobile ? 'Tap a file to open' : 'Double-click a file to open'}</p></div>`;
+    editorContainer.innerHTML = `<div class="editor-empty"><i data-lucide="mouse-pointer-click"></i><p>Tap a file to open</p></div>`;
     document.getElementById("editor-tabs").innerHTML = `<span class="tab-placeholder"><i data-lucide="code-2"></i> No file open</span>`;
     lucide.createIcons({ nodes: [editorContainer, document.getElementById("editor-tabs")] });
     cmEditor = null;
@@ -191,7 +209,7 @@ function renderFiles(files) {
     }
     let html = "";
     if (currentPath) {
-        html += `<div class="file-item" ondblclick="navigateUp()" onclick="if(isMobile)navigateUp()">
+        html += `<div class="file-item" onclick="navigateUp()">
             <span class="fi-icon fi-icon-back"><i data-lucide="corner-left-up"></i></span>
             <span class="fi-name">..</span>
         </div>`;
@@ -205,10 +223,9 @@ 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 dblAction = f.is_dir ? `navigateTo('${escapeAttr(relPath)}')` : `editFile('${escapeAttr(relPath)}')`;
-        const tapAction = f.is_dir ? `navigateTo('${escapeAttr(relPath)}')` : `editFile('${escapeAttr(relPath)}')`;
+        const action = f.is_dir ? `navigateTo('${escapeAttr(relPath)}')` : `editFile('${escapeAttr(relPath)}')`;
 
-        html += `<div class="file-item" ondblclick="${dblAction}" onclick="if(isMobile){${tapAction}}">
+        html += `<div class="file-item" onclick="${action}">
             <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>
@@ -724,12 +741,15 @@ function fileIconClass(name) {
 function toggleSidebar(open) {
     const sidebar = document.getElementById("sidebar");
     const backdrop = document.getElementById("sidebar-backdrop");
+    const hamburger = document.getElementById("btn-hamburger");
     if (open) {
         sidebar.classList.add("open");
         backdrop.classList.add("open");
+        if (hamburger) hamburger.style.display = "none";
     } else {
         sidebar.classList.remove("open");
         backdrop.classList.remove("open");
+        if (hamburger && isMobile) hamburger.style.display = "";
     }
 }
 

static/index.html

@@ -72,6 +72,11 @@
 
         <!-- 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">
+                <i data-lucide="menu"></i>
+            </button>
+
             <!-- Welcome -->
             <div id="welcome" class="view active">
                 <div class="welcome-hero">
@@ -79,6 +84,7 @@
                     <div class="welcome-icon"><i data-lucide="server"></i></div>
                     <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()">
                         <i data-lucide="plus"></i> Create Zone
                     </button>
@@ -89,9 +95,6 @@
             <div id="workspace" class="view">
                 <div class="topbar">
                     <div class="topbar-left">
-                        <button id="btn-hamburger" class="icon-btn-sm hamburger-btn" onclick="toggleSidebar(true)" title="Menu">
-                            <i data-lucide="menu"></i>
-                        </button>
                         <span class="zone-indicator" id="zone-badge">
                             <i data-lucide="box"></i>
                             <span id="zone-title"></span>
@@ -145,7 +148,7 @@
                             <div id="editor-container" class="editor-container">
                                 <div class="editor-empty">
                                     <i data-lucide="mouse-pointer-click"></i>
-                                    <p>Double-click a file to open</p>
+                                    <p>Tap a file to open</p>
                                 </div>
                             </div>
                         </div>

static/style.css

@@ -284,6 +284,64 @@ body {
     text-align: center;
 }
 
+/* ── Welcome Zone Grid ─────── */
+.welcome-zones {
+    max-width: 480px;
+    width: 100%;
+    padding: 0 16px;
+}
+
+.welcome-hint {
+    color: var(--text-3);
+    font-size: 13px;
+    text-align: center;
+}
+
+.zone-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    justify-content: center;
+}
+
+.zone-card {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 18px;
+    background: var(--bg-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    color: var(--text);
+    font-size: 14px;
+    font-weight: 500;
+    font-family: var(--font);
+    cursor: pointer;
+    transition: all var(--transition);
+    -webkit-tap-highlight-color: transparent;
+    min-height: 44px;
+}
+
+.zone-card svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
+.zone-card:hover { background: var(--bg-hover); border-color: var(--accent); }
+.zone-card:active { background: var(--bg-active); transform: scale(0.97); }
+
+/* ── Global Hamburger ──────── */
+.hamburger-global {
+    display: none;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 40;
+    width: 40px;
+    height: 40px;
+    background: var(--bg-2);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+}
+
+.hamburger-global svg { width: 20px; height: 20px; }
+
 /* ── Topbar ────────────────── */
 .topbar {
     height: var(--topbar-h);
@@ -399,6 +457,7 @@ body {
 }
 
 .file-item:hover { background: var(--bg-hover); }
+.file-item:active { background: var(--bg-active); }
 
 .file-item .fi-icon {
     width: 16px; height: 16px;
@@ -845,7 +904,6 @@ body {
 }
 
 .sidebar-close-btn { display: none; }
-.hamburger-btn { display: none; }
 .mobile-only { display: none !important; }
 .mobile-tabs { display: none; }
 
@@ -886,7 +944,7 @@ body {
         margin-left: auto;
     }
 
-    .hamburger-btn { display: inline-flex; }
+    .hamburger-global { display: inline-flex; }
 
     /* Sidebar brand spacing */
     .sidebar-brand { padding: 12px 14px 10px; }
@@ -901,6 +959,10 @@ body {
 
     .zone-list li .zone-icon { width: 20px; height: 20px; }
 
+    /* Welcome zones on mobile */
+    .welcome-zones { max-width: 100%; padding: 0 12px; }
+    .zone-card { flex: 1; min-width: 120px; justify-content: center; }
+
     /* Main takes full width */
     #main { width: 100%; }