Small fixes for 'Add to Thread' submenu

src/components/compose-button.jsx

@@ -1,6 +1,6 @@
 import { Trans, useLingui } from '@lingui/react/macro';
 import { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';
-import { useCallback, useRef, useState } from 'preact/hooks';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useLongPress } from 'use-long-press';
 import { useSnapshot } from 'valtio';
@@ -17,6 +17,7 @@ import statusPeek from '../utils/status-peek';
 import { getCurrentAccountID } from '../utils/store-utils';
 
 import Icon from './icon';
+import Loader from './loader';
 import MenuLink from './menu-link';
 import RelativeTime from './relative-time';
 import SubMenu2 from './submenu2';
@@ -109,6 +110,12 @@ export default function ComposeButton() {
     setMenuOpen(false);
   }, []);
 
+  useEffect(() => {
+    if (menuOpen) {
+      fetchLatestPosts();
+    }
+  }, [fetchLatestPosts, menuOpen]);
+
   return (
     <>
       <button
@@ -141,46 +148,34 @@ export default function ComposeButton() {
         boundingBoxPadding={safeBoundingBoxPadding()}
         containerProps={{
           style: {
-            zIndex: 1001,
+            zIndex: 101,
           },
         }}
+        submenuOpenDelay={600}
       >
         <MenuLink to="/sp">
-          <Icon icon="schedule" size="l" />{' '}
+          <Icon icon="schedule" />{' '}
           <span>
             <Trans>Scheduled Posts</Trans>
           </span>
         </MenuLink>
         <MenuDivider />
         <SubMenu2
+          align="end"
+          direction="top"
+          shift={-8}
+          disabled={loadingPosts || latestPosts.length === 0}
           label={
             <>
-              <Icon icon="comment" size="l" />{' '}
+              <Icon icon="comment" />{' '}
               <span className="menu-grow">
                 <Trans>Add to thread</Trans>
               </span>
-              <Icon icon="chevron-right" />
+              {loadingPosts ? '…' : <Icon icon="chevron-right" />}
             </>
           }
-          onMenuChange={(e) => {
-            if (e.open) {
-              fetchLatestPosts();
-            }
-          }}
         >
-          {loadingPosts ? (
+          {latestPosts.length > 0 &&
-            <MenuItem disabled>
-              <span>
-                <Trans>Loading…</Trans>
-              </span>
-            </MenuItem>
-          ) : latestPosts.length === 0 ? (
-            <MenuItem disabled>
-              <small>
-                <Trans>No posts found</Trans>
-              </small>
-            </MenuItem>
-          ) : (
             latestPosts.map((post) => {
               const createdDate = new Date(post.createdAt);
               const isWithinDay =
@@ -209,8 +204,7 @@ export default function ComposeButton() {
                   </small>
                 </MenuItem>
               );
-            })
+            })}
-          )}
         </SubMenu2>
       </ControlledMenu>
     </>

src/locales/en.po

@@ -565,32 +565,22 @@ msgstr ""
 msgid "Home"
 msgstr ""
 
-#: src/components/compose-button.jsx:128
+#: src/components/compose-button.jsx:135
 #: src/compose.jsx:38
 msgid "Compose"
 msgstr ""
 
-#: src/components/compose-button.jsx:151
+#: src/components/compose-button.jsx:159
 #: src/components/nav-menu.jsx:260
 #: src/pages/scheduled-posts.jsx:31
 #: src/pages/scheduled-posts.jsx:76
 msgid "Scheduled Posts"
 msgstr "Scheduled Posts"
 
-#: src/components/compose-button.jsx:160
+#: src/components/compose-button.jsx:172
 msgid "Add to thread"
 msgstr "Add to thread"
 
-#: src/components/compose-button.jsx:174
-#: src/components/status.jsx:3034
-#: src/pages/annual-report.jsx:45
-msgid "Loading…"
-msgstr ""
-
-#: src/components/compose-button.jsx:180
-msgid "No posts found"
-msgstr "No posts found"
-
 #: src/components/compose.jsx:211
 msgid "Add media"
 msgstr "Add media"
@@ -2406,6 +2396,11 @@ msgstr ""
 msgid "Failed to load history"
 msgstr ""
 
+#: src/components/status.jsx:3034
+#: src/pages/annual-report.jsx:45
+msgid "Loading…"
+msgstr ""
+
 #: src/components/status.jsx:3270
 msgid "HTML Code"
 msgstr ""