fix: Update DM badge without full page reload to avoid viewport corruption

Replace full page reload with targeted badge update when DM modal closes.
This prevents the viewport corruption issue that was reintroduced by
window.location.reload() in the previous commit.

Problem:
- Previous solution used window.location.reload() to update badges
- This caused viewport corruption (status bar hidden under system UI)
- Same issue we solved by using modals instead of navigation

New solution:
- Fetch latest unread counts from /api/dm/updates when modal closes
- Update only the green DM badge (notification-badge-dm) on notification bell
- No page reload = no viewport corruption
- Keeps modal solution benefits intact

Changes:
- Remove window.location.reload() from hidden.bs.modal event listener
- Add async fetch to /api/dm/updates endpoint
- Update notification-badge-dm element directly using DOM manipulation
- Handle badge creation/update/hiding based on unread count

Result:
- DM badges update correctly after closing modal
- No viewport corruption
- Fast, smooth user experience

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

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

app/templates/index.html

@@ -193,9 +193,36 @@
                 }
             });
 
-            // Reload page when DM modal is closed to update unread badges
-            dmModal.addEventListener('hidden.bs.modal', function () {
-                window.location.reload();
+            // Update DM badges when modal is closed (without full page reload)
+            dmModal.addEventListener('hidden.bs.modal', async function () {
+                try {
+                    // Fetch latest DM unread counts
+                    const response = await fetch('/api/dm/updates?last_seen={}');
+                    if (response.ok) {
+                        const data = await response.json();
+                        const totalUnread = data.total_unread || 0;
+
+                        // Update the green DM badge on notification bell
+                        const bellContainer = document.getElementById('notificationBell');
+                        if (bellContainer) {
+                            let dmBadge = bellContainer.querySelector('.notification-badge-dm');
+
+                            if (totalUnread > 0) {
+                                if (!dmBadge) {
+                                    dmBadge = document.createElement('span');
+                                    dmBadge.className = 'notification-badge-dm';
+                                    bellContainer.appendChild(dmBadge);
+                                }
+                                dmBadge.textContent = totalUnread > 99 ? '99+' : totalUnread;
+                                dmBadge.style.display = 'inline-block';
+                            } else if (dmBadge) {
+                                dmBadge.style.display = 'none';
+                            }
+                        }
+                    }
+                } catch (error) {
+                    console.error('Error updating DM badges:', error);
+                }
             });
         }