Orgs Overview Dialog

A trigger button that opens an ordered org roster in a Dialog (desktop) or Drawer (mobile). Supports per-org visibility gating.

OrgsOverviewDialog renders a compact trigger button labeled with the org count. On click it opens a numbered roster list. On desktop a Dialog scales from the button's origin; on mobile a Drawer sheet slides up. Orgs with visibility: 'hidden' are excluded; visibility: 'inert' shows a "coming soon" badge and disables navigation.

Installation

npx shadcn@latest add @adv/orgs-overview-dialog

Usage

import { OrgsOverviewDialog } from '@/components/autoPlayTabs/OrgsOverviewDialog';

<OrgsOverviewDialog
  orgs={[
    { id: 'signoz', title: 'SigNoz', subtitle: 'OSS Observability', href: '/work/signoz', tags: ['B2B', 'OSS'], visibility: 'visible' },
    { id: 'creem', title: 'Creem.io', subtitle: 'Payments for AI', href: '/work/creem', tags: ['B2B', 'AI'], visibility: 'visible' },
  ]}
  onNavigate={(href) => router.push(href)}
/>

Example

Props

Prop	Type	Default	Description
`orgs`	`OrgEntry[]`	—	Roster: `{ id, title, subtitle, href, tags?, visibility? }`.
`headerTitle`	`string`	`"/ Previously at [ N orgs ]"`	Dialog/Drawer title override.
`description`	`string`	`"Every organization..."`	Sub-description below the title.
`onNavigate`	`(href: string) => void`	`window.location.href = href`	Navigation callback when an org row is clicked.
`className`	`string`	`""`	Additional className on the trigger button.

OrgEntry

Field	Type	Default	Description
`id`	`string`	—	Unique key.
`title`	`string`	—	Display name.
`subtitle`	`string`	—	Short tagline.
`href`	`string`	—	Target URL.
`tags`	`string[]`	`[]`	Tag chips (market, domain).
`visibility`	`'visible' \| 'inert' \| 'hidden'`	`'visible'`	Gating state.