From 7f19d3ef8e4ba59e657c7b4e885c60febbc7fcaa Mon Sep 17 00:00:00 2001
From: Eric Boehs <eric@boehs.com>
Date: Mon, 31 Aug 2026 11:47:30 -0500
Subject: [PATCH] feat: new-since-last-visit filter with keyboard-reachable
 filters

The listing now marks stories that were not present on the previous load and
can be narrowed to just those. The filter runs in the browser on purpose: the
pages are served public with one ETag shared by every visitor, so per-visitor
state cannot live on the server without sessions or giving up caching.

The baseline is the set of story ids from the last load rather than a posting
timestamp -- a story is often hours old by the time its score lifts it into the
listing, and filtering on when it was posted would hide exactly those arrivals.
Refreshes within five minutes of each other keep the same marks instead of
clearing them before they have been read, and the seen map expires after seven
days so it cannot grow without bound. The control ships hidden and is revealed
only once the script has confirmed it can write to storage, so a visitor
without JS never sees a dead toggle.

Date dividers are now rebuilt from the visible rows on every filter change.
Inserting them once left them stranded above stories from another day as soon
as rows were hidden, and the rebuild also retires the textContent dedupe hack.

j/k reach the filters: past the first story they step up to the new-since
toggle and then the score pills, landing on the score already in effect, where
h/l walks the row and space applies it. h/l is clamped inside a filter row so
it cannot drop focus into the heading behind it, keystrokes skip hidden rows,
and ? opens a cheatsheet of the keys each page actually binds. UIkit strips the
focus ring from subnav links, which left the whole walk invisible, so it is
restored for keyboard focus only.
---
 README.md            |  53 ++++++++-
 app.rb               |  17 +++
 tests/app_test.rb    | 104 +++++++++++++++++
 views/_shortcuts.erb |  39 +++++++
 views/index.erb      | 270 +++++++++++++++++++++++++++++++++++++------
 views/layout.erb     |  49 ++++++++
 views/story.erb      |   3 +
 7 files changed, 499 insertions(+), 36 deletions(-)
 create mode 100644 views/_shortcuts.erb

diff --git a/README.md b/README.md
index a91d8ce..c1cb22b 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # HackiNews
 
-A personal Hacker News reader. Stories are cached in Postgres and can be filtered by score or title.
+A personal Hacker News reader. Stories are cached in Postgres and can be filtered by score, title, or by what has arrived since your last visit.
 
 ## Requirements
 
@@ -41,6 +41,57 @@ bundle exec ruby worker.rb          # loop
 bundle exec rake worker             # one shot
 ```
 
+## New since last visit
+
+The listing marks stories that were not there on your previous load, and the
+pill under the score filter narrows the page to just those. It runs in the
+browser: the pages are served with public cache headers and a single ETag, so
+per-visitor state cannot live on the server without sessions or giving up
+caching. The baseline is the set of story ids from the last load (kept in
+`localStorage` under `hn.visit.v1` for seven days), not a posting timestamp,
+because stories are often hours old by the time their score lifts them into the
+listing. Rapid refreshes within five minutes keep the same marks rather than
+clearing them before they have been read.
+
+To exercise it without waiting for HN, run this in the console on the listing to
+forget the top five stories and push the baseline past the grace window, then
+reload -- they come back marked new:
+
+```js
+;(() => {
+  const KEY = 'hn.visit.v1', N = 5
+  const s = JSON.parse(localStorage.getItem(KEY) || '{}')
+  s.seen = s.seen || {}
+  s.lastVisit = Date.now() - 10 * 60 * 1000
+  s.cutoff = s.lastVisit - 1000
+  Object.keys(s.seen).forEach(id => { s.seen[id] = s.lastVisit - 60000 })
+  Array.from(document.querySelectorAll('tr[date]')).slice(0, N).forEach(r => delete s.seen[r.id])
+  localStorage.setItem(KEY, JSON.stringify(s))
+  location.reload()
+})()
+```
+
+`N = 0` gives the empty case, and `localStorage.removeItem('hn.visit.v1')`
+resets to a first visit, where nothing is new.
+
+## Keyboard
+
+On the listing:
+
+| Key | Does |
+| --- | --- |
+| `j` / `k` | Down / up a row, holding the column (comments, points, title) |
+| `h` / `l` | Previous / next link |
+| `space` | Activate the focused filter |
+| `?` | Show the cheatsheet |
+
+`k` past the first story steps up into the filters -- the new-since-last-visit
+pill, then the score pills, landing on the score already in effect -- where
+`h`/`l` moves along that row and `space` applies it. `j` walks back down into
+the listing.
+
+Story pages take the same keys, minus the filters; `?` there lists what applies.
+
 ## Tests
 
 ```bash
diff --git a/app.rb b/app.rb
index e77e043..e962c97 100644
--- a/app.rb
+++ b/app.rb
@@ -17,6 +17,21 @@
 class App < Sinatra::Base
   MIN_SCORES = [0, 50, 100, 200, 300, 400, 500, 750, 1000].freeze
 
+  # Rendered into the ? cheatsheet. Kept beside the routes rather than in the
+  # templates so each page documents the keys its own script actually binds.
+  LISTING_SHORTCUTS = [
+    [%w[j k], 'Down or up a row, keeping the column'],
+    [%w[h l], 'Previous or next link'],
+    [%w[space], 'Activate the focused filter'],
+    [%w[?], 'This help']
+  ].freeze
+
+  STORY_SHORTCUTS = [
+    [%w[j k], 'Down or up a comment'],
+    [%w[h l], 'Previous or next link'],
+    [%w[?], 'This help']
+  ].freeze
+
   configure :development do
     set :host_authorization, permitted_hosts: []
   end
@@ -99,6 +114,7 @@ def cache_for(records)
   end
 
   get '/' do
+    @shortcuts = LISTING_SHORTCUTS
     @q = params['q']
     @min_score = (params['min_score'] || 50).to_i
     @next_min_score =
@@ -117,6 +133,7 @@ def cache_for(records)
   STORY_ID_RANGE = (1..2_147_483_647)
 
   get '/stories/:id' do
+    @shortcuts = STORY_SHORTCUTS
     id = Integer(params[:id], exception: false)
     halt 404 unless id && STORY_ID_RANGE.cover?(id)
 
diff --git a/tests/app_test.rb b/tests/app_test.rb
index 14d73e7..b685841 100644
--- a/tests/app_test.rb
+++ b/tests/app_test.rb
@@ -415,6 +415,110 @@ def test_membership_change_invalidates_the_homepage_cache
     assert_equal 200, last_response.status, 'membership changed, must not 304'
   end
 
+  # --- new since last visit -------------------------------------------------
+
+  # The filter runs in the browser because the listing is cached publicly under
+  # one ETag for everyone; the server only ships the control. It must arrive
+  # hidden so a visitor without JS -- or without writable storage, where the
+  # script bails -- never sees a toggle that does nothing.
+  def test_new_since_last_visit_control_is_hidden_until_scripted
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+    body = last_response.body
+
+    assert_includes body, 'New since last visit'
+    assert_match(/<ul id="new-filter"[^>]*\shidden/, body)
+    assert_match(/<p id="no-new-stories"[^>]*\shidden/, body)
+  end
+
+  # The baseline is a set of story ids, not a timestamp: a story is often hours
+  # old by the time its score lifts it into the listing. That only works while
+  # every row carries its id.
+  def test_listing_rows_carry_story_ids_for_the_new_filter
+    create_item id: 42, title: 'A', score: 100
+
+    get '/'
+
+    assert_match(/<tr id="42"/, last_response.body)
+  end
+
+  # Hiding rows can strand a date divider above a different day, so the
+  # dividers are rebuilt from the visible rows on every filter change rather
+  # than inserted once at load.
+  def test_date_dividers_are_rebuilt_rather_than_inserted_once
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+
+    assert_includes last_response.body, 'function renderDateRows'
+    assert_match(/renderDateRows\(\)/, last_response.body)
+  end
+
+  # --- keyboard navigation --------------------------------------------------
+
+  # j/k step up out of the listing into the filters, which the script finds by
+  # id. Renaming or dropping either container silently strands the walk at the
+  # first story, so the hooks are pinned here.
+  def test_filter_rows_expose_the_ids_keyboard_nav_walks
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+    body = last_response.body
+
+    assert_includes body, '<ul id="min-score"'
+    assert_includes body, '<ul id="new-filter"'
+    assert_match(/visibleLinks\('#min-score a'\)/, body)
+    assert_match(/visibleLinks\('#new-filter a'\)/, body)
+  end
+
+  # The score pills are anchors, which answer to Enter but not Space, and UIkit
+  # strips their focus ring; both are patched over so the filters are usable
+  # from the keyboard alone.
+  def test_filters_are_operable_and_visible_from_the_keyboard
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+    body = last_response.body
+
+    assert_match(/e\.key === ' '/, body)
+    assert_includes body, 'a:focus-visible'
+  end
+
+  # --- keyboard shortcuts overlay -------------------------------------------
+
+  # Each page documents the keys its own script binds, so the listing's filter
+  # shortcut must not leak onto a story page that has no filters.
+  def test_listing_cheatsheet_lists_the_filter_shortcut
+    create_item id: 1, title: 'A', score: 100
+
+    get '/'
+    body = last_response.body
+
+    assert_includes body, 'Keyboard shortcuts'
+    assert_includes body, 'Activate the focused filter'
+    assert_includes body, 'Down or up a row, keeping the column'
+  end
+
+  def test_story_cheatsheet_documents_comment_navigation_only
+    create_item id: 1, title: 'A', score: 100
+
+    get '/stories/1'
+    body = last_response.body
+
+    assert_includes body, 'Down or up a comment'
+    refute_includes body, 'Activate the focused filter'
+  end
+
+  # A 404 renders through the same layout; without a shortcut list there is
+  # nothing to show, and the partial must not be rendered at all.
+  def test_pages_without_shortcuts_omit_the_cheatsheet
+    get '/nope'
+
+    assert_equal 404, last_response.status
+    refute_includes last_response.body, 'Keyboard shortcuts'
+  end
+
   # --- listing scope --------------------------------------------------------
 
   # The listing used to rely on comments never carrying a score key.
diff --git a/views/_shortcuts.erb b/views/_shortcuts.erb
new file mode 100644
index 0000000..5997932
--- /dev/null
+++ b/views/_shortcuts.erb
@@ -0,0 +1,39 @@
+<!-- Keyboard cheatsheet, opened with ?.
+
+     The close button carries a literal x rather than UIkit's uk-close: that
+     glyph is an SVG injected by uikit-icons.js, which the layout does not load,
+     so the button would render empty. -->
+<div id="shortcuts" uk-modal>
+  <div class="uk-modal-dialog uk-modal-body uk-margin-auto-vertical">
+    <button class="uk-close uk-modal-close-default" type="button" aria-label="Close">&times;</button>
+    <h3 class="uk-modal-title">Keyboard shortcuts</h3>
+    <table class="uk-table uk-table-small hn-keys">
+      <tbody>
+        <% shortcuts.each do |keys, description| %>
+          <tr>
+            <td class="uk-table-shrink uk-text-nowrap">
+              <% keys.each_with_index do |key, i| %><%= ' / ' if i.positive? %><code><%= h key %></code><% end %>
+            </td>
+            <td><%= h description %></td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+</div>
+
+<script>
+  (function () {
+    // The dialog is UIkit's, so without its JS there is nothing to open; the
+    // page is unstyled at that point anyway.
+    if (!window.UIkit) return
+
+    var dialog = document.querySelector('#shortcuts')
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key !== '?') return
+      e.preventDefault()
+      UIkit.modal(dialog)[dialog.classList.contains('uk-open') ? 'hide' : 'show']()
+    })
+  })()
+</script>
diff --git a/views/index.erb b/views/index.erb
index cad52a6..dce1023 100644
--- a/views/index.erb
+++ b/views/index.erb
@@ -1,5 +1,5 @@
 <p class="uk-form-label uk-text-center uk-text-meta">Minimum Score</p>
-<ul class="uk-subnav uk-subnav-pill uk-flex-center" uk-margin>
+<ul id="min-score" class="uk-subnav uk-subnav-pill uk-flex-center" uk-margin>
   <% App::MIN_SCORES.each do |score| %>
     <li<%= ' class="uk-active"' if @min_score == score %>>
       <a href="?min_score=<%= score %>"><%= score %></a>
@@ -7,8 +7,21 @@
   <% end %>
 </ul>
 
+<!-- Hidden until the script has confirmed it can keep a baseline, so a
+     visitor without JS or without storage never sees a dead toggle. -->
+<ul id="new-filter" class="uk-subnav uk-subnav-pill uk-flex-center" hidden uk-margin>
+  <li id="new-filter-item">
+    <a href="#" id="new-filter-toggle" aria-pressed="false">New since last visit<span id="new-filter-count"></span></a>
+  </li>
+</ul>
+
+<p id="no-new-stories" class="uk-placeholder uk-text-center" hidden>
+  Nothing new since your last visit.
+  <a href="#" id="show-all-stories">Show all</a>
+</p>
+
 <% if @stories.present? %>
-  <table class="uk-table hn-table-xsmall">
+  <table id="stories" class="uk-table hn-table-xsmall">
     <thead>
       <tr>
         <th class="uk-table-shrink hn-text-xsmall"><span class="uk-visible@s">Comments</span></th>
@@ -55,54 +68,241 @@
 <script>
   var daterowTemplate = document.querySelector('#daterow')
 
-  Array.from(document.querySelectorAll('tr[date]')).forEach(function (el) {
-    var date = new Date(el.getAttribute('date') * 1000)
-    var prettyDate = date.toLocaleDateString(undefined, {
-      weekday: 'short', month: 'short', day: 'numeric'
+  // Rebuilt from the currently visible rows rather than inserted once, because
+  // the "new since last visit" filter hides rows after the fact and would
+  // otherwise strand a divider above stories from a different day, or above
+  // nothing at all.
+  function renderDateRows () {
+    Array.from(document.querySelectorAll('tr.daterow')).forEach(function (el) { el.remove() })
+
+    var lastLabel = null
+    Array.from(document.querySelectorAll('tr[date]')).forEach(function (el) {
+      if (el.hidden) return
+
+      var date = new Date(el.getAttribute('date') * 1000)
+      var label = date.toLocaleDateString(undefined, {
+        weekday: 'short', month: 'short', day: 'numeric'
+      })
+      var isToday = (new Date()).toDateString() === date.toDateString()
+
+      if (label !== lastLabel && !isToday) {
+        var daterow = daterowTemplate.content.cloneNode(true)
+        daterow.querySelector('tr').className = 'daterow'
+        daterow.querySelector('td').textContent = label
+        el.parentNode.insertBefore(daterow, el)
+      }
+      lastLabel = label
     })
-    var daterow = daterowTemplate.content.cloneNode(true)
-    daterow.querySelector('td').textContent = prettyDate
-    var alreadyInserted = Array.from(el.parentNode.children).some(e => daterow.textContent.includes(e.textContent))
-    var isToday = (new Date()).toDateString() === date.toDateString()
-    if (!alreadyInserted && !isToday) el.parentNode.insertBefore(daterow, el)
-  })
+  }
+
+  renderDateRows()
+</script>
+
+<!-- "New since last visit"
+
+     Deliberately client-side. The listing is served with public cache headers
+     and one ETag shared by every visitor, so "what have *I* already seen"
+     cannot live on the server without either sessions or making the page
+     uncacheable. The baseline is the set of story ids from the previous load
+     rather than a posting timestamp: a story is often hours old by the time it
+     crosses the score threshold and appears here, and filtering on when it was
+     posted would hide exactly those arrivals. -->
+<script>
+  (function () {
+    var KEY = 'hn.visit.v1'
+    // A refresh moments after the last one should not wipe the highlight before
+    // it has been read, so the cutoff only advances once the previous view has
+    // been on screen long enough to have been looked at.
+    var GRACE_MS = 5 * 60 * 1000
+    // Stories rotate off the listing; without an expiry the seen map only grows.
+    var TTL_MS = 7 * 24 * 60 * 60 * 1000
+
+    var rows = Array.from(document.querySelectorAll('tr[date]'))
+    if (!rows.length) return
+
+    var store
+    try {
+      // Safari in private mode exposes localStorage but throws on write, so the
+      // probe has to actually write.
+      store = window.localStorage
+      store.setItem(KEY, store.getItem(KEY) || '{}')
+    } catch (e) {
+      return // No storage means no baseline; leave the control hidden.
+    }
+
+    var state
+    try { state = JSON.parse(store.getItem(KEY)) || {} } catch (e) { state = {} }
+
+    var now = Date.now()
+    var seen = state.seen || {}
+    // A first visit has no previous load to compare against: the cutoff is now,
+    // nothing is marked new, and the whole listing becomes the baseline.
+    var cutoff = state.lastVisit && now - state.lastVisit >= GRACE_MS
+      ? state.lastVisit
+      : (state.cutoff || now)
+
+    var newIds = []
+    rows.forEach(function (row) {
+      if (!seen[row.id]) seen[row.id] = now
+      if (seen[row.id] > cutoff) {
+        row.classList.add('hn-new')
+        newIds.push(row.id)
+      }
+    })
+
+    Object.keys(seen).forEach(function (id) {
+      if (now - seen[id] > TTL_MS) delete seen[id]
+    })
+
+    var enabled = !!state.on
+    var nav = document.querySelector('#new-filter')
+    var item = document.querySelector('#new-filter-item')
+    var toggle = document.querySelector('#new-filter-toggle')
+    var count = document.querySelector('#new-filter-count')
+    var table = document.querySelector('#stories')
+    var placeholder = document.querySelector('#no-new-stories')
+
+    function persist () {
+      store.setItem(KEY, JSON.stringify({
+        seen: seen, cutoff: cutoff, lastVisit: now, on: enabled
+      }))
+    }
+
+    function apply () {
+      rows.forEach(function (row) {
+        row.hidden = enabled && !row.classList.contains('hn-new')
+      })
+      renderDateRows()
+      item.classList.toggle('uk-active', enabled)
+      toggle.setAttribute('aria-pressed', enabled ? 'true' : 'false')
+      // An empty table would render as a bare header, so swap in a placeholder
+      // that also offers the way back out of the filter.
+      var blank = enabled && newIds.length === 0
+      table.hidden = blank
+      placeholder.hidden = !blank
+    }
+
+    function setEnabled (value) {
+      return function (e) {
+        e.preventDefault()
+        enabled = value
+        apply()
+        persist()
+      }
+    }
+
+    count.textContent = ' (' + newIds.length + ')'
+    nav.hidden = false
+    apply()
+    // Written after the first render so a load that throws midway does not
+    // consume the baseline and lose the unread stories.
+    persist()
+
+    toggle.addEventListener('click', function (e) { setEnabled(!enabled)(e) })
+    document.querySelector('#show-all-stories').addEventListener('click', setEnabled(false))
+  })()
 </script>
 
 <!-- Keyboard Navigation -->
 <script>
+  // Hidden rows are not focusable, so a filtered-out link would silently eat a
+  // keystroke; every lookup walks the visible links only.
+  function visibleLinks(selector) {
+    return Array.from(document.querySelectorAll(selector)).filter(function (el) {
+      return el.offsetParent !== null
+    })
+  }
+
+  // The controls above the listing, top to bottom. j/k treat each as one more
+  // row above the stories, so the filters are reachable without leaving the
+  // keyboard. Rows that are not on the page drop out instead of swallowing a
+  // keystroke: the new-since filter is absent without storage, and the
+  // placeholder only exists while the filter is hiding everything.
+  function controlRows() {
+    return [
+      visibleLinks('#min-score a'),
+      visibleLinks('#new-filter a'),
+      visibleLinks('#no-new-stories a')
+    ].filter(function (row) { return row.length })
+  }
+
+  function rowIndexOf(rows, el) {
+    for (var i = 0; i < rows.length; i++) if (rows[i].indexOf(el) !== -1) return i
+    return -1
+  }
+
+  // Which column of the listing j/k walks, taken from where focus already is.
+  function storyLinks() {
+    if (document.activeElement.classList.contains('comments')) return visibleLinks('a.comments')
+    if (document.activeElement.classList.contains('points')) return visibleLinks('a.points')
+    return visibleLinks('.story a')
+  }
+
+  // Arriving at a filter lands on the value already in effect, so h/l nudges
+  // from the current score rather than walking up from the far left.
+  function focusRow(row) {
+    if (!row || !row.length) return
+    var active = row.filter(function (el) { return el.parentNode.classList.contains('uk-active') })[0]
+    ;(active || row[0]).focus()
+  }
+
+  function focusRelative(links, offset) {
+    var target = links[links.indexOf(document.activeElement) + offset]
+    if (target) target.focus()
+  }
+
+  // j/k: a row down or up, holding the column inside the listing and stepping
+  // out into the filters once past the first story.
   function relativelyFocusLink(offset) {
-    if (document.activeElement.classList.contains('comments')) {
-      var commentLinks = Array.from(document.querySelectorAll("a.comments"))
-      var currentCommentLink = commentLinks.indexOf(document.activeElement)
-      commentLinks[currentCommentLink + offset].focus()
-    } else if (document.activeElement.classList.contains('points')) {
-      var pointsLinks = Array.from(document.querySelectorAll("a.points"))
-      var currentPointLink = pointsLinks.indexOf(document.activeElement)
-      pointsLinks[currentPointLink + offset].focus()
-    } else {
-      var storyLinks = Array.from(document.querySelectorAll(".story a"))
-      var currentStoryLink = storyLinks.indexOf(document.activeElement)
-      storyLinks[currentStoryLink + offset].focus()
+    var rows = controlRows()
+    var links = storyLinks()
+    var row = rowIndexOf(rows, document.activeElement)
+
+    if (row !== -1) {
+      if (rows[row + offset]) focusRow(rows[row + offset])
+      else if (offset > 0 && links.length) links[0].focus()
+      return
+    }
+
+    var index = links.indexOf(document.activeElement)
+    // Nothing focused yet: j enters the listing, k enters the filters.
+    if (index === -1) {
+      if (offset > 0) { if (links.length) links[0].focus() }
+      else focusRow(rows[rows.length - 1])
+      return
     }
-  }
 
-  function focusPreviousLink() {
-      var links = Array.from(document.querySelectorAll("a"))
-      var currentLink = links.indexOf(document.activeElement)
-      links[currentLink - 1].focus()
+    if (links[index + offset]) links[index + offset].focus()
+    else if (offset < 0) focusRow(rows[rows.length - 1])
   }
 
-  function focusNextLink() {
-      var links = Array.from(document.querySelectorAll("a"))
-      var currentLink = links.indexOf(document.activeElement)
-      links[currentLink + 1].focus()
+  // h/l: the previous or next link. Inside a filter row the walk is clamped to
+  // that row, so stepping past the last score pill cannot drop focus into the
+  // page heading or the listing behind it.
+  function focusHorizontally(offset) {
+    var rows = controlRows()
+    var row = rowIndexOf(rows, document.activeElement)
+    focusRelative(row === -1 ? visibleLinks('a') : rows[row], offset)
   }
 
   document.addEventListener('keydown', function (e) {
+    // The cheatsheet is a dialog over the page; walking focus underneath it
+    // would scroll the listing out from behind it.
+    if (document.querySelector('.uk-modal.uk-open')) return
+
+    // Space activates a focused filter the way it would a button; these are
+    // anchors, which answer only to Enter on their own, and the page would
+    // scroll instead.
+    if (e.key === ' ' && rowIndexOf(controlRows(), document.activeElement) !== -1) {
+      e.preventDefault()
+      document.activeElement.click()
+      return
+    }
+
     if (!['h', 'j', 'k', 'l'].includes(e.key)) return
-    if (e.key === 'h') focusPreviousLink()
+    if (e.key === 'h') focusHorizontally(-1)
     if (e.key === 'j') relativelyFocusLink(1)
     if (e.key === 'k') relativelyFocusLink(-1)
-    if (e.key === 'l') focusNextLink()
+    if (e.key === 'l') focusHorizontally(1)
   })
 </script>
diff --git a/views/layout.erb b/views/layout.erb
index 7f9d21e..af32a34 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -12,6 +12,40 @@
       .hn-text-xsmall { font-size: 0.75em !important }
       .hn-cursor-pointer { cursor: pointer }
 
+      /* Rows the "new since last visit" filter keeps. The rule is paid for out
+         of the cell's own padding so marked titles stay aligned with the rest,
+         and tr[hidden] is spelled out because UIkit's table rules would
+         otherwise outrank the UA stylesheet's [hidden]. */
+      .hn-table-xsmall tr[hidden] { display: none }
+      tr.hn-new td.story { border-left: 3px solid #1e87f0; padding-left: 9px }
+
+      /* UIkit clears the focus ring on links, which leaves the j/k walk through
+         the filters with nothing to show for it -- the score pills would take
+         focus invisibly. Restricted to :focus-visible so clicking a pill does
+         not leave a ring behind. */
+      a:focus-visible,
+      .uk-subnav > * > a:focus-visible { outline: 2px solid #1e87f0; outline-offset: 2px }
+
+      /* Keys in the ? cheatsheet. UIkit paints <code> pink on near-white,
+         which reads as a link here rather than as a key. */
+      .hn-keys code {
+        background: #f8f8f8;
+        border: 1px solid #ddd;
+        border-radius: 3px;
+        padding: 2px 6px;
+        color: inherit;
+      }
+
+      /* UIkit's .uk-close only recolours the control; the browser's own button
+         chrome would still box the glyph. */
+      .uk-modal .uk-close {
+        background: none;
+        border: none;
+        font-size: 1.5rem;
+        line-height: 1;
+        cursor: pointer;
+      }
+
       .story a { text-decoration: none; }
       table a:visited { color: #999 }
 
@@ -79,6 +113,17 @@
            they sit beside. */
         .hn-dark .uk-comment-list li { border-left-color: #2a2a2a }
         .hn-dark .uk-comment-list li:hover { border-left-color: #58a6ff }
+
+        /* Same AAA blue as the high-score highlight; UIkit's #1e87f0 is dimmer
+           than the off-white text next to it on black. */
+        .hn-dark tr.hn-new td.story { border-left-color: #58a6ff }
+        .hn-dark a:focus-visible,
+        .hn-dark .uk-subnav > * > a:focus-visible { outline-color: #58a6ff }
+
+        /* The dialog keeps UIkit's white background otherwise, which .uk-light
+           then writes white text onto. */
+        .hn-dark .uk-modal-dialog { background-color: #111 }
+        .hn-dark .hn-keys code { background: #1a1a1a; border-color: #333 }
       }
     </style>
 
@@ -110,6 +155,10 @@
 
       <%= yield %>
 
+      <% if @shortcuts %>
+        <%= erb :_shortcuts, layout: false, locals: { shortcuts: @shortcuts } %>
+      <% end %>
+
       <% if ENV['GA_TRACKING_ID'] %>
         <script async src="https://www.googletagmanager.com/gtag/js?id=<%= ENV['GA_TRACKING_ID'] %>"></script>
         <script>
diff --git a/views/story.erb b/views/story.erb
index f9adaf1..196f084 100644
--- a/views/story.erb
+++ b/views/story.erb
@@ -89,6 +89,9 @@
   }
 
   document.addEventListener('keydown', function (e) {
+    // Ignore the nav keys while the ? cheatsheet is up, or focus walks the
+    // thread behind the dialog.
+    if (document.querySelector('.uk-modal.uk-open')) return
     if (!['h', 'j', 'k', 'l'].includes(e.key)) return
     if (e.key === 'h') focusPreviousLink()
     if (e.key === 'j') relativelyFocusLink(1)