Properties: colours by type, readable keys, lines between

Co-Authored-By: Claude Opus 5.5 <[email protected]>

Frontend/src/Properties.js

@@ -46,6 +46,23 @@ export function IsBoolean(Value) {
   return /^(true|false)$/i.test(Value);
 }
 
+// What a value is, for its colour: quotes always make it text ("42" is text,
+// 42 a number), like YAML. Same rules as the client's Properties.ValueKind.
+export function ValueKind(Value) {
+  if (Value === "") return "Empty";
+  if (/^(["']).*\1$/.test(Value)) return "String";
+  if (IsBoolean(Value)) return "Boolean";
+  if (/^[+-]?\d+$/.test(Value)) return "Integer";
+  if (/^[+-]?(\d+\.\d*([eE][+-]?\d+)?|\.\d+([eE][+-]?\d+)?|\d+[eE][+-]?\d+)$/.test(Value)) return "Float";
+  if (/^\d{4}-\d{2}-\d{2}([T ]\d{2}:\d{2}(:\d{2})?)?$/.test(Value)) return "Date";
+  return "String";
+}
+
+// A value as shown: without the quotes that only said "this is text".
+export function ShownValue(Value) {
+  return /^(["']).*\1$/.test(Value) ? Value.slice(1, -1) : Value;
+}
+
 // The note without its properties block (what Markdown renders).
 export function WithoutProperties(Text) {
   const Parsed = ParseProperties(Text);
@@ -99,9 +116,13 @@ export function PropertiesHtml(Parsed, RenderInline, Escape, CanEdit) {
       const Disabled = CanEdit ? "" : " disabled";
       Shown = `<input type="checkbox" class="PropertyCheckbox" data-line="${Line}"${Checked}${Disabled}>`;
     } else if (List) {
-      Shown = List.map((Item) => `<span class="PropertyChip">${RenderInline(Item)}</span>`).join("");
+      Shown = List.map(
+        (Item) => `<span class="PropertyChip PropertyKind${ValueKind(Item)}">${RenderInline(ShownValue(Item))}</span>`,
+      ).join("");
+    } else if (Value) {
+      Shown = `<span class="PropertyKind${ValueKind(Value)}">${RenderInline(ShownValue(Value))}</span>`;
     } else {
-      Shown = Value ? RenderInline(Value) : `<span class="PropertyEmpty">Empty</span>`;
+      Shown = `<span class="PropertyEmpty">Empty</span>`;
     }
     return `<div class="PropertyRow"><span class="PropertyKey">${Escape(Key)}</span><span class="PropertyValue">${Shown}</span></div>`;
   });

Frontend/src/Styles/Theme.css

@@ -527,7 +527,11 @@ img,
   display: flex;
   align-items: center;
   gap: 12px;
-  padding: 2px 0;
+  padding: 4px 0;
+}
+
+.PropertyRow + .PropertyRow {
+  border-top: 1px solid var(--Border);
 }
 
 .PropertyKey {
@@ -536,7 +540,7 @@ img,
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--TextMuted);
+  color: var(--Text);
 }
 
 .PropertyValue {
@@ -552,7 +556,23 @@ img,
   padding: 0 6px;
   border-radius: 4px;
   background: var(--SurfaceAlt);
-  color: var(--Purple);
+}
+
+/* Values by kind (Properties.js ValueKind): text, whole and decimal numbers, dates. */
+.PropertyKindString {
+  color: var(--Green);
+}
+
+.PropertyKindInteger {
+  color: var(--Orange);
+}
+
+.PropertyKindFloat {
+  color: var(--Yellow);
+}
+
+.PropertyKindDate {
+  color: var(--Blue);
 }
 
 .PropertyEmpty {