# Folder Types UI Design

## Overview

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

The main page is divided into sections based on folder types:

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)

## Main Page Layout

The main page ([`app/templates/index.html`](app/templates/index.html:1)) provides:
- Header with navigation and user information
- Sidebar with main navigation
- Main content area with folder sections
- Modal holder for dynamic content

### Dashboard Statistics
When IMAP is configured, the dashboard displays:
- Total folders count
- Folders to tidy count
- Destination folders count
- Total pending emails count

### Search and Filter Controls
- Search input for folder names
- "Show Hidden" checkbox for ignore folders
- Filter buttons for All, High Priority, Normal priority

## Folder Card Components

### Base Template (`folder_card_base.html`)
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
- Folder type dropdown for changing folder types

### Tidy Folder Card (`folder_card_tidy.html`)
Extends base template with:
- Total, pending, and processed email count badges
- "View Pending" button that opens a modal with pending emails
- Recent emails tooltip for processed emails

### Destination Folder Card (`folder_card_destination.html`)
Extends base template with:
- Email count badge showing emails moved to this folder
- Simplified UI without processing elements

### Ignore Folder Card (`folder_card_ignore.html`)
Extends base template with:
- "Ignored" status badge
- Email count badge (reset to 0 when changed to ignore)
- Minimal information display
- No processing elements

## Section Templates

### Folders to Tidy Section (`folders_to_tidy_section.html`)
- Section header with descriptive text and icon
- Grid layout for folder cards
- Empty state with call-to-action button
- HTMX integration for dynamic updates

### Destination Folders Section (`destination_folders_section.html`)
- Section header with descriptive text and icon
- Grid layout for folder cards
- Empty state with call-to-action button
- HTMX integration for dynamic updates

### Hidden Folders Section (`hidden_folders_section.html`)
- Section header with eye-slash icon
- Grid layout for folder cards
- Empty state message
- Only visible when "Show Hidden" is checked

## Modal System

### Folder Modal (`folder_modal.html`)
- Used for creating and editing folders
- Form validation with server-side error handling
- HTMX integration for dynamic form submission

### IMAP Configuration Modal (`imap_config_modal.html`)
- IMAP server configuration form
- Connection testing functionality
- Error handling and validation

### Folder Selection Modal (`folder_selection_modal.html`)
- Two-step IMAP sync process
- Folder type selection table
- Default folder type assignment

### Pending Emails Dialog (`pending_emails_dialog.html`)
- Displays pending emails for a folder
- Email metadata (subject, date, from, to)
- Individual email processing buttons

## HTMX Integration

The UI extensively uses HTMX for:
- Dynamic content updates without full page reloads
- Modal opening/closing
- Form submissions with validation
- Real-time folder list updates
- Event-triggered content refreshes

## Alpine.js Integration

Alpine.js is used for:
- "Show Hidden" checkbox state management
- Filter button state management
- Tooltip functionality for recent emails
- Loading states for buttons

## DaisyUI Components

The UI uses DaisyUI for:
- Consistent card styling
- Badge components for counts and status
- Button components with loading states
- Form controls and validation
- Theme support

## IMAP Synchronization

### Two-Step Process
1. **Connection Testing**: Test IMAP connection settings via IMAP configuration modal
2. **Folder Type Selection**: Select processing type for each folder via folder selection modal

### Default Folder Types
- Inbox: Tidy
- Archive/Spam/Drafts: Ignore
- All others: Destination

### Sync Process
- Users click "Sync Folders" button to start synchronization
- IMAP service fetches folder list from server
- Users can select which folders to sync and their types
- Selected folders are created/updated in database with appropriate types
- Processed emails service tracks email UIDs for processing status

## Show Hidden Folders

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.

### Implementation Details
- Checkbox state managed by Alpine.js
- HTMX triggers folder list updates when state changes
- Hidden folders section shows/hides based on checkbox state