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

wizard

Browse Source
This commit is contained in:
Bryce
2025-08-09 20:36:18 -07:00
parent 707a8a3095
commit af637f29b4
9 changed files with 167 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/templates/base.html
View File

@@ -38,7 +38,12 @@
/* Fade out transition for HTMX */
.fade-out-htmx.htmx-swapping {
opacity: 0;
transition: opacity 1s ease-out;
transition: opacity 280ms ease-out;
}
/* Fade out transition for HTMX */
.htmx-swapping .fade-out-htmx {
opacity: 0;
transition: opacity 280ms ease-out;
}
</style>
{% block head %}{% endblock %}

5
app/templates/partials/folder_selection_modal.html
View File

@@ -1,4 +1,4 @@
<div id="folder-selection-modal" class="modal-box step-2 slide-left-enter-from w-11/12 max-w-4xl" @click.away="$refs.modal.close()">
<div id="folder-selection-modal" class="modal-box step-2 w-11/12 max-w-4xl fade-in-htmx" @click.away="$refs.modal.close()">
<div class="flex items-center mb-4">
<div class="steps flex-1">
<span class="step">Step 1</span>
@@ -6,9 +6,8 @@
</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">
<form id="folder-selection-form" hx-post="/api/imap/sync-selected" hx-target="#modal-holder" hx-swap="innerHTML">
<div class="overflow-x-auto mb-4">
<table class="table">

59
app/templates/partials/folder_type_selection_modal.html
View File

@@ -1,59 +0,0 @@
<div id="folder-type-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 Folder Types</h3>
</div>
<p class="mb-4">Select the processing type for each folder. Inbox will default to Tidy, while Archive/Spam/Drafts will default to Ignore.</p>
<div class="overflow-x-auto mb-4">
<table class="table">
<thead>
<tr>
<th>Folder Name</th>
<th>Processing Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{% for folder in folders %}
<tr>
<td>{{ folder.name }}</td>
<td>
<select class="select select-bordered select-sm"
name="folder_type_{{ folder.id }}"
hx-put="/api/folders/{{ folder.id }}/type"
hx-target="#modal-holder"
hx-swap="outerHTML">
<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="modal-action">
<button type="button" class="btn btn-outline" hx-get="/api/imap/config" hx-target="#modal-holder" hx-swap="innerHTML slide-right:300ms">
<i class="fas fa-arrow-left mr-2"></i>Back
</button>
<button type="button" class="btn btn-primary" hx-post="/api/imap/sync">
Save and Continue
</button>
</div>
</div>

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

@@ -1,4 +1,4 @@
<div id="imap-modal" @click.away="$refs.modal.close()" class="modal-box step-1 translate-up-enter-from w-11/12 max-w-4xl" x-data="{ errors: {{ 'true' if errors else 'false' }} }" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })" >
<div id="imap-modal" @click.away="$refs.modal.close()" class="modal-box step-1 w-11/12 max-w-4xl fade-out-htmx" x-data="{ errors: {{ 'true' if errors else 'false' }} }" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })" >
<div class="flex items-center mb-4">
<div class="steps flex-1">
<span class="step step-primary">Step 1</span>
@@ -21,7 +21,7 @@
</div>
{% endif %}
<form id="imap-form" hx-post="/api/imap/test" hx-target="#imap-modal" hx-swap="outerHTML">
<form id="imap-form" hx-post="/api/imap/test" hx-target="#modal-holder" hx-swap="innerHTML swap:300ms" hx-trigger="submit once">
<div class="mb-4">
<label for="imap-server" class="block text-sm font-medium mb-1">IMAP Server</label>
<input type="text" id="imap-server" name="server"
@@ -84,12 +84,4 @@
</div>
</form>
{% if success %}
<div class="mt-4 pt-4 border-t border-base-300" data-loading-states>
<button class="btn btn-success w-full" hx-post="/api/imap/sync" hx-target="#modal-holder" hx-swap="innerHTML slide-left:300ms" data-loading-disable>
<span data-loading-class="!hidden"><i class="fas fa-sync mr-2"></i>Configure Folder Types</span>
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
</button>
</div>
{% endif %}
</div>