Updates tab (apt list/refresh/upgrade/changelog, reboot flag) on a new background tasks package with live WS streaming; header power button with hostname confirmation

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-17 17:40:29 -07:00
co-authored by Claude Fable 5.1
parent 41c2f05535
commit acb11193b9
11 changed files with 975 additions and 6 deletions
+25
View File
@@ -182,3 +182,28 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
.cron-list { width: 100%; border-right: 0; } .has-sel .cron-list { display: none; }
.cron-detail .back { display: inline-block; }
}
/* updates */
.updates .pkgs { padding: 0; }
.pkg { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.pkg.sel { background: var(--bg3); }
.pkg input { width: 16px; height: 16px; }
.pkg-name { min-width: 0; display: flex; flex-direction: column; cursor: pointer; }
.pkg-name .n { font-family: ui-monospace, monospace; font-size: 13px; }
.pkg-name .d { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-ver { font-family: ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.badge.bad { color: var(--bad); border-color: var(--bad); margin-left: 8px; }
.changelog { margin: 0 12px 8px; max-height: 40vh; }
.notice.attn { border-color: var(--s2); color: var(--fg); }
.task { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.task-out { border: 0; border-radius: 0; max-height: 45vh; min-height: 120px; }
@media (max-width: 800px) { .pkg { grid-template-columns: auto 1fr; } .pkg-ver { grid-column: 2; white-space: normal; } }
/* power + modal */
.power { font-size: 15px; } .power.attn { color: var(--s2); }
.modal-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { width: min(420px, 100%); background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.modal h3 { margin: 0; font-size: 15px; }
.modal label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.modal input { padding: 9px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 16px; }
.btn.danger { color: var(--bad); border-color: var(--bad); } .btn.danger:disabled { opacity: .4; }