add dates, tweak css a bit

static/css/tree.css

@@ -71,7 +71,7 @@
 
 /* Compute an indent level appropriate for the viewport. */
 .tree ul {
-    padding-left: clamp(12px, 2vw, 24px);
+    padding-left: clamp(8px, 2vw, 24px);
 }
 
 /* Top level should not have an indent. */
@@ -187,9 +187,6 @@ th-bc {
 
 /* Display a chevron hinting that the collapsed branch has more content in its children. */
 .tree details:not([open])>summary>th-bc>:last-child {
-    /* Add some padding such that text wraps together with this element. */
-    padding-right: 32px;
-
     &::after {
         content: '\00A0';
         display: inline-block;
@@ -218,6 +215,7 @@ th-bb {
 
     display: flex;
     flex-direction: row;
+    align-items: center;
 
     /* Keep the button bar invisible by default. */
     opacity: 0%;
@@ -228,13 +226,26 @@ th-bb {
     opacity: 100%;
 }
 
-/* For media without hover functionality, th-bb should always be visible */
+/* For media without hover functionality, th-bb should always be visible. */
 @media (hover: none) {
     .tree th-bb {
         opacity: 100%;
     }
 }
 
+/* Style branch dates to be smaller and less noticable. */
+th-bb .branch-date {
+    opacity: 50%;
+    font-size: 0.8em;
+}
+
+/* Hide branch dates on very small displays. No clue how to fix this just yet. */
+@media (max-width: 600px) {
+    th-bb .branch-date {
+        display: none;
+    }
+}
+
 /* Icons (used in the button bar) */
 .tree {
     & .icon {
@@ -255,11 +266,15 @@ th-bb {
     }
 }
 
+/* Style the loading text to not be too attention grabbing. */
 .tree .link-loading {
     padding-left: 24px;
     opacity: 50%;
 }
 
+/* Highlight branch selected by # or ? in URL.
+    The latter is not supported by CSS so we use some auxiliary JavaScript to add a .target class
+    to the element highlighted by ?. */
 .tree :target,
 .tree .target {
 
@@ -270,4 +285,4 @@ th-bb {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
     }
-}
+}

static/js/tree.js

@@ -1,6 +1,7 @@
 // This is definitely not a three.js ripoff.
 
 import { navigationMap } from "/navmap.js";
+import * as ulid from './ulid.js';
 
 /* Branch persistence */
 
@@ -22,19 +23,41 @@ class Branch extends HTMLLIElement {
     constructor() {
         super();
 
+        this.isLeaf = this.classList.contains("leaf");
+
         this.details = this.childNodes[0];
         this.innerUL = this.details.childNodes[1];
 
+        if (this.isLeaf) {
+            this.contentContainer = this.childNodes[0];
+        } else {
+            this.contentContainer = this.details.childNodes[0];
+        }
+        this.bulletPoint = this.contentContainer.childNodes[0];
+        this.branchContent = this.contentContainer.childNodes[1];
+        this.buttonBar = this.contentContainer.childNodes[2];
+
         let doPersist = !this.hasAttribute("data-th-do-not-persist");
         let isOpen = branchIsOpen(this.id);
         if (doPersist && isOpen !== undefined) {
             this.details.open = isOpen;
         }
-        this.details.addEventListener("toggle", _ => {
+        if (!this.isLeaf) {
-            saveBranchIsOpen(this.id, this.details.open);
+            this.details.addEventListener("toggle", _ => {
-        });
+                saveBranchIsOpen(this.id, this.details.open);
+            });
+        }
 
-        Branch.branchesByNamedID.set(this.id.split(':')[1], this);
+        let namedID = this.id.split(':')[1];
+        Branch.branchesByNamedID.set(namedID, this);
+
+        if (ulid.isCanonicalUlid(namedID)) {
+            let timestamp = ulid.getTimestamp(namedID);
+            let date = document.createElement("span");
+            date.classList.add("branch-date");
+            date.innerText = timestamp.toLocaleDateString();
+            this.buttonBar.insertBefore(date, this.buttonBar.firstChild);
+        }
     }
 }