diff --git a/src/App.web.tsx b/src/App.web.tsx
index aa4e911ce5..e6b91c53aa 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -35,7 +35,7 @@ import {
 } from '#/state/session'
 import {readLastActiveAccount} from '#/state/session/util'
 import {Provider as ShellStateProvider} from '#/state/shell'
-import {useComposerControls} from '#/state/shell/composer'
+import {useComposerKeyboardShortcut} from '#/state/shell/composer/useComposerKeyboardShortcut'
 import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
 import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
@@ -56,12 +56,13 @@ function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
   const {currentAccount} = useSession()
   const {resumeSession} = useSessionApi()
-  const {openComposer} = useComposerControls()
   const theme = useColorModeTheme()
   const {_} = useLingui()
   useIntentHandler()
   const hasCheckedReferrer = useStarterPackEntry()
 
+  useComposerKeyboardShortcut()
+
   // init
   useEffect(() => {
     async function onLaunch(account?: SessionAccount) {
@@ -88,16 +89,6 @@ function InnerApp() {
     })
   }, [_])
 
-  useEffect(() => {
-    const handleNShortcut = (event: KeyboardEvent) => {
-      if (event.key === 'n' || event.key === 'N') openComposer({})
-    }
-
-    document.addEventListener('keydown', handleNShortcut)
-
-    return () => document.removeEventListener('keydown', handleNShortcut)
-  }, [openComposer])
-
   // wait for session to resume
   if (!isReady || !hasCheckedReferrer) return null
 
diff --git a/src/state/shell/composer.tsx b/src/state/shell/composer/index.tsx
similarity index 100%
rename from src/state/shell/composer.tsx
rename to src/state/shell/composer/index.tsx
diff --git a/src/state/shell/composer/useComposerKeyboardShortcut.tsx b/src/state/shell/composer/useComposerKeyboardShortcut.tsx
new file mode 100644
index 0000000000..b713992e0f
--- /dev/null
+++ b/src/state/shell/composer/useComposerKeyboardShortcut.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import {useComposerControls, useComposerState} from './'
+
+export function useComposerKeyboardShortcut() {
+  const isOpen = !!useComposerState()
+  const {openComposer} = useComposerControls()
+
+  React.useEffect(() => {
+    function handler(event: KeyboardEvent) {
+      if (isOpen) return
+      if (event.key === 'n' || event.key === 'N') openComposer({})
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [isOpen, openComposer])
+}