tablewalk 0.0.1

package/dist/client/pagemarks.js

@@ -0,0 +1,95 @@
+/**
+ * Pages you pinned, and pages you were just on.
+ *
+ * A page is the most expensive thing anyone builds in tablewalk — sections
+ * chosen, columns picked, an order decided — and until now the only way back
+ * to one was to remember its name and type it into ⌘K. Everything else the
+ * tool remembers for you (the trail, the last root of each page, saved
+ * filters) it remembers because retyping it is the tax on coming back
+ * tomorrow, and this is the same tax on the most expensive thing.
+ *
+ * Two lists, because they answer two different questions. Pinned is "the
+ * pages I work in", stated once. Recent is "where was I", which nobody
+ * states — and a recent entry carries the record as well as the page, since
+ * being sent back to "choose a customer" is not being sent back to where you
+ * were.
+ *
+ * Per connection, like every other memory here: the same page name means a
+ * different thing on staging and on production, and the last customer you
+ * looked at on one is not a record on the other.
+ */
+import { loadJson, saveJson, state } from './core.js';
+
+const PINNED_KEY = 'tablewalk.pages.pinned.v1';
+const VISITS_KEY = 'tablewalk.pages.visits.v1';
+
+/** How many positions are worth keeping. Enough for a day's work, not a log. */
+const VISITS_MAX = 12;
+
+const conn = () => state.activeConnection ?? 'default';
+const read = (key) => loadJson(key, {})[conn()] ?? [];
+
+function write(key, value) {
+  const all = loadJson(key, {});
+  all[conn()] = value;
+  saveJson(key, all);
+}
+
+/* ---------- pinned ---------- */
+
+/**
+ * The pinned pages, each carrying its own name and base table.
+ *
+ * Stored rather than looked up, because the list of pages this connection
+ * *has* does not include the suggested one — the page every table has and
+ * nobody built — and pinning "the customer page" is exactly what someone
+ * does before they have built anything. A pin that could only name pages
+ * from a file would be a pin that silently dropped the commonest case.
+ */
+export function pinnedPages() {
+  return read(PINNED_KEY).filter((p) => p && p.id);
+}
+
+export function isPinned(pageId) {
+  return pinnedPages().some((p) => p.id === pageId);
+}
+
+/** Pin or unpin, and answer what it is now. */
+export function togglePinned(page) {
+  const pinned = pinnedPages();
+  const next = pinned.some((p) => p.id === page.id)
+    ? pinned.filter((p) => p.id !== page.id)
+    : [...pinned, { id: page.id, name: page.name, base: page.base }];
+  write(PINNED_KEY, next);
+  return next.some((p) => p.id === page.id);
+}
+
+/* ---------- where you were ---------- */
+
+/**
+ * Record a position: this page, and the record it was about.
+ *
+ * Keyed by page *and* record, so opening three customers leaves three
+ * entries rather than one that keeps changing — "the last three customers I
+ * looked at" is the useful list, and a single slot per page throws away two
+ * of them. A page with no root chosen still counts: getting back to the
+ * chooser is worth one line.
+ */
+export function rememberVisit({ pageId, name, base, key, label }) {
+  if (!pageId) return;
+  const stamp = JSON.stringify(key ?? null);
+  const visits = read(VISITS_KEY)
+    .filter((v) => !(v.pageId === pageId && JSON.stringify(v.key ?? null) === stamp));
+  visits.unshift({ pageId, name, base, key, label });
+  write(VISITS_KEY, visits.slice(0, VISITS_MAX));
+}
+
+export function recentVisits() {
+  return read(VISITS_KEY);
+}
+
+/** Forget a page entirely — it was deleted, or renamed out of existence. */
+export function forgetPage(pageId) {
+  write(PINNED_KEY, pinnedPages().filter((p) => p.id !== pageId));
+  write(VISITS_KEY, recentVisits().filter((v) => v.pageId !== pageId));
+}

package/dist/client/palette.js

@@ -0,0 +1,374 @@
+/**
+ * Cmd+K: go anywhere by typing its name.
+ *
+ * The sidebar is a fine way to browse eleven tables and a poor way to reach
+ * one of sixty-six. Past a screenful, finding a table means scrolling a list
+ * you already know the answer in — you know it is called `purchase_order_line`
+ * and the interface still makes you look for it.
+ *
+ * So this is the keyboard route to everything nameable: tables, views, saved
+ * filters, and the connections themselves. One list, ranked, because having
+ * to know which *kind* of thing you are looking for before you can search for
+ * it defeats the purpose.
+ *
+ * Matching is subsequence-based rather than substring: `pol` finds
+ * `purchase_order_line`, which is how anyone who knows the schema would type
+ * it. Exact and prefix matches still win, so typing a full name never ranks
+ * it below something that merely contains the same letters.
+ */
+import { $, el, findTable, go, state, tableView, svgEl,
+} from './core.js';
+import { allSavedFilters } from './views.js';
+import { historyFor } from './history.js';
+import { detailOf, menuItems, whenMenuChanges } from './menu.js';
+import { savedStatements } from './sqlsaved.js';
+import { openSql } from './sql.js';
+import { selectConnection } from './connections.js';
+
+/**
+ * Score `text` against a typed query. Higher is better; 0 means no match.
+ *
+ * The tiers matter more than the numbers: an exact name beats a prefix beats
+ * a substring beats a scattered subsequence. Within a tier, shorter names win
+ * — `site` should outrank `site_visit_note` for the query "site", because the
+ * shorter one is what someone typing four letters usually meant.
+ */
+export function score(text, query) {
+  if (!query) return 1;
+  const haystack = text.toLowerCase();
+  const needle = query.toLowerCase();
+
+  if (haystack === needle) return 1000;
+  if (haystack.startsWith(needle)) return 800 - haystack.length;
+  const at = haystack.indexOf(needle);
+  if (at >= 0) return 600 - at - haystack.length / 10;
+
+  /* Subsequence: every character of the query, in order, anywhere.
+
+     Two things are rewarded, and between them they are what make `pol` mean
+     `purchase_order_line` rather than `employee_skill`:
+
+       - a match at the start of a word — the beginning of the name, or the
+         letter after an underscore — because initials are how people
+         abbreviate a snake_case name in their head;
+       - runs of adjacent characters, so `porder` prefers `purchase_order`
+         over a name where those letters merely occur in that order.
+
+     Length is a small penalty rather than a large one: it breaks ties between
+     equally good matches without letting a long exact match lose to a short
+     accidental one. */
+  let i = 0;
+  let run = 0;
+  let points = 0;
+  for (let at = 0; at < haystack.length; at += 1) {
+    const char = haystack[at];
+    if (char !== needle[i]) { run = 0; continue; }
+    const boundary = at === 0 || /[^a-z0-9]/.test(haystack[at - 1]);
+    run += 1;
+    points += run + (boundary ? 12 : 0);
+    i += 1;
+    if (i === needle.length) break;
+  }
+  return i === needle.length ? 100 + points - haystack.length / 20 : 0;
+}
+
+/** Everything the palette can take you to, before filtering. */
+function entries() {
+  const items = [];
+
+  for (const table of state.schema?.tables ?? []) {
+    items.push({
+      kind: table.isView ? 'view' : 'table',
+      label: table.name,
+      // The id only adds anything when it differs — a qualified name like
+      // `app.invoice`. Repeating the name doubles its length for no gain and
+      // lets a match run across the join between the two copies.
+      search: table.id === table.name ? table.name : `${table.name} ${table.id}`,
+      detail: `${table.columns.length} column${table.columns.length === 1 ? '' : 's'}`,
+      run: () => go(tableView(table.id), 'reset'),
+    });
+  }
+
+  for (const filter of allSavedFilters()) {
+    // A saved filter is only reachable if its table still is.
+    if (!findTable(filter.table)) continue;
+    items.push({
+      kind: 'filter',
+      label: filter.name,
+      search: `${filter.name} ${filter.table} ${filter.query}`,
+      detail: filter.table,
+      run: () => go(tableView(filter.table, filter.query), 'reset'),
+    });
+  }
+
+  /* Recent queries, alongside everything else.
+
+     A query you ran ten minutes ago is a place you were, in exactly the sense
+     a table is — and searching for it by the words you typed is how you would
+     look for it anyway. Bounded to the most recent handful so the list stays
+     a shortlist rather than becoming a log. */
+  for (const entry of historyFor().slice(0, 12)) {
+    const table = entry.q.split(/\s+/)[0];
+    if (!findTable(table) && !state.schema?.tables.some((t) => t.name === table)) continue;
+    items.push({
+      kind: 'recent',
+      label: entry.q,
+      search: entry.q,
+      run: () => go(tableView(findTable(table) ? table : state.schema.tables.find((t) => t.name === table).id, entry.q), 'reset'),
+    });
+  }
+
+  /* Saved SQL, alongside everything else. A statement someone committed to
+     tablewalk.json is a place you go, in the same sense a table is. */
+  for (const statement of savedStatements()) {
+    items.push({
+      kind: 'sql',
+      label: statement.name,
+      search: `${statement.name} ${statement.description ?? ''} ${statement.sql}`,
+      detail: statement.source === 'config' ? 'from tablewalk.json' : 'saved SQL',
+      run: () => openSql(statement.sql),
+    });
+  }
+
+  /* The overflow menu's actions, searchable. Registered in one place and
+     offered in two, so nothing can be in the menu and missing from here. */
+  for (const action of menuItems()) {
+    items.push({
+      /* A page is a page, not an "action". The registry groups what it holds,
+         and the group is the closest thing to a kind that a registered
+         command has — a row labelled ACTION beside three labelled TABLE told
+         the reader nothing about what they were about to open. */
+      kind: action.group === 'Pages' ? 'page' : 'action',
+      label: action.label.replace(/…$/, ''),
+      search: `${action.label} ${detailOf(action) ?? ''}`.trim(),
+      detail: detailOf(action),
+      run: () => action.onSelect(),
+    });
+  }
+
+  for (const connection of state.connections ?? []) {
+    if (connection.id === state.activeConnection) continue;
+    items.push({
+      kind: 'database',
+      label: connection.name,
+      search: `${connection.name} ${connection.dialect}`,
+      detail: connection.detail ?? connection.dialect,
+      run: () => selectConnection(connection.id),
+    });
+  }
+
+  return items;
+}
+
+let open = false;
+
+export function openPalette() {
+  if (open) return;
+  open = true;
+
+  const input = el('input', {
+    type: 'text',
+    class: 'palette-input',
+    placeholder: 'Go to a table, view, saved filter or database…',
+    'aria-label': 'Search',
+    autocomplete: 'off',
+    spellcheck: 'false',
+  });
+  const list = el('div', { class: 'palette-list', role: 'listbox' });
+  const box = el('div', { class: 'palette' }, [input, list]);
+  const backdrop = el('div', { class: 'palette-backdrop' }, box);
+
+  let all = entries();
+  let shown = [];
+  let active = 0;
+
+  /* Commands can arrive while the palette is open — the pages group is
+     registered asynchronously on load — and a list snapshotted at open would
+     answer "nothing matches" about a page the menu already shows. */
+  const stopWatching = whenMenuChanges(() => {
+    all = entries();
+    paint();
+  });
+
+  const paint = () => {
+    const query = input.value.trim();
+    shown = all
+      .map((item) => ({ item, points: score(item.search, query) }))
+      .filter(({ points }) => points > 0)
+      .sort((a, b) => b.points - a.points)
+      // Bounded because a palette is a shortlist. Anything past twenty is
+      // reached by typing another character, not by scrolling.
+      .slice(0, 20)
+      .map(({ item }) => item);
+    active = 0;
+
+    if (!shown.length) {
+      list.replaceChildren(el('p', { class: 'palette-empty', text: query ? `Nothing matches "${query}".` : 'Nothing to go to.' }));
+      return;
+    }
+    list.replaceChildren(...shown.map((item, i) => el('div', {
+      class: `palette-item${i === active ? ' active' : ''}`,
+      role: 'option',
+      'aria-selected': String(i === active),
+      onclick: () => choose(i),
+      onmousemove: () => setActive(i),
+    }, [
+      el('span', { class: `palette-kind kind-${item.kind}`, text: item.kind }),
+      el('span', { class: 'palette-label', text: item.label }),
+      item.detail ? el('span', { class: 'palette-detail', text: item.detail }) : null,
+    ])));
+  };
+
+  const setActive = (index) => {
+    if (!shown.length) return;
+    active = (index + shown.length) % shown.length;
+    [...list.children].forEach((node, i) => {
+      node.classList.toggle('active', i === active);
+      node.setAttribute('aria-selected', String(i === active));
+    });
+    list.children[active]?.scrollIntoView({ block: 'nearest' });
+  };
+
+  const close = () => {
+    open = false;
+    stopWatching();
+    backdrop.remove();
+    document.removeEventListener('keydown', onKey, true);
+  };
+
+  const choose = (index) => {
+    const item = shown[index];
+    if (!item) return;
+    close();
+    item.run();
+  };
+
+  function onKey(e) {
+    switch (e.key) {
+      case 'Escape':
+        /* Stopped as well as prevented. The composer and the page listen for
+           Escape at the document, so one press closed the palette *and* the
+           surface underneath it — which is never what a single Escape means.
+           A modal takes the key it handles. */
+        e.preventDefault();
+        e.stopPropagation();
+        close();
+        return;
+      case 'ArrowDown': e.preventDefault(); setActive(active + 1); return;
+      case 'ArrowUp': e.preventDefault(); setActive(active - 1); return;
+      case 'Enter': e.preventDefault(); choose(active); return;
+      default:
+    }
+  }
+
+  input.addEventListener('input', paint);
+  backdrop.addEventListener('pointerdown', (e) => { if (e.target === backdrop) close(); });
+  document.addEventListener('keydown', onKey, true);
+
+  paint();
+  document.body.append(backdrop);
+  input.focus();
+}
+
+/**
+ * Bind Cmd+K / Ctrl+K.
+ *
+ * Bound on the document with capture so it works from anywhere including the
+ * query bar, which is where the hands usually are.
+ */
+export function initPalette() {
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'k' || !(e.metaKey || e.ctrlKey)) return;
+    e.preventDefault();
+    openPalette();
+  }, true);
+}
+
+/* ---------- the sidebar toggle ---------- */
+
+const SIDEBAR_KEY = 'tablewalk.sidebar-hidden';
+
+/**
+ * Hide the table list.
+ *
+ * Worth having once the palette exists: with Cmd+K reaching every table by
+ * name, the sidebar stops being the only way in and becomes 232 pixels that
+ * a wide record could use instead. The state is remembered, because a
+ * preference about screen space that resets on reload is not a preference.
+ */
+export function initSidebarToggle() {
+  const hidden = window.localStorage?.getItem(SIDEBAR_KEY) === '1';
+
+  const remember = (next) => {
+    try {
+      window.localStorage?.setItem(SIDEBAR_KEY, next ? '1' : '0');
+    } catch {
+      /* Private browsing. The toggle still works for this session. */
+    }
+  };
+
+  /* Two buttons, because a control that hides its own container cannot also
+     be the way to bring it back. The collapse button lives in the sidebar,
+     next to the filter field and directly above the list it hides; the reveal
+     button appears at the left edge where the sidebar was, which is where the
+     hand goes looking for it. */
+  /* Drawn rather than typed, for the same reason the home crumb is: `«` and
+     `»` are guillemets, which every platform sets at a different weight and
+     several set as punctuation too small to be a target. And they were
+     `--text-faint` — a mid-grey at half alpha, which is a token for a rule
+     between things, not for a control somebody is meant to find. */
+  const chevrons = (facing) => svgEl('svg', {
+    viewBox: '0 0 16 16', width: '15', height: '15', 'aria-hidden': 'true',
+    fill: 'none', stroke: 'currentColor', 'stroke-width': '1.6',
+    'stroke-linecap': 'round', 'stroke-linejoin': 'round',
+  }, facing === 'left'
+    ? [svgEl('path', { d: 'M9.5 4L5.5 8l4 4' }), svgEl('path', { d: 'M13 4L9 8l4 4' })]
+    : [svgEl('path', { d: 'M6.5 4l4 4-4 4' }), svgEl('path', { d: 'M3 4l4 4-4 4' })]);
+
+  const collapse = el('button', {
+    type: 'button',
+    class: 'sidebar-collapse',
+    'aria-label': 'Hide the table list',
+    'aria-controls': 'table-list',
+    title: 'Hide the table list (⌘B)',
+    onclick: () => apply(true),
+  }, chevrons('left'));
+
+  const reveal = el('button', {
+    type: 'button',
+    class: 'sidebar-reveal',
+    'aria-label': 'Show the table list',
+    'aria-controls': 'table-list',
+    title: 'Show the table list (⌘B)',
+    onclick: () => apply(false),
+  }, chevrons('right'));
+
+  function apply(next) {
+    document.body.classList.toggle('sidebar-hidden', next);
+    remember(next);
+    collapse.setAttribute('aria-expanded', String(!next));
+    reveal.setAttribute('aria-expanded', String(!next));
+    // Focus follows the control that survives, so the keyboard is never left
+    // on a button that has just been hidden.
+    if (document.activeElement === collapse || document.activeElement === reveal) {
+      (next ? reveal : collapse).focus({ preventScroll: true });
+    }
+  }
+
+  /* Sharing the filter field's row rather than taking one of its own: the
+     sidebar's vertical space is the list, and a button on a line by itself
+     would cost a table's worth of it. */
+  const filter = $('table-filter');
+  const row = el('div', { class: 'sidebar-filter-row' });
+  filter.replaceWith(row);
+  row.append(filter, collapse);
+  document.querySelector('.layout')?.prepend(reveal);
+
+  apply(hidden);
+
+  document.addEventListener('keydown', (e) => {
+    if (e.key !== 'b' || !(e.metaKey || e.ctrlKey)) return;
+    e.preventDefault();
+    apply(!document.body.classList.contains('sidebar-hidden'));
+  }, true);
+}