More keyboard shortcuts for Catch-up

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);
+  }
 }

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 (
     <div
       ref={(node) => {
@@ -768,6 +801,7 @@ function Catchup() {
         jRef.current = node;
         kRef.current = node;
         hlRef.current = node;
+        escRef.current = node;
       }}
       id="catchup-page"
       class="deck-container"
@@ -1430,6 +1464,25 @@ function Catchup() {
                   Posts are grouped by authors, sorted by posts count per
                   author.
                 </dd>
+                <dt>Keyboard shortcuts</dt>
+                <dd>
+                  <kbd>j</kbd>: Next post
+                </dd>
+                <dd>
+                  <kbd>k</kbd>: Previous post
+                </dd>
+                <dd>
+                  <kbd>l</kbd>: Next author
+                </dd>
+                <dd>
+                  <kbd>h</kbd>: Previous author
+                </dd>
+                <dd>
+                  <kbd>Enter</kbd>: Open post details
+                </dd>
+                <dd>
+                  <kbd>.</kbd>: Scroll to top
+                </dd>
               </dl>
             </main>
           </div>