tabbed DNC card, machine-numbered downloads, themed backup history

plugins/backups/frontend/views/BackupHistory.vue

@@ -171,9 +171,11 @@ async function download(rev, fmt) {
   const response = await api.get(
     `/backups/revisions/${rev.backuprevisionid}/download?format=${fmt.id}`,
     { responseType: 'blob' })
+  // Name for the MACHINE: 3204.reg, matching both the server's
+  // Content-Disposition and how the per-machine backups on the share are named.
   const suffix = fmt.id === 'wow6432node' ? '-wow6432node' : ''
-  const name = `${rev.sourcefilename || rev.backupkind}${suffix}${fmt.ext}`
-    .replace(/(\.reg)+$/, '.reg')
+  const stem = rev.assetnumber || rev.backupkind
+  const name = `${stem}${suffix}${fmt.ext}`
   const link = document.createElement('a')
   link.href = URL.createObjectURL(response.data)
   link.download = name
@@ -185,39 +187,77 @@ onMounted(load)
 </script>
 
 <style scoped>
-.bh { padding: 1.5rem; }
+/* Themed throughout: this page renders in light and dark, so every colour is a
+   variable from the app palette. Hardcoded hex here showed up as a white table
+   on a dark page. */
+.bh { padding: 1.5rem; color: var(--text); }
 .bh-head { margin-bottom: 1rem; }
+.bh-head h1 { margin: 0.3rem 0 0; }
 .bh-back {
   font-size: 0.85rem; background: none; border: none; padding: 0;
-  color: #0d6efd; cursor: pointer;
+  color: var(--link); cursor: pointer;
+}
+.bh-back:hover { text-decoration: underline; }
+.bh-sub { color: var(--text-light); margin: 0.2rem 0 0; }
+.bh-note, .bh-muted { color: var(--text-light); }
+.bh-error { color: var(--danger); }
+
+.bh-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
 }
-.bh-sub { color: #666; margin: 0.2rem 0 0; }
-.bh-note, .bh-muted { color: #666; }
-.bh-error { color: #c00; }
-.bh-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
 .bh-table th, .bh-table td {
-  text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid #e0e0e0;
+  text-align: left;
+  padding: 0.55rem 0.7rem;
+  border-bottom: 1px solid var(--border);
   vertical-align: top;
 }
-.bh-latest { background: #f4f9ff; }
+.bh-table th {
+  color: var(--text-light);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.bh-table tr:last-child td { border-bottom: none; }
+
+/* The current revision is the one a tech restores from, so it is tinted rather
+   than merely labelled. color-mix keeps that tint correct in both themes
+   instead of baking in a light-blue that vanishes on a dark background. */
+.bh-latest td { background: color-mix(in srgb, var(--primary) 10%, transparent); }
 .bh-badge {
-  font-size: 0.7rem; background: #0d6efd; color: #fff;
-  border-radius: 3px; padding: 0.05rem 0.35rem; margin-left: 0.4rem;
+  font-size: 0.68rem; background: var(--primary); color: #fff;
+  border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.4rem;
+  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
 }
-.bh-mono, .bh-path { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.82rem; }
-.bh-path { word-break: break-all; }
+
+.bh-mono, .bh-path {
+  font-family: ui-monospace, Menlo, Consolas, monospace;
+  font-size: 0.82rem;
+}
+.bh-path { word-break: break-all; color: var(--text-light); }
 .bh-actions-col { width: 22rem; }
+
 .bh-btn {
-  font-size: 0.78rem; margin: 0 0.3rem 0.3rem 0; padding: 0.25rem 0.5rem;
-  border: 1px solid #0d6efd; background: #fff; color: #0d6efd;
-  border-radius: 4px; cursor: pointer;
+  font-size: 0.78rem; margin: 0 0.3rem 0.3rem 0; padding: 0.28rem 0.6rem;
+  border: 1px solid var(--primary); background: transparent;
+  color: var(--primary); border-radius: 4px; cursor: pointer;
 }
-.bh-btn:hover { background: #0d6efd; color: #fff; }
+.bh-btn:hover { background: var(--primary); color: #fff; }
 .bh-link {
-  background: none; border: none; color: #0d6efd; cursor: pointer;
+  background: none; border: none; color: var(--link); cursor: pointer;
   padding: 0; font-size: 0.82rem; text-decoration: underline;
 }
+
 .bh-diff { margin: 0 0 1.5rem; }
-.bh-before { color: #b00; }
-.bh-after { color: #070; }
+.bh-diff h3 { font-size: 0.95rem; margin-bottom: 0.4rem; }
+/* Named AND coloured: a red/green pair alone does not survive a colourblind
+   reader, so the before/after columns are headed as well as tinted. */
+.bh-before { color: var(--danger); }
+.bh-after { color: var(--success-dark, var(--success)); }
 </style>