Add event firmware details sheet to the event flasher

claude · claude · commit 8f4b0ab978e2 · 2026-07-29T21:03:50.000Z
Adds an "Event Details" button to the main button row (event mode only, e.g. the DEF CON flasher) that opens a dismissible sheet showing the event firmware's details: event name, dates, location and time zone, firmware build and version, theme name/tagline/palette, and official event links. The sheet follows the existing pure-Vue dialog pattern (AlphanautFeedback) and closes via the X button, backdrop click, or Escape with focus restored to the trigger. The full manifest edition (dates, location, links, firmware version) was previously discarded after manifestEditionToEventMode(); it is now kept in a new useEventEdition composable, set only alongside setActiveEventMode so the displayed details never diverge from the applied event mode. Event dates are date-only strings, so a small formatEventDateRange util parses them as local dates (avoiding the UTC off-by-one) and is covered by colocated Vitest tests. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01WWbctVTeY3iySKcELxhcR5
diff --git a/app.vue b/app.vue
@@ -150,6 +150,7 @@
           {{ $t('buttons.contribute') }}
           <Github class="w-4 h-4 shrink-0" />
         </a>
+        <EventDetails v-if="!serialMonitorStore.isConnected" />
         <LanguagePicker v-if="!serialMonitorStore.isConnected" />
         <ThemeSwitcher v-if="!serialMonitorStore.isConnected" />
       </div>
diff --git a/components/EventDetails.vue b/components/EventDetails.vue
@@ -0,0 +1,220 @@
+<template>
+  <button
+    v-if="eventMode.enabled"
+    ref="triggerButton"
+    type="button"
+    class="btn-secondary"
+    @click="openPanel"
+  >
+    {{ $t('event.details_button') }} <Info class="h-4 w-4 shrink-0" />
+  </button>
+
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-[65] modal-backdrop backdrop-blur-sm px-4 py-8 md:py-12"
+      @click.self="close"
+    >
+      <div class="flex h-full w-full items-start justify-center">
+        <div class="relative w-full max-w-lg">
+          <div
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="event-details-title"
+            class="modal-content relative flex max-h-[90vh] flex-col overflow-hidden rounded-2xl text-theme shadow-2xl"
+          >
+            <!-- Header -->
+            <div class="flex items-center justify-between border-b border-[var(--border-default)] p-4">
+              <h3
+                id="event-details-title"
+                class="flex items-center gap-2 text-lg font-semibold text-theme"
+              >
+                <Info class="h-5 w-5 text-meshtastic" />
+                {{ $t('event.details_title') }}
+              </h3>
+              <button
+                ref="closeButton"
+                type="button"
+                class="btn-icon focus:outline-none focus-visible:ring-2 focus-visible:ring-meshtastic"
+                :aria-label="$t('actions.close_dialog')"
+                @click="close"
+              >
+                <X class="h-4 w-4" />
+              </button>
+            </div>
+
+            <!-- Body -->
+            <div class="flex-1 space-y-4 overflow-y-auto p-4">
+              <!-- Event -->
+              <div class="rounded-lg border border-theme bg-surface-primary p-3 text-sm">
+                <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-theme-muted">
+                  {{ $t('event.section_event') }}
+                </p>
+                <dl class="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1">
+                  <dt class="text-theme-muted">
+                    {{ $t('event.label_name') }}
+                  </dt>
+                  <dd>{{ eventMode.eventName }}</dd>
+                  <template v-if="dateRange">
+                    <dt class="text-theme-muted">
+                      {{ $t('event.label_dates') }}
+                    </dt>
+                    <dd>{{ dateRange }}</dd>
+                  </template>
+                  <template v-if="edition?.location">
+                    <dt class="text-theme-muted">
+                      {{ $t('event.label_location') }}
+                    </dt>
+                    <dd>{{ edition.location }}</dd>
+                  </template>
+                  <template v-if="edition?.timeZone">
+                    <dt class="text-theme-muted">
+                      {{ $t('event.label_timezone') }}
+                    </dt>
+                    <dd>{{ edition.timeZone }}</dd>
+                  </template>
+                </dl>
+                <p
+                  v-if="edition?.welcomeMessage"
+                  class="mt-2 text-theme-muted"
+                >
+                  {{ edition.welcomeMessage }}
+                </p>
+              </div>
+
+              <!-- Firmware -->
+              <div
+                v-if="eventMode.firmware.title || firmwareVersion"
+                class="rounded-lg border border-theme bg-surface-primary p-3 text-sm"
+              >
+                <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-theme-muted">
+                  {{ $t('event.section_firmware') }}
+                </p>
+                <dl class="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1">
+                  <template v-if="eventMode.firmware.title">
+                    <dt class="text-theme-muted">
+                      {{ $t('event.label_build') }}
+                    </dt>
+                    <dd>{{ eventMode.firmware.title }}</dd>
+                  </template>
+                  <template v-if="firmwareVersion">
+                    <dt class="text-theme-muted">
+                      {{ $t('event.label_version') }}
+                    </dt>
+                    <dd class="break-all font-mono text-theme-accent">
+                      {{ firmwareVersion }}
+                    </dd>
+                  </template>
+                </dl>
+              </div>
+
+              <!-- Theme -->
+              <div
+                v-if="eventMode.theme"
+                class="rounded-lg border border-theme bg-surface-primary p-3 text-sm"
+              >
+                <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-theme-muted">
+                  {{ $t('event.section_theme') }}
+                </p>
+                <dl class="grid grid-cols-[auto,1fr] gap-x-3 gap-y-1">
+                  <template v-if="eventMode.theme.name">
+                    <dt class="text-theme-muted">
+                      {{ $t('event.label_theme_name') }}
+                    </dt>
+                    <dd>{{ eventMode.theme.name }}</dd>
+                  </template>
+                  <template v-if="eventMode.theme.tagline || eventMode.tagline">
+                    <dt class="text-theme-muted">
+                      {{ $t('event.label_tagline') }}
+                    </dt>
+                    <dd>{{ eventMode.theme.tagline || eventMode.tagline }}</dd>
+                  </template>
+                  <template v-if="eventMode.theme.palette?.length">
+                    <dt class="text-theme-muted">
+                      {{ $t('event.label_palette') }}
+                    </dt>
+                    <dd class="flex flex-wrap gap-1.5">
+                      <span
+                        v-for="color in eventMode.theme.palette"
+                        :key="color"
+                        class="h-5 w-5 rounded border border-theme"
+                        :style="{ backgroundColor: color }"
+                        :title="color"
+                      />
+                    </dd>
+                  </template>
+                </dl>
+              </div>
+
+              <!-- Links -->
+              <div
+                v-if="edition?.links?.length"
+                class="rounded-lg border border-theme bg-surface-primary p-3 text-sm"
+              >
+                <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-theme-muted">
+                  {{ $t('event.section_links') }}
+                </p>
+                <ul class="space-y-1">
+                  <li
+                    v-for="link in edition.links"
+                    :key="link.url"
+                  >
+                    <a
+                      :href="link.url"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex items-center gap-1.5 text-meshtastic underline underline-offset-2"
+                    >
+                      {{ link.label }}
+                      <ExternalLink class="h-3.5 w-3.5 shrink-0" />
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch } from 'vue'
+import { onKeyStroke } from '@vueuse/core'
+import { ExternalLink, Info, X } from 'lucide-vue-next'
+import { useI18n } from 'vue-i18n'
+import { useSerialMonitorStore } from '~/stores/serialMonitorStore'
+
+const { eventMode } = useEventMode()
+const edition = useEventEdition()
+const serialMonitorStore = useSerialMonitorStore()
+const { locale } = useI18n()
+
+const open = ref(false)
+const triggerButton = ref<HTMLButtonElement | null>(null)
+const closeButton = ref<HTMLButtonElement | null>(null)
+
+const dateRange = computed(() => formatEventDateRange(edition.value?.eventStart, edition.value?.eventEnd, locale.value))
+const firmwareVersion = computed(() => edition.value?.firmware?.version || eventMode.value.firmware.id)
+
+function openPanel() {
+  open.value = true
+  nextTick(() => closeButton.value?.focus())
+}
+
+function close() {
+  open.value = false
+  nextTick(() => triggerButton.value?.focus())
+}
+
+onKeyStroke('Escape', () => {
+  if (open.value) close()
+})
+
+// The whole button row (including our trigger) hides while the serial monitor
+// is connected, so drop the sheet too instead of leaving it orphaned.
+watch(() => serialMonitorStore.isConnected, (connected) => {
+  if (connected) open.value = false
+})
+</script>
diff --git a/composables/useEventEdition.ts b/composables/useEventEdition.ts
@@ -0,0 +1,15 @@
+import { ref } from 'vue'
+import type { EventFirmwareEdition } from '~/types/eventFirmware'
+
+// The full manifest edition resolved by plugins/eventMode.client.ts. The
+// eventMode singleton (types/resources.ts) only carries the subset needed to
+// drive the flasher, so the edition's extra detail (dates, location, links,
+// firmware version) is kept here for display. Null when no manifest edition is
+// active (non-event host, or a static fallback event like Hamcation).
+const activeEventEdition = ref<EventFirmwareEdition | null>(null)
+
+export function setActiveEventEdition(edition: EventFirmwareEdition): void {
+  activeEventEdition.value = edition
+}
+
+export const useEventEdition = () => activeEventEdition
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -127,6 +127,23 @@
     "meshtastic_docs": "Meshtastic Docs",
     "contribute": "Contribute on GitHub"
   },
+  "event": {
+    "details_button": "Event Details",
+    "details_title": "Event Firmware Details",
+    "section_event": "Event",
+    "section_firmware": "Firmware",
+    "section_theme": "Theme",
+    "section_links": "Links",
+    "label_name": "Name",
+    "label_dates": "Dates",
+    "label_location": "Location",
+    "label_timezone": "Time zone",
+    "label_build": "Build",
+    "label_version": "Version",
+    "label_theme_name": "Theme",
+    "label_tagline": "Tagline",
+    "label_palette": "Palette"
+  },
   "serial": {
     "instructions": "If the disconnect process is taking too long, you can manually unplug the device.",
     "disconnect": "Disconnect",
diff --git a/plugins/eventMode.client.ts b/plugins/eventMode.client.ts
@@ -1,6 +1,7 @@
 import { fetchApiManifest, fetchBundledManifest, hostMatches, isFirmwareDowngrade, manifestEditionToEventMode, resolveActiveEdition, applyEventTheme } from '~/utils/eventManifest'
 import type { EventFirmwareResponse } from '~/types/eventFirmware'
 import { eventMode, setActiveEventMode, staticEventModes } from '~/types/resources'
+import { setActiveEventEdition } from '~/composables/useEventEdition'
 
 // Resolve the active event edition for the current host. ssr:false guarantees
 // window is available, and Nuxt awaits async plugins — so we gate first paint
@@ -25,6 +26,9 @@ export default defineNuxtPlugin(async () => {
       return true
     }
     setActiveEventMode(next)
+    // Keep the full edition (dates, location, links, firmware version) for
+    // display — set only alongside setActiveEventMode so the two never diverge.
+    setActiveEventEdition(edition)
     applyEventTheme(edition.theme)
     return true
   }
diff --git a/utils/eventDates.test.ts b/utils/eventDates.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import { formatEventDateRange } from './eventDates'
+
+describe('formatEventDateRange', () => {
+  it('formats a start/end range', () => {
+    expect(formatEventDateRange('2026-08-06', '2026-08-09')).toBe('Aug 6, 2026 – Aug 9, 2026')
+  })
+
+  it('formats a start-only date', () => {
+    expect(formatEventDateRange('2026-08-06', null)).toBe('Aug 6, 2026')
+  })
+
+  it('collapses a same-day range to a single date', () => {
+    expect(formatEventDateRange('2026-08-06', '2026-08-06')).toBe('Aug 6, 2026')
+  })
+
+  it('returns an empty string without a valid start date', () => {
+    expect(formatEventDateRange(null, '2026-08-09')).toBe('')
+    expect(formatEventDateRange(undefined)).toBe('')
+    expect(formatEventDateRange('', '')).toBe('')
+    expect(formatEventDateRange('not-a-date')).toBe('')
+    expect(formatEventDateRange('2026-8-6')).toBe('')
+  })
+
+  it('keeps the calendar day regardless of the local time zone', () => {
+    // A UTC-midnight parse would render Aug 6 as Aug 5 anywhere west of UTC.
+    expect(formatEventDateRange('2026-08-06')).toContain('6')
+  })
+
+  it('respects the requested locale', () => {
+    expect(formatEventDateRange('2026-08-06', '2026-08-09', 'de')).toContain('Aug')
+  })
+})
diff --git a/utils/eventDates.ts b/utils/eventDates.ts
@@ -0,0 +1,21 @@
+// Event dates in the eventFirmware manifest are date-only strings
+// ("2026-08-06"). Parsing those with `new Date(str)` yields UTC midnight,
+// which renders as the previous day in negative-offset time zones — so parse
+// the parts explicitly into a local Date instead.
+function parseDateOnly(value?: string | null): Date | null {
+  if (!value) return null
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value.trim())
+  if (!match) return null
+  const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]))
+  return Number.isNaN(date.getTime()) ? null : date
+}
+
+export function formatEventDateRange(start?: string | null, end?: string | null, locale = 'en'): string {
+  const startDate = parseDateOnly(start)
+  if (!startDate) return ''
+  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'short', day: 'numeric' }
+  const startText = startDate.toLocaleDateString(locale, options)
+  const endDate = parseDateOnly(end)
+  if (!endDate || endDate.getTime() === startDate.getTime()) return startText
+  return `${startText} – ${endDate.toLocaleDateString(locale, options)}`
+}
