feat: 💨

src/components/ExternalLink/index.tsx

@@ -1,4 +1,6 @@
 import { useSecondaryPage } from '@/PageManager'
+import { Button } from '@/components/ui/button'
+import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -8,33 +10,106 @@ import {
 import { toExternalContent } from '@/lib/link'
 import { truncateUrl } from '@/lib/url'
 import { cn } from '@/lib/utils'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { ExternalLink as ExternalLinkIcon, MessageSquare } from 'lucide-react'
-import { useMemo } from 'react'
+import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
-export default function ExternalLink({ url, className }: { url: string; className?: string }) {
+export default function ExternalLink({
+  url,
+  className,
+  justOpenLink
+}: {
+  url: string
+  className?: string
+  justOpenLink?: boolean
+}) {
   const { t } = useTranslation()
+  const { isSmallScreen } = useScreenSize()
   const { push } = useSecondaryPage()
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const displayUrl = useMemo(() => truncateUrl(url), [url])
 
   const handleOpenLink = (e: React.MouseEvent) => {
     e.stopPropagation()
+    if (isSmallScreen) {
+      setIsDrawerOpen(false)
+    }
     window.open(url, '_blank', 'noreferrer')
   }
 
   const handleViewDiscussions = (e: React.MouseEvent) => {
     e.stopPropagation()
+    if (isSmallScreen) {
+      setIsDrawerOpen(false)
+    }
     push(toExternalContent(url))
   }
 
+  if (justOpenLink) {
+    return (
+      <a
+        href={url}
+        target="_blank"
+        rel="noreferrer"
+        className={cn('cursor-pointer text-primary hover:underline', className)}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {displayUrl}
+      </a>
+    )
+  }
+
+  const trigger = (
+    <span
+      className={cn('cursor-pointer text-primary hover:underline', className)}
+      onClick={(e) => {
+        e.stopPropagation()
+        if (isSmallScreen) {
+          setIsDrawerOpen(true)
+        }
+      }}
+      title={url}
+    >
+      {displayUrl}
+    </span>
+  )
+
+  if (isSmallScreen) {
+    return (
+      <>
+        {trigger}
+        <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
+          <DrawerOverlay onClick={() => setIsDrawerOpen(false)} />
+          <DrawerContent hideOverlay>
+            <div className="py-2">
+              <Button
+                onClick={handleOpenLink}
+                className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5"
+                variant="ghost"
+              >
+                <ExternalLinkIcon />
+                {t('Open link')}
+              </Button>
+              <Button
+                onClick={handleViewDiscussions}
+                className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5"
+                variant="ghost"
+              >
+                <MessageSquare />
+                {t('View Nostr discussions')}
+              </Button>
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </>
+    )
+  }
+
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <span
-          className={cn('cursor-pointer text-primary hover:underline', className)}
-          onClick={(e) => e.stopPropagation()}
-          title={url}
-        >
+      <DropdownMenuTrigger>
+        <span className={cn('cursor-pointer text-primary hover:underline', className)} title={url}>
           {displayUrl}
         </span>
       </DropdownMenuTrigger>