notid/email-organizer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improvements

Browse Source
This commit is contained in:
Bryce
2025-08-06 16:34:05 -07:00
parent 41ea8fb3bd
commit e9ed1c3de6
9 changed files with 111 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/templates/base.html
View File

@@ -26,9 +26,14 @@
.fade-in-htmx.htmx-added {
opacity: 0;
}
.htmx-added .fade-in-htmx {
opacity: 0;
}
.fade-in-htmx {
opacity: 1;
transition: opacity 1s ease-out;
transition: opacity 300ms ease-out;
}
/* Fade out transition for HTMX */
.fade-out-htmx.htmx-swapping {

85
app/templates/index.html
View File

@@ -21,57 +21,41 @@
<h2 class="text-2xl font-bold">Email Folders</h2>
<p class="text-base-content/70">Create and manage your email organization rules</p>
</div>
<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" 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">Create Your First Folder</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
<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="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>
</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>
<button class="btn btn-outline" hx-post="/api/imap/sync" hx-target="#folders-list" hx-swap="outerHTML settle:300ms"
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>
</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 %}
<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>
<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>
<!-- Welcome Section - Only shown when IMAP is not configured -->
{% if not current_user.imap_config %}
{% include "partials/welcome_section.html" %}
{% endif %}
<!-- Stats Section -->
<div class="mb-8 grid grid-cols-1 md:grid-cols-4 gap-4">
@@ -80,16 +64,16 @@
<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">{{ tidy_folders|length }}</div>
<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">{{ destination_folders|length }}</div>
<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">
{{ tidy_folders|sum(attribute='pending_count') }}
{{ folders|selectattr('folder_type', 'equalto', 'tidy')|sum(attribute='pending_count') }}
</div>
<div class="text-sm text-base-content/70">Pending Emails</div>
</div>
@@ -102,16 +86,13 @@
<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" 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>
<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>
<section id="folders-list" class="mb-12">
{% include 'partials/folders_to_tidy_section.html' %}
{% include 'partials/destination_folders_section.html' %}
</section>
{% include 'partials/folders_list.html' %}
</main>
</div>
</div>

22
app/templates/partials/destination_folders_section.html
View File

@@ -1,18 +1,26 @@
<div class="destination-folders-section mb-8">
<div class="destination-folders-section mb-8 fade-in-htmx" id="destination-folders">
<div class="section-header bg-base-200 p-4 rounded-t-lg border-b border-base-300">
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div>
<h2 class="text-2xl font-bold text-base-content">Destination Folders</h2>
<h2 class="text-2xl font-bold text-base-content">
<i class="fas fa-archive mr-3"></i>
Destination Folders</h2>
<p class="text-base-content/70 mt-1">Folders where emails are organized and stored</p>
</div>
<button class="btn btn-primary mt-4 md:mt-0" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML" hx-trigger="click">
<i class="fas fa-plus mr-2"></i>Add Destination Folder
</button>
<div data-loading-states>
<button class="btn btn-primary" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
hx-trigger="click">
<i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
<span data-loading-class="!hidden">Create Folder</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
</div>
</div>
</div>
<div id="destination-folders-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
{% for folder in destination_folders %}
{% for folder in folders|selectattr('folder_type', 'equalto', 'destination') %}
{% include 'partials/folder_card_destination.html' %}
{% else %}
<div class="col-span-full text-center py-12 bg-base-100 rounded-box shadow-lg border border-dashed border-base-300">
@@ -32,4 +40,4 @@
</div>
{% endfor %}
</div>
</div>
</div>

4
app/templates/partials/folder_card_destination.html
View File

@@ -16,8 +16,8 @@
</button>
<button class="btn btn-sm btn-outline btn-error fade-me-out"
hx-delete="/api/folders/{{ folder.id }}"
hx-target="#destination-folders-list"
hx-swap="innerHTML swap:1s"
hx-target="#folders-list"
hx-swap="outerhtml settle:300ms"
hx-confirm="Are you sure you want to delete this folder?"
data-loading-disable
>

29
app/templates/partials/folders_list.html
View File

@@ -1,25 +1,4 @@
<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 %}
<div class="col-span-full text-center py-12 bg-base-100 rounded-box shadow-lg border border-dashed border-base-300">
<div class="text-5xl mb-4 text-primary">
<i class="fas fa-folder-open"></i>
</div>
<h3 class="text-2xl font-bold mb-2">No folders yet</h3>
<p class="mb-6 text-base-content/70">Add your first folder to get started organizing your emails.</p>
<div data-loading-states>
<button class="btn btn-primary btn-lg" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
hx-trigger="click">
<i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
<span data-loading-class="!hidden">Create Folder</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
</div>
<div class="mt-4 text-sm text-base-content/70">
<p>Need help setting up your first folder?</p>
<a href="#" class="link link-primary">View tutorial</a>
</div>
</div>
{% endfor %}
</div>
<section id="folders-list" class="mb-12">
{% include 'partials/folders_to_tidy_section.html' %}
{% include 'partials/destination_folders_section.html' %}
</section>

28
app/templates/partials/folders_to_tidy_section.html
View File

@@ -1,31 +1,33 @@
<div class="folders-to-tidy-section mb-8">
<div class="section-header bg-base-200 p-4 rounded-t-lg border-b border-base-300">
<div class="folders-to-tidy-section mb-8 " id="folders-to-tidy">
<div class="section-header bg-base-200 p-4 rounded-t-lg border-b border-base-300 fade-in-htmx" >
<div class="flex flex-col md:flex-row md:items-center md:justify-between">
<div>
<h2 class="text-2xl font-bold text-base-content">Folders to Tidy</h2>
<p class="text-base-content/70 mt-1">Folders containing emails that need to be processed</p>
<h2 class="text-2xl font-bold text-base-content flex items-center">
<i class="fas fa-folder-open mr-3"></i>
Emails to organize
</h2>
<p class="text-base-content/70 mt-1">
Folders that need a little Marie Kondo
</p>
</div>
<button class="btn btn-primary mt-4 md:mt-0" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML" hx-trigger="click">
<i class="fas fa-plus mr-2"></i>Add Tidy Folder
</button>
</div>
</div>
<div id="folders-to-tidy-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
{% for folder in tidy_folders %}
<div id="folders-to-tidy-list" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6 fade-in-htmx">
{% for folder in folders|selectattr('folder_type', 'equalto', 'tidy') %}
{% include 'partials/folder_card_tidy.html' %}
{% else %}
<div class="col-span-full text-center py-12 bg-base-100 rounded-box shadow-lg border border-dashed border-base-300">
<div class="text-5xl mb-4 text-warning">
<i class="fas fa-inbox"></i>
<i class="fas fa-folder-open"></i>
</div>
<h3 class="text-2xl font-bold mb-2">No folders to tidy yet</h3>
<p class="mb-6 text-base-content/70">Add your first folder to start organizing your emails.</p>
<h3 class="text-2xl font-bold mb-2">Your email transformation area is empty!</h3>
<p class="mb-6 text-base-content/70">Let's bring in some folders to organize and watch the magic happen.</p>
<div data-loading-states>
<button class="btn btn-primary btn-lg" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
hx-trigger="click">
<i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
<span data-loading-class="!hidden">Create Folder</span>
<span data-loading-class="!hidden">Add Folder to Transform</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
</div>

2
app/templates/partials/imap_config_modal.html
View File

@@ -80,7 +80,7 @@
{% if success %}
<div class="mt-4 pt-4 border-t border-base-300" data-loading-states>
<button class="btn btn-success w-full" hx-post="/api/imap/sync" hx-target="#folders-list" hx-swap="innerHTML" data-loading-disable>
<button class="btn btn-success w-full" hx-post="/api/imap/sync" hx-target="#folders-list" hx-swap="outerHTML settle:300ms" data-loading-disable>
<span data-loading-class="!hidden"><i class="fas fa-sync mr-2"></i>Sync Folders</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>

21
app/templates/partials/welcome_section.html Normal file
View File

@@ -0,0 +1,21 @@
<!-- Welcome Section - Only shown when IMAP is not configured -->
<div class="mb-8 p-6 bg-gradient-to-r from-primary/10 to-secondary/10 rounded-box shadow-lg border border-primary/20">
<div class="flex items-center mb-4">
<i class="fas fa-envelope-open-text text-3xl text-primary mr-4"></i>
<h3 class="text-xl font-bold">Welcome to Email Organizer! 🎉</h3>
</div>
<p class="text-base-content/80 mb-4">Ready to tame your email chaos? Let's get your email folders synchronized so we can start organizing your emails with AI-powered rules!</p>
<div class="flex items-center space-x-4" data-loading-states>
<button class="btn btn-primary" 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">Set Up IMAP Sync</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
<div class="text-sm text-base-content/60">
<i class="fas fa-info-circle mr-1"></i>
Connect your email account to get started
</div>
</div>
</div>