Rodrigo Rodriguez (Pragmatismo)
2dca1664dd
- Database migrations run automatically on startup - New QUICK_START.md with usage examples and troubleshooting - Better handling of already-running services
64 lines
2.7 KiB
HTML
64 lines
2.7 KiB
HTML
<div class="mail-layout" x-data="mailApp()" x-cloak>
|
|
<div class="panel mail-sidebar">
|
|
<div style="padding: 1rem; border-bottom: 1px solid #334155;">
|
|
<button style="width: 100%; padding: 0.75rem; background: #3b82f6; color: white; border: none; border-radius: 0.5rem; cursor: pointer; font-weight: 600;">
|
|
✏ Compose
|
|
</button>
|
|
</div>
|
|
<template x-for="folder in folders" :key="folder.name">
|
|
<div class="nav-item"
|
|
:class="{ active: currentFolder === folder.name }"
|
|
@click="currentFolder = folder.name">
|
|
<span x-text="folder.icon"></span>
|
|
<span x-text="folder.name"></span>
|
|
<span style="margin-left: auto; font-size: 0.875rem; color: #64748b;"
|
|
x-show="folder.count > 0"
|
|
x-text="folder.count"></span>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="panel mail-list">
|
|
<div style="padding: 1rem; border-bottom: 1px solid #334155;">
|
|
<h3 x-text="currentFolder"></h3>
|
|
</div>
|
|
<template x-for="mail in filteredMails" :key="mail.id">
|
|
<div class="mail-item"
|
|
:class="{ unread: !mail.read, selected: selectedMail?.id === mail.id }"
|
|
@click="selectMail(mail)">
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
|
|
<span style="font-weight: 600;" x-text="mail.from"></span>
|
|
<span class="text-xs text-gray" x-text="mail.time"></span>
|
|
</div>
|
|
<div style="font-weight: 600; margin-bottom: 0.25rem;" x-text="mail.subject"></div>
|
|
<div class="text-sm text-gray" x-text="mail.preview"></div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="panel mail-content">
|
|
<template x-if="selectedMail">
|
|
<div class="mail-content-view">
|
|
<div class="mail-header">
|
|
<h2 x-text="selectedMail.subject"></h2>
|
|
<div style="display: flex; align-items: center; gap: 1rem; margin-top: 1rem;">
|
|
<div>
|
|
<div style="font-weight: 600;" x-text="selectedMail.from"></div>
|
|
<div class="text-sm text-gray" x-text="'to: ' + selectedMail.to"></div>
|
|
</div>
|
|
<div style="margin-left: auto;" class="text-sm text-gray" x-text="selectedMail.date"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mail-body" x-html="selectedMail.body"></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="!selectedMail">
|
|
<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #64748b;">
|
|
<div style="text-align: center;">
|
|
<div style="font-size: 4rem; margin-bottom: 1rem;">✉</div>
|
|
<p>Select a message to read</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|