@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/inbox/index.stx

@@ -0,0 +1,452 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Mail - Your Inbox')
+<div class="bg-white dark:bg-neutral-800">
+  <div class="flex h-screen">
+    <EmailSidebar
+      :activeFolder="activeFolder"
+      :folders="folders"
+      :unreadCounts="unreadCounts"
+      @update:active-folder="handleFolderChange"
+      @compose="handleCompose"
+    />
+
+    <div class="flex overflow-hidden flex-1 flex-col">
+      <div class="px-4 py-2 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
+        <div class="flex items-center justify-between">
+          <div class="font-medium text-gray-900 text-xl dark:text-white">Inbox</div>
+          <div class="flex items-center space-x-1">
+            <div class="flex bg-gray-100 dark:bg-neutral-600 rounded-md">
+              <button class="px-4 py-2 font-medium text-gray-700 text-sm dark:text-white bg-gray-200 dark:bg-neutral-500 rounded-md">All mail</button>
+              <button class="px-4 py-2 font-medium text-gray-700 text-sm dark:text-white">Unread</button>
+            </div>
+            <button class="p-2 text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-white"><i class="text-lg i-hugeicons-waste"></i></button>
+            <button class="p-2 text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-white"><i class="text-lg i-hugeicons-archive"></i></button>
+            <button class="p-2 text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-white"><i class="text-lg i-hugeicons-spam"></i></button>
+            <div class="flex items-center ml-2">
+              <button class="p-2 text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-white"><i class="text-lg i-hugeicons-clock-circle"></i></button>
+              <button class="p-2 text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-white"><i class="text-lg i-hugeicons-arrow-left-01"></i></button>
+              <button class="p-2 text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-white"><i class="text-lg i-hugeicons-arrow-right-01"></i></button>
+              <button class="p-2 text-gray-500 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-white"><i class="text-lg i-hugeicons-more-vertical-circle"></i></button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex overflow-hidden flex-1">
+        <div :show="!selectedEmail() && !isComposing()" class="flex flex-col w-full md:w-1/3 lg:w-2/5 border-gray-200 border-r dark:border-neutral-600">
+          <div class="px-4 py-2 bg-white dark:bg-neutral-700 border-b border-gray-200 dark:border-neutral-600">
+            <div class="relative">
+              <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                <i class="text-gray-400 text-lg i-hugeicons-search-01"></i>
+              </div>
+              <input x-model="searchQuery" type="text" placeholder="Search" class="block placeholder-gray-500 dark:placeholder-gray-400 pl-10 pr-3 py-2 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" />
+            </div>
+          </div>
+
+          <div class="overflow-y-auto flex-1">
+            <div :if="isLoading()" class="p-8 text-center text-gray-500 dark:text-neutral-400">Loading…</div>
+            <div :if="loadError() && !isLoading()" class="p-8 text-center text-red-500">{{ loadError() }}</div>
+            <ul :if="!isLoading() && !loadError()" class="divide-gray-200 divide-y dark:divide-neutral-600">
+              <template :for="email in filteredEmails">
+                <li @click="openEmail(email)" class="{{ emailRowClass(email) }}">
+                  <div class="px-4 py-3">
+                    <div class="flex items-center justify-between">
+                      <p class="font-medium text-gray-900 text-sm dark:text-white">{{ email.from }}</p>
+                      <p class="text-gray-500 text-xs dark:text-neutral-400">{{ formatDate(email.date) }}</p>
+                    </div>
+                    <div class="mt-1">
+                      <p class="text-gray-900 text-sm dark:text-white">{{ email.subject }}</p>
+                      <p class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ email.preview }}</p>
+                    </div>
+                    <div :if="email.labels && email.labels.length > 0" class="flex flex-wrap gap-1 mt-2">
+                      <template :for="label in email.labels">
+                        <span class="{{ labelClass(label) }}">{{ label }}</span>
+                      </template>
+                    </div>
+                  </div>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+
+        <div :show="selectedEmail() !== null" class="flex flex-col w-full md:w-2/3 lg:w-3/5 bg-white dark:bg-neutral-700">
+          <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-neutral-600">
+            <div class="flex items-center space-x-2">
+              <button @click="closeEmail()" class="p-1 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded"><i class="text-lg i-hugeicons-arrow-left-02"></i></button>
+              <h2 class="font-medium text-gray-900 text-lg dark:text-white">{{ selectedEmail()?.subject }}</h2>
+            </div>
+            <div class="flex space-x-2">
+              <button @click="selectedEmailId() && toggleStar(selectedEmailId())" class="p-1 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded">
+                <span :show="selectedEmail()?.starred" class="text-lg text-yellow-400">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z"/></svg>
+                </span>
+                <i :show="!selectedEmail()?.starred" class="text-gray-500 text-lg dark:text-neutral-400 i-hugeicons-star"></i>
+              </button>
+              <button class="p-1 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded"><i class="text-lg i-hugeicons-inbox"></i></button>
+              <button class="p-1 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded"><i class="text-lg i-hugeicons-waste"></i></button>
+            </div>
+          </div>
+
+          <div class="px-4 py-3 border-b border-gray-200 dark:border-neutral-600">
+            <div class="flex items-start justify-between">
+              <div class="flex items-center">
+                <div class="flex items-center justify-center h-10 w-10 font-medium text-gray-700 dark:text-white bg-gray-200 dark:bg-neutral-500 rounded-full">{{ selectedEmail()?.from?.charAt(0) }}</div>
+                <div class="ml-3">
+                  <p class="font-medium text-gray-900 text-sm dark:text-white">{{ selectedEmail()?.from }}</p>
+                  <p class="text-gray-500 text-xs dark:text-neutral-400">{{ selectedEmail()?.email }}</p>
+                </div>
+              </div>
+              <div class="text-gray-500 text-xs dark:text-neutral-400">{{ selectedEmailDate() }}</div>
+            </div>
+            <div class="mt-2">
+              <p class="font-medium text-base text-gray-900 dark:text-white">{{ selectedEmail()?.subject }}</p>
+            </div>
+          </div>
+
+          <div class="overflow-y-auto flex-1 p-4 text-gray-900 dark:text-white">
+            <div :if="selectedEmail()?.body" innerHTML="{{ selectedEmail()?.body }}" class="max-w-none prose dark:prose-invert"></div>
+            <div :if="selectedEmail()?.attachment" class="mt-4 p-3 border border-gray-200 rounded dark:border-neutral-600">
+              <div class="flex items-center">
+                <i class="text-gray-500 text-xl dark:text-neutral-400 i-hugeicons-file-01"></i>
+                <div class="ml-3">
+                  <p class="font-medium text-gray-900 text-sm dark:text-white">Document.pdf</p>
+                  <p class="text-gray-500 text-xs dark:text-neutral-400">1.2 MB</p>
+                </div>
+                <button class="ml-auto p-1 text-blue-700 dark:text-blue-100 bg-blue-100 dark:bg-blue-900 hover:bg-blue-200 dark:hover:bg-blue-800 rounded"><i class="text-lg i-hugeicons-download"></i></button>
+              </div>
+            </div>
+          </div>
+
+          <div class="p-4 bg-white dark:bg-neutral-700 border-gray-200 border-t dark:border-neutral-600">
+            <div class="flex items-center">
+              <textarea x-model="replyText" placeholder="Reply..." class="flex-1 p-2 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-600 border border-gray-300 rounded-md dark:border-neutral-600 focus:outline-none focus:ring-1 focus:ring-blue-500" rows="3"></textarea>
+            </div>
+            <div class="flex justify-between mt-2">
+              <div class="flex items-center">
+                <label class="inline-flex items-center text-gray-500 text-sm dark:text-neutral-400">
+                  <input type="checkbox" class="h-4 w-4 text-blue-600 bg-white dark:bg-neutral-600 border-gray-300 rounded dark:border-neutral-500 form-checkbox" />
+                  <span class="ml-2">Mute this thread</span>
+                </label>
+              </div>
+              <button @click="sendReply()" class="px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">Send</button>
+            </div>
+          </div>
+        </div>
+
+        <div :show="!selectedEmail() && !isComposing()" class="hidden md:flex flex-col items-center justify-center p-8 md:w-2/3 lg:w-3/5 bg-white dark:bg-neutral-700">
+          <div class="text-center">
+            <div class="flex items-center justify-center mb-6 mx-auto h-24 w-24 bg-blue-100 dark:bg-blue-900 rounded-full">
+              <i class="text-5xl text-blue-600 dark:text-blue-400 i-hugeicons-mail-02"></i>
+            </div>
+            <h3 class="mb-2 font-medium text-gray-900 text-xl dark:text-white">No message selected</h3>
+            <p class="mb-6 max-w-md text-gray-500 dark:text-neutral-400">Select an email from your inbox to view its contents here, or start a new conversation by clicking the compose button.</p>
+            <button @click="handleCompose()" class="inline-flex items-center px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">
+              <i class="mr-2 text-lg i-hugeicons-plus-sign"></i>
+              Compose New Email
+            </button>
+          </div>
+        </div>
+
+        <div :show="isComposing()" class="flex flex-col w-full md:w-2/3 lg:w-3/5 bg-white dark:bg-neutral-700">
+          <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-neutral-600">
+            <h2 class="font-medium text-gray-900 text-lg dark:text-white">New Message</h2>
+            <button @click="cancelCompose()" class="p-1 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded"><i class="text-lg i-hugeicons-cancel-circle"></i></button>
+          </div>
+
+          <div class="overflow-y-auto flex-1 p-4">
+            <div class="space-y-4">
+              <div>
+                <label for="to" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">To</label>
+                <input id="to" x-model="newEmailTo" type="text" placeholder="recipient@example.com" class="block mt-1 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+              </div>
+              <div>
+                <label for="subject" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Subject</label>
+                <input id="subject" x-model="newEmailSubject" type="text" placeholder="Enter email subject" class="block mt-1 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm" />
+              </div>
+              <div>
+                <label for="body" class="block font-medium text-gray-700 text-sm dark:text-neutral-300">Message</label>
+                <textarea id="body" x-model="newEmailBody" rows="15" placeholder="Write your message here..." class="block mt-1 w-full text-gray-900 sm:text-sm dark:text-neutral-100 bg-white dark:bg-neutral-600 border-gray-300 rounded-md dark:border-neutral-600 focus:border-blue-500 focus:ring-blue-500 shadow-sm"></textarea>
+              </div>
+            </div>
+          </div>
+
+          <div class="flex justify-between p-4 border-gray-200 border-t dark:border-neutral-600">
+            <div class="flex space-x-2">
+              <button class="p-2 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded"><i class="text-lg i-hugeicons-attachment-01"></i></button>
+              <button class="p-2 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded"><i class="text-lg i-hugeicons-image-01"></i></button>
+              <button class="p-2 text-gray-500 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-600 rounded"><i class="text-lg i-hugeicons-smile"></i></button>
+            </div>
+            <div>
+              <button @click="sendEmail()" class="px-4 py-2 font-medium text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md">Send</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+// Mail folder list — moved out of the former `<script server>` block
+// (stacksjs/stacks#1838). `EmailSidebar` resolves through stx's
+// component auto-discovery (it lives at
+// `resources/components/Dashboard/Email/EmailSidebar.stx`).
+const folders = [
+  { id: 'inbox', name: 'Inbox', icon: 'inbox' },
+  { id: 'starred', name: 'Starred', icon: 'star' },
+  { id: 'sent', name: 'Sent', icon: 'send' },
+  { id: 'drafts', name: 'Drafts', icon: 'drafts' },
+  { id: 'archive', name: 'Archive', icon: 'archive' },
+  { id: 'spam', name: 'Spam', icon: 'spam' },
+  { id: 'trash', name: 'Trash', icon: 'waste' },
+]
+
+interface Email {
+  id: string
+  from: string
+  email: string
+  subject: string
+  preview: string
+  body: string
+  date: string
+  read: boolean
+  starred: boolean
+  folder: string
+  attachment: boolean
+  labels?: string[]
+}
+
+const emails = state<Email[]>([])
+const activeFolder = state('inbox')
+const selectedEmailId = state<string | null>(null)
+const searchQuery = state('')
+const isComposing = state(false)
+const isLoading = state(false)
+const loadError = state<string | null>(null)
+const replyText = state('')
+const newEmailTo = state('')
+const newEmailSubject = state('')
+const newEmailBody = state('')
+
+const selectedEmail = derived(() => emails().find(e => e.id === selectedEmailId()) ?? null)
+const selectedEmailDate = derived(() => {
+  const email = selectedEmail()
+  return email?.date ? new Date(email.date).toLocaleString() : ''
+})
+
+const filteredEmails = derived(() => {
+  let filtered = emails().filter((email) => {
+    if (activeFolder() === 'starred')
+      return email.starred
+    return email.folder === activeFolder()
+  })
+  const q = searchQuery().toLowerCase()
+  if (q) {
+    filtered = filtered.filter(email =>
+      email.subject.toLowerCase().includes(q)
+      || email.from.toLowerCase().includes(q)
+      || email.preview.toLowerCase().includes(q),
+    )
+  }
+  return filtered.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+})
+
+const unreadCounts = derived(() => {
+  const counts: Record<string, number> = {}
+  for (const folder of ['inbox', 'starred', 'sent', 'drafts', 'archive', 'spam', 'trash']) {
+    if (folder === 'starred')
+      counts[folder] = emails().filter(e => e.starred && !e.read).length
+    else
+      counts[folder] = emails().filter(e => e.folder === folder && !e.read).length
+  }
+  return counts
+})
+
+function parseSender(from: string): { name: string; email: string } {
+  const match = from.match(/^"?([^"<]+)"?\s*<([^>]+)>$/)
+  if (match) {
+    return { name: match[1].trim(), email: match[2].trim() }
+  }
+  return { name: from, email: from }
+}
+
+function mapInboxEmail(item: any): Email {
+  const sender = parseSender(item.from || '')
+  return {
+    id: item.messageId,
+    from: sender.name || sender.email,
+    email: sender.email,
+    subject: item.subject || '(no subject)',
+    preview: item.preview || '',
+    body: '',
+    date: item.date,
+    read: item.read === true,
+    starred: false,
+    folder: 'inbox',
+    attachment: item.hasAttachments === true,
+    labels: [],
+  }
+}
+
+async function loadInbox() {
+  isLoading.set(true)
+  loadError.set(null)
+  try {
+    const res = await fetch('/api/dashboard/email/inbox', {
+      headers: { accept: 'application/json' },
+    })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    const data = await res.json()
+    const mapped = (data.emails || []).map(mapInboxEmail)
+    emails.set(mapped)
+  }
+  catch (e) {
+    loadError.set(e instanceof Error ? e.message : String(e))
+    emails.set([])
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+async function loadEmailBody(id: string) {
+  try {
+    const res = await fetch(`/api/dashboard/email/inbox/${encodeURIComponent(id)}`, {
+      headers: { accept: 'application/json' },
+    })
+    if (!res.ok) return
+    const data = await res.json()
+    const body = data.html || data.text || ''
+    emails.set(emails().map(e => e.id === id ? { ...e, body } : e))
+  }
+  catch (e) {
+    console.error('Failed to load email body:', e)
+  }
+}
+
+async function markAsRead(id: string) {
+  try {
+    const res = await fetch('/api/dashboard/email/read', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ messageId: id }),
+    })
+    if (!res.ok) throw new Error(`HTTP ${res.status}`)
+    emails.set(emails().map(e => e.id === id ? { ...e, read: true } : e))
+  }
+  catch (e) {
+    console.error('Failed to mark email as read:', e)
+  }
+}
+
+function formatDate(dateString: string) {
+  const date = new Date(dateString)
+  const now = new Date()
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const yesterday = new Date(today)
+  yesterday.setDate(yesterday.getDate() - 1)
+  if (date >= today)
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+  if (date >= yesterday)
+    return 'Yesterday'
+  return date.toLocaleDateString([], { month: 'short', day: 'numeric' })
+}
+
+function emailRowClass(email: Email) {
+  const base = 'hover:bg-gray-50 dark:hover:bg-neutral-600 cursor-pointer'
+  return email.read
+    ? `${base} bg-white dark:bg-neutral-700`
+    : `${base} bg-blue-50 dark:bg-neutral-700 font-semibold`
+}
+
+function labelClass(label: string) {
+  const base = 'inline-flex items-center px-2 py-0.5 font-medium text-xs rounded'
+  switch (label) {
+    case 'important': return `${base} bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200`
+    case 'meeting': return `${base} bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200`
+    case 'personal': return `${base} bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200`
+    case 'work': return `${base} bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200`
+    case 'budget': return `${base} bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200`
+    default: return `${base} bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200`
+  }
+}
+
+function openEmail(email: Email) {
+  selectedEmailId.set(email.id)
+  void loadEmailBody(email.id)
+  if (!email.read)
+    void markAsRead(email.id)
+}
+
+function closeEmail() {
+  selectedEmailId.set(null)
+}
+
+function toggleRead(id: string) {
+  const email = emails().find(e => e.id === id)
+  if (!email) return
+  if (email.read) {
+    emails.set(emails().map(e => e.id === id ? { ...e, read: false } : e))
+  }
+  else {
+    void markAsRead(id)
+  }
+}
+
+function toggleStar(id: string) {
+  emails.set(emails().map(e => e.id === id ? { ...e, starred: !e.starred } : e))
+}
+
+function handleFolderChange(folder: string) {
+  activeFolder.set(folder)
+}
+
+function handleCompose() {
+  isComposing.set(true)
+  newEmailTo.set('')
+  newEmailSubject.set('')
+  newEmailBody.set('')
+}
+
+function cancelCompose() {
+  isComposing.set(false)
+}
+
+function sendEmail() {
+  emails.set([
+    ...emails(),
+    {
+      id: `sent-${Date.now()}`,
+      from: 'Me',
+      email: 'me@stacksjs.com',
+      subject: newEmailSubject(),
+      preview: newEmailBody().substring(0, 100),
+      body: newEmailBody(),
+      date: new Date().toISOString(),
+      read: true,
+      starred: false,
+      folder: 'sent',
+      attachment: false,
+    },
+  ])
+  isComposing.set(false)
+}
+
+function sendReply() {
+  replyText.set('')
+}
+
+onMount(async () => {
+  const route = useRoute()
+  if (route.query.folder && typeof route.query.folder === 'string')
+    activeFolder.set(route.query.folder)
+  if (route.query.compose === 'true')
+    isComposing.set(true)
+  await loadInbox()
+})
+</script>
+
+@endsection