<!-- source-hash: 569a7a0949370aa9107f6c577d74779f -->
Responsive application header component for the OpenFrame shell, providing navigation controls, search, organization filtering, notifications, time tracking, Mingo AI access, and user account management across desktop and mobile breakpoints.

## Key Components

### `AppHeader`

The primary exported component — a memoized `<header>` element that composes all header controls based on feature flags passed via props.

**`AppHeaderProps`** — full prop surface:

| Prop | Type | Description |
|---|---|---|
| `showSearch` | `boolean` | Renders global search (desktop) or search icon (mobile) |
| `showOrganizations` | `boolean` | Renders org filter dropdown (desktop only) |
| `showNotifications` | `boolean` | Renders notifications bell with unread badge |
| `showTimeTracker` | `boolean` | Renders time-tracker button; requires `<TimeTrackerProvider>` |
| `showMingoAI` | `boolean` | Renders Mingo AI launcher button |
| `isMingoAIActive` | `boolean` | Pressed state for the Mingo AI drawer toggle |
| `showUser` | `boolean` | Renders user avatar with profile/logout dropdown (desktop only) |
| `isMobileMenuOpen` | `boolean` | Controls burger icon state |
| `disabled` | `boolean` | Dims and disables all controls except the mobile burger toggle |

### `NotificationsHeaderButton` (internal)

Reads live state from `useOptionalNotifications()` context; falls back to `fallbackUnreadCount` when no provider is present. Toggles between a bell icon (with unread dot) and a close icon when the panel is open.

## Usage Example

```typescript
import { AppHeader } from '@openframe-oss-lib/ui'

function Shell() {
  const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false)
  const [mingoOpen, setMingoOpen] = React.useState(false)

  return (
    <AppHeader
      showSearch
      showOrganizations
      organizations={[{ id: 'org-1', name: 'Acme Corp' }]}
      selectedOrgId="org-1"
      onOrgChange={(id) => console.log('org changed', id)}
      showNotifications
      unreadCount={3}
      showTimeTracker
      showMingoAI
      onMingoAI={() => setMingoOpen((v) => !v)}
      isMingoAIActive={mingoOpen}
      showUser
      userName="Jane Smith"
      userEmail="jane@acme.com"
      userAvatarUrl={null}
      onProfile={() => router.push('/profile')}
      onLogout={() => signOut()}
      isMobileMenuOpen={mobileMenuOpen}
      onToggleMobileMenu={() => setMobileMenuOpen((v) => !v)}
    />
  )
}
```

> **Note:** `showTimeTracker` requires wrapping your app in `<TimeTrackerProvider>`. `showMingoAI` pairs with an `AppLayoutDrawer` positioned at `z-[103]`; the user dropdown renders at `z-[104]` to stay above it.

**Source:** [`app-header.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/app-header.tsx)