Reduce rerenders of the kbar items

packages/web/components/patterns/PrimaryHeader.tsx

@@ -1,7 +1,7 @@
 import { Box, HStack } from '../elements/LayoutPrimitives'
 import { OmnivoreNameLogo } from './../elements/images/OmnivoreNameLogo'
 import { DropdownMenu, HeaderDropdownAction } from './../patterns/DropdownMenu'
-import { darkenTheme, lightenTheme, updateTheme } from '../../lib/themeUpdater'
+import { updateTheme } from '../../lib/themeUpdater'
 import { AvatarDropdown } from './../elements/AvatarDropdown'
 import { ThemeId } from './../tokens/stitches.config'
 import { useCallback, useEffect, useState } from 'react'
@@ -10,7 +10,6 @@ import { useKeyboardShortcuts } from '../../lib/keyboardShortcuts/useKeyboardSho
 import { primaryCommands } from '../../lib/keyboardShortcuts/navigationShortcuts'
 import { UserBasicData } from '../../lib/networking/queries/useGetViewerQuery'
 import { setupAnalytics } from '../../lib/analytics'
-import { useRegisterActions } from 'kbar'
 
 type HeaderProps = {
   user?: UserBasicData
@@ -44,25 +43,6 @@ export function PrimaryHeader(props: HeaderProps): JSX.Element {
     })
   )
 
-  useRegisterActions([
-    {
-      id: 'lightTheme',
-      section: 'Preferences',
-      name: 'Change theme (light) ',
-      shortcut: ['v', 'l'],
-      keywords: 'light theme',
-      perform: () => lightenTheme(),
-    },
-    {
-      id: 'darkTheme',
-      section: 'Preferences',
-      name: 'Change theme (dark) ',
-      shortcut: ['v', 'd'],
-      keywords: 'dark theme',
-      perform: () => darkenTheme(),
-    },
-  ])
-
   const initAnalytics = useCallback(() => {
     setupAnalytics(props.user)
   }, [props.user])

packages/web/lib/hooks/useReaderSettings.tsx

@@ -130,7 +130,7 @@ export const useReaderSettings = (): ReaderSettings => {
       shortcut: ['l'],
       perform: () => setShowSetLabelsModal(true),
     },
-  ], [fontSize, marginWidth, setFontSize, setMarginWidth])
+  ], [])
 
   return {
     preferencesData,

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

@@ -147,8 +147,8 @@ export default function Home(): JSX.Element {
       perform: () => actionHandler('openOriginalArticle')
     },
     {
-      id: 'back',
-      section: 'Navigation',
+      id: 'back_home',
+      section: 'Article',
       name: 'Return to library',
       shortcut: ['u'],
       perform: () => router.push(`/home`),
@@ -166,8 +166,7 @@ export default function Home(): JSX.Element {
       name: 'Highlight selected text',
       shortcut: ['h'],
       perform: () => {
-        const event = new Event('highlight');
-        document.dispatchEvent(event);
+        document.dispatchEvent(new Event('highlight'));
       },
     },
     {
@@ -176,11 +175,10 @@ export default function Home(): JSX.Element {
       name: 'Highlight selected text and add a note',
       shortcut: ['n'],
       perform: () => {
-        const event = new Event('annotate');
-        document.dispatchEvent(event);
+        document.dispatchEvent(new Event('annotate'));
       },
     },
-  ], [article])
+  ], [])
 
   if (articleFetchError && articleFetchError.indexOf('NOT_FOUND') > -1) {
     router.push('/404')

packages/web/pages/_app.tsx

@@ -16,6 +16,7 @@ import {
   KBarSearch,
 } from 'kbar'
 import { animatorStyle, KBarResultsComponents, searchStyle } from '../components/elements/KBar'
+import { darkenTheme, lightenTheme } from '../lib/themeUpdater'
 
 TopBarProgress.config({
   barColors: {
@@ -36,6 +37,22 @@ const generateActions = (router: NextRouter) => {
       keywords: 'go home',
       perform: () => router?.push('/home'),
     },
+    {
+      id: 'lightTheme',
+      section: 'Preferences',
+      name: 'Change theme (light) ',
+      shortcut: ['v', 'l'],
+      keywords: 'light theme',
+      perform: () => lightenTheme(),
+    },
+    {
+      id: 'darkTheme',
+      section: 'Preferences',
+      name: 'Change theme (dark) ',
+      shortcut: ['v', 'd'],
+      keywords: 'dark theme',
+      perform: () => darkenTheme(),
+    },
   ]
 
   return defaultActions