feat: implement mailbox and user creation features with validation and dropdowns

7 files changed, 99 insertions, 2 deletions

diff --git a/templates/dashboard/htmx/mailboxes.htmx.django b/templates/dashboard/htmx/mailboxes.htmx.django
index 9ccedb1..1816951 100644
--- a/templates/dashboard/htmx/mailboxes.htmx.django
+++ b/templates/dashboard/htmx/mailboxes.htmx.django
@@ -3,7 +3,11 @@
     <div class="glass rounded-xl glow-border">
         <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
             <h2 class="text-sm font-medium text-zinc-200">All Mailboxes</h2>
-            <span class="text-xs text-zinc-600">{{ total }} total</span>
+            <div class="flex items-center gap-3">
+                <span class="text-xs text-zinc-600">{{ total }} total</span>
+                {% url "dashboard.mailboxes.new" as new_mailbox_path %}
+                <a href="{{ new_mailbox_path }}" hx-get="{{ new_mailbox_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="btn-small">New Mailbox</a>
+            </div>
         </div>
         {% if items %}
         <div class="divide-y divide-white/[0.04]">
diff --git a/templates/dashboard/htmx/newmailbox.htmx.django b/templates/dashboard/htmx/newmailbox.htmx.django
new file mode 100644
index 0000000..4f201cd
--- /dev/null
+++ b/templates/dashboard/htmx/newmailbox.htmx.django
@@ -0,0 +1,52 @@
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
+<div class="slide-up flex items-start justify-center pt-12">
+    <div class="glass rounded-xl glow-border w-full max-w-lg">
+        <div class="px-5 py-4 border-b border-white/[0.04]">
+            <h2 class="text-sm font-medium text-zinc-200">Create Mailbox</h2>
+        </div>
+        <div class="p-5">
+            {% url "dashboard.mailboxes.create" as create_path %}
+            <form method="POST" action="{{ create_path }}" class="space-y-4">
+                <div>
+                    <label class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Address</label>
+                    <input type="email" name="address" required autocomplete="off" class="input-field">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Owner</label>
+                    <div class="dropdown" data-dropdown>
+                        <input type="hidden" name="user_id" data-dropdown-value>
+                        <button type="button" class="input-field text-left flex items-center justify-between" data-dropdown-trigger>
+                            <span class="truncate" data-dropdown-label>Select a user</span>
+                            <svg class="w-4 h-4 text-zinc-500 shrink-0 ml-2 transition-transform duration-150" data-dropdown-chevron fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                            </svg>
+                        </button>
+                        <div class="dropdown-menu" data-dropdown-menu>
+                            <div class="p-2 border-b border-white/[0.04]">
+                                <input type="text" placeholder="Search users..." class="dropdown-search" data-dropdown-search>
+                            </div>
+                            <div class="dropdown-options" data-dropdown-options>
+                                {% for user in users %}
+                                <button type="button" class="dropdown-option" data-dropdown-option data-value="{{ user.ID }}" data-label="{{ user.DisplayName }} ({{ user.Username }})">
+                                    <div>
+                                        <p class="text-sm text-zinc-200">{{ user.DisplayName }}</p>
+                                        <p class="text-xs text-zinc-500">{{ user.Username }}</p>
+                                    </div>
+                                </button>
+                                {% endfor %}
+                            </div>
+                            <div class="dropdown-empty hidden" data-dropdown-empty>
+                                <p class="text-xs text-zinc-500 text-center py-3">No users found</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="flex items-center gap-3 pt-2">
+                    <button type="submit" class="btn-primary">Create Mailbox</button>
+                    {% url "dashboard.mailboxes" as mailboxes_path %}
+                    <a href="{{ mailboxes_path }}" hx-get="{{ mailboxes_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-xs text-zinc-500 hover:text-zinc-300 transition-colors duration-150">Cancel</a>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/templates/dashboard/htmx/newuser.htmx.django b/templates/dashboard/htmx/newuser.htmx.django
new file mode 100644
index 0000000..826dc72
--- /dev/null
+++ b/templates/dashboard/htmx/newuser.htmx.django
@@ -0,0 +1,26 @@
+<h1 id="page-title" class="text-sm font-medium text-zinc-100" hx-swap-oob="true">{{ PageTitle }}</h1>
+<div class="slide-up flex items-start justify-center pt-12">
+    <div class="glass rounded-xl glow-border w-full max-w-lg">
+        <div class="px-5 py-4 border-b border-white/[0.04]">
+            <h2 class="text-sm font-medium text-zinc-200">Create User</h2>
+        </div>
+        <div class="p-5">
+            {% url "dashboard.users.create" as create_path %}
+            <form method="POST" action="{{ create_path }}" class="space-y-4">
+                <div>
+                    <label class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Username</label>
+                    <input type="text" name="username" required autocomplete="off" class="input-field">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Display Name</label>
+                    <input type="text" name="display_name" required autocomplete="off" class="input-field">
+                </div>
+                <div class="flex items-center gap-3 pt-2">
+                    <button type="submit" class="btn-primary">Create User</button>
+                    {% url "dashboard.users" as users_path %}
+                    <a href="{{ users_path }}" hx-get="{{ users_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="text-xs text-zinc-500 hover:text-zinc-300 transition-colors duration-150">Cancel</a>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
diff --git a/templates/dashboard/htmx/users.htmx.django b/templates/dashboard/htmx/users.htmx.django
index 6578ba2..edcf72a 100644
--- a/templates/dashboard/htmx/users.htmx.django
+++ b/templates/dashboard/htmx/users.htmx.django
@@ -3,7 +3,11 @@
     <div class="glass rounded-xl glow-border">
         <div class="flex items-center justify-between px-5 py-4 border-b border-white/[0.04]">
             <h2 class="text-sm font-medium text-zinc-200">All Users</h2>
-            <span class="text-xs text-zinc-600">{{ total }} total</span>
+            <div class="flex items-center gap-3">
+                <span class="text-xs text-zinc-600">{{ total }} total</span>
+                {% url "dashboard.users.new" as new_user_path %}
+                <a href="{{ new_user_path }}" hx-get="{{ new_user_path }}" hx-target="#content" hx-swap="innerHTML" hx-push-url="true" class="btn-small">New User</a>
+            </div>
         </div>
         {% if items %}
         <div class="divide-y divide-white/[0.04]">
diff --git a/templates/dashboard/newmailbox.django b/templates/dashboard/newmailbox.django
new file mode 100644
index 0000000..179ca88
--- /dev/null
+++ b/templates/dashboard/newmailbox.django
@@ -0,0 +1,5 @@
+{% extends "layouts/dashboard.django" %}
+
+{% block dashboard %}
+{% include "dashboard/htmx/newmailbox.htmx.django" %}
+{% endblock %}
diff --git a/templates/dashboard/newuser.django b/templates/dashboard/newuser.django
new file mode 100644
index 0000000..efb3176
--- /dev/null
+++ b/templates/dashboard/newuser.django
@@ -0,0 +1,5 @@
+{% extends "layouts/dashboard.django" %}
+
+{% block dashboard %}
+{% include "dashboard/htmx/newuser.htmx.django" %}
+{% endblock %}
diff --git a/templates/layouts/base.django b/templates/layouts/base.django
index 0a884dd..bcfab20 100644
--- a/templates/layouts/base.django
+++ b/templates/layouts/base.django
@@ -16,6 +16,7 @@
     {% block content %}{% endblock %}
     <script src="/static/js/htmx.min.js"></script>
     <script src="/static/js/navigation.js"></script>
+    <script src="/static/js/dropdown.js"></script>
     {% block scripts %}{% endblock %}
 </body>
 </html>