Shift+click to open compose window

- Fixes for closing
- Easier code for checking if can close window

src/app.jsx

@@ -18,6 +18,7 @@ import Settings from './pages/settings';
 import Status from './pages/status';
 import Welcome from './pages/welcome';
 import { getAccessToken } from './utils/auth';
+import openCompose from './utils/open-compose';
 import states from './utils/states';
 import store from './utils/store';
 
@@ -224,7 +225,17 @@ export function App() {
           <button
             type="button"
             id="compose-button"
-            onClick={() => (states.showCompose = true)}
+            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="xxl" alt="Compose" />
           </button>
@@ -268,9 +279,10 @@ export function App() {
             }
             editStatus={snapStates.showCompose?.editStatus || null}
             draftStatus={snapStates.showCompose?.draftStatus || null}
-            onClose={(result) => {
+            onClose={(results) => {
+              const { newStatus } = results || {};
               states.showCompose = false;
-              if (result) {
+              if (newStatus) {
                 states.reloadStatusPage++;
               }
             }}

src/components/compose.jsx

@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import stringLength from 'string-length';
 
 import emojifyText from '../utils/emojify-text';
+import openCompose from '../utils/open-compose';
 import store from '../utils/store';
 import visibilityIconsMap from '../utils/visibility-icons-map';
 
@@ -207,30 +208,36 @@ export default ({
   const canClose = () => {
     const { value, dataset } = textareaRef.current;
 
-    // check for non-ID media attachments
+    // check for status and media attachments with IDs
-    const hasNonIDMediaAttachments =
+    const hasIDMediaAttachments =
       mediaAttachments.length > 0 &&
-      mediaAttachments.some((media) => !media.id);
+      mediaAttachments.every((media) => media.id);
+    if (!value && hasIDMediaAttachments) {
+      console.log('canClose', { value, mediaAttachments });
+      return true;
+    }
 
     // check if status contains only "@acct", if replying
-    const hasAcct =
+    const isSelf = replyToStatus?.account.id === currentAccount;
+    const hasOnlyAcct =
       replyToStatus && value.trim() === `@${replyToStatus.account.acct}`;
+    if (!isSelf && hasOnlyAcct) {
+      console.log('canClose', { isSelf, hasOnlyAcct });
+      return true;
+    }
 
-    // check if status is different than source
+    // check if status is same with source
-    const differentThanSource = dataset?.source && value !== dataset.source;
+    const sameWithSource = value === dataset?.source;
+    if (sameWithSource) {
+      console.log('canClose', { sameWithSource });
+      return true;
+    }
 
-    console.log({
+    return false;
-      value,
+  };
-      hasAcct,
-      differentThanSource,
-      hasNonIDMediaAttachments,
-    });
 
-    if (
+  const confirmClose = () => {
-      (value && !hasAcct) ||
+    if (canClose()) {
-      differentThanSource ||
-      hasNonIDMediaAttachments
-    ) {
       const yes = confirm(beforeUnloadCopy);
       return yes;
     }
@@ -283,30 +290,11 @@ export default ({
                   }
                 }
 
-                const url = new URL('/compose/', window.location);
-                const screenWidth = window.screen.width;
-                const screenHeight = window.screen.height;
-                const left = Math.max(0, (screenWidth - 600) / 2);
-                const top = Math.max(0, (screenHeight - 450) / 2);
-                const width = Math.min(screenWidth, 600);
-                const height = Math.min(screenHeight, 450);
-                const newWin = window.open(
-                  url,
-                  'compose' + Math.random(),
-                  `width=${width},height=${height},left=${left},top=${top}`,
-                );
-
-                if (!newWin) {
-                  alert('Looks like your browser is blocking popups.');
-                  return;
-                }
-
                 const mediaAttachmentsWithIDs = mediaAttachments.filter(
                   (media) => media.id,
                 );
 
-                newWin.masto = masto;
+                const newWin = openCompose({
-                newWin.__COMPOSE__ = {
                   editStatus,
                   replyToStatus,
                   draftStatus: {
@@ -316,10 +304,14 @@ export default ({
                     sensitive,
                     mediaAttachments: mediaAttachmentsWithIDs,
                   },
-                };
-                onClose(() => {
-                  window.opener.__STATES__.reloadStatusPage++;
                 });
+
+                if (!newWin) {
+                  alert('Looks like your browser is blocking popups.');
+                  return;
+                }
+
+                onClose();
               }}
             >
               <Icon icon="popout" alt="Pop out" />
@@ -328,7 +320,7 @@ export default ({
               type="button"
               class="light close-button"
               onClick={() => {
-                if (canClose()) {
+                if (confirmClose()) {
                   onClose();
                 }
               }}
@@ -363,7 +355,8 @@ export default ({
                 (media) => media.id,
               );
 
-              onClose(() => {
+              onClose({
+                fn: () => {
                   window.opener.__STATES__.showCompose = {
                     editStatus,
                     replyToStatus,
@@ -375,6 +368,7 @@ export default ({
                       mediaAttachments: mediaAttachmentsWithIDs,
                     },
                   };
+                },
               });
             }}
           >

src/compose.jsx

@@ -8,6 +8,10 @@ import { useEffect, useState } from 'preact/hooks';
 
 import Compose from './components/compose';
 
+if (window.opener) {
+  console = window.opener.console;
+}
+
 function App() {
   const [uiState, setUIState] = useState('default');
 
@@ -42,8 +46,12 @@ function App() {
       replyToStatus={replyToStatus}
       draftStatus={draftStatus}
       standalone
-      onClose={(fn = () => {}) => {
+      onClose={(results) => {
+        const { newStatus, fn = () => {} } = results || {};
         try {
+          if (newStatus) {
+            window.opener.__STATES__.reloadStatusPage++;
+          }
           fn();
           setUIState('closed');
         } catch (e) {}

src/utils/open-compose.js

@@ -0,0 +1,23 @@
+export default (opts) => {
+  const url = new URL('/compose/', window.location);
+  const { width: screenWidth, height: screenHeight } = window.screen;
+  const left = Math.max(0, (screenWidth - 600) / 2);
+  const top = Math.max(0, (screenHeight - 450) / 2);
+  const width = Math.min(screenWidth, 600);
+  const height = Math.min(screenHeight, 450);
+  const newWin = window.open(
+    url,
+    'compose' + Math.random(),
+    `width=${width},height=${height},left=${left},top=${top}`,
+  );
+
+  if (newWin) {
+    if (masto) {
+      newWin.masto = masto;
+    }
+
+    newWin.__COMPOSE__ = opts;
+  }
+
+  return newWin;
+};