feat: Implement API endpoints for email details and actions, and refactor email preview for client-side rendering with Shadow DOM.

4 files changed, 31 insertions, 99 deletions

diff --git a/templates/layouts/mailbox.django b/templates/layouts/mailbox.django
index 32a7c8f..0cfaf5c 100644
--- a/templates/layouts/mailbox.django
+++ b/templates/layouts/mailbox.django
@@ -1,4 +1,6 @@
-{% extends 'layouts/main.django' %} {% block content %}
+{% extends 'layouts/main.django' %}
+
+{% block content %}
   <div class="mailbox">
     <aside class="sidebar">
       {% include 'partials/sidebar.django' %}
@@ -12,4 +14,12 @@
       {% include 'partials/preview.django' %}
     </section>
   </div>
+  {% block extra_content %}
+
+  {% endblock %}
+{% endblock %}
+
+{% block scripts %}
+  {{ block.super }}
+  <script src="{% static 'js/search.js' %}"></script>
 {% endblock %}
diff --git a/templates/layouts/main.django b/templates/layouts/main.django
index 2ca45fd..af46e27 100644
--- a/templates/layouts/main.django
+++ b/templates/layouts/main.django
@@ -1,55 +1,14 @@
-{% extends 'layouts/generic.django' %} {% block body %}
+{% extends 'layouts/generic.django' %}
+
+{% block body %}
   {% include 'partials/navbar.django' %}
   <main>
     {% block content %}
 
     {% endblock %}
   </main>
-{% endblock %} {% block scripts %}
-  <script>
-    document.addEventListener('DOMContentLoaded', function () {
-      // Handle dropdown clicks
-      document.querySelectorAll('.options-subitem > a').forEach(function (item) {
-        item.addEventListener('click', function (e) {
-          e.preventDefault()
-          const parent = this.parentElement
-    
-          if (parent.classList.contains('disabled')) {
-            return
-          }
-    
-          document.querySelectorAll('.options-subitem.open').forEach(function (other) {
-            if (other !== parent) {
-              other.classList.remove('open')
-            }
-          })
-    
-          parent.classList.toggle('open')
-        })
-      })
-    
-      document.addEventListener('click', function (e) {
-        if (!e.target.closest('.options-subitem')) {
-          document.querySelectorAll('.options-subitem.open').forEach(function (item) {
-            item.classList.remove('open')
-          })
-        }
-      })
-    
-      // Toggle search filters
-      const toggleBtn = document.getElementById('toggle-filters')
-      const filters = document.getElementById('search-filters')
-    
-      if (toggleBtn && filters) {
-        toggleBtn.addEventListener('click', function (e) {
-          e.preventDefault()
-          if (filters.style.display === 'none') {
-            filters.style.display = 'block'
-          } else {
-            filters.style.display = 'none'
-          }
-        })
-      }
-    })
-  </script>
+{% endblock %}
+
+{% block scripts %}
+  <script src="{% static 'js/dropdown.js' %}"></script>
 {% endblock %}
diff --git a/templates/mail/folder.django b/templates/mail/folder.django
index 91aa6f8..26fd20c 100644
--- a/templates/mail/folder.django
+++ b/templates/mail/folder.django
@@ -1,3 +1,12 @@
-{% extends 'layouts/mailbox.django' %} {% block scripts %}
+{% extends 'layouts/mailbox.django' %}
+
+{% block extra_content %}
+  <div id="mail-preferences" data-mark-as-read="{{ Preferences.MarkMessagesAsRead }}" data-show-address="{{ Preferences.ShowEmailAddressWithDisplayName|lower }}" data-display-html="{{ Preferences.DisplayHTML|lower }}" data-load-remote="{{ Preferences.LoadRemoteContent }}" style="display: none;"></div>
+{% endblock %}
+
+{% block scripts %}
+  {{ block.super }}
+  <script src="{% static 'js/shadow.js' %}"></script>
+  <script src="{% static 'js/mail.js' %}"></script>
   <script src="{% static 'js/filters.js' %}"></script>
 {% endblock %}
diff --git a/templates/partials/preview.django b/templates/partials/preview.django
index d7aa00a..44d3b03 100644
--- a/templates/partials/preview.django
+++ b/templates/partials/preview.django
@@ -1,49 +1,3 @@
-{% if Email %}
-  <div class="email-header">
-    <h2 class="email-subject">{{ Email.Subject }}</h2>
-
-    <div class="email-actions">
-      <button class="btn-icon" title="Reply">↶</button>
-      <button class="btn-icon" title="Reply All">⇄</button>
-      <button class="btn-icon" title="Forward">→</button>
-      <button class="btn-icon" title="Archive">▼</button>
-      <button class="btn-icon" title="Delete">×</button>
-    </div>
-  </div>
-
-  <div class="email-sender">
-    <div class="sender-info">
-      <strong>{{ Email.FromName }}</strong>
-      &lt;{{ Email.FromAddress }}&gt;
-    </div>
-    <div class="email-date">{{ Email.Date }}</div>
-  </div>
-
-  <div class="email-recipients">
-    <div>
-      <strong>To:</strong>
-      {{ Email.To }}
-    </div>
-    {% if Email.Cc %}
-      <div>
-        <strong>Cc:</strong>
-        {{ Email.Cc }}
-      </div>
-    {% endif %}
-  </div>
-
-  {% if Email.Attachments %}
-    <div class="email-attachments">
-      <strong>Attachments:</strong>
-      {% for attachment in Email.Attachments %}
-        <a href="#" class="attachment">{{ attachment.Filename }} ({{ attachment.Size }})</a>
-      {% endfor %}
-    </div>
-  {% endif %}
-
-  <div class="email-body">{{ Email.Body|safe }}</div>
-{% else %}
-  <div class="no-email-selected">
-    <p>Select an email to view</p>
-  </div>
-{% endif %}
+<div class="no-email-selected">
+  <p>Select an email to view</p>
+</div>