Use kbar for highlighting shortcuts, cleanup options

packages/web/components/patterns/HighlightBar.tsx

@@ -1,5 +1,3 @@
-import { highlightBarKeyboardCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
-import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardShortcuts'
 import { isAndroid } from '../../lib/deviceType'
 
 import { styled, theme } from '../tokens/stitches.config'
@@ -82,21 +80,6 @@ export function HighlightBar(props: HighlightBarProps): JSX.Element {
 }
 
 function BarContent(props: HighlightBarProps): JSX.Element {
-  useKeyboardShortcuts(
-    highlightBarKeyboardCommands((action) => {
-      switch (action) {
-        case 'createHighlight':
-          props.handleButtonClick('create')
-          break
-        case 'openNoteModal':
-          props.handleButtonClick('comment')
-          break
-        case 'openPostModal':
-          break
-      }
-    })
-  )
-
   const Separator = styled('div', {
     width: '1px',
     maxWidth: '1px',

packages/web/components/patterns/PrimaryHeader.tsx

@@ -48,7 +48,7 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
     {
       id: 'lightTheme',
       section: 'Preferences',
-      name: 'Change theme (lighter) ',
+      name: 'Change theme (light) ',
       shortcut: ['v', 'l'],
       keywords: 'light theme',
       perform: () => lightenTheme(),
@@ -56,7 +56,7 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
     {
       id: 'darkTheme',
       section: 'Preferences',
-      name: 'Change theme (darker) ',
+      name: 'Change theme (dark) ',
       shortcut: ['v', 'd'],
       keywords: 'dark theme',
       perform: () => darkenTheme(),

packages/web/components/templates/homeFeed/HomeFeedContainer.tsx

@@ -491,18 +491,18 @@ export function HomeFeedContainer(): JSX.Element {
   ]
 
   const UNACTIVE_ACTIONS = [
-    createAction({
-      section: 'Library',
-      name: 'Sort item in ascending order',
-      shortcut: ['s', 'o'],
-      perform: () => setQueryInputs({ ...queryInputs, sortDescending: false }),
-    }),
-    createAction({
-      section: 'Library',
-      name: 'Sort item in descending order',
-      shortcut: ['s', 'n'],
-      perform: () => setQueryInputs({ ...queryInputs, sortDescending: true }),
-    }),
+    // createAction({
+    //   section: 'Library',
+    //   name: 'Sort in ascending order',
+    //   shortcut: ['s', 'o'],
+    //   perform: () => setQueryInputs({ ...queryInputs, sortDescending: false }),
+    // }),
+    // createAction({
+    //   section: 'Library',
+    //   name: 'Sort in descending order',
+    //   shortcut: ['s', 'n'],
+    //   perform: () => setQueryInputs({ ...queryInputs, sortDescending: true }),
+    // }),
   ]
 
   useRegisterActions(searchResults.map(link => ({

packages/web/pages/[username]/[slug]/index.tsx

@@ -17,7 +17,6 @@ import { deleteHighlightMutation } from '../../../lib/networking/mutations/delet
 import { mergeHighlightMutation } from '../../../lib/networking/mutations/mergeHighlightMutation'
 import { articleReadingProgressMutation } from '../../../lib/networking/mutations/articleReadingProgressMutation'
 import { updateHighlightMutation } from '../../../lib/networking/mutations/updateHighlightMutation'
-import { userPersonalizationMutation } from '../../../lib/networking/mutations/userPersonalizationMutation'
 import Script from 'next/script'
 import { theme } from '../../../components/tokens/stitches.config'
 import { ArticleActionsMenu } from '../../../components/templates/article/ArticleActionsMenu'
@@ -154,6 +153,26 @@ export default function Home(): JSX.Element {
       shortcut: ['u'],
       perform: () => router.push(`/home`),
     },
+    {
+      id: 'highlight',
+      section: 'Article',
+      name: 'Highlight selected text',
+      shortcut: ['h'],
+      perform: () => {
+        const event = new Event('highlight');
+        document.dispatchEvent(event);
+      },
+    },
+    {
+      id: 'note',
+      section: 'Article',
+      name: 'Highlight selected text and add a note',
+      shortcut: ['n'],
+      perform: () => {
+        const event = new Event('annotate');
+        document.dispatchEvent(event);
+      },
+    },
   ], [article])
 
   if (articleFetchError && articleFetchError.indexOf('NOT_FOUND') > -1) {