Improve DM unread indicators and profile modal layout

components/profile-modal.html

@@ -148,11 +148,16 @@
               <button
                 id="profileNavMessages"
                 type="button"
-                class="btn-ghost focus-ring w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
+                class="btn-ghost focus-ring relative w-full justify-start gap-2 px-3 py-2 text-xs font-medium"
                 aria-controls="profilePaneMessages"
                 aria-selected="false"
               >
                 Messages
+                <span
+                  id="profileMessagesUnreadDot"
+                  class="profile-nav__unread-dot"
+                  aria-hidden="true"
+                ></span>
               </button>
               <button
                 id="profileNavHistory"

css/tailwind.source.css

@@ -237,10 +237,10 @@
 
   #profileUnreadDot {
     position: absolute;
-    top: var(--space-3xs);
-    right: var(--space-3xs);
-    width: calc(var(--space-2xs) + var(--space-3xs));
-    height: calc(var(--space-2xs) + var(--space-3xs));
+    top: var(--space-2xs);
+    right: var(--space-2xs);
+    width: var(--space-sm);
+    height: var(--space-sm);
     border-radius: 999px;
     border: var(--border-width-hairline) solid var(--color-page);
     background-color: var(--status-danger);
@@ -2820,6 +2820,7 @@
     min-block-size: 100%;
     max-block-size: none;
     overflow: hidden;
+    --modal-sheet-inline-max: var(--profile-modal-inline-max);
     --profile-modal-scale: 0.9;
     --profile-modal-gap: calc(
       (var(--space-md) - var(--space-3xs)) * var(--profile-modal-scale)
@@ -3008,6 +3009,23 @@
     overflow-x: hidden;
   }
 
+  .profile-nav__unread-dot {
+    position: absolute;
+    top: var(--space-3xs);
+    right: var(--space-3xs);
+    width: var(--space-sm);
+    height: var(--space-sm);
+    border-radius: 999px;
+    border: var(--border-width-hairline) solid var(--surface-panel);
+    background-color: var(--status-danger);
+    display: none;
+    pointer-events: none;
+  }
+
+  .profile-nav__unread-dot.is-visible {
+    display: block;
+  }
+
   .profile-modal__panes {
     display: flex;
     flex: 1 1 auto;
@@ -5006,6 +5024,12 @@
     min-height: 100vh;
   }
 
+  .profile-modal .dm-app-shell {
+    min-height: 0;
+    height: auto;
+    padding: var(--space-md);
+  }
+
   .dm-app-shell__sidebar,
   .dm-app-shell__main {
     border-radius: var(--radius-lg);
@@ -5014,6 +5038,12 @@
     box-shadow: var(--shadow-soft);
   }
 
+  .profile-modal .dm-app-shell__sidebar,
+  .profile-modal .dm-app-shell__main {
+    height: auto;
+    min-height: 0;
+  }
+
   .dm-app-shell__sidebar {
     display: flex;
     flex-direction: column;
@@ -5035,6 +5065,11 @@
     background: var(--surface-raised);
   }
 
+  .profile-modal .dm-app-shell__main,
+  .profile-modal .dm-app-shell__sidebar {
+    min-width: 0;
+  }
+
   .dm-conversation-list {
     display: flex;
     flex-direction: column;
@@ -5686,8 +5721,8 @@
     }
 
     .dm-app-shell__sidebar {
-    flex: 0 0 var(--size-18rem);
-    max-width: var(--size-20rem);
+      flex: 0 0 var(--size-18rem);
+      max-width: var(--size-20rem);
       height: calc(100vh - var(--space-lg) * 2);
     }
 
@@ -5701,6 +5736,24 @@
     }
   }
 
+  @media (min-width: theme("screens.md")) {
+    .profile-modal .dm-app-shell {
+      flex-direction: row;
+      align-items: stretch;
+    }
+
+    .profile-modal .dm-app-shell__sidebar {
+      flex: 0 0 var(--size-18rem);
+      max-width: var(--size-20rem);
+      height: auto;
+    }
+
+    .profile-modal .dm-app-shell__main {
+      flex: 1 1 auto;
+      height: auto;
+    }
+  }
+
   @media (min-width: theme("screens.lg")) {
     .dm-app-shell__sidebar {
       flex-basis: var(--size-20rem);

css/tokens.css

@@ -322,6 +322,7 @@
   --size-28rem: 28rem;
   --size-34rem: 34rem;
   --size-45rem: 45rem;
+  --size-70rem: 70rem;
 
   /* Border radii */
   --radius-sm: 0.25rem;
@@ -343,6 +344,7 @@
   --modal-shell-max-height: 90vh;
   --modal-sheet-max-height: 92vh;
   --modal-body-max-height: calc(92vh - 4rem);
+  --profile-modal-inline-max: var(--size-70rem);
   --player-modal-module-scroll-min-height: var(--size-14rem);
   --player-modal-module-scroll-max-height: var(--size-28rem);
   --modal-pane-max-height: 48vh;

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("");