Time to move Compose button to other pages

One missing feature: Mention @username if button is on profile page

src/app.css

@@ -1161,7 +1161,7 @@ body:has(.media-modal-container + .status-deck) .media-post-link {
   padding: 16px;
   background-color: var(--button-bg-blur-color);
   backdrop-filter: blur(16px);
-  z-index: 1;
+  z-index: 10;
   box-shadow: 0 3px 8px -1px var(--drop-shadow-color),
     0 10px 36px -4px var(--button-bg-blur-color);
   transition: all 0.3s ease-in-out;

src/app.jsx

@@ -21,6 +21,7 @@ import { useSnapshot } from 'valtio';
 import AccountSheet from './components/account-sheet';
 import Compose from './components/compose';
 import Drafts from './components/drafts';
+import Icon from './components/icon';
 import Loader from './components/loader';
 import MediaModal from './components/media-modal';
 import Modal from './components/modal';
@@ -55,6 +56,7 @@ import {
   initPreferences,
 } from './utils/api';
 import { getAccessToken } from './utils/auth';
+import openCompose from './utils/open-compose';
 import showToast from './utils/show-toast';
 import states, { getStatus, saveStatus } from './utils/states';
 import store from './utils/store';
@@ -264,6 +266,23 @@ function App() {
         </Routes>
       )}
       <div>
+        <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 &&
           !snapStates.settings.shortcutsColumnsMode &&
           snapStates.settings.shortcutsViewMode !== 'multi-column' && (

src/pages/home.jsx

@@ -49,7 +49,7 @@ function Home() {
           headerEnd={<NotificationsLink />}
         />
       )}
-      <button
+      {/* <button
         // hidden={scrollDirection === 'end' && !nearReachStart}
         type="button"
         id="compose-button"
@@ -66,7 +66,7 @@ function Home() {
         }}
       >
         <Icon icon="quill" size="xl" alt="Compose" />
-      </button>
+      </button> */}
     </>
   );
 }