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

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/super-admin/src/components/BusinessActionsOverflowMenu.module.css

@@ -28,13 +28,13 @@
   position: fixed;
   z-index: 1200;
   transform: translateX(-100%);
-  min-width: 168px;
+  min-width: 220px;
   padding: 6px;
   border-radius: 10px;
-  border: 1px solid var(--glass-border);
+  border: 1px solid rgba(255, 255, 255, 0.55);
-  background: rgba(255, 255, 255, 0.92);
+  background: rgba(255, 255, 255, 0.28);
-  backdrop-filter: blur(24px);
+  backdrop-filter: blur(48px) saturate(1.2);
-  -webkit-backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(48px) saturate(1.2);
   box-shadow: var(--glass-shadow);
   animation: menuIn 0.14s ease;
 }
@@ -53,11 +53,34 @@
   transition: background 0.15s, color 0.15s;
 }
 
+.itemText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.itemDetail {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--text-muted);
+  line-height: 1.2;
+  word-break: break-all;
+}
+
 .item:hover {
   background: rgba(var(--primary-rgb) / 0.08);
   color: var(--primary);
 }
 
+.item:hover .itemDetail {
+  color: var(--primary-soft);
+}
+
 .itemDanger:hover {
   background: rgba(239, 68, 68, 0.08);
   color: #ef4444;

apps/super-admin/src/components/DomainLinksOverflowMenu.tsx

@@ -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>
+  )
+}

apps/super-admin/src/components/Header.tsx

@@ -14,7 +14,7 @@ export function Header() {
   const menuRef = useRef<HTMLDivElement>(null)
 
   const displayName =
-    [user?.firstName, user?.lastName].filter(Boolean).join(' ') ||
+    [user?.firstNameEn, user?.lastNameEn].filter(Boolean).join(' ') ||
     user?.cellNumber ||
     'Super Admin'
 

apps/super-admin/src/components/PrimaryColorSwatchControl.module.css

@@ -50,10 +50,10 @@
   max-width: 280px;
   padding: 8px 10px;
   border-radius: var(--radius-sm);
-  border: 1px solid var(--glass-border);
+  border: 1px solid rgba(255, 255, 255, 0.55);
-  background: var(--glass-bg);
+  background: rgba(255, 255, 255, 0.28);
-  backdrop-filter: blur(var(--blur-glass));
+  backdrop-filter: blur(48px) saturate(1.2);
-  -webkit-backdrop-filter: blur(var(--blur-glass));
+  -webkit-backdrop-filter: blur(48px) saturate(1.2);
   box-shadow: var(--glass-shadow);
 }
 

apps/super-admin/src/pages/HomePage.tsx

@@ -45,15 +45,13 @@ function getFormattedDate() {
 
 export function HomePage() {
   const { user } = useAuth()
-  const firstName = user?.firstName || 'Admin'
+  const firstName = user?.firstNameEn || 'Admin'
 
   return (
     <main className={styles.content}>
       <div className={styles.pageHeader}>
         <div>
-          <h2 className={styles.pageTitle}>
+          <h2 className={styles.pageTitle}>Welcome back, {firstName}!</h2>
-            Welcome back, {firstName}! <span aria-hidden="true">👋</span>
-          </h2>
           <p className={styles.pageSubtitle}>
             Here&apos;s what&apos;s happening across the Meshkee platform today.
           </p>

apps/super-admin/src/pages/WebsitesPage.tsx

@@ -13,6 +13,7 @@ import {
   Unlock,
 } from 'lucide-react'
 import { ConfirmDeleteModal } from '../components/ConfirmDeleteModal'
+import { DomainLinksOverflowMenu } from '../components/DomainLinksOverflowMenu'
 import { Modal } from '../components/Modal'
 import { ToggleSwitch } from '../components/ToggleSwitch'
 import type { DomainListItem, DomainsListResponse } from '../types/domain'
@@ -589,6 +590,7 @@ export function WebsitesPage() {
                           >
                             <Pencil size={16} />
                           </button>
+                          <DomainLinksOverflowMenu host={domain.host} />
                           <button
                             type="button"
                             className={`${tableStyles.controlBtn} ${tableStyles.controlBtnDanger}`}