ux pattern cleanup.

This commit is contained in:
Bryce
2025-08-08 08:46:56 -07:00
parent 65c00e062b
commit 608cd7357c
9 changed files with 304 additions and 102 deletions

View File

@@ -24,8 +24,7 @@
<div class="flex space-x-2">
{% if current_user.imap_config %}
<div data-loading-states>
<button class="btn btn-outline" hx-post="/api/imap/sync" hx-target="#folders-list" hx-swap="outerHTML settle:300ms"
data-loading-disable>
<button class="btn btn-outline" hx-post="/api/imap/sync" hx-target="#modal-holder" data-loading-disable>
<i class="fas fa-sync mr-2" data-loading-class="!hidden"></i>
<span data-loading-class="!hidden">Sync Folders</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
@@ -55,59 +54,12 @@
<!-- Welcome Section - Only shown when IMAP is not configured -->
{% if not current_user.imap_config %}
{% include "partials/welcome_section.html" %}
<section id="folders-list" class="mb-12"></section>
{% include "partials/folders_list.html" %}
{% else %}
<!-- Stats Section -->
<div class="mb-8 grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="card bg-base-100 shadow-md border border-base-300 p-4">
<div class="text-2xl font-bold text-primary">{{ folders|length }}</div>
<div class="text-sm text-base-content/70">Total Folders</div>
</div>
<div class="card bg-base-100 shadow-md border border-base-300 p-4">
<div class="text-2xl font-bold text-warning">{{ folders|selectattr('folder_type', 'equalto', 'tidy')|list|length }}</div>
<div class="text-sm text-base-content/70">Folders to Tidy</div>
</div>
<div class="card bg-base-100 shadow-md border border-base-300 p-4">
<div class="text-2xl font-bold text-secondary">{{ folders|selectattr('folder_type', 'equalto', 'destination')|list|length }}</div>
<div class="text-sm text-base-content/70">Destination Folders</div>
</div>
<div class="card bg-base-100 shadow-md border border-base-300 p-4">
<div class="text-2xl font-bold text-info">
{{ folders|selectattr('folder_type', 'equalto', 'tidy')|sum(attribute='pending_count') }}
</div>
<div class="text-sm text-base-content/70">Pending Emails</div>
</div>
</div>
<!-- Search and Filter -->
<div class="mb-6 flex justify-between items-center">
<div class="flex items-center space-x-4">
<div class="relative w-64">
<input type="text" placeholder="Search folders..." class="input input-bordered w-full pr-10">
<i class="fas fa-search absolute right-3 top-3 text-base-content/50"></i>
</div>
<div class="flex items-center space-x-2">
<input type="checkbox" id="show-hidden"
name="show_hidden"
class="toggle"
hx-get="/api/folders"
hx-include="this"
hx-target="#folders-list"
hx-swap="outerHTML">
<label for="show-hidden" class="label-text cursor-pointer">Show Hidden</label>
</div>
</div>
<div class="flex space-x-2">
<button class="btn btn-sm btn-outline" hx-get="/api/folders?filter=all" hx-target="#folders-list" hx-swap="outerHTML settle:300ms">All</button>
<button class="btn btn-sm btn-outline" hx-get="/api/folders?filter=high" hx-target="#folders-list" hx-swap="outerHTML settle:300ms">High Priority</button>
<button class="btn btn-sm btn-outline" hx-get="/api/folders?filter=normal" hx-target="#folders-list" hx-swap="outerHTML settle:300ms">Normal</button>
</div>
</div>
{% include 'partials/folders_list.html' %}
{% endif %}
</main>
{% endif %}
</div>
</div>
{% endblock %}