From 6721dec6ebbfa36f0de906438890adeee07bdd04 Mon Sep 17 00:00:00 2001
From: Thomas Weber <weber_t@mailbox.org>
Date: Thu, 1 Jul 2021 21:07:56 -0500
Subject: [PATCH] Display "(empty)" when list is empty

---
 src/scaffolding/monitor.js | 7 +++++++
 src/scaffolding/style.css  | 4 ++++
 2 files changed, 11 insertions(+)

diff --git a/src/scaffolding/monitor.js b/src/scaffolding/monitor.js
index ffcd059..1d12a61 100644
--- a/src/scaffolding/monitor.js
+++ b/src/scaffolding/monitor.js
@@ -256,7 +256,12 @@ class ListMonitor extends Monitor {
     this.endPoint = document.createElement('div');
     this.endPoint.className = styles.monitorRowsEndpoint;
 
+    this.emptyLabel = document.createElement('div');
+    this.emptyLabel.textContent = '(empty)';
+    this.emptyLabel.className = styles.monitorEmpty;
+
     this.rowsInner.appendChild(this.endPoint);
+    this.rowsInner.appendChild(this.emptyLabel);
     this.rowsOuter.appendChild(this.rowsInner);
     this.root.appendChild(this.label);
     this.root.appendChild(this.rowsOuter);
@@ -375,6 +380,8 @@ class ListMonitor extends Monitor {
     let endIndex = Math.ceil((this.scrollTop + this.height) / ROW_HEIGHT) + 5;
     if (endIndex > value.length - 1) endIndex = value.length - 1;
 
+    this.emptyLabel.style.display = value.length ? 'none' : '';
+
     const rowsNeeded = endIndex - startIndex + 1;
     while (this.rows.length < rowsNeeded) {
       const row = new Row();
diff --git a/src/scaffolding/style.css b/src/scaffolding/style.css
index 2910de1..19c86c9 100644
--- a/src/scaffolding/style.css
+++ b/src/scaffolding/style.css
@@ -198,6 +198,10 @@
   user-select: text;
   white-space: pre;
 }
+.monitor-empty {
+  text-align: center;
+  padding: 5px;
+}
 
 .controls-bar {
   transform: translateY(-100%);