qarpeo 0.0.0-alpha.10

package/dist/runtime/app/pages/devtools/mail.vue

@@ -0,0 +1,389 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui"
+import { computed, onMounted, onUnmounted, ref } from "vue"
+
+definePageMeta({ layout: false })
+
+const route = useRoute()
+
+const {
+  data: mailData,
+  status: mailStatus,
+  pending: mailPending,
+  execute: executeLoadMail,
+} = useFetch<any>("/_qarpeo/api/mail/inbox", {
+  immediate: false,
+  lazy: true,
+  default: () => ({ emails: [] }),
+})
+
+const mailLoading = computed(
+  () => mailPending.value || mailStatus.value === "idle" || mailStatus.value === "pending",
+)
+const mailEmails = computed(() => mailData.value?.emails || [])
+const sendingTest = ref(false)
+const clearingMail = ref(false)
+const mailSearch = ref("")
+const mailViewMode = ref<"html" | "text" | "json">("html")
+const isPolling = ref(false)
+let pollTimer: ReturnType<typeof setInterval> | null = null
+
+// selectedId is derived from the ?id= query param
+const selectedId = computed(() => (route.query.id as string) || null)
+
+const selectedMail = computed(() => mailEmails.value.find((e) => e.id === selectedId.value) || null)
+
+function fmtTime(time?: number | string) {
+  if (!time) return "—"
+  const d = new Date(time)
+  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+}
+
+function fmtFullDate(time?: number | string) {
+  if (!time) return "—"
+  return new Date(time).toLocaleString()
+}
+
+const filteredEmails = computed(() => {
+  if (!mailSearch.value.trim()) return mailEmails.value
+  const q = mailSearch.value.toLowerCase()
+  return mailEmails.value.filter(
+    (e) =>
+      e.subject?.toLowerCase().includes(q) ||
+      e.from?.toLowerCase().includes(q) ||
+      String(e.to).toLowerCase().includes(q),
+  )
+})
+
+const mailNavItems = computed<NavigationMenuItem[]>(() =>
+  filteredEmails.value.map((e) => ({
+    label: e.subject || "(No Subject)",
+    icon: selectedId.value === e.id ? "i-lucide-mail-open" : "i-lucide-mail",
+    value: e.id,
+    badge: {
+      label: fmtTime(e.timestamp || e.receivedAt),
+      size: "sm" as const,
+      color: "neutral" as const,
+      variant: "subtle" as const,
+    },
+    class: "text-xs",
+    to: { query: { ...route.query, id: e.id } },
+    active: route.query.id === e.id,
+  })),
+)
+
+async function loadMail() {
+  await executeLoadMail()
+}
+
+async function sendTestEmail() {
+  sendingTest.value = true
+  try {
+    await $fetch("/_qarpeo/api/mail/send-test", { method: "POST" })
+    await loadMail()
+    if (mailEmails.value.length > 0) {
+      const latest = mailEmails.value[mailEmails.value.length - 1]
+      await navigateTo({ query: { ...route.query, id: latest.id } })
+    }
+  } catch (err) {
+    console.error("Failed to send test email", err)
+  } finally {
+    sendingTest.value = false
+  }
+}
+
+async function clearMailbox() {
+  clearingMail.value = true
+  try {
+    await $fetch("/_qarpeo/api/mail/clear", { method: "POST" })
+    await navigateTo({ query: { ...route.query, id: undefined } })
+    await loadMail()
+  } finally {
+    clearingMail.value = false
+  }
+}
+
+function copyHtml() {
+  if (selectedMail.value?.html && typeof navigator !== "undefined") {
+    navigator.clipboard?.writeText(selectedMail.value.html)
+  }
+}
+
+function togglePolling() {
+  isPolling.value = !isPolling.value
+  if (isPolling.value) {
+    pollTimer = setInterval(() => {
+      executeLoadMail()
+    }, 3000)
+  } else {
+    if (pollTimer) {
+      clearInterval(pollTimer)
+      pollTimer = null
+    }
+  }
+}
+
+onMounted(() => {
+  loadMail()
+})
+
+onUnmounted(() => {
+  if (pollTimer) {
+    clearInterval(pollTimer)
+    pollTimer = null
+  }
+})
+</script>
+
+<template>
+  <!-- ── Panel 1: Email List ─────────────────────────────────────────── -->
+  <UDashboardPanel id="mail-list" :default-size="25" :min-size="20" :max-size="40" resizable>
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-mail" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">Dev Mailbox</span>
+            <span
+              v-if="isPolling"
+              class="w-2 h-2 rounded-full bg-success animate-pulse inline-block"
+              title="Live polling active (3s)"
+            />
+            <UBadge size="xs" color="neutral" variant="subtle">
+              {{ filteredEmails.length }}
+            </UBadge>
+          </div>
+        </template>
+        <template #right>
+          <div class="flex items-center gap-1">
+            <UButton
+              :icon="isPolling ? 'i-lucide-pause' : 'i-lucide-play'"
+              size="xs"
+              :color="isPolling ? 'success' : 'neutral'"
+              :variant="isPolling ? 'subtle' : 'ghost'"
+              :title="isPolling ? 'Pause live polling (3s)' : 'Start live polling (3s)'"
+              @click="togglePolling"
+            />
+            <UButton
+              icon="i-lucide-send"
+              size="xs"
+              color="primary"
+              variant="subtle"
+              title="Send test email"
+              :loading="sendingTest"
+              @click="sendTestEmail"
+            />
+            <UButton
+              icon="i-lucide-trash"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Clear mailbox"
+              :loading="clearingMail"
+              @click="clearMailbox"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh inbox"
+              :loading="mailLoading"
+              @click="loadMail"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+
+      <UDashboardToolbar>
+        <UInput
+          v-model="mailSearch"
+          icon="i-lucide-search"
+          placeholder="Search emails…"
+          class="w-full"
+        />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <!-- Loading Skeleton/State -->
+      <div v-if="mailLoading" class="p-3 space-y-2">
+        <div
+          v-for="i in 5"
+          :key="i"
+          class="h-8 rounded bg-muted/60 animate-pulse flex items-center justify-between px-3"
+        >
+          <div class="flex items-center gap-2">
+            <div class="h-3.5 w-3.5 rounded bg-muted/40"></div>
+            <div class="h-3 w-28 rounded bg-muted/40"></div>
+          </div>
+          <div class="h-3 w-10 rounded bg-muted/40"></div>
+        </div>
+      </div>
+
+      <template v-else>
+        <UNavigationMenu
+          v-model="selectedId"
+          :items="mailNavItems"
+          orientation="vertical"
+          variant="pill"
+        />
+
+        <div v-if="!filteredEmails.length" class="text-xs text-muted p-6 text-center space-y-3">
+          <div>No emails captured.</div>
+          <UButton
+            label="Send Test Email"
+            icon="i-lucide-send"
+            size="xs"
+            color="primary"
+            variant="subtle"
+            :loading="sendingTest"
+            @click="sendTestEmail"
+          />
+        </div>
+      </template>
+    </template>
+  </UDashboardPanel>
+
+  <!-- ── Panel 2: Email Content Viewer ────────────────────────────────── -->
+  <UDashboardPanel id="mail-viewer" class="hidden lg:flex flex-1">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div v-if="selectedMail" class="flex items-center gap-2 min-w-0">
+            <UIcon name="i-lucide-mail-open" class="w-4 h-4 text-primary shrink-0" />
+            <span class="font-bold text-sm text-highlighted truncate">{{
+              selectedMail.subject || "(No Subject)"
+            }}</span>
+          </div>
+          <span v-else class="text-sm font-semibold text-muted">Select an email</span>
+        </template>
+
+        <template #right>
+          <div v-if="selectedMail" class="flex items-center gap-2">
+            <!-- View Mode Tabs -->
+            <div class="flex items-center gap-1 bg-muted p-0.5 rounded border border-default">
+              <UButton
+                label="HTML"
+                size="xs"
+                :color="mailViewMode === 'html' ? 'primary' : 'neutral'"
+                :variant="mailViewMode === 'html' ? 'subtle' : 'ghost'"
+                @click="mailViewMode = 'html'"
+              />
+              <UButton
+                label="Text"
+                size="xs"
+                :color="mailViewMode === 'text' ? 'primary' : 'neutral'"
+                :variant="mailViewMode === 'text' ? 'subtle' : 'ghost'"
+                @click="mailViewMode = 'text'"
+              />
+              <UButton
+                label="JSON"
+                size="xs"
+                :color="mailViewMode === 'json' ? 'primary' : 'neutral'"
+                :variant="mailViewMode === 'json' ? 'subtle' : 'ghost'"
+                @click="mailViewMode = 'json'"
+              />
+            </div>
+
+            <UButton
+              icon="i-lucide-copy"
+              size="xs"
+              color="neutral"
+              variant="subtle"
+              title="Copy HTML"
+              @click="copyHtml"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <div v-if="selectedMail" class="flex flex-col h-full p-6 space-y-4 overflow-y-auto">
+        <!-- Metadata Header Card -->
+        <UCard>
+          <div class="space-y-3">
+            <div class="flex items-start justify-between gap-4">
+              <h2 class="font-bold text-base text-highlighted">
+                {{ selectedMail.subject || "(No Subject)" }}
+              </h2>
+              <UBadge
+                v-if="selectedMail.template"
+                size="xs"
+                color="primary"
+                variant="subtle"
+                class="font-mono"
+              >
+                template: {{ selectedMail.template }}
+              </UBadge>
+            </div>
+
+            <div
+              class="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs font-mono pt-2 border-t border-default text-muted"
+            >
+              <div>
+                <span class="text-muted/70">From:</span>
+                <span class="text-default font-semibold ml-1.5">{{ selectedMail.from }}</span>
+              </div>
+              <div>
+                <span class="text-muted/70">To:</span>
+                <span class="text-default font-semibold ml-1.5">{{
+                  Array.isArray(selectedMail.to) ? selectedMail.to.join(", ") : selectedMail.to
+                }}</span>
+              </div>
+              <div>
+                <span class="text-muted/70">Received:</span>
+                <span class="text-default ml-1.5">{{
+                  fmtFullDate(selectedMail.timestamp || selectedMail.receivedAt)
+                }}</span>
+              </div>
+            </div>
+          </div>
+        </UCard>
+
+        <!-- Message Body -->
+        <UCard class="flex-1 flex flex-col min-h-0 overflow-hidden">
+          <template #header>
+            <div class="flex items-center justify-between">
+              <span class="text-xs font-semibold text-muted flex items-center gap-1.5">
+                <UIcon name="i-lucide-file-text" class="w-3.5 h-3.5 text-primary" />
+                Message Body ({{ mailViewMode.toUpperCase() }})
+              </span>
+              <span class="text-[11px] font-mono text-muted">id: {{ selectedMail.id }}</span>
+            </div>
+          </template>
+
+          <div class="flex-1 overflow-auto min-h-[350px]">
+            <!-- HTML Mode -->
+            <div
+              v-if="mailViewMode === 'html'"
+              class="h-full bg-white text-slate-900 rounded-md p-6 overflow-auto border border-default shadow-inner"
+              v-html="selectedMail.html || '<p class=\'text-muted text-sm\'>No HTML content.</p>'"
+            ></div>
+
+            <!-- Plain Text Mode -->
+            <pre
+              v-else-if="mailViewMode === 'text'"
+              class="font-mono text-xs text-default bg-muted/30 p-4 rounded-md border border-default whitespace-pre-wrap overflow-auto h-full"
+              >{{ selectedMail.text || selectedMail.body || "(Empty text content)" }}</pre>
+
+            <!-- Raw JSON Mode -->
+            <pre
+              v-else
+              class="font-mono text-xs text-default bg-muted/40 p-4 rounded-md border border-default overflow-auto h-full whitespace-pre-wrap break-all"
+              >{{ JSON.stringify(selectedMail, null, 2) }}</pre>
+          </div>
+        </UCard>
+      </div>
+
+      <div
+        v-else
+        class="flex-1 flex flex-col items-center justify-center text-muted text-xs p-12 text-center"
+      >
+        <UIcon name="i-lucide-mail" class="w-8 h-8 mb-2 opacity-50 text-muted" />
+        Select an email from the list to view its contents and headers.
+      </div>
+    </template>
+  </UDashboardPanel>
+</template>