feat: add dense barcode mode to balance history

Author: LennartvdM

web/style.css

@@ -1348,6 +1348,10 @@ body {
   min-height: 0;
 }
 
+.activity-balance-history--dense .activity-balance-history__stack {
+  gap: 1px;
+}
+
 .activity-balance-history__stack[hidden] {
   display: none;
 }
@@ -1360,6 +1364,11 @@ body {
   min-height: 8px;
 }
 
+.activity-balance-history--dense .activity-balance-history__row {
+  gap: 0;
+  min-height: 2px;
+}
+
 .activity-balance-history__run-wrapper {
   display: flex;
   flex-direction: column;
@@ -1396,6 +1405,10 @@ body {
   min-height: 0;
 }
 
+.activity-balance-history--dense .activity-balance-history__bar {
+  border-radius: 6px;
+}
+
 .activity-balance-history__segment {
   padding: 0;
   align-items: center;
@@ -1416,6 +1429,10 @@ body {
   text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
 }
 
+.activity-balance-history--dense .activity-balance-history__segment-label {
+  display: none;
+}
+
 .activity-balance-history__empty {
   margin: 0;
   padding: 12px;

web/ui/visuals/ActivityBalanceHistory.js

@@ -1,6 +1,8 @@
 import { formatDuration } from './useUrchinLayout.js';
 import { computeSegmentTextColor } from './ActivityShareBar.js';
 
+const DENSE_BARCODE_THRESHOLD = 19;
+
 export class ActivityBalanceHistory {
   constructor(container) {
     this.root = document.createElement('div');
@@ -72,37 +74,33 @@ export class ActivityBalanceHistory {
 
     const fragment = document.createDocumentFragment();
     const displayEntries = this.entries.slice().reverse();
+    const isDenseBarcode = displayEntries.length > DENSE_BARCODE_THRESHOLD;
+    this.root.classList.toggle('activity-balance-history--dense', isDenseBarcode);
+
     displayEntries.forEach((entry, index) => {
       const runNumber = Number.isFinite(entry?.runNumber)
         ? entry.runNumber
         : this.entries.length - index;
-      const badge = document.createElement('span');
-      badge.className = 'activity-balance-history__run';
-      badge.textContent = entry.label || `Run #${runNumber}`;
-      if (entry.timestampLabel) {
-        badge.title = entry.timestampLabel;
-      }
-
-      const meta = document.createElement('span');
-      meta.className = 'activity-balance-history__run-meta';
-      meta.textContent = entry.timestampLabel || '';
-      if (!meta.textContent) {
-        meta.hidden = true;
-      }
-
-      const labelWrapper = document.createElement('div');
-      labelWrapper.className = 'activity-balance-history__run-wrapper';
-      labelWrapper.append(badge);
-      if (!meta.hidden) {
-        labelWrapper.append(meta);
-      }
-
       const bar = document.createElement('div');
       bar.className = 'activity-balance-history__bar';
       bar.setAttribute('role', 'list');
       bar.dataset.index = String(runNumber);
       bar.addEventListener('mouseleave', this.boundHideTooltip);
 
+      if (isDenseBarcode) {
+        const tooltipParts = [];
+        const labelText = entry.label || `Run #${runNumber}`;
+        if (labelText) {
+          tooltipParts.push(labelText);
+        }
+        if (entry.timestampLabel) {
+          tooltipParts.push(entry.timestampLabel);
+        }
+        if (tooltipParts.length > 0) {
+          bar.title = tooltipParts.join(' · ');
+        }
+      }
+
       entry.segments.forEach((segment, segmentIndex) => {
         const element = document.createElement('div');
         element.className = 'activity-share__segment activity-balance-history__segment';
@@ -136,7 +134,33 @@ export class ActivityBalanceHistory {
       const row = document.createElement('div');
       row.className = 'activity-balance-history__row';
       row.dataset.index = String(runNumber);
-      row.append(labelWrapper, bar);
+
+      if (!isDenseBarcode) {
+        const badge = document.createElement('span');
+        badge.className = 'activity-balance-history__run';
+        badge.textContent = entry.label || `Run #${runNumber}`;
+        if (entry.timestampLabel) {
+          badge.title = entry.timestampLabel;
+        }
+
+        const meta = document.createElement('span');
+        meta.className = 'activity-balance-history__run-meta';
+        meta.textContent = entry.timestampLabel || '';
+        if (!meta.textContent) {
+          meta.hidden = true;
+        }
+
+        const labelWrapper = document.createElement('div');
+        labelWrapper.className = 'activity-balance-history__run-wrapper';
+        labelWrapper.append(badge);
+        if (!meta.hidden) {
+          labelWrapper.append(meta);
+        }
+
+        row.append(labelWrapper);
+      }
+
+      row.append(bar);
 
       fragment.append(row);
     });