From c4901a1eafd008848a78d569ff18b6834c280122 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 14 Jul 2022 14:43:05 -0700
Subject: [PATCH] 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.
---
 .../web/components/patterns/PrimaryHeader.tsx |  2 --
 .../web/pages/[username]/[slug]/index.tsx     | 25 +++++++++++++++++--
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/packages/web/components/patterns/PrimaryHeader.tsx b/packages/web/components/patterns/PrimaryHeader.tsx
index 217159ace..ce1f37116 100644
--- a/packages/web/components/patterns/PrimaryHeader.tsx
+++ b/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
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index a4cbe75d6..a2c9d36c5 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/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',