Add organize_enabled toggle for folders and improve UI with loading states
This commit is contained in:
Bryce
@@ -1,21 +1,28 @@
|
||||
<div id="folder-{{ folder.id }}" class="card bg-base-100 shadow-xl border border-base-300 hover:shadow-lg transition-shadow duration-200">
|
||||
<div class="card-body">
|
||||
|
||||
<div class="card-body" data-loading-states>
|
||||
<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"
|
||||
<button class="btn btn-sm btn-outline"
|
||||
hx-get="/api/folders/{{ folder.id }}/edit"
|
||||
hx-target="#modal-holder"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click">
|
||||
<i class="fas fa-edit"></i>
|
||||
hx-trigger="click"
|
||||
data-loading-disable
|
||||
>
|
||||
<i class="fas fa-edit" data-loading-class="!hidden"></i>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline btn-error"
|
||||
hx-delete="/api/folders/{{ folder.id }}"
|
||||
hx-target="#folders-list"
|
||||
<button class="btn btn-sm btn-outline btn-error"
|
||||
hx-delete="/api/folders/{{ folder.id }}"
|
||||
hx-target="#folders-list"
|
||||
hx-swap="innerHTML"
|
||||
hx-confirm="Are you sure you want to delete this folder?">
|
||||
<i class="fas fa-trash"></i>
|
||||
hx-confirm="Are you sure you want to delete this folder?"
|
||||
data-loading-disable
|
||||
>
|
||||
<i class="fas fa-trash" data-loading-class="!hidden"></i>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -34,7 +41,7 @@
|
||||
{% endif %}
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-xs">Organize:</span>
|
||||
<input
|
||||
<input
|
||||
type="checkbox"
|
||||
class="toggle toggle-sm toggle-success"
|
||||
{% if folder.organize_enabled %}checked="checked"{% endif %}
|
||||
@@ -42,8 +49,11 @@
|
||||
hx-target="#folder-{{ folder.id }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-trigger="click"
|
||||
data-loading-disable
|
||||
aria-label="Toggle organize enabled">
|
||||
</input>
|
||||
</input>
|
||||
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
{% endif %}
|
||||
<div class="mb-4">
|
||||
<label for="folder-name" class="block text-sm font-medium mb-1">Name</label>
|
||||
<input type="text" id="folder-name" name="name"
|
||||
<input type="text" id="folder-name" name="name"
|
||||
class="input input-bordered w-full {% if errors and errors.name %}input-error{% endif %}"
|
||||
placeholder="e.g., Work, Personal, Newsletters" required
|
||||
value="{% if name is defined %}{{ name }}{% elif folder %}{{ folder.name }}{% endif %}">
|
||||
@@ -26,7 +26,7 @@
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="folder-rule" class="block text-sm font-medium mb-1">Rule (Natural Language)</label>
|
||||
<textarea id="folder-rule" name="rule_text"
|
||||
<textarea id="folder-rule" name="rule_text"
|
||||
class="textarea textarea-bordered w-full h-24 {% if errors and errors.rule_text %}textarea-error{% endif %}"
|
||||
placeholder="e.g., Move emails from 'newsletter@company.com' to this folder"
|
||||
required>{% if rule_text is defined %}{{ rule_text }}{% elif folder %}{{ folder.rule_text }}{% endif %}</textarea>
|
||||
@@ -42,11 +42,12 @@
|
||||
<option value="-1" {% if (priority is defined and priority == '-1') or (folder and folder.priority==-1) %}selected{% endif %}>Low</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="modal-action">
|
||||
<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="submit-btn" :class="{ 'shake': errors }">
|
||||
{% if folder %}Update Folder{% else %}Add Folder{% endif %}
|
||||
<button type="submit" class="btn btn-primary" id="submit-btn" :class="{ 'shake': errors }" >
|
||||
<span data-loading-class="!hidden">{% if folder %}Update Folder{% else %}Add Folder{% endif %}</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -8,14 +8,14 @@
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-2">No folders yet</h3>
|
||||
<p class="mb-6 text-base-content/70">Add your first folder to get started organizing your emails.</p>
|
||||
<button class="btn btn-primary btn-lg"
|
||||
hx-get="/api/folders/new"
|
||||
hx-target="#modal-holder"
|
||||
hx-swap="innerHTML"
|
||||
<div data-loading-states>
|
||||
<button class="btn btn-primary btn-lg" hx-get="/api/folders/new" hx-target="#modal-holder" hx-swap="innerHTML"
|
||||
hx-trigger="click">
|
||||
<i class="fas fa-plus mr-2"></i>
|
||||
Create Folder
|
||||
</button>
|
||||
<i class="fas fa-plus mr-2" data-loading-class="!hidden"></i>
|
||||
<span data-loading-class="!hidden">Create Folder</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-4 text-sm text-base-content/70">
|
||||
<p>Need help setting up your first folder?</p>
|
||||
<a href="#" class="link link-primary">View tutorial</a>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div id="imap-modal" @click.away="$refs.modal.close()" class="modal-box" 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" x-data="{ errors: {{ 'true' if errors else 'false' }} }" x-init="$nextTick(() => { if (errors) { document.querySelector('#submit-btn').classList.add('shake'); } })" >
|
||||
<h3 class="font-bold text-lg mb-4">Configure IMAP Connection</h3>
|
||||
|
||||
{% if success %}
|
||||
@@ -18,7 +18,7 @@
|
||||
<form id="imap-form" hx-post="/api/imap/test" hx-target="#imap-modal" hx-swap="outerHTML">
|
||||
<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"
|
||||
<input type="text" id="imap-server" name="server"
|
||||
class="input input-bordered w-full {% if errors and errors.server %}input-error{% endif %}"
|
||||
placeholder="e.g., imap.gmail.com" required
|
||||
value="{% if server is defined %}{{ server }}{% endif %}">
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="imap-port" class="block text-sm font-medium mb-1">Port</label>
|
||||
<input type="number" id="imap-port" name="port"
|
||||
<input type="number" id="imap-port" name="port"
|
||||
class="input input-bordered w-full {% if errors and errors.port %}input-error{% endif %}"
|
||||
placeholder="e.g., 993" required
|
||||
value="{% if port is defined %}{{ port }}{% else %}993{% endif %}">
|
||||
@@ -40,7 +40,7 @@
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="imap-username" class="block text-sm font-medium mb-1">Username</label>
|
||||
<input type="text" id="imap-username" name="username"
|
||||
<input type="text" id="imap-username" name="username"
|
||||
class="input input-bordered w-full {% if errors and errors.username %}input-error{% endif %}"
|
||||
placeholder="e.g., your-email@gmail.com" required
|
||||
value="{% if username is defined %}{{ username }}{% endif %}">
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="imap-password" class="block text-sm font-medium mb-1">Password</label>
|
||||
<input type="password" id="imap-password" name="password"
|
||||
<input type="password" id="imap-password" name="password"
|
||||
class="input input-bordered w-full {% if errors and errors.password %}input-error{% endif %}"
|
||||
placeholder="App password or account password" required>
|
||||
{% if errors and errors.password %}
|
||||
@@ -67,20 +67,21 @@
|
||||
<p class="text-xs text-base-content/70 mt-1">Most IMAP servers use SSL on port 993</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-action">
|
||||
<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="submit-btn" :class="{ 'shake': errors }">
|
||||
Test Connection
|
||||
<button type="submit" class="btn btn-primary" id="submit-btn" :class="{ 'shake': errors }" data-loading-disable >
|
||||
<span data-loading-class="!hidden">Test Connection</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% if success %}
|
||||
<div class="mt-4 pt-4 border-t border-base-300">
|
||||
<button class="btn btn-success w-full" hx-post="/api/imap/sync" hx-target="#folders-list" hx-swap="innerHTML">
|
||||
<i class="fas fa-sync mr-2"></i>
|
||||
Sync Folders
|
||||
<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="#folders-list" hx-swap="innerHTML" data-loading-disable>
|
||||
<span data-loading-class="!hidden"><i class="fas fa-sync mr-2"></i>Sync Folders</span>
|
||||
<span class="loading loading-spinner loading-xs hidden" data-loading-class-remove="hidden"></span>
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!-- Modal Holder -->
|
||||
<dialog id="modal-holder" x-ref="modal" class="modal">
|
||||
<dialog id="modal-holder" x-ref="modal" class="modal" data-loading-states>
|
||||
<!-- Modals will be loaded here via HTMX -->
|
||||
</dialog>
|
||||
Reference in New Issue
Block a user