tylerg/auth-yes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): relocate Rotate PIN to card operational action grid with full a11y support

Browse Source
This commit is contained in:
Tyler Gillispie 2026-08-26 19:41:51 -07:00
parent 86896fa8c3
commit 0c4f7ac5d2
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui/components/sessions/EventCockpitDeck.tsx
View File

@ -64,19 +64,12 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
<button
type="button"
class="btn-outline"
aria-label={`Copy PIN code for ${event.name}`}
style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;"
onclick={`copyText(document.getElementById('pin-${event.id}').textContent.trim())`}
>
Copy
</button>
<button
type="button"
class="btn-outline"
style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;"
onclick={`rotatePin('${event.id}')`}
>
🔄 Rotate
</button>
</div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span style="font-size: 0.8rem; font-weight: 600; width: 45px; color: var(--text-muted);">
@ -88,6 +81,7 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
<button
type="button"
class="btn-outline"
aria-label={`Copy direct link for ${event.name}`}
style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;"
onclick={`copyText(window.location.origin + '/e/${event.slug}')`}
>
@ -107,6 +101,7 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
<button
type="button"
class="btn-outline"
aria-label={`Copy CLI command for ${event.name}`}
style="padding: 0.25rem 0.5rem; font-size: 0.75rem; min-height: 28px;"
onclick={`copyText("curl -sSL " + window.location.origin + "/join/${event.slug}?format=env | source /dev/stdin")`}
>
@ -138,6 +133,7 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
<button
type="button"
class="btn-outline"
aria-label={`Manage attendees for ${event.name}`}
style="justify-content: center; min-height: 38px; font-size: 0.85rem;"
onclick={`openAttendeesDrawer('${event.id}', '${
event.name.replace(/'/g, "\\'")
@ -148,18 +144,29 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
<button
type="button"
class="btn-outline"
aria-label={`Add 5 seats to ${event.name}`}
style="justify-content: center; min-height: 38px; font-size: 0.85rem;"
onclick={`expandSeats('${event.id}', 5)`}
>
+5 Seats
</button>
</div>
<div style="display: flex; gap: 0.5rem;">
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem;">
<button
type="button"
class="btn-outline"
aria-label={`Rotate PIN code for ${event.name}`}
style="justify-content: center; min-height: 38px; font-size: 0.82rem; padding: 0 0.25rem;"
onclick={`rotatePin('${event.id}')`}
>
🔄 Rotate PIN
</button>
<button
type="button"
class="btn-outline extend-event-btn"
data-event-id={event.id}
style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
aria-label={`Extend lifespan by 1 hour for ${event.name}`}
style="justify-content: center; min-height: 38px; font-size: 0.82rem; padding: 0 0.25rem;"
>
+1h Extend
</button>
@ -167,8 +174,8 @@ export const EventCockpitDeck = ({ eventPasses }: { eventPasses: any[] }) => {
type="button"
class="btn-danger end-event-btn"
data-event-id={event.id}
aria-label="End Event and Revoke All"
style="flex: 1; justify-content: center; min-height: 38px; font-size: 0.85rem;"
aria-label={`End event ${event.name} and revoke all attendees`}
style="justify-content: center; min-height: 38px; font-size: 0.82rem; padding: 0 0.25rem;"
>
End Event
</button>