Extract compose button to file

src/app.jsx

@@ -20,8 +20,9 @@ import { useSnapshot } from 'valtio';
 import AccountSheet from './components/account-sheet';
 import BackgroundService from './components/background-service';
 import Compose from './components/compose';
+import ComposeButton from './components/compose-button';
 import Drafts from './components/drafts';
-import Icon, { ICONS } from './components/icon';
+import { ICONS } from './components/icon';
 import Loader from './components/loader';
 import MediaModal from './components/media-modal';
 import Modal from './components/modal';
@@ -58,7 +59,6 @@ import {
   initPreferences,
 } from './utils/api';
 import { getAccessToken } from './utils/auth';
-import openCompose from './utils/open-compose';
 import showToast from './utils/show-toast';
 import states, { initStates } from './utils/states';
 import store from './utils/store';
@@ -283,25 +283,7 @@ function App() {
           <Route path="/:instance?/s/:id" element={<StatusRoute />} />
         </Routes>
       )}
-      {isLoggedIn && (
-        <button
-          type="button"
-          id="compose-button"
-          onClick={(e) => {
-            if (e.shiftKey) {
-              const newWin = openCompose();
-              if (!newWin) {
-                alert('Looks like your browser is blocking popups.');
-                states.showCompose = true;
-              }
-            } else {
-              states.showCompose = true;
-            }
-          }}
-        >
-          <Icon icon="quill" size="xl" alt="Compose" />
-        </button>
-      )}
+      {isLoggedIn && <ComposeButton />}
       {isLoggedIn &&
         !snapStates.settings.shortcutsColumnsMode &&
         snapStates.settings.shortcutsViewMode !== 'multi-column' && (

src/components/compose-button.jsx

@@ -0,0 +1,27 @@
+import openCompose from '../utils/open-compose';
+import states from '../utils/states';
+
+import Icon from './icon';
+
+export default function ComposeButton() {
+  return (
+    <button
+      type="button"
+      id="compose-button"
+      onClick={(e) => {
+        if (e.shiftKey) {
+          const newWin = openCompose();
+
+          if (!newWin) {
+            alert('Looks like your browser is blocking popups.');
+            states.showCompose = true;
+          }
+        } else {
+          states.showCompose = true;
+        }
+      }}
+    >
+      <Icon icon="quill" size="xl" alt="Compose" />
+    </button>
+  );
+}