Summary

Adds settings page prototypes for the calcom example app, covering user-level, organization-level, and developer settings:

Push notifications (/settings/my-account/push-notifications)

• CardFrame/CardPanel layout matching existing profile and general pages
• Controlled Switch toggle for browser notifications with toast feedback ("Notifications enabled successfully" / "Notifications disabled successfully")

Features (/settings/my-account/features)

• Feature list with ToggleGroup (Off / On / Default) per feature — modeled after cal.com's feature opt-in settings
• Hardcoded "bookings-v3" feature as sample data
• Auto opt-in toggle using the SettingsToggle component (extended with controlled checked/onCheckedChange props)
• "Features" link added to sidebar navigation

Billing (/settings/billing)

• CardFrame with header ("Billing" / "Manage all things billing")
• "Manage billing" card with a "Billing portal" button and external link icon
• "Contact support" help link at the bottom

Organization profile (/settings/organizations/profile)

• Server component page.tsx with CardFrame structure; interactive fields extracted to OrganizationProfileFields client component rendered inside CardPanel
• Team logo upload with avatar preview
• Team name and Team URL displayed on the same row (2-column grid, matching /settings/my-account/profile layout)
• Team ID on a new row at half width, disabled with copy-to-clipboard
• About textarea with bold/italic/link toolbar
• Update button in CardFrameFooter
• Danger zone card with "Disband team" button

Organization profile — no permissions (/settings/organizations/profile/no-permissions)

• Read-only prototype for users without edit permissions
• Displays organization name and about text as static content (no form fields)
• "Copy link to organization" button (client component with useCopyToClipboard)
• No footer/edit buttons — view-only layout

Developer webhooks (/settings/developer/webhooks) — merged from feature/calcom-webhooks

• /settings/developer redirects to /settings/developer/webhooks
• Webhooks list view with empty state and "New webhook" button with "Create for" avatar dropdown
• /settings/developer/webhooks/new — new webhook form with subscriber URL, enable toggle, event trigger combobox (multi-select with chips), no-show timing, webhook version select, secret field, custom payload template (collapsible), and a test webhook section
• /settings/developer/webhooks/demo — demo page with three sample webhooks showing list layout with badges, user avatars, and enabled/disabled states
• WebhooksPageContent, WebhooksListContent, WebhooksEmpty, NewWebhookButton, NewWebhookFormFields, WebhookTestSection components

Developer OAuth clients (/settings/developer/oauth)

• CardFrame with header ("OAuth Clients" / "Create and manage OAuth clients for third-party integrations") — no header action button in empty state, consistent with /developer/webhooks
• Empty state with KeyIcon and "No OAuth Clients" message, containing a detached dialog trigger (default button variant)
• "Create OAuth client" dialog using controlled open/close state — the dialog root (NewOAuthClientDialogRoot) is rendered once at the page level
  • Client name, purpose textarea, redirect URI, website URL, PKCE toggle, logo upload area
  • Cancel / Create footer buttons
• OAuth clients list — uses ListItem/ListItemContent/ListItemTitle/ListItemBadges/ListItemActions components matching the /booking/past pattern
  • Each item shows: KeyIcon inline with title, client name, status badge (Pending/Approved/Rejected with mapped variants), and a chevron button
  • Chevron button on each row opens the edit dialog for that client
• "Edit OAuth client" dialog — mirrors the create dialog structure (Dialog → Form → DialogHeader/DialogPanel/DialogFooter) but displays existing client data:
  • Status badge at top (Pending/Approved/Rejected)
  • Client name (editable input)
  • Client ID (read-only with copy-to-clipboard button)
  • Client Secret (read-only with copy-to-clipboard button)
  • Purpose, Redirect URI, Website URL, PKCE toggle, logo upload (all editable)
  • Cancel / Save footer buttons
• "OAuth client submitted" dialog — shown after creating a new client, displays the generated client ID and secret with copy buttons and a warning that the secret is shown only once
• "+ New" button appears in CardFrameHeader (variant="outline") when clients exist
• Mock data includes two OAuth clients in "pending" status with full details (clientId, clientSecret, purpose, redirectUri, websiteUrl, usePkce)
• Dialog uses Form, Field/FieldLabel/FieldDescription, Input, Textarea, Switch, Avatar, InputGroup (for copyable fields), and Dialog* components from @coss/ui

Developer API keys (/settings/developer/api-keys)

• CardFrame with header ("API Keys" / "Create and manage API keys for authenticating with the Cal.com API") — no header action button in empty state, consistent with OAuth/webhooks pattern
• Empty state with KeyIcon and "No API Keys" message with "New" button (default variant)
• "Create API key" dialog — two-step flow:
  • Form step: Personal note input, expiration date input (disabled when "never expires" is checked), "Never expires" checkbox, Cancel/Create buttons
  • Submitted step: Shows generated API key with copy-to-clipboard button, warning alert that key is shown only once, Done button
• API keys list — uses ListItem/ListItemContent/ListItemTitle/ListItemBadges/ListItemActions components
  • Each item shows: API key note/title, "Created [date]" description, expiration badge (color-coded: success for never expires, warning for expiring soon, error for expired), menu button with Edit/Revoke actions
  • Expiration badge logic: green for "Never expires", yellow for expiring within 30 days, red for expired, default for no expiration set
• "Edit API key" dialog — displays existing key data:
  • API Key (read-only with copy-to-clipboard button using CopyableField component from OAuth page)
  • Personal note (editable input)
  • Expiration date (editable input, disabled if never expires)
  • "Never expires" checkbox (controlled)
  • Cancel / Save footer buttons
• "Revoke API key" AlertDialog — confirmation dialog with warning message about applications losing authentication, Cancel/Revoke buttons (destructive variant)
• "+ New" button appears in CardFrameHeader (variant="outline") when keys exist
• Mock data includes two API keys: one with "Never expires" status, one expiring in July 2026
• Components: ApiKeysPageContent, ApiKeysList, ApiKeysEmpty, NewApiKeyDialog, EditApiKeyDialog

Compliance (/settings/security/compliance)

• CardFrame/CardPanel layout matching other security settings pages (password, impersonation, 2FA)
• Three document sections: Data privacy, Compliance reports, Other documents — modeled after cal.com's compliance page
• Document cards with icon, name, description, and either a "Download" button (for accessible docs) or an "Upgrade to access" button with tooltip (for restricted/org-only docs)
• Hardcoded compliance documents: DPA (public), SOC 2 report, ISO 27001 certification, and penetration test report (all restricted)
• ComplianceDocuments client component extracted into co-located file, page.tsx remains a server component
• Sidebar navigation link was already present in settings-navigation-data.ts

Server/client component architecture

All page.tsx files are server components. Only the inner CardPanel content is extracted into co-located "use client" components, following the pattern established in /settings/my-account/features:

• organization-profile-form.tsx → OrganizationProfileFields
• profile-form.tsx → ProfileFields
• general-settings-form.tsx → GeneralSettingsFields
• features-list.tsx → FeaturesList, AutoOptInToggle
• push-notifications-toggle.tsx → PushNotificationsToggle
• copy-link-button.tsx → CopyLinkButton
• new-webhook-form-fields.tsx → NewWebhookFormFields
• webhook-test-section.tsx → WebhookTestSection
• webhooks-list-content.tsx → WebhooksListContent
• compliance-documents.tsx → ComplianceDocuments
• new-oauth-client-dialog.tsx → NewOAuthClientDialogRoot
• oauth-client-submitted-dialog.tsx → OAuthClientSubmittedDialog
• edit-oauth-client-dialog.tsx → EditOAuthClientDialog
• oauth-clients-list.tsx → OAuthClientsList
• oauth-empty.tsx → OAuthEmpty
• oauth-page-content.tsx → OAuthPageContent
• api-keys-page-content.tsx → ApiKeysPageContent
• api-keys-list.tsx → ApiKeysList
• api-keys-empty.tsx → ApiKeysEmpty
• new-api-key-dialog.tsx → NewApiKeyDialog
• edit-api-key-dialog.tsx → EditApiKeyDialog

Other changes

• SettingsToggle component extended to support controlled mode (checked, onCheckedChange props)
• ToastProvider position changed to bottom-center with AnchoredToastProvider wrapper
• fontMono variable added to body classes in layout
• Avatar fallback text size standardized to text-[.625rem] (was text-[10px])
• /settings/my-account/general/page.tsx now includes SettingsToggle instances (dynamic group links, search engine indexing, monthly digest, impersonation prevention) directly in the server component
• ListItemSpanningTrigger component added to list-item.tsx exports (replaces ListItemTitleLink)
• Typo fix in booking actions ("Pptions" → "Options")
• CardFrameAction component added to card exports for header action buttons

Updates since last revision

Form layout consolidation: FieldGrid reusable component

Extracted and expanded usage of a reusable responsive 2-column grid wrapper for settings forms:

• Component: components/particles/field-grid.tsx
• Exports: FieldGrid (container) + FieldGridRow (full-width row)
• Pattern: grid grid-cols-1 gap-6 md:grid-cols-2 + full-width rows via col-span-full
• Nested grids: supported via className overrides (e.g. gap-4, gap-x-*, gap-y-*)

Now used in:

• /settings/my-account/general (timezone uses nested FieldGrid)
• /settings/my-account/calendars
• /settings/my-account/profile (also uses FieldGrid for the email input grid)
• /settings/security/password (uses FieldGridRow for the password requirements text)
• /settings/billing (credits section)
• /settings/teams/[id]/settings
• /settings/teams/[id]/profile

Audit note: After applying these refactors, there are no remaining matches for the original grid-cols-1 … md:grid-cols-2 form-field wrapper pattern inside apps/examples/calcom/app/(settings)/settings/** (excluding the FieldGrid component itself).

Lockfile

• bun.lock gained a single "configVersion": 0 entry.

Review & Testing Checklist for Human

• Verify responsive layout (mobile 1-col vs desktop 2-col) on the newly-updated pages:
  • /settings/my-account/profile
  • /settings/security/password
  • /settings/teams/[id]/profile
  • /settings/billing (Credits section)
• Verify nested FieldGrid usage doesn’t introduce spacing regressions (notably: profile username/full-name row, email grid, and password requirements text row spanning)
• Sanity-check the previously-updated FieldGrid pages still render correctly:
  • /settings/my-account/general (timezone row + nested grid)
  • /settings/my-account/calendars
  • /settings/teams/[id]/settings

Notes

• Requested by: @pasqualevitiello
• Link to Devin run: https://app.devin.ai/sessions/2b47654fa4574ff58199e2c0a8d7305a