chore: correctly close modals and show toast after creating note from shared text

packages/web/src/javascripts/Application/WebApplication.ts

@@ -56,6 +56,7 @@ import { ItemGroupController } from '@/Components/NoteView/Controller/ItemGroupC
 import { VisibilityObserver } from './VisibilityObserver'
 import { MomentsService } from '@/Controllers/Moments/MomentsService'
 import { DevMode } from './DevMode'
+import { ToastType, addToast } from '@standardnotes/toast'
 
 export type WebEventObserver = (event: WebAppEvent, data?: unknown) => void
 
@@ -411,6 +412,11 @@ export class WebApplication extends SNApplication implements WebApplicationInter
     const insertedNote = await this.mutator.insertItem(note)
 
     this.controllers.selectionController.selectItem(insertedNote.uuid, true).catch(console.error)
+
+    addToast({
+      type: ToastType.Success,
+      message: 'Successfully created note from shared text',
+    })
   }
 
   private async lockApplicationAfterMobileEventIfApplicable(): Promise<void> {

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

@@ -1,6 +1,7 @@
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
 import { Dialog, DialogStoreProps, useDialogStore } from '@ariakit/react'
 import { classNames } from '@standardnotes/snjs'
-import { ReactNode } from 'react'
+import { ReactNode, useCallback } from 'react'
 
 const AlertDialog = ({
   children,
@@ -13,6 +14,15 @@ const AlertDialog = ({
     ...props,
   })
 
+  const addCloseMethod = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (element) {
+        ;(element as DialogWithClose).close = closeDialog
+      }
+    },
+    [closeDialog],
+  )
+
   return (
     <Dialog
       store={dialog}
@@ -21,6 +31,7 @@ const AlertDialog = ({
       modal={false}
       portal={true}
       preventBodyScroll={true}
+      ref={addCloseMethod}
     >
       <div
         className="absolute z-0 h-full w-full bg-passive-5 opacity-25 md:opacity-75"

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -2,6 +2,7 @@ import { mergeRefs } from '@/Hooks/mergeRefs'
 import { Dialog, DialogOptions, useDialogStore } from '@ariakit/react'
 import { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react'
 import { useModalAnimation } from '../Modal/useModalAnimation'
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
 
 type Props = {
   isOpen: boolean
@@ -10,8 +11,6 @@ type Props = {
   close: () => void
 }
 
-type DialogWithClose = HTMLDivElement & { close: () => void }
-
 const ModalOverlay = forwardRef(
   (
     { isOpen, children, animationVariant, close, ...props }: Props & Partial<DialogOptions>,

packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx

@@ -6,6 +6,7 @@ import MobileModalAction from '../Modal/MobileModalAction'
 import { useModalAnimation } from '../Modal/useModalAnimation'
 import MobileModalHeader from '../Modal/MobileModalHeader'
 import { mergeRefs } from '@/Hooks/mergeRefs'
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
 
 const DisableScroll = () => {
   useDisableBodyScrollOnMobile()
@@ -13,8 +14,6 @@ const DisableScroll = () => {
   return null
 }
 
-type PopoverWithClose = HTMLDivElement & { close: () => void }
-
 const MobilePopoverContent = ({
   open,
   requestClose,
@@ -35,7 +34,7 @@ const MobilePopoverContent = ({
   const addCloseMethod = useCallback(
     (element: HTMLDivElement | null) => {
       if (element) {
-        ;(element as PopoverWithClose).close = requestClose
+        ;(element as DialogWithClose).close = requestClose
       }
     },
     [requestClose],

packages/web/src/javascripts/Components/Popover/PositionedPopoverContent.tsx

@@ -10,6 +10,8 @@ import { useDisableBodyScrollOnMobile } from '@/Hooks/useDisableBodyScrollOnMobi
 import { MediaQueryBreakpoints, useMediaQuery } from '@/Hooks/useMediaQuery'
 import { KeyboardKey } from '@standardnotes/ui-services'
 import { getAdjustedStylesForNonPortalPopover } from './Utils/getAdjustedStylesForNonPortal'
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
+import { mergeRefs } from '@/Hooks/mergeRefs'
 
 const PositionedPopoverContent = ({
   align = 'end',
@@ -82,6 +84,15 @@ const PositionedPopoverContent = ({
     correctInitialScrollForOverflowedContent()
   }, [popoverElement, correctInitialScrollForOverflowedContent])
 
+  const addCloseMethod = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (element && togglePopover) {
+        ;(element as DialogWithClose).close = togglePopover
+      }
+    },
+    [togglePopover],
+  )
+
   return (
     <Portal disabled={!portal}>
       <div
@@ -100,7 +111,7 @@ const PositionedPopoverContent = ({
             ...adjustedStyles,
           } as CSSProperties
         }
-        ref={setPopoverElement}
+        ref={mergeRefs([setPopoverElement, addCloseMethod])}
         data-popover={id}
         onKeyDown={(event) => {
           if (event.key === KeyboardKey.Escape) {

packages/web/src/javascripts/Components/RevisionHistoryModal/HistoryModalDialog.tsx

@@ -1,7 +1,9 @@
 import { getPlatformString } from '@/Utils'
 import { classNames } from '@standardnotes/utils'
 import { Dialog, useDialogStore } from '@ariakit/react'
-import { ForwardedRef, forwardRef, ReactNode } from 'react'
+import { ForwardedRef, forwardRef, ReactNode, useCallback } from 'react'
+import { mergeRefs } from '@/Hooks/mergeRefs'
+import { DialogWithClose } from '@/Utils/CloseOpenModalsAndPopovers'
 
 type Props = {
   children: ReactNode
@@ -13,11 +15,20 @@ const HistoryModalDialog = forwardRef(({ children, onDismiss }: Props, ref: Forw
     open: true,
   })
 
+  const addCloseMethod = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (element) {
+        ;(element as DialogWithClose).close = onDismiss
+      }
+    },
+    [onDismiss],
+  )
+
   return (
     <Dialog
       store={dialog}
       aria-label="Note revision history"
-      ref={ref}
+      ref={mergeRefs([addCloseMethod, ref])}
       className="fixed left-0 top-0 z-modal h-full w-full"
     >
       <div

packages/web/src/javascripts/Utils/CloseOpenModalsAndPopovers.ts

@@ -1,5 +1,9 @@
+export type DialogWithClose = HTMLDivElement & { close: () => void }
+
 export const requestCloseAllOpenModalsAndPopovers = () => {
   document.querySelectorAll('[role="dialog"], [data-popover]').forEach((element) => {
+    // We add the close method to dialog & popovers to allow us to
+    // close them from anywhere in the app.
     if ('close' in element && typeof element.close === 'function') {
       element.close()
     }