feat: 💨

src/components/ExternalContent/index.tsx

@@ -45,7 +45,7 @@ export default function ExternalContent({
   }
 
   if (node.type === 'url') {
-    return <WebPreview url={node.data} className={className} />
+    return <WebPreview url={node.data} className={className} mustLoad={mustLoadMedia} />
   }
 
   if (node.type === 'x-post') {

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>
+      <DropdownMenuTrigger>
-        <span
+        <span className={cn('cursor-pointer text-primary hover:underline', className)} title={url}>
-          className={cn('cursor-pointer text-primary hover:underline', className)}
-          onClick={(e) => e.stopPropagation()}
-          title={url}
-        >
           {displayUrl}
         </span>
       </DropdownMenuTrigger>

src/components/WebPreview/index.tsx

@@ -4,8 +4,17 @@ import { useContentPolicy } from '@/providers/ContentPolicyProvider'
 import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import { useMemo } from 'react'
 import Image from '../Image'
+import ExternalLink from '../ExternalLink'
 
-export default function WebPreview({ url, className }: { url: string; className?: string }) {
+export default function WebPreview({
+  url,
+  className,
+  mustLoad
+}: {
+  url: string
+  className?: string
+  mustLoad?: boolean
+}) {
   const { autoLoadMedia } = useContentPolicy()
   const { isSmallScreen } = useScreenSize()
   const { title, description, image } = useFetchWebMetadata(url)
@@ -18,13 +27,17 @@ export default function WebPreview({ url, className }: { url: string; className?
     }
   }, [url])
 
-  if (!autoLoadMedia) {
+  if (!autoLoadMedia && !mustLoad) {
     return null
   }
 
   if (!title) {
+    if (mustLoad) {
+      return <ExternalLink url={url} justOpenLink />
+    } else {
       return null
     }
+  }
 
   if (isSmallScreen && image) {
     return (

src/pages/secondary/ExternalContentPage/index.tsx

@@ -29,7 +29,7 @@ const ExternalContentPage = forwardRef(({ index }: { index?: number }, ref) => {
       displayScrollToTopButton
     >
       <div className="px-4 mt-3">
-        <ExternalContent content={id} />
+        <ExternalContent content={id} mustLoadMedia />
         <StuffStats className="mt-3" stuff={id} fetchIfNotExisting displayTopZapsAndLikes />
       </div>
       <Separator className="mt-4" />