diff --git a/src/pages/catchup.css b/src/pages/catchup.css index 024ea614..05eb6a90 100644 --- a/src/pages/catchup.css +++ b/src/pages/catchup.css @@ -525,10 +525,13 @@ background-color: var(--bg-faded-color); box-shadow: 0 8px 16px -8px var(--drop-shadow-color), inset 0 1px var(--bg-color); - outline: 1px solid var(--outline-color); text-shadow: 0 1px var(--bg-color); } + &:hover:not(:focus-visible) { + outline: 1px solid var(--outline-color); + } + &:active { filter: brightness(0.95); box-shadow: none; @@ -1091,6 +1094,20 @@ dd { margin-block-end: 1em; margin-inline: 1em; + + + dd { + margin-block-start: -0.9em; + } } } + + kbd { + border-radius: 4px; + display: inline-block; + padding: 0.2em 0.3em; + margin: 1px 0; + line-height: 1; + border: 1px solid var(--outline-color); + background-color: var(--bg-faded-color); + } } diff --git a/src/pages/catchup.jsx b/src/pages/catchup.jsx index a9aeed7f..fe5cd5a7 100644 --- a/src/pages/catchup.jsx +++ b/src/pages/catchup.jsx @@ -740,18 +740,23 @@ function Catchup() { 'h, l', (_, handler) => { // Go next/prev selectedAuthor in authorCountsList list + const key = handler.keys[0]; if (selectedAuthor) { - const key = handler.keys[0]; const index = authorCountsList.indexOf(selectedAuthor); if (key === 'h') { if (index > 0 && index < authorCountsList.length) { setSelectedAuthor(authorCountsList[index - 1]); + scrollableRef.current?.focus(); } } else if (key === 'l') { if (index < authorCountsList.length - 1 && index >= 0) { setSelectedAuthor(authorCountsList[index + 1]); + scrollableRef.current?.focus(); } } + } else if (key === 'l') { + setSelectedAuthor(authorCountsList[0]); + scrollableRef.current?.focus(); } }, { @@ -761,6 +766,34 @@ function Catchup() { }, ); + const escRef = useHotkeys( + 'esc', + () => { + setSelectedAuthor(null); + scrollableRef.current?.focus(); + }, + { + preventDefault: true, + ignoreModifiers: true, + enableOnFormTags: ['input'], + }, + ); + + const dotRef = useHotkeys( + '.', + () => { + scrollableRef.current?.scrollTo({ + top: 0, + behavior: 'smooth', + }); + }, + { + preventDefault: true, + ignoreModifiers: true, + enableOnFormTags: ['input'], + }, + ); + return (