nmemmertandClaude Sonnet 5.5
a9ca647d5a
A highlighter button beside Bookmarks opens your highlights (by colour); Bookmarks now opens the bookmarks. Each shows in the accent colour when you have some. "H" opens the highlights. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
66 lines
2.9 KiB
React
66 lines
2.9 KiB
React
// The "?" cheat sheet: every keyboard shortcut for the page you are on, plus the ones that work everywhere.
|
|
import { useEffect, useRef } from 'react';
|
|
import { useApp } from '../context/AppContext.js';
|
|
import { themeVars } from './reader/readerThemes.js';
|
|
|
|
const GLOBAL = [
|
|
['⌘K / Ctrl K', 'Search and go to a passage'],
|
|
['?', 'Show this list'],
|
|
['Esc', 'Close whatever is open'],
|
|
];
|
|
const BY_PAGE = {
|
|
reader: [
|
|
['← →', 'Previous / next chapter'],
|
|
['/', 'Search this chapter or the whole Bible'],
|
|
['G', 'Pick a book and chapter'],
|
|
['B', 'Bookmark the selected verse'],
|
|
['C', 'Compare translations'],
|
|
['H', 'Your highlights'],
|
|
[',', 'Reading settings'],
|
|
['F', 'Hide or show the controls'],
|
|
],
|
|
study: [
|
|
['← →', 'Previous / next chunk'],
|
|
],
|
|
};
|
|
|
|
export default function ShortcutsHelp({ onClose }) {
|
|
const { readerTheme, currentPage } = useApp();
|
|
const closeRef = useRef(null);
|
|
useEffect(() => {
|
|
const from = document.activeElement;
|
|
closeRef.current?.focus();
|
|
const onKey = (e) => { if (e.key === 'Escape' || e.key === '?') { e.preventDefault(); e.stopPropagation(); onClose(); } };
|
|
document.addEventListener('keydown', onKey, true);
|
|
return () => { document.removeEventListener('keydown', onKey, true); if (from instanceof HTMLElement && document.contains(from)) from.focus({ preventScroll: true }); };
|
|
}, [onClose]);
|
|
|
|
const page = BY_PAGE[currentPage] ?? [];
|
|
const section = (title, rows) => (
|
|
<div className="mb-4 last:mb-0">
|
|
<h3 className="mb-1.5 text-[11px] uppercase tracking-wide text-[var(--r-sub)]">{title}</h3>
|
|
<dl className="space-y-1.5">
|
|
{rows.map(([keys, what]) => (
|
|
<div key={keys} className="flex items-center justify-between gap-4 text-sm">
|
|
<dt><kbd className="rounded-md border border-[var(--r-line)] bg-[var(--r-bg)] px-2 py-0.5 font-mono text-xs">{keys}</kbd></dt>
|
|
<dd className="text-right text-[var(--r-sub)]">{what}</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div style={themeVars(readerTheme)} className="fixed inset-0 z-[90] flex items-center justify-center bg-black/40 px-3 font-sans" onMouseDown={(e) => { if (e.target === e.currentTarget) onClose(); }}>
|
|
<div role="dialog" aria-modal="true" aria-label="Keyboard shortcuts" className="max-h-[80vh] w-full max-w-sm overflow-y-auto rounded-2xl border border-[var(--r-line)] bg-[var(--r-bar)] p-5 text-[var(--r-text)] shadow-2xl">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h2 className="text-base font-medium">Keyboard shortcuts</h2>
|
|
<button ref={closeRef} type="button" onClick={onClose} className="rounded-lg px-2 py-1 text-sm text-[var(--r-sub)] hover:bg-black/5">Close</button>
|
|
</div>
|
|
{page.length > 0 && section(currentPage === 'reader' ? 'In the Bible' : 'In this study', page)}
|
|
{section('Everywhere', GLOBAL)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|