Polish super-admin: EN names, blurrier popovers, domain open links.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-07 18:24:18 +03:30
parent fd4f358f50
commit 56f6b23074
6 changed files with 213 additions and 14 deletions
@@ -0,0 +1,176 @@
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { Building2, ExternalLink, Globe, MoreHorizontal, UserRound } from 'lucide-react'
+import styles from './BusinessActionsOverflowMenu.module.css'
+
+type PopoverPosition = {
+  top: number
+  left: number
+}
+
+interface DomainLinksOverflowMenuProps {
+  host: string
+}
+
+function apexHost(host: string) {
+  return host.trim().replace(/^www\./i, '')
+}
+
+function siteProtocol(host: string) {
+  return /\.local$/i.test(host) ? 'http:' : 'https:'
+}
+
+function siteUrl(host: string) {
+  return `${siteProtocol(host)}//${host}`
+}
+
+function openHost(host: string) {
+  window.open(siteUrl(host), '_blank', 'noopener,noreferrer')
+}
+
+export function DomainLinksOverflowMenu({ host }: DomainLinksOverflowMenuProps) {
+  const [open, setOpen] = useState(false)
+  const [popoverPos, setPopoverPos] = useState<PopoverPosition | null>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const triggerRef = useRef<HTMLButtonElement>(null)
+
+  const apex = apexHost(host)
+  const websiteHost = apex
+  const businessHost = `business.${apex}`
+  const customerHost = `customer.${apex}`
+
+  function updatePopoverPosition() {
+    const rect = triggerRef.current?.getBoundingClientRect()
+    if (!rect) return
+
+    setPopoverPos({
+      top: rect.bottom + 8,
+      left: rect.right,
+    })
+  }
+
+  function toggleOpen() {
+    if (open) {
+      setOpen(false)
+      return
+    }
+
+    updatePopoverPosition()
+    setOpen(true)
+  }
+
+  useEffect(() => {
+    if (!open) return
+
+    function handleClickOutside(e: MouseEvent) {
+      const target = e.target as Node
+      if (wrapRef.current?.contains(target)) return
+      if (popoverRef.current?.contains(target)) return
+      setOpen(false)
+    }
+
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === 'Escape') setOpen(false)
+    }
+
+    function handleReposition() {
+      updatePopoverPosition()
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('keydown', handleEscape)
+    window.addEventListener('resize', handleReposition)
+    window.addEventListener('scroll', handleReposition, true)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('keydown', handleEscape)
+      window.removeEventListener('resize', handleReposition)
+      window.removeEventListener('scroll', handleReposition, true)
+    }
+  }, [open])
+
+  const items = [
+    {
+      key: 'website',
+      label: 'Open website',
+      detail: websiteHost,
+      icon: Globe,
+      onClick: () => openHost(websiteHost),
+    },
+    {
+      key: 'business',
+      label: 'Business dashboard',
+      detail: businessHost,
+      icon: Building2,
+      onClick: () => openHost(businessHost),
+    },
+    {
+      key: 'customer',
+      label: 'Customer dashboard',
+      detail: customerHost,
+      icon: UserRound,
+      onClick: () => openHost(customerHost),
+    },
+  ] as const
+
+  return (
+    <div className={styles.wrap} ref={wrapRef}>
+      <button
+        ref={triggerRef}
+        type="button"
+        className={`${styles.trigger} ${open ? styles.triggerOpen : ''}`}
+        onClick={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          toggleOpen()
+        }}
+        title="Open sites"
+        aria-label={`Open sites for ${apex}`}
+        aria-haspopup="menu"
+        aria-expanded={open}
+      >
+        <MoreHorizontal size={16} />
+      </button>
+
+      {open &&
+        popoverPos &&
+        createPortal(
+          <div
+            ref={popoverRef}
+            className={styles.menu}
+            role="menu"
+            aria-label={`Open sites for ${apex}`}
+            style={{
+              top: popoverPos.top,
+              left: popoverPos.left,
+            }}
+          >
+            {items.map(({ key, label, detail, icon: Icon, onClick }) => (
+              <button
+                key={key}
+                type="button"
+                className={styles.item}
+                role="menuitem"
+                onClick={() => {
+                  setOpen(false)
+                  onClick()
+                }}
+              >
+                <Icon size={16} />
+                <span className={styles.itemText}>
+                  <span>{label}</span>
+                  <span className={styles.itemDetail}>
+                    {detail}
+                    <ExternalLink size={12} aria-hidden="true" />
+                  </span>
+                </span>
+              </button>
+            ))}
+          </div>,
+          document.body,
+        )}
+    </div>
+  )
+}