@frigear-nu/events 0.1.1 → 0.1.3

package/dist/runtime/app/composables/useEventCatalogActions.js

@@ -0,0 +1,107 @@
+import { toValue } from "vue";
+import EventAddonGroupSlideover from "../components/EventAddonGroupSlideover.vue";
+import EventAddonSlideover from "../components/EventAddonSlideover.vue";
+import EventTicketTypeSlideover from "../components/EventTicketTypeSlideover.vue";
+import { eventsApi } from "../../utils/api.js";
+export function useEventCatalogActions(options = {}) {
+  const t = useModuleT("events");
+  const tr = useEventsTranslate();
+  const overlay = useOverlay();
+  const confirm = useConfirmDialog();
+  const { run } = useAction();
+  async function changed(result) {
+    if (result) await options.onChanged?.();
+    return result;
+  }
+  async function openTicketType(ticketType) {
+    const eventId = toValue(options.eventId) ?? "";
+    if (!ticketType && !eventId) throw new Error("useEventCatalogActions: pass `eventId` to add ticket types.");
+    const saved = await overlay.create(EventTicketTypeSlideover, { destroyOnClose: true }).open({ eventId, ticketType, membership: options.membership?.() });
+    return changed(saved || false);
+  }
+  async function openGroup(ticketType, group) {
+    const saved = await overlay.create(EventAddonGroupSlideover, { destroyOnClose: true }).open({ ticketTypeId: ticketType.id, group });
+    return changed(saved || false);
+  }
+  async function openAddon(ticketType, group, addon) {
+    const saved = await overlay.create(EventAddonSlideover, { destroyOnClose: true }).open({ groupId: group.id, currency: ticketType.currency, addon });
+    return changed(saved || false);
+  }
+  async function remove(request) {
+    const confirmed = await confirm({ title: request.title, description: request.description, confirmText: request.confirmText, destructive: true });
+    if (!confirmed) return false;
+    const done = await run(() => $fetch(request.url, { method: "DELETE" }).then(() => true), { success: request.success });
+    return changed(done === true);
+  }
+  function removeTicketType(ticketType) {
+    const name = tr(ticketType.name);
+    return remove({
+      url: eventsApi.admin.ticketType(ticketType.id),
+      title: t("admin.confirmRemoveType", "Delete {name}?", { name }),
+      description: t("admin.confirmRemoveTypeDescription", "Its add-on groups and choices are deleted too. A ticket type with active tickets cannot be deleted."),
+      confirmText: t("admin.removeType", "Delete ticket type"),
+      success: t("admin.typeDeleted", "Deleted {name}", { name })
+    });
+  }
+  function removeGroup(group) {
+    const name = tr(group.title);
+    return remove({
+      url: eventsApi.admin.addonGroup(group.id),
+      title: t("admin.confirmRemoveGroup", "Delete {name}?", { name }),
+      description: t("admin.confirmRemoveGroupDescription", "Its choices are deleted too. Tickets already bought keep the choices they made."),
+      confirmText: t("admin.removeGroup", "Delete add-on group"),
+      success: t("admin.groupDeleted", "Deleted {name}", { name })
+    });
+  }
+  function removeAddon(addon) {
+    const name = tr(addon.label);
+    return remove({
+      url: eventsApi.admin.addon(addon.id),
+      title: t("admin.confirmRemoveAddon", "Delete {name}?", { name }),
+      description: t("admin.confirmRemoveAddonDescription", "Tickets already bought keep the choice they made."),
+      confirmText: t("admin.removeAddon", "Delete choice"),
+      success: t("admin.addonDeleted", "Deleted {name}", { name })
+    });
+  }
+  function typeMenu(ticketType) {
+    return [
+      [
+        { label: t("admin.editType", "Edit ticket type"), icon: "i-lucide-pencil", onSelect: () => {
+          void openTicketType(ticketType);
+        } },
+        { label: t("admin.addGroup", "Add add-on group"), icon: "i-lucide-plus", onSelect: () => {
+          void openGroup(ticketType);
+        } }
+      ],
+      [{ label: t("admin.removeType", "Delete ticket type"), icon: "i-lucide-trash-2", color: "error", onSelect: () => {
+        void removeTicketType(ticketType);
+      } }]
+    ];
+  }
+  function groupMenu(ticketType, group) {
+    return [
+      [
+        { label: t("admin.editGroup", "Edit add-on group"), icon: "i-lucide-pencil", onSelect: () => {
+          void openGroup(ticketType, group);
+        } },
+        { label: t("admin.addAddon", "Add choice"), icon: "i-lucide-plus", onSelect: () => {
+          void openAddon(ticketType, group);
+        } }
+      ],
+      [{ label: t("admin.removeGroup", "Delete add-on group"), icon: "i-lucide-trash-2", color: "error", onSelect: () => {
+        void removeGroup(group);
+      } }]
+    ];
+  }
+  function addonMenu(ticketType, group, addon) {
+    return [
+      [{ label: t("admin.editAddon", "Edit choice"), icon: "i-lucide-pencil", onSelect: () => {
+        void openAddon(ticketType, group, addon);
+      } }],
+      [{ label: t("admin.removeAddon", "Delete choice"), icon: "i-lucide-trash-2", color: "error", onSelect: () => {
+        void removeAddon(addon);
+      } }]
+    ];
+  }
+  return { openTicketType, openGroup, openAddon, removeTicketType, removeGroup, removeAddon, typeMenu, groupMenu, addonMenu };
+}

package/dist/runtime/app/composables/useEvents.d.ts

@@ -16,12 +16,13 @@ export declare function useEvent(slug: MaybeRefOrGetter<string>): Promise<{
         url?: string;
     }>;
 }>;
-export declare function useMyTickets(): {
-    tickets: any;
-    status: any;
-    refresh: any;
-    pay: (ticketId: string) => Promise<void>;
-};
+/**
+ * The signed-in user's tickets. Awaitable: `await useMyTickets()` in a page renders them on the server; a widget can
+ * use it without `await` and show a skeleton while `loading`.
+ *
+ * `tickets` is `[]` until loaded and after an error: check `loading` and `error` before showing an empty state.
+ */
+export declare function useMyTickets(): any;
 /** Locale for translated texts: `@nuxtjs/i18n`'s when installed, otherwise `en`. */
 export declare function useEventsLocale(): any;
 /** The site's default locale: shown for texts that have no translation in the current locale. */

package/dist/runtime/app/composables/useEvents.js

@@ -1,7 +1,7 @@
-import { translate } from "../../utils/index.js";
+import { eventsApi, translate } from "../../utils/index.js";
 export async function useEvents() {
   const now = useState("events:now", () => Date.now());
-  const { data, status, refresh } = await useFetch("/api/events", { key: "events:list", default: () => [] });
+  const { data, status, refresh } = await useFetch(eventsApi.list, { key: "events:list", default: () => [] });
   const grouped = computed(() => {
     const start = (e) => new Date(e.startsAt).getTime();
     const end = (e) => e.endsAt ? new Date(e.endsAt).getTime() : start(e) + 24 * 36e5;
@@ -16,13 +16,13 @@ export async function useEvents() {
 export async function useEvent(slug) {
   const { loggedIn } = useUserSession();
   const locale = useEventsLocale();
-  const { data, status, error, refresh } = await useFetch(() => `/api/events/${toValue(slug)}`, {
+  const { data, status, error, refresh } = await useFetch(() => eventsApi.event(toValue(slug)), {
     key: `events:detail:${toValue(slug)}`,
     // Eligibility (membership, limits) depends on the session; refetch quietly, keeping the data on screen.
     watch: [loggedIn]
   });
   async function purchase(ticketTypeId, addonIds = []) {
-    const result = await $fetch(`/api/events/${toValue(slug)}/purchase`, {
+    const result = await $fetch(eventsApi.purchase(toValue(slug)), {
       method: "POST",
       body: { ticketTypeId, addonIds, locale: locale.value }
     });
@@ -32,19 +32,26 @@ export async function useEvent(slug) {
   }
   return { event: data, status, error, refresh, purchase };
 }
+const MY_TICKETS_TTL_MS = 60 * 1e3;
 export function useMyTickets() {
   const { loggedIn } = useUserSession();
-  const { data, status, refresh } = useFetch("/api/events/tickets/me", {
+  const fetched = useCachedFetch(eventsApi.me.tickets, {
     key: "events:tickets:mine",
-    immediate: loggedIn.value,
-    watch: false,
-    default: () => []
+    ttl: MY_TICKETS_TTL_MS,
+    watch: false
   });
+  const { status, error, loading, refresh, clear } = fetched;
+  watch(loggedIn, (value) => {
+    if (value) refresh();
+    else clear();
+  });
+  const tickets = computed(() => fetched.data.value ?? []);
   async function pay(ticketId) {
-    const { url } = await $fetch(`/api/events/tickets/${ticketId}/pay`, { method: "POST" });
+    const { url } = await $fetch(eventsApi.me.pay(ticketId), { method: "POST" });
     await navigateTo(url, { external: true });
   }
-  return { tickets: data, status, refresh, pay };
+  const api = { tickets, status, error, loading, refresh, pay };
+  return Object.assign(fetched.then(() => api), api);
 }
 export function useEventsLocale() {
   const nuxtApp = useNuxtApp();

package/dist/runtime/app/pages/admin-event.vue

@@ -2,162 +2,97 @@
 import AttendeesTab from "../tabs/Attendees.vue";
 import DetailsTab from "../tabs/Details.vue";
 import TicketsTab from "../tabs/Tickets.vue";
-import { toLocalInput } from "../utils/admin-event";
+import { eventsApi } from "../../utils/api";
 defineOptions({ name: "EventsAdminEventPage" });
 const t = useModuleT("events");
 const route = useRoute();
 const tr = useEventsTranslate();
+const format = useFormat();
 const links = useEventLinks();
 const actions = useEventActions();
 const hasPublicPage = !!useRuntimeConfig().public.events?.pages?.event;
 const id = computed(() => String(route.params.id));
-const { busy, run } = useAction();
-const { data: event, refresh } = await useFetch(() => `/api/events/admin/events/${id.value}`);
+const { data: event, error, refresh } = await useFetch(() => eventsApi.admin.event(id.value));
+const notFound = computed(() => error.value?.statusCode === 404);
 const Tabs = resolveComponent("WidgetTabs");
 const tabs = typeof Tabs === "string" ? void 0 : Tabs;
-const facts = reactive({
-  status: "draft",
-  startsAt: "",
-  endsAt: "",
-  location: void 0,
-  slug: ""
-});
-watch(event, (value) => {
-  if (!value) return;
-  Object.assign(facts, {
-    status: value.status,
-    startsAt: toLocalInput(value.startsAt),
-    endsAt: toLocalInput(value.endsAt),
-    location: value.location ?? void 0,
-    slug: value.slug
-  });
-}, { immediate: true });
-const statuses = computed(() => ["draft", "published", "archived"].map((value) => ({ value, label: t(`admin.statuses.${value}`, value.charAt(0).toUpperCase() + value.slice(1)) })));
-const saveFacts = () => run(async () => {
-  await $fetch(`/api/events/admin/events/${id.value}`, {
-    method: "PATCH",
-    body: {
-      status: facts.status,
-      startsAt: facts.startsAt,
-      endsAt: facts.endsAt || null,
-      location: facts.location ?? null,
-      slug: facts.slug
-    }
-  });
-  await refresh();
-}, { success: t("admin.saved", "Saved.") });
+const facts = computed(() => event.value ? [
+  { key: "startsAt", label: t("admin.starts", "Starts"), value: format.dateTime(event.value.startsAt) },
+  { key: "endsAt", label: t("admin.ends", "Ends"), value: event.value.endsAt ? format.dateTime(event.value.endsAt) : null },
+  { key: "location", label: t("admin.location", "Location"), value: tr(event.value.location) },
+  { key: "slug", label: t("admin.slug", "URL name"), value: event.value.slug }
+] : []);
 </script>
 
 <template>
-  <div
-    v-if="event"
-    class="flex flex-col gap-4"
-  >
-    <PageHeading
-      :title="tr(event.name)"
-      :breadcrumb="[{ label: t('admin.title', 'Events'), to: links.admin() }, { label: tr(event.name) }]"
-    >
-      <template #badge>
-        <UBadge
-          variant="subtle"
-          :color="statusColor(event.status)"
-          :label="t(`admin.statuses.${event.status}`, event.status)"
-        />
-      </template>
-      <template #actions>
-        <UButton
-          v-if="event.status === 'published' && hasPublicPage"
-          :to="links.event(event.slug)"
-          variant="outline"
-          color="neutral"
-          icon="i-lucide-external-link"
-          :label="t('admin.viewPublic', 'View public page')"
-        />
-        <RowMenu
-          variant="outline"
-          :subject="tr(event.name)"
-          :items="actions.menu(event, { open: false, viewPublic: false, onRemoved: () => navigateTo(links.admin()) })"
-        />
-      </template>
-    </PageHeading>
-
-    <SectionCard :title="t('admin.keyFacts', 'Event')">
-      <form
-        id="admin-event-facts"
-        class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"
-        @submit.prevent="saveFacts"
+  <div class="flex flex-col gap-4">
+    <template v-if="event">
+      <PageHeading
+        :title="tr(event.name)"
+        :breadcrumb="[{ label: t('admin.title', 'Events'), to: links.admin() }, { label: tr(event.name) }]"
       >
-        <UFormField :label="t('admin.status', 'Status')">
-          <USelect
-            v-model="facts.status"
-            :items="statuses"
-            class="w-full"
+        <template #badge>
+          <StatusBadge
+            :status="event.status"
+            :label="t(`admin.statuses.${event.status}`, event.status)"
           />
-        </UFormField>
-        <UFormField :label="t('admin.starts', 'Starts')">
-          <UInput
-            v-model="facts.startsAt"
-            type="datetime-local"
-            class="w-full"
-            required
-          />
-        </UFormField>
-        <UFormField :label="t('admin.ends', 'Ends')">
-          <UInput
-            v-model="facts.endsAt"
-            type="datetime-local"
-            class="w-full"
-          />
-        </UFormField>
-        <UFormField :label="t('admin.location', 'Location')">
-          <TranslatedInput v-model="facts.location" />
-        </UFormField>
-        <UFormField :label="t('admin.slug', 'URL name')">
-          <UInput
-            v-model="facts.slug"
-            class="w-full"
-            required
-          />
-        </UFormField>
-      </form>
-      <template #footer>
-        <div class="flex justify-end">
+        </template>
+        <template #actions>
           <UButton
-            type="submit"
-            form="admin-event-facts"
-            :loading="busy"
-            :label="t('admin.saveEvent', 'Save event')"
+            v-if="event.status === 'published' && hasPublicPage"
+            :to="links.event(event.slug)"
+            variant="outline"
+            color="neutral"
+            icon="i-lucide-external-link"
+            :label="t('admin.viewPublic', 'View public page')"
           />
-        </div>
-      </template>
-    </SectionCard>
+          <RowMenu
+            variant="outline"
+            :subject="tr(event.name)"
+            :items="actions.menu(event, { open: false, viewPublic: false, onRemoved: () => navigateTo(links.admin()) })"
+          />
+        </template>
+      </PageHeading>
 
-    <component
-      :is="tabs"
-      v-if="tabs"
-      name="admin.events"
-      :context="{ event }"
-      @refresh="refresh"
-    />
-    <template v-else>
-      <DetailsTab
-        :event="event"
-        @refresh="refresh"
-      />
-      <TicketsTab
-        :event="event"
-        @refresh="refresh"
-      />
-      <AttendeesTab
-        :event="event"
+      <SectionCard :title="t('admin.keyFacts', 'Event')">
+        <DescriptionList :items="facts" />
+      </SectionCard>
+
+      <component
+        :is="tabs"
+        v-if="tabs"
+        name="admin.events"
+        :context="{ event }"
         @refresh="refresh"
       />
+      <template v-else>
+        <DetailsTab
+          :event="event"
+          @refresh="refresh"
+        />
+        <TicketsTab
+          :event="event"
+          @refresh="refresh"
+        />
+        <AttendeesTab
+          :event="event"
+          @refresh="refresh"
+        />
+      </template>
     </template>
+
+    <UEmpty
+      v-else-if="notFound || !error"
+      icon="i-lucide-calendar-x"
+      :title="t('notFound', 'Event not found')"
+      :actions="[{ label: t('admin.allEvents', 'All events'), to: links.admin(), color: 'neutral', variant: 'outline' }]"
+    />
+    <UEmpty
+      v-else
+      icon="i-lucide-circle-alert"
+      :title="t('admin.eventLoadFailed', 'The event could not be loaded')"
+      :description="errorMessage(error, '')"
+      :actions="[{ label: t('tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
+    />
   </div>
-  <UEmpty
-    v-else
-    icon="i-lucide-calendar-x"
-    :title="t('notFound', 'Event not found')"
-    :actions="[{ label: t('admin.allEvents', 'All events'), to: links.admin(), color: 'neutral', variant: 'outline' }]"
-  />
 </template>

package/dist/runtime/app/pages/admin.vue

@@ -1,26 +1,41 @@
 <script setup>
+import { EVENT_STATUSES } from "../utils/admin-event";
+import { eventsApi } from "../../utils/api";
 defineOptions({ name: "EventsAdminPage" });
 const t = useModuleT("events");
 const tr = useEventsTranslate();
 const format = useFormat();
 const links = useEventLinks();
 const actions = useEventActions();
-const { data: events, status, refresh } = await useFetch("/api/events/admin/events", { default: () => [] });
-const { sorting, header } = useTableSort({ id: "startsAt", desc: true });
-const UBadge = resolveComponent("UBadge");
+const { page, pageSize, search, sort: sortState, filters, query, filtered, reset } = useTableQuery({
+  sort: { id: "startsAt", desc: true },
+  filters: { status: "all" }
+});
+const { sorting, header } = useTableSort(null, sortState);
+const { data, status, error, refresh } = await useFetch(eventsApi.admin.events, { query });
+const rows = computed(() => data.value?.items ?? []);
+const pending = computed(() => status.value === "pending");
+const loading = computed(() => pending.value && !data.value);
+const refreshing = computed(() => pending.value && !!data.value);
+const forbidden = computed(() => error.value?.statusCode === 401 || error.value?.statusCode === 403);
+const statusOptions = computed(() => [
+  { label: t("admin.allStatuses", "All statuses"), value: "all" },
+  ...EVENT_STATUSES.map((value) => ({ label: t(`admin.statuses.${value}`, value.charAt(0).toUpperCase() + value.slice(1)), value }))
+]);
+const StatusBadge = resolveComponent("StatusBadge");
 const RowMenu = resolveComponent("RowMenu");
 const TableIdentity = resolveComponent("TableIdentity");
 const columns = computed(() => [
   {
     id: "name",
     accessorFn: (row) => tr(row.name),
-    header: header("name", t("admin.name", "Name")),
+    header: t("admin.name", "Name"),
     cell: ({ row }) => h(TableIdentity, { title: tr(row.original.name), description: tr(row.original.location) })
   },
   {
     accessorKey: "status",
     header: header("status", t("admin.status", "Status")),
-    cell: ({ row }) => h(UBadge, { variant: "subtle", color: statusColor(row.original.status), label: t(`admin.statuses.${row.original.status}`, row.original.status) })
+    cell: ({ row }) => h(StatusBadge, { status: row.original.status, label: t(`admin.statuses.${row.original.status}`, row.original.status) })
   },
   {
     accessorKey: "startsAt",
@@ -33,10 +48,6 @@ const columns = computed(() => [
     cell: ({ row }) => h(RowMenu, { items: actions.menu(row.original, { onRemoved: refresh }), subject: tr(row.original.name) })
   }
 ]);
-async function create() {
-  const created = await actions.create();
-  if (created) await navigateTo(links.adminEvent(created.id));
-}
 </script>
 
 <template>
@@ -49,32 +60,83 @@ async function create() {
         <UButton
           icon="i-lucide-plus"
           :label="t('admin.create', 'New event')"
-          @click="create"
+          @click="actions.create()"
         />
       </template>
     </PageHeading>
 
-    <TableCard
-      :loading="status === 'pending' && !events.length"
-      :refreshing="status === 'pending' && !!events.length"
-    >
-      <UTable
-        v-model:sorting="sorting"
-        :data="events"
-        :columns="columns"
-        :ui="tableUi()"
-        @select="(_, row) => navigateTo(links.adminEvent(row.original.id))"
+    <UEmpty
+      v-if="error && !data"
+      :icon="forbidden ? 'i-lucide-lock' : 'i-lucide-circle-alert'"
+      :title="forbidden ? t('admin.forbidden', 'You do not have access to events') : t('admin.loadFailed', 'Events could not be loaded')"
+      :description="errorMessage(error, '')"
+      :actions="forbidden ? [] : [{ label: t('tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
+    />
+
+    <template v-else>
+      <PageToolbar>
+        <UInput
+          v-model="search"
+          icon="i-lucide-search"
+          :loading="pending"
+          :placeholder="t('admin.search', 'Search events')"
+          :aria-label="t('admin.search', 'Search events')"
+          class="w-full sm:max-w-xs"
+        />
+        <USelect
+          v-model="filters.status"
+          :items="statusOptions"
+          :aria-label="t('admin.status', 'Status')"
+          class="w-44"
+        />
+        <UButton
+          v-if="filtered"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-x"
+          :label="t('admin.clearFilters', 'Clear filters')"
+          @click="reset"
+        />
+      </PageToolbar>
+
+      <TableCard
+        :loading="loading"
+        :refreshing="refreshing"
       >
-        <template #empty>
-          <UEmpty
-            variant="naked"
-            icon="i-lucide-calendar"
-            :title="t('admin.empty', 'No events yet')"
-            :description="t('admin.emptyDescription', 'Create the first event to start selling tickets.')"
-            :actions="[{ label: t('admin.create', 'New event'), icon: 'i-lucide-plus', onClick: create }]"
+        <UTable
+          v-model:sorting="sorting"
+          :data="rows"
+          :columns="columns"
+          :sorting-options="{ manualSorting: true }"
+          :ui="tableUi()"
+          @select="(_, row) => navigateTo(links.adminEvent(row.original.id))"
+        >
+          <template #empty>
+            <UEmpty
+              v-if="filtered"
+              variant="naked"
+              icon="i-lucide-search"
+              :title="t('admin.noMatches', 'No events match your search')"
+              :actions="[{ label: t('admin.clearFilters', 'Clear filters'), color: 'neutral', variant: 'outline', onClick: reset }]"
+            />
+            <UEmpty
+              v-else
+              variant="naked"
+              icon="i-lucide-calendar"
+              :title="t('admin.empty', 'No events yet')"
+              :description="t('admin.emptyDescription', 'Create the first event to start selling tickets.')"
+              :actions="[{ label: t('admin.create', 'New event'), icon: 'i-lucide-plus', onClick: () => actions.create() }]"
+            />
+          </template>
+        </UTable>
+        <template #footer>
+          <TablePagination
+            v-model:page="page"
+            v-model:page-size="pageSize"
+            :total="data?.total ?? 0"
           />
         </template>
-      </UTable>
-    </TableCard>
+      </TableCard>
+    </template>
   </div>
 </template>

package/dist/runtime/app/pages/event.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { eventsApi } from "../../utils/api";
 const hasMdc = typeof resolveComponent("MDC") !== "string";
 const t = useModuleT("events");
 const route = useRoute();
@@ -24,7 +25,7 @@ onMounted(async () => {
   if (payment.value !== "success" || !returnedTicket.value) return;
   paidState.value = "waiting";
   for (let attempt = 0; attempt < 20; attempt++) {
-    const ticket = await $fetch(`/api/events/tickets/${returnedTicket.value}`).catch(() => null);
+    const ticket = await $fetch(eventsApi.me.ticket(returnedTicket.value)).catch(() => null);
     if (ticket?.status === "paid") {
       paidState.value = "paid";
       await refresh();
@@ -115,7 +116,10 @@ defineOptions({ name: "EventDetailPage" });
         </div>
 
         <div class="grid gap-3 sm:grid-cols-2">
-          <div class="bg-elevated/50 ring-default flex items-start gap-3 rounded-lg p-4 ring">
+          <div
+            class="flex items-start gap-3 p-4"
+            :class="surfaceClass"
+          >
             <UIcon
               name="i-lucide-calendar"
               class="text-primary mt-0.5 size-5 shrink-0"
@@ -135,8 +139,8 @@ defineOptions({ name: "EventDetailPage" });
             :href="event.locationUrl || void 0"
             :target="event.locationUrl ? '_blank' : void 0"
             :rel="event.locationUrl ? 'noopener' : void 0"
-            class="bg-elevated/50 ring-default flex items-start gap-3 rounded-lg p-4 ring"
-            :class="event.locationUrl ? 'hover:bg-elevated transition' : ''"
+            class="flex items-start gap-3 p-4"
+            :class="[surfaceClass, event.locationUrl ? 'hover:bg-elevated transition' : '']"
           >
             <UIcon
               name="i-lucide-map-pin"

package/dist/runtime/app/pages/tickets.vue

@@ -1,14 +1,36 @@
 <script setup>
 defineOptions({ name: "EventTicketsPage" });
 const t = useModuleT("events");
-const { tickets, pay } = useMyTickets();
+const { tickets, loading, error, refresh, pay } = await useMyTickets();
 const links = useEventLinks();
 </script>
 
 <template>
   <div class="flex flex-col gap-4">
+    <PageHeading
+      :title="t('menu.tickets.label', 'Tickets')"
+      :description="t('menu.tickets.description', 'Your event tickets.')"
+    />
+    <div
+      v-if="loading"
+      class="grid gap-4 md:grid-cols-2"
+      aria-busy="true"
+    >
+      <SectionCard
+        v-for="index in 2"
+        :key="index"
+        loading
+      />
+    </div>
+    <UEmpty
+      v-else-if="error && !tickets.length"
+      icon="i-lucide-circle-alert"
+      :title="t('ticketsLoadFailed', 'Your tickets could not be loaded')"
+      :description="errorMessage(error, '')"
+      :actions="[{ label: t('tryAgain', 'Try again'), icon: 'i-lucide-rotate-ccw', color: 'neutral', variant: 'outline', onClick: () => refresh() }]"
+    />
     <UEmpty
-      v-if="!tickets.length"
+      v-else-if="!tickets.length"
       icon="i-lucide-ticket"
       :title="t('noTicketsTitle', 'No tickets yet')"
       :description="t('noTickets', 'You do not have any tickets yet.')"