Bryce
8d0d0976b9
- 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
105 lines
5.5 KiB
HTML
105 lines
5.5 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Email Organizer - Prototype{% endblock %}
|
|
|
|
{% block header %}
|
|
{% include "partials/header.html" %}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="flex">
|
|
{% include "partials/sidebar.html" %}
|
|
|
|
<!-- Main Content -->
|
|
<div class="flex-1 ml-64 mt-16 flex flex-col">
|
|
<!-- Top Bar -->
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 p-6 overflow-auto bg-base-100">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<div>
|
|
<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 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>
|
|
<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>
|
|
</div>
|
|
{% endif %}
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Welcome Section - Only shown when IMAP is not configured -->
|
|
{% if not current_user.imap_config %}
|
|
{% include "partials/welcome_section.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="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 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>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block modal %}
|
|
{% include "partials/modal_holder.html" %}
|
|
{% endblock %}
|