Upload 20 files

routers/backup.py

@@ -106,11 +106,14 @@ async def list_backups(request: Request):
             if resp.status_code != 200:
                 raise HTTPException(502, f"HF API error: {resp.status_code} {resp.text}")
             tree = resp.json()
+            meta = load_meta()
             return [
                 {
                     "zone_name": f["path"].split("/")[-1].replace(".tar.gz", ""),
                     "file": f["path"],
                     "size": (f.get("lfs") or {}).get("size") or f.get("size", 0),
+                    "last_modified": (f.get("lastCommit") or {}).get("date", ""),
+                    "local_exists": f["path"].split("/")[-1].replace(".tar.gz", "") in meta,
                 }
                 for f in tree
                 if f.get("type") == "file" and f["path"].endswith(".tar.gz")
@@ -278,6 +281,7 @@ async def restore_zone(zone_name: str, request: Request, background_tasks: Backg
                 zone_path = DATA_DIR / zone_name
                 if zone_path.exists():
                     shutil.rmtree(zone_path)
+                zone_path.mkdir(parents=True, exist_ok=True)
                 with tarfile.open(archive_path, "r:gz") as tar:
                     for member in tar.getmembers():
                         member_path = os.path.normpath(member.name)
@@ -288,7 +292,7 @@ async def restore_zone(zone_name: str, request: Request, background_tasks: Backg
                     tar.extractall(path=str(DATA_DIR), filter="data")
                 meta = load_meta()
                 if zone_name not in meta:
-                    meta[zone_name] = {"description": "", "created": datetime.now().isoformat()}
+                    meta[zone_name] = {"description": f"Restored from backup", "created": datetime.now().isoformat()}
                     save_meta(meta)
             finally:
                 archive_path.unlink(missing_ok=True)
@@ -361,6 +365,10 @@ async def restore_all(request: Request, background_tasks: BackgroundTasks):
                     zone_path = DATA_DIR / zn
                     if zone_path.exists():
                         shutil.rmtree(zone_path)
+                    zone_path = DATA_DIR / zn
+                    if zone_path.exists():
+                        shutil.rmtree(zone_path)
+                    zone_path.mkdir(parents=True, exist_ok=True)
                     with tarfile.open(archive_path, "r:gz") as tar:
                         for member in tar.getmembers():
                             member_path = os.path.normpath(member.name)
@@ -371,7 +379,7 @@ async def restore_all(request: Request, background_tasks: BackgroundTasks):
                         tar.extractall(path=str(DATA_DIR), filter="data")
                     meta = load_meta()
                     if zn not in meta:
-                        meta[zn] = {"description": "", "created": datetime.now().isoformat()}
+                        meta[zn] = {"description": "Restored from backup", "created": datetime.now().isoformat()}
                         save_meta(meta)
                 finally:
                     archive_path.unlink(missing_ok=True)

static/index.html

@@ -121,7 +121,7 @@
 
     <!-- ═══ Sidebar ═══ -->
     <aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
-           class="fixed lg:static inset-y-0 left-0 z-50 lg:z-auto lg:translate-x-0 w-64 bg-gray-900 border-r border-gray-800 flex flex-col transition-transform duration-300 ease-in-out">
+           class="fixed lg:static inset-y-0 left-0 z-50 lg:z-auto lg:translate-x-0 w-64 xl:w-72 bg-gray-900 border-r border-gray-800 flex flex-col transition-transform duration-300 ease-in-out">
 
       <!-- Logo -->
       <div class="p-4 border-b border-gray-800 flex items-center gap-3">
@@ -178,14 +178,75 @@
     <main class="flex-1 flex flex-col min-w-0 pt-14 lg:pt-0">
 
       <!-- No zone selected -->
-      <div x-show="!currentZone" class="flex-1 flex items-center justify-center p-6">
-        <div class="text-center max-w-sm">
-          <div class="w-16 h-16 mx-auto mb-4 rounded-2xl bg-gray-800 flex items-center justify-center">
-            <i data-lucide="layout-dashboard" class="w-8 h-8 text-gray-600"></i>
+      <div x-show="!currentZone" class="flex-1 overflow-y-auto p-4 xl:p-8" x-effect="if(!currentZone && backupStatus.configured) loadBackupList()">
+        <div class="text-center max-w-sm mx-auto mb-6 pt-4 xl:pt-8">
+          <div class="w-16 h-16 xl:w-20 xl:h-20 mx-auto mb-4 rounded-2xl bg-gray-800 flex items-center justify-center">
+            <i data-lucide="layout-dashboard" class="w-8 h-8 xl:w-10 xl:h-10 text-gray-600"></i>
           </div>
-          <h2 class="text-lg font-semibold text-gray-400 mb-2">Chọn hoặc tạo Zone</h2>
+          <h2 class="text-lg xl:text-xl font-semibold text-gray-400 mb-2">Chọn hoặc tạo Zone</h2>
           <p class="text-sm text-gray-600">Chọn zone từ sidebar hoặc tạo zone mới để bắt đầu.</p>
         </div>
+
+        <!-- Cloud Backups (available even without selecting a zone) -->
+        <div x-show="backupStatus.configured" class="max-w-lg xl:max-w-2xl mx-auto space-y-4">
+          <!-- Restore All button -->
+          <button @click="restoreAll()" :disabled="backupStatus.running"
+                  :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-emerald-500'"
+                  class="w-full flex items-center justify-center gap-2 px-4 py-3 bg-emerald-600 rounded-xl text-sm font-medium transition">
+            <i data-lucide="cloud-download" class="w-4 h-4"></i>
+            Restore tất cả từ cloud
+          </button>
+
+          <!-- Progress -->
+          <div x-show="backupStatus.running" class="bg-gray-900 rounded-xl border border-gray-800 p-4">
+            <div class="flex items-center gap-2 mb-2">
+              <div class="w-4 h-4 border-2 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
+              <span class="text-xs text-brand-400">Đang chạy</span>
+            </div>
+            <div class="text-xs text-gray-400" x-text="backupStatus.progress"></div>
+          </div>
+          <div x-show="backupStatus.error" class="text-xs text-red-400 bg-red-400/10 rounded-lg px-3 py-2" x-text="backupStatus.error"></div>
+
+          <!-- Cloud backup list -->
+          <div class="bg-gray-900 rounded-xl border border-gray-800 overflow-hidden">
+            <div class="px-4 py-3 border-b border-gray-800 flex items-center justify-between">
+              <h3 class="text-sm font-medium text-gray-300">Bản backup trên cloud</h3>
+              <button @click="loadBackupList()" class="p-1.5 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-gray-800 transition" title="Refresh">
+                <i data-lucide="refresh-cw" class="w-3.5 h-3.5"></i>
+              </button>
+            </div>
+            <div x-show="backupLoading" class="flex items-center justify-center py-8">
+              <div class="w-5 h-5 border-2 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
+            </div>
+            <div x-show="!backupLoading && backupList.length === 0" class="text-center py-8 text-gray-600 text-sm">
+              Chưa có bản backup nào
+            </div>
+            <div x-show="!backupLoading" class="divide-y divide-gray-800/50">
+              <template x-for="b in backupList" :key="b.zone_name">
+                <div class="flex items-center gap-3 px-4 py-3 hover:bg-gray-800/30 transition">
+                  <div class="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
+                       :class="b.local_exists ? 'bg-brand-500/10' : 'bg-yellow-500/10'">
+                    <i data-lucide="archive" class="w-4 h-4" :class="b.local_exists ? 'text-brand-400' : 'text-yellow-400'"></i>
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm font-medium truncate" x-text="b.zone_name"></span>
+                      <span x-show="!b.local_exists" class="text-[10px] px-1.5 py-0.5 rounded bg-yellow-500/20 text-yellow-400">Chỉ trên cloud</span>
+                    </div>
+                    <div class="text-xs text-gray-500">
+                      <span x-show="b.size" x-text="(b.size / 1024 / 1024).toFixed(1) + ' MB'"></span>
+                      <span x-show="b.last_modified"> · <span x-text="new Date(b.last_modified).toLocaleString('vi-VN')"></span></span>
+                    </div>
+                  </div>
+                  <button @click="restoreZone(b.zone_name)" :disabled="backupStatus.running"
+                          class="p-2 rounded-lg text-gray-400 hover:text-emerald-400 hover:bg-emerald-400/10 transition" title="Restore">
+                    <i data-lucide="download-cloud" class="w-4 h-4"></i>
+                  </button>
+                </div>
+              </template>
+            </div>
+          </div>
+        </div>
       </div>
 
       <!-- Zone Content -->
@@ -204,8 +265,12 @@
             </template>
 
             <!-- Zone Actions (right side) -->
-            <div class="ml-auto flex items-center gap-1">
-              <span x-text="currentZone" class="text-xs text-gray-500 font-mono mr-2 hidden sm:inline"></span>
+            <div class="ml-auto flex items-center gap-1 xl:gap-2">
+              <div class="hidden xl:flex items-center gap-2 mr-3">
+                <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                <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">
                 <i data-lucide="trash-2" class="w-4 h-4"></i>
               </button>
@@ -213,8 +278,11 @@
           </div>
         </div>
 
-        <!-- ═══ TAB: Files ═══ -->
-        <div x-show="activeTab === 'files'" class="flex-1 flex flex-col min-h-0">
+        <!-- ═══ 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">
 
           <!-- File Toolbar -->
           <div class="px-4 py-2 bg-gray-900/50 border-b border-gray-800 flex flex-wrap items-center gap-2">
@@ -287,7 +355,7 @@
               </button>
 
               <template x-for="file in files" :key="file.name">
-                <div class="group flex items-center gap-3 px-4 py-2.5 hover:bg-gray-800/50 transition cursor-pointer"
+                <div class="file-item group flex items-center gap-3 px-4 py-2.5 hover:bg-gray-800/50 transition cursor-pointer"
                      @click="file.is_dir ? navigateTo(joinPath(currentPath, file.name)) : openFile(joinPath(currentPath, file.name))">
                   <i :data-lucide="file.is_dir ? 'folder' : getFileIcon(file.name)"
                      :class="file.is_dir ? 'text-brand-400' : 'text-gray-500'"
@@ -296,7 +364,7 @@
                   <span x-show="!file.is_dir" class="text-xs text-gray-600 hidden sm:inline" x-text="formatSize(file.size)"></span>
 
                   <!-- File Actions -->
-                  <div class="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition">
+                  <div class="file-actions flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition">
                     <button x-show="!file.is_dir" @click.stop="downloadFile(joinPath(currentPath, file.name), file.name)"
                             class="p-1 rounded text-gray-500 hover:text-brand-400 hover:bg-brand-400/10" title="Download">
                       <i data-lucide="download" class="w-3.5 h-3.5"></i>
@@ -316,7 +384,7 @@
         </div>
 
         <!-- ═══ TAB: Editor ═══ -->
-        <div x-show="activeTab === 'editor'" class="flex-1 flex flex-col min-h-0">
+        <div x-show="activeTab === 'editor'" 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>
@@ -342,6 +410,8 @@
           </div>
         </div>
 
+        </div><!-- end desktop-split -->
+
         <!-- ═══ TAB: Terminal ═══ -->
         <div x-show="activeTab === 'terminal'" x-effect="if(activeTab==='terminal') initTerminal()" class="flex-1 flex flex-col min-h-0">
           <div id="terminal-container" class="flex-1 min-h-0 p-1 bg-black"></div>
@@ -349,7 +419,7 @@
 
         <!-- ═══ TAB: Ports ═══ -->
         <div x-show="activeTab === 'ports'" class="flex-1 overflow-y-auto">
-          <div class="p-4 space-y-4">
+          <div class="p-4 xl:p-6 space-y-4 desktop-content mx-auto w-full">
             <!-- Add Port -->
             <div class="bg-gray-900 rounded-xl border border-gray-800 p-4">
               <h3 class="text-sm font-medium text-gray-300 mb-3">Thêm Port</h3>
@@ -365,7 +435,7 @@
             </div>
 
             <!-- Port List -->
-            <div class="space-y-2">
+            <div class="space-y-2 xl:grid xl:grid-cols-2 xl:gap-3 xl:space-y-0">
               <template x-for="port in ports" :key="port.port">
                 <div class="bg-gray-900 rounded-xl border border-gray-800 p-4 flex items-center gap-3">
                   <div class="w-10 h-10 rounded-lg bg-green-500/10 flex items-center justify-center flex-shrink-0">
@@ -389,7 +459,7 @@
                 </div>
               </template>
 
-              <div x-show="ports.length === 0" class="text-center py-8 text-gray-600 text-sm">
+              <div x-show="ports.length === 0" class="text-center py-8 text-gray-600 text-sm xl:col-span-2">
                 Chưa có port nào
               </div>
             </div>
@@ -398,7 +468,7 @@
 
         <!-- ═══ TAB: Backup ═══ -->
         <div x-show="activeTab === 'backup'" x-effect="if(activeTab==='backup' && backupStatus.configured) loadBackupList()" class="flex-1 overflow-y-auto">
-          <div class="p-4 space-y-4">
+          <div class="p-4 xl:p-6 space-y-4 desktop-content mx-auto w-full">
 
             <!-- Not configured -->
             <div x-show="!backupStatus.configured" class="bg-gray-900 rounded-xl border border-gray-800 p-6 text-center">
@@ -446,7 +516,7 @@
               </div>
 
               <!-- Action Buttons -->
-              <div class="grid grid-cols-2 gap-2">
+              <div class="grid grid-cols-2 xl:grid-cols-4 gap-2">
                 <button @click="backupZone(currentZone)" :disabled="backupStatus.running"
                         :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-brand-500'"
                         class="flex items-center justify-center gap-2 px-4 py-3 bg-brand-600 rounded-xl text-sm font-medium transition">
@@ -459,8 +529,8 @@
                   <i data-lucide="cloud-upload" class="w-4 h-4"></i>
                   Backup tất cả
                 </button>
-                <button @click="restoreZone(currentZone)" :disabled="backupStatus.running"
-                        :class="backupStatus.running ? 'opacity-50 cursor-not-allowed' : 'hover:bg-emerald-500'"
+                <button @click="restoreZone(currentZone)" :disabled="backupStatus.running || !backupList.some(b => b.zone_name === currentZone)"
+                        :class="(backupStatus.running || !backupList.some(b => b.zone_name === currentZone)) ? 'opacity-50 cursor-not-allowed' : 'hover:bg-emerald-500'"
                         class="flex items-center justify-center gap-2 px-4 py-3 bg-emerald-600 rounded-xl text-sm font-medium transition">
                   <i data-lucide="download-cloud" class="w-4 h-4"></i>
                   Restore Zone này
@@ -497,10 +567,13 @@
                         <i data-lucide="archive" class="w-4 h-4 text-brand-400"></i>
                       </div>
                       <div class="flex-1 min-w-0">
-                        <div class="text-sm font-medium truncate" x-text="b.zone_name"></div>
+                        <div class="flex items-center gap-2">
+                          <span class="text-sm font-medium truncate" x-text="b.zone_name"></span>
+                          <span x-show="!b.local_exists" class="text-[10px] px-1.5 py-0.5 rounded bg-yellow-500/20 text-yellow-400">Chỉ trên cloud</span>
+                        </div>
                         <div class="text-xs text-gray-500">
                           <span x-show="b.size" x-text="(b.size / 1024 / 1024).toFixed(1) + ' MB'"></span>
-                          <span x-show="b.last_modified"> · <span x-text="b.last_modified"></span></span>
+                          <span x-show="b.last_modified"> · <span x-text="new Date(b.last_modified).toLocaleString('vi-VN')"></span></span>
                         </div>
                       </div>
                       <button @click="restoreZone(b.zone_name)" :disabled="backupStatus.running"

static/style.css

@@ -62,7 +62,8 @@ textarea {
     opacity: 1;
   }
   /* Always show file actions on mobile */
-  .group .opacity-0 {
+  .group .opacity-0,
+  .file-item .file-actions {
     opacity: 1 !important;
   }
 }
@@ -89,4 +90,45 @@ input:focus, textarea:focus, button:focus-visible {
     border-bottom-right-radius: 0;
     margin-bottom: 0;
   }
+}
+
+/* ═══ Desktop Enhancements ═══ */
+
+/* Desktop split: show both files + editor side by side on xl+ */
+@media (min-width: 1280px) {
+  .desktop-split > .split-panel {
+    display: flex !important;
+  }
+  .desktop-split > .split-files {
+    width: 380px;
+    flex-shrink: 0;
+    border-right: 1px solid #1f2937;
+  }
+  .desktop-split > .split-editor {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+/* Desktop: better file list items */
+@media (min-width: 1280px) {
+  .file-item .file-actions {
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+  .file-item:hover .file-actions {
+    opacity: 1;
+  }
+}
+
+/* Desktop: wider content areas for backup/ports */
+@media (min-width: 1280px) {
+  .desktop-content {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1536px) {
+  .desktop-content {
+    max-width: 1100px;
+  }
 }