From 2007475fc5f7185dc6fccaac040e3133b070253d Mon Sep 17 00:00:00 2001
From: Roman Dvornov <rdvornov@gmail.com>
Date: Thu, 7 Mar 2024 02:50:32 +0100
Subject: [PATCH] Add a thousandth delimiter for text in annotations in
 `struct` view

---
 CHANGELOG.md                           |  1 +
 src/views/struct/render-annotations.js | 11 ++++++++++-
 src/views/struct/style/annotation.css  | 17 +++++++++++------
 3 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f7318b6..7ce54594 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Added basic support for `TypedArray`s and `Set` values in `struct`, `signature` and `table` views
 - Added `'only'` value for `darkmode` option of `Widget` & `App`, which forces to use dark mode with no option for a user to switch to light mode
 - Added `scalarCol` option for `table` view to display the row value as the first cell
+- Added a thousandth delimiter for text in annotations in `struct` view
 - Modified the badge view to enable passing all options via config, in addition to data
 - Fixed the highlighting of Jora assertions
 - Fixed displaying supported syntaxes in view's showcase for `source` view
diff --git a/src/views/struct/render-annotations.js b/src/views/struct/render-annotations.js
index 8648b0f0..c0e54a58 100644
--- a/src/views/struct/render-annotations.js
+++ b/src/views/struct/render-annotations.js
@@ -1,4 +1,5 @@
 import { createElement } from '../../core/utils/dom.js';
+import { numDelim } from '../../core/utils/html.js';
 
 const styles = ['none', 'default', 'badge'];
 
@@ -35,7 +36,15 @@ export default function renderAnnotations(annotations) {
             class: elClassName,
             href,
             target: external ? '_blank' : undefined
-        }, hasText ? [text] : undefined);
+        });
+
+        if (hasText) {
+            if (/\d{4}/.test(text)) {
+                annotationEl.innerHTML = numDelim(text);
+            } else {
+                annotationEl.append(text);
+            }
+        }
 
         if (icon) {
             annotationEl.classList.add('icon');
diff --git a/src/views/struct/style/annotation.css b/src/views/struct/style/annotation.css
index b362f7a1..7f556efb 100644
--- a/src/views/struct/style/annotation.css
+++ b/src/views/struct/style/annotation.css
@@ -1,3 +1,10 @@
+.view-struct .value-annotations {
+    margin-left: 6px;
+}
+.view-struct .value + .value-annotations {
+    margin-left: 1.5ex;
+}
+
 .view-struct .value-annotation {
     display: inline-block;
     vertical-align: middle;
@@ -33,12 +40,6 @@
 .view-struct .value-annotation.before + .value {
     margin-left: 2px;
 }
-.view-struct .value-annotations {
-    margin-left: 6px;
-}
-.view-struct .value + .value-annotations {
-    margin-left: 1.5ex;
-}
 
 .view-struct .value-annotation.style-none,
 .view-struct .value-annotation.style-default {
@@ -73,3 +74,7 @@
     text-decoration: underline;
     text-decoration-color: #89a0bd88;
 }
+
+.view-struct .value-annotation .num-delim {
+    padding-left: 2px;
+}