mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 13:36:48 +00:00
4346d7f2c1
A help icon on every screen opens a panel with the screen's overview, its sub-screens, task guides with a framed picture per step, search across guides and the wiki, and a switch to any other screen's help. Guides exist for the dashboard, Vacay, Atlas, Collections, Journey (list, journal, studio), Settings (all tabs), Admin (all tabs) and the trip frame; the trip's own screens are in progress. Pictures are produced by Playwright (client/e2e/help), texts in all 23 languages.
23 lines
918 B
TypeScript
23 lines
918 B
TypeScript
import { useEffect } from 'react'
|
|
import { useHelpStore } from '../store/helpStore'
|
|
|
|
/**
|
|
* `Escape` closes the help dialog (the lightbox first, when one is open). The
|
|
* `?` in the navbar is the only way in: a hotkey would fire while someone is
|
|
* typing a question mark into a note, and the help is one click away anyway.
|
|
*/
|
|
export function useHelpShortcut(): void {
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key !== 'Escape' || e.defaultPrevented) return
|
|
const { open, closeHelp, lightbox, openLightbox } = useHelpStore.getState()
|
|
if (!open) return
|
|
if (lightbox) openLightbox(null)
|
|
// A modal the reader opened while following a guide keeps its own Escape.
|
|
else if (!document.querySelector('.trek-modal-backdrop')) closeHelp()
|
|
}
|
|
window.addEventListener('keydown', onKey)
|
|
return () => window.removeEventListener('keydown', onKey)
|
|
}, [])
|
|
}
|