From 25720b21e1e2f9bdac93506b29fb64942d87fec7 Mon Sep 17 00:00:00 2001
From: xiaomai <xsbugh@gmail.com>
Date: Fri, 8 May 2026 16:52:30 +0800
Subject: [PATCH] refactor(ui): streamline booking form layout and table
 actions

Consolidate booking table row actions into a dropdown menu
Update booking page layout to use a sidebar card for event details
---
 app/pages/bookings/index.vue | 146 +++++++++++++++++++++--------------
 app/pages/index.vue          |  83 ++++++++++----------
 2 files changed, 132 insertions(+), 97 deletions(-)

diff --git a/app/pages/bookings/index.vue b/app/pages/bookings/index.vue
index 8b69ac0..f6426bf 100644
--- a/app/pages/bookings/index.vue
+++ b/app/pages/bookings/index.vue
@@ -285,62 +285,43 @@
             </template>
 
             <template #actions-cell="{ row }">
-              <div class="flex flex-wrap justify-end gap-1.5 py-0.5">
-                <UButton
-                  :to="confirmationPath(row.original)"
-                  label="Open"
-                  color="neutral"
-                  variant="outline"
-                  icon="i-lucide-external-link"
-                  size="sm"
-                />
-                <UButton
-                  :to="receiptPath(row.original)"
-                  label="Receipt"
-                  color="neutral"
-                  variant="outline"
-                  icon="i-lucide-receipt"
-                  size="sm"
-                />
-                <UButton
-                  label="Edit"
-                  color="neutral"
-                  variant="outline"
-                  icon="i-lucide-pencil-line"
-                  size="sm"
-                  :disabled="!bookingConfig"
-                  @click="openBookingEditor(row.original)"
-                />
-                <UButton
-                  label="Transfer"
-                  color="neutral"
-                  variant="outline"
-                  icon="i-lucide-send"
-                  size="sm"
-                  :disabled="!hasTransferTargets(row.original)"
-                  @click="openTransferEditor(row.original)"
-                />
-                <UButton
-                  v-if="row.original.status === 'confirmed'"
-                  label="Unconfirm"
-                  color="error"
-                  variant="outline"
-                  icon="i-lucide-x-circle"
-                  size="sm"
-                  :loading="cancellingBookingId === row.original.id"
-                  :disabled="cancellingBookingId !== null && cancellingBookingId !== row.original.id"
-                  @click="cancelBookingConfirmation(row.original)"
-                />
-                <UButton
-                  label="Delete"
-                  color="error"
-                  variant="outline"
-                  icon="i-lucide-trash-2"
-                  size="sm"
-                  :loading="deletingBookingId === row.original.id"
-                  :disabled="Boolean(deletingBookingId) && deletingBookingId !== row.original.id"
-                  @click="deleteBooking(row.original)"
-                />
+              <div class="flex flex-nowrap items-center justify-end gap-1 py-0.5 whitespace-nowrap">
+                <UTooltip text="Open booking">
+                  <UButton
+                    :to="confirmationPath(row.original)"
+                    color="neutral"
+                    variant="ghost"
+                    icon="i-lucide-external-link"
+                    size="sm"
+                    class="min-w-9 justify-center"
+                    aria-label="Open booking"
+                  />
+                </UTooltip>
+
+                <UTooltip text="Open receipt">
+                  <UButton
+                    :to="receiptPath(row.original)"
+                    color="neutral"
+                    variant="ghost"
+                    icon="i-lucide-receipt"
+                    size="sm"
+                    class="min-w-9 justify-center"
+                    aria-label="Open receipt"
+                  />
+                </UTooltip>
+
+                <UDropdownMenu :items="bookingActionMenuItems(row.original)">
+                  <UButton
+                    color="neutral"
+                    variant="ghost"
+                    icon="i-lucide-ellipsis-vertical"
+                    size="sm"
+                    class="min-w-9 justify-center"
+                    :loading="isBookingRowActionBusy(row.original)"
+                    :disabled="isBookingRowActionBusy(row.original)"
+                    aria-label="More actions"
+                  />
+                </UDropdownMenu>
               </div>
             </template>
           </UTable>
@@ -798,6 +779,59 @@ function receiptPath(booking: PublicBooking) {
   return `/receipt/${booking.receiptToken}`
 }
 
+function isBookingRowActionBusy(booking: PublicBooking) {
+  return Boolean(
+    (deletingBookingId.value && deletingBookingId.value !== booking.id)
+    || (cancellingBookingId.value && cancellingBookingId.value !== booking.id)
+    || deletingBookingId.value === booking.id
+    || cancellingBookingId.value === booking.id
+  )
+}
+
+function bookingActionMenuItems(booking: PublicBooking) {
+  const busy = isBookingRowActionBusy(booking)
+  const items = [
+    [
+      {
+        label: 'Edit booking',
+        icon: 'i-lucide-pencil-line',
+        disabled: busy || !bookingConfig.value,
+        onSelect: () => openBookingEditor(booking)
+      },
+      {
+        label: 'Transfer booking',
+        icon: 'i-lucide-send',
+        disabled: busy || !hasTransferTargets(booking),
+        onSelect: () => openTransferEditor(booking)
+      }
+    ]
+  ]
+
+  if (booking.status === 'confirmed') {
+    items.push([
+      {
+        label: 'Unconfirm booking',
+        icon: 'i-lucide-x-circle',
+        color: 'error',
+        disabled: busy,
+        onSelect: () => cancelBookingConfirmation(booking)
+      }
+    ])
+  }
+
+  items.push([
+    {
+      label: 'Delete booking',
+      icon: 'i-lucide-trash-2',
+      color: 'error',
+      disabled: busy,
+      onSelect: () => deleteBooking(booking)
+    }
+  ])
+
+  return items
+}
+
 function openBookingEditor(booking: PublicBooking) {
   detailsBooking.value = booking
   detailsForm.customerName = booking.customerName
diff --git a/app/pages/index.vue b/app/pages/index.vue
index bb0d3b1..0c7108e 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -235,23 +235,28 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
 
 <template>
   <UContainer class="page-shell-narrow">
-    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_34rem] xl:items-start xl:gap-8">
-      <section class="space-y-4 xl:sticky xl:top-6 xl:space-y-6">
-        <div class="page-header">
-          <UBadge :label="t('layout.brand')" color="primary" variant="soft" class="page-eyebrow" />
-          <h1 class="page-title">
-            {{ bookingConfig.event.title }}
-          </h1>
-          <p class="page-description">
-            {{ t('booking.seatGeneration', { count: seatCount, seatLabel: locale === 'zh' ? '座位' : `seat${seatCount === 1 ? '' : 's'}` }) }}
-          </p>
-        </div>
+    <div class="grid gap-5 xl:grid-cols-[22rem_minmax(0,1fr)] xl:items-start xl:gap-8">
+      <UCard
+        class="surface-card overflow-hidden rounded-lg xl:sticky xl:top-6"
+        :ui="{ header: 'px-4 py-4 sm:px-5 sm:py-5', body: 'space-y-4 px-4 pb-4 pt-0 sm:px-5 sm:pb-5' }"
+      >
+        <template #header>
+          <div class="space-y-1">
+            <UBadge :label="t('layout.brand')" color="primary" variant="soft" class="page-eyebrow" />
+            <h1 class="text-2xl font-bold leading-tight text-highlighted sm:text-3xl xl:text-2xl">
+              {{ bookingConfig.event.title }}
+            </h1>
+            <p class="page-description">
+              {{ t('booking.seatGeneration', { count: seatCount, seatLabel: locale === 'zh' ? '座位' : `seat${seatCount === 1 ? '' : 's'}` }) }}
+            </p>
+          </div>
+        </template>
 
-        <div class="grid gap-2 sm:grid-cols-3 xl:grid-cols-1 xl:gap-3">
+        <div class="grid gap-3">
           <div
             v-for="detail in eventDetails"
             :key="detail.label"
-            class="surface-card rounded-lg p-3 sm:p-4"
+            class="surface-panel rounded-lg p-4"
           >
             <div class="flex items-start gap-3">
               <div class="flex size-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
@@ -268,7 +273,7 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
             </div>
           </div>
         </div>
-      </section>
+      </UCard>
 
       <UCard
         id="booking-form"
@@ -285,15 +290,13 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
         </div>
 
         <UForm :state="form" :validate="validateBooking" class="space-y-5 sm:space-y-6" @submit="bookTicket">
-          <div class="grid gap-4 sm:grid-cols-2 sm:gap-5">
-            <UFormField name="name" :label="t('booking.name')" required>
-              <UInput v-model="form.name" size="xl" class="w-full" :placeholder="t('booking.namePlaceholder')" />
-            </UFormField>
+          <UFormField name="name" :label="t('booking.name')" required>
+            <UInput v-model="form.name" size="xl" class="w-full" :placeholder="t('booking.namePlaceholder')" />
+          </UFormField>
 
-            <UFormField name="phone" :label="t('common.phoneNumber')" required>
-              <UInput v-model="form.phone" size="xl" type="tel" class="w-full" :placeholder="t('booking.phonePlaceholder')" />
-            </UFormField>
-          </div>
+          <UFormField name="phone" :label="t('common.phoneNumber')" required>
+            <UInput v-model="form.phone" size="xl" type="tel" class="w-full" :placeholder="t('booking.phonePlaceholder')" />
+          </UFormField>
 
           <UFormField :label="t('booking.bookingMode')" name="bookingMode">
             <URadioGroup
@@ -303,30 +306,28 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
               indicator="hidden"
               :items="bookingModeOptions"
               :ui="{
-                fieldset: 'grid grid-cols-1 gap-3 sm:grid-cols-2',
+                fieldset: 'grid grid-cols-2 gap-3',
                 item: 'min-h-14 rounded-lg border border-default bg-default p-3 transition-colors data-[state=checked]:border-primary data-[state=checked]:bg-primary/5'
               }"
             />
           </UFormField>
 
-          <div class="grid gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1.1fr)] sm:gap-5">
-            <UFormField :label="quantityLabel" name="quantity">
-              <UInputNumber v-model="form.quantity" size="xl" class="w-full" :min="1" :step="1" />
-              <template #help>
-                {{ t('booking.seatGeneration', { count: seatCount, seatLabel: locale === 'zh' ? '座位' : `seat${seatCount === 1 ? '' : 's'}` }) }}
-              </template>
-            </UFormField>
+          <UFormField :label="quantityLabel" name="quantity">
+            <UInputNumber v-model="form.quantity" size="xl" class="w-full" :min="1" :step="1" />
+            <template #help>
+              {{ t('booking.seatGeneration', { count: seatCount, seatLabel: locale === 'zh' ? '座位' : `seat${seatCount === 1 ? '' : 's'}` }) }}
+            </template>
+          </UFormField>
 
-            <UFormField :label="t('booking.personInCharge')">
-              <USelect
-                v-model="selectedPersonInCharge"
-                size="xl"
-                class="w-full"
-                :items="personInCharge"
-                :disabled="!personInCharge.length"
-              />
-            </UFormField>
-          </div>
+          <UFormField :label="t('booking.personInCharge')">
+            <USelect
+              v-model="selectedPersonInCharge"
+              size="xl"
+              class="w-full"
+              :items="personInCharge"
+              :disabled="!personInCharge.length"
+            />
+          </UFormField>
 
           <UFormField :label="t('booking.ticketCategory')" name="ticketType">
             <URadioGroup
@@ -336,7 +337,7 @@ async function bookTicket(event: FormSubmitEvent<typeof form>) {
               indicator="hidden"
               :items="ticketCatalogOptions"
               :ui="{
-                fieldset: 'grid grid-cols-1 gap-3 sm:grid-cols-2',
+                fieldset: 'grid grid-cols-2 gap-3',
                 item: 'min-h-14 rounded-lg border border-default bg-default p-3 transition-colors data-[state=checked]:border-primary data-[state=checked]:bg-primary/5'
               }"
             />