Participant To Select

• File: src/components/app/call/participantsToSelect.svelte

Overview

Authentication-gated modal content shown when a device must be added to a call and the caller must first pick a user. It renders a read-only summary of the event (event name, device, time, notes) plus a searchable user picker, and dispatches the chosen user back to the caller. Used by components/app/call/participants.svelte and components/app/events/eventForm.svelte (both wrapped in components/cai/modal.svelte).

Props

export let contacts = [];   // populated on mount from readContacts()
export let deviceName = "";
export let eventName = "";
export let time = "";
export let notes = "";

Events

Event	Payload	When
userSelected	{ id, name }	"Confirm Selection" clicked with a chosen user

UI Structure

• Heading: "Authentication required to add device to this call".
• Event Details section: rows with Calendar, DeviceMobile, Clock icons for Event / Device / Time / Notes.
• Select User section: svelte-select <Select> (searchable, clearable, noOptionsMessage="Type to start searching").
• Footer: indigo "Confirm Selection" button.

Behavior

1. onMount loads contacts via readContacts(null, null) (from components/app/events/eventForm.svelte); on failure showError(ret.message).
2. Contacts are reshaped to { ...a, value: a.id, label: a.name } for the picker.
3. Confirm Selection: if no user chosen → showError("Select a user"); otherwise dispatch("userSelected", { id, name }).

Related

• Event Form — device auth flow uses this picker.
• Call View — participant/device management during a call.