refactor: responsive menu

src/components/NoteOptions/useMenuActions.tsx

@@ -44,20 +44,14 @@ export interface MenuAction {
 
 interface UseMenuActionsProps {
   event: Event
-  closeDrawer: () => void
-  showSubMenuActions: (subMenu: SubMenuAction[], title: string) => void
   setIsRawEventDialogOpen: (open: boolean) => void
   setIsReportDialogOpen: (open: boolean) => void
-  isSmallScreen: boolean
 }
 
 export function useMenuActions({
   event,
-  closeDrawer,
-  showSubMenuActions,
   setIsRawEventDialogOpen,
-  setIsReportDialogOpen,
-  isSmallScreen
+  setIsReportDialogOpen
 }: UseMenuActionsProps) {
   const { t } = useTranslation()
   const { pubkey, attemptDelete } = useNostr()
@@ -76,7 +70,6 @@ export function useMenuActions({
       items.push({
         label: <div className="text-left"> {t('Optimal relays')}</div>,
         onClick: async () => {
-          closeDrawer()
           const promise = async () => {
             const relays = await client.determineTargetRelays(event)
             if (relays?.length) {
@@ -107,7 +100,6 @@ export function useMenuActions({
           .map((set, index) => ({
             label: <div className="text-left truncate">{set.name}</div>,
             onClick: async () => {
-              closeDrawer()
               const promise = client.publishEvent(set.relayUrls, event)
               toast.promise(promise, {
                 loading: t('Republishing...'),
@@ -137,7 +129,6 @@ export function useMenuActions({
             </div>
           ),
           onClick: async () => {
-            closeDrawer()
             const promise = client.publishEvent([relay], event)
             toast.promise(promise, {
               loading: t('Republishing...'),
@@ -158,7 +149,7 @@ export function useMenuActions({
     }
 
     return items
-  }, [pubkey, relayUrls, relaySets])
+  }, [pubkey, relayUrls, relaySets, event, t])
 
   const menuActions: MenuAction[] = useMemo(() => {
     const actions: MenuAction[] = [
@@ -167,7 +158,6 @@ export function useMenuActions({
         label: t('Copy event ID'),
         onClick: () => {
           navigator.clipboard.writeText(getNoteBech32Id(event))
-          closeDrawer()
         }
       },
       {
@@ -175,7 +165,6 @@ export function useMenuActions({
         label: t('Copy user ID'),
         onClick: () => {
           navigator.clipboard.writeText(pubkeyToNpub(event.pubkey) ?? '')
-          closeDrawer()
         }
       },
       {
@@ -183,14 +172,12 @@ export function useMenuActions({
         label: t('Copy share link'),
         onClick: () => {
           navigator.clipboard.writeText(toNjump(getNoteBech32Id(event)))
-          closeDrawer()
         }
       },
       {
         icon: Code,
         label: t('View raw event'),
         onClick: () => {
-          closeDrawer()
           setIsRawEventDialogOpen(true)
         },
         separator: true
@@ -202,10 +189,7 @@ export function useMenuActions({
       actions.push({
         icon: SatelliteDish,
         label: t('Republish to ...'),
-        onClick: isSmallScreen
-          ? () => showSubMenuActions(broadcastSubMenu, t('Republish to ...'))
-          : undefined,
-        subMenu: isSmallScreen ? undefined : broadcastSubMenu,
+        subMenu: broadcastSubMenu,
         separator: true
       })
     }
@@ -216,7 +200,6 @@ export function useMenuActions({
         icon: pinned ? PinOff : Pin,
         label: pinned ? t('Unpin from profile') : t('Pin to profile'),
         onClick: async () => {
-          closeDrawer()
           await (pinned ? unpin(event) : pin(event))
         }
       })
@@ -228,7 +211,6 @@ export function useMenuActions({
         label: t('Report'),
         className: 'text-destructive focus:text-destructive',
         onClick: () => {
-          closeDrawer()
           setIsReportDialogOpen(true)
         },
         separator: true
@@ -241,7 +223,6 @@ export function useMenuActions({
           icon: Bell,
           label: t('Unmute user'),
           onClick: () => {
-            closeDrawer()
             unmutePubkey(event.pubkey)
           },
           className: 'text-destructive focus:text-destructive',
@@ -253,7 +234,6 @@ export function useMenuActions({
             icon: BellOff,
             label: t('Mute user privately'),
             onClick: () => {
-              closeDrawer()
               mutePubkeyPrivately(event.pubkey)
             },
             className: 'text-destructive focus:text-destructive',
@@ -263,7 +243,6 @@ export function useMenuActions({
             icon: BellOff,
             label: t('Mute user publicly'),
             onClick: () => {
-              closeDrawer()
               mutePubkeyPublicly(event.pubkey)
             },
             className: 'text-destructive focus:text-destructive'
@@ -277,7 +256,6 @@ export function useMenuActions({
         icon: Trash2,
         label: t('Try deleting this note'),
         onClick: () => {
-          closeDrawer()
           attemptDelete(event)
         },
         className: 'text-destructive focus:text-destructive',
@@ -291,15 +269,16 @@ export function useMenuActions({
     event,
     pubkey,
     isMuted,
-    isSmallScreen,
     broadcastSubMenu,
     pinnedEventHexIdSet,
-    closeDrawer,
-    showSubMenuActions,
     setIsRawEventDialogOpen,
+    setIsReportDialogOpen,
     mutePubkeyPrivately,
     mutePubkeyPublicly,
-    unmutePubkey
+    unmutePubkey,
+    unpin,
+    pin,
+    attemptDelete
   ])
 
   return menuActions