collabmd 0.1.44 → 0.1.45

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);
   },
 };

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

@@ -97,7 +97,7 @@ export const commentsFeature = {
     });
 
     if (this.currentFilePath !== filePath || !this.session) {
-      await this.openFile(filePath);
+      await this.workspaceRouteController.openFile(filePath);
     }
 
     this.setSidebarTab('comments');

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

@@ -148,7 +148,7 @@ export const gitFeature = {
 
   syncMainChrome({ badgeLabel = '', mode, title = null } = {}) {
     const isSpecialMode = mode === 'diff' || mode === 'history' || mode === 'history-preview';
-    this.elements.toolbarCenter?.classList.toggle('hidden', isSpecialMode);
+    this.elements.toolbarViewToggle?.classList.toggle('hidden', isSpecialMode);
     this.elements.mobileViewToggle?.classList.toggle('hidden', isSpecialMode);
     this.elements.userCount?.classList.toggle('hidden', isSpecialMode);
     this.elements.toolbarDiffBadge?.classList.toggle('hidden', !badgeLabel);
@@ -164,7 +164,6 @@ export const gitFeature = {
   },
 
   async showGitDiff({ filePath = null, scope = 'all' } = {}) {
-    await this.ensureGitControllers?.();
     this.clearStaticPreviewDocument?.();
     this.gitPanel.setSelection(filePath ? { path: filePath, scope, source: 'workspace' } : {});
     this.gitPanel.setMode('changes');
@@ -179,7 +178,6 @@ export const gitFeature = {
   },
 
   async showGitCommit({ hash, path = null, historyFilePath = null } = {}) {
-    await this.ensureGitControllers?.();
     this.clearStaticPreviewDocument?.();
     this.gitPanel.setMode('history');
     this.gitPanel.setSelection(hash ? { commitHash: hash, path, source: 'commit' } : { source: 'commit' });
@@ -194,7 +192,6 @@ export const gitFeature = {
   },
 
   async showGitHistory() {
-    await this.ensureGitControllers?.();
     this.clearStaticPreviewDocument?.();
     this.gitPanel.setMode('history');
     this.gitPanel.setSelection({ source: 'commit' });
@@ -207,7 +204,6 @@ export const gitFeature = {
   },
 
   async showGitFileHistory({ filePath = null } = {}) {
-    await this.ensureGitControllers?.();
     if (!filePath) {
       this.workspaceRouteController?.showEmptyState?.();
       return;
@@ -240,7 +236,7 @@ export const gitFeature = {
       ...data,
       currentFilePath: resolvedCurrentFilePath,
     });
-    this.resetPreviewMode();
+    this.workspacePreviewController.resetPreviewMode();
     this.elements.markdownToolbar?.classList.add('hidden');
     this.elements.outlineToggle?.classList.toggle('hidden', data.fileKind !== 'markdown');
 
@@ -256,7 +252,7 @@ export const gitFeature = {
     }
 
     this.elements.outlineToggle?.classList.add('hidden');
-    this.renderTextFilePreview?.({
+    this.workspacePreviewController.renderTextFilePreview({
       content: data.content,
       filePath: resolvedCurrentFilePath,
     });
@@ -266,7 +262,7 @@ export const gitFeature = {
     console.error('[git-preview] Failed to load file snapshot:', error);
     this.clearStaticPreviewDocument?.();
     this.toastController.show('Failed to load historical file preview');
-    this.renderTextFilePreview?.({
+    this.workspacePreviewController.renderTextFilePreview({
       content: 'Failed to load historical file preview.',
       filePath: resolvedCurrentFilePath,
     });
@@ -335,7 +331,6 @@ export const gitFeature = {
   },
 
   async refreshGitAfterAction({ filePath = null, preferredScope = null } = {}) {
-    await this.ensureGitControllers?.();
     await this.gitPanel.refresh({ force: true });
 
     const route = this.navigation.getHashRoute();

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

@@ -1,3 +1,5 @@
+import { getUserAvatarTextColor } from '../../domain/room.js';
+
 const MAX_INLINE_AVATARS = 5;
 
 function compareUserNames(left, right) {
@@ -65,7 +67,7 @@ export const presenceFeature = {
     this.globalUsers = users;
     this.syncFollowedUser();
     this.renderAvatars();
-    this.renderChat();
+    this.renderChat({ messagesChanged: false });
     this.renderPresence();
     this.syncCurrentUserName();
   },
@@ -126,6 +128,7 @@ export const presenceFeature = {
       avatar.className = 'user-avatar';
       avatar.classList.toggle('is-local', user.isLocal);
       avatar.style.backgroundColor = user.color;
+      avatar.style.color = getUserAvatarTextColor(user.color);
       avatar.classList.toggle('is-following', user.clientId === this.followedUserClientId);
 
       const initial = document.createElement('span');
@@ -181,8 +184,6 @@ export const presenceFeature = {
       overflow.appendChild(overflowLabel);
       avatars.appendChild(overflow);
     }
-
-    this.renderPresencePanel();
   },
 
   openPresencePanel() {
@@ -196,7 +197,6 @@ export const presenceFeature = {
     this.closeToolbarOverflowMenu?.();
     this.renderAvatars();
     this.renderPresence();
-    this.renderPresencePanel();
   },
 
   closePresencePanel() {
@@ -207,7 +207,6 @@ export const presenceFeature = {
     this.presencePanelOpen = false;
     this.renderAvatars();
     this.renderPresence();
-    this.renderPresencePanel();
   },
 
   togglePresencePanel() {
@@ -227,6 +226,9 @@ export const presenceFeature = {
 
     panel.classList.toggle('hidden', !this.presencePanelOpen);
     panel.setAttribute('aria-hidden', String(!this.presencePanelOpen));
+    if (!this.presencePanelOpen) {
+      return;
+    }
 
     const orderedUsers = getPanelUsers(this.globalUsers, this.followedUserClientId);
     const effectiveConnectionState = getConnectedPresenceState(this);
@@ -268,6 +270,7 @@ export const presenceFeature = {
       const avatar = document.createElement('span');
       avatar.className = 'presence-panel-user-avatar';
       avatar.style.backgroundColor = user.color;
+      avatar.style.color = getUserAvatarTextColor(user.color);
       avatar.textContent = user.name.charAt(0).toUpperCase();
       avatar.setAttribute('aria-hidden', 'true');
 
@@ -346,10 +349,11 @@ export const presenceFeature = {
 
     this.followedUserClientId = clientId;
     this.followedCursorSignature = '';
-    this.renderAvatars();
-
-    if (closePanel) {
+    if (closePanel && this.presencePanelOpen) {
       this.closePresencePanel();
+    } else {
+      this.renderAvatars();
+      this.renderPresencePanel();
     }
 
     if (user.currentFile && user.currentFile !== this.currentFilePath) {
@@ -382,9 +386,11 @@ export const presenceFeature = {
     }
     this.followedUserClientId = null;
     this.followedCursorSignature = '';
-    this.renderAvatars();
-    if (closePanel) {
+    if (closePanel && this.presencePanelOpen) {
       this.closePresencePanel();
+    } else {
+      this.renderAvatars();
+      this.renderPresencePanel();
     }
   },