collabmd 0.1.44 → 0.1.46

package/src/client/app/index.html

@@ -55,6 +55,21 @@
                 <span class="sidebar-create-btn-label">Create</span>
               </button>
             </div>
+            <button
+              class="ui-icon-button sidebar-options-btn"
+              id="fileExplorerOptionsBtn"
+              type="button"
+              aria-label="File explorer options"
+              aria-expanded="false"
+              aria-haspopup="menu"
+              title="File explorer options"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                <circle cx="12" cy="5" r="1"></circle>
+                <circle cx="12" cy="12" r="1"></circle>
+                <circle cx="12" cy="19" r="1"></circle>
+              </svg>
+            </button>
           </div>
         </div>
         <div class="ui-nav-tabs" id="sidebarTabs">
@@ -111,6 +126,19 @@
         <nav id="fileTree" class="file-tree" aria-label="File explorer"></nav>
         <section id="commentOverviewPanel" class="comment-overview-panel hidden" aria-label="Open comments"></section>
         <div id="gitPanel" class="git-panel hidden" aria-label="Git changes"></div>
+        <div
+          class="sidebar-resizer"
+          id="sidebarResizer"
+          role="separator"
+          aria-orientation="vertical"
+          aria-label="Resize sidebar"
+          aria-controls="sidebar"
+          aria-valuemin="220"
+          aria-valuemax="420"
+          aria-valuenow="260"
+          tabindex="0"
+          title="Drag to resize sidebar"
+        ></div>
       </aside>
 
       <button
@@ -138,7 +166,24 @@
           </div>
 
           <div class="toolbar-center" id="toolbarCenter">
-            <div class="ui-segmented-control view-toggle" role="group" aria-label="View mode">
+            <button
+              class="ui-button ui-button--secondary ui-button--compact toolbar-search-trigger"
+              id="toolbarSearchBtn"
+              type="button"
+              aria-label="Search files and text"
+              aria-controls="quickSwitcher"
+              aria-haspopup="dialog"
+              aria-keyshortcuts="Meta+K Control+K"
+              title="Search files and text (⌘K)"
+            >
+              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                <circle cx="11" cy="11" r="7"></circle>
+                <line x1="20" y1="20" x2="16.65" y2="16.65"></line>
+              </svg>
+              <span class="toolbar-search-label">Search</span>
+              <kbd class="toolbar-search-kbd">⌘K</kbd>
+            </button>
+            <div class="ui-segmented-control view-toggle" id="toolbarViewToggle" role="group" aria-label="View mode">
               <button class="ui-segmented-btn active view-btn" data-view="split" aria-label="Split view" aria-pressed="true" title="Split view">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                   <rect x="3" y="3" width="18" height="18" rx="2"></rect>
@@ -186,7 +231,7 @@
 
             <div class="user-avatars toolbar-presence-cluster" id="userAvatars"></div>
 
-            <section class="presence-panel hidden" id="presencePanel" aria-label="Online users" aria-hidden="true">
+            <section class="collaboration-popover presence-panel hidden" id="presencePanel" aria-label="Online users" aria-hidden="true">
               <div class="presence-panel-header">
                 <div>
                   <h2 class="presence-panel-title">Online now</h2>
@@ -197,7 +242,7 @@
             </section>
 
             <div class="chat-container" id="chatContainer">
-              <button class="ui-button ui-button--ghost ui-button--toolbar chat-toggle-btn" id="chatToggleBtn" aria-label="Open team chat" aria-expanded="false" title="Team chat">
+              <button type="button" class="ui-button ui-button--ghost ui-button--toolbar chat-toggle-btn" id="chatToggleBtn" aria-label="Open team chat" aria-controls="chatPanel" aria-expanded="false" title="Team chat">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                   <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
                 </svg>
@@ -206,23 +251,44 @@
               </button>
               <div class="toast-container chat-toast-container" id="chatToastContainer" aria-live="polite" aria-atomic="true"></div>
 
-              <section class="chat-panel hidden" id="chatPanel" aria-label="Team chat">
+              <section class="collaboration-popover chat-panel hidden" id="chatPanel" role="dialog" aria-labelledby="chatPanelTitle">
                 <div class="chat-panel-header">
-                  <div>
-                    <h2 class="chat-panel-title">Team chat</h2>
-                    <p class="chat-panel-status" id="chatStatus">Syncing...</p>
+                  <div class="chat-panel-heading">
+                    <h2 class="chat-panel-title" id="chatPanelTitle">Team chat</h2>
+                    <p class="chat-panel-status" id="chatStatus" role="status" aria-live="polite" aria-atomic="true">Syncing...</p>
+                  </div>
+                  <div class="chat-panel-actions">
+                    <span class="ui-status-badge ui-status-badge--accent chat-notification-status hidden" id="chatNotificationStatus" role="status"></span>
+                    <button
+                      type="button"
+                      class="ui-button ui-button--ghost ui-button--compact chat-notification-action"
+                      id="chatNotificationBtn"
+                    >Enable desktop alerts</button>
+                    <button
+                      type="button"
+                      class="ui-icon-button chat-notification-mute-action hidden"
+                      id="chatNotificationMuteBtn"
+                      aria-label="Mute desktop alerts for one hour"
+                      aria-pressed="false"
+                      title="Mute desktop alerts for one hour"
+                    >
+                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9"></path>
+                        <path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
+                        <path class="chat-notification-mute-slash" d="m4 4 16 16"></path>
+                      </svg>
+                    </button>
+                    <button type="button" class="ui-icon-button chat-close-btn" id="chatCloseBtn" aria-label="Close team chat" title="Close team chat">
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                        <line x1="18" y1="6" x2="6" y2="18"></line>
+                        <line x1="6" y1="6" x2="18" y2="18"></line>
+                      </svg>
+                    </button>
                   </div>
-                  <button
-                    class="ui-button ui-button--secondary ui-button--compact ui-button--action ui-button--surface ui-button--pill chat-notification-action"
-                    id="chatNotificationBtn"
-                    type="button"
-                  >
-                    Enable alerts
-                  </button>
                 </div>
 
-                <div class="chat-empty-state" id="chatEmptyState">
-                  Temporary room chat for whoever is online right now.
+                <div class="ui-empty-state ui-empty-state--compact chat-empty-state" id="chatEmptyState">
+                  Messages are visible to everyone in this room.
                 </div>
                 <div class="chat-messages hidden" id="chatMessages" role="log" aria-live="polite" aria-relevant="additions text"></div>
 
@@ -231,10 +297,11 @@
                     type="text"
                     class="ui-input chat-input"
                     id="chatInput"
-                    placeholder="Send a quick update..."
+                    placeholder="Message the room..."
                     autocomplete="off"
                     spellcheck="true"
                     maxlength="280"
+                    enterkeyhint="send"
                     aria-label="Team chat message"
                   >
                   <button type="submit" class="ui-button ui-button--primary chat-send-btn">Send</button>
@@ -290,6 +357,18 @@
                 <span class="ui-toolbar-button-label">Search files</span>
               </button>
 
+              <button class="ui-button ui-button--ghost ui-button--toolbar ui-button--toggle toolbar-vim-button" id="toggleVimModeBtn" aria-label="Enable Vim keybindings" aria-pressed="false" title="Enable Vim keybindings">
+                <span class="toolbar-vim-icon" aria-hidden="true">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
+                    <rect x="3" y="4" width="18" height="16" rx="2"></rect>
+                    <path d="m7 9 3 3-3 3"></path>
+                    <path d="M13 15h4"></path>
+                  </svg>
+                </span>
+                <span class="ui-toolbar-button-label">Vim</span>
+                <span class="ui-pill-badge ui-pill-badge--muted toolbar-vim-state" id="vimModeToggleLabel">Off</span>
+              </button>
+
               <details class="toolbar-overflow-group hidden" id="exportMenuGroup">
                 <summary class="ui-button ui-button--ghost ui-button--toolbar toolbar-overflow-group-toggle" aria-label="Export options" title="Export">
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -646,29 +725,32 @@
 
     <div class="toast-container" id="toastContainer"></div>
 
-    <div class="qs-overlay" id="quickSwitcher">
+    <div class="qs-overlay" id="quickSwitcher" role="dialog" aria-modal="true" aria-labelledby="quickSwitcherTitle" aria-hidden="true">
       <div class="qs-modal">
+        <h2 class="sr-only" id="quickSwitcherTitle">Search files and text</h2>
         <div class="qs-mode-tabs" role="tablist" aria-label="Search mode">
-          <button class="qs-mode-tab active" type="button" role="tab" aria-selected="true" data-qs-mode="files">Files</button>
-          <button class="qs-mode-tab" type="button" role="tab" aria-selected="false" data-qs-mode="text">Text</button>
+          <button class="qs-mode-tab active" id="quickSwitcherFilesTab" type="button" role="tab" aria-controls="quickSwitcherResults" aria-selected="true" data-qs-mode="files">Files</button>
+          <button class="qs-mode-tab" id="quickSwitcherTextTab" type="button" role="tab" aria-controls="quickSwitcherResults" aria-selected="false" data-qs-mode="text">Text</button>
         </div>
         <div class="qs-input-wrap">
           <svg class="qs-search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
             <circle cx="11" cy="11" r="8"></circle>
             <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
           </svg>
-          <input type="text" class="qs-input" id="quickSwitcherInput" placeholder="Search files..." autocomplete="off" spellcheck="false">
+          <input type="text" class="qs-input" id="quickSwitcherInput" placeholder="Search files..." aria-label="Search files" aria-controls="quickSwitcherResults" aria-describedby="quickSwitcherHint quickSwitcherScope" autocomplete="off" spellcheck="false">
           <kbd class="qs-kbd">esc</kbd>
         </div>
-        <div class="qs-results" id="quickSwitcherResults"></div>
-        <div class="qs-hint" id="quickSwitcherHint">Type to search files</div>
-        <div class="qs-footer" aria-hidden="true">
+        <div class="qs-scope hidden" id="quickSwitcherScope" role="note" aria-hidden="true">Exact, case-insensitive text in Markdown, Base, Mermaid, PlantUML, Draw.io, and Excalidraw files. Images are excluded.</div>
+        <div class="qs-results" id="quickSwitcherResults" role="listbox" aria-label="Search results" aria-busy="false" tabindex="-1"></div>
+        <div class="qs-hint" id="quickSwitcherHint" role="status" aria-live="polite" aria-atomic="true">Type to search files</div>
+        <div class="qs-footer">
           <span><kbd>↑</kbd><kbd>↓</kbd> Navigate</span>
           <span><kbd>↵</kbd> Open</span>
           <span><kbd>Tab</kbd> Switch mode</span>
         </div>
       </div>
     </div>
+  <script vite-ignore src="./app-config.js"></script>
   <script type="module" src="./main-entry.js"></script>
 </body>
 </html>

package/src/client/app/main-entry.js

@@ -1,12 +1,8 @@
 import darkHighlightThemeUrl from '../assets/vendor/highlight/github-dark.min.css?url';
 import lightHighlightThemeUrl from '../assets/vendor/highlight/github.min.css?url';
-import '@fontsource-variable/inter';
-import '@fontsource/jetbrains-mono';
 import '../styles/base.css';
 import '../styles/style.css';
 
-import { ensureRuntimeConfigLoaded } from '../infrastructure/runtime-config-loader.js';
-
 function ensureHighlightThemeStylesheet() {
   let themeStylesheet = document.getElementById('hljs-theme');
   if (!(themeStylesheet instanceof HTMLLinkElement)) {
@@ -21,6 +17,5 @@ function ensureHighlightThemeStylesheet() {
   themeStylesheet.dataset.lightHref = lightHighlightThemeUrl;
 }
 
-await ensureRuntimeConfigLoaded();
 ensureHighlightThemeStylesheet();
 await import('../main.js');

package/src/client/application/app-shell/chat-feature.js

@@ -1,3 +1,41 @@
+import { getUserAvatarTextColor } from '../../domain/room.js';
+
+const CHAT_ALERT_MUTE_STORAGE_KEY = 'collabmd-chat-alerts-muted-until';
+const CHAT_ALERT_MUTE_DURATION_MS = 60 * 60 * 1000;
+
+function getChatConnectionState(context) {
+  return context.lobby?.getConnectionState?.() ?? { status: 'connected', unreachable: false };
+}
+
+function isChatAtBottom(list) {
+  return list.scrollHeight - list.scrollTop - list.clientHeight <= 24;
+}
+
+function getChatAlertMuteUntil() {
+  try {
+    const mutedUntil = Number(globalThis.localStorage?.getItem(CHAT_ALERT_MUTE_STORAGE_KEY));
+    if (!Number.isFinite(mutedUntil) || mutedUntil <= Date.now()) {
+      globalThis.localStorage?.removeItem(CHAT_ALERT_MUTE_STORAGE_KEY);
+      return 0;
+    }
+    return mutedUntil;
+  } catch {
+    return 0;
+  }
+}
+
+function setChatAlertMuteUntil(mutedUntil) {
+  try {
+    if (mutedUntil > 0) {
+      globalThis.localStorage?.setItem(CHAT_ALERT_MUTE_STORAGE_KEY, String(mutedUntil));
+    } else {
+      globalThis.localStorage?.removeItem(CHAT_ALERT_MUTE_STORAGE_KEY);
+    }
+  } catch {
+    // Local storage can be unavailable in private or restricted browsing modes.
+  }
+}
+
 export const chatFeature = {
   updateChatMessages(messages, { initial = false } = {}) {
     const previousIds = new Set(this.chatMessageIds);
@@ -36,7 +74,7 @@ export const chatFeature = {
 
   toggleChatPanel() {
     if (this.chatIsOpen) {
-      this.closeChatPanel();
+      this.closeChatPanel({ restoreFocus: true });
       return;
     }
 
@@ -46,24 +84,27 @@ export const chatFeature = {
   openChatPanel() {
     this.chatIsOpen = true;
     this.chatUnreadCount = 0;
-    this.renderChat();
+    this.renderChat({ stickToBottom: true });
     requestAnimationFrame(() => {
       this.elements.chatInput?.focus();
-      this.scrollChatToBottom();
     });
   },
 
-  closeChatPanel() {
+  closeChatPanel({ restoreFocus = false } = {}) {
     if (!this.chatIsOpen) {
       return;
     }
 
     this.chatIsOpen = false;
-    this.renderChat();
+    this.renderChat({ messagesChanged: false });
+    if (restoreFocus) {
+      requestAnimationFrame(() => this.elements.chatToggleButton?.focus());
+    }
   },
 
   handleChatSubmit() {
-    if (!this.isTabActive) {
+    const connectionState = getChatConnectionState(this);
+    if (this.isTabActive === false || connectionState.status !== 'connected') {
       return;
     }
 
@@ -84,32 +125,41 @@ export const chatFeature = {
       return;
     }
 
-    this.renderChat();
+    this.renderChat({ stickToBottom: true });
   },
 
-  renderChat() {
+  renderChat({ messagesChanged = true, stickToBottom = false } = {}) {
     this.elements.chatContainer?.classList.toggle('is-open', this.chatIsOpen);
     this.elements.chatPanel?.classList.toggle('hidden', !this.chatIsOpen);
 
     this.syncChatToggleButton();
     this.syncChatNotificationButton();
-
     const list = this.elements.chatMessages;
     const emptyState = this.elements.chatEmptyState;
+    const connectionState = getChatConnectionState(this);
+    const isConnected = connectionState.status === 'connected';
+    const canSend = isConnected && this.chatInitialSyncComplete && this.isTabActive !== false;
 
     if (this.elements.chatStatus) {
-      this.elements.chatStatus.textContent = this.chatInitialSyncComplete
-        ? `${this.globalUsers.length} online`
-        : 'Syncing...';
+      this.elements.chatStatus.textContent = !this.chatInitialSyncComplete
+        ? 'Syncing...'
+        : !isConnected
+          ? connectionState.unreachable ? 'Server unreachable' : 'Reconnecting...'
+          : `${this.globalUsers.length} online`;
     }
 
-    if (!list) {
-      return;
+    const sendButton = this.elements.chatForm?.querySelector?.('button[type="submit"]');
+    if (sendButton) {
+      sendButton.disabled = !canSend;
+      sendButton.title = canSend ? 'Send message' : 'Chat is unavailable while disconnected';
     }
 
-    list.replaceChildren();
+    if (!list || !this.chatIsOpen || !messagesChanged) {
+      return;
+    }
 
     if (this.chatMessages.length === 0) {
+      list.replaceChildren();
       emptyState?.classList.remove('hidden');
       list.classList.add('hidden');
       return;
@@ -118,13 +168,14 @@ export const chatFeature = {
     emptyState?.classList.add('hidden');
     list.classList.remove('hidden');
 
+    const wasAtBottom = stickToBottom || isChatAtBottom(list);
     const fragment = document.createDocumentFragment();
     this.chatMessages.forEach((message) => {
       fragment.appendChild(this.createChatMessageElement(message));
     });
-    list.appendChild(fragment);
+    list.replaceChildren(fragment);
 
-    if (this.chatIsOpen) {
+    if (wasAtBottom) {
       this.scrollChatToBottom();
     }
   },
@@ -137,7 +188,9 @@ export const chatFeature = {
 
     const avatar = document.createElement('div');
     avatar.className = 'chat-message-avatar';
-    avatar.style.backgroundColor = message.userColor || 'var(--color-primary)';
+    const avatarColor = message.userColor || 'var(--color-primary-active)';
+    avatar.style.backgroundColor = avatarColor;
+    avatar.style.color = getUserAvatarTextColor(message.userColor);
     avatar.textContent = (message.userName || '?').charAt(0).toUpperCase();
     avatar.setAttribute('aria-hidden', 'true');
 
@@ -160,7 +213,7 @@ export const chatFeature = {
     const fileLabel = this.getChatMessageFileLabel(message.filePath);
     if (fileLabel) {
       const file = document.createElement('span');
-      file.className = 'chat-message-file';
+      file.className = 'ui-pill chat-message-file';
       file.textContent = fileLabel;
       meta.append(file);
     }
@@ -212,6 +265,92 @@ export const chatFeature = {
     return `${sender}: ${compactText}`;
   },
 
+  syncChatNotificationButton() {
+    const button = this.elements.chatNotificationButton;
+    const muteButton = this.elements.chatNotificationMuteButton;
+    const status = this.elements.chatNotificationStatus;
+    if (!button && !muteButton && !status) {
+      return;
+    }
+
+    const permission = this.notifications?.getPermission?.() ?? 'unsupported';
+    const enabled = permission === 'granted';
+    const muted = enabled && getChatAlertMuteUntil() > 0;
+    const blocked = permission === 'denied';
+    const statusState = enabled
+      ? {
+          text: muted ? 'Alerts muted' : 'Alerts on',
+          label: muted ? 'Desktop alerts muted' : 'Desktop alerts enabled',
+        }
+      : blocked
+        ? {
+            text: 'Alerts blocked',
+            label: 'Desktop alerts blocked in browser settings',
+          }
+        : null;
+
+    if (button) {
+      button.classList.toggle('hidden', permission !== 'default');
+      button.disabled = false;
+      button.removeAttribute('aria-pressed');
+      button.textContent = 'Enable desktop alerts';
+      button.title = 'Allow desktop alerts for new chat messages';
+    }
+
+    if (muteButton) {
+      muteButton.classList.toggle('hidden', !enabled);
+      muteButton.disabled = false;
+      muteButton.setAttribute('aria-pressed', String(muted));
+      const muteLabel = muted ? 'Unmute desktop alerts' : 'Mute desktop alerts for one hour';
+      muteButton.setAttribute('aria-label', muteLabel);
+      muteButton.title = muteLabel;
+    }
+
+    if (status) {
+      status.classList.toggle('hidden', !statusState);
+      status.textContent = statusState?.text ?? '';
+      if (statusState) {
+        status.setAttribute('aria-label', statusState.label);
+        status.title = statusState.label;
+      } else {
+        status.removeAttribute('aria-label');
+        status.removeAttribute('title');
+      }
+      status.classList.toggle('ui-status-badge--accent', enabled && !muted);
+      status.classList.toggle('ui-status-badge--muted', blocked || muted);
+    }
+  },
+
+  async handleChatNotificationToggle() {
+    const permission = await this.notifications?.requestPermission?.();
+    this.syncChatNotificationButton();
+
+    if (permission === 'granted') {
+      return;
+    }
+
+    if (permission === 'denied') {
+      (this.chatToastController ?? this.toastController)?.show(
+        'Desktop alerts are blocked. Allow them in browser site settings.',
+        { duration: 5000, tone: 'warning' },
+      );
+      return;
+    }
+
+    if (permission === 'unsupported') {
+      (this.chatToastController ?? this.toastController)?.show(
+        'This browser does not support desktop alerts.',
+        { duration: 5000, tone: 'warning' },
+      );
+    }
+  },
+
+  toggleChatNotificationMute() {
+    const mutedUntil = getChatAlertMuteUntil();
+    setChatAlertMuteUntil(mutedUntil > 0 ? 0 : Date.now() + CHAT_ALERT_MUTE_DURATION_MS);
+    this.renderChat({ messagesChanged: false });
+  },
+
   syncChatToggleButton() {
     const button = this.elements.chatToggleButton;
     const badge = this.elements.chatToggleBadge;
@@ -224,6 +363,7 @@ export const chatFeature = {
 
     button.classList.toggle('is-active', this.chatIsOpen);
     button.classList.toggle('is-unread', shouldEmphasizeUnread);
+    button.setAttribute('aria-controls', 'chatPanel');
     button.setAttribute('aria-expanded', String(this.chatIsOpen));
     button.setAttribute(
       'aria-label',
@@ -241,123 +381,39 @@ export const chatFeature = {
     badge.textContent = this.chatUnreadCount > 9 ? '9+' : String(this.chatUnreadCount);
   },
 
-  syncChatNotificationButton() {
-    const button = this.elements.chatNotificationButton;
-    if (!button) {
-      return;
-    }
-
-    const permission = this.notifications.getPermission();
-    this.chatNotificationPermission = permission;
-
-    let label = 'Enable alerts';
-    let title = 'Enable browser notifications for new chat messages';
-    let pressed = false;
-
-    if (permission === 'unsupported') {
-      label = 'Alerts unavailable';
-      title = 'Browser notifications are unavailable here';
-    } else if (permission === 'denied') {
-      label = 'Alerts off';
-      title = 'Browser notifications are blocked for this site';
-    } else if (permission === 'granted') {
-      pressed = this.chatNotificationsEnabled;
-      label = pressed ? 'Alerts on' : 'Alerts off';
-      title = pressed
-        ? 'Disable browser notifications for chat'
-        : 'Enable browser notifications for chat';
-    }
-
-    button.textContent = label;
-    button.title = title;
-    button.setAttribute('aria-pressed', String(pressed));
-    button.classList.toggle('is-enabled', pressed);
-    button.classList.toggle('is-blocked', permission === 'denied');
-  },
-
-  async handleChatNotificationToggle() {
-    const permission = this.notifications.getPermission();
-    this.chatNotificationPermission = permission;
-
-    if (permission === 'unsupported') {
-      this.toastController.show('Browser notifications are unavailable here');
-      this.syncChatNotificationButton();
-      return;
-    }
-
-    if (permission === 'denied') {
-      this.chatNotificationsEnabled = false;
-      this.preferences.setChatNotificationsEnabled(false);
-      this.toastController.show('Browser notifications are blocked for this site');
-      this.syncChatNotificationButton();
-      return;
-    }
-
-    if (permission === 'default') {
-      const nextPermission = await this.notifications.requestPermission();
-      this.chatNotificationPermission = nextPermission;
-
-      if (nextPermission !== 'granted') {
-        this.chatNotificationsEnabled = false;
-        this.preferences.setChatNotificationsEnabled(false);
-        if (nextPermission === 'denied') {
-          this.toastController.show('Browser notifications were blocked');
-        }
-        this.syncChatNotificationButton();
-        return;
-      }
-
-      this.chatNotificationsEnabled = true;
-      this.preferences.setChatNotificationsEnabled(true);
-      this.syncChatNotificationButton();
-      return;
-    }
-
-    this.chatNotificationsEnabled = !this.chatNotificationsEnabled;
-    this.preferences.setChatNotificationsEnabled(this.chatNotificationsEnabled);
-    this.syncChatNotificationButton();
-  },
-
   maybeNotifyChatMessage(message) {
     if (!this.chatInitialSyncComplete) {
       return;
     }
 
-    if (document.hidden) {
-      this.maybeShowBrowserChatNotification(message);
+    if (this.isTabActive === false || this.chatIsOpen || getChatAlertMuteUntil() > 0) {
       return;
     }
 
-    if (!this.isTabActive || this.chatIsOpen) {
-      return;
+    const pageHidden = Boolean(
+      globalThis.document?.hidden || globalThis.document?.visibilityState === 'hidden',
+    );
+    const pageFocused = typeof globalThis.document?.hasFocus === 'function'
+      ? globalThis.document.hasFocus()
+      : !pageHidden;
+    let notification = null;
+    if (pageHidden || !pageFocused) {
+      notification = this.notifications?.show?.({
+        body: String(message?.text ?? '').replace(/\s+/g, ' ').trim(),
+        onClick: () => {
+          window.focus?.();
+          notification?.close?.();
+          this.openChatPanel();
+        },
+        tag: `collabmd-chat-${message?.id ?? 'message'}`,
+        title: `New message from ${message?.userName || 'Someone'}`,
+      });
     }
 
-    (this.chatToastController ?? this.toastController).show(this.formatChatToastMessage(message), 4000);
-  },
-
-  maybeShowBrowserChatNotification(message) {
-    if (!this.chatNotificationsEnabled || this.notifications.getPermission() !== 'granted') {
+    if (notification) {
       return;
     }
 
-    const title = `CollabMD chat • ${message.userName}`;
-    const fileLabel = this.getChatMessageFileLabel(message.filePath);
-    const body = fileLabel ? `${fileLabel}: ${message.text}` : message.text;
-    const notification = this.notifications.createNotification({
-      body,
-      onClick: () => {
-        if (message.filePath) {
-          this.navigation.navigateToFile(message.filePath);
-        }
-      },
-      tag: `collabmd-chat-${message.id}`,
-      title,
-    });
-
-    if (notification) {
-      setTimeout(() => {
-        notification.close?.();
-      }, 6000);
-    }
+    (this.chatToastController ?? this.toastController).show(this.formatChatToastMessage(message), 4000);
   },
 };