index.tsx raw

   1  import { useCompose } from '@/providers/ComposeProvider'
   2  import { useNostr } from '@/providers/NostrProvider'
   3  import { useScreenSize } from '@/providers/ScreenSizeProvider'
   4  import { PencilLine, Search } from 'lucide-react'
   5  import { useState } from 'react'
   6  import SearchOverlay from '../SearchOverlay'
   7  
   8  export default function FloatingActions() {
   9    const { isSmallScreen } = useScreenSize()
  10    const { checkLogin } = useNostr()
  11    const { openCompose } = useCompose()
  12    const [searchOpen, setSearchOpen] = useState(false)
  13  
  14    if (!isSmallScreen) return null
  15  
  16    return (
  17      <>
  18        <div
  19          className="fixed z-40 flex flex-col items-center gap-3"
  20          style={{
  21            bottom: 'calc(16px + env(safe-area-inset-bottom))',
  22            right: '16px'
  23          }}
  24        >
  25          {/* Search mini-FAB */}
  26          <button
  27            onClick={() => setSearchOpen(true)}
  28            className="flex items-center justify-center size-10 rounded-full bg-muted text-foreground shadow-md active:scale-95 transition-transform"
  29            aria-label="Search"
  30          >
  31            <Search className="size-5" />
  32          </button>
  33  
  34          {/* Compose FAB */}
  35          <button
  36            onClick={() => checkLogin(() => openCompose())}
  37            className="flex items-center justify-center size-14 rounded-full bg-primary text-primary-foreground shadow-lg active:scale-95 transition-transform"
  38            aria-label="Compose"
  39          >
  40            <PencilLine className="size-6" />
  41          </button>
  42        </div>
  43  
  44        <SearchOverlay open={searchOpen} onClose={() => setSearchOpen(false)} />
  45      </>
  46    )
  47  }
  48