feat: Replace direct navigation with fullscreen modals for DM and Contact Management

Implement modal dialogs to resolve PWA viewport corruption issues on Android.
When navigating between pages using window.location.href, the viewport height
calculation becomes corrupted, causing the status bar to be hidden under system UI.

Changes:
- Add fullscreen modals for Direct Messages and Contact Management in index.html
- Configure FAB buttons to open modals instead of navigating to new pages
- Add JavaScript to reload iframe content when modals are opened (ensures fresh data)
- Remove DM and Contact Management from offcanvas menu to avoid duplication
- Both modals use iframes to embed existing /dm and /contacts/manage pages
- Modal headers styled with appropriate colors (green for DM, blue for Contacts)

This approach bypasses the viewport corruption issue since modals don't trigger
the problematic navigation flow that occurs with page changes in PWA mode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/templates/base.html

@@ -63,17 +63,6 @@
                     <i class="bi bi-broadcast-pin" style="font-size: 1.5rem;"></i>
                     <span>Manage Channels</span>
                 </button>
-                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="navigateTo('/dm');">
-                    <i class="bi bi-envelope" style="font-size: 1.5rem;"></i>
-                    <div class="d-flex flex-grow-1 justify-content-between align-items-center">
-                        <span>Direct Messages</span>
-                        <span id="dmMenuBadge" class="badge bg-success rounded-pill" style="display: none;">0</span>
-                    </div>
-                </button>
-                <button class="list-group-item list-group-item-action d-flex align-items-center gap-3" onclick="navigateTo('/contacts/manage');">
-                    <i class="bi bi-person-check" style="font-size: 1.5rem;"></i>
-                    <span>Contact Management</span>
-                </button>
                 <div class="list-group-item">
                     <div class="d-flex align-items-center gap-3 mb-2">
                         <i class="bi bi-calendar3" style="font-size: 1.5rem;"></i>

app/templates/index.html

@@ -106,15 +106,45 @@
     </div>
 </div>
 
-<!-- TEST: Floating Action Buttons (fixed position, no layout impact) -->
+<!-- Floating Action Buttons -->
 <div class="fab-container">
-    <button class="fab fab-dm" onclick="navigateTo('/dm');" title="Test: Direct Messages">
+    <button class="fab fab-dm" data-bs-toggle="modal" data-bs-target="#dmModal" title="Direct Messages">
         <i class="bi bi-envelope-fill"></i>
     </button>
-    <button class="fab fab-contacts" onclick="navigateTo('/contacts/manage');" title="Test: Contact Management">
+    <button class="fab fab-contacts" data-bs-toggle="modal" data-bs-target="#contactsModal" title="Contact Management">
         <i class="bi bi-person-fill"></i>
     </button>
 </div>
+
+<!-- DM Modal (Full Screen) -->
+<div class="modal fade" id="dmModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen">
+        <div class="modal-content">
+            <div class="modal-header bg-success text-white">
+                <h5 class="modal-title"><i class="bi bi-envelope"></i> Direct Messages</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-0">
+                <iframe id="dmFrame" src="/dm" style="width: 100%; height: 100%; border: none;"></iframe>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Contact Management Modal (Full Screen) -->
+<div class="modal fade" id="contactsModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen">
+        <div class="modal-content">
+            <div class="modal-header bg-primary text-white">
+                <h5 class="modal-title"><i class="bi bi-person-check"></i> Contact Management</h5>
+                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body p-0">
+                <iframe id="contactsFrame" src="/contacts/manage" style="width: 100%; height: 100%; border: none;"></iframe>
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block extra_scripts %}
@@ -123,5 +153,29 @@
     window.MC_CONFIG = {
         deviceName: "{{ device_name }}"
     };
+
+    // Reload iframe content when modals are opened to ensure fresh data
+    document.addEventListener('DOMContentLoaded', function() {
+        const dmModal = document.getElementById('dmModal');
+        const contactsModal = document.getElementById('contactsModal');
+
+        if (dmModal) {
+            dmModal.addEventListener('show.bs.modal', function () {
+                const dmFrame = document.getElementById('dmFrame');
+                if (dmFrame) {
+                    dmFrame.src = dmFrame.src;
+                }
+            });
+        }
+
+        if (contactsModal) {
+            contactsModal.addEventListener('show.bs.modal', function () {
+                const contactsFrame = document.getElementById('contactsFrame');
+                if (contactsFrame) {
+                    contactsFrame.src = contactsFrame.src;
+                }
+            });
+        }
+    });
 </script>
 {% endblock %}