Improve DM unread indicators and profile modal layout

js/app.js

@@ -4684,7 +4684,9 @@ class Application {
     }
 
     this.applyLoggedOutUiState();
-    if (this.appChromeController?.setUnreadDmIndicator) {
+    if (typeof this.refreshUnreadDmIndicator === "function") {
+      void this.refreshUnreadDmIndicator({ reason: "auth-logout" });
+    } else if (this.appChromeController?.setUnreadDmIndicator) {
       this.appChromeController.setUnreadDmIndicator(false);
     }
 

js/ui/applicationBootstrap.js

@@ -687,15 +687,24 @@ export default class ApplicationBootstrap {
 
     app.videosMap = app.nostrService.getVideosMap();
     app.refreshUnreadDmIndicator = async ({ reason = "" } = {}) => {
-      if (
-        !app.appChromeController ||
-        typeof app.appChromeController.setUnreadDmIndicator !== "function"
-      ) {
-        return;
-      }
+      const applyIndicatorState = (visible) => {
+        if (
+          app.appChromeController &&
+          typeof app.appChromeController.setUnreadDmIndicator === "function"
+        ) {
+          app.appChromeController.setUnreadDmIndicator(visible);
+        }
+
+        if (
+          app.profileController &&
+          typeof app.profileController.setMessagesUnreadIndicator === "function"
+        ) {
+          app.profileController.setMessagesUnreadIndicator(visible);
+        }
+      };
 
       if (typeof app.isUserLoggedIn === "function" && !app.isUserLoggedIn()) {
-        app.appChromeController.setUnreadDmIndicator(false);
+        applyIndicatorState(false);
         return;
       }
 
@@ -704,7 +713,7 @@ export default class ApplicationBootstrap {
         typeof app.nostrService.listDirectMessageConversationSummaries !==
           "function"
       ) {
-        app.appChromeController.setUnreadDmIndicator(false);
+        applyIndicatorState(false);
         return;
       }
 
@@ -717,14 +726,14 @@ export default class ApplicationBootstrap {
               return sum + (Number.isFinite(count) ? count : 0);
             }, 0)
           : 0;
-        app.appChromeController.setUnreadDmIndicator(totalUnseen > 0);
+        applyIndicatorState(totalUnseen > 0);
       } catch (error) {
         devLogger.warn(
           "[Application] Failed to refresh DM unread indicator",
           reason,
           error,
         );
-        app.appChromeController.setUnreadDmIndicator(false);
+        applyIndicatorState(false);
       }
     };
 
@@ -746,8 +755,8 @@ export default class ApplicationBootstrap {
     );
     nostrUnsubscribes.push(
       app.nostrService.on("directMessages:cleared", () => {
-        if (app.appChromeController) {
-          app.appChromeController.setUnreadDmIndicator(false);
+        if (typeof app.refreshUnreadDmIndicator === "function") {
+          void app.refreshUnreadDmIndicator({ reason: "dm-cleared" });
         }
       }),
     );

js/ui/profileModalController.js

@@ -1297,6 +1297,7 @@ export class ProfileModalController {
     this.profileMessagesRelayStatus = null;
     this.profileMessagesReadReceiptsToggle = null;
     this.profileMessagesTypingToggle = null;
+    this.profileMessagesUnreadDot = null;
     this.dmAppShellContainer = null;
     this.dmAppShell = null;
     this.profileLinkPreviewAutoToggle = null;
@@ -1615,6 +1616,8 @@ export class ProfileModalController {
       document.getElementById("profileMessagesReadReceiptsToggle") || null;
     this.profileMessagesTypingToggle =
       document.getElementById("profileMessagesTypingToggle") || null;
+    this.profileMessagesUnreadDot =
+      document.getElementById("profileMessagesUnreadDot") || null;
     this.dmAppShellContainer =
       document.getElementById("dmAppShellMount") || null;
     this.profileLinkPreviewAutoToggle =
@@ -2758,6 +2761,23 @@ export class ProfileModalController {
     }
   }
 
+  setMessagesUnreadIndicator(visible) {
+    if (!(this.profileMessagesUnreadDot instanceof HTMLElement)) {
+      return;
+    }
+
+    const button = this.navButtons.messages;
+    const isVisible =
+      button instanceof HTMLElement &&
+      !button.classList.contains("hidden") &&
+      !button.hasAttribute("hidden");
+
+    this.profileMessagesUnreadDot.classList.toggle(
+      "is-visible",
+      Boolean(visible) && isVisible,
+    );
+  }
+
   updateMessageComposerState() {
     const input = this.profileMessageInput;
     const button = this.profileMessageSendButton;
@@ -12593,6 +12613,7 @@ export class ProfileModalController {
     this.clearHashtagInputs();
     this.setHashtagStatus("", "muted");
     this.handleActiveDmIdentityChanged(null);
+    this.setMessagesUnreadIndicator(false);
     this.populateDmRelayPreferences();
     this.setDmRelayPreferencesStatus("");