UI Components

The Meta integration touches several UI areas: connection management in Settings, channel toggles in the compose bar, and channel icons/filters in the conversation feed.

MetaConnectSection

File: src/mods/settings/components/meta_connect_section_component.rs

Renders the Meta connection card in Settings → Integrations.

States

Not connected: Shows a “Connect with Facebook” button. Clicking calls get_meta_oauth_url_api() and redirects the browser to Facebook OAuth.

Connected: Displays the Page name, Instagram username (if linked), who connected, and when. A “Disconnect” button triggers a confirmation dialog before calling disconnect_meta_api().

Multi-page selection: When the URL contains ?meta_select_page=true, renders the MetaPagePicker instead of the connect button.

Error states:

• ?meta_error=no_pages → “No Facebook Pages found. Create a Page in Facebook Business Suite first.”
• ?meta_error=<other> → Generic error message

MetaPagePicker

File: src/mods/settings/components/meta_connect_section_component.rs:182

Renders when OAuth returns multiple Facebook Pages. Fetches cached pages from get_meta_pending_pages_api() and displays a radio list. Each option shows the Page name and linked Instagram username (or “No Instagram account”). Submitting calls select_meta_page_api(page_id).

Compose Bar

File: src/mods/messaging/components/message_compose_component.rs

Two new channel toggles added: ComposeChannel::Messenger and ComposeChannel::Instagram. When selected:

• From/To dropdowns are hidden (recipient is resolved server-side by PSID/IGSID)
• A compact routing chip shows "Messenger" or "Instagram"
• Only the text field and attachment picker are visible

Channel toggles only appear when the organization has an active Meta connection.

Conversation Feed

File: src/mods/messaging/components/communication_feed_component.rs

Channel Icons

• Messenger: MessageCircle icon with blue accent
• Instagram: Instagram icon with gradient accent

Icons render inline in each message entry to identify the channel.

Filter Bar

Two new filter chips — “Messenger” and “Instagram” — follow the same pattern as existing SMS and Email filters.

Contact Sidebar

File: src/mods/contact/components/sidebar/contact_quick_details_component.rs

A new “Facebook Messenger” section appears when a contact has a contact_facebook record. Displays the PSID (read-only) and Facebook name if enriched.

Dashboard

File: src/mods/dashboard/components/message_activity_chart_component.rs

The Message Activity chart adds two new data series:

• Messenger (blue line)
• Instagram (purple line)

The underlying get_messaging_stats_service aggregates by MessageChannel::FacebookMessenger and MessageChannel::InstagramDm.