htmlboard 0.2.0 → 0.4.0

package/src/client/explorer.css

@@ -16,17 +16,26 @@
   src: url(fonts/bricolage-grotesque.woff2) format('woff2');
 }
 
+/* One cool family of greys at the accent's hue (oklch 258, barely tinted), so the chrome sits with
+   the logo's blue and keeps out of the designs' way. Text colours pass WCAG AA on every surface. */
 :root {
-  --x-canvas: #1C1C1E;
-  --x-dot: rgb(255 255 255 / 0.09);
-  --x-panel: #252527;
-  --x-raised: #2E2E31;
-  --x-line: #3A3A3E;
-  --x-text: #EDEDEB;
-  --x-text-soft: #9D9DA3;
-  --x-accent: #3D9DFF;
-  --x-wash: rgb(255 255 255 / 0.07);
+  --x-canvas: #15171B;      /* oklch(0.205 0.008 258) */
+  --x-panel: #1E2126;       /* oklch(0.248 0.009 258) */
+  --x-raised: #282C30;      /* oklch(0.29 0.01 258) */
+  --x-line: #36393F;        /* oklch(0.345 0.011 258) */
+  --x-line-soft: #2B2E33;   /* oklch(0.3 0.01 258): dividers inside a panel */
+  --x-text: #EDEEF1;        /* 13.9:1 on the panel */
+  --x-text-soft: #A2A8B1;   /* 6.7:1 */
+  --x-text-faint: #878D95;  /* 4.8:1 */
+  --x-accent: #3D9DFF;      /* the logo's pegs */
+  --x-accent-text: #8BC2FF; /* the accent as text: 8.7:1 */
+  --x-accent-wash: rgb(61 157 255 / 0.16);
+  --x-on-accent: #15171B;   /* text on the accent: 6.4:1 (white would be 2.8:1) */
+  --x-wash: rgb(255 255 255 / 0.06);
+  --x-dot: rgb(255 255 255 / 0.1);
   --x-live: #3DD68C;
+  --x-glass: color-mix(in srgb, var(--x-raised) 84%, transparent);
+  --x-float: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 10px 32px rgb(0 0 0 / 0.5);
   --font-ui: 'Inter', system-ui, sans-serif;
   --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
   color-scheme: dark;
@@ -69,21 +78,22 @@ kbd {
   flex-direction: column;
   flex: none;
   width: 272px;
-  border-right: 1px solid var(--x-line);
+  border-right: 1px solid var(--x-line-soft);
   background: var(--x-panel);
 }
 
 .app.is-collapsed .sidebar { display: none; }
 
 /* htmlboard's own row: the logo (a link to the project) and the version */
-.brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--x-line); }
+.brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--x-line-soft); }
 .brand-logo { display: block; border-radius: 4px; }
 .brand-logo img { display: block; width: auto; height: 18px; }
-.version { font-size: 11px; color: var(--x-text-soft); font-variant-numeric: tabular-nums; }
+.version { font-size: 11px; color: var(--x-text-faint); font-variant-numeric: tabular-nums; }
 
-.sidebar-head { display: flex; align-items: baseline; gap: 8px; padding: 16px 16px 10px; }
-.sidebar-head h1 { min-width: 0; margin: 0; font: 800 24px/1.1 var(--font-display); overflow-wrap: anywhere; }
-.count { flex: none; font-size: 13px; color: var(--x-text-soft); font-variant-numeric: tabular-nums; }
+/* The project's title, the count running on after its last word */
+.sidebar-head { padding: 16px 16px 10px; }
+.sidebar-head h1 { display: inline; margin: 0; font: 800 24px/1.1 var(--font-display); overflow-wrap: anywhere; }
+.count { margin-left: 8px; font-size: 13px; color: var(--x-text-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
 
 .search { position: relative; margin: 0 12px 4px; }
 
@@ -94,7 +104,7 @@ kbd {
   width: 15px;
   height: 15px;
   fill: none;
-  stroke: var(--x-text-soft);
+  stroke: var(--x-text-faint);
   stroke-width: 2;
   stroke-linecap: round;
   transform: translateY(-50%);
@@ -105,7 +115,7 @@ kbd {
   width: 100%;
   height: 32px;
   padding: 0 30px;
-  border: 1px solid var(--x-line);
+  border: 1px solid var(--x-line-soft);
   border-radius: 6px;
   background: var(--x-canvas);
   color: var(--x-text);
@@ -113,8 +123,8 @@ kbd {
   font-size: 13px;
 }
 
-.search input::placeholder { color: var(--x-text-soft); opacity: 1; }
-.search input:focus { border-color: var(--x-accent); outline: none; }
+.search input::placeholder { color: var(--x-text-faint); opacity: 1; }
+.search input:focus { border-color: var(--x-accent); outline: none; box-shadow: 0 0 0 3px var(--x-accent-wash); }
 .search input::-webkit-search-cancel-button { appearance: none; }
 
 .search kbd {
@@ -122,14 +132,33 @@ kbd {
   right: 7px;
   top: 50%;
   font-size: 11px;
-  color: var(--x-text-soft);
+  color: var(--x-text-faint);
   transform: translateY(-50%);
   pointer-events: none;
 }
 
+/* The filters: all, the devices (and any other category), as chips that wrap */
+.filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 12px 0; }
+
+.filter {
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid var(--x-line-soft);
+  border-radius: 13px;
+  background: none;
+  color: var(--x-text-soft);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.filter:hover:not(:disabled) { background: var(--x-wash); color: var(--x-text); }
+.filter[aria-pressed='true'] { border-color: transparent; background: var(--x-accent-wash); color: var(--x-accent-text); }
+.filter:disabled { color: var(--x-text-faint); border-style: dashed; cursor: default; }
+
 .search input:focus ~ kbd, .search input:not(:placeholder-shown) ~ kbd { display: none; }
 
-.list { flex: 1; overflow-y: auto; padding: 0 8px 16px; }
+.list { flex: 1; overflow-y: auto; padding: 0 8px 16px; scrollbar-width: thin; scrollbar-color: var(--x-line) transparent; }
 
 .list h2 {
   margin: 18px 8px 4px;
@@ -143,6 +172,7 @@ kbd {
 .list .section-desc { margin: -2px 8px 6px; font-size: 12px; line-height: 1.45; color: var(--x-text-soft); }
 
 .list ul { margin: 0; padding: 0; list-style: none; }
+.list section > ul:first-child { margin-top: 12px; } /* a section without a title (the files at the top) */
 
 .item {
   display: flex;
@@ -163,15 +193,16 @@ kbd {
 }
 
 .item:hover { background: var(--x-wash); }
-.item[aria-current='true'] { background: color-mix(in srgb, var(--x-accent) 24%, transparent); color: #fff; }
-.item .dims { flex: none; font-size: 12px; color: var(--x-text-soft); font-variant-numeric: tabular-nums; }
+.item[aria-current='true'] { background: var(--x-accent-wash); color: var(--x-text); }
+.item .dims { flex: none; font-size: 12px; color: var(--x-text-faint); font-variant-numeric: tabular-nums; }
+.item[aria-current='true'] .dims { color: var(--x-accent-text); }
 
 .no-match { margin: 0; padding: 12px 16px 0; font-size: 13px; color: var(--x-text-soft); }
 
 .sidebar-hint {
   margin: 0;
   padding: 12px 16px 16px;
-  border-top: 1px solid var(--x-line);
+  border-top: 1px solid var(--x-line-soft);
   font-size: 12px;
   line-height: 1.6;
   color: var(--x-text-soft);
@@ -198,7 +229,7 @@ kbd {
 .frame {
   position: absolute;
   background: #FFFFFF;
-  box-shadow: 0 1px 3px rgb(0 0 0 / 0.45), 0 10px 40px rgb(0 0 0 / 0.35);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.5), 0 12px 40px rgb(0 0 0 / 0.4);
 }
 
 /* The canvas takes every pointer event (wheel included, so Ctrl + scroll never zooms the page):
@@ -235,7 +266,7 @@ kbd {
   padding: 2px 6px;
   border-radius: 4px;
   background: var(--x-accent);
-  color: #FFFFFF;
+  color: var(--x-on-accent);
   font-size: 11px;
   font-weight: 600;
   line-height: 14px;
@@ -255,8 +286,9 @@ kbd {
   padding: 4px;
   border: 1px solid var(--x-line);
   border-radius: 10px;
-  background: var(--x-raised);
-  box-shadow: 0 8px 28px rgb(0 0 0 / 0.4);
+  background: var(--x-glass);
+  backdrop-filter: blur(16px) saturate(1.4);
+  box-shadow: var(--x-float);
   transform: translateX(-50%);
 }
 
@@ -279,7 +311,7 @@ kbd {
 }
 
 .tool:hover { background: var(--x-wash); }
-.tool[aria-pressed='true'] { color: var(--x-accent); }
+.tool[aria-pressed='true'] { color: var(--x-accent-text); }
 .tool[aria-disabled='true'] { opacity: 0.4; pointer-events: none; }
 
 .tool svg {
@@ -298,7 +330,7 @@ kbd {
 
 .live { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 12px; color: var(--x-text-soft); }
 .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--x-live); }
-.live.is-off::before { background: var(--x-text-soft); }
+.live.is-off::before { background: var(--x-text-faint); }
 
 .help {
   position: absolute;
@@ -308,14 +340,15 @@ kbd {
   padding: 14px 16px 10px;
   border: 1px solid var(--x-line);
   border-radius: 10px;
-  background: var(--x-raised);
-  box-shadow: 0 8px 28px rgb(0 0 0 / 0.4);
+  background: var(--x-glass);
+  backdrop-filter: blur(16px) saturate(1.4);
+  box-shadow: var(--x-float);
   font-size: 13px;
 }
 
 .help h2 { margin: 0 0 8px; font: 700 18px/1.2 var(--font-display); }
 .help dl { margin: 0; }
-.help dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--x-line); }
+.help dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--x-line-soft); }
 .help dt { color: var(--x-text-soft); }
 .help dd { margin: 0; text-align: right; }
 
@@ -327,7 +360,9 @@ kbd {
   padding: 8px 14px;
   border: 1px solid var(--x-line);
   border-radius: 8px;
-  background: var(--x-raised);
+  background: var(--x-glass);
+  backdrop-filter: blur(16px) saturate(1.4);
+  box-shadow: var(--x-float);
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;

package/src/client/explorer.js

@@ -23,7 +23,7 @@ const DEFAULT_SIZE = [1200, 800]; // a design whose entry gives no size; without
 const $ = (id) => document.getElementById(id);
 const els = {
   app: $('app'), title: $('title'), list: $('list'), count: $('count'), search: $('search'),
-  noMatch: $('no-match'), viewport: $('viewport'), world: $('world'), overlay: $('overlay'),
+  noMatch: $('no-match'), filters: $('filters'), viewport: $('viewport'), world: $('world'), overlay: $('overlay'),
   hover: $('hover'), selection: $('selection'), size: $('size'), zoom: $('zoom-reset'), open: $('open'),
   live: $('live'), help: $('help'), helpToggle: $('help-toggle'), toggleList: $('toggle-list'),
   toast: $('toast'), notice: $('notice'), noticeTitle: $('notice-title'), noticeText: $('notice-text'),
@@ -39,6 +39,7 @@ const state = {
   selected: null,
   hover: null,
   query: [],            // the search's words, folded
+  category: '',         // the filter: a category, or '' for all
   // What the first view fitted ('all' or a design). Until the user moves the canvas, it is fitted
   // again when the designs' real sizes come in.
   autoFit: null,
@@ -103,7 +104,8 @@ function build(manifest) {
     const section = { name, designs: [], el: el('div', 'section-title', name), group: el('section') };
     els.overlay.insertBefore(section.el, els.hover);
     const items = el('ul');
-    section.group.append(el('h2', null, name));
+    // The files at the top of the folder make a first section without a title
+    if (name) section.group.append(el('h2', null, name));
     if (entry.description) section.group.append(el('p', 'section-desc', entry.description));
     section.group.append(items);
     for (const board of entry.artboards || []) {
@@ -125,6 +127,7 @@ function build(manifest) {
   } else {
     els.notice.hidden = true;
   }
+  buildFilters();
   applySearch();
   layout();
 }
@@ -133,6 +136,7 @@ function makeDesign(board, section) {
   const file = String(board.file);
   const design = {
     id: String(board.id || file),
+    category: board.category || '',
     file,
     path: `/${file.split('?')[0]}`,
     title: board.title || file,
@@ -194,15 +198,60 @@ function growToPage(design) {
   layout();
 }
 
-// ---------------------------------------------------------------- searching
+// ---------------------------------------------------------------- filtering and searching
+
+// The device filters come together, so a project without tablets shows that it has none; then any
+// other category the designs carry (components, or whatever a designs.json names).
+const DEVICES = ['mobile', 'tablet', 'desktop'];
+const LABELS = { '': 'All', mobile: 'Mobile', tablet: 'Tablet', desktop: 'Desktop', components: 'Components' };
+
+// The filter lays out only its designs; the search fades the others where they are.
+function inFilter(design) {
+  return !state.category || design.category === state.category;
+}
 
 function matches(design) {
   return state.query.every((word) => design.search.includes(word));
 }
 
-// The designs the search keeps (all of them without a search).
+// The designs the filter and the search keep.
 function shown() {
-  return state.query.length ? state.designs.filter(matches) : state.designs;
+  return state.designs.filter((d) => inFilter(d) && matches(d));
+}
+
+function buildFilters() {
+  const counts = new Map();
+  for (const d of state.designs) if (d.category) counts.set(d.category, (counts.get(d.category) || 0) + 1);
+  const others = [...counts.keys()].filter((c) => !DEVICES.includes(c))
+    .sort((a, b) => (a === 'components' ? -1 : b === 'components' ? 1 : a.localeCompare(b)));
+  const categories = ['', ...(DEVICES.some((c) => counts.has(c)) ? DEVICES : []), ...others];
+  if (state.category && !counts.has(state.category)) state.category = '';
+  els.filters.replaceChildren(...categories.map((category, i) => {
+    const count = category ? counts.get(category) || 0 : state.designs.length;
+    const label = LABELS[category] ?? category.charAt(0).toUpperCase() + category.slice(1);
+    const button = el('button', 'filter', label);
+    button.type = 'button';
+    button.dataset.category = category;
+    button.disabled = !count;
+    button.title = `${count} design${count === 1 ? '' : 's'}${i < 9 ? ` (${i + 1})` : ''}`;
+    button.setAttribute('aria-pressed', String(category === state.category));
+    button.addEventListener('click', () => setCategory(category));
+    return button;
+  }));
+  // Nothing to tell apart: no categories, or one that every design shares
+  els.filters.hidden = !counts.size || (counts.size === 1 && counts.values().next().value === state.designs.length);
+}
+
+function setCategory(category, { fitAll = true } = {}) {
+  if (category === state.category) return;
+  state.category = category;
+  for (const button of els.filters.children) button.setAttribute('aria-pressed', String(button.dataset.category === category));
+  if (state.selected && !inFilter(state.selected)) select(null);
+  if (state.hover && !inFilter(state.hover)) state.hover = null;
+  state.autoFit = null;
+  applySearch();
+  layout();
+  if (fitAll) fit('all');
 }
 
 function applySearch() {
@@ -210,10 +259,11 @@ function applySearch() {
   for (const section of state.sections) {
     let any = false;
     for (const design of section.designs) {
-      const on = matches(design);
+      const kept = inFilter(design);
+      const on = kept && matches(design);
       design.li.hidden = !on;
-      design.frame.classList.toggle('is-dimmed', !on);
-      design.label.classList.toggle('is-dimmed', !on);
+      design.frame.classList.toggle('is-dimmed', kept && !on);
+      design.label.classList.toggle('is-dimmed', kept && !on);
       if (on) {
         any = true;
         count++;
@@ -222,8 +272,9 @@ function applySearch() {
     section.group.hidden = !any;
   }
   const total = state.designs.length;
-  els.count.textContent = state.query.length ? `${count} of ${total}` : String(total);
-  els.noMatch.hidden = !state.query.length || count > 0;
+  const narrowed = state.query.length || state.category;
+  els.count.textContent = narrowed ? `${count} of ${total}` : String(total);
+  els.noMatch.hidden = !narrowed || count > 0;
 }
 
 function search(text) {
@@ -240,14 +291,17 @@ function layout() {
     let x = 0;
     let height = 0;
     for (const design of section.designs) {
+      design.frame.hidden = !inFilter(design);
+      if (design.frame.hidden) continue;
       design.x = x;
       design.y = y;
       Object.assign(design.frame.style, { left: `${x}px`, top: `${y}px`, width: `${design.w}px`, height: `${design.h}px` });
       x += design.w + FRAME_GAP;
       height = Math.max(height, design.h);
     }
-    Object.assign(section, { x: 0, y, w: Math.max(0, x - FRAME_GAP), h: height });
-    y += height + SECTION_GAP;
+    // A section the filter empties takes no room
+    Object.assign(section, { x: 0, y, w: Math.max(0, x - FRAME_GAP), h: height, shown: x > 0 });
+    if (section.shown) y += height + SECTION_GAP;
   }
   if (state.autoFit) fit(state.autoFit, { animate: false });
   else paint();
@@ -264,19 +318,30 @@ function paint() {
   els.viewport.style.backgroundPosition = `${x}px ${y}px`;
   // Above each row: the section's title, then the designs' names. Zoomed far out the gap between
   // rows gets thin: the names give way first, then the title.
-  state.sections.forEach((section, index) => {
-    const room = index ? SECTION_GAP * z : Infinity;
+  let first = true;
+  for (const section of state.sections) {
+    if (!section.shown) {
+      section.el.hidden = true;
+      for (const design of section.designs) design.label.hidden = true;
+      continue;
+    }
+    const room = first ? Infinity : SECTION_GAP * z;
+    first = false;
     const named = room >= TITLE_SPACE + 2;
     const top = Math.round(y + section.y * z);
-    section.el.hidden = !section.designs.length || room < 30;
+    section.el.hidden = room < 30 || !section.name;
     section.el.style.transform = `translate(${Math.round(x + section.x * z)}px, ${top - (named ? 54 : 30)}px)`;
     for (const design of section.designs) {
+      if (design.frame.hidden) {
+        design.label.hidden = true;
+        continue;
+      }
       const width = design.w * z;
       design.label.hidden = !named || width < MIN_NAMED;
       design.label.style.width = `${Math.round(width)}px`;
       design.label.style.transform = `translate(${Math.round(x + design.x * z)}px, ${top - 22}px)`;
     }
-  });
+  }
   els.zoom.textContent = `${Math.round(z * 100)}%`;
   paintMarks();
   saveView();
@@ -351,7 +416,7 @@ function viewFor(rect, top) {
 function fit(target, { animate = true } = {}) {
   if (target === 'all') {
     const designs = shown();
-    moveTo(viewFor(boundsOf(designs.length ? designs : state.designs), TITLE_SPACE), animate);
+    moveTo(viewFor(boundsOf(designs.length ? designs : state.designs.filter(inFilter)), TITLE_SPACE), animate);
   } else {
     moveTo(viewFor(target, NAME_SPACE), animate);
   }
@@ -459,6 +524,7 @@ function hit(point) {
   const cy = (point.y - y) / z;
   for (let i = state.designs.length - 1; i >= 0; i--) {
     const d = state.designs[i];
+    if (d.frame.hidden) continue;
     const top = d.y - (d.label.hidden ? 0 : NAME_SPACE / z);
     if (cx >= d.x && cx <= d.x + d.w && cy >= top && cy <= d.y + d.h) return d;
   }
@@ -552,6 +618,47 @@ function changesBetween(before, after) {
   return 'Canvas updated';
 }
 
+// The same designs in the same sections and order: what changed is names, sizes or categories.
+function sameShape(manifest) {
+  const sections = manifest.sections || [];
+  if (sections.length !== state.sections.length) return false;
+  let i = 0;
+  return sections.every((entry, s) => (entry.name || '') === state.sections[s].name
+    && (entry.artboards || []).length === state.sections[s].designs.length
+    && entry.artboards.every((board) => {
+      const design = state.designs[i++];
+      return design && design.id === String(board.id || board.file) && design.file === String(board.file);
+    }));
+}
+
+// Names, sizes, categories and descriptions changed in place: no frame reloads.
+function patch(manifest) {
+  const boards = manifest.sections.flatMap((section) => section.artboards.map((board) => [board, section]));
+  boards.forEach(([board, section], i) => {
+    const design = state.designs[i];
+    design.title = board.title || design.file;
+    design.label.textContent = design.title;
+    design.iframe.title = design.title;
+    design.item.querySelector('.name').textContent = design.title;
+    if (board.description) design.item.title = board.description;
+    else design.item.removeAttribute('title');
+    design.category = board.category || '';
+    design.search = fold([design.title, design.file, board.description, board.category, ...(board.tags || []), section.name]
+      .filter(Boolean).join(' '));
+    const autoHeight = !Number(board.height);
+    if (Number(board.width)) design.w = Number(board.width);
+    if (!autoHeight) design.h = Number(board.height);
+    else if (!design.autoHeight) growToPage(design);
+    design.autoHeight = autoHeight;
+    showDims(design);
+  });
+  state.manifest = JSON.stringify(manifest);
+  buildFilters();
+  applySearch();
+  layout();
+}
+
+// Reads the designs again: 'rebuilt' (a new canvas), 'patched' (names or sizes) or false (no change).
 // message: a text, or nothing to describe the change.
 async function rebuildIfChanged(message) {
   let manifest;
@@ -561,10 +668,14 @@ async function rebuildIfChanged(message) {
     return false;
   }
   if (JSON.stringify(manifest) === state.manifest) return false;
+  if (sameShape(manifest)) {
+    patch(manifest);
+    return 'patched';
+  }
   const before = state.designs.map(({ id, title }) => ({ id, title }));
   rebuild(manifest);
   toast(message || changesBetween(before, state.designs));
-  return true;
+  return 'rebuilt';
 }
 
 async function reloadAll() {
@@ -599,13 +710,17 @@ async function applyChanges() {
   pending.folders = false;
 
   // A new canvas loads every design afresh, so nothing else is left to do.
-  if (manifestChanged && await rebuildIfChanged('designs.json changed: canvas rebuilt')) return;
-  // Without designs.json every HTML file is a design (and its <title> its name); with it, an
-  // HTML file that isn't on the canvas may be one just added to it. A folder added or removed
-  // may bring or take a whole group of them.
+  if (manifestChanged) {
+    const result = await rebuildIfChanged('designs.json changed: canvas rebuilt');
+    if (result === 'rebuilt') return;
+    if (result === 'patched' && !files.length) toast('designs.json changed: names and sizes updated');
+  }
+  // Every HTML file is a design, and it says its own name, size and variants in its <head>: a saved
+  // page may be a new design, a renamed or resized one. A folder added or removed may bring or
+  // take a whole group of them.
   const pages = files.filter((file) => /\.html?$/i.test(file));
-  if (foldersChanged || (pages.length && (state.autoDiscovered || pages.some((file) => !state.designs.some((d) => d.path === `/${file}`))))) {
-    if (await rebuildIfChanged()) return;
+  if (foldersChanged || pages.length) {
+    if (await rebuildIfChanged() === 'rebuilt') return;
   }
 
   const paths = files.map((file) => `/${file}`);
@@ -848,12 +963,13 @@ function wire() {
     else if (key === 'ArrowRight' || key === 'ArrowDown') step(1);
     else if (key === 'ArrowLeft' || key === 'ArrowUp') step(-1);
     else if (key === 'Escape') {
+      // One thing at a time: the shortcuts, the selection, the search, the filter
       if (!els.help.hidden) toggleHelp(false);
       else if (state.selected) select(null);
       else if (els.search.value) {
         els.search.value = '';
         search('');
-      }
+      } else if (state.category) setCategory('');
     } else if (key === 'Enter' && !onControl) openSelected();
     else if (key === 'r' || key === 'R') reloadAll();
     else if (key === '/') {
@@ -861,6 +977,12 @@ function wire() {
       els.search.focus();
       els.search.select();
     } else if (key === '?') toggleHelp();
+    else if (/^[1-9]$/.test(key) && !event.shiftKey && !els.filters.hidden) {
+      // 1 shows all, 2 to 4 mobile, tablet, desktop, then the other categories
+      const button = els.filters.children[Number(key) - 1];
+      if (button && !button.disabled) setCategory(button.dataset.category);
+      else handled = false;
+    }
     else if (key === '\\' || key === '[' || key === ']') toggleList();
     else handled = false;
     if (handled) {
@@ -890,6 +1012,7 @@ function wire() {
     const design = designFromHash();
     if (design && design !== state.selected) {
       state.autoFit = null;
+      if (!inFilter(design)) setCategory('', { fitAll: false });
       select(design, { fit: true });
     }
   });

package/src/client/index.html

@@ -28,6 +28,7 @@
         <input type="search" id="search" placeholder="Search" aria-label="Search the designs" autocomplete="off" spellcheck="false">
         <kbd aria-hidden="true">/</kbd>
       </div>
+      <div class="filters" id="filters" role="group" aria-label="Show" hidden></div>
       <p class="no-match" id="no-match" hidden>No design matches the search.</p>
       <nav class="list" id="list" aria-label="Designs by section"></nav>
       <p class="sidebar-hint">Drag or scroll to move, <kbd>Ctrl</kbd> + scroll or pinch to zoom, double-click a design to fit it. <kbd>?</kbd> lists the shortcuts.</p>
@@ -83,6 +84,7 @@
           <div><dt><kbd>←</kbd> <kbd>→</kbd></dt><dd>Previous, next design</dd></div>
           <div><dt><kbd>Enter</kbd></dt><dd>Open the design on its own</dd></div>
           <div><dt><kbd>/</kbd></dt><dd>Search</dd></div>
+          <div><dt><kbd>1</kbd> – <kbd>4</kbd></dt><dd>All, mobile, tablet, desktop</dd></div>
           <div><dt><kbd>R</kbd></dt><dd>Reload the designs</dd></div>
           <div><dt><kbd>\</kbd></dt><dd>Show or hide the list</dd></div>
           <div><dt><kbd>Esc</kbd></dt><dd>Deselect</dd></div>