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

feat: Improve UI layout and user experience

Browse Source 
- Restructure index page to show welcome section only when IMAP is not configured
- Move stats and search sections to display only after IMAP setup
- Update header text color to neutral for better contrast
- Enhance welcome section with larger button and privacy assurance
- Add shield icon to emphasize data privacy protection
This commit is contained in:
Bryce
2025-08-06 16:47:15 -07:00
parent e9ed1c3de6
commit 8d0d0976b9
3 changed files with 41 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
app/templates/index.html
View File

@@ -55,44 +55,45 @@
<!-- Welcome Section - Only shown when IMAP is not configured --> <!-- Welcome Section - Only shown when IMAP is not configured -->
{% if not current_user.imap_config %} {% if not current_user.imap_config %}
{% include "partials/welcome_section.html" %} {% include "partials/welcome_section.html" %}
{% endif %} {% else %}
<!-- Stats Section --> <!-- Stats Section -->
<div class="mb-8 grid grid-cols-1 md:grid-cols-4 gap-4"> <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="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-2xl font-bold text-primary">{{ folders|length }}</div>
<div class="text-sm text-base-content/70">Total Folders</div> <div class="text-sm text-base-content/70">Total Folders</div>
</div> </div>
<div class="card bg-base-100 shadow-md border border-base-300 p-4"> <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-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 class="text-sm text-base-content/70">Folders to Tidy</div>
</div> </div>
<div class="card bg-base-100 shadow-md border border-base-300 p-4"> <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-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 class="text-sm text-base-content/70">Destination Folders</div>
</div> </div>
<div class="card bg-base-100 shadow-md border border-base-300 p-4"> <div class="card bg-base-100 shadow-md border border-base-300 p-4">
<div class="text-2xl font-bold text-info"> <div class="text-2xl font-bold text-info">
{{ folders|selectattr('folder_type', 'equalto', 'tidy')|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> </div>
<div class="text-sm text-base-content/70">Pending Emails</div>
</div> </div>
</div>
<!-- Search and Filter --> <!-- Search and Filter -->
<div class="mb-6 flex justify-between items-center"> <div class="mb-6 flex justify-between items-center">
<div class="relative w-64"> <div class="relative w-64">
<input type="text" placeholder="Search folders..." class="input input-bordered w-full pr-10"> <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> <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="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> </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> {% include 'partials/folders_list.html' %}
<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> {% endif %}
<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' %}
</main> </main>
</div> </div>
</div> </div>

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

@@ -1,6 +1,6 @@
<header class="bg-base-100 border-b border-base-300 p-4 flex justify-between shadow-sm fixed top-0 left-0 right-0 z-20"> <header class="bg-base-100 border-b border-base-300 p-4 flex justify-between shadow-sm fixed top-0 left-0 right-0 z-20">
<div> <div>
<h1 class="text-2xl font-bold text-primary flex items-center"> <h1 class="text-2xl font-bold text-neutral flex items-center">
<i class="fas fa-envelope mr-2"></i> <i class="fas fa-envelope mr-2"></i>
Email Organizer Email Organizer
</h1> </h1>

12
app/templates/partials/welcome_section.html
View File

@@ -6,16 +6,16 @@
</div> </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> <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> <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" <button class="btn btn-primary btn-lg" hx-get="/api/imap/config" hx-target="#modal-holder"
hx-swap="innerHTML" hx-swap="innerHTML"
data-loading-disable> 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 data-loading-class="!hidden">Set Up IMAP Sync</span>
<i class="fas fa-arrow-right mr-2" data-loading-class="!hidden"></i>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span> <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button> </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>
<p class="text-sm text-base-content/60 mt-2">
<i class="fas fa-shield-alt text-green-500 mr-1"></i>
<strong>Your privacy matters!</strong> We never store email content at rest.
</p>
</div> </div>