Revert "refactor: responsive menu"

This reverts commit 1dc18645b2.

src/components/StuffStats/SeenOnButton.tsx

@@ -1,15 +1,18 @@
 import { useSecondaryPage } from '@/PageManager'
+import { Button } from '@/components/ui/button'
+import { Drawer, DrawerContent, DrawerOverlay } from '@/components/ui/drawer'
 import {
-  ResponsiveMenu,
-  ResponsiveMenuContent,
-  ResponsiveMenuItem,
-  ResponsiveMenuLabel,
-  ResponsiveMenuSeparator,
-  ResponsiveMenuTrigger
-} from '@/components/ui/responsive-menu'
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
 import { useStuff } from '@/hooks/useStuff'
 import { toRelay } from '@/lib/link'
 import { simplifyUrl } from '@/lib/url'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
 import client from '@/services/client.service'
 import { Server } from 'lucide-react'
 import { Event } from 'nostr-tools'
@@ -19,56 +22,84 @@ import RelayIcon from '../RelayIcon'
 
 export default function SeenOnButton({ stuff }: { stuff: Event | string }) {
   const { t } = useTranslation()
+  const { isSmallScreen } = useScreenSize()
   const { push } = useSecondaryPage()
   const { event } = useStuff(stuff)
   const [relays, setRelays] = useState<string[]>([])
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
 
   useEffect(() => {
     if (!event) return
 
     const seenOn = client.getSeenEventRelayUrls(event.id)
     setRelays(seenOn)
-  }, [event])
+  }, [])
+
+  const trigger = (
+    <button
+      className="flex gap-1 items-center text-muted-foreground enabled:hover:text-primary pl-3 h-full disabled:text-muted-foreground/40"
+      title={t('Seen on')}
+      disabled={relays.length === 0}
+      onClick={() => {
+        if (!event) return
+
+        if (isSmallScreen) {
+          setIsDrawerOpen(true)
+        }
+      }}
+    >
+      <Server />
+      {relays.length > 0 && <div className="text-sm">{relays.length}</div>}
+    </button>
+  )
 
   if (relays.length === 0) {
+    return trigger
+  }
+
+  if (isSmallScreen) {
     return (
-      <button
-        className="flex gap-1 items-center text-muted-foreground enabled:hover:text-primary pl-3 h-full disabled:text-muted-foreground/40"
-        title={t('Seen on')}
-        disabled
-      >
-        <Server />
-      </button>
+      <>
+        {trigger}
+        <Drawer open={isDrawerOpen} onOpenChange={setIsDrawerOpen}>
+          <DrawerOverlay onClick={() => setIsDrawerOpen(false)} />
+          <DrawerContent hideOverlay>
+            <div className="py-2">
+              {relays.map((relay) => (
+                <Button
+                  className="w-full p-6 justify-start text-lg gap-4"
+                  variant="ghost"
+                  key={relay}
+                  onClick={() => {
+                    setIsDrawerOpen(false)
+                    setTimeout(() => {
+                      push(toRelay(relay))
+                    }, 50) // Timeout to allow the drawer to close before navigating
+                  }}
+                >
+                  <RelayIcon url={relay} /> {simplifyUrl(relay)}
+                </Button>
+              ))}
+            </div>
+          </DrawerContent>
+        </Drawer>
+      </>
     )
   }
 
   return (
-    <ResponsiveMenu>
-      <ResponsiveMenuTrigger asChild>
-        <button
-          className="flex gap-1 items-center text-muted-foreground enabled:hover:text-primary pl-3 h-full"
-          title={t('Seen on')}
-        >
-          <Server />
-          <div className="text-sm">{relays.length}</div>
-        </button>
-      </ResponsiveMenuTrigger>
-
-      <ResponsiveMenuContent>
-        <ResponsiveMenuLabel>{t('Seen on')}</ResponsiveMenuLabel>
-        <ResponsiveMenuSeparator />
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DropdownMenuLabel>{t('Seen on')}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
         {relays.map((relay) => (
-          <ResponsiveMenuItem
-            key={relay}
-            onClick={() => {
-              setTimeout(() => push(toRelay(relay)), 100) // slight delay to allow menu to close
-            }}
-          >
+          <DropdownMenuItem key={relay} onClick={() => push(toRelay(relay))} className="min-w-52">
             <RelayIcon url={relay} />
             {simplifyUrl(relay)}
-          </ResponsiveMenuItem>
+          </DropdownMenuItem>
         ))}
-      </ResponsiveMenuContent>
-    </ResponsiveMenu>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }