Change : display

platform/static/css/style.css

@@ -454,7 +454,7 @@ a.sidebar-brand-link {
 .btn-lg, .btn.lg { padding: 12px 24px; font-size: 14px; }
 
 /* ── RESTORE FORM ──────────────────────────────────────────── */
-.restore-form { max-width: 700px; display: flex; flex-direction: column; gap: 0; }
+.restore-form { max-width: 820px; display: flex; flex-direction: column; gap: 0; }
 .form-section { padding: 20px 0; border-bottom: 1px solid var(--border); margin-bottom: 0; }
 .form-section:last-child { border-bottom: none; }
 .form-section-title {
@@ -476,6 +476,7 @@ a.sidebar-brand-link {
 .form-input[readonly] { opacity: 0.6; cursor: default; }
 .form-row   { display: flex; gap: 12px; }
 .form-row .form-group { flex: 1; }
+.form-grid  { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; align-items: end; }
 .form-note  { font-size: 12px; color: var(--text3); margin-top: 8px; }
 .form-check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
 .form-check input { accent-color: var(--accent); width: 14px; height: 14px; }
@@ -498,6 +499,106 @@ a.sidebar-brand-link {
 .radio-desc  { font-size: 11px; color: var(--text3); font-family: var(--mono); margin-top: 2px; }
 .radio-desc code { background: var(--border2); padding: 1px 5px; border-radius: 4px; font-family: var(--mono); }
 
+/* ── APP PICKER (restore step 3) ───────────────────────────── */
+.app-picker-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
+  gap: 10px;
+}
+.app-picker-card { cursor: pointer; display: block; position: relative; }
+.app-picker-card input {
+  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
+}
+.app-picker-body {
+  display: flex; align-items: center; gap: 12px;
+  padding: 13px 14px; border: 1px solid var(--border2);
+  border-radius: var(--radius); background: var(--surface2);
+  transition: border-color var(--trans), background var(--trans), opacity var(--trans);
+}
+.app-picker-card:hover .app-picker-body { border-color: var(--border2); background: var(--bg4); }
+.app-picker-card input:checked + .app-picker-body {
+  border-color: var(--accent); background: rgba(59,130,246,0.08);
+}
+.app-picker-card input:not(:checked) + .app-picker-body { opacity: 0.62; }
+[data-theme="light"] .app-picker-card input:checked + .app-picker-body { background: rgba(37,99,235,0.06); }
+.app-picker-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
+.app-picker-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3; }
+.app-picker-desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
+.app-picker-check {
+  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
+  border: 1.5px solid var(--border2); display: flex; align-items: center; justify-content: center;
+  font-size: 10px; color: transparent; flex-shrink: 0;
+  transition: background var(--trans), border-color var(--trans), color var(--trans);
+}
+.app-picker-card input:checked + .app-picker-body .app-picker-check {
+  background: var(--accent); border-color: var(--accent); color: #fff;
+}
+.app-picker-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
+.app-picker-note {
+  color: var(--text3); font-size: 12px; line-height: 1.55; margin-bottom: 14px;
+  padding: 10px 14px; border-radius: 8px;
+  background: rgba(59,130,246,0.06); border: 1px solid rgba(59,130,246,0.12);
+  display: flex; align-items: flex-start; gap: 10px;
+}
+.app-picker-note i { color: var(--accent2); margin-top: 2px; flex-shrink: 0; }
+
+/* ── USERS GRID ────────────────────────────────────────────── */
+.users-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: 12px;
+}
+.user-card {
+  padding: 16px; border-radius: 12px;
+  background: var(--surface2); border: 1px solid var(--border);
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
+}
+.user-card:hover { border-color: var(--accent); background: var(--bg4); }
+.user-card.selected {
+  border-color: var(--accent);
+  background: rgba(59,130,246,0.08);
+  box-shadow: 0 0 0 1px rgba(59,130,246,0.15);
+}
+[data-theme="light"] .user-card.selected { background: rgba(37,99,235,0.06); }
+.user-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
+.user-avatar {
+  width: 42px; height: 42px; border-radius: 10px;
+  display: flex; align-items: center; justify-content: center;
+  font-weight: 700; font-size: 17px; color: #fff; flex-shrink: 0;
+}
+.user-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; }
+.user-uid  { font-size: 11px; color: var(--text3); font-family: var(--mono); margin-top: 2px; }
+.user-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; min-height: 24px; }
+.user-tag {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 3px 9px; border-radius: 20px; font-size: 10px; font-weight: 600;
+  font-family: var(--mono); letter-spacing: 0.03em;
+}
+.user-tag.docker { background: rgba(37,99,235,0.12); color: #60a5fa; border: 1px solid rgba(37,99,235,0.2); }
+.user-tag.linger { background: rgba(167,139,250,0.12); color: #a78bfa; border: 1px solid rgba(167,139,250,0.2); }
+.user-tag.vdisk  { background: rgba(34,211,238,0.12); color: var(--cyan); border: 1px solid rgba(34,211,238,0.2); }
+.user-stats {
+  display: flex; gap: 10px; padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+.user-stat {
+  flex: 1; display: flex; flex-direction: column; gap: 3px;
+  font-size: 12px; color: var(--text3);
+}
+.user-stat-label {
+  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
+  text-transform: uppercase; font-family: var(--mono);
+}
+.user-stat strong { font-size: 13px; color: var(--text); font-family: var(--mono); }
+.user-detail-table-wrap {
+  padding: 0 4px 4px; overflow-x: auto;
+}
+.user-containers-table { margin-top: 4px; }
+.user-containers-table th { white-space: nowrap; }
+.user-containers-table .ct-image { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.user-containers-table .ct-ports { font-family: var(--mono); font-size: 11px; color: var(--text3); max-width: 180px; }
+
 /* ── LOG CONSOLE ───────────────────────────────────────────── */
 .log-header {
   display: flex; align-items: center; justify-content: space-between;
@@ -522,8 +623,8 @@ a.sidebar-brand-link {
   background: var(--surface2); gap: 10px; flex-wrap: wrap;
   border: 1px solid var(--border);
 }
-.backup-name    { font-family: var(--mono); font-size: 12px; color: var(--text2); }
+.backup-name    { font-family: var(--mono); font-size: 12px; color: var(--text2); flex: 1; min-width: 0; word-break: break-all; }
-.backup-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
+.backup-actions { display: flex; gap: 5px; align-items: center; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
 .btn-delete-backup { color: var(--red) !important; opacity: 0.7; transition: opacity 0.15s; }
 .btn-delete-backup:hover { opacity: 1; }
 .btn-audit { color: var(--cyan) !important; opacity: 0.85; }

platform/static/js/platform.js

@@ -382,6 +382,10 @@ async function refreshBackupsList() {
   } catch (_) {}
 }
 
+function jsStr(s) {
+  return String(s).replace(/\\/g, '\\\\').replace(/'/g, "\\'");
+}
+
 function renderBackupList(items, id, source) {
   const node = el(id);
   if (!node) return;
@@ -389,15 +393,26 @@ function renderBackupList(items, id, source) {
     node.innerHTML = '<div class="empty-state"><i class="fas fa-inbox"></i>No backups</div>';
     return;
   }
-  node.innerHTML = items.map((b) => `
+  node.innerHTML = items.map((b) => {
+    const safe = jsStr(b);
+    const uploadBtn = source === 'local' && typeof quickUploadR2 === 'function'
+      ? `<button class="btn btn-ghost btn-sm" onclick="quickUploadR2('${safe}',this)" title="Upload to R2"><i class="fas fa-cloud-upload-alt"></i></button>`
+      : '';
+    const detailsBtn = typeof showBackupDetails === 'function'
+      ? `<button class="btn btn-ghost btn-sm" style="color:var(--text3);" onclick="showBackupDetails('${source}','${safe}',this)" title="Quick details"><i class="fas fa-circle-info"></i></button>`
+      : '';
+    return `
     <div class="backup-item" id="bk-item-${source}-${b.replace(/[^a-z0-9]/gi, '_')}">
-      <span class="backup-name">${b}</span>
+      <span class="backup-name">${escapeHtml(b)}</span>
       <div class="backup-actions">
-        <button class="btn btn-ghost btn-sm btn-audit" onclick="auditBackup('${source}','${b}',this)"><i class="fas fa-shield-check"></i> Audit</button>
+        ${detailsBtn}
-        <button class="btn btn-ghost btn-sm" onclick="quickRestore('${source}','${b}')">↩ Restore</button>
+        <button class="btn btn-ghost btn-sm btn-audit" onclick="auditBackup('${source}','${safe}',this)"><i class="fas fa-shield-check"></i> Audit</button>
-        <button class="btn btn-ghost btn-sm btn-delete-backup" onclick="deleteBackup('${source}','${b}',this)"><i class="fas fa-trash"></i></button>
+        <button class="btn btn-ghost btn-sm" onclick="quickRestore('${source}','${safe}')">↩ Restore</button>
+        ${uploadBtn}
+        <button class="btn btn-ghost btn-sm btn-delete-backup" onclick="deleteBackup('${source}','${safe}',this)"><i class="fas fa-trash"></i></button>
       </div>
-    </div>`).join('');
+    </div>`;
+  }).join('');
 }
 
 async function auditBackup(source, filename, btn) {
@@ -537,13 +552,19 @@ async function loadUsers() {
       grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No users</div>';
       return;
     }
-    grid.innerHTML = users.map((u, i) => `<div class="user-card" onclick="loadUserContainers('${u.name}')"><div class="user-card-top"><div class="user-avatar" style="background:${userColors[i % userColors.length]}">${u.name[0].toUpperCase()}</div><div><div class="user-name">${u.name}</div><div class="user-uid">uid ${u.uid}</div></div></div><div class="user-tags">${u.has_docker ? '<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>' : ''}${u.linger ? '<span class="user-tag linger">linger</span>' : ''}${u.has_vdisk ? '<span class="user-tag" style="background:rgba(34,211,238,0.12);color:var(--cyan)">💾 vdisk</span>' : ''}</div><div class="user-stats"><div class="user-stat">Disk: <strong>${u.disk_used}</strong></div><div class="user-stat">Ctrs: <strong>${u.container_count}</strong></div></div></div>`).join('');
+    grid.innerHTML = users.map((u, i) => `<div class="user-card" data-user="${escapeHtml(u.name)}" onclick="loadUserContainers('${jsStr(u.name)}')"><div class="user-card-top"><div class="user-avatar" style="background:${userColors[i % userColors.length]}">${escapeHtml(u.name[0].toUpperCase())}</div><div><div class="user-name">${escapeHtml(u.name)}</div><div class="user-uid">uid ${u.uid}</div></div></div><div class="user-tags">${u.has_docker ? '<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>' : ''}${u.linger ? '<span class="user-tag linger">linger</span>' : ''}${u.has_vdisk ? '<span class="user-tag vdisk"><i class="fas fa-hard-drive"></i> vdisk</span>' : ''}</div><div class="user-stats"><div class="user-stat"><span class="user-stat-label">Disk</span><strong>${escapeHtml(u.disk_used)}</strong></div><div class="user-stat"><span class="user-stat-label">Containers</span><strong>${u.container_count}</strong></div></div></div>`).join('');
   } catch (_) {}
 }
 
 async function loadUserContainers(username) {
   selectedUser = username;
-  if (el('user-detail-panel')) el('user-detail-panel').style.display = '';
+  document.querySelectorAll('.user-card').forEach((card) => {
+    card.classList.toggle('selected', card.dataset.user === username);
+  });
+  if (el('user-detail-panel')) {
+    el('user-detail-panel').style.display = '';
+    el('user-detail-panel').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+  }
   setText('user-detail-title', `${username}'s Containers`);
   const body = el('user-containers-body');
   if (!body) return;

platform/templates/pages/restore.html

@@ -115,36 +115,71 @@
 
     <div class="form-section">
       <div class="form-section-title">STEP 3 — SELECT APPS TO RESTORE</div>
-      <p style="color:var(--text3); font-size:12px; margin-bottom:10px;">
+      <p class="app-picker-note">
-        All apps are restored by default. Uncheck the ones you don't want touched —
+        <i class="fas fa-info-circle"></i>
-        only the checked apps will be restored, and they're force-restored even if
+        All apps are selected by default. Uncheck any app you want to leave untouched —
-        currently running and healthy.
+        only checked apps will be restored, and they are force-restored even if currently running and healthy.
       </p>
-      <div id="apps-checkbox-group" style="display:flex; flex-wrap:wrap; gap:8px;">
+      <div class="app-picker-grid" id="apps-checkbox-group">
-        <label class="radio-card small" style="cursor:pointer;">
+        <label class="app-picker-card">
-          <input type="checkbox" value="frappe" checked style="margin-right:6px;">
+          <input type="checkbox" value="frappe" checked>
-          <span>🧾 Frappe / ERPNext</span>
+          <div class="app-picker-body">
+            <span class="app-picker-icon">🧾</span>
+            <div>
+              <div class="app-picker-name">Frappe / ERPNext</div>
+              <div class="app-picker-desc">ERP & business suite</div>
+            </div>
+            <span class="app-picker-check"><i class="fas fa-check"></i></span>
+          </div>
         </label>
-        <label class="radio-card small" style="cursor:pointer;">
+        <label class="app-picker-card">
-          <input type="checkbox" value="odoo" checked style="margin-right:6px;">
+          <input type="checkbox" value="odoo" checked>
-          <span>🟣 Odoo</span>
+          <div class="app-picker-body">
+            <span class="app-picker-icon">🟣</span>
+            <div>
+              <div class="app-picker-name">Odoo</div>
+              <div class="app-picker-desc">CRM, inventory & accounting</div>
+            </div>
+            <span class="app-picker-check"><i class="fas fa-check"></i></span>
+          </div>
         </label>
-        <label class="radio-card small" style="cursor:pointer;">
+        <label class="app-picker-card">
-          <input type="checkbox" value="nextcloud" checked style="margin-right:6px;">
+          <input type="checkbox" value="nextcloud" checked>
-          <span>☁️ Nextcloud</span>
+          <div class="app-picker-body">
+            <span class="app-picker-icon">☁️</span>
+            <div>
+              <div class="app-picker-name">Nextcloud</div>
+              <div class="app-picker-desc">Files & collaboration</div>
+            </div>
+            <span class="app-picker-check"><i class="fas fa-check"></i></span>
+          </div>
         </label>
-        <label class="radio-card small" style="cursor:pointer;">
+        <label class="app-picker-card">
-          <input type="checkbox" value="mautic" checked style="margin-right:6px;">
+          <input type="checkbox" value="mautic" checked>
-          <span>📣 Mautic</span>
+          <div class="app-picker-body">
+            <span class="app-picker-icon">📣</span>
+            <div>
+              <div class="app-picker-name">Mautic</div>
+              <div class="app-picker-desc">Marketing automation</div>
+            </div>
+            <span class="app-picker-check"><i class="fas fa-check"></i></span>
+          </div>
         </label>
-        <label class="radio-card small" style="cursor:pointer;">
+        <label class="app-picker-card">
-          <input type="checkbox" value="n8n" checked style="margin-right:6px;">
+          <input type="checkbox" value="n8n" checked>
-          <span>🔁 n8n</span>
+          <div class="app-picker-body">
+            <span class="app-picker-icon">🔁</span>
+            <div>
+              <div class="app-picker-name">n8n</div>
+              <div class="app-picker-desc">Workflow automation</div>
+            </div>
+            <span class="app-picker-check"><i class="fas fa-check"></i></span>
+          </div>
         </label>
       </div>
-      <div style="margin-top:10px; display:flex; gap:8px;">
+      <div class="app-picker-actions">
-        <button type="button" class="btn btn-sm" onclick="nvSetAllApps(true)">Select All</button>
+        <button type="button" class="btn btn-sm btn-ghost" onclick="nvSetAllApps(true)"><i class="fas fa-check-double"></i> Select All</button>
-        <button type="button" class="btn btn-sm" onclick="nvSetAllApps(false)">Select None</button>
+        <button type="button" class="btn btn-sm btn-ghost" onclick="nvSetAllApps(false)"><i class="fas fa-ban"></i> Select None</button>
       </div>
     </div>
 
@@ -168,8 +203,9 @@
   </div>
 </div>
 
+<script type="application/json" id="restore-prefill-data">{{ restore_prefill|tojson }}</script>
 <script>
-window.restorePrefill = {{ restore_prefill|tojson }};
+window.restorePrefill = JSON.parse(document.getElementById('restore-prefill-data').textContent);
 
 // ── Cloud backup data (key lookup) ────────────────────────────────────────────
 let _cloudBackups = [];
@@ -340,6 +376,7 @@ async function nvLaunchRestore() {
 // ── Init ──────────────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', () => {
   loadCloudSelect();
+  nvUpdateRestoreWarning();
 
   // Handle prefill from URL params (e.g. clicking Restore from backups page)
   const pf = window.restorePrefill || {};

platform/templates/pages/users.html

@@ -22,10 +22,23 @@
   </div>
   <div class="users-grid" id="users-grid">
     {% for u in users %}
-    <div class="user-card" onclick="loadUserContainers('{{ u.name }}')">
+    <div class="user-card" data-user="{{ u.name }}" onclick="loadUserContainers('{{ u.name }}')">
-      <div class="user-card-top"><div class="user-avatar" style="background:#3b82f6">{{ u.name[0].upper() }}</div><div><div class="user-name">{{ u.name }}</div><div class="user-uid">uid {{ u.uid }}</div></div></div>
+      <div class="user-card-top">
-      <div class="user-tags">{% if u.has_docker %}<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>{% endif %}{% if u.linger %}<span class="user-tag linger">linger</span>{% endif %}{% if u.has_vdisk %}<span class="user-tag" style="background:rgba(34,211,238,0.12);color:var(--cyan);">💾 vdisk</span>{% endif %}</div>
+        <div class="user-avatar" style="background:#3b82f6">{{ u.name[0].upper() }}</div>
-      <div class="user-stats"><div class="user-stat">Disk: <strong>{{ u.disk_used }}</strong></div><div class="user-stat">Ctrs: <strong>{{ u.container_count }}</strong></div></div>
+        <div>
+          <div class="user-name">{{ u.name }}</div>
+          <div class="user-uid">uid {{ u.uid }}</div>
+        </div>
+      </div>
+      <div class="user-tags">
+        {% if u.has_docker %}<span class="user-tag docker"><i class="fab fa-docker"></i> docker</span>{% endif %}
+        {% if u.linger %}<span class="user-tag linger"><i class="fas fa-clock"></i> linger</span>{% endif %}
+        {% if u.has_vdisk %}<span class="user-tag vdisk"><i class="fas fa-hard-drive"></i> vdisk</span>{% endif %}
+      </div>
+      <div class="user-stats">
+        <div class="user-stat"><span class="user-stat-label">Disk</span><strong>{{ u.disk_used }}</strong></div>
+        <div class="user-stat"><span class="user-stat-label">Containers</span><strong>{{ u.container_count }}</strong></div>
+      </div>
     </div>
     {% else %}
     <div class="empty-state" style="grid-column:1/-1"><i class="fas fa-user-slash"></i>No non-system users</div>
@@ -36,9 +49,24 @@
 <div class="card" id="user-detail-panel" style="display:none;">
   <div class="card-header">
     <div class="card-title"><i class="fas fa-cube"></i> <span id="user-detail-title">Containers</span></div>
-    <div style="display:flex;gap:8px;"><button class="btn btn-ghost btn-sm" style="color:var(--red);" onclick="deleteUser()"><i class="fas fa-trash"></i> Delete</button><button class="btn btn-ghost btn-sm" onclick="document.getElementById('user-detail-panel').style.display='none'">✕</button></div>
+    <div style="display:flex;gap:8px;">
+      <button class="btn btn-ghost btn-sm" style="color:var(--red);" onclick="deleteUser()"><i class="fas fa-trash"></i> Delete</button>
+      <button class="btn btn-ghost btn-sm" onclick="document.getElementById('user-detail-panel').style.display='none'; document.querySelectorAll('.user-card.selected').forEach(c=>c.classList.remove('selected'))" title="Close">✕</button>
+    </div>
+  </div>
+  <div class="user-detail-table-wrap">
+    <table class="ct-table user-containers-table">
+      <thead>
+        <tr>
+          <th>NAME</th>
+          <th>STATUS</th>
+          <th>IMAGE</th>
+          <th>PORTS</th>
+        </tr>
+      </thead>
+      <tbody id="user-containers-body"></tbody>
+    </table>
   </div>
-  <div style="overflow-x:auto;"><table class="ct-table"><thead><tr><th>NAME</th><th>STATUS</th><th>IMAGE</th><th>PORTS</th></tr></thead><tbody id="user-containers-body"></tbody></table></div>
   <div id="user-action-result" class="alert" style="margin-top:14px;"></div>
 </div>
 {% endblock %}