List the tables beside the one being read (#229)

Reaching a neighbouring table meant going back to the index first. The list now
sits to the left of a table's detail, on the same card as the blocks beside it,
with a filter over it and the table being read filled in.

Author: paul-dicristina

crates/data-dict-cli/render/app.js

@@ -434,6 +434,41 @@ function RelatedTablesBox({ table: t }) {
   </div>`;
 }
 
+/* The list of tables beside the one being read, so a neighbour is one click away
+   without going back to the index. It sits outside `TablePage` on purpose: that
+   page is keyed by table name and remounts on every navigation, which would clear
+   this filter with the very click that used it. */
+function TableNav({ current }) {
+  const [filter, setFilter] = useState("");
+  /* Starts closed so the list costs no vertical space on a phone; the toggle
+     is hidden on wide screens, where `open` is ignored. */
+  const [open, setOpen] = useState(false);
+  const ql = filter.trim().toLowerCase();
+  /* Alphabetical, not the dictionary's order: this is for finding a table by
+     name, which is what the filter above it is for too. */
+  const names = ALL_TABLES.map((t) => t.name).sort((a, b) => a.localeCompare(b));
+  const shown = names.filter((n) => !ql || n.toLowerCase().includes(ql));
+
+  return html`<nav class=${"tnav" + (open ? " open" : "")} aria-label="Tables">
+    <button class="tnav-toggle" type="button" aria-expanded=${open}
+      onClick=${() => setOpen(!open)}>
+      <span class="chev" aria-hidden="true">›</span>
+      Tables (${names.length})
+    </button>
+    <input class="tnav-filter" type="search" placeholder="Filter tables" autocomplete="off"
+      value=${filter} onInput=${(e) => setFilter(e.target.value)} />
+    ${shown.length
+      ? html`<ul class="tnav-list">
+          ${shown.map((n) => html`<li key=${n}>
+            <a class=${"tnav-item" + (n === current ? " on" : "")} href=${"#" + n}
+              aria-current=${n === current ? "page" : null}
+              onClick=${() => setOpen(false)}>${n}</a>
+          </li>`)}
+        </ul>`
+      : html`<p class="tnav-none">No tables match.</p>`}
+  </nav>`;
+}
+
 /* Mounted per table (keyed by name in App), so filter and sort state start
    fresh on every navigation. */
 function TablePage({ table: t, targetCol }) {
@@ -593,8 +628,11 @@ function App() {
       </section>
     </div>
     ${openTable &&
-      html`<${TablePage} key=${openTable.name} table=${openTable}
-        targetCol=${route.col} />`}
+      html`<div id="table-view">
+        <${TableNav} current=${openTable.name} />
+        <${TablePage} key=${openTable.name} table=${openTable}
+          targetCol=${route.col} />
+      </div>`}
     ${glossOpen && html`<${GlossaryModal} onClose=${() => setGlossOpen(false)} />`}`;
 }
 

crates/data-dict-cli/render/tables.css

@@ -143,6 +143,45 @@ abbr.gterm:hover { text-decoration-color: var(--accent1); }
    the card's padding leaves them just inside its border. */
 .tpage-list { padding: 0 14px; }
 
+/* ---- the table list beside a table ---- */
+
+#table-view { display: flex; align-items: flex-start; gap: 16px; }
+#table-view #table-page { flex: 1 1 auto; min-width: 0; }
+
+/* The same card as the blocks it sits beside. It follows the page down, since a
+   column list runs long and the point of the list is to leave from anywhere; the
+   names scroll inside it when there are more than the window holds. */
+.tnav {
+  flex: none; width: 232px;
+  padding: 12px;
+  border: 1px solid var(--rule);
+  border-radius: 10px;
+  background: var(--paper);
+  position: sticky; top: 14px;
+  max-height: calc(100vh - 28px);
+  display: flex; flex-direction: column; gap: 10px;
+}
+/* Wide screens show the list outright, so the toggle only exists for the
+   narrow-width rules in app.css. */
+.tnav-toggle { display: none; }
+.tnav-filter {
+  flex: none; min-width: 0; padding: 7px 11px;
+  border: 1px solid var(--rule); border-radius: 8px;
+  background: var(--paper); color: var(--ink); font-size: var(--text-sm);
+}
+.tnav-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
+.tnav-item {
+  display: block; padding: 5px 8px; border-radius: 6px;
+  font-family: var(--font-mono); font-size: var(--text-sm);
+  color: var(--ink); text-decoration: none;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.tnav-item:hover { background: var(--chip); }
+.tnav-item:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
+/* the table being read, wearing the same fill as a held key badge */
+.tnav-item.on { background: var(--accent1); color: var(--on-accent1); font-weight: 650; }
+.tnav-none { margin: 0; padding: 4px 8px; color: var(--ink-faint); font-size: var(--text-sm); }
+
 /* The name, its stats and the description on the left; the related-tables box
    set against the card's right edge, its top level with the name. */
 .tpage-top {
@@ -318,3 +357,23 @@ button.val { font: inherit; }
   .tpage-headmain { flex: 1 1 100%; }
   .tpage-related { max-width: none; }
 }
+
+/* Narrow widths: the list folds behind a toggle, since an open list would
+   push the table itself a screen or more down the page. These rules sit at
+   the end of the last-concatenated stylesheet so they beat the base rules
+   above at equal specificity. */
+@media (max-width: 720px) {
+  #table-view { display: block; }
+  .tnav { width: auto; position: static; max-height: none; margin-bottom: 14px; padding: 0; }
+  .tnav-toggle {
+    display: flex; align-items: center; gap: 8px; width: 100%;
+    padding: 10px 12px; border: 0; background: none; cursor: pointer;
+    color: var(--ink); font: inherit; text-align: left;
+  }
+  .tnav-toggle .chev { display: inline-block; transition: transform 0.15s; color: var(--ink-faint); }
+  .tnav.open .tnav-toggle .chev { transform: rotate(90deg); }
+  .tnav:not(.open) .tnav-filter, .tnav:not(.open) .tnav-list, .tnav:not(.open) .tnav-none { display: none; }
+  .tnav.open { padding: 12px; }
+  .tnav.open .tnav-toggle { padding: 0 0 2px; }
+  .tnav.open .tnav-list { max-height: 50vh; }
+}