feat: outbox model for the following feed

src/components/AccountList/index.tsx

@@ -68,7 +68,9 @@ function SignerTypeBadge({ signerType }: { signerType: TSignerType }) {
     return <Badge className=" bg-blue-400 hover:bg-blue-400/80">Bunker</Badge>
   } else if (signerType === 'ncryptsec') {
     return <Badge>NCRYPTSEC</Badge>
-  } else {
+  } else if (signerType === 'nsec') {
     return <Badge className=" bg-orange-400 hover:bg-orange-400/80">NSEC</Badge>
+  } else if (signerType === 'npub') {
+    return <Badge className=" bg-yellow-400 hover:bg-yellow-400/80">NPUB</Badge>
   }
 }

src/components/AccountManager/NpubLogin.tsx

@@ -0,0 +1,56 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { useNostr } from '@/providers/NostrProvider'
+import { Loader } from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function NpubLogin({
+  back,
+  onLoginSuccess
+}: {
+  back: () => void
+  onLoginSuccess: () => void
+}) {
+  const { t } = useTranslation()
+  const { npubLogin } = useNostr()
+  const [pending, setPending] = useState(false)
+  const [npubInput, setNpubInput] = useState('')
+  const [errMsg, setErrMsg] = useState<string | null>(null)
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setNpubInput(e.target.value)
+    setErrMsg(null)
+  }
+
+  const handleLogin = () => {
+    if (npubInput === '') return
+
+    setPending(true)
+    npubLogin(npubInput)
+      .then(() => onLoginSuccess())
+      .catch((err) => setErrMsg(err.message))
+      .finally(() => setPending(false))
+  }
+
+  return (
+    <>
+      <div className="space-y-1">
+        <Input
+          placeholder="npub..."
+          value={npubInput}
+          onChange={handleInputChange}
+          className={errMsg ? 'border-destructive' : ''}
+        />
+        {errMsg && <div className="text-xs text-destructive pl-3">{errMsg}</div>}
+      </div>
+      <Button onClick={handleLogin} disabled={pending}>
+        <Loader className={pending ? 'animate-spin' : 'hidden'} />
+        {t('Login')}
+      </Button>
+      <Button variant="secondary" onClick={back}>
+        {t('Back')}
+      </Button>
+    </>
+  )
+}

src/components/AccountManager/index.tsx

@@ -8,9 +8,11 @@ import { useTranslation } from 'react-i18next'
 import AccountList from '../AccountList'
 import BunkerLogin from './BunkerLogin'
 import GenerateNewAccount from './GenerateNewAccount'
+import NpubLogin from './NpubLogin'
 import PrivateKeyLogin from './PrivateKeyLogin'
+import { isDevEnv } from '@/lib/common'
 
-type TAccountManagerPage = 'nsec' | 'bunker' | 'generate' | null
+type TAccountManagerPage = 'nsec' | 'bunker' | 'generate' | 'npub' | null
 
 export default function AccountManager({ close }: { close?: () => void }) {
   const [page, setPage] = useState<TAccountManagerPage>(null)
@@ -23,6 +25,8 @@ export default function AccountManager({ close }: { close?: () => void }) {
         <BunkerLogin back={() => setPage(null)} onLoginSuccess={() => close?.()} />
       ) : page === 'generate' ? (
         <GenerateNewAccount back={() => setPage(null)} onLoginSuccess={() => close?.()} />
+      ) : page === 'npub' ? (
+        <NpubLogin back={() => setPage(null)} onLoginSuccess={() => close?.()} />
       ) : (
         <AccountManagerNav setPage={setPage} close={close} />
       )}
@@ -59,6 +63,11 @@ function AccountManagerNav({
           <Button variant="secondary" onClick={() => setPage('nsec')} className="w-full">
             {t('Login with Private Key')}
           </Button>
+          {isDevEnv() && (
+            <Button variant="secondary" onClick={() => setPage('npub')} className="w-full">
+              Login with Public key (for development)
+            </Button>
+          )}
         </div>
       </div>
       <Separator />

src/components/MailboxSetting/CalculateOptimalReadRelaysButton.tsx

@@ -1,247 +0,0 @@
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger
-} from '@/components/ui/dialog'
-import {
-  Drawer,
-  DrawerContent,
-  DrawerDescription,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger
-} from '@/components/ui/drawer'
-import { toProfile } from '@/lib/link'
-import { useSecondaryPage } from '@/PageManager'
-import { useNostr } from '@/providers/NostrProvider'
-import { useScreenSize } from '@/providers/ScreenSizeProvider'
-import client from '@/services/client.service'
-import { TMailboxRelay } from '@/types'
-import { ChevronDown, Circle, CircleCheck, ScanSearch } from 'lucide-react'
-import { Dispatch, SetStateAction, useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import RelayIcon from '../RelayIcon'
-import { SimpleUserAvatar } from '../UserAvatar'
-import { SimpleUsername } from '../Username'
-
-export default function CalculateOptimalReadRelaysButton({
-  mergeRelays
-}: {
-  mergeRelays: (newRelays: TMailboxRelay[]) => void
-}) {
-  const { t } = useTranslation()
-  const { isSmallScreen } = useScreenSize()
-  const { pubkey } = useNostr()
-  const [open, setOpen] = useState(false)
-
-  const trigger = (
-    <Button variant="secondary" className="w-full" disabled={!pubkey}>
-      <ScanSearch />
-      {t('Calculate optimal read relays')}
-    </Button>
-  )
-
-  if (isSmallScreen) {
-    return (
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerTrigger asChild>{trigger}</DrawerTrigger>
-        <DrawerContent className="max-h-[90vh]">
-          <div className="flex flex-col p-4 gap-4 overflow-auto">
-            <DrawerHeader>
-              <DrawerTitle>{t('Select relays to append')}</DrawerTitle>
-              <DrawerDescription className="hidden" />
-            </DrawerHeader>
-            <OptimalReadRelays close={() => setOpen(false)} mergeRelays={mergeRelays} />
-          </div>
-        </DrawerContent>
-      </Drawer>
-    )
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent className="max-h-[90vh] overflow-auto">
-        <DialogHeader>
-          <DialogTitle>{t('Select relays to append')}</DialogTitle>
-          <DialogDescription className="hidden" />
-        </DialogHeader>
-        <OptimalReadRelays close={() => setOpen(false)} mergeRelays={mergeRelays} />
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-function OptimalReadRelays({
-  close,
-  mergeRelays
-}: {
-  close: () => void
-  mergeRelays: (newRelays: TMailboxRelay[]) => void
-}) {
-  const { t } = useTranslation()
-  const { pubkey } = useNostr()
-  const [isCalculating, setIsCalculating] = useState(false)
-  const [optimalReadRelays, setOptimalReadRelays] = useState<{ url: string; pubkeys: string[] }[]>(
-    []
-  )
-  const [selectedRelayUrls, setSelectedRelayUrls] = useState<string[]>([])
-
-  useEffect(() => {
-    if (!pubkey) return
-
-    const init = async () => {
-      setIsCalculating(true)
-      const relays = await client.calculateOptimalReadRelays(pubkey)
-      setOptimalReadRelays(relays)
-      setIsCalculating(false)
-    }
-    init()
-  }, [])
-
-  if (isCalculating) {
-    return <div className="text-center text-sm text-muted-foreground">{t('calculating...')}</div>
-  }
-
-  return (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        {optimalReadRelays.map((relay) => (
-          <RelayItem
-            key={relay.url}
-            relay={relay}
-            close={close}
-            selectedRelayUrls={selectedRelayUrls}
-            setSelectedRelayUrls={setSelectedRelayUrls}
-          />
-        ))}
-      </div>
-      <Button
-        disabled={selectedRelayUrls.length === 0}
-        className="w-full"
-        onClick={() => {
-          mergeRelays(
-            selectedRelayUrls.map((url) => ({
-              url,
-              scope: 'read'
-            }))
-          )
-          close()
-        }}
-      >
-        {selectedRelayUrls.length === 0
-          ? t('Append')
-          : t('Append n relays', { n: selectedRelayUrls.length })}
-      </Button>
-    </div>
-  )
-}
-
-function RelayItem({
-  relay,
-  close,
-  selectedRelayUrls,
-  setSelectedRelayUrls
-}: {
-  relay: { url: string; pubkeys: string[] }
-  close: () => void
-  selectedRelayUrls: string[]
-  setSelectedRelayUrls: Dispatch<SetStateAction<string[]>>
-}) {
-  const { t } = useTranslation()
-  const { push } = useSecondaryPage()
-  const [expanded, setExpanded] = useState(false)
-
-  const selected = selectedRelayUrls.includes(relay.url)
-
-  return (
-    <div
-      className={`rounded-lg p-4 border select-none cursor-pointer ${selected ? 'border-highlight bg-highlight/5' : ''}`}
-      onClick={() =>
-        setSelectedRelayUrls((pre) =>
-          pre.includes(relay.url) ? pre.filter((url) => url !== relay.url) : [...pre, relay.url]
-        )
-      }
-    >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2 flex-1 w-0">
-          <SelectToggle
-            select={selectedRelayUrls.includes(relay.url)}
-            setSelect={(select) => {
-              setSelectedRelayUrls((prev) =>
-                select ? [...prev, relay.url] : prev.filter((url) => url !== relay.url)
-              )
-            }}
-          />
-          <RelayIcon url={relay.url} className="h-8 w-8" />
-          <div className="font-semibold truncate text-lg">{relay.url}</div>
-        </div>
-        <div
-          className="flex items-center cursor-pointer gap-1 text-muted-foreground hover:text-foreground text-sm"
-          onClick={(e) => {
-            e.stopPropagation()
-            setExpanded((prev) => !prev)
-          }}
-        >
-          <div>
-            {relay.pubkeys.length} {t('followings')}
-          </div>
-          <ChevronDown
-            size={16}
-            className={`transition-transform duration-200 ${expanded ? 'rotate-180' : ''}`}
-          />
-        </div>
-      </div>
-      {expanded && (
-        <div className="space-y-2 pt-2 pl-7">
-          {relay.pubkeys.map((pubkey) => (
-            <div
-              key={pubkey}
-              className="flex cursor-pointer items-center gap-2"
-              onClick={(e) => {
-                e.stopPropagation()
-                close()
-                push(toProfile(pubkey))
-              }}
-            >
-              <SimpleUserAvatar userId={pubkey} size="small" />
-              <SimpleUsername userId={pubkey} className="font-semibold truncate" />
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  )
-}
-
-function SelectToggle({
-  select,
-  setSelect
-}: {
-  select: boolean
-  setSelect: (select: boolean) => void
-}) {
-  return select ? (
-    <CircleCheck
-      size={18}
-      className="text-highlight shrink-0 cursor-pointer"
-      onClick={(e) => {
-        e.stopPropagation()
-        setSelect(false)
-      }}
-    />
-  ) : (
-    <Circle
-      size={18}
-      className="shrink-0 cursor-pointer"
-      onClick={(e) => {
-        e.stopPropagation()
-        setSelect(true)
-      }}
-    />
-  )
-}

src/components/MailboxSetting/index.tsx

@@ -4,7 +4,6 @@ import { useNostr } from '@/providers/NostrProvider'
 import { TMailboxRelay, TMailboxRelayScope } from '@/types'
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import CalculateOptimalReadRelaysButton from './CalculateOptimalReadRelaysButton'
 import MailboxRelay from './MailboxRelay'
 import NewMailboxRelayInput from './NewMailboxRelayInput'
 import SaveButton from './SaveButton'
@@ -56,13 +55,6 @@ export default function MailboxSetting() {
     return null
   }
 
-  const mergeRelays = (newRelays: TMailboxRelay[]) => {
-    setRelays((pre) => {
-      return [...pre, ...newRelays.filter((r) => !pre.some((pr) => pr.url === r.url))]
-    })
-    setHasChange(true)
-  }
-
   return (
     <div className="space-y-4">
       <div className="text-xs text-muted-foreground space-y-1">
@@ -70,7 +62,6 @@ export default function MailboxSetting() {
         <div>{t('write relays description')}</div>
         <div>{t('read & write relays notice')}</div>
       </div>
-      <CalculateOptimalReadRelaysButton mergeRelays={mergeRelays} />
       <SaveButton mailboxRelays={relays} hasChange={hasChange} setHasChange={setHasChange} />
       <div className="space-y-2">
         {relays.map((relay) => (

src/components/NoteList/index.tsx

@@ -25,13 +25,13 @@ const ALGO_LIMIT = 500
 const SHOW_COUNT = 10
 
 export default function NoteList({
-  relayUrls,
+  relayUrls = [],
   filter = {},
   className,
   filterMutedNotes = true,
   needCheckAlgoRelay = false
 }: {
-  relayUrls: string[]
+  relayUrls?: string[]
   filter?: Filter
   className?: string
   filterMutedNotes?: boolean
@@ -60,7 +60,7 @@ export default function NoteList({
   const topRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    if (relayUrls.length === 0) return
+    if (relayUrls.length === 0 && !noteFilter.authors?.length) return
 
     async function init() {
       setRefreshing(true)

src/components/NoteStats/SeenOnButton.tsx

@@ -62,7 +62,9 @@ export default function SeenOnButton({ event }: { event: Event }) {
                   key={relay}
                   onClick={() => {
                     setIsDrawerOpen(false)
-                    push(toRelay(relay))
+                    setTimeout(() => {
+                      push(toRelay(relay))
+                    }, 50) // Timeout to allow the drawer to close before navigating
                   }}
                 >
                   <RelayIcon url={relay} /> {simplifyUrl(relay)}

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>

src/components/ui/dialog.tsx

@@ -29,10 +29,13 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { withoutClose?: boolean }
->(({ className, children, withoutClose, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    withoutClose?: boolean
+    hideOverlay?: boolean
+  }
+>(({ className, children, withoutClose, hideOverlay, ...props }, ref) => (
   <DialogPortal>
-    <DialogOverlay />
+    {!hideOverlay && <DialogOverlay />}
     <DialogPrimitive.Content
       ref={ref}
       className={cn(