This commit is contained in:
2025-08-05 14:37:49 -07:00
parent 27fc2e29a1
commit 5d87be1d96
10 changed files with 123 additions and 136 deletions

View File

@@ -22,6 +22,19 @@
.shake {
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}
.fade-in-htmx.htmx-added {
opacity: 0;
}
.fade-in-htmx {
opacity: 1;
transition: opacity 1s ease-out;
}
/* Fade out transition for HTMX */
.fade-out-htmx.htmx-swapping {
opacity: 0;
transition: opacity 1s ease-out;
}
</style>
{% block head %}{% endblock %}
</head>

View File

@@ -96,12 +96,12 @@
<i class="fas fa-search absolute right-3 top-3 text-base-content/50"></i>
</div>
<div class="flex space-x-2">
<button class="btn btn-sm btn-outline">All</button>
<button class="btn btn-sm btn-outline">High Priority</button>
<button class="btn btn-sm btn-outline">Normal</button>
<button class="btn btn-sm btn-outline" hx-get="/api/folders?filter=all" hx-target="#folders-list" hx-swap="innerHTML swap1:s">All</button>
<button class="btn btn-sm btn-outline" hx-get="/api/folders?filter=high" hx-target="#folders-list" hx-swap="innerHTML swap1:s">High Priority</button>
<button class="btn btn-sm btn-outline" hx-get="/api/folders?filter=normal" hx-target="#folders-list" hx-swap="innerHTML swap1:s">Normal</button>
</div>
</div>
<section id="folders-list" class="mb-12">
{% include 'partials/folders_list.html' %}
</section>

View File

@@ -1,4 +1,4 @@
<div id="folder-{{ folder.id }}" class="card bg-base-100 shadow-xl border border-base-300 hover:shadow-lg transition-shadow duration-200">
<div id="folder-{{ folder.id }}" class="card bg-base-100 shadow-xl border border-base-300 hover:shadow-lg">
<div class="card-body" data-loading-states>
<div class="flex justify-between items-start mb-2">
@@ -14,10 +14,10 @@
<i class="fas fa-edit" data-loading-class="!hidden"></i>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
<button class="btn btn-sm btn-outline btn-error"
<button class="btn btn-sm btn-outline btn-error fade-me-out"
hx-delete="/api/folders/{{ folder.id }}"
hx-target="#folders-list"
hx-swap="innerHTML"
hx-swap="innerHTML swap:1s"
hx-confirm="Are you sure you want to delete this folder?"
data-loading-disable
>
@@ -30,8 +30,8 @@
<!-- Email count badges placed below title but in a separate row -->
<div class="flex justify-between items-center mb-2">
<div class="flex space-x-1">
<span class="badge badge-outline">{{ folder.total_count }} emails</span>
<span class="badge badge-secondary" x-tooltip.raw="{% if folder.recent_emails %}<table class='text-xs'><tr><th class='text-left pr-2'>Subject</th><th class='text-left'>Date</th></tr>{% for email in folder.recent_emails %}<tr><td class='text-left pr-2 truncate max-w-[150px]'>{{ email.subject }}</td><td class='text-left'>{{ email.date[:10] if email.date else 'N/A' }}</td></tr>{% endfor %}</table>{% else %}No recent emails{% endif %}">{{ folder.pending_count }} pending</span>
<span class="badge badge-outline cursor-pointer">{{ folder.total_count }} emails</span>
<span class="badge badge-secondary cursor-pointer" x-tooltip.raw.html="{% if folder.recent_emails %}<table class='text-xs'><tr><th class='text-left pr-2'>Subject</th><th class='text-left'>Date</th></tr>{% for email in folder.recent_emails %}<tr><td class='text-left pr-2 truncate max-w-[150px]'>{{ email.subject }}</td><td class='text-left'>{{ email.date[:10] if email.date else 'N/A' }}</td></tr>{% endfor %}</table>{% else %}No recent emails{% endif %}">{{ folder.pending_count }} pending</span>
</div>
{% if folder.priority == 1 %}
<span class="badge badge-error">High Priority</span>

View File

@@ -1,4 +1,4 @@
<div id="folders-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div id="folders-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 fade-in-htmx">
{% for folder in folders %}
{% include 'partials/folder_card.html' %}
{% else %}

View File

@@ -53,7 +53,8 @@
<label for="imap-password" class="block text-sm font-medium mb-1">Password</label>
<input type="password" id="imap-password" name="password"
class="input input-bordered w-full {% if errors and errors.password %}input-error{% endif %}"
placeholder="App password or account password" required>
placeholder="App password or account password" required
value="{% if password is defined %}{{ password }}{% endif %}">
{% if errors and errors.password %}
<div class="text-error text-sm mt-1">{{ errors.password }}</div>
{% endif %}