animations

app/templates/partials/folder_selection_modal.html

@@ -0,0 +1,72 @@
+<div id="folder-selection-modal" class="modal-box step-2 slide-left-enter-from" @click.away="$refs.modal.close()">
+    <div class="flex items-center mb-4">
+        <div class="steps flex-1">
+            <span class="step">Step 1</span>
+            <span class="step step-primary">Step 2</span>
+        </div>
+        <h3 class="font-bold text-lg">Configure IMAP Folders</h3>
+    </div>
+    
+    <p class="mb-4">The following folders were found on your IMAP server. Select which folders you want to sync and configure their processing types.</p>
+    <form id="folder-selection-form" hx-post="/api/imap/sync-selected" hx-target="#modal-holder" hx-swap="innerHTML slide-left:300ms">
+    
+        <div class="overflow-x-auto mb-4">
+            <table class="table">
+                <thead>
+                    <tr>
+                        <th>Folder</th>
+                        <th>Synced?</th>
+                        <th>Select</th>
+                        <th>Processing Type</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for folder in folders %}
+                    <tr>
+                        <td>{{ folder.name }}</td>
+                        <td>
+                            {% if folder.subscribed %}
+                            <span class="badge badge-success">Synced</span>
+                            {% else %}
+                            {% endif %}
+                        </td>
+                        <td>
+                            <select class="select select-bordered select-sm"
+                                    name="folder_type_{{ loop.index }}">
+                                <option value="tidy" {% if folder.folder_type == 'tidy' %}selected{% endif %}>Tidy</option>
+                                <option value="destination" {% if folder.folder_type == 'destination' %}selected{% endif %}>Destination</option>
+                                <option value="ignore" {% if folder.folder_type == 'ignore' %}selected{% endif %}>Ignore</option>
+                            </select>
+                        </td>
+                        <td>
+                            {% if folder.folder_type == 'tidy' %}
+                            Processed by AI to organize emails
+                            {% elif folder.folder_type == 'destination' %}
+                            Target for organized emails
+                            {% else %}
+                            Ignored during processing
+                            {% endif %}
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
+        
+        <div class="alert alert-info mb-4">
+            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+            <span>Special folders like "Sent", "Drafts", "Spam", and "Trash" are automatically excluded from syncing.</span>
+        </div>
+        
+        <div class="modal-action" data-loading-states>
+            <button type="button" class="btn btn-outline" @click="$dispatch('close-modal')">
+                Cancel
+            </button>
+            <button type="submit" class="btn btn-primary" id="continue-btn" data-loading-disable>
+                <span data-loading-class="!hidden">Save and Continue</span>
+                <span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
+            </button>
+        </div>
+    </form>
+</div>