Send button modal added.

packetserver/http/templates/base.html

@@ -28,5 +28,70 @@
 
     <script src="{{ url_for('static', path='/js/bootstrap.bundle.min.js') }}"></script>
     {% block scripts %}{% endblock %}
+
+<!-- Compose Message Modal -->
+<div class="modal fade" id="composeModal" tabindex="-1" aria-labelledby="composeModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <form id="composeForm">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="composeModalLabel">Compose New Message</h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label for="to_call" class="form-label">To (callsign)</label>
+                        <input type="text" class="form-control" id="to_call" name="to_call" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="message_text" class="form-label">Message</label>
+                        <textarea class="form-control" id="message_text" name="text" rows="8" required></textarea>
+                    </div>
+                    <div id="composeStatus" class="alert" role="alert" style="display:none;"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Send Message</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+    // Shared JS for compose (already in dashboard—keep if moved)
+    document.getElementById('composeForm')?.addEventListener('submit', async function(e) {
+        e.preventDefault();
+        const status = document.getElementById('composeStatus');
+        status.style.display = 'none';
+
+        const formData = new FormData(this);
+        try {
+            const response = await fetch('/api/v1/messages', {
+                method: 'POST',
+                body: formData,
+                credentials: 'include'
+            });
+            const result = await response.json();
+            if (response.ok) {
+                status.className = 'alert alert-success';
+                status.textContent = 'Message sent successfully!';
+                status.style.display = 'block';
+                this.reset();
+                setTimeout(() => bootstrap.Modal.getInstance(document.getElementById('composeModal')).hide(), 1500);
+                // Optional: refresh page after send
+                setTimeout(() => location.reload(), 2000);
+            } else {
+                status.className = 'alert alert-danger';
+                status.textContent = result.detail || 'Failed to send message';
+                status.style.display = 'block';
+            }
+        } catch (err) {
+            status.className = 'alert alert-danger';
+            status.textContent = 'Network error';
+            status.style.display = 'block';
+        }
+    });
+</script>
 </body>
 </html>

packetserver/http/templates/message_list.html

@@ -4,6 +4,11 @@
 
 {% block content %}
 <h1>Messages</h1>
+<div class="mb-4 text-end">
+    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#composeModal">
+        Compose New Message
+    </button>
+</div>
 
 <div class="mb-3">
     <a href="?msg_type=received" class="btn btn-sm {% if msg_type == 'received' %}btn-primary{% else %}btn-outline-primary{% endif %}">Received</a>