feat: outbox model for the following feed

src/components/ZapDialog/index.tsx

@@ -1,14 +1,29 @@
 import { Button } from '@/components/ui/button'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogOverlay,
+  DialogTitle
+} from '@/components/ui/dialog'
+import {
+  Drawer,
+  DrawerContent,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerTitle
+} from '@/components/ui/drawer'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 import { useToast } from '@/hooks'
 import { useNostr } from '@/providers/NostrProvider'
 import { useNoteStats } from '@/providers/NoteStatsProvider'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { useZap } from '@/providers/ZapProvider'
 import lightning from '@/services/lightning.service'
 import { Loader } from 'lucide-react'
-import { Dispatch, SetStateAction, useState } from 'react'
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import UserAvatar from '../UserAvatar'
 import Username from '../Username'
@@ -27,10 +42,62 @@ export default function ZapDialog({
   defaultAmount?: number
 }) {
   const { t } = useTranslation()
+  const { isSmallScreen } = useScreenSize()
+  const drawerContentRef = useRef<HTMLDivElement | null>(null)
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (drawerContentRef.current) {
+        drawerContentRef.current.style.setProperty('bottom', `env(safe-area-inset-bottom)`)
+      }
+    }
+
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener('resize', handleResize)
+      handleResize() // Initial call in case the keyboard is already open
+    }
+
+    return () => {
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener('resize', handleResize)
+      }
+    }
+  }, [])
+
+  if (isSmallScreen) {
+    return (
+      <Drawer open={open} onOpenChange={setOpen}>
+        <DrawerOverlay onClick={() => setOpen(false)} />
+        <DrawerContent
+          hideOverlay
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          ref={drawerContentRef}
+          className="flex flex-col gap-4 px-4 mb-4"
+        >
+          <DrawerHeader>
+            <DrawerTitle className="flex gap-2 items-center">
+              <div className="shrink-0">{t('Zap to')}</div>
+              <UserAvatar size="small" userId={pubkey} />
+              <Username userId={pubkey} className="truncate flex-1 w-0 text-start h-5" />
+            </DrawerTitle>
+            <DialogDescription></DialogDescription>
+          </DrawerHeader>
+          <ZapDialogContent
+            open={open}
+            setOpen={setOpen}
+            recipient={pubkey}
+            eventId={eventId}
+            defaultAmount={defaultAmount}
+          />
+        </DrawerContent>
+      </Drawer>
+    )
+  }
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent>
+      <DialogOverlay onClick={() => setOpen(false)} />
+      <DialogContent hideOverlay onOpenAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
           <DialogTitle className="flex gap-2 items-center">
             <div className="shrink-0">{t('Zap to')}</div>