chore: fix super export option position in menu

packages/web/src/javascripts/Components/NotesOptions/NotesOptions.tsx

@@ -1,6 +1,6 @@
 import Icon from '@/Components/Icon/Icon'
 import { observer } from 'mobx-react-lite'
-import { useState, useEffect, useMemo, useCallback } from 'react'
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react'
 import { NoteType, Platform, SNNote } from '@standardnotes/snjs'
 import {
   CHANGE_EDITOR_WIDTH_COMMAND,
@@ -8,6 +8,9 @@ import {
   PIN_NOTE_COMMAND,
   SHOW_HIDDEN_OPTIONS_KEYBOARD_COMMAND,
   STAR_NOTE_COMMAND,
+  SUPER_EXPORT_HTML,
+  SUPER_EXPORT_JSON,
+  SUPER_EXPORT_MARKDOWN,
   SUPER_SHOW_MARKDOWN_PREVIEW,
 } from '@standardnotes/ui-services'
 import ChangeEditorOption from './ChangeEditorOption'
@@ -39,6 +42,8 @@ import { useApplication } from '../ApplicationProvider'
 import { MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
 import AddToVaultMenuOption from '../Vaults/AddToVaultMenuOption'
 import { featureTrunkVaultsEnabled } from '@/FeatureTrunk'
+import Menu from '../Menu/Menu'
+import Popover from '../Popover/Popover'
 
 const iconSize = MenuItemIconSize
 const iconClassDanger = `text-danger mr-2 ${iconSize}`
@@ -181,6 +186,9 @@ const NotesOptions = ({
     [application],
   )
 
+  const superExportButtonRef = useRef<HTMLButtonElement>(null)
+  const [isSuperExportMenuOpen, setIsSuperExportMenuOpen] = useState(false)
+
   const unauthorized = notes.some((note) => !application.isAuthorizedToRenderItem(note))
   if (unauthorized) {
     return <ProtectedUnauthorizedLabel />
@@ -286,7 +294,48 @@ const NotesOptions = ({
           {pinShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={pinShortcut} />}
         </MenuItem>
       )}
-      {!isOnlySuperNoteSelected && (
+      {isOnlySuperNoteSelected ? (
+        <>
+          <MenuItem
+            ref={superExportButtonRef}
+            onClick={() => {
+              setIsSuperExportMenuOpen((open) => !open)
+            }}
+          >
+            <div className="flex items-center">
+              <Icon type="download" className={iconClass} />
+              Export
+            </div>
+            <Icon type="chevron-right" className="ml-auto text-neutral" />
+          </MenuItem>
+          <Popover
+            title="Export note"
+            side="left"
+            align="start"
+            open={isSuperExportMenuOpen}
+            anchorElement={superExportButtonRef.current}
+            togglePopover={() => {
+              setIsSuperExportMenuOpen(!isSuperExportMenuOpen)
+            }}
+            className="py-1"
+          >
+            <Menu a11yLabel={'Super note export menu'} isOpen={isSuperExportMenuOpen}>
+              <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_JSON, notes[0].title)}>
+                <Icon type="code" className={iconClass} />
+                Export as JSON
+              </MenuItem>
+              <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_MARKDOWN, notes[0].title)}>
+                <Icon type="markdown" className={iconClass} />
+                Export as Markdown
+              </MenuItem>
+              <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_HTML, notes[0].title)}>
+                <Icon type="rich-text" className={iconClass} />
+                Export as HTML
+              </MenuItem>
+            </Menu>
+          </Popover>
+        </>
+      ) : (
         <>
           <MenuItem
             onClick={() => {

packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx

@@ -1,17 +1,8 @@
 import { SNNote } from '@standardnotes/snjs'
-import {
+import { PlatformedKeyboardShortcut } from '@standardnotes/ui-services'
-  PlatformedKeyboardShortcut,
-  SUPER_EXPORT_HTML,
-  SUPER_EXPORT_JSON,
-  SUPER_EXPORT_MARKDOWN,
-} from '@standardnotes/ui-services'
-import { useRef, useState } from 'react'
-import { useCommandService } from '../CommandProvider'
 import Icon from '../Icon/Icon'
 import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
-import Menu from '../Menu/Menu'
 import MenuItem from '../Menu/MenuItem'
-import Popover from '../Popover/Popover'
 import HorizontalSeparator from '../Shared/HorizontalSeparator'
 import { iconClass } from './ClassNames'
 
@@ -21,12 +12,7 @@ type Props = {
   enableSuperMarkdownPreview: () => void
 }
 
-const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview }: Props) => {
+const SuperNoteOptions = ({ markdownShortcut, enableSuperMarkdownPreview }: Props) => {
-  const commandService = useCommandService()
-
-  const exportButtonRef = useRef<HTMLButtonElement>(null)
-  const [isExportMenuOpen, setIsExportMenuOpen] = useState(false)
-
   return (
     <>
       <HorizontalSeparator classes="my-2" />
@@ -38,45 +24,6 @@ const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview }
         Show Markdown
         {markdownShortcut && <KeyboardShortcutIndicator className="ml-auto" shortcut={markdownShortcut} />}
       </MenuItem>
-
-      <MenuItem
-        ref={exportButtonRef}
-        onClick={() => {
-          setIsExportMenuOpen((open) => !open)
-        }}
-      >
-        <div className="flex items-center">
-          <Icon type="download" className={iconClass} />
-          Export
-        </div>
-        <Icon type="chevron-right" className="ml-auto text-neutral" />
-      </MenuItem>
-      <Popover
-        title="Export note"
-        side="left"
-        align="start"
-        open={isExportMenuOpen}
-        anchorElement={exportButtonRef.current}
-        togglePopover={() => {
-          setIsExportMenuOpen(!isExportMenuOpen)
-        }}
-        className="py-1"
-      >
-        <Menu a11yLabel={'Super note export menu'} isOpen={isExportMenuOpen}>
-          <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_JSON, note.title)}>
-            <Icon type="code" className={iconClass} />
-            Export as JSON
-          </MenuItem>
-          <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_MARKDOWN, note.title)}>
-            <Icon type="markdown" className={iconClass} />
-            Export as Markdown
-          </MenuItem>
-          <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_HTML, note.title)}>
-            <Icon type="rich-text" className={iconClass} />
-            Export as HTML
-          </MenuItem>
-        </Menu>
-      </Popover>
     </>
   )
 }