Merge pull request #150 from LennartvdM/codex/add-activity-balance-history-barcode-feature

Add activity balance history view to visuals

Author: LennartvdM

web/style.css

@@ -1214,6 +1214,15 @@ body {
   box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.25);
 }
 
+.activity-share__track.is-interactive {
+  cursor: pointer;
+}
+
+.activity-share__track.is-interactive:focus-visible {
+  outline: 2px solid rgba(129, 140, 248, 0.65);
+  outline-offset: 2px;
+}
+
 .activity-share__segment {
   flex: 1 1 0%;
   display: flex;
@@ -1245,6 +1254,14 @@ body {
   color: rgba(148, 163, 184, 0.85);
 }
 
+.activity-share__hint {
+  margin: 0;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(148, 163, 184, 0.75);
+}
+
 .activity-share__tooltip {
   position: absolute;
   transform: translate(-50%, -100%) translateY(-12px);
@@ -1281,6 +1298,176 @@ body {
   display: none;
 }
 
+.activity-balance-history {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 18px;
+  background: rgba(15, 23, 42, 0.72);
+  border: 1px solid rgba(148, 163, 184, 0.22);
+  border-radius: 18px;
+  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.28);
+  min-height: 0;
+}
+
+.activity-balance-history[hidden] {
+  display: none;
+}
+
+.activity-balance-history__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.activity-balance-history__title {
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #e2e8f0;
+}
+
+.activity-balance-history__hint {
+  margin: 0;
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(148, 163, 184, 0.75);
+}
+
+.activity-balance-history__stack {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-height: 0;
+}
+
+.activity-balance-history__stack[hidden] {
+  display: none;
+}
+
+.activity-balance-history__row {
+  display: flex;
+  align-items: stretch;
+  gap: 10px;
+  flex: 1 1 0%;
+  min-height: 8px;
+}
+
+.activity-balance-history__run-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-width: 78px;
+  flex: 0 0 auto;
+}
+
+.activity-balance-history__run {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgba(203, 213, 225, 0.85);
+}
+
+.activity-balance-history__run-meta {
+  font-size: 10px;
+  color: rgba(148, 163, 184, 0.65);
+}
+
+.activity-balance-history__run-meta[hidden] {
+  display: none;
+}
+
+.activity-balance-history__bar {
+  flex: 1;
+  display: flex;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(148, 163, 184, 0.24);
+  background: rgba(148, 163, 184, 0.1);
+  min-height: 0;
+}
+
+.activity-balance-history__segment {
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  min-width: 3px;
+  transition: none;
+}
+
+.activity-balance-history__segment:hover {
+  transform: none;
+}
+
+.activity-balance-history__segment-label {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 0 6px;
+  white-space: nowrap;
+  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.35);
+}
+
+.activity-balance-history__empty {
+  margin: 0;
+  padding: 12px;
+  border-radius: 12px;
+  background: rgba(15, 23, 42, 0.4);
+  color: rgba(203, 213, 225, 0.82);
+  font-size: 12px;
+  text-align: center;
+}
+
+.activity-balance-history__empty[hidden] {
+  display: none;
+}
+
+.activity-balance-history__tooltip {
+  position: absolute;
+  transform: translate(-50%, -100%) translateY(-12px);
+  background: rgba(15, 23, 42, 0.92);
+  border-radius: 12px;
+  padding: 8px 10px;
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.45);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  pointer-events: none;
+  color: #f8fafc;
+  z-index: 3;
+}
+
+.activity-balance-history__tooltip strong {
+  font-size: 12px;
+  font-weight: 700;
+  color: #cbd5f5;
+}
+
+.activity-balance-history__tooltip span {
+  display: block;
+  color: rgba(226, 232, 240, 0.92);
+}
+
+.activity-balance-history__tooltip .meta {
+  font-size: 10px;
+  color: rgba(148, 163, 184, 0.7);
+  text-transform: none;
+}
+
+.activity-balance-history__tooltip[hidden] {
+  display: none;
+}
+
 .radial-urchin__legend-empty {
   margin: 0;
   color: #94a3b8;
@@ -1429,6 +1616,11 @@ body {
   overflow: hidden;
 }
 
+.radial-urchin--history-open .radial-urchin__stage {
+  flex: 0 0 200px;
+  min-height: 200px;
+}
+
 .radial-urchin__canvas {
   width: 100%;
   height: 100%;