Clarified distinction between Preferred and Ticketed Name.

frontend/src/pages/Participants.svelte

@@ -19,6 +19,7 @@
   let showAdd = $state(false)
   let adding = $state(false)
   let newName = $state('')
+  let newTicketedName = $state('')
   let newEmail = $state('')
   let newPhone = $state('')
   let newPronouns = $state('')
@@ -27,6 +28,7 @@
   // Edit participant
   let editId = $state(null)
   let editName = $state('')
+  let editTicketedName = $state('')
   let editEmail = $state('')
   let editPhone = $state('')
   let editPronouns = $state('')
@@ -151,12 +153,12 @@
     adding = true; error = ''
     try {
       const p = await api.participants.create({
-        preferred_name: newName, email: newEmail, phone: newPhone,
+        preferred_name: newName, ticket_name: newTicketedName, email: newEmail,
-        pronouns: newPronouns, note: newNote,
+        phone: newPhone, pronouns: newPronouns, note: newNote,
       })
       await db.participants.put(p)
       showAdd = false
-      newName = newEmail = newPhone = newPronouns = newNote = ''
+      newName = newTicketedName = newEmail = newPhone = newPronouns = newNote = ''
     } catch (err) {
       error = err.message
     } finally {
@@ -167,6 +169,7 @@
   function startEdit(p) {
     editId = p.id
     editName = p.preferred_name
+    editTicketedName = p.ticket_name || ''
     editEmail = p.email
     editPhone = p.phone
     editPronouns = p.pronouns
@@ -178,8 +181,8 @@
     saving = true; error = ''
     try {
       const p = await api.participants.update(editId, {
-        preferred_name: editName, email: editEmail, phone: editPhone,
+        preferred_name: editName, ticket_name: editTicketedName, email: editEmail,
-        pronouns: editPronouns, note: editNote,
+        phone: editPhone, pronouns: editPronouns, note: editNote,
       })
       await db.participants.put(p)
       editId = null
@@ -247,9 +250,13 @@
       <form onsubmit={addParticipant}>
         <div class="form-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
           <div class="form-group">
-            <label for="p-name">Name</label>
+            <label for="p-name">Preferred Name</label>
             <input id="p-name" bind:value={newName} placeholder="Preferred name" />
           </div>
+          <div class="form-group">
+            <label for="p-tname">Ticketed Name</label>
+            <input id="p-tname" bind:value={newTicketedName} placeholder="Legal/ticketed name" />
+          </div>
           <div class="form-group">
             <label for="p-email">Email</label>
             <input id="p-email" type="email" bind:value={newEmail} placeholder="email@example.com" />
@@ -324,7 +331,7 @@
       <table>
         <thead>
           <tr>
-            <th>Name</th>
+            <th>Preferred Name</th>
             <th>Email</th>
             <th>Tickets</th>
             <th>Status</th>
@@ -344,6 +351,7 @@
                   <form class="participant-edit-form" onsubmit={saveEdit}>
                     <div class="edit-fields">
                       <input bind:value={editName} placeholder="Preferred name" />
+                      <input bind:value={editTicketedName} placeholder="Ticketed name" />
                       <input type="email" bind:value={editEmail} placeholder="Email" />
                       <input bind:value={editPhone} placeholder="Phone" />
                       <input bind:value={editPronouns} placeholder="Pronouns" />

frontend/src/pages/Users.svelte

@@ -155,7 +155,7 @@
             <input id="u-email" type="email" bind:value={newEmail} required placeholder="email@example.com" autocomplete="off" />
           </div>
           <div class="form-group">
-            <label for="u-name">Name</label>
+            <label for="u-name">Preferred Name</label>
             <input id="u-name" bind:value={newName} placeholder="Preferred name" autocomplete="off" />
           </div>
           <div class="form-group">
@@ -214,7 +214,7 @@
       <table>
         <thead>
           <tr>
-            <th>Name</th>
+            <th>Preferred Name</th>
             <th>Roles</th>
             <th>Departments</th>
             <th></th>

frontend/src/pages/Volunteers.svelte

@@ -256,7 +256,7 @@
       <table>
         <thead>
           <tr>
-            <th>Name</th>
+            <th>Preferred Name</th>
             <th>Department</th>
             <th>Status</th>
             <th></th>
@@ -297,6 +297,7 @@
               </tr>
             {:else}
               <tr>
+                {@const participant = participantFor(v.participant_id)}
                 <td class="td-name">
                   <strong>{v.name}</strong>
                   {#if v.is_lead}
@@ -307,6 +308,9 @@
                   {:else if !participantHasTickets(v.participant_id)}
                     <span class="badge badge-partial" style="margin-left:0.4rem" title="No ticket on file">No ticket</span>
                   {/if}
+                  {#if participant?.ticket_name && participant.ticket_name !== v.name}
+                    <div class="text-muted" style="font-size:0.78rem">Ticket: {participant.ticket_name}</div>
+                  {/if}
                   {#if v.email}
                     <div class="text-muted" style="font-size:0.78rem">{v.email}</div>
                   {/if}