Upload 20 files

static/app.js

@@ -17,6 +17,7 @@ function hugpanel() {
     currentZone: localStorage.getItem('hugpanel_zone') || null,
     activeTab: localStorage.getItem('hugpanel_tab') || 'files',
     maxZones: 0,
+    isDesktop: window.innerWidth >= 1280,
     tabs: [
       { id: 'files', label: 'Files', icon: 'folder' },
       { id: 'editor', label: 'Editor', icon: 'file-code' },
@@ -138,6 +139,10 @@ function hugpanel() {
         });
       });
 
+      // Track desktop breakpoint
+      const mql = window.matchMedia('(min-width: 1280px)');
+      mql.addEventListener('change', (e) => { this.isDesktop = e.matches; });
+
       // Persist session state
       this.$watch('currentZone', (val) => {
         if (val) localStorage.setItem('hugpanel_zone', val);

static/index.html

@@ -137,12 +137,18 @@
         <div class="px-2 py-1.5 text-xs font-medium text-gray-500 uppercase tracking-wider">Zones</div>
 
         <template x-for="zone in zones" :key="zone.name">
-          <button @click="selectZone(zone.name); sidebarOpen = false"
-                  :class="currentZone === zone.name ? 'bg-brand-600/20 text-brand-400 border-brand-500/30' : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200 border-transparent'"
-                  class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all border">
-            <i data-lucide="box" class="w-4 h-4 flex-shrink-0"></i>
-            <span x-text="zone.name" class="truncate"></span>
-          </button>
+          <div class="group relative">
+            <button @click="selectZone(zone.name); sidebarOpen = false"
+                    :class="currentZone === zone.name ? 'bg-brand-600/20 text-brand-400 border-brand-500/30' : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200 border-transparent'"
+                    class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all border">
+              <i data-lucide="box" class="w-4 h-4 flex-shrink-0"></i>
+              <span x-text="zone.name" class="truncate"></span>
+            </button>
+            <button @click.stop="currentZone = zone.name; confirmDeleteZone()"
+                    class="absolute right-2 top-1/2 -translate-y-1/2 p-1 rounded text-gray-600 hover:text-red-400 hover:bg-red-400/10 opacity-0 group-hover:opacity-100 transition" title="Xoá zone">
+              <i data-lucide="trash-2" class="w-3.5 h-3.5"></i>
+            </button>
+          </div>
         </template>
 
         <div x-show="zones.length === 0" class="text-center py-8 text-gray-600 text-sm">
@@ -276,8 +282,9 @@
                 <span x-text="currentZone" class="text-sm text-gray-300 font-medium"></span>
               </div>
               <span x-text="currentZone" class="text-xs text-gray-500 font-mono mr-2 hidden sm:inline xl:hidden"></span>
-              <button @click="confirmDeleteZone()" class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-400/10 transition" title="Xoá zone">
+              <button @click="confirmDeleteZone()" class="p-1.5 rounded-lg text-gray-500 hover:text-red-400 hover:bg-red-400/10 transition flex items-center gap-1.5" title="Xoá zone">
                 <i data-lucide="trash-2" class="w-4 h-4"></i>
+                <span class="hidden xl:inline text-xs">Xoá zone</span>
               </button>
             </div>
           </div>
@@ -286,8 +293,8 @@
         <!-- ═══ TAB: Files + Editor (split on desktop) ═══ -->
         <div x-show="activeTab === 'files' || activeTab === 'editor'" class="desktop-split flex-1 flex flex-col xl:flex-row min-h-0">
 
-        <!-- Files Panel -->
-        <div x-show="activeTab === 'files'" class="split-panel split-files flex-1 flex flex-col min-h-0">
+        <!-- Files Panel (always visible on desktop when in files/editor tab) -->
+        <div x-show="activeTab === 'files' || (isDesktop && activeTab === 'editor')" class="split-panel split-files flex flex-col min-h-0" :class="isDesktop ? '' : 'flex-1'">
 
           <!-- File Toolbar -->
           <div class="px-4 py-2 bg-gray-900/50 border-b border-gray-800 flex flex-wrap items-center gap-2">
@@ -388,8 +395,8 @@
           </div>
         </div>
 
-        <!-- ═══ TAB: Editor ═══ -->
-        <div x-show="activeTab === 'editor'" class="split-panel split-editor flex-1 flex flex-col min-h-0">
+        <!-- ═══ TAB: Editor (always visible on desktop when in files/editor tab) ═══ -->
+        <div x-show="activeTab === 'editor' || (isDesktop && activeTab === 'files')" class="split-panel split-editor flex-1 flex flex-col min-h-0">
           <div x-show="!editorFile" class="flex-1 flex items-center justify-center text-gray-600 text-sm">
             Chọn file để chỉnh sửa
           </div>

static/style.css

@@ -94,10 +94,10 @@ input:focus, textarea:focus, button:focus-visible {
 
 /* ═══ Desktop Enhancements ═══ */
 
-/* Desktop split: show both files + editor side by side on xl+ */
+/* Desktop split: files + editor side by side on xl+ */
 @media (min-width: 1280px) {
-  .desktop-split > .split-panel {
-    display: flex !important;
+  .desktop-split {
+    flex-direction: row !important;
   }
   .desktop-split > .split-files {
     width: 380px;