From abb84b6712e0a5a7ef8fe1ca19deb35c88943dc7 Mon Sep 17 00:00:00 2001
From: MarekWo <mwojtaszek@gmail.com>
Date: Thu, 1 Jan 2026 22:09:20 +0100
Subject: [PATCH] fix: Update DM badge without full page reload to avoid
 viewport corruption
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/app/templates/index.html b/app/templates/index.html
index 568a464..717b775 100644
--- a/app/templates/index.html
+++ b/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);
+                }
             });
         }