Use dispatch events on article actions

This allows the kbar to be created with no external dependencies
so there is no flicker when a dependency like the article is
loaded.

packages/web/components/patterns/PrimaryHeader.tsx

@@ -153,8 +153,6 @@ type NavHeaderProps = {
 }
 
 function NavHeader(props: NavHeaderProps): JSX.Element {
-  console.log("creating NavHeader")
-
   return (
     <nav>
       <HStack

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

@@ -121,6 +121,23 @@ export default function Home(): JSX.Element {
     }
   }, [article, cache, mutate, router, readerSettings])
 
+  useEffect(() => {
+    const archive = () => {
+      actionHandler('archive')
+    }
+    const openOriginalArticle = () => {
+      actionHandler('openOriginalArticle')
+    }
+
+    document.addEventListener('archive', archive)
+    document.addEventListener('openOriginalArticle', openOriginalArticle)
+
+    return () => {
+      document.removeEventListener('archive', archive)
+      document.removeEventListener('openOriginalArticle', openOriginalArticle)
+    }
+  }, [actionHandler])
+
   useKeyboardShortcuts(
     articleKeyboardCommands(router, async (action) => {
       actionHandler(action)
@@ -144,7 +161,9 @@ export default function Home(): JSX.Element {
       section: 'Article',
       name: 'Open original article',
       shortcut: ['o'],
-      perform: () => actionHandler('openOriginalArticle')
+      perform: () => {
+        document.dispatchEvent(new Event('openOriginalArticle'));
+      }
     },
     {
       id: 'back_home',
@@ -158,7 +177,9 @@ export default function Home(): JSX.Element {
       section: 'Article',
       name: 'Archive current item',
       shortcut: ['e'],
-      perform: () => actionHandler('archive'),
+      perform: () => {
+        document.dispatchEvent(new Event('archive'));
+      }
     },
     {
       id: 'highlight',