Tighten Users filters and admin-only header badges.

Match sticky headers to sidebar glass, drop the Users role column, and show compact owner/admin badges only where needed.

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

apps/customer/src/components/Header.module.css

@@ -6,10 +6,11 @@
   position: sticky;
   top: 0;
   z-index: 50;
-  background: color-mix(in srgb, #ffffff 42%, transparent);
-  backdrop-filter: saturate(180%) blur(var(--blur-glass, 28px));
-  -webkit-backdrop-filter: saturate(180%) blur(var(--blur-glass, 28px));
+  background: var(--glass-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid var(--glass-border);
+  isolation: isolate;
   transform: translateZ(0);
 }
 
@@ -182,6 +183,21 @@
   color: var(--text-muted);
 }
 
+.roleBadge {
+  display: inline-block;
+  margin-top: 2px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--primary);
+  background: rgba(var(--primary-rgb) / 0.1);
+  border: 1px solid rgba(var(--primary-rgb) / 0.18);
+  font-family: var(--font-ui);
+  width: fit-content;
+}
+
 .chevron {
   color: var(--text-muted);
   transition: transform 0.2s ease;

apps/customer/src/components/Header.tsx

@@ -60,9 +60,17 @@ export function Header({ hideMenu = false, showBrand = false }: HeaderProps) {
     : (businessNameEn && businessNameEn !== brandTitle ? businessNameEn : '')
 
   const activeBusinessId = getActiveBusinessId()
+  const isSuperAdmin = Boolean(user?.isSuperAdmin || user?.roles.includes('super_admin'))
+  const membership = user?.businesses.find(
+    (business) => String(business.id) === String(activeBusinessId),
+  )
+  const adminBadgeLabel = isSuperAdmin
+    ? t('app.role.superAdmin')
+    : membership?.teamRole === 'admin'
+      ? t('app.role.admin')
+      : null
   const canOpenBusinessDashboard = Boolean(
-    user?.isSuperAdmin ||
-      user?.roles.includes('super_admin') ||
+    isSuperAdmin ||
       user?.businesses.some(
         (business) =>
           String(business.id) === String(activeBusinessId) &&
@@ -162,7 +170,9 @@ export function Header({ hideMenu = false, showBrand = false }: HeaderProps) {
             >
               <div className={styles.profileInfo}>
                 <span className={styles.name}>{displayName}</span>
-                <span className={styles.role}>{t('app.role.customer')}</span>
+                {adminBadgeLabel ? (
+                  <span className={styles.roleBadge}>{adminBadgeLabel}</span>
+                ) : null}
               </div>
               <ChevronDown
                 size={16}

apps/customer/src/i18n/messages.ts

@@ -3,6 +3,8 @@ import type { DashboardLocale } from '@meshkee/dashboard-core'
 const en = {
   'app.dashboardName': 'Customer Dashboard',
   'app.role.customer': 'Website user',
+  'app.role.superAdmin': 'Super Admin',
+  'app.role.admin': 'Admin',
   'app.storeFallback': 'Store',
   'app.poweredBy': 'powered by Meshkee.app',
 
@@ -389,6 +391,8 @@ type MessageKey = keyof typeof en
 const fa: Record<MessageKey, string> = {
   'app.dashboardName': 'پنل مشتری',
   'app.role.customer': 'کاربر وبسایت',
+  'app.role.superAdmin': 'سوپرادمین',
+  'app.role.admin': 'ادمین',
   'app.storeFallback': 'فروشگاه',
   'app.poweredBy': 'قدرت‌گرفته از Meshkee.app',