dashboard: document root in title

1 files changed, 18 insertions, 5 deletions

diff --git a/src/api/dashboard/dashboard.html b/src/api/dashboard/dashboard.html
index baffcf2..8bec226 100644
--- a/src/api/dashboard/dashboard.html
+++ b/src/api/dashboard/dashboard.html
@@ -76,6 +76,7 @@
   section.collapsed { align-self: start; }
   section.collapsed h2 { margin: 0; }
   section.collapsed h2 .toggle { display: none; }
+  section.collapsed h2 button.add { display: none; }
   /* A choice beside a box's title (the console's filter). */
   section h2 label.choice { font-size: 12px; text-transform: none; letter-spacing: 0;
     margin-left: 1em; cursor: pointer; }
@@ -240,11 +241,17 @@
     max-height: 20em; overflow: auto; }
   .note { color: var(--muted); font-style: italic; }
   .error { color: var(--bad); }
-  .tree button.add { font: inherit; line-height: 1; padding: 0 4px; margin-left: 4px;
+  .tree button.add, #document-head button.add { font: inherit; line-height: 1; padding: 0 4px; margin-left: 4px;
     color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 3px;
     cursor: pointer; }
-  .tree button.add:hover { color: var(--fg); border-color: var(--muted); }
+  .tree button.add:hover, #document-head button.add:hover { color: var(--fg); border-color: var(--muted); }
   .tree .nested { padding-left: 1.1em; }
+  /* The store's root is the box: its keys listed at the top level, its size and its "+"
+     in the title (`#document-head`). */
+  #document > details.root { padding-left: 0; }
+  #document > details.root > summary { display: none; }
+  section h2 .count { text-transform: none; letter-spacing: 0; font-weight: normal;
+    margin-left: .5em; }
   .editor input.extra[type=text] { width: 12em; margin-bottom: 2px; display: block; }
   .editor { margin: 2px 0 4px; }
   .tree details > .editor { margin-left: 1.1em; }
@@ -332,7 +339,7 @@
     <div class="scroll"><div id="stats" class="tree"></div></div>
   </section>
   <section id="document-box">
-    <h2>Document<button id="remake-toggle" class="toggle" aria-expanded="false"
+    <h2>Document<span id="document-head" class="count"></span><button id="remake-toggle" class="toggle" aria-expanded="false"
       title="Propose a remake of the document: compacted, replaced by JSON, or imported from an Automerge document (docs/remakes.md)">remake…</button></h2>
     <form id="remake" class="popdown" hidden>
       <label>kind <select id="remake-kind">
@@ -1779,8 +1786,14 @@ function documentChanged(change) {
     if (change.all || change.paths.some(path => related(path, branch.path))) branch.refresh();
   }
 }
-document.getElementById("document").replaceChildren(
-  documentEntry("store", { type: "map", size: "…" }, []));
+// The store's root, always open: its keys are the box's top level, and its size and its
+// "+" (everything its row has but its key) go into the title.
+const documentRoot = documentEntry("store", { type: "map", size: "…" }, []);
+documentRoot.classList.add("root");
+documentRoot.open = true;
+document.getElementById("document-head").append(
+  ...[...documentRoot.querySelector(":scope > summary").childNodes].slice(1));
+document.getElementById("document").replaceChildren(documentRoot);
 
 // A box is busy while text in it is selected: drawing it anew would lose the selection,
 // so it waits (`held`) until it's gone.