feat(KeyboardShortcuts): make logic more robust

The original keyboard shortcuts handling code was used as a basis for
specify/specify7#5097, but then, on that PR I
made logic more robust and added features.

Now backporting the code from that PR back into calendar-plus.

Fixes #255

src/src/components/Atoms/Internationalization.tsx

@@ -122,6 +122,13 @@ const numberFormatter = new Intl.NumberFormat(LANGUAGE);
 export const formatNumber = (number: number): string =>
   numberFormatter.format(number);
 
+const disjunctionFormatter = new Intl.ListFormat(LANGUAGE, {
+  style: 'long',
+  type: 'disjunction',
+});
+export const formatDisjunction = (list: RA<string>): string =>
+  disjunctionFormatter.format(list);
+
 /* eslint-disable @typescript-eslint/no-magic-numbers */
 export const MILLISECONDS = 1;
 export const SECOND = 1000 * MILLISECONDS;

src/src/components/Atoms/index.tsx

@@ -234,3 +234,9 @@ export const Widget = wrap(
   'section',
   'flex flex-col gap-2 rounded bg-white dark:bg-neutral-800',
 );
+
+export const Key = wrap(
+  'Key',
+  'kbd',
+  'bg-gray-200 border-1 dark:border-none dark:bg-neutral-700 rounded-sm mx-1 p-0.5 text-xl',
+);

src/src/components/Contexts/Contexts.tsx

@@ -8,7 +8,6 @@ import { PreferencesProvider } from '../Preferences/Context';
 import { AuthenticationProvider } from './AuthContext';
 import { CalendarsSpy } from './CalendarsContext';
 import { TrackCurrentView } from './CurrentViewContext';
-import { KeyboardListener } from './KeyboardContext';
 import { SettingsProvider } from './SettingsContext';
 import { VersionsContextProvider } from './VersionsContext';
 import { output } from '../Errors/exceptions';
@@ -60,9 +59,7 @@ export function Contexts({
               <SettingsProvider>
                 <TrackCurrentView>
                   <VersionsContextProvider>
-                    <KeyboardListener>
-                      <CalendarsSpy>{children}</CalendarsSpy>
-                    </KeyboardListener>
+                    <CalendarsSpy>{children}</CalendarsSpy>
                   </VersionsContextProvider>
                 </TrackCurrentView>
               </SettingsProvider>

src/src/components/Core/App.tsx

@@ -6,7 +6,6 @@ import { Button } from '../Atoms';
 import { AuthContext } from '../Contexts/AuthContext';
 import { CalendarsContext } from '../Contexts/CalendarsContext';
 import { CurrentViewContext } from '../Contexts/CurrentViewContext';
-import { KeyboardContext } from '../Contexts/KeyboardContext';
 import { Dashboard } from '../Dashboard';
 import { useEvents } from '../EventsStore';
 import { OverlayPortal } from '../Molecules/Portal';
@@ -16,12 +15,12 @@ import { CondenseInterface } from '../PowerTools/CondenseInterface';
 import { GhostEvents } from '../PowerTools/GhostEvents';
 import { HideEditAll } from '../PowerTools/HideEditAll';
 import { PreferencesPage } from '../Preferences';
-import { usePref } from '../Preferences/usePref';
 import { FirstAuthScreen } from './FirstAuthScreen';
 import { useStorage } from '../../hooks/useStorage';
 import { DevModeConsoleOverlay } from '../DebugOverlay/DevModeConsoleOverlay';
 import { domReadingEligibleViews } from '../DomReading';
 import { ThemeDetector } from '../Contexts/ThemeColor';
+import { useKeyboardShortcut } from '../KeyboardShortcuts/hooks';
 
 /**
  * Entrypoint react component for the extension
@@ -32,15 +31,15 @@ export function App(): JSX.Element | null {
   );
   const isOpen = state !== 'closed';
 
-  const [openOverlayShortcut] = usePref('feature', 'openOverlayShortcut');
-  const [closeOverlayShortcut] = usePref('feature', 'closeOverlayShortcut');
-  const handleKeyboardShortcut = React.useContext(KeyboardContext);
-  React.useEffect(
-    () =>
-      isOpen
-        ? handleKeyboardShortcut(closeOverlayShortcut, () => setState('closed'))
-        : handleKeyboardShortcut(openOverlayShortcut, () => setState('main')),
-    [isOpen, handleKeyboardShortcut, closeOverlayShortcut, openOverlayShortcut],
+  useKeyboardShortcut(
+    'feature',
+    'openOverlayShortcut',
+    isOpen ? undefined : () => setState('main'),
+  );
+  useKeyboardShortcut(
+    'feature',
+    'closeOverlayShortcut',
+    isOpen ? () => setState('closed') : undefined,
   );
 
   const [domReadingEnabled, setDomReadingEnabled] = React.useState(true);

src/src/components/Core/__tests__/App.test.tsx

@@ -6,7 +6,7 @@ import { CurrentViewContext } from '../../Contexts/CurrentViewContext';
 import { testTime } from '../../../tests/helpers';
 import { act } from '@testing-library/react';
 import { VersionsContextProvider } from '../../Contexts/VersionsContext';
-import { KeyboardListener } from '../../Contexts/KeyboardContext';
+import { KeyboardListener } from '../../KeyboardShortcuts/context';
 
 test('does not render until current date is extracted', () =>
   act(() => {

src/src/components/DebugOverlay/DevModeConsoleOverlay.tsx

@@ -28,7 +28,7 @@ export function DevModeConsoleOverlay() {
             type === 'log'
               ? 'bg-white dark:bg-black'
               : type === 'warn'
-                ? 'bg-orange-300 dark:bg-orange-800'
+                ? 'bg-orange-300 dark:bg-orange-600'
                 : 'bg-red-400 dark:bg-red-700'
           }
         >

src/src/components/EventsStore/index.ts

@@ -6,6 +6,7 @@ import { formatUrl } from '../../utils/queryString';
 import type { IR, R, RA, WritableArray } from '../../utils/types';
 import { findLastIndex, group, sortFunction } from '../../utils/utils';
 import {
+  formatDisjunction,
   HOUR,
   MILLISECONDS_IN_DAY,
   MINUTE,
@@ -293,7 +294,7 @@ function readDom({
     ([calendarId]) => !knownIds.has(calendarId),
   );
   if (unknownCalendarId) {
-    return `Incorrectly retrieved event calendar id as "${unknownCalendarId[0]}" (calendar by such ID does not exist). Known calendar IDs: ${Array.from(knownIds).join(', ')}`;
+    return `Incorrectly retrieved event calendar id as "${unknownCalendarId[0]}" (calendar by such ID does not exist). Known calendar IDs: ${formatDisjunction(Array.from(knownIds))}`;
   }
 
   return allDurations;