feat: support closing modal via back button

src/PageManager.tsx

@@ -1,6 +1,6 @@
 import Sidebar from '@/components/Sidebar'
 import { Separator } from '@/components/ui/separator'
-import { cn } from '@/lib/utils'
+import { cn, isAndroid } from '@/lib/utils'
 import NoteListPage from '@/pages/primary/NoteListPage'
 import HomePage from '@/pages/secondary/HomePage'
 import { TPageRef } from '@/types'
@@ -20,6 +20,7 @@ import NotificationListPage from './pages/primary/NotificationListPage'
 import { NotificationProvider } from './providers/NotificationProvider'
 import { useScreenSize } from './providers/ScreenSizeProvider'
 import { routes } from './routes'
+import modalManager from './services/modal-manager.service'
 
 export type TPrimaryPageName = keyof typeof PRIMARY_PAGE_MAP
 
@@ -115,6 +116,9 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
     }
 
     const onPopState = (e: PopStateEvent) => {
+      const closeModal = modalManager.pop()
+      if (closeModal) return
+
       let state = e.state as { index: number; url: string } | null
       setSecondaryStack((pre) => {
         const currentItem = pre[pre.length - 1] as TStackItem | undefined
@@ -136,10 +140,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
         }
 
         if (state.index === currentIndex) {
-          if (currentIndex !== 0) return pre
+          return pre
-
-          window.history.replaceState(null, '', '/')
-          return []
         }
 
         // Go back
@@ -171,10 +172,25 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
       })
     }
 
+    const onLeave = (event: BeforeUnloadEvent) => {
+      // Cancel the event as stated by the standard.
+      event.preventDefault()
+      // Chrome requires returnValue to be set.
+      event.returnValue = ''
+    }
+
     window.addEventListener('popstate', onPopState)
 
+    if (isAndroid()) {
+      window.addEventListener('beforeunload', onLeave)
+    }
+
     return () => {
       window.removeEventListener('popstate', onPopState)
+
+      if (isAndroid()) {
+        window.removeEventListener('beforeunload', onLeave)
+      }
     }
   }, [])
 

src/components/Content/index.tsx

@@ -51,6 +51,24 @@ const Content = memo(
     const imageInfos = event.tags
       .map((tag) => extractImageInfoFromTag(tag))
       .filter(Boolean) as TImageInfo[]
+    const allImages = nodes
+      .map((node) => {
+        if (node.type === 'image') {
+          const imageInfo = imageInfos.find((image) => image.url === node.data)
+          return imageInfo ?? { url: node.data }
+        }
+        if (node.type === 'images') {
+          const urls = Array.isArray(node.data) ? node.data : [node.data]
+          return urls.map((url) => {
+            const imageInfo = imageInfos.find((image) => image.url === url)
+            return imageInfo ?? { url }
+          })
+        }
+        return null
+      })
+      .filter(Boolean)
+      .flat() as TImageInfo[]
+    let imageIndex = 0
 
     const emojiInfos = extractEmojiInfosFromTags(event.tags)
 
@@ -65,17 +83,18 @@ const Content = memo(
             return node.data
           }
           if (node.type === 'image' || node.type === 'images') {
-            const imageUrls = Array.isArray(node.data) ? node.data : [node.data]
+            const start = imageIndex
-            const images = imageUrls.map(
+            const end = imageIndex + (Array.isArray(node.data) ? node.data.length : 1)
-              (url) => imageInfos.find((image) => image.url === url) ?? { url }
+            imageIndex = end
-            )
             return (
               <ImageGallery
                 className={`${size === 'small' ? 'mt-1' : 'mt-2'}`}
                 key={index}
-                images={images}
+                images={allImages}
                 isNsfw={isNsfwEvent(event)}
                 size={size}
+                start={start}
+                end={end}
               />
             )
           }

src/components/ImageGallery/index.tsx

@@ -1,7 +1,9 @@
+import { randomString } from '@/lib/random'
 import { cn } from '@/lib/utils'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import modalManager from '@/services/modal-manager.service'
 import { TImageInfo } from '@/types'
-import { ReactNode, useState } from 'react'
+import { ReactNode, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import Lightbox from 'yet-another-react-lightbox'
 import Zoom from 'yet-another-react-lightbox/plugins/zoom'
@@ -12,24 +14,39 @@ export default function ImageGallery({
   className,
   images,
   isNsfw = false,
-  size = 'normal'
+  size = 'normal',
+  start = 0,
+  end = images.length
 }: {
   className?: string
   images: TImageInfo[]
   isNsfw?: boolean
   size?: 'normal' | 'small'
+  start?: number
+  end?: number
 }) {
+  const id = useMemo(() => `image-gallery-${randomString()}`, [])
   const { isSmallScreen } = useScreenSize()
   const [index, setIndex] = useState(-1)
+  useEffect(() => {
+    if (index >= 0) {
+      modalManager.register(id, () => {
+        setIndex(-1)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [index])
 
   const handlePhotoClick = (event: React.MouseEvent, current: number) => {
     event.stopPropagation()
     event.preventDefault()
-    setIndex(current)
+    setIndex(start + current)
   }
 
+  const displayImages = images.slice(start, end)
   let imageContent: ReactNode | null = null
-  if (images.length === 1) {
+  if (displayImages.length === 1) {
     imageContent = (
       <Image
         key={0}
@@ -37,14 +54,14 @@ export default function ImageGallery({
         classNames={{
           errorPlaceholder: cn('aspect-square', size === 'small' ? 'h-[15vh]' : 'h-[30vh]')
         }}
-        image={images[0]}
+        image={displayImages[0]}
         onClick={(e) => handlePhotoClick(e, 0)}
       />
     )
   } else if (size === 'small') {
     imageContent = (
       <div className="grid grid-cols-4 gap-2">
-        {images.map((image, i) => (
+        {displayImages.map((image, i) => (
           <Image
             key={i}
             className={cn('aspect-square w-full rounded-lg')}
@@ -54,10 +71,10 @@ export default function ImageGallery({
         ))}
       </div>
     )
-  } else if (isSmallScreen && (images.length === 2 || images.length === 4)) {
+  } else if (isSmallScreen && (displayImages.length === 2 || displayImages.length === 4)) {
     imageContent = (
       <div className="grid grid-cols-2 gap-2">
-        {images.map((image, i) => (
+        {displayImages.map((image, i) => (
           <Image
             key={i}
             className={cn('aspect-square w-full rounded-lg')}
@@ -70,7 +87,7 @@ export default function ImageGallery({
   } else {
     imageContent = (
       <div className="grid grid-cols-3 gap-2 w-full">
-        {images.map((image, i) => (
+        {displayImages.map((image, i) => (
           <Image
             key={i}
             className={cn('aspect-square w-full rounded-lg')}
@@ -83,13 +100,19 @@ export default function ImageGallery({
   }
 
   return (
-    <div className={cn('relative', images.length === 1 ? 'w-fit max-w-full' : 'w-full', className)}>
+    <div
+      className={cn(
+        'relative',
+        displayImages.length === 1 ? 'w-fit max-w-full' : 'w-full',
+        className
+      )}
+    >
       {imageContent}
       {index >= 0 &&
         createPortal(
           <div onClick={(e) => e.stopPropagation()}>
             <Lightbox
-              index={index}
+              index={start + index}
               slides={images.map(({ url }) => ({ src: url }))}
               plugins={[Zoom]}
               open={index >= 0}

src/components/NoteOptions/index.tsx

@@ -76,7 +76,6 @@ export default function NoteOptions({ event, className }: { event: Event; classN
               </Button>
               <Button
                 onClick={() => {
-                  setIsDrawerOpen(false)
                   setIsRawEventDialogOpen(true)
                 }}
                 className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5"

src/components/ZapDialog/index.tsx

@@ -4,7 +4,6 @@ import {
   DialogContent,
   DialogDescription,
   DialogHeader,
-  DialogOverlay,
   DialogTitle
 } from '@/components/ui/dialog'
 import {
@@ -99,8 +98,7 @@ export default function ZapDialog({
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogOverlay onClick={() => setOpen(false)} />
+      <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
-      <DialogContent hideOverlay onOpenAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle className="flex gap-2 items-center">
             <div className="shrink-0">{t('Zap to')}</div>

src/components/ui/dialog.tsx

@@ -1,10 +1,49 @@
-import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
 import { X } from 'lucide-react'
+import * as React from 'react'
 
+import { randomString } from '@/lib/random'
 import { cn } from '@/lib/utils'
+import modalManager from '@/services/modal-manager.service'
 
-const Dialog = DialogPrimitive.Root
+const Dialog = ({ children, open, onOpenChange, ...props }: DialogPrimitive.DialogProps) => {
+  const [innerOpen, setInnerOpen] = React.useState(open ?? false)
+  const id = React.useMemo(() => `dialog-${randomString()}`, [])
+
+  React.useEffect(() => {
+    if (open) {
+      modalManager.register(id, () => {
+        onOpenChange?.(false)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (open !== undefined) {
+      return
+    }
+
+    if (innerOpen) {
+      modalManager.register(id, () => {
+        setInnerOpen(false)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [innerOpen])
+
+  return (
+    <DialogPrimitive.Root
+      open={open ?? innerOpen}
+      onOpenChange={onOpenChange ?? setInnerOpen}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Root>
+  )
+}
 
 const DialogTrigger = DialogPrimitive.Trigger
 
@@ -31,11 +70,10 @@ const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     withoutClose?: boolean
-    hideOverlay?: boolean
   }
->(({ className, children, withoutClose, hideOverlay, ...props }, ref) => (
+>(({ className, children, withoutClose, ...props }, ref) => (
   <DialogPortal>
-    {!hideOverlay && <DialogOverlay />}
+    <DialogOverlay />
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
@@ -95,13 +133,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogHeader,
+  DialogDescription,
   DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
   DialogTitle,
-  DialogDescription
+  DialogTrigger
 }

src/components/ui/drawer.tsx

@@ -1,14 +1,52 @@
 import * as React from 'react'
 import { Drawer as DrawerPrimitive } from 'vaul'
 
+import { randomString } from '@/lib/random'
 import { cn } from '@/lib/utils'
+import modalManager from '@/services/modal-manager.service'
 
 const Drawer = ({
   shouldScaleBackground = true,
+  open,
+  onOpenChange,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => {
-  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+  const [innerOpen, setInnerOpen] = React.useState(open ?? false)
-)
+  const id = React.useMemo(() => `drawer-${randomString()}`, [])
+
+  React.useEffect(() => {
+    if (open) {
+      modalManager.register(id, () => {
+        onOpenChange?.(false)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (open !== undefined) {
+      return
+    }
+
+    if (innerOpen) {
+      modalManager.register(id, () => {
+        setInnerOpen(false)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [innerOpen])
+
+  return (
+    <DrawerPrimitive.Root
+      shouldScaleBackground={shouldScaleBackground}
+      open={open ?? innerOpen}
+      onOpenChange={onOpenChange ?? setInnerOpen}
+      {...props}
+    />
+  )
+}
 Drawer.displayName = 'Drawer'
 
 const DrawerTrigger = DrawerPrimitive.Trigger
@@ -90,13 +128,13 @@ DrawerDescription.displayName = DrawerPrimitive.Description.displayName
 
 export {
   Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
   DrawerClose,
   DrawerContent,
-  DrawerHeader,
+  DrawerDescription,
   DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
   DrawerTitle,
-  DrawerDescription
+  DrawerTrigger
 }

src/components/ui/sheet.tsx

@@ -3,9 +3,48 @@ import * as SheetPrimitive from '@radix-ui/react-dialog'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { X } from 'lucide-react'
 
+import { randomString } from '@/lib/random'
 import { cn } from '@/lib/utils'
+import modalManager from '@/services/modal-manager.service'
 
-const Sheet = SheetPrimitive.Root
+const Sheet = ({ children, open, onOpenChange, ...props }: SheetPrimitive.DialogProps) => {
+  const [innerOpen, setInnerOpen] = React.useState(open ?? false)
+  const id = React.useMemo(() => `sheet-${randomString()}`, [])
+
+  React.useEffect(() => {
+    if (open) {
+      modalManager.register(id, () => {
+        onOpenChange?.(false)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [open])
+
+  React.useEffect(() => {
+    if (open !== undefined) {
+      return
+    }
+
+    if (innerOpen) {
+      modalManager.register(id, () => {
+        setInnerOpen(false)
+      })
+    } else {
+      modalManager.unregister(id)
+    }
+  }, [innerOpen])
+
+  return (
+    <SheetPrimitive.Root
+      open={open ?? innerOpen}
+      onOpenChange={onOpenChange ?? setInnerOpen}
+      {...props}
+    >
+      {children}
+    </SheetPrimitive.Root>
+  )
+}
 
 const SheetTrigger = SheetPrimitive.Trigger
 

src/lib/utils.ts

@@ -12,6 +12,12 @@ export function isSafari() {
   return /Safari/.test(ua) && /Apple Computer/.test(vendor) && !/Chrome/.test(ua)
 }
 
+export function isAndroid() {
+  if (typeof window === 'undefined' || !window.navigator) return false
+  const ua = window.navigator.userAgent
+  return /android/i.test(ua)
+}
+
 export function isInViewport(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
   return (

src/services/modal-manager.service.ts

@@ -0,0 +1,44 @@
+class ModalManagerService {
+  static instance: ModalManagerService
+
+  private modal?: { id: string; cb: () => void }
+  private closeByUnregister = false
+
+  constructor() {
+    if (!ModalManagerService.instance) {
+      ModalManagerService.instance = this
+    }
+    return ModalManagerService.instance
+  }
+
+  register(id: string, cb: () => void) {
+    if (this.modal) {
+      this.modal.cb()
+    }
+    this.modal = { id, cb }
+    window.history.pushState(window.history.state, '', window.location.href)
+  }
+
+  unregister(id: string) {
+    if (!this.modal || this.modal.id !== id) return
+
+    this.modal.cb()
+    this.modal = undefined
+    this.closeByUnregister = true
+    window.history.back()
+  }
+
+  pop() {
+    if (this.closeByUnregister) {
+      this.closeByUnregister = false
+      return true
+    }
+    if (!this.modal) return false
+    this.modal.cb()
+    this.modal = undefined
+    return true
+  }
+}
+
+const instance = new ModalManagerService()
+export default instance