progress
This commit is contained in:
Bryce
@@ -229,7 +229,7 @@ The `recent_emails` field stores an array of JSON objects:
|
||||
|
||||
## Folder Types
|
||||
|
||||
The system supports two distinct types of folders, each with different purposes and behaviors:
|
||||
The system supports three distinct types of folders, each with different purposes and behaviors:
|
||||
|
||||
### Tidy Folders
|
||||
|
||||
@@ -261,14 +261,35 @@ Folders with `folder_type = 'destination'` are target folders where emails are m
|
||||
- Simpler interface without pending/processed indicators
|
||||
- Focus on folder management and viewing contents
|
||||
|
||||
### Ignore Folders
|
||||
|
||||
Folders with `folder_type = 'ignore'` are folders that are stored in the database but are neither scanned to be tidied nor used as destination folders.
|
||||
|
||||
**Characteristics:**
|
||||
- Hidden by default in the user interface
|
||||
- Not processed by AI for organization
|
||||
- No organization rules specified
|
||||
- Known emails count is reset to 0 when changed to this type
|
||||
- Example: Archive, Spam, Drafts folders
|
||||
|
||||
**UI Representation:**
|
||||
- Hidden by default unless "Show Hidden" checkbox is checked
|
||||
- When visible, shows minimal information
|
||||
- No action buttons for organization or processing
|
||||
|
||||
### Folder Type Determination
|
||||
|
||||
Folder types are determined as follows:
|
||||
- During IMAP synchronization:
|
||||
- Folders named "inbox" (case-insensitive) are automatically set as 'tidy'
|
||||
- All other folders are set as 'destination'
|
||||
- First step: Connection testing
|
||||
- Second step: Folder type selection modal with table
|
||||
- Default folder types:
|
||||
- Inbox: Tidy
|
||||
- Archive/Spam/Drafts: Ignore
|
||||
- All others: Destination
|
||||
- Manually created folders default to 'destination'
|
||||
- Folder type can be changed through administrative functions
|
||||
- Folder type can be changed through the user interface
|
||||
- When changing to 'ignore', emails_count is reset to 0
|
||||
|
||||
## Future Data Model Considerations
|
||||
|
||||
|
||||
@@ -2,227 +2,53 @@
|
||||
|
||||
## Overview
|
||||
|
||||
This document outlines the UI design changes needed to support the new folder types feature: "Folders to Tidy" and "Destination Folders". The UI will be reorganized to clearly separate these two types of folders into distinct sections.
|
||||
This document provides a high-level overview of the folder types structure in the Email Organizer application. The UI is organized into three main folder types: Tidy, Destination, and Ignore, with appropriate components for each type.
|
||||
|
||||
## UI Structure
|
||||
|
||||
### Main Page Layout
|
||||
The main page is divided into sections based on folder types:
|
||||
|
||||
The main page will be divided into two distinct sections:
|
||||
|
||||
1. **Folders to Tidy Section**
|
||||
- Contains folders with `folder_type = 'tidy'`
|
||||
- Typically includes the inbox and other source folders
|
||||
- Shows pending and processed email counts
|
||||
- Has actions for viewing and processing emails
|
||||
|
||||
2. **Destination Folders Section**
|
||||
- Contains folders with `folder_type = 'destination'`
|
||||
- Contains target folders for email organization
|
||||
- Shows count of emails moved to each folder
|
||||
- Focuses on folder management and viewing contents
|
||||
|
||||
### Visual Design
|
||||
|
||||
#### Section Headers
|
||||
Each section will have a clear header with:
|
||||
- Section title
|
||||
- Brief description of the section's purpose
|
||||
- Action button (e.g., "Add Folder" for destination folders)
|
||||
|
||||
#### Section Styling
|
||||
- Different background colors or borders to visually distinguish sections
|
||||
- Consistent spacing and layout within each section
|
||||
- Responsive grid layout that adapts to screen size
|
||||
1. **Folders to Tidy Section**: Contains folders with `folder_type = 'tidy'`
|
||||
2. **Destination Folders Section**: Contains folders with `folder_type = 'destination'`
|
||||
3. **Hidden Folders Section**: Contains folders with `folder_type = 'ignore'` (visible only when "Show Hidden" is checked)
|
||||
|
||||
## Folder Card Components
|
||||
|
||||
### Tidy Folder Card
|
||||
### Base Template
|
||||
All folder cards extend from `folder_card_base.html` which provides:
|
||||
- Common card structure with edit/delete buttons
|
||||
- Priority badge display
|
||||
- Rule text section
|
||||
- Block for additional content specific to folder type
|
||||
|
||||
For folders with `folder_type = 'tidy'`, the card will display:
|
||||
|
||||
#### Header
|
||||
- Folder name (prominent)
|
||||
- Edit and delete buttons
|
||||
|
||||
#### Count Badges
|
||||
- Total emails count
|
||||
- Pending emails count (with warning styling if > 0)
|
||||
- Processed emails count (calculated as total - pending)
|
||||
|
||||
#### Actions
|
||||
- "View Pending" button (if pending count > 0)
|
||||
### Tidy Folder Card (`folder_card_tidy.html`)
|
||||
Extends base template with:
|
||||
- Total, pending, and processed email count badges
|
||||
- Organize toggle switch
|
||||
- Priority badge
|
||||
- View pending emails button
|
||||
|
||||
#### Content
|
||||
- Rule text description
|
||||
- Recent email previews (if available)
|
||||
### Destination Folder Card (`folder_card_destination.html`)
|
||||
Extends base template with:
|
||||
- Email count badge
|
||||
- Simplified UI without processing elements
|
||||
|
||||
### Destination Folder Card
|
||||
### Ignore Folder Card (to be created)
|
||||
Will extend base template with:
|
||||
- "Ignored" status badge
|
||||
- Minimal information display
|
||||
- No processing elements
|
||||
|
||||
For folders with `folder_type = 'destination'`, the card will display:
|
||||
## IMAP Synchronization
|
||||
|
||||
#### Header
|
||||
- Folder name (prominent)
|
||||
- Edit and delete buttons
|
||||
### Two-Step Process
|
||||
1. **Connection Testing**: Test IMAP connection settings
|
||||
2. **Folder Type Selection**: Select processing type for each folder
|
||||
|
||||
#### Count Badge
|
||||
- Emails count (number of emails moved to this folder)
|
||||
### Default Folder Types
|
||||
- Inbox: Tidy
|
||||
- Archive/Spam/Drafts: Ignore
|
||||
- All others: Destination
|
||||
|
||||
#### Content
|
||||
- Rule text description (if applicable)
|
||||
## Show Hidden Folders
|
||||
|
||||
#### Actions
|
||||
- Basic folder management options
|
||||
- No organize toggle (as it's not applicable)
|
||||
|
||||
## UI Components
|
||||
|
||||
### Section Templates
|
||||
|
||||
#### Folders to Tidy Section
|
||||
```html
|
||||
<div class="folders-to-tidy-section">
|
||||
<div class="section-header">
|
||||
<h2>Folders to Tidy</h2>
|
||||
<p>Folders containing emails that need to be processed</p>
|
||||
<button class="btn btn-primary" hx-get="/api/folders/new">
|
||||
<i class="fas fa-plus"></i> Add Tidy Folder
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{% for folder in tidy_folders %}
|
||||
{% include 'partials/folder_card_tidy.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Destination Folders Section
|
||||
```html
|
||||
<div class="destination-folders-section">
|
||||
<div class="section-header">
|
||||
<h2>Destination Folders</h2>
|
||||
<p>Folders where emails are organized and stored</p>
|
||||
<button class="btn btn-primary" hx-get="/api/folders/new">
|
||||
<i class="fas fa-plus"></i> Add Destination Folder
|
||||
</button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{% for folder in destination_folders %}
|
||||
{% include 'partials/folder_card_destination.html' %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Folder Card Templates
|
||||
|
||||
#### Tidy Folder Card
|
||||
```html
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="text-xl font-bold truncate">{{ folder.name }}</h3>
|
||||
<div class="flex space-x-2">
|
||||
<button class="btn btn-sm btn-outline" hx-get="/api/folders/{{ folder.id }}/edit">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline btn-error" hx-delete="/api/folders/{{ folder.id }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-2 mb-2">
|
||||
<span class="badge badge-outline">{{ folder.total_count }} total</span>
|
||||
{% if folder.pending_count > 0 %}
|
||||
<button class="badge badge-warning" hx-get="/api/folders/{{ folder.id }}/pending-emails">
|
||||
{{ folder.pending_count }} pending
|
||||
</button>
|
||||
{% else %}
|
||||
<span class="badge badge-secondary">{{ folder.pending_count }} pending</span>
|
||||
{% endif %}
|
||||
<span class="badge badge-success">{{ folder.total_count - folder.pending_count }} processed</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 rounded-box p-3 mb-3">
|
||||
<p class="text-sm">{{ folder.rule_text }}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs">Organize:</span>
|
||||
<input type="checkbox" class="toggle toggle-sm"
|
||||
{% if folder.organize_enabled %}checked{% endif %}
|
||||
hx-put="/api/folders/{{ folder.id }}/toggle">
|
||||
</div>
|
||||
{% if folder.priority == 1 %}
|
||||
<span class="badge badge-error text-xs">High Priority</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Destination Folder Card
|
||||
```html
|
||||
<div class="card bg-base-100 shadow-xl border border-base-300">
|
||||
<div class="card-body">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<h3 class="text-xl font-bold truncate">{{ folder.name }}</h3>
|
||||
<div class="flex space-x-2">
|
||||
<button class="btn btn-sm btn-outline" hx-get="/api/folders/{{ folder.id }}/edit">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline btn-error" hx-delete="/api/folders/{{ folder.id }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-2 mb-2">
|
||||
<span class="badge badge-primary">{{ folder.emails_count }} emails</span>
|
||||
</div>
|
||||
|
||||
<div class="bg-base-200 rounded-box p-3 mb-3">
|
||||
<p class="text-sm">{{ folder.rule_text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Styling Guidelines
|
||||
|
||||
### Color Scheme
|
||||
- **Tidy Folders**: Use warning colors (yellow/orange) for pending emails
|
||||
- **Destination Folders**: Use primary colors (blue) for email counts
|
||||
- Consistent use of DaisyUI badge classes for different states
|
||||
|
||||
### Responsive Design
|
||||
- Grid layout adjusts from 1 column on mobile to 3 columns on desktop
|
||||
- Cards should have consistent width across all screen sizes
|
||||
- Section headers should remain readable on mobile
|
||||
|
||||
### Interactive Elements
|
||||
- Buttons should have hover states
|
||||
- Toggle switches should be clearly labeled
|
||||
- Pending email count should be clickable to open dialog
|
||||
|
||||
## Implementation Notes
|
||||
|
||||
### Template Organization
|
||||
- Create separate partial templates for each folder type
|
||||
- Main index template will include both sections
|
||||
- Use HTMX for dynamic updates without full page reloads
|
||||
|
||||
### Data Loading
|
||||
- Fetch folders filtered by type from the backend
|
||||
- Pass filtered lists to appropriate section templates
|
||||
- Maintain existing functionality for folder operations
|
||||
|
||||
### Accessibility
|
||||
- Ensure all interactive elements have proper ARIA labels
|
||||
- Use semantic HTML5 elements for section structure
|
||||
- Maintain keyboard navigation support
|
||||
A checkbox allows users to show/hide folders with `folder_type = 'ignore'`. When checked, these folders appear in a dedicated section with appropriate styling to indicate they're ignored.
|
||||
Reference in New Issue
Block a user