Add organize_enabled toggle for folders and improve UI with loading states

This commit is contained in:
Bryce
2025-08-05 10:47:16 -07:00
parent 1eca7f3ff9
commit 31871ed8ec
12 changed files with 119 additions and 57 deletions

View File

@@ -21,39 +21,54 @@
<h2 class="text-2xl font-bold">Email Folders</h2>
<p class="text-base-content/70">Create and manage your email organization rules</p>
</div>
<button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder"
hx-swap="innerHTML">
<i class="fas fa-plus mr-2"></i>
Add Folder
</button>
<div data-loading-states>
<button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
data-loading-disable>
<i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
<span data-loading-class="!hidden">Add Folder</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
</div>
</div>
<!-- Welcome Section -->
<div class="mb-8 p-6 bg-base-100 rounded-box shadow-lg border border-base-300">
<h3 class="text-xl font-bold mb-2">Welcome to Email Organizer!</h3>
<p class="text-base-content/80 mb-4">Organize your emails automatically with AI-powered rules. Create folders and set up rules to categorize incoming emails.</p>
<div class="flex space-x-4">
<div class="flex space-x-4" data-loading-states>
<button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder"
hx-swap="innerHTML">
<i class="fas fa-plus mr-2"></i>
Create Your First Folder
hx-swap="innerHTML"
data-loading-disable>
<i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
<span data-loading-class="!hidden">Create Your First Folder</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
{% 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="innerHTML">
<i class="fas fa-sync mr-2"></i>
Sync Folders
hx-swap="innerHTML"
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>
</button>
<button class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder"
hx-swap="innerHTML">
<i class="fas fa-cog"></i>
</div>
<div data-loading-states >
<button class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder" hx-swap="innerHTML"
data-loading-disable>
<i class="fas fa-cog" data-loading-class="!hidden"></i>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
</div>
{% else %}
<button class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder"
hx-swap="innerHTML">
<i class="fas fa-cog mr-2"></i>
Configure IMAP
<div data-loading-states>
<button class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder" hx-swap="innerHTML"
data-loading-disable>
<i class="fas fa-cog mr-2" data-loading-class="!hidden"></i>
<span data-loading-class="!hidden">Configure IMAP</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
</div>
{% endif %}
</div>
</div>