@flamingo-stack/openframe-frontend-core 0.0.704 → 0.0.705-snapshot.20261006160157

package/src/components/navigation/header.tsx

@@ -1,429 +0,0 @@
-'use client';
-
-import React, { useEffect, useRef, useState } from 'react';
-import Link from '../../embed-shims/next-link';
-import type { HeaderConfig, NavigationItem } from '../../types/navigation';
-import { cn } from '../../utils';
-import { Menu01Icon, XmarkIcon } from '../icons-v2-generated';
-import { Button } from '../ui/button';
-import { HeaderButton } from './header-button';
-import { MingoAiButton } from './mingo-ai-button';
-import { MOBILE_NAV_PANEL_ID } from './mobile-nav-panel';
-import { TicketAlertsButton } from './ticket-alerts-button';
-import { TopNavigation } from './top-navigation';
-
-export interface HeaderProps {
-  config: HeaderConfig;
-  platform?: string;
-}
-
-// Re-export from types for convenience
-export type { HeaderConfig } from '../../types/navigation';
-
-// Top-level nav-link typography (Figma 2936-6815): the compact h6 step
-// (DM Sans 500, 14/20) with 24px icons. Overrides the `font="regular"` h4
-// label and the Button base's 20px svg cap via cn()'s tailwind-merge.
-const NAV_ITEM_CLASSES = 'text-h6 [&_svg]:h-6 [&_svg]:w-6';
-
-export function Header({ config }: HeaderProps) {
-  const [show, setShow] = useState(true);
-  // Not state: nothing renders the previous offset, and as `useState` it
-  // re-rendered the whole header on every scroll event just to store a number.
-  const lastScrollY = useRef(0);
-  const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});
-  const dropdownRefs = useRef<Record<string, HTMLDivElement | null>>({});
-  const triggerRefs = useRef<Record<string, HTMLButtonElement | null>>({});
-
-  // Handle click outside and escape key for custom dropdown
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      const target = event.target as HTMLElement;
-      if (!target) return;
-
-      // Check if click is outside all dropdowns
-      const isOutsideAllDropdowns = Object.keys(openDropdowns).every(id => {
-        const dropdown = dropdownRefs.current[id];
-        const trigger = triggerRefs.current[id];
-
-        if (!dropdown || !trigger) return true;
-
-        return !dropdown.contains(target) && !trigger.contains(target);
-      });
-
-      if (isOutsideAllDropdowns) {
-        setOpenDropdowns({});
-      }
-    };
-
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setOpenDropdowns({});
-      }
-    };
-
-    // Only add listeners if any dropdown is open
-    const hasOpenDropdowns = Object.values(openDropdowns).some(Boolean);
-    if (hasOpenDropdowns) {
-      document.addEventListener('mousedown', handleClickOutside);
-      document.addEventListener('keydown', handleEscapeKey);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-      document.removeEventListener('keydown', handleEscapeKey);
-    };
-  }, [openDropdowns]);
-
-  // Force close all dropdowns and cleanup on unmount
-  useEffect(() => {
-    return () => {
-      // Close all dropdowns before unmounting to prevent focus errors
-      setOpenDropdowns({});
-      // Clear any stored refs
-      dropdownRefs.current = {};
-      triggerRefs.current = {};
-    };
-  }, []);
-
-  useEffect(() => {
-    // Only add scroll listener if autoHide is enabled. Nothing to reset here:
-    // `show` is masked by `config.autoHide` where it is read (see `headerShown`
-    // below), so turning auto-hide off can never leave the header stuck
-    // off-screen, and it does not cost the extra render pass that writing
-    // `true` back into state from this effect did.
-    if (!config.autoHide) return undefined;
-
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-
-      const prevScrollY = lastScrollY.current;
-      lastScrollY.current = currentScrollY;
-
-      // Determine if we should show or hide the header
-      const shouldHide = currentScrollY > prevScrollY && currentScrollY > 50;
-      const shouldShow = currentScrollY < prevScrollY || currentScrollY <= 10;
-
-      if (shouldHide) {
-        setShow(false);
-      } else if (shouldShow) {
-        setShow(true);
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll, { passive: true });
-
-    return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [config.autoHide]);
-
-  const renderNavigationItem = (item: NavigationItem) => {
-    // If custom element provided, use it
-    if (item.element) {
-      return <React.Fragment key={item.id}>{item.element}</React.Fragment>;
-    }
-
-    // If it has children, render as custom dropdown
-    if (item.children && item.children.length > 0) {
-      const isOpen = openDropdowns[item.id] || false;
-
-      return (
-        <div key={item.id} className="relative">
-          <Button
-            ref={el => {
-              triggerRefs.current[item.id] = el;
-            }}
-            variant="transparent"
-            leftIcon={item.icon}
-            rightIcon={item.badge}
-            onClick={() => {
-              // Single-open: opening a dropdown closes any other open one —
-              // only one nav dropdown may be expanded at a time.
-              setOpenDropdowns(prev => ({
-                [item.id]: !prev[item.id],
-              }));
-            }}
-            size="default"
-            font="regular"
-            className={cn(
-              // Top-level nav links (Figma 2936-6815): compact h6 label
-              // (DM Sans 500, 14/20) with 24px icons — overrides the
-              // font="regular" h4 step and the button's 20px svg cap.
-              NAV_ITEM_CLASSES,
-              item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
-              isOpen && 'bg-ods-bg-hover', // Open dropdowns get gray background
-              item.className,
-            )}
-          >
-            {item.label}
-          </Button>
-
-          {/* Always render dropdown in DOM so crawlers see child <a> links;
-              toggle visibility via CSS + `inert`.
-
-              Why `inert` (not `aria-hidden`):
-                - `aria-hidden=true` HIDES from screen readers but DOES NOT
-                  remove focusable descendants from the tab order. If a child
-                  retains focus (e.g., the dropdown closes while a child was
-                  hovered/focused), the browser correctly flags "Blocked
-                  aria-hidden on an element because its descendant retained
-                  focus" — a real WAI-ARIA violation.
-                - `inert` is the HTML-standard attribute that does BOTH:
-                  removes from a11y tree + blocks focus + prevents click +
-                  removes from tab order. Native React 19 support. */}
-          <div
-            ref={el => {
-              dropdownRefs.current[item.id] = el;
-            }}
-            inert={!isOpen}
-            className={cn(
-              'absolute left-0 top-full mt-1',
-              item.dropdownClassName ? '' : 'border border-ods-border bg-ods-card',
-              'z-[9999] rounded-lg shadow-xl',
-              item.id === 'community' ? 'min-w-[240px]' : 'min-w-[220px]',
-              'transition-opacity duration-150',
-              isOpen ? 'pointer-events-auto visible opacity-100' : 'pointer-events-none invisible opacity-0',
-              item.dropdownClassName || '',
-            )}
-          >
-            <div className="p-2">
-              {item.children.map((child, index) => (
-                <Button
-                  key={child.id}
-                  variant="transparent"
-                  size="small-legacy"
-                  href={child.href} // Use href for navigation
-                  leftIcon={child.icon}
-                  rightIcon={child.badge}
-                  onClick={() => {
-                    // Always close dropdown when any item is clicked
-                    setOpenDropdowns(prev => ({ ...prev, [item.id]: false }));
-                    // If there's a custom onClick, call it too
-                    if (child.onClick) {
-                      child.onClick();
-                    }
-                  }}
-                  className={cn(
-                    'flex w-full justify-start',
-                    // Same caption step as the top-level nav links (designer:
-                    // dropdowns follow the h6 caption size/weight too). The
-                    // explicit font-medium beats small-legacy's font-bold via
-                    // tailwind-merge instead of stylesheet order.
-                    'font-medium text-h6',
-                    index < (item.children?.length ?? 0) - 1 && 'mb-1',
-                    'text-ods-text-primary', // All dropdown items use primary text color
-                    child.isActive && 'bg-ods-bg-hover', // Active dropdown items get gray background
-                  )}
-                  {...(child.isExternal && { isExternal: true })}
-                >
-                  {child.label}
-                </Button>
-              ))}
-            </div>
-            {item.dropdownContent && (
-              <>
-                {item.showDropdownDivider !== false && <div className="mx-2 my-2 h-px bg-ods-border" />}
-                <div className="px-2 pb-2">{item.dropdownContent}</div>
-              </>
-            )}
-          </div>
-        </div>
-      );
-    }
-
-    // Regular navigation item
-    if (item.href || item.onClick) {
-      return (
-        <Button
-          key={item.id}
-          variant="transparent"
-          href={item.href} // Use href for navigation
-          onClick={item.onClick} // Only for non-navigation actions
-          leftIcon={item.icon}
-          rightIcon={item.badge}
-          size="default"
-          font="regular"
-          className={cn(
-            NAV_ITEM_CLASSES,
-            'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
-            'whitespace-nowrap',
-            'text-ods-text-primary', // All items use primary text color
-            item.isActive && 'bg-ods-bg-hover', // Active items get subtle gray background
-            item.className,
-          )}
-          {...(item.isExternal && { isExternal: true })}
-        >
-          {item.label}
-        </Button>
-      );
-    }
-
-    // Button with onClick
-    return (
-      <Button
-        key={item.id}
-        variant="transparent"
-        onClick={item.onClick}
-        leftIcon={item.icon}
-        rightIcon={item.badge}
-        size="default"
-        font="regular"
-        className={cn(
-          NAV_ITEM_CLASSES,
-          'hover:bg-ods-bg-hover focus:bg-ods-bg-hover',
-          'whitespace-nowrap',
-          'text-ods-text-primary', // All items use primary text color
-          item.isActive && 'bg-ods-bg-hover', // Active items get gray background
-          item.className,
-        )}
-      >
-        {item.label}
-      </Button>
-    );
-  };
-
-  // `show` only means anything while auto-hide is on — with it off the header
-  // is always up, regardless of whatever the scroll listener last recorded.
-  const headerShown = !config.autoHide || show;
-
-  const hasNav = !!config.navigation && config.navigation.items.length > 0;
-  const hasCta =
-    !!config.actions?.right?.length || !!(config.actions?.persistent && config.actions.persistent.length > 0);
-
-  return (
-    <div
-      className={cn('sticky top-0 z-[50] w-full transition-transform duration-300 ease-in-out')}
-      style={{
-        transform: !headerShown ? 'translateY(-100%)' : 'translateY(0)',
-      }}
-    >
-      {/* Unified ODS top-navigation shell (Figma 2797-5978): 48px mobile /
-          56px md+, cell model with per-cell dividers. NOTE: no `backdrop-blur`
-          anywhere in this bar. Every platform ships an OPAQUE header
-          background (`backgroundColor` resolves to an opaque ODS token), so a
-          backdrop-filter would blur a backdrop that is then fully painted
-          over: zero visual effect, but the browser still re-rasterizes the
-          strip behind this sticky bar every scroll frame and content flickers
-          as it passes under the header. If a consumer ever wants a
-          translucent "glass" header, add the blur together with a translucent
-          `backgroundColor` deliberately. */}
-      <TopNavigation
-        // `relative` anchors the absolutely-centered nav (position 'center')
-        // to the bar itself, so the links sit at the true viewport center
-        // regardless of the asymmetric CTA/Mingo cluster on the right.
-        className={cn('relative', config.className)}
-        style={config.style}
-        backgroundClassName={config.backgroundColor}
-        centerBreakpoint="lg"
-        size="big"
-        leading={
-          <>
-            {/* Length-guarded: platform configs often pass `left: []`, and an
-                empty array is truthy — without the guard the cell would render
-                as a bare divider + padding. */}
-            {/* No padding on the wrapper: leading cells (HeaderButton-based
-                admin toggles) size themselves to the bar's square cell. */}
-            {!!config.actions?.left?.length && (
-              <div className="flex h-full items-center border-r border-ods-border">{config.actions.left}</div>
-            )}
-            {/* Mobile/tablet menu toggle — a leading cell per the ODS spec
-              (banded with the nav breakpoint `lg` so the desktop nav and the
-              toggle never co-show). */}
-            {config.mobile?.enabled && (
-              <HeaderButton
-                className="border-r border-ods-border lg:hidden"
-                onClick={() => {
-                  config.mobile?.onToggle?.();
-                }}
-                isActive={config.mobile?.isOpen ?? false}
-                aria-label={config.mobile?.isOpen ? 'Close menu' : 'Open menu'}
-                aria-expanded={config.mobile?.isOpen ?? false}
-                // Conditional: the panel unmounts when closed, so an unconditional
-                // reference would dangle (axe aria-valid-attr-value).
-                aria-controls={config.mobile?.isOpen ? MOBILE_NAV_PANEL_ID : undefined}
-                icon={
-                  config.mobile?.isOpen
-                    ? config.mobile?.closeIcon || <XmarkIcon className="h-6 w-6" />
-                    : config.mobile?.menuIcon || <Menu01Icon className="h-6 w-6" />
-                }
-              />
-            )}
-          </>
-        }
-        logo={
-          config.logo.href ? (
-            <Link href={config.logo.href} className="transition-opacity duration-200 hover:opacity-80">
-              {config.logo.element}
-            </Link>
-          ) : (
-            config.logo.element
-          )
-        }
-        // Big-bar rule (Figma 2936-6812): 24px fixed left inset on the logo
-        // zone at every breakpoint — the same 24px also reads as the gap
-        // between a leading cell (burger / admin toggle) and the logo.
-        logoClassName="pl-[var(--spacing-system-lf)] md:pl-[var(--spacing-system-lf)] lg:pl-[var(--spacing-system-lf)]"
-        center={
-          hasNav ? (
-            <nav
-              className={cn(
-                'flex items-center gap-2',
-                // True centering relative to the bar (not the leftover flex
-                // space) — same treatment the pre-unification header had.
-                config.navigation?.position === 'center' && 'absolute left-1/2 -translate-x-1/2',
-              )}
-              role="navigation"
-              aria-label="Main navigation"
-            >
-              {config.navigation?.items.map(renderNavigationItem)}
-            </nav>
-          ) : undefined
-        }
-        centerClassName={cn(
-          config.navigation?.position === 'left' && 'justify-start',
-          config.navigation?.position === 'right' && 'justify-end pr-[var(--spacing-system-m)]',
-        )}
-        cta={
-          hasCta ? (
-            <>
-              {/* Desktop actions — banded with the nav/burger breakpoint (lg)
-                  so the desktop right-cluster and the mobile toggle never
-                  co-show. */}
-              {!!config.actions?.right?.length && (
-                <div className="hidden items-center gap-3 lg:flex">{config.actions.right}</div>
-              )}
-              {config.actions?.persistent && config.actions.persistent.length > 0 && (
-                <div className="flex items-center">{config.actions.persistent}</div>
-              )}
-            </>
-          ) : undefined
-        }
-        ctaClassName="gap-3"
-        sideActions={
-          config.tickets || config.mingo?.enabled ? (
-            <>
-              {/* Support-ticket alerts cell — before Mingo, flush cell row.
-                  Attention-only: renders nothing unless there are unread
-                  replies (and the host mounted <TicketLiveProvider>). */}
-              {config.tickets && (
-                <TicketAlertsButton
-                  href={config.tickets.href}
-                  onNavigate={config.tickets.onClick}
-                  className="border-l border-ods-border"
-                />
-              )}
-              {config.mingo?.enabled && (
-                <MingoAiButton
-                  source={config.mingo.source}
-                  icon={config.mingo.icon}
-                  label={config.mingo.label}
-                  className={config.mingo.className}
-                />
-              )}
-            </>
-          ) : undefined
-        }
-      />
-    </div>
-  );
-}

package/src/components/navigation/mobile-nav-panel.tsx

@@ -1,155 +0,0 @@
-'use client';
-
-import { usePreventScroll } from '@react-aria/overlays';
-import { X } from 'lucide-react';
-import type React from 'react';
-import { useRef } from 'react';
-import { useFocusTrap } from '../../hooks/ui/use-focus-trap';
-import { useHeaderHeight } from '../../hooks/ui/use-header-height';
-import type { MobileNavConfig, NavigationItem } from '../../types/navigation';
-import { cn } from '../../utils';
-import { Button } from '../ui/button';
-import { OVERLAY_BACKDROP_CLASS } from '../ui/drawer';
-
-/** DOM id of the panel — referenced by the header hamburger's `aria-controls`. */
-export const MOBILE_NAV_PANEL_ID = 'mobile-nav-panel';
-
-export interface MobileNavPanelProps {
-  isOpen: boolean;
-  config: MobileNavConfig;
-}
-
-export function MobileNavPanel({ isOpen, config }: MobileNavPanelProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-
-  // Shared ref-counted, iOS-aware scroll lock (react-aria) — one counter with
-  // the modals and chat overlays, restores prior styles on release.
-  usePreventScroll({ isDisabled: !isOpen });
-  // Initial focus, Tab containment, Escape-to-close, guarded focus restore.
-  useFocusTrap(panelRef, isOpen, { onEscape: config.onClose });
-  // The panel is layout-mounted on every page — observers only while open.
-  const headerHeight = useHeaderHeight(64, { enabled: isOpen });
-
-  if (!isOpen) return null;
-
-  const renderNavigationItem = (item: NavigationItem) => {
-    if (item.element) {
-      return <div key={item.id}>{item.element}</div>;
-    }
-
-    const handleClick = () => {
-      if (item.onClick) {
-        item.onClick();
-      }
-      config.onClose?.();
-    };
-
-    if (item.href) {
-      return (
-        <Button
-          key={item.id}
-          variant="outline"
-          size="small-legacy"
-          href={item.href}
-          onClick={handleClick}
-          leftIcon={item.icon}
-          rightIcon={item.badge}
-          className={cn(
-            'h-12 justify-start gap-3 rounded-md border-none bg-transparent px-4 text-ods-text-primary transition-colors hover:bg-ods-bg-hover',
-            item.isActive ? 'bg-ods-bg-hover' : '',
-          )}
-        >
-          {item.label}
-        </Button>
-      );
-    }
-
-    return (
-      <Button
-        key={item.id}
-        variant="outline"
-        size="small-legacy"
-        onClick={handleClick}
-        leftIcon={item.icon}
-        className={cn(
-          'h-12 justify-start gap-3 rounded-md border-none bg-transparent px-4 text-ods-text-primary transition-colors hover:bg-ods-bg-hover',
-          item.isActive ? 'bg-ods-bg-hover' : '',
-        )}
-      >
-        <span className="flex-1 text-left">{item.label}</span>
-        {item.badge !== undefined && <span className="ml-auto">{item.badge}</span>}
-      </Button>
-    );
-  };
-
-  return (
-    <>
-      {/* Backdrop - closes nav when clicked outside */}
-      <div className={cn('fixed inset-0 z-[9998]', OVERLAY_BACKDROP_CLASS)} onClick={config.onClose} />
-
-      {/* Navigation Panel - top-anchored floating card */}
-      <div
-        ref={panelRef}
-        id={MOBILE_NAV_PANEL_ID}
-        role="dialog"
-        aria-modal="true"
-        aria-label="Navigation menu"
-        tabIndex={-1}
-        style={{ '--mobile-nav-top': `${headerHeight + 16}px` } as React.CSSProperties}
-        className={cn(
-          'fixed z-[9999] rounded-lg shadow-xl',
-          config.className ? '' : 'border border-ods-border bg-ods-card',
-          // Responsive positioning and sizing — LEFT-anchored from md, flush
-          // under the burger cell at the left edge of the unified
-          // top-navigation (a larger inset read as a stray gap between the
-          // burger and its panel).
-          'left-2 right-2 md:right-auto',
-          'md:left-2 md:w-[400px] md:max-w-[calc(100vw-1rem)]',
-          // Small-viewport (svh) sizing anchored below the measured header —
-          // 100vh overflowed under mobile browser chrome, leaving the bottom
-          // entries and footer unreachable while the body was scroll-locked.
-          'top-[var(--mobile-nav-top)]',
-          'max-h-[calc(100svh-var(--mobile-nav-top)-50px)] md:max-h-[calc(100svh-var(--mobile-nav-top)-8px)]',
-          'flex flex-col',
-          config.className || '',
-        )}
-        onClick={e => e.stopPropagation()} // Prevent closing when clicking inside nav
-      >
-        {/* Header with close button - fixed at top */}
-        <div className="flex flex-shrink-0 justify-end border-b border-ods-border p-2">
-          <Button
-            aria-label="Close menu"
-            size="icon"
-            variant="transparent"
-            leftIcon={<X className="h-4 w-4 text-ods-text-primary" />}
-            onClick={config.onClose}
-            className="hover:bg-ods-bg-hover"
-          />
-        </div>
-
-        {/* Scrollable content area */}
-        <div className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain px-2 py-2">
-          <div className="flex flex-col space-y-1">
-            {config.sections.map((section, index) => (
-              <div key={index}>
-                {section.title && (
-                  <div className="px-4 pb-1 pt-2 font-semibold uppercase text-ods-text-secondary text-h6">
-                    {section.title}
-                  </div>
-                )}
-                <div className="flex flex-col gap-1">{section.items.map(renderNavigationItem)}</div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        {/* Footer with action button - fixed at bottom, clears the iOS home indicator */}
-        {config.footer && (
-          <div className="flex-shrink-0 border-t border-ods-border p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
-            {config.footer}
-          </div>
-        )}
-      </div>
-    </>
-  );
-}