<!-- source-hash: dec1eb29c513b449612c49f5b36f6f9d -->
A client-side dropdown filter component for switching between organizations in the OpenFrame header, displaying the selected organization's name and device count.

## Key Components

### Interfaces
- **`HeaderOrganizationFilterOrganization`** — Shape for each organization entry (`id`, `name`, `deviceCount?`)
- **`HeaderOrganizationFilterProps`** — Component props including `organizations`, `selectedOrgId`, `onOrgChange`, `totalDeviceCount`, and `className`

### Component
- **`HeaderOrganizationFilter`** — Renders a styled trigger button with a filter icon, organization name, and device count, wired to a dropdown menu listing all organizations plus an "All Organizations" reset option

## Usage Example

```typescript
import { HeaderOrganizationFilter } from './header-organization-filter'

const orgs = [
  { id: 'org-1', name: 'Acme Corp', deviceCount: 42 },
  { id: 'org-2', name: 'Globex Inc', deviceCount: 17 },
]

<HeaderOrganizationFilter
  organizations={orgs}
  selectedOrgId="org-1"
  totalDeviceCount={59}
  onOrgChange={(id) => console.log('Selected org:', id)}
/>
```

## Behavior Notes

- When no `selectedOrgId` matches, defaults to **"All Organizations"** and shows `totalDeviceCount`
- Selecting "All Organizations" from the dropdown calls `onOrgChange('')`
- Device count is formatted with `toLocaleString()` (e.g., `1,234 Devices`)
- Fixed width of `240px` with `border-l` separator, designed for header toolbar placement