Name Picker

public/css/kiosk.css

@@ -234,6 +234,21 @@ a:focus-visible {
   margin-bottom: 20px;
   -webkit-overflow-scrolling: touch;
 }
+
+/* The shortlist is the thing to tap, so make it read as the answer rather than
+   as another field. */
+#host-list .host-option,
+#freq-host-list .host-option {
+  border-color: var(--deep);
+  box-shadow: inset 0 0 0 1px var(--deep);
+  min-height: 64px;
+  font-size: 19px;
+  animation: rise 160ms ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  #host-list .host-option,
+  #freq-host-list .host-option { animation: none; }
+}
 .host-option small { display: block; color: var(--muted); font-size: 14px; }
 .host-empty {
   color: var(--muted);

public/index.html

@@ -68,12 +68,16 @@
   <section class="screen" id="screen-guest-host" data-step="2">
     <div class="rail" data-rail></div>
     <h2>Who are you here to see?</h2>
+    <p class="hint">Type the first few letters of their name. Their name will appear below —
+      tap it.</p>
     <label class="field">
-      <span>Start typing a name to narrow the list</span>
-      <input id="in-host-search" autocomplete="off" enterkeyhint="search" placeholder="e.g. Rogerson">
+      <span>Their name</span>
+      <input id="in-host-search" autocomplete="off" enterkeyhint="search"
+             placeholder="e.g. Smi for Smith">
     </label>
-    <label class="field">
-      <span>Then choose a name</span>
+    <div class="host-list" id="host-list" role="list" hidden></div>
+    <label class="field" id="host-select-field">
+      <span id="host-select-label">Or pick from the full list</span>
       <select id="host-select" class="picker"></select>
     </label>
     <p class="host-empty" id="host-empty" hidden></p>
@@ -171,12 +175,16 @@
   <!-- --------------------------------------------- recurring: host -->
   <section class="screen" id="screen-freq-host">
     <h2 id="freq-greeting">Who are you here to see?</h2>
+    <p class="hint">Type the first few letters of their name. Their name will appear below —
+      tap it.</p>
     <label class="field">
-      <span>Start typing a name to narrow the list</span>
-      <input id="in-freq-host-search" autocomplete="off" enterkeyhint="search">
+      <span>Their name</span>
+      <input id="in-freq-host-search" autocomplete="off" enterkeyhint="search"
+             placeholder="e.g. Smi for Smith">
     </label>
-    <label class="field">
-      <span>Then choose a name</span>
+    <div class="host-list" id="freq-host-list" role="list" hidden></div>
+    <label class="field" id="freq-host-select-field">
+      <span id="freq-host-select-label">Or pick from the full list</span>
       <select id="freq-host-select" class="picker"></select>
     </label>
     <p class="host-empty" id="freq-host-empty" hidden></p>

public/js/kiosk.js

@@ -188,12 +188,16 @@ tickClock();
 /* --------------------------------------------------------------- hosts */
 
 /**
- * Who you are here to see: type to narrow, then choose from the dropdown. The
- * dropdown is a native select, so a tablet gives it a proper full-screen picker
- * with its own scrolling, which handles a long staff list better than a page of
- * buttons ever did.
+ * Who you are here to see.
+ *
+ * Narrow it down by typing, then tap. Once the list is short enough to show
+ * without scrolling, the names appear as buttons — one tap beats opening a
+ * picker, choosing, and dismissing it. Above that count the dropdown carries the
+ * full list, because a page of eighty buttons is worse than a scroll wheel.
  */
-function renderHosts(selectEl, searchValue, onPick, emptyEl = null) {
+const TAP_LIST_LIMIT = 5;
+
+function renderHosts(selectEl, searchValue, onPick, emptyEl = null, listEl = null) {
   const term = String(searchValue || '').trim().toLowerCase();
   const matches = term
     ? hosts.filter(
@@ -201,14 +205,47 @@ function renderHosts(selectEl, searchValue, onPick, emptyEl = null) {
       )
     : hosts;
 
+  const choose = (host) => {
+    state.hostId = host.id;
+    state.hostName = host.name;
+    onPick();
+  };
+
+  const showAsButtons = matches.length > 0 && matches.length <= TAP_LIST_LIMIT;
+
+  // The tappable shortlist.
+  if (listEl) {
+    listEl.hidden = !showAsButtons;
+    listEl.innerHTML = showAsButtons
+      ? matches
+          .map(
+            (h) =>
+              `<button class="host-option" data-host-id="${h.id}">
+                 ${escapeHtml(h.name)}${h.area ? `<small>${escapeHtml(h.area)}</small>` : ''}
+               </button>`
+          )
+          .join('')
+      : '';
+    listEl.querySelectorAll('[data-host-id]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const picked = hosts.find((h) => h.id === Number(btn.dataset.hostId));
+        if (picked) choose(picked);
+      });
+    });
+  }
+
+  // The full list, kept out of the way once the shortlist is showing.
+  const field = selectEl.closest('.field');
+  if (field) field.hidden = showAsButtons;
+
   const label = !hosts.length
     ? 'Nobody has been added yet'
-    : matches.length === hosts.length
-      ? `Choose one of ${hosts.length}`
-      : `${matches.length} ${matches.length === 1 ? 'match' : 'matches'} — choose one`;
+    : `Or pick from the full list of ${hosts.length}`;
+  const labelEl = field?.querySelector('span');
+  if (labelEl) labelEl.textContent = label;
 
   selectEl.innerHTML =
-    `<option value="">${escapeHtml(label)}</option>` +
+    `<option value="">${escapeHtml(matches.length === hosts.length ? 'Choose a name' : `${matches.length} match${matches.length === 1 ? '' : 'es'}`)}</option>` +
     matches
       .map(
         (h) =>
@@ -219,20 +256,16 @@ function renderHosts(selectEl, searchValue, onPick, emptyEl = null) {
 
   selectEl.onchange = () => {
     const picked = hosts.find((h) => h.id === Number(selectEl.value));
-    if (!picked) return;
-    state.hostId = picked.id;
-    state.hostName = picked.name;
-    onPick();
+    if (picked) choose(picked);
   };
 
   if (emptyEl) {
     emptyEl.hidden = matches.length > 0;
     emptyEl.textContent = hosts.length
-      ? 'No one matches that. Check the spelling, or ask the front desk.'
+      ? 'No one matches that. Check the spelling, or ask at the front desk.'
       : 'No one has been added for this site yet. Please see the front desk.';
   }
 
-  // Typing a name and pressing enter should just work when only one person is left.
   selectEl.dataset.only = matches.length === 1 ? String(matches[0].id) : '';
 }
 
@@ -496,7 +529,7 @@ async function loadSiteContext() {
   change.textContent = siteConfig.site ? `Site: ${siteConfig.site.name} — change` : 'Choose site';
 
   hosts = await api('/api/hosts');
-  renderHosts($('#host-select'), '', () => show('guest-contact'), $('#host-empty'));
+  renderHosts($('#host-select'), '', () => show('guest-contact'), $('#host-empty'), $('#host-list'));
 }
 
 $('#change-site').addEventListener('click', chooseSite);
@@ -532,7 +565,13 @@ $('[data-next="guest-name"]').addEventListener('click', () => {
 });
 
 $('#in-host-search').addEventListener('input', (e) =>
-  renderHosts($('#host-select'), e.target.value, () => show('guest-contact'), $('#host-empty'))
+  renderHosts(
+    $('#host-select'),
+    e.target.value,
+    () => show('guest-contact'),
+    $('#host-empty'),
+    $('#host-list')
+  )
 );
 $('#in-host-search').addEventListener('keydown', (event) => {
   if (event.key === 'Enter') {
@@ -616,7 +655,8 @@ $('#do-freq-auth').addEventListener('click', async () => {
       $('#freq-host-select'),
       '',
       () => (state.hasStoredPhoto ? submitSignIn() : show('photo')),
-      $('#freq-host-empty')
+      $('#freq-host-empty'),
+      $('#freq-host-list')
     );
     show('freq-host');
   } catch (err) {
@@ -632,7 +672,8 @@ $('#in-freq-host-search').addEventListener('input', (e) =>
     $('#freq-host-select'),
     e.target.value,
     () => (state.hasStoredPhoto ? submitSignIn() : show('photo')),
-    $('#freq-host-empty')
+    $('#freq-host-empty'),
+    $('#freq-host-list')
   )
 );
 $('#in-freq-host-search').addEventListener('keydown', (event) => {